@font-face {
  font-family: "Riccione Serial";
  src: url("assets/fonts/riccione-extralight.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Riccione Serial";
  src: url("assets/fonts/riccione-extralight-italic.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  /* Manrope variable, replacing Formata Light as the site sans. One file covers
     the whole 200-800 axis, so weights are now REAL: the old Formata face was a
     single Light .otf declared 100-900, which (with font-synthesis: none below)
     rendered every weight identically light. Weight values across the sheet were
     retuned when this landed — see the sans weight scale note in :root. */
  font-family: "Manrope";
  src: url("assets/fonts/manrope-variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The page ground stays a cool near-white on purpose. Warming it too was
     tried on 2026-09-08 and pulled back — at that lightness a warm tint reads
     as a cream page rather than a decision, and it dragged the header with it.
     White stays white; it is the GREYS below that carry the ivory. */
  --bg: #f6f7f9;
  /* Warmed from the cool #eceef2 on 2026-09-08. Every elevated grey surface
     reads from this — the insights band, founder panel, fund-table zebra
     stripes, invest tabs — so they all warm together, on every page.
     Dialled back the same day: the first warm value was #f0ece5, an 11-point
     spread between the red and blue channels, which read as a cream panel on
     the insights band. This halves the spread to 6 and holds the lightness, so
     the band keeps the same separation from --bg and only the cast softens. */
  --bg-elev: #efeee9;
  /* The pre-ivory value of --bg-elev, kept as a token for the surfaces that
     are deliberately EXCLUDED from the warm pass. The invest tab strip and its
     panel are the current consumers — the user looked at that panel in ivory
     and asked for the grey. The home topbar has been in and out of this list
     and is presently on the warm value; see .topbar. Use this rather than
     pasting #eceef2 inline, so the exclusions stay findable and stay in step
     with each other, and so a future warm pass has one list to check. */
  --bg-elev-cool: #eceef2;
  /* The flat studio backdrop BAKED INTO the founder portrait files, measured
     off them rather than chosen: all 14 opaque JPGs in assets/founders carry
     exactly this, edge to edge. Two portraits — elon.webp and mikheil.png —
     are transparent cutouts instead and have no backdrop of their own, so the
     card behind them must supply this same value or those two cards read as a
     different colour from the other fourteen. That is what went wrong when the
     card was left on the warm --bg-elev.
     NOT a palette colour and deliberately not --bg-elev-cool, which is one
     point off it: it is a property of the image files. RE-MEASURE if the
     portraits are ever re-exported. */
  --portrait-bd: #edeef2;
  /* Brand Ivory as raw CHANNELS, so it can be composed into rgba() at an
     arbitrary alpha — a hex token cannot. For DARK grounds only: 11.5:1 on the
     navy, 1.3:1 on the light page. It NO LONGER has a twin in
     founder-chart.js — that chart's founder-led series carried the same value
     as an IVORY constant until 2026-09-09, when it went white; the pairing that
     had to be kept in step is gone. Consumers are now CSS-only. */
  --ivory-rgb: 222, 214, 201;
  /* Brand Sky Blue. NO CONSUMERS as of 2026-09-08: it was added that day for the
     Founder-led Advantage stat line and the "team" link beside it, and both went
     to ivory hours later. Normally a dead token would come straight back out —
     the 2026-09-04 rollout's --sky and --ice did — but founder-chart.js still
     reasons about this value in prose (it picks series colours that stay clear of
     it), so deleting the token would strand those notes. Left in place
     deliberately. 9.99:1 on the navy, 1.54:1 on the light --bg: dark grounds
     only, if it is ever wanted again. */
  --sky: #a8cfe5;
  --ink: #171f2f;
  --ink-soft: #2a3a52;
  --ink-mute: #5b6577;
  /* Warmed from the cool #d8dde3 on 2026-09-08, to sit with --bg-elev, then
     dialled back with it. The first warm value #dfd9ce carried a 17-point
     red-to-blue spread — nearly three times the band it borders, and the
     warmest thing on the page. This matches the band's spread of 6 and also
     restores the lightness of the cool original, which #dfd9ce had dropped by
     six points. Only surfaces that are DELIBERATELY ivory (the Frontline card)
     carry a spread above that; incidental warmth stays at 6. */
  --line: #e0ddda;
  --accent: #506e88;
  --accent-deep: #39536c;
  /* Brand secondary, used as an ACCENT MARK only — the short eyebrow dashes,
     pull-quote rules, list numerals, the ticker bar and the discipline ticks,
     plus the surviving constellation dots. The Owners Mindset panel was
     terracotta until 2026-09-08 and is now --accent-deep.
     SALMON #FAA08A on DARK grounds, site-wide from 2026-09-23, replacing
     brand terracotta #C25332. The name is kept so the ~16 consumers did not
     all have to change; read it as "the warm accent on navy".
     8.21:1 on the navy bands. Light grounds use --terracotta-on-light below.
     This hex is ALSO a literal in places that cannot read the token — FUND_LINE
     in founder-chart.js, the constellation glow in approach.html, and the
     rgba() glows on the Insights pulse dots. Change all together. */
  --terracotta: #faa08a;
  /* The accent on LIGHT grounds: #D58770, terracotta's hue (14°) at 84% value
     and 47% saturation — 2.60:1 on --bg, where plain salmon is 1.87:1. Set
     2026-09-23 after #D16D54, #DB7960 and #E6866E were each tried here; a
     brief pass put #D58770 on navy too, and the user moved navy back to
     salmon. Which consumers sit on light grounds was measured, not guessed:
     blockquote, .essay-inline-quote, .fund-slash, .invest-eyebrow::after,
     .ins-filter::after, .coverflow-progress-fill, .fla-tick,
     .fla-say-band .fla-inline, the "The founders we back" eyebrow, and the
     About pen underline (a baked data-URI hex — change it by hand).
     Navy, on --terracotta: .odds-rail-mark, .insight-kicker-dot,
     .ins-card-dot, .fund-ticker-card::before, .discipline-card::before,
     .approach-intro-eyebrow::after, plus the chart and constellation. */
  --terracotta-on-light: #d58770;
  --dark: #171f2f;
  /* Text on dark grounds is the PAGE GROUND, not pure white (2026-09-10). The
     user picked this shade off a swatch; it is exactly --bg, so the two sides
     of the site now mirror each other — the colour the light pages are made of
     is the colour the dark pages are written in, and there is one fewer white
     in the system. Pure white was reading harsh against the navy on the
     approach funnel and the Portfolio Discipline block.
     Costs nothing in contrast: 15.38:1 on --dark, against white's 15.90:1.
     Foreground only — all 43 consumers are colour, none is a background — so
     nothing that should stay pure white is touched by this. */
  --on-dark: var(--bg);
  --on-dark-mute: #a8b2c2;

  --serif: "Riccione Serial", "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Uppercase label scale — the site has two small-caps idioms, and they had
     drifted to nine different tracking values. These two tokens are the whole
     scale: use --track-eyebrow for a section eyebrow (the label above a section
     title, always 13px), and --track-label for micro labels (tags, roles,
     dates, kickers, captions — size varies with context, tracking does not).
     Dense fund-data labels and table headers stay tighter on purpose. */
  --track-eyebrow: .14em;
  --track-label: .10em;
  /* Running copy. The old .015em existed to open up Formata Light, which set
     unusually tight. Manrope is a wider, more generously spaced face and needs
     no such compensation — at .015em it read loose. Set on body so it inherits
     everywhere; the serif headings override it back to their own tracking. */
  --track-body: normal;

  --container: 1240px;
  --gutter: clamp(24px, 5vw, 64px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  letter-spacing: var(--track-body);
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ── Quotes authored in WordPress ─────────────────────────
   The editor emits a bare <blockquote> whose class names are machine
   generated (cvGsUA, a_GcMg …), so the element itself is the only stable
   hook. These values mirror .essay-inline-quote, the house treatment.
   The hand-built quote classes are class selectors and so outrank this;
   .essay-epigraph and .hero-quote additionally reset the rule and padding,
   since neither wants a left rule. */
blockquote {
  margin: 40px 0;
  padding: 0 0 0 clamp(24px, 3vw, 36px);
  border-left: 2px solid var(--terracotta-on-light);
  /* Pinned, not inherited. Pasted editor content and page-builder columns
     routinely arrive centred and inset; the house quote is flush left and
     runs the full measure of the body it sits in. */
  text-align: left;
  max-width: none;
  width: auto;
}
/* The .essay-body variant is not redundant: .essay-body p is (0,1,1) and
   would otherwise outrank a bare `blockquote p` (0,0,2), handing a quote
   inside a WordPress essay the body-copy size, colour and bottom margin. */
blockquote p,
.essay-body blockquote p {
  font-family: var(--sans);
  font-style: normal;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  text-align: left;
}
/* the editor can put several paragraphs inside one quote */
blockquote p + p,
.essay-body blockquote p + p { margin-top: .8em; }
blockquote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}

a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--accent-deep); }

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

/* ─── TOPBAR — slim utility strip above the header. In normal flow (not
   sticky), so it scrolls away while .site-header sticks to the top. ── */
.topbar {
  /* Discreet utility strip — quiet chrome, not a brand moment.
     Reads from the WARM --bg-elev, in step with the other elevated surfaces.
     This value has gone back and forth with the cool --bg-elev-cool several
     times (2026-09-09); it is currently ivory, and the cool token is still
     there if it is swapped again. Change only this line — do not inline a hex,
     and do not "harmonise" it with the header on your own. */
  background: var(--bg-elev);
  color: var(--ink-mute);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
}
.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  color: inherit;
  opacity: .65;
  transition: opacity .2s ease;
}
.topbar-link:hover { opacity: 1; }
/* On over-hero pages the header is navy. Give the topbar a DEEPER navy than the
   --dark header (#171f2f) plus a subtle hairline, so it reads as a distinct
   utility strip — the navy sibling of the grey version, which sits a shade
   deeper than the light page. Light-header pages keep the paper-grey above. */
body.over-hero .topbar {
  background: #10182a;
  color: var(--on-dark);
  border-bottom-color: rgba(255, 255, 255, .1);
}
/* Topbar on the HOME page only — static home is .page-home, WP front page gets
   .home from body_class(). (Remove this rule to show it site-wide again.) */
body:not(.page-home):not(.home) .topbar { display: none; }
/* The topbar (~35px) sits in flow above the sticky 100vh hero, pushing its
   bottom — the "click a founder" hint — off the screen edge. Trim the pinned
   hero by the topbar height on home so the composition fits the viewport again. */
body.page-home .coverflow-pin,
body.home .coverflow-pin { height: calc(100vh - 35px); }

/* ─── HEADER ───────────────────────────────────────────── */
.site-header {
  /* z-index 60: above the hero video (50) so the sticky header stays on
     top as the video scrolls up; still below the founder modal (100) */
  position: sticky; top: 0; z-index: 60;
  background: rgba(246, 247, 249, 0.92);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: background-color .35s ease, border-color .35s ease, color .35s ease,
              transform .32s ease;
}
/* Auto-hiding menu bar (2026-09-15): the inline script inside each page's
   <header> adds this while the visitor scrolls down and removes it on the
   first upward nudge. Transform, not top/display: it slides on the compositor
   and the sticky positioning underneath is untouched. */
.site-header.nav-hidden { transform: translateY(-100%); }
body.over-hero .site-header {
  background: var(--dark);
  backdrop-filter: none;
  border-bottom-color: transparent;
  color: var(--on-dark);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 92px;
  gap: 24px;
}
.brand {
  display: flex; align-items: center;
  color: inherit;
  flex-shrink: 0;
}
.brand-logo {
  height: 64px; width: auto;
  color: inherit;
  display: block;
  transition: color .35s ease;
}

.primary-nav {
  display: flex; gap: 36px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
}
.primary-nav a { color: inherit; opacity: .82; transition: opacity .25s ease; }
.primary-nav a:hover { opacity: 1; }

.header-cta { display: flex; align-items: center; gap: 18px; }

.btn {
  display: inline-block;
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .03em;
  border-radius: 2px;
  cursor: pointer;
  transition: all .2s ease;
  border: 1.5px solid transparent;
  font-family: var(--sans);
}
.btn-outline { border-color: currentColor; color: inherit; background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
body.over-hero .btn-outline:hover { background: var(--on-dark); color: var(--dark); border-color: var(--on-dark); }
.btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--bg); }

.menu-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  /* inherit so the bars (background: currentColor) follow the header colour —
     ink on light pages, white on over-hero (navy) pages. Buttons don't inherit
     colour by default, which left the bars UA-black and near-invisible on navy. */
  color: inherit;
  width: 36px; height: 36px;
  flex-direction: column; justify-content: center; gap: 6px;
  padding: 0;
}
.menu-toggle span {
  display: block; width: 24px; height: 2px; background: currentColor;
}

/* ─── HERO ─────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--dark);
  color: var(--on-dark);
  padding: clamp(90px, 14vh, 180px) 0 clamp(150px, 22vh, 260px);
  text-align: center;
  overflow: hidden;
}
/* Vignette in the two BOTTOM corners/sides — the navy centre around the
   hero quote keeps the original scheme; moving radially outward toward the
   bottom sides it falls off smoothly into the deep #070a14 black (the tone
   from the liked "Black deep blue" version). A mid-stop softens the blend;
   the darkening climbs only partway up the lower sides, never the top.
   Sits above the navy base but BELOW the corner panels (z 1), ripple (z 1)
   and content (z 2 / 50), so the blue panels stay vivid over the darkening. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(88% 96% at 0% 100%,   rgba(7, 10, 20, .96) 0%, rgba(7, 10, 20, .72) 26%, rgba(7, 10, 20, .40) 50%, rgba(7, 10, 20, .12) 70%, rgba(7, 10, 20, 0) 85%),
    radial-gradient(88% 96% at 100% 100%, rgba(7, 10, 20, .96) 0%, rgba(7, 10, 20, .72) 26%, rgba(7, 10, 20, .40) 50%, rgba(7, 10, 20, .12) 70%, rgba(7, 10, 20, 0) 85%);
}
.hero-inner { position: relative; z-index: 2; }
.hero-ripple {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: block;
}
.hero .eyebrow {
  color: var(--on-dark-mute);
  margin-bottom: clamp(48px, 6vh, 68px);
  opacity: 0;
  animation: hero-fade-up .9s ease-out .5s forwards;
}
.hero-quote { color: var(--on-dark); }
.hero-attribution { color: var(--on-dark-mute); }
.hero-video-caption { color: var(--on-dark-mute); }
.hero-shape {
  position: absolute;
  width: 50vw;
  height: 50vw;
  max-width: 660px;
  max-height: 660px;
  pointer-events: none;
  z-index: 1;
  transform: rotate(45deg);
  opacity: 0;
  animation: hero-shape-in 1s ease-out .4s forwards;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity;
}
/* Warmed from cool blue-greys on 2026-09-08, with --bg-elev and --line.
   These sit in .coverflow-pin, so despite the .hero- prefix their ground is
   always the light page, never the dark .hero — and they bleed past the pin
   onto the About section below (see the overflow note on .coverflow).
   The tans are LIGHT on purpose. The shapes animate to opacity .22, so with
   the gradient's own alpha the effective wash is under 10%; the first attempt
   swapped R and B on the old blue-greys, and at that strength a dark brown
   just greyed the wedge out (sampled 242,242,243 — neutral). A light tan
   instead drops the blue channel far more than the red, which is what makes
   the wash read ivory at this opacity rather than merely darker.
   The alphas were briefly pushed to ~.95 to force that warmth through, which
   bought the hue at the cost of making the wedges noticeably more present.
   They are back near two thirds of that: enough tan to read warm, faint
   enough that the shapes recede again. */
.hero-shape-left {
  top: 20%;
  left: -14%;
  background: linear-gradient(330deg,
    rgba(236, 204, 148, .62) 0%,
    rgba(214, 176, 120, .30) 42%,
    transparent 68%);
  border-right: none;
  border-left: 1px solid rgba(214, 196, 168, .15);
}
.hero-shape-right {
  bottom: -28%;
  right: -28%;
  background: linear-gradient(330deg,
    rgba(232, 198, 140, .64) 0%,
    rgba(214, 176, 120, .34) 52%,
    transparent 88%);
  border-left: 1px solid rgba(214, 196, 168, .14);
}
@keyframes hero-shape-in {
  to { opacity: .22; }
}

/* Hero glow — a soft luminous depth, like light alive beneath the surface. */
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: scale(.55);
  animation: glow-bloom 2.8s cubic-bezier(.2,.7,.2,1) .2s forwards;
  will-change: opacity, transform;
  background:
    radial-gradient(ellipse 65% 55% at 50% 38%,
      rgba(80, 115, 160, .28) 0%,
      rgba(55, 85, 125, .12) 40%,
      transparent 70%),
    radial-gradient(ellipse 50% 45% at 56% 32%,
      rgba(100, 140, 185, .18) 0%,
      rgba(70, 110, 155, .06) 45%,
      transparent 65%),
    radial-gradient(ellipse 35% 55% at 44% 42%,
      rgba(65, 100, 145, .15) 0%,
      transparent 55%);
}
@keyframes glow-bloom {
  0%   { opacity: 0;  transform: scale(.55); filter: brightness(2); }
  50%  { opacity: 1;  transform: scale(1.06); filter: brightness(1.15); }
  100% { opacity: 1;  transform: scale(1);   filter: brightness(1); }
}
.eyebrow, .section-eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 36px;
}
/* "The founders we back" — --terracotta-on-light, the light-ground accent,
   set 2026-09-23. Plain salmon was 1.87:1 here, too faint for words, so it
   went to the --ink-mute grey briefly and then to this at the user's ask.
   It is TEXT, and 2.45:1 is under the 4.5:1 AA asks of small text — carried
   by being bold, tracked-out caps above a large heading, but if it ever needs
   to pass strictly, this is the one to deepen or return to --ink-mute.
   Scoped to .coverflow-head so the other .section-eyebrow instances keep
   --ink-mute. */
/* Semibold (2026-10-14): at the eyebrow's 500 weight, 13px and wide tracking
   the strokes were thin enough that the salmon read paler than its swatch.
   600 gives the colour more ink without changing it. */
.coverflow-head .section-eyebrow { color: var(--terracotta-on-light); font-weight: 600; }
.section-eyebrow.centered { text-align: center; }
.section-eyebrow.light { color: var(--on-dark-mute); }

.hero-quote {
  /* opts out of the base blockquote rule above, as .essay-epigraph does */
  padding: 0;
  border: none;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.18;
  letter-spacing: normal;
  margin: 0 auto;
  max-width: 1000px;
  color: var(--on-dark);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-quote span {
  display: block;
  opacity: 0;
  animation: hero-fade-up .8s ease-out forwards;
}
.hero-quote span:nth-child(1) { animation-delay: .8s; }
.hero-quote span:nth-child(2) { animation-delay: 1.0s; }
.hero-quote span:nth-child(3) { animation-delay: 1.2s; }
.hero-quote span:nth-child(4) { animation-delay: 1.4s; }

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-attribution {
  margin-top: 36px;
  font-size: 15px;
  font-weight: 500;
  color: var(--on-dark-mute);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.cinema-overlay {
  position: fixed;
  inset: 0;
  background: #0a1220;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  will-change: opacity;
}
.hero-video {
  position: relative;
  z-index: 50;
  margin: 88px auto 0;
  max-width: 800px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(80px) scale(.96);
  filter: blur(10px);
  will-change: opacity, transform, filter;
  transform-origin: center center;
}
.hero-video-thumb {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.08), transparent 65%),
    linear-gradient(135deg, #1c2c46 0%, #18253b 60%, #0e1a2d 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
  transition: transform .3s ease;
}
.hero-video:hover .hero-video-thumb { transform: scale(1.005); }
.hero-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.play-icon {
  position: relative;
  z-index: 2;
  width: 86px; height: 86px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  display: grid; place-items: center;
  font-size: 26px;
  padding-left: 5px;
  box-shadow: 0 14px 50px rgba(0,0,0,.35);
  transition: transform .2s ease, opacity .35s ease;
}
.hero-video:hover .play-icon { transform: scale(1.06); }
.hero-video.is-playing .play-icon { opacity: 0; pointer-events: none; }
.hero-video-caption {
  margin-top: 24px;
  font-size: 13px;
  font-weight: 500;
  color: var(--on-dark-mute);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-align: center;
}

/* ─── ABOUT ────────────────────────────────────────────── */
.about {
  padding: clamp(96px, 14vh, 160px) 0;
}
.about-inner { max-width: 1000px; margin: 0 auto; }
.about-headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 5.4vw, 64px);
  line-height: 1.18;
  margin: 0;
  color: var(--ink);
  letter-spacing: normal;
}
.about-headline em {
  font-style: italic;
  /* Serif, not sans: left at 700 when the sans scale was stepped down for
     Manrope. Riccione is a static ExtraLight declared 100-900 with
     font-synthesis:none, so this renders the same at any weight. */
  font-weight: 700;
  /* --accent-deep, not terracotta, from 2026-09-08. Ivory was asked for first
     but is 1.3:1 on the light page — invisible. This is the same steel the
     percent sign on the stat below it already uses, so the two read as a pair,
     and it lifts the phrase from terracotta's 4.3:1 to 7.5:1. */
  color: var(--accent-deep);
  /* Terracotta mark under the phrase — the brand accent doing exactly the job
     it is reserved for, a short mark rather than running text (4.3:1 on this
     ground: fine for a mark, under AA for copy).
     Drawn, not text-decoration: an underline can only be a rule of constant
     weight, and a `stroke` would be no better. This is a FILLED path whose top
     and bottom edges run at different amplitudes, so the mark tapers to ~0.7u
     at each end and swells to ~1.7u through the middle — the pressure a nib
     puts down. preserveAspectRatio='none' lets it stretch to whatever width
     the phrase happens to be without the ends thickening.
     ONE cubic per edge, both bending the same way, so the centreline rises
     about two units monotonically across the span. An earlier version used two
     opposing cubics per edge; that S-curve doubles back on itself and reads as
     a shaky hand rather than a drawn line. Keep it to a single sweep.
     Carried as a background rather than a pseudo-element so the markup and the
     noscript fallback stay untouched, with box-decoration-break so a wrapped
     phrase gets a fresh stroke per line rather than one stretched across both.
     CAVEAT: a data URI cannot read a CSS custom property, so the terracotta is
     baked in as a literal here. If --terracotta ever moves, this hex must be
     changed by hand — it will not follow. Moved by hand on 2026-09-23 to
     the accent (now #d58770) by hand — this sits on the light page, where
     plain salmon is 1.87:1. */
  text-decoration-line: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'><path fill='%23d58770' d='M4,8.23 C20,8.30 38,8.36 55,8.40 C74,8.40 93,8.39 110,8.40 C133,8.52 156,8.68 175,8.80 C194,8.88 213,8.90 230,8.90 C244,8.84 257,8.76 268,8.65 C279,8.52 289,8.37 296,8.20 L296,8.50 C289,8.72 279,9.05 268,9.35 C257,9.60 244,9.87 230,10.10 C213,10.40 194,10.60 175,10.70 C156,10.74 133,10.73 110,10.70 C93,10.50 74,10.22 55,9.90 C38,9.45 20,9.00 4,8.57 Z'/></svg>");
  background-repeat: no-repeat;
  /* ASYMMETRIC overshoot, .10em before the phrase and .24em past it, so the
     stroke enters just under the first letter and flies out beyond the last —
     a pen leaving the page, not a rule stopping dead on both letters. An even
     overhang is what makes a mark read as a rule however it is shaped.
     .34em of height, up from .22em: the box height is what the thickness
     modulation has to live inside, and at .22em the nib's swell peaked at
     ~1.2px while its taper was a tenth of that — the variation was there in
     the path and invisible on screen. The earlier "marker scrawl" rejection
     was an even .26em stroke with a big overhang; this is taller at its middle
     and finer at its ends than that one ever was. */
  background-position: -.12em 100%;
  background-size: calc(100% + .24em) .34em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.about-stat {
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  /* Row gap first, column gap second. The 36px was a single value doing both
     jobs: on desktop the figure and its label share one line so only the
     COLUMN gap is ever used, but on a phone the label wraps beneath the
     numeral and that same 36px became the vertical space, which read as a
     disconnect between the figure and the thing it measures. Splitting the
     shorthand tightens the stacked case to 14px and leaves the side-by-side
     case untouched — no media query needed, because a single flex line simply
     never consults the row gap. */
  gap: 14px 36px;
  flex-wrap: wrap;
}
.stat-number {
  font-family: var(--serif);
  font-size: clamp(64px, 9vw, 112px);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  letter-spacing: normal;
}
.stat-unit {
  color: var(--accent-deep);
  font-size: 0.5em;
  margin-left: .08em;
  vertical-align: baseline;
}
.stat-label {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-mute);
  /* No 320px cap since the label became "Net returns p.a. since inception
     (November 2022)" (Nov 2026): kept on ONE line wherever it fits, which is
     every desktop width; it only wraps on a phone narrower than the line. */
  max-width: none;
  letter-spacing: .02em;
  line-height: 1.5;
}

/* ─── SECTION TITLES ───────────────────────────────────── */
.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 5.6vw, 64px);
  line-height: 1.15;
  margin: 0 0 72px;
  color: var(--ink);
  letter-spacing: normal;
}
.section-title.centered { text-align: center; }
.section-title.light { color: var(--on-dark); }

/* ─── LINE-BREAK POLISH ────────────────────────────────
   Display type is set large against narrow columns, so headings regularly
   dropped a single short word onto a last line ("Essays from the / desk.").
   `balance` evens the line lengths instead, which kills the orphan without
   anyone choosing break points by hand — and it respects explicit <br/>, so
   the deliberate breaks on the home hero and fund title still hold. Ignored
   by browsers that don't support it, which simply get today's behaviour. */
.section-title,
.about-headline,
.contact-headline,
.insights-intro-headline,
.approach-intro-headline,
.approach-cta-title,
.discipline-heading,
.invest-title,
.invest-panel-title,
.invest-help-title,
.fund-h2,
.fund-h3,
.fund-hero-title-sub,
.fla-h2,
.fla-proof h3,
.ins-feature-title,
.ins-card-title,
.ins-subscribe-title,
.essay-title,
.essay-body h2,
.team-name,
.team-modal-name,
.advantage-card h3,
.pillar h3,
.founder-panel-name,
.coverflow-active-name {
  text-wrap: balance;
}

/* A figure and its unit are one token — "120.5" and "%" must never split
   across lines. The compound figure ("23.0 vs 4.8 years") is genuinely
   multi-part prose, so it keeps normal wrapping. */
.odd-figure { white-space: nowrap; }
.odd-figure-compound { white-space: normal; }

/* ─── OUR APPROACH (numbered titles) ───────────────────── */
.pillars {
  padding: clamp(96px, 14vh, 160px) 0 clamp(112px, 16vh, 180px);
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pillars .section-title {
  margin-bottom: clamp(72px, 10vh, 112px);
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 3.5vw, 56px);
  max-width: 1280px;
  margin: 0 auto;
}
.pillar {
  text-align: left;
  padding-top: 24px;
  border-top: 1.5px solid var(--ink);
}
.pillar-icon {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin-bottom: 56px;
  opacity: .78;
}
.pillar h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 34px);
  margin: 0;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: normal;
}

/* ─── WHAT FOUNDERS DO DIFFERENTLY ─────────────────────── */
.advantage {
  padding: clamp(80px, 12vh, 140px) 0 clamp(96px, 14vh, 160px);
  background: var(--bg);
  color: var(--ink);
}
.advantage-intro {
  max-width: 880px;
  margin: 0 auto clamp(64px, 9vh, 112px);
  text-align: center;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--ink-soft);
}
.advantage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.advantage-card {
  position: relative;
  padding: clamp(56px, 7vw, 96px) clamp(32px, 4vw, 64px) clamp(72px, 9vw, 120px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(440px, 56vh, 600px);
  overflow: hidden;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
/* Warmed toward brand Ivory on 2026-09-08, from the cool #e7eaf0 it carried
   before, along with --bg-elev and --line. (Brand Ice Blue #E8EAF1 was tried
   here once and sat within one unit per channel of that old cool grey, so it
   changed nothing visible.) The page ground deliberately did NOT warm with it
   — see --bg. A pale ground, so this card takes INK text: 13.3:1, with the
   shared .82/.72 opacities at 8.0:1 and 5.8:1, so it needs no opacity
   override. Literal, not a token: the advantage row exists only on index. */
.advantage-card:nth-child(1) {
  background: #ebe6dc;
  color: var(--ink);
}
/* --accent-deep, the same steel as the About italic and its percent sign.
   Replaced terracotta (and a brief pass at Ivory) on 2026-09-08. A dark ground,
   so white text: 8.0:1, with the shared .82 body / .72 numeral opacities at
   6.0:1 and 5.1:1 — both clear of AA, which is why the opacity:1 overrides the
   terracotta version needed are gone. The row now steps light → mid → dark. */
.advantage-card:nth-child(2) {
  background: var(--accent-deep);
  color: var(--on-dark);
}
.advantage-card:nth-child(3) {
  background: var(--dark);
  color: var(--on-dark);
}
.advantage-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: normal;
  opacity: .72;
}
.advantage-body {
  margin-top: auto;
}
.advantage-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 3.8vw, 48px);
  margin: 0 0 28px;
  line-height: 1.1;
  letter-spacing: normal;
}
.advantage-card p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  opacity: .82;
  max-width: 380px;
  /* Reserve ~4 lines worth so all bodies share the same height,
     keeping titles aligned across cards regardless of copy length. */
  min-height: calc(17px * 1.65 * 4);
}
.advantage-card::after {
  content: "";
  position: absolute;
  left: clamp(32px, 4vw, 64px);
  right: clamp(32px, 4vw, 64px);
  bottom: clamp(40px, 5vw, 64px);
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(.3);
  transform-origin: left center;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.advantage-card:hover::after {
  opacity: .22;
  transform: scaleX(1);
}

/* ─── THE FOUNDER-LED ADVANTAGE (stacked rows) ─────────── */
.odds {
  --odds-grey: #b8c2d0;
  position: relative;
  background: var(--dark);
  color: var(--on-dark);
  padding: clamp(72px, 11vh, 128px) clamp(24px, 6vw, 96px) clamp(64px, 9vh, 104px);
}
.odds-rail {
  position: sticky;
  top: clamp(128px, 16vh, 180px);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-dark);
  z-index: 3;
  align-self: flex-start;
  /* pull subsequent content up so the rail's normal-flow height
     doesn't push the head paragraph down */
  margin-bottom: -22px;
}
.odds-rail-mark {
  display: inline-block;
  width: 64px;
  height: 1px;
  background: var(--terracotta);
}
.odds-head {
  max-width: 720px;
  margin: 80px auto clamp(48px, 7vh, 88px);
  text-align: center;
}
.odds-head .section-title {
  /* White. Three accent shades were tried here on 2026-09-18 — a pale clay
     tint, brand terracotta, then brand ivory — and all three were rejected;
     the title stays white and the band's warm accent lives on the chart's
     founder-led LINE instead (FUND_LINE in founder-chart.js).
     Scoped to .odds-head: .section-title is shared with contact, disclaimer,
     subscribe and the quarterly update, none of which should pick this up. */
  color: var(--on-dark);
  margin: 0 0 24px;
  font-size: clamp(36px, 4.4vw, 56px);
}
.odds-body {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,.72);
}

/* ─── Founder performance chart ─────────────────────── */
.founder-chart-wrap {
  max-width: 1080px;
  margin: 0 auto clamp(48px, 7vh, 80px);
  position: relative;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.founder-chart-wrap.is-visible {
  opacity: 1;
  transform: none;
}
/* The chart's source note, directly under the graph (legal, Nov 2026). Same
   type as the other odds footnotes; just a tighter top margin so it reads as
   the chart's caption. */
.founder-chart-note { margin: 14px 0 0; max-width: 820px; }
.founder-chart {
  display: block;
  width: 100%;
  height: clamp(300px, 42vh, 520px);
}

.odds-stack {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.odd {
  position: relative;
  padding: 0 clamp(24px, 4vw, 64px);
  /* Row height tracks the figure size: scaled by the same 20% as .odd-number
     (was clamp(220px, 28vh, 320px)) so the numerals keep their proportion of
     the row instead of floating in an over-tall box. */
  min-height: clamp(176px, 22.4vh, 256px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Partial divider — ~70% wide, anchored right */
.odd::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 72%;
  height: 1px;
  background: rgba(255,255,255,.16);
}
.odd:last-of-type::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 72%;
  height: 1px;
  background: rgba(255,255,255,.16);
}

.odd-number {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  /* 20% down from clamp(72px, 12vw, 168px). Everything inside the figure
     (.odd-unit, .odd-figure-compound) is sized in em, so this one value
     scales the whole numeral display proportionally. */
  font-size: clamp(58px, 9.6vw, 134px);
  line-height: .95;
  letter-spacing: normal;
  color: rgba(255,255,255,.14);
  transition: color .7s cubic-bezier(.2,.7,.2,1), text-shadow .7s cubic-bezier(.2,.7,.2,1);
  text-align: center;
  padding-right: 18%;
}
.odd.active .odd-number {
  color: var(--on-dark);
  text-shadow:
    0 0 24px rgba(255, 255, 255, 0.10),
    0 0 60px rgba(255, 255, 255, 0.06);
}
.odd-figure { display: inline-block; }
.odd-unit {
  font-size: 0.5em;
  font-style: normal;
  letter-spacing: 0;
  margin-left: .12em;
  opacity: .72;
}
.odd-figure-compound {
  /* Full size, matching the single-value figures (10x / 39.5% / 120.5%).
     "23.0 vs 4.8 years" is >2x their width at the same size, so on narrower
     desktops it runs into the caption sitting at the right of the row. Parity
     holds wherever it fits; the two steps below are the minimum backoff where
     it doesn't. Below 980px the row stacks (caption drops underneath), so the
     full width is free again and parity returns. */
  font-size: 1em;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}
@media (max-width: 1439px) { .odd-figure-compound { font-size: .85em; } }
@media (max-width: 1200px) { .odd-figure-compound { font-size: .65em; } }
@media (max-width:  980px) { .odd-figure-compound { font-size: 1em; } }
/* units inherit the standard .odd-unit .5em — only the opacity differs */
.odd-figure-compound .odd-unit {
  opacity: .65;
}
.odd-text {
  position: absolute;
  right: clamp(24px, 4vw, 64px);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  /* One shared measure for all four rows — no per-caption special cases.
     Fluid: wide screens fit the shorter captions ("Ziller outperformance
     since inception^", "20-year return of founder-led stocks") on one line;
     tightens on narrower desktops, where a wider caption would run into the
     large "23.0 vs 4.8 years" figure. Captions wrap there instead. The
     measure is scaled to the 14px caption size (was 260-330px at 12px). */
  max-width: clamp(250px, 26vw, 385px);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  line-height: 1.55;
  text-transform: uppercase;
  text-align: right;
  color: rgba(255,255,255,.32);
  transition: color .7s cubic-bezier(.2,.7,.2,1);
}
.odd.active .odd-text { color: var(--on-dark); }
/* Narrow-desktop band: the row hasn't room for wider captions next to the
   large figures (verified collisions at 1024/1116 with the fluid measure), so
   pin the box to the old-safe 260px — the 14px text simply wraps to more
   lines there — and drop the tenure caption's semantic break, whose 290px
   first half no longer fits on one line. */
@media (min-width: 981px) and (max-width: 1250px) {
  .odd-text { max-width: 260px; }
  .odd-text br { display: none; }
}
/* Stacked mobile layout: caption columns are ~130px — the forced break just
   adds a line, and 14px uppercase gets too ragged; original 12px + natural
   wrapping. */
@media (max-width: 980px) {
  .odd-text br { display: none; }
  .odd-text { font-size: 12px; }
}
/* Parenthetical asides inside a stat caption — e.g. "(3.3% alpha pa …)*" —
   sit quieter than the caption itself. Opacity (not a fixed colour) so the
   note stays proportionally dimmer through the active-state colour change. */
.odd-text-note { opacity: .55; display: block; }  /* own line — never splits the main clause */
.odds-footnotes {
  max-width: 1280px;
  margin: clamp(48px, 7vh, 80px) auto 0;
}
.odds-footnote {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,.42);
  font-style: italic;
  max-width: 720px;
}

/* ─── INSIGHTS ─────────────────────────────────────────── */
.insights {
  padding: clamp(96px, 14vh, 160px) 0;
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
}
.insights-inner {
  display: grid;
  /* minmax(0,…) not 1fr: a closed band's single-line (nowrap) title has a wide
     min-content, and a plain 1fr track can't shrink below that — it would
     inflate the stack column at rest and snap back on hover (when the title
     wraps). minmax(0,1fr) keeps both columns exactly equal regardless. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 96px;
  align-items: center;
}
.insights-text .section-title { margin-bottom: 28px; }
/* :not(.section-eyebrow) — the eyebrow is a <p> too, and this body-copy rule
   was outranking .section-eyebrow on it: 18px instead of 13px, so its
   tracking came out at 2.52px against the 1.82px every other eyebrow uses. */
.insights-text > p:not(.section-eyebrow) {
  color: var(--ink-soft);
  font-size: 18px;
  max-width: 460px;
  margin: 0 0 40px;
  line-height: 1.6;
}

/* ── The stack — three essays as one interactive column. The in-focus essay
   opens to show its photograph; the others tuck beneath it as slim bands that
   lap the sheet above. Hovering (or tabbing to) a band opens it and closes the
   rest — pure CSS, animated flex-grow. The DATE shows on every band; the tag
   (dot + label) and title appear only on the in-focus card. ── */
.insights-stack {
  --stack-h: min(640px, 76vh);
  display: flex;
  flex-direction: column;
  height: var(--stack-h);
}
.insight-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 0;
  /* floor: a closed band still shows its date and a strip of photo */
  min-height: 128px;
  overflow: hidden;
  background-color: #232c3b;
  isolation: isolate;
}
/* Scoped under .insights-stack so this transition list outranks the generic
   .reveal one — opacity/transform stay listed for the entrance animation. */
.insights-stack .insight-tile {
  transition:
    flex-grow .65s cubic-bezier(.3, .7, .2, 1),
    opacity .9s cubic-bezier(.2, .7, .2, 1),
    transform .9s cubic-bezier(.2, .7, .2, 1);
}
/* Upper card sits in FRONT and laps over the one below, casting a soft shadow
   downward. This lets a card on entrance emerge from beneath the card above
   (see the top-to-bottom reveal further down). */
.insight-tile + .insight-tile { margin-top: -14px; }
.insight-tile:not(:last-child) {
  box-shadow: 0 12px 28px -8px rgba(15, 20, 31, .45);
}
.insight-tile:nth-child(1) { z-index: 3; }
.insight-tile:nth-child(2) { z-index: 2; }
.insight-tile:nth-child(3) { z-index: 1; }
/* the latest essay rests open; hovering the stack hands the spotlight over */
.insight-tile:first-child { flex-grow: 3.4; }
.insights-stack:hover .insight-tile,
.insights-stack:focus-within .insight-tile { flex-grow: 1; }
.insights-stack .insight-tile:hover,
.insights-stack .insight-tile:focus-visible { flex-grow: 3.4; }
/* photo layer — a fixed-size image anchored to the tile top. Its height is set
   just above the OPEN tile height (not the whole 640px column): tall enough to
   fill an open panel, but no taller — so the box stays close to landscape and
   `cover` crops these landscape photos only lightly (you see most of the
   original picture, not a tight zoom). Fixed height ⇒ no rescale-on-open; the
   band simply clips more of the same image when closed. */
.insight-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--stack-h) * 0.66);
  z-index: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: var(--pos, center);
}
/* legibility scrims — bottom ramp for the title, plus a whisper of ink at the
   top so the date (and the in-focus tag) stay readable on a bright band. */
.insight-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(15,20,31,.5) 0%, rgba(15,20,31,0) 32%),
    linear-gradient(to top, rgba(15,20,31,.88) 0%, rgba(15,20,31,.44) 40%, rgba(15,20,31,.06) 78%, rgba(15,20,31,0) 100%);
}
.insight-kicker {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
.insight-kicker-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(255,255,255,.14);
}
/* Attention pulse — ONLY the latest (lead) essay: two staggered bright rings
   ping outward from a brighter, glowing dot. Shared keyframe, reused for the
   latest card on the Insights archive. */
.insight-tile--lead .insight-kicker-dot {
  width: 8px;
  height: 8px;
  /* The accent itself since the 2026-09-23 move to salmon. This used to be a
     lifted terracotta #E07A55 because #C25332 read muddy on the dark photo;
     salmon is lighter than that lift, so the token now does the job alone. */
  background: var(--terracotta);
  box-shadow: 0 0 8px 1px rgba(250, 160, 138, .6);
}
.insight-tile--lead .insight-kicker-dot::before,
.insight-tile--lead .insight-kicker-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--terracotta);
  animation: insight-dot-pulse 2s cubic-bezier(.3, 0, .5, 1) infinite;
}
.insight-tile--lead .insight-kicker-dot::before { animation-delay: -1s; }
@keyframes insight-dot-pulse {
  0%        { transform: scale(1);   opacity: .9; }
  70%, 100% { transform: scale(3.6); opacity: 0; }
}
.insight-when {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 2;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
/* Cards after the first are lapped 14px under the card above, hiding the top
   of their inset. Push their tag + date down by that 14px so the visible gap
   above them matches the first card's (16px). */
.insight-tile:not(:first-child) .insight-kicker,
.insight-tile:not(:first-child) .insight-when {
  top: 30px;
}
.insight-tile-cap {
  position: relative;
  z-index: 2;
  display: block;
  padding: clamp(16px, 1.8vw, 22px) 20px;
}
.insight-title {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.2;
  letter-spacing: normal;
  color: #fff;
}
/* Focus hierarchy — a closed band shows exactly ONE quiet line: its title,
   ghosted and clipped to a single ellipsized line at 75% size, with the small
   date opposite. The tag (dot + label) belongs to the in-focus card only and
   fades in as its panel opens; the title blooms to full size and wraps freely.
   Mirrors the flex-grow open/close conditions. */
.insight-kicker,
.insight-when,
.insight-title {
  transition: opacity .5s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}
.insight-kicker { opacity: 0; }
.insight-when { opacity: .6; }
.insight-title {
  opacity: .55;
  transform: scale(.75);
  transform-origin: left bottom;
  /* single ghost line when closed; text-overflow is inert once open (wrap) */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.insight-tile:first-child .insight-kicker,
.insight-tile:first-child .insight-when { opacity: 1; }
.insight-tile:first-child .insight-title { opacity: 1; transform: scale(1); white-space: normal; }
.insights-stack:hover .insight-kicker,
.insights-stack:focus-within .insight-kicker { opacity: 0; }
.insights-stack:hover .insight-when,
.insights-stack:focus-within .insight-when { opacity: .6; }
.insights-stack:hover .insight-title,
.insights-stack:focus-within .insight-title { opacity: .55; transform: scale(.75); white-space: nowrap; }
.insights-stack .insight-tile:hover .insight-kicker,
.insights-stack .insight-tile:hover .insight-when,
.insights-stack .insight-tile:focus-visible .insight-kicker,
.insights-stack .insight-tile:focus-visible .insight-when { opacity: 1; }
.insights-stack .insight-tile:hover .insight-title,
.insights-stack .insight-tile:focus-visible .insight-title { opacity: 1; transform: scale(1); white-space: normal; }

/* Staggered entrance — reveal hooks assigned in script.js. Cards drop in from
   ABOVE (translateY negative), so each one appears to emerge from beneath the
   bottom of the card above it. The stagger runs top→bottom, so the stack
   unfurls downward. (Overrides the generic .reveal translateY(20px) rise.) */
.insight-tile.reveal { transform: translateY(-32px); }
.insight-tile.reveal.in { transform: translateY(0); }
.insight-tile.reveal:nth-child(2) { transition-delay: .12s; }
.insight-tile.reveal:nth-child(3) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  /* panels snap instead of glide; the entrance fade stays */
  .insights-stack .insight-tile {
    transition:
      opacity .9s cubic-bezier(.2, .7, .2, 1),
      transform .9s cubic-bezier(.2, .7, .2, 1);
  }
  /* no ping; labels change brightness only — titles keep one size */
  .insight-tile--lead .insight-kicker-dot::before,
  .insight-tile--lead .insight-kicker-dot::after,
  .ins-card.is-latest .ins-card-dot::before,
  .ins-card.is-latest .ins-card-dot::after,
  html:not(.js) .ins-card:first-child .ins-card-dot::before,
  html:not(.js) .ins-card:first-child .ins-card-dot::after { animation: none; opacity: 0; }
  .insight-title,
  .insights-stack:hover .insight-title,
  .insights-stack:focus-within .insight-title { transform: none; }
}

/* ─── CONTACT ──────────────────────────────────────────── */
.contact {
  padding: clamp(96px, 16vh, 180px) 0;
  text-align: center;
}
.contact-headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(48px, 7vw, 88px);
  margin: 0 0 20px;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: normal;
}
.contact-sub {
  color: var(--ink-mute);
  font-size: 17px;
  margin: 0 0 40px;
}
.contact-email {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 48px);
  color: var(--accent-deep);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 6px;
  letter-spacing: normal;
}
.contact-email:hover { color: var(--ink); border-color: var(--ink); }

/* ─── FOOTER ───────────────────────────────────────────── */
.site-footer {
  background: var(--dark);
  color: var(--on-dark);
  padding: 88px 0 32px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  grid-template-areas:
    "logo  links"
    "brand links"
    "foot  foot";
  column-gap: 72px;
  margin-bottom: 56px;
}
.footer-logo {
  grid-area: logo;
  align-self: start;
  height: 88px;
  width: auto;
  max-width: 320px;
  color: var(--on-dark);
  display: block;
  margin: 0 0 28px;
}
/* Passthrough wrapper: display:contents lifts its children (brand + links)
   into .footer-top's grid, so the link columns sit level with the logo on the
   top row while the tagline tucks beneath the logo. */
.footer-inner { display: contents; }
.footer-brand { grid-area: brand; }
.footer-brand p {
  color: var(--on-dark-mute);
  font-size: 16px;
  font-weight: 500;
  max-width: 280px;
  line-height: 1.55;
  margin: 0;
  text-align: left;
}
.footer-links {
  grid-area: links;
  align-self: start;
  /* nudge down past the logo SVG's internal top whitespace so the column
     headings read as level with the "ZILLER" wordmark, not floating above it */
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.footer-links h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
}
.footer-links a {
  display: block;
  color: var(--on-dark-mute);
  font-size: 15px;
  font-weight: 500;
  padding: 6px 0;
}
.footer-links a:hover { color: var(--on-dark); }
.footer-bottom {
  grid-area: foot;
  display: flex;
  justify-content: space-between;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--on-dark-mute);
  font-size: 13px;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-bottom p { margin: 0; }
.footer-bottom a:hover { color: var(--on-dark); }

/* ─── FOUNDERS COVERFLOW ───────────────────────────────── */
.page-home .hero-founders {
  margin-top: -93px;
}
.coverflow {
  position: relative;
  background: var(--bg);
  /* Carousel is navigated by hover, not scroll — so it's a single full
     screen rather than a tall scroll runway. */
  height: 100vh;
  /* Contain only the cards' sideways spill. `clip` on the x-axis (vs an
     all-sides clip on the pin) leaves the y-axis free, so the decorative
     hero diamonds flow down past the "About the Fund" seam instead of being
     sliced flat there. `clip` (not `hidden`) avoids creating a scroll
     container. */
  overflow-x: clip;
}
.coverflow-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  /* No overflow clip here: clipping all four sides sliced the decorative hero
     diamonds flat at the pin's bottom edge — the hard line at the "About the
     Fund" seam. The cards' sideways spill is instead contained horizontally by
     `.coverflow { overflow-x: clip }`, which lets the diamonds bleed past the
     bottom edge and flow into the next section. */
  overflow: visible;
}
.coverflow-inner {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  align-items: center;
  gap: clamp(28px, 4.5vh, 56px);
  padding: clamp(93px, 9vh, 108px) 24px clamp(32px, 5vh, 56px);
  max-width: 1400px;
  margin: 0 auto;
  /* Shift the carousel composition (heading + cards + meta + progress) as one
     unit. The earlier -28px raise, plus 3vh ("3% lower") back down. The hint
     is pinned separately (see .coverflow-hint) so it stays put. */
  transform: translateY(calc(3vh - 28px));
}
.coverflow-head {
  text-align: center;
  /* Comfortable gap below the header. The cards shrink on short viewports (see
     .cover-card) rather than the headline being crushed up to make room. */
  margin-top: clamp(24px, 5vh, 64px);
}
.coverflow-head .section-title {
  font-size: clamp(28px, 3.5vw, 48px);
  margin: 16px 0 0;
  /* Nudge the title up slightly (transform so the grid's 1fr stage doesn't
     absorb the shift). */
  transform: translateY(-16px);
}

.coverflow-stage {
  position: relative;
  width: 100%;
  min-height: 0;
  /* Entrance: the card stack fades in (opacity only — transform is reserved
     for the static nudge below + the per-card JS transforms). The fade is
     gated on the `cards-ready` class JS adds once the cards are built, so an
     empty stage never flashes. */
  opacity: 0;
  /* Small downward nudge; biased so the cards sit a touch closer to the headline
     (less space above) than to the name/role below — the cards are the focal point. */
  transform: translateY(19px);
  perspective: 1600px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
.coverflow-stage.cards-ready {
  animation: coverflow-fade .9s cubic-bezier(.2,.7,.2,1) .35s forwards;
}
.cover-card {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Card size scales with viewport HEIGHT on desktop so the tall cards don't
     crowd the headline/meta on short laptops: full 280px at ~1067px+ tall,
     easing to 232px on short screens. The mobile tiers below override with
     fixed sizes. --cw drives width; height + centering margins derive from it
     (the JS coverflow transform sets y=0, so vertical centring stays margin-based). */
  --cw: clamp(204px, calc(48vh - 165px), 280px);
  --ch: calc(var(--cw) * 380 / 280);
  width: var(--cw);
  height: var(--ch);
  margin-left: calc(var(--cw) / -2);
  margin-top: calc(var(--ch) / -2);
  /* Matches the backdrop baked into the portrait files, NOT the page's warm
     elevated grey. Only the two transparent cutouts (Elon, Mikheil) ever let
     this show — the other fourteen JPGs cover the card edge to edge — so this
     is purely about making those two match their neighbours. */
  background: var(--portrait-bd);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  backface-visibility: hidden;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  box-shadow: 0 24px 48px -16px rgba(10, 18, 32, .35);
}
.cover-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
.cover-card img,
.cover-card-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cover-card img {
  filter: grayscale(100%) contrast(1.02);
  transition: filter .6s cubic-bezier(.2,.7,.2,1);
}
/* While the deck is being flicked (script.js puts .cf-moving on the stage),
   the grayscale bloom must not animate: a transitioning `filter` repaints the
   bitmap every frame, and mid-flick several cards transition at once — the
   user-reported carousel stutter. In motion the active card flips to colour
   instantly; the .6s bloom is reserved for the card you settle on. */
.coverflow-stage.cf-moving .cover-card img { transition: none; }
.cover-card.active img {
  filter: grayscale(0) contrast(1.02);
}
.cover-card-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--accent-deep) 0%, var(--dark) 100%);
  color: rgba(255,255,255,.92);
  font-family: var(--serif);
  font-style: italic;
  font-size: 88px;
  letter-spacing: normal;
  filter: grayscale(100%);
  transition: filter .6s cubic-bezier(.2,.7,.2,1);
}
.cover-card.active .cover-card-fallback {
  filter: grayscale(0);
}
.cover-card-tag {
  position: absolute;
  left: 18px;
  bottom: 18px;
  right: 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.cover-card.active .cover-card-tag {
  opacity: 1;
  transform: none;
}
/* While the founder panel is open, the stage glides behind the dimmed
   backdrop (panel PREV/NEXT sync). Keep the card tag — and its navy bottom
   gradient — from fading in mid-glide, where it reads as a stray flash of
   navy glow; it fades back in once the panel closes. */
body.panel-open .cover-card.active .cover-card-tag {
  opacity: 0;
  transform: translateY(8px);
}
.cover-card-tag::before {
  content: "";
  position: absolute;
  inset: -40px -18px -18px -18px;
  background: linear-gradient(to top, rgba(10,18,32,.7), transparent);
  z-index: -1;
  pointer-events: none;
}

.coverflow-meta {
  text-align: center;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Nudge the active founder name/role down (18 + 16 + 10px). */
  transform: translateY(44px);
}
.coverflow-active-name {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  margin: 0;
  letter-spacing: normal;
}
.coverflow-active-role {
  margin: 6px 0 0;
  font-size: 12px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.coverflow-progress {
  width: min(420px, 80%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  /* Nudge the progress line down (16 + 10px, with name/role + hint). */
  transform: translateY(26px);
}
.coverflow-progress-bar {
  position: relative;
  display: block;
  /* 1.5px (2026-10-14): at 1px the fill was nearly all anti-aliased edge and
     the salmon read washed out; 2px fixed that but was too heavy. On a
     high-density screen 1.5px is a crisp 3 device pixels; on a standard one it
     renders as a solid pixel plus a half-tone row, still richer than 1px. */
  height: 1.5px;
  background: var(--line);
}
.coverflow-progress-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 100%;
  background: var(--terracotta-on-light);
  transform-origin: left center;
  transform: scaleX(0);
}
.coverflow-progress-index {
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--ink-mute);
}

.coverflow-hint {
  text-align: center;
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
  /* Cancel the parent's +3vh shift, then nudge down with the name/role +
     progress line (16 + 10px), plus 6px more to open the gap above the hint. */
  transform: translateY(calc(-3vh + 32px));
}

/* ─── COVERFLOW: staggered entrance for the trailing elements ───
   The heading reveals via the scroll observer (.coverflow-head.reveal) and the
   cards fan out via JS; the meta, progress and hint then fade up in sequence so
   the whole hero composition settles from the top down. */
/* Opacity-only fades: each of these carries a static positioning transform
   (the +44px / +26px / -3vh nudges), so a translate-based rise would override
   it and shift the element. Fade in place to keep their positions intact. */
.coverflow-meta,
.coverflow-progress,
.coverflow-hint {
  opacity: 0;
  animation: coverflow-fade .8s cubic-bezier(.2,.7,.2,1) forwards;
}
.coverflow-meta { animation-delay: .9s; }
.coverflow-progress { animation-delay: 1.05s; }
.coverflow-hint { animation-delay: 1.2s; }
@keyframes coverflow-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .coverflow-stage,
  .coverflow-meta,
  .coverflow-progress,
  .coverflow-hint { opacity: 1; animation: none; }
}

/* ─── COVERFLOW: tighter on smaller screens ────────────── */
@media (max-width: 900px) {
  .cover-card { width: 200px; height: 280px; margin-left: -100px; margin-top: -140px; }
  .cover-card-fallback { font-size: 64px; }
}
@media (max-width: 560px) {
  /* Phones: the lead card carries the section — let it fill ~62% of the viewport
     (was 160px / 43%, which read as a thumbnail). */
  .cover-card { width: 232px; height: 315px; margin-left: -116px; margin-top: -158px; }
  .cover-card-fallback { font-size: 64px; }
  .coverflow-inner { padding-top: 88px; }
  /* The in-photo name/company tag wraps illegibly at phone card sizes, and the
     caption right below the carousel already carries it — let the photo breathe. */
  .cover-card-tag { display: none; }
}

/* ─── FOUNDER PANEL (MODAL) ────────────────────────────── */
.founder-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.founder-panel.open {
  pointer-events: auto;
  opacity: 1;
}
.founder-panel-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 18, 32, .55);
  backdrop-filter: blur(6px);
}
.founder-panel-inner {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100%);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateX(40px);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
  overflow-y: auto;
  box-shadow: -24px 0 80px rgba(0,0,0,.18);
}
.founder-panel.open .founder-panel-inner { transform: none; }

.founder-panel-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  border: 0; background: transparent;
  font-size: 32px; line-height: 1;
  color: var(--ink);
  cursor: pointer;
  border-radius: 50%;
  transition: background .2s ease;
  z-index: 4;
}
.founder-panel-close:hover { background: var(--bg-elev); }

.founder-panel-photo {
  --accent: var(--accent-deep);
  /* Explicit height (derived from the drawer width) instead of relying on
     aspect-ratio — an aspect-ratio-only flex item collapses to 0 once a
     sibling (the body) is allowed to flex-grow. */
  aspect-ratio: 16 / 10;
  height: calc(min(560px, 100vw) * 0.625);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
}
.panel-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.panel-scene[hidden] { display: none; }
/* YouTube scene embed: the player is fully visible but COVERED by the opaque
   scene still (z-index above) until it has played long enough for YouTube's
   startup chrome to auto-hide, then the still fades out (script.js adds
   .cover-fade). Hiding the player with opacity instead made it self-pause;
   covering it with the still keeps it genuinely playing underneath.
   pointer-events off so hover/click can never resummon chrome. */
.panel-embed {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.panel-embed iframe {
  /* top/left/size are set inline by startPanelEmbed (cover + zoom + bias) */
  position: absolute;
  border: 0;
  pointer-events: none;
}
img.panel-scene {
  z-index: 3; /* the still covers the booting embed below it */
}
img.panel-scene.cover-fade {
  transition: opacity .8s ease;
  opacity: 0;
}
.founder-panel-photo-inner,
.founder-panel-photo-inner span { display: none; }

/* Fixed-height logo slot so the founder NAME always starts at the same
   vertical position, regardless of each company logo's height. The logo is
   vertically centred within the slot. */
.panel-logo-slot {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 28px; /* spacing between logos when a founder has two companies */
  margin: 0 0 22px;
}
.founder-panel-body .panel-logo {
  display: block;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  filter: grayscale(1) brightness(0) opacity(0.7);
  /* height is set per-company in script.js (LOGO_HEIGHTS) */
}
/* Second logo (Tesla + SpaceX) is `hidden` for single-company founders. The
   display:block above outweighs the UA [hidden] rule, so hide it explicitly —
   otherwise it keeps a flex slot (and the last logo) on every other card. */
.founder-panel-body .panel-logo[hidden] { display: none; }

.founder-panel-body {
  padding: 36px 48px 40px;
  /* Shrinkable (1 1 auto + min-height 0) so the drawer never overflows: the
     thesis scrolls internally instead (see below), which keeps the PREV/NEXT
     row pinned to the drawer bottom — level for every founder. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* .founder-panel-eyebrow removed — company is now conveyed by the logo only */
.founder-panel-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 52px);
  line-height: 1.1;
  margin: 0 0 8px;
  color: var(--ink);
  letter-spacing: normal;
}
.founder-panel-role {
  font-size: 16px;
  color: var(--ink-mute);
  margin: 0 0 28px;
  font-weight: 500;
}
.founder-panel-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 0 28px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.founder-panel-stats > div { margin: 0; }
.founder-panel-stats dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 6px;
}
.founder-panel-stats dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: normal;
}
.founder-panel-thesis {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 36px;
  /* The one shrinkable row in the drawer: long bios scroll inside this box
     (floor of ~3 lines) rather than pushing the PREV/NEXT row off-level. */
  flex: 0 1 auto;
  min-height: 84px;
  overflow-y: auto;
}
.founder-panel-nav {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.founder-panel-nav button {
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  padding: 8px 0;
  transition: color .2s ease;
}
.founder-panel-nav button:hover { color: var(--accent-deep); }

/* Mid viewports: a slightly shorter photo is enough for the whole drawer to
   fit, which lets margin-top:auto pin the PREV/NEXT row level at the bottom. */
@media (max-height: 960px) {
  .founder-panel-photo {
    aspect-ratio: auto;
    height: calc(min(560px, 100vw) * 0.5);
  }
}

/* Short viewports (most laptops with browser chrome): compress the drawer's
   fixed-height rows so name→stats→thesis→nav all fit above the fold and the
   PREV/NEXT row stays pinned (and level) at the drawer bottom. */
@media (max-height: 800px) {
  .founder-panel-photo {
    aspect-ratio: auto;
    height: calc(min(560px, 100vw) * 0.4);
  }
  .founder-panel-body { padding: 26px 48px 30px; }
  .panel-logo-slot { height: 56px; margin-bottom: 14px; }
  .founder-panel-role { margin-bottom: 20px; }
  .founder-panel-stats { padding: 18px 0; margin-bottom: 20px; }
  .founder-panel-thesis { margin-bottom: 24px; min-height: 56px; }
  .founder-panel-nav { padding-top: 18px; }
}

body.panel-open { overflow: hidden; }

/* ─── MOBILE NAV OPEN ──────────────────────────────────── */
body.nav-open .primary-nav,
body.nav-open .header-cta {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--bg);
  padding: 24px var(--gutter);
  gap: 18px;
  align-items: flex-start;
}
body.nav-open .header-cta {
  /* Sits below the nav panel (24px pad + 5 links x 25px + 4 gaps x 18px + 24px
     pad = 245px). margin-top pulls it up ~2px to OVERLAP the nav panel so the
     (often dark) page behind can't peek through the seam as a thin line — that
     sliver was the "slit". A single border-top is the links|button divider. */
  top: calc(100% + 246px);
  margin-top: -2px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* On dark-hero (over-hero) pages the header is navy by design; make the open
   mobile menu match it — navy dropdown panels so the (white) nav links and the
   white-outline Invest Now button stay legible, instead of the default light
   panels where white text vanished. Light-header pages keep the light menu. */
body.nav-open.over-hero .primary-nav,
body.nav-open.over-hero .header-cta {
  background: var(--dark);
}
body.nav-open.over-hero .header-cta {
  border-top-color: rgba(255, 255, 255, .14);
  border-bottom-color: rgba(255, 255, 255, .14);
}

/* ─── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 1180px) {
  .founders-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  .founders-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
  .primary-nav, .header-cta { display: none; }
  .menu-toggle { display: flex; }
  .pillars-grid { grid-template-columns: repeat(2, 1fr); gap: 56px 32px; }
  .advantage-grid { grid-template-columns: 1fr; gap: 0; }
  .advantage-card { min-height: auto; }
  .odds-rail { position: static; margin-bottom: 24px; }
  .odds-head { margin-top: 0; }
  .odd { padding: 29px 24px; }   /* vertical scaled with the figure (was 36px) */
  .odd::before, .odd:last-of-type::after { width: 100%; }
  .odd-number { padding-right: 0; }
  /* Stack each stat: figure on top (full width, so "23.0 vs 4.8 years" stays
     on one line), caption centred beneath. The base .odd flexbox only centres
     the figure on desktop (the caption is absolute there), but on mobile the
     static caption becomes a second flex child and sat cramped BESIDE the
     figure. */
  .odd { flex-direction: column; }
  .odd-text {
    position: static;
    transform: none;
    text-align: center;
    max-width: 100%;
    margin: 16px auto 0;
  }
  /* single column: the image stack drops below the intro text */
  .insights-inner { grid-template-columns: 1fr; gap: 56px; }
  /* no hover on touch — the accordion becomes plain stacked cards, newest
     first, with tag + date + title all shown (nothing to hover into focus) */
  .insights-stack { display: grid; gap: 16px; height: auto; }
  .insight-tile { min-height: 0; aspect-ratio: 2 / 1; }
  .insight-tile--lead { aspect-ratio: 3 / 2; }
  .insight-tile + .insight-tile { margin-top: 0; }
  .insight-tile:not(:last-child) { box-shadow: none; }
  /* full-bleed photo again — static cards don't open, so no curtain needed */
  .insight-tile::before { bottom: 0; height: auto; }
  .insight-kicker,
  .insight-when,
  .insight-title { opacity: 1; transform: none; }
  .insight-title { white-space: normal; }
  /* no overlap on mobile, so no lapped-card top compensation */
  .insight-tile:not(:first-child) .insight-kicker,
  .insight-tile:not(:first-child) .insight-when { top: 16px; }
  .footer-top {
    grid-template-columns: 1fr;
    grid-template-areas: "logo" "brand" "links" "foot";
    row-gap: 48px;
  }
  .footer-logo { margin-bottom: 0; }
  .footer-bottom { margin-top: 0; }
  .footer-links { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
  .founder-panel-inner { width: 100%; }
  .founder-panel-body { padding: 32px 28px 48px; }
  .odds-rail { position: static; margin-bottom: 24px; }
  .odds-stack { margin-top: 24px; }
}

@media (max-width: 720px) {
  .founders-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
  .founders-foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .founders-meta { margin-left: 0; }
}

@media (max-width: 540px) {
  body { font-size: 17px; }
  .header-inner { height: 76px; }
  .brand-logo { height: 48px; }
  .page-home .hero-founders { margin-top: -77px; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .insights-stack { gap: 14px; }
  .footer-bottom { flex-direction: column; }
  .footer-logo { height: 64px; }
  .founder-panel-stats { grid-template-columns: 1fr 1fr; }
  /* Pillars: 2-up columns get too narrow for the serif headings on phones
     (overflows at 320px); stack them, and tighten the icon gap to suit. */
  .pillars-grid { grid-template-columns: 1fr; gap: 36px; }
  .pillar-icon { margin-bottom: 20px; }
}

/* ─── REVEAL ANIMATION ─────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
/* Pillars + Founder-led Advantage: hold the entrance a beat longer */
.pillar.reveal,
.advantage-intro.reveal,
.advantage-card.reveal {
  transition-delay: .32s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ════════════════════════════════════════════════════════
   FUND PAGE
   Dedicated /fund.html page. Editorial / institutional design,
   navy accents, numbered sections, dash mark motifs.
   ════════════════════════════════════════════════════════ */

/* The fund page never sits over the dark hero — keep the header
   in its default (light, opaque) state regardless of scroll. */
.page-fund .site-header {
  background: rgba(246, 247, 249, 0.92);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--line);
  color: var(--ink);
}

.fund-page {
  background: var(--bg);
  color: var(--ink);
}

/* ─── Shared: section eyebrow + slash mark ─────────────── */
.fund-section-eyebrow {
  /* Matches .invest-eyebrow exactly (gap/margin/dash) so the eyebrow + dash
     motif reads identically on the Fund and Invest heroes. */
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.fund-slash {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: var(--terracotta-on-light);
  flex-shrink: 0;
}

/* Numbered section head ("/ 02   Important Documents") */
.fund-section-head {
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 3vw, 40px);
  margin-bottom: clamp(40px, 6vh, 72px);
}
.fund-section-num {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--ink-mute);
  letter-spacing: normal;
  flex-shrink: 0;
}
.fund-h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: normal;
  color: var(--ink);
}
.fund-h2-sub {
  display: inline-block;
  margin-left: 14px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
  vertical-align: middle;
}
.fund-h3 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: normal;
  color: var(--ink);
}

/* ─── Hero ─────────────────────────────────────────────── */
.fund-hero {
  padding: clamp(112px, 16vh, 180px) 0 clamp(64px, 9vh, 112px);
  border-bottom: 1px solid var(--line);
}
/* Phones: lift the hero so "Fund Information" sits at the same height as
   "Invest With Us" (matches .invest-hero's top padding). Desktop keeps the
   original deeper position above. */
@media (max-width: 720px) {
  .fund-hero { padding-top: clamp(56px, 9vh, 104px); }
}
.fund-hero-grid {
  display: grid;
  /* 1.6fr, not 1.45fr: "Ziller Global Fund" is one unbreakable phrase and at
     1.45fr it filled 95% of the column (584px of 613px). With only ~5% spare,
     any small shift — a scrollbar, browser zoom, the fallback face showing
     before Riccione loads — tipped "Fund" onto its own line. The extra column
     width buys real headroom; the ticker card gives up ~6% and is unaffected. */
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: stretch;
}
.fund-hero-title {
  margin: 12px 0 32px;
  font-family: var(--serif);
  font-weight: 500;
  /* Tuned so "Ziller Global Fund" keeps >=11% clearance at every width. The old
     clamp(40px, 6vw, 76px) left 8-9% on desktop and exactly 0% at 375px, where
     the phrase measured 308px in a 308px column — one pixel from breaking. */
  font-size: clamp(34px, 5.4vw, 72px);
  line-height: 1.06;
  /* The fund name is a single unbreakable phrase. <br/> still forces the break
     before "Active ETF"; this only stops SOFT wrapping. Safe because of the
     clearance above — but if the fund is ever renamed to something longer,
     retune the clamp, or this overflows instead of wrapping. */
  white-space: nowrap;
  letter-spacing: normal;
  color: var(--ink);
}
.fund-hero-title-sub {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.1;
  color: var(--ink-soft);
  letter-spacing: normal;
}
.fund-hero-intro {
  margin: 0;
  max-width: 580px;
  font-family: var(--sans);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--ink-soft);
}

/* Navy ticker card — sits on the right of the hero */
.fund-ticker-card {
  position: relative;
  background: var(--dark);
  color: var(--on-dark);
  padding: clamp(32px, 4vw, 48px) clamp(28px, 3.6vw, 40px);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
  overflow: hidden;
}
.fund-ticker-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background: var(--terracotta);
}
.fund-ticker-card-label {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.fund-ticker-card-code {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(72px, 9vw, 112px);
  line-height: .9;
  letter-spacing: normal;
  color: var(--on-dark);
}
.fund-ticker-card-meta {
  margin: 28px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid;
  /* Content-sized, not equal thirds. Equal thirds pinned each column to 95px,
     which was enough for Formata Light but not for Manrope — "Global Growth"
     wrapped to two lines. max-content lets the wider pair take the room it
     needs while the row still spans the card. */
  grid-template-columns: repeat(3, max-content);
  justify-content: space-between;
  gap: 16px;
}
.fund-ticker-card-meta > div { margin: 0; }
.fund-ticker-card-meta dt {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.fund-ticker-card-meta dd {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--on-dark);
  letter-spacing: 0;
}

/* ─── Generic section ──────────────────────────────────── */
.fund-section {
  padding: clamp(72px, 11vh, 128px) 0;
  border-bottom: 1px solid var(--line);
}
.fund-section-tight {
  padding-top: clamp(40px, 6vh, 64px);
  padding-bottom: clamp(40px, 6vh, 64px);
}
.fund-section:last-of-type { border-bottom: 0; }

/* Two-col variant (objective uses this) */
.fund-two-col {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.fund-col-label .fund-section-num { margin-bottom: 10px; }

/* Navy band variant — full-bleed dark background for selected sections */
.fund-section-band {
  background: var(--dark);
  color: var(--on-dark);
  border-bottom: 0;
}
.fund-section-band .fund-h2 { color: var(--on-dark); }
.fund-section-band .fund-section-num { color: rgba(255,255,255,.55); }

.fund-lead {
  margin: 0;
  max-width: 640px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.65;
  color: var(--ink-soft);
  letter-spacing: 0;
}

.fund-muted {
  margin: 6px 0 24px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-mute);
}
.fund-muted-small {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-mute);
  font-style: italic;
}

/* ─── Video ────────────────────────────────────────────── */
.fund-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 24px 60px -30px rgba(10,18,32,.45);
}
.fund-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ─── Documents — navy band, hover-flip tiles ──────────── */
.fund-docs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Four tracks, each card spanning two, so it still reads as a two-column
     grid — but a lone card on the last row (the 5th, "Annual Financial
     Statement (Audited)") can sit in the MIDDLE two tracks, centred under the pair above,
     instead of hanging off the left. Any odd count centres its last card. */
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.fund-docs > li { grid-column: span 2; }
.fund-docs > li:last-child:nth-child(odd) { grid-column: 2 / span 2; }
.fund-doc {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 22px;
  padding: 28px 32px;
  background: rgba(255,255,255,0.04);
  /* Ivory edge at .45 — the third setting and the one that holds. .14 was the
     same near-invisible hairline it replaced; full strength read as too bold,
     four bright boxes competing with the copy inside them. Just under half
     carries clearly on the navy without shouting. The fill stays white at .04;
     at that strength a tint reads as nothing either way. */
  border: 1px solid rgba(var(--ivory-rgb), .45);
  border-radius: 3px;
  text-decoration: none;
  color: var(--on-dark);
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.fund-doc:hover,
.fund-doc:focus-visible {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--ink);
  transform: translateY(-2px);
}
.fund-doc-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: normal;
}
.fund-doc-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.3;
  letter-spacing: 0;
  color: inherit;
}
.fund-doc-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 6px 10px;
  /* Same ivory as the card edge around it, rather than currentColor's white.
     .62 not .45 on purpose: this chip carries opacity .72 on the element, which
     multiplies into its border too, so .62 x .72 lands at ~.45 — the card's
     value. Matching the declarations here would have rendered the chip's edge
     a third fainter than the card's and the two would not have read as one
     material. */
  border: 1px solid rgba(var(--ivory-rgb), .62);
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  opacity: .72;
}
.fund-doc-arrow {
  font-size: 18px;
  opacity: .6;
  transition: transform .3s ease, opacity .3s ease;
}
.fund-doc:hover .fund-doc-arrow,
.fund-doc:focus-visible .fund-doc-arrow {
  opacity: 1;
  transform: translate(3px, -3px);
}

/* ─── Key facts (editorial snapshot) ───────────────────── */
.fund-kf-stats {
  display: grid;
  /* Four cells since 2026-09-18 (the Zenith badge joined the three figures).
     auto-fit rather than repeat(4): between this section's full width and the
     560px stack, four fixed columns squeeze the labels onto two lines each —
     auto-fit lets the row break to 2x2 through that band instead. */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.fund-kf-stat {
  padding: clamp(28px, 3.6vw, 48px) clamp(20px, 2.4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fund-kf-stat + .fund-kf-stat { border-left: 1px solid var(--line); }
/* The badge cell — no label, and centred rather than top-aligned. Pinning the
   mark to the sibling figures' height did align all four labels, but at 52px
   the badge's OWN type ("Zenith", "APPROVED") became unreadable, and a
   certification mark that says what it is does not need a "Rating" caption
   under it. So it gets a legible size and sits centred in the cell instead.
   Sized by HEIGHT with width:auto so the aspect ratio of a third party's mark
   is never altered. */
/* Zenith rating badge — sized and spaced to Annexure 1 of the Zenith Marketing
   & Promotions Policy (Nov 2025):
   · MINIMUM SIZE 114px wide on screen. --zr-w never goes below it (it was
     previously height-driven and topped out at ~110px wide — under the floor).
   · CLEAR SPACE on every side equal to the x-height of the "i" in "Zenith".
     Measured on the supplied PNG: 75px of x-height on a 524px-wide mark, so
     .143 of the rendered width (~16-19px here). The cell's own padding covers
     the sides and top; the gap below is set to that unit so the Disclaimer
     link can never sit inside it.
   · COLOUR: the full-colour version on this light ground, untouched — no
     filter, opacity or blend may ever be applied to it. */
.fund-kf-stat--rating {
  --zr-w: clamp(114px, 9vw, 132px);
  justify-content: center;
  gap: calc(var(--zr-w) * .143);
}
/* The rating's disclaimer link ("Disclaimer", pointing at the Zenith section
   of the disclaimer page). Deliberately quieter than .fund-kf-label — this is
   a compliance pointer, not a caption, so it should be findable without
   competing with the figures. Underlined because it is the only link in this
   row and nothing else marks it as one. */
.fund-kf-rating-note {
  align-self: start;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink-mute);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
.fund-kf-rating-note:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}
.fund-kf-rating {
  display: block;
  width: var(--zr-w);
  min-width: 114px;   /* the policy floor, restated so no override can undercut it */
  height: auto;       /* proportion is fixed by the file — never set both */
  /* Essential, not decoration: .fund-kf-stat is a COLUMN flex container, so
     the default align-items:stretch pulls a replaced element out to the full
     cell width and squashes the mark flat. The text figures beside it show no
     symptom, which is what makes this easy to miss. */
  align-self: start;
}
.fund-kf-figure {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1;
  letter-spacing: normal;
  color: var(--ink);
  display: flex;
  align-items: baseline;
}
/* The en dash between 15 and 25 was terracotta until 2026-09-11; it now takes
   the navy of the figure either side of it. Done by INHERITING rather than
   restating var(--ink): the dash is part of the number, not an accent on it,
   so it should follow .fund-kf-figure wherever that goes rather than be a
   second copy of the value that can drift. Margin stays — the en dash sits
   tight against the digits without it. */
.fund-kf-dash {
  margin: 0 2px;
}
.fund-kf-unit {
  font-family: var(--sans);
  font-size: 0.3em;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-left: 8px;
}
.fund-kf-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.fund-kf-details {
  margin: 0;
  padding: 0;
}
.fund-kf-detail {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.fund-kf-detail:last-child { border-bottom: 0; }
.fund-kf-detail dt {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}
/* Section footnote — the same idiom as .odds-footnote on the home band
   (marker in the label, small italic note at the section end), restated for
   the light page: the odds version is white-alpha on navy and would vanish
   here. First consumer is the Beta^ marker. */
.fund-kf-footnote {
  margin: clamp(28px, 4vh, 44px) 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-mute);
  font-style: italic;
}

.fund-kf-detail dd {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.fund-kf-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-deep);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 3px 8px;
}
.fund-kf-muted {
  font-weight: 400;
  color: var(--ink-mute);
}

/* ─── Fund Data — tabs + cells (light surface) ─────────── */
.fund-tabs {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.fund-tablist {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
  padding: 0;
}
.fund-tab {
  flex: 0 0 auto;
  padding: 20px 28px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
  position: relative;
  bottom: -1px;
}
.fund-tab:hover { color: var(--ink); }
.fund-tab[aria-selected="true"] {
  color: var(--ink);
  background: #fff;
  border-bottom-color: var(--ink);
}
.fund-tab:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
.fund-tabpanel { padding: 32px; }

.fund-data-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.fund-data-cell {
  padding: 24px 26px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 132px;
  justify-content: flex-start;
}
.fund-data-cell-wide { grid-column: span 2; }
.fund-data-label {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.fund-data-label-sub {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 9px;
  /* inherits text-transform:uppercase from .fund-data-label — same label scale */
  letter-spacing: var(--track-label);
  color: var(--ink-mute);
}
.fund-data-value {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
  letter-spacing: .005em;
  color: var(--ink);
}
.fund-data-value em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: normal;
}
.fund-placeholder {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-mute);
  font-size: 15px;
  letter-spacing: 0;
}
.fund-iframe-flush {
  margin: 4px -26px -24px;
  padding: 14px 18px 0;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.fund-iframe-flush iframe {
  display: block;
  width: 100%;
  background: #fff;
}

/* ─── Daily MPI — clean two-column card ────────────────── */
.fund-mpi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.fund-mpi-info {
  padding: clamp(28px, 3.4vw, 44px);
}
.fund-mpi-disclosure {
  padding: clamp(28px, 3.4vw, 44px);
  background: var(--bg-elev);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fund-mpi-disclosure-label {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.fund-mpi-value {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--ink);
}
.fund-mpi-value-unit {
  color: var(--ink-mute);
  font-size: 0.62em;
  font-weight: 500;
  margin-left: 2px;
}
.fund-mpi-disclosure-meta {
  margin: 0;
  max-width: 380px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ─── Historical NAV card ──────────────────────────────── */
.fund-nav-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.fund-table-wrap {
  border-bottom: 1px solid var(--line);
}
.fund-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.fund-table th,
.fund-table td {
  padding: 16px 28px;
  text-align: left;
  font-size: 15px;
}
.fund-table thead th {
  background: var(--bg-elev);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--line);
}
.fund-table thead th:last-child { text-align: right; }
.fund-table tbody td:last-child {
  text-align: right;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0;
}
.fund-table tbody td:first-child {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.fund-table tbody tr:nth-child(even) { background: var(--bg-elev); }
.fund-table tbody tr + tr td { border-top: 1px solid var(--line); }
.fund-nav-card-foot {
  padding: 24px clamp(20px, 3vw, 28px) 28px;
}

/* ─── ASX Announcements iframe card ────────────────────── */
.fund-iframe-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  padding: 0 16px;
}
.fund-iframe-card iframe {
  display: block;
  width: 100%;
  border: 0;
  background: #fff;
}

/* ─── Collapsible sections (details/summary dropdowns) ─── */
.fund-accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
  cursor: pointer;
  list-style: none;
}
.fund-accordion-head::-webkit-details-marker { display: none; }
.fund-accordion-head .fund-h2 {
  font-size: clamp(17px, 1.7vw, 21px);
  letter-spacing: normal;
}
.fund-accordion-head:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}
.fund-accordion[open] > .fund-accordion-head {
  margin-bottom: clamp(28px, 4vh, 48px);
}
.fund-accordion-icon {
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-right: 2px solid var(--ink-mute);
  border-bottom: 2px solid var(--ink-mute);
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.fund-accordion[open] .fund-accordion-icon { transform: rotate(-135deg); }
.fund-accordion-head:hover .fund-accordion-icon { border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .fund-accordion-icon { transition: none; }
}

/* ─── Disabled (placeholder) button ────────────────────── */
.btn.fund-disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Homepage about-section CTA pointing to /fund.html ── */
/* This CTA carries .btn .btn-outline in the markup, so its padding, type
   scale, border weight, hover AND SHAPE all come from the shared button
   styles and cannot drift from the other outline buttons. It ran as the one
   pill on the site until 2026-09-15, a deliberate exception the user then
   withdrew — no radius is declared here so it takes .btn's 2px like the rest;
   don't reintroduce one without a new decision. */
.about-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
}
/* Keyboard focus keeps the fill this button already had. The other outline
   buttons show only the UA focus ring, so this is an extra affordance rather
   than a visual divergence — the fill is exactly .btn-outline:hover. */
.about-cta:focus-visible {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.about-cta-arrow { transition: transform .25s ease; }
.about-cta:hover .about-cta-arrow,
.about-cta:focus-visible .about-cta-arrow { transform: translateX(3px); }

/* ─── Fund page responsive ─────────────────────────────── */
@media (max-width: 900px) {
  .fund-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .fund-ticker-card { min-height: 240px; }
  .fund-two-col { grid-template-columns: 1fr; gap: 28px; }
  .fund-col-label .fund-h2 {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }
  .fund-section-band .fund-col-label .fund-h2 {
    border-bottom-color: rgba(255,255,255,.16);
  }
  .fund-docs { grid-template-columns: 1fr; }
  /* Single column: drop the spans, or a span of 2 would invent a second track. */
  .fund-docs > li,
  .fund-docs > li:last-child:nth-child(odd) { grid-column: auto; }
  .fund-data-grid { grid-template-columns: 1fr; }
  .fund-data-cell-wide { grid-column: auto; }
  .fund-mpi { grid-template-columns: 1fr; }
  .fund-mpi-disclosure {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .fund-tabpanel { padding: 24px 22px; }
  .fund-iframe-flush { margin: 4px -22px -24px; }
}
@media (max-width: 560px) {
  .fund-kf-stats { grid-template-columns: 1fr; }
  .fund-kf-stat { padding: 24px 4px; }
  .fund-kf-stat + .fund-kf-stat {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .fund-kf-detail {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 0;
  }
}
@media (max-width: 640px) {
  .fund-table th, .fund-table td { padding: 14px 18px; font-size: 14px; }
  /* One centred row per card — number, title, PDF chip on the right — same as
     desktop. (Previously the chip was reflowed onto its own second row via
     grid-column:2, which left the cards tall and baggy with the chip floating
     bottom-right.) The fixed number width aligns every title to the same x —
     the italic 01/02/03/04 glyphs vary slightly in width. */
  .fund-doc {
    grid-template-columns: 30px 1fr auto;
    gap: 16px;
    padding: 20px 18px;
    /* Uniform height (~+30% over the natural ~80px): the two long titles wrap
       to 2 lines and made those cards 5px taller — a fixed floor evens all
       four out, content stays vertically centred. */
    min-height: 104px;
  }
}

/* ════════════════════════════════════════════════════════════
   APPROACH PAGE — Principles & Process
   - Single-column hero (no aside card)
   - Principles emphasise title + body; the numeral is a small mark
   - Process is an interactive two-column funnel: a sticky SVG funnel
     diagram on the left syncs with stage descriptions on the right
     (hover or scroll highlights the matching segment + card).
   ════════════════════════════════════════════════════════════ */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--d, 0s),
              transform .7s cubic-bezier(.2,.7,.2,1) var(--d, 0s);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
}
/* A BUTTON that also reveals has to get its hover transition back. `transition`
   is one property, not a list that merges, so the rule above does not add the
   reveal legs to .btn's `all .2s ease` — it REPLACES it, and every colour on the
   button then snaps between states with no fade at all. The user spotted it on
   the Founder-led Advantage "Invest now": "abrupt compared to the menu bar
   button", which is exactly right, because the header CTA does not reveal and so
   keeps its .2s.
   Restated here with both sets of legs. The reveal legs must stay identical to
   the rule above — same .7s, same curve, same var(--d) — or a revealing button
   would arrive differently from everything around it.
   Specificity is (0,3,0) against that rule's (0,2,0), so this wins wherever it
   sits in the file; it is kept next to the rule it repairs rather than beside
   the button, because the trap belongs to [data-reveal], not to any one page.
   Only one button on the site reveals today. This is for the next one. */
.js .btn[data-reveal] {
  transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--d, 0s),
              transform .7s cubic-bezier(.2,.7,.2,1) var(--d, 0s),
              background-color .2s ease,
              border-color .2s ease,
              color .2s ease;
}

/* The intro video reveals from a blur, but the generic [data-reveal].is-visible
   rule above only restores opacity/transform — so the blur(10px) on .hero-video
   never clears. Reset (and transition) the filter here too. */
.js .hero-video {
  transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--d, 0s),
              transform .7s cubic-bezier(.2,.7,.2,1) var(--d, 0s),
              filter .7s cubic-bezier(.2,.7,.2,1) var(--d, 0s);
}
.hero-video.is-visible { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-video { filter: none !important; }
}

/* ── Hero (navy, single line, compact) ────────────────────── */
.approach-hero {
  background: var(--dark);
  color: var(--on-dark);
  padding: clamp(56px, 8vh, 96px) 0 clamp(36px, 5vh, 56px);
}
/* Page entry section: tighter top padding so the heading sits closer
   to the sticky header */
.approach-page-entry { padding-top: clamp(56px, 8vh, 88px); }

/* Principles fill a full viewport between the two navy bands so the white
   section reads as a deliberate full-screen moment, not a thin sandwich.
   Content centres vertically; padding adds a little beyond 100vh. */
.page-approach .approach-page-entry {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* More air between the heading block and the three principles */
.page-approach .approach-page-entry .principles-head {
  margin-bottom: clamp(64px, 14vh, 140px);
}
.approach-hero .fund-section-eyebrow { color: var(--on-dark-mute); }
.approach-hero-inner { max-width: 880px; }
.approach-hero-title {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.04;
  letter-spacing: normal;
  color: var(--on-dark);
}

/* ── Principles — pillar style ── */

.principles-head {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}
.principles-head .fund-h2 { letter-spacing: normal; }
.principles-lead {
  margin: 0;
  max-width: 580px;
  font-family: var(--sans);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--ink-mute);
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.5vw, 56px);
}

.principle {
  position: relative;
  text-align: left;
  padding-top: clamp(28px, 4vw, 40px);
  /* One bar per card, navy, on the page's own white ground. Three variants
     were tried and dropped on 2026-09-10: an ordinal tally of one, two and
     three rules; the bar in ivory; and an ivory ground behind the section. The
     tally added a device without adding meaning, since the cards are read side
     by side and already carry their order in the copy, and ivory left the bar
     too faint to do its job. This section stays the white full-screen moment
     between the two navy bands — see the note below. */
  border-top: 1.5px solid var(--ink);
  opacity: 0;
  transform: translateY(16px);
  /* Reveal only. The border-color leg of this transition went with the
     sibling-dimming hover removed on 2026-09-09 — nothing animates the border
     any more, so carrying the transition would be dead weight. */
  transition: opacity .7s ease calc(var(--d, 0s)),
              transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0s));
}
.principle.is-visible { opacity: 1; transform: translateY(0); }

/* The grid had a hover effect that dimmed every card but the one under the
   cursor. Removed 2026-09-09 at the user's request: the cards are a static
   statement of principles, not a set of choices to pick between, so pointing
   at one had no meaning to convey. */

.principle-num { display: none; }

.principle-content { max-width: 440px; }

.principle-title {
  margin: 0 0 clamp(12px, 1.5vw, 18px);
  /* SANS on purpose, though every other heading on the site is serif: tried in
     Riccione on 2026-09-21 and reverted within the minute. The three cards
     read as a technical statement rather than display copy, and the serif
     softened that. Don't "fix" this to match .section-title. */
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.2;
  letter-spacing: .002em;
  color: var(--ink);
}

.principle-body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.65;
  color: var(--ink-soft);
  /* The 4px offset and its transition existed only so the body could settle
     upward on hover; with the hover gone the body simply sits where it landed.
     Left as `none` rather than translateY(0) so nothing here reads as a
     starting position for an animation that no longer exists. */
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .principle, .principle-title, .principle-body {
    transition: none;
  }
  .principle { opacity: 1; transform: none; }
  .principle-body { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
  .principles-grid { grid-template-columns: repeat(2, 1fr); gap: 56px 32px; }
  .principle-body { opacity: 1; transform: none; }
}
@media (max-width: 560px) {
  .principles-grid { grid-template-columns: 1fr; }
}

/* ── Funnel: pinned + scroll-driven card stack ──────────────
   Three trapezoid rows stacked vertically to form a funnel.
   Each row clips to its own trapezoid shape (forming the funnel
   profile when stacked). On scroll, each row reveals additively:
   starts translated-down + low opacity, animates to translateY(0)
   + full opacity. Previous rows stay revealed. */

.funnel-scroll-track {
  position: relative;
  height: 430vh; /* taller = more scroll runway: more frames per scroll, so the
                    countdown steps through more values. The cull windows fill
                    most of this; the gather span is sized to keep its original pace. */
}
.funnel-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Symmetric padding (header-height top and bottom) so the countdown
     composition centres on the true middle of the viewport */
  padding: 108px 0 108px;
  box-sizing: border-box;
}
.funnel-frame {
  position: relative;
  z-index: 1; /* keep scene content above the dots canvas */
  width: 100%;
  max-width: min(680px, 76vh);
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Central group — count + active filter caption; auto margins centre it
   in the space above the bottom caption */
.funnel-center {
  margin: auto 0;
  width: 100%;
}

/* The investable-universe dot field behind the funnel — full-bleed:
   spans the viewport width (sized by JS), centred on the pinned column */
.funnel-dots {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  display: block;
  pointer-events: none;
}

/* Cap labels above/below the funnel */
.funnel-label {
  margin: 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
/* Eyebrow above the countdown */
.funnel-eyebrow { margin-bottom: clamp(14px, 2.5vh, 24px); }

/* The countdown — large, with a small unit label beside it. The unit
   sits in a zero-width anchor so flex centring sees only the number:
   the digits stay dead-centre at every value, and the label simply
   follows the number's right edge as it narrows. */
.funnel-count-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.funnel-count {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(72px, 19vh, 168px);
  line-height: 1;
  letter-spacing: normal;
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
}
.funnel-count-unit-anchor {
  width: 0;
  overflow: visible;
}
.funnel-count-unit {
  display: inline-block;
  padding-left: 14px;
  white-space: nowrap;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(13px, 1.05vw, 15px);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-dark-mute);
}

/* The three filters side by side beneath the count — each column fades
   in as its wave of dots is culled, and stays */
.funnel-stage {
  width: 100%;
  margin-top: clamp(20px, 3.5vh, 32px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.funnel-stage-item {
  opacity: 0;
  transform: translateY(14px);
  /* Time-based fade: a scroll crossing toggles .is-visible; the transition
     plays smoothly on its own clock, independent of scroll speed. */
  transition: opacity .7s ease, transform .7s ease;
  text-align: center;
}
.funnel-stage-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .funnel-stage-item { transition: none; }
}
.funnel-stage-title {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.2;
  letter-spacing: .004em;
  color: var(--on-dark);
}
.funnel-stage-text {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.5;
  color: var(--on-dark-mute);
}

/* ── Portfolio Discipline — just heading + 3 cards (no tag/lead) ── */
.discipline {
  margin-top: clamp(64px, 9vh, 104px);
  padding-top: clamp(40px, 6vh, 64px);
  border-top: 1px solid rgba(255,255,255,.10);
}
.discipline-heading {
  margin: 0 0 clamp(28px, 4vh, 44px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--on-dark);
}
.discipline-grid {
  display: grid;
  /* Back to three cards on 2026-09-15 (Risk Discipline joined Portfolio
     Management and Capital Recycling), matching the "3 cards" this block's
     header comment always promised. auto-fit rather than repeat(3): between
     the desktop width and the 720px stack, three fixed columns fall under
     ~220px and the copy shreds to three words a line — auto-fit lets the
     third card wrap to its own row through that band instead. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(28px, 3.5vw, 64px);
  max-width: 1140px;
}
.discipline-card {
  position: relative;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.discipline-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 32px;
  height: 1px;
  background: var(--terracotta);
}
.discipline-title {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.22;
  letter-spacing: .005em;
  color: var(--on-dark);
}
.discipline-text {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(14.5px, 1.15vw, 16px);
  line-height: 1.55;
  color: var(--on-dark-mute);
}

/* ── Approach intro — dark band with positioning headline ── */
.approach-intro {
  background: var(--dark);
  color: var(--on-dark);
  /* deeper bottom padding: more navy below the headline before the
     curtain covers it */
  padding: clamp(96px, 16vh, 168px) 0 clamp(150px, 26vh, 280px);
  border-bottom: 0;
}

/* Curtain effect: the intro pins to the viewport top and the rest of the
   page (.approach-curtain) scrolls up over it, covering the headline.
   The intro copy is faded/settled by JS as it is buried. */
.page-approach .approach-intro {
  position: sticky;
  top: 0;
  z-index: 0;
}
.approach-curtain {
  position: relative;
  z-index: 1;
  background: var(--bg);
  box-shadow: 0 -24px 48px rgba(23, 31, 47, .25); /* soft lift at the seam */
}
.approach-intro-eyebrow {
  display: inline-flex;
  align-items: center;
  /* Same eyebrow+dash geometry as .invest-eyebrow / .fund-section-eyebrow
     (16px gap, 48px dash) — dark-theme colours, compositional margin kept. */
  gap: 16px;
  margin: 0 0 clamp(36px, 5vh, 56px);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--on-dark);
}
.approach-intro-eyebrow::after {
  content: "";
  display: inline-block;
  width: 48px;
  height: 1px;
  background: var(--terracotta);
}
.approach-intro-headline {
  margin: 0;
  max-width: 1100px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.18;
  letter-spacing: normal;
  color: var(--on-dark);
}

/* ── Team — restrained portrait, sits at top of page ─────── */
.approach-team {
  border-bottom: 0;
  padding-bottom: clamp(20px, 3vh, 36px);
}
/* When at page entry (top of main), match the existing entry top-padding */
.approach-team-entry {
  padding-top: clamp(56px, 8vh, 88px);
}
.approach-team-figure {
  margin: 0 auto;
  max-width: 1080px;
  text-align: center;
}
.approach-team-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 22px 56px -28px rgba(23, 31, 47, .35);
  background: var(--line);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.approach-team-figure.is-visible img {
  opacity: 1;
  transform: none;
}


/* ── CTA ─────────────────────────────────────────────────── */
.approach-cta {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.approach-cta-title {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.18;
  letter-spacing: normal;
  color: var(--ink);
}
.approach-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Mobile: no pin — static scene showing the final state; the three
     filters become simple stacked cards */
  .funnel-scroll-track { height: auto; }
  .funnel-pin { position: static; height: auto; display: block; }
  .funnel-frame { max-width: 560px; height: auto; display: block; }
  .funnel-center { margin: 0; }
  .funnel-count { font-size: 64px; }
  .funnel-stage { display: block; margin-top: 24px; }
  .funnel-stage-item {
    opacity: 1 !important;
    transform: none !important;
    text-align: left;
    padding: 14px 18px;
    margin-bottom: 10px;
    background: rgba(255,255,255,.05);
    border-left: 2px solid rgba(255,255,255,.30);
  }
  .funnel-stage-item:last-child { margin-bottom: 0; }
  .discipline-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ═══════════════════════════════════════════════════════════
   INSIGHTS PAGE
   ═══════════════════════════════════════════════════════════ */

/* ── Intro — pinned dark banner with curtain scroll ─────── */
.insights-intro {
  position: sticky;
  top: 0;
  z-index: 0;
  background: var(--dark);
  color: var(--on-dark);
  padding: clamp(120px, 15vh, 160px) 0 clamp(150px, 21vh, 220px);
  text-align: center;
  overflow: hidden;
}
.page-insights .insights-intro {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.insights-curtain {
  position: relative;
  z-index: 1;
  background: var(--bg);
}
.insights-intro-eyebrow {
  /* The eyebrow + dash motif the other heroes use (.approach-intro-eyebrow,
     .invest-eyebrow, .fund-section-eyebrow) but without the dash here. No
     gap either, since the text is now the only thing in the box. */
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--on-dark);
  margin: 0 0 36px;
}
.insights-intro-headline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1.08;
  letter-spacing: normal;
  margin: 0 auto 28px;
  /* 840px, not 800px: "Essays from the desk." at 88px sits within ~2% of an
     800px cap, so any tracking increase orphans "desk." on a second line (a
     .015em site-wide loosening did exactly that). Headroom keeps it on one. */
  max-width: 840px;
  color: var(--on-dark);
}
.insights-intro-sub {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.65;
  color: var(--on-dark-mute);
  max-width: 560px;
  margin: 0 auto;
}

/* ── Intro entrance — approach + insights pages ────────── */
@keyframes intro-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.js .approach-intro-eyebrow,
.js .approach-intro-headline,
.js .insights-intro-eyebrow,
.js .insights-intro-headline,
.js .insights-intro-sub {
  opacity: 0;
  animation: intro-rise .9s cubic-bezier(.2,.7,.2,1) forwards;
  will-change: opacity, transform;
}
.js .approach-intro-eyebrow,
.js .insights-intro-eyebrow { animation-delay: .15s; }
.js .approach-intro-headline,
.js .insights-intro-headline { animation-delay: .35s; }
.js .insights-intro-sub { animation-delay: .55s; }

@media (prefers-reduced-motion: reduce) {
  .js .approach-intro-eyebrow,
  .js .approach-intro-headline,
  .js .insights-intro-eyebrow,
  .js .insights-intro-headline,
  .js .insights-intro-sub {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════
   INVEST PAGE — compact header + tabbed "ways to invest"
   ════════════════════════════════════════════════════════ */

/* Compact light page header (no full-screen dark banner) */
.invest-hero { padding: clamp(56px, 9vh, 104px) 0 clamp(24px, 4vh, 40px); }
.invest-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.invest-eyebrow::after {
  content: "";
  display: inline-block;
  width: 48px;
  height: 1px;
  background: var(--terracotta-on-light);
}
.invest-title {
  margin: 0;
  max-width: 860px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.14;
  letter-spacing: normal;
  color: var(--ink);
}

/* ── Tabbed ways to invest ─────────────────────────────── */
.invest-tabs-section { padding-bottom: clamp(56px, 9vh, 112px); }
.invest-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}
.invest-tab {
  appearance: none;
  margin: 0;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .12);
  background: var(--dark);
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: clamp(14px, 1.35vw, 18px);
  font-weight: 500;
  letter-spacing: .01em;
  padding: clamp(17px, 2.6vh, 26px) clamp(18px, 2.7vw, 34px);
  text-align: left;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.invest-tab:last-child { border-right: 0; }
.invest-tab:hover { background: var(--accent-deep); }
.invest-tab.is-active {
  background: var(--bg-elev-cool);
  color: var(--ink);
  cursor: default;
  box-shadow: inset 0 3px 0 var(--accent-deep);
}
.invest-tab.is-active:hover { background: var(--bg-elev-cool); }
.invest-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.invest-panels {
  border: 1px solid var(--line);
  border-radius: 0 0 3px 3px;
  background: var(--bg-elev-cool);
  box-shadow: 0 36px 70px -36px rgba(23, 31, 47, .35);
}
.invest-panel { display: none; }
.invest-panel.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  min-height: clamp(260px, 32vh, 380px);
  padding: clamp(38px, 6vh, 68px) clamp(32px, 4.5vw, 60px);
  animation: invest-panel-in .4s cubic-bezier(.2, .7, .2, 1);
}
.invest-panel-lead { padding-right: clamp(28px, 4vw, 60px); }
.invest-panel-how {
  border-left: 1px solid var(--line);
  padding-left: clamp(28px, 4vw, 60px);
}
@keyframes invest-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .invest-panel.is-active { animation: none; }
}
.invest-panel-ticker {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-deep);
}
/* The ASX code is a real ticker — give it a pronounced badge */
.invest-panel-ticker--code {
  display: inline-block;
  margin: 0 0 18px;
  padding: 8px 16px;
  border-radius: 3px;
  background: var(--dark);
  color: var(--on-dark);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .14em;
}
.invest-panel-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  letter-spacing: normal;
  color: var(--ink);
}
.invest-panel-desc {
  margin: 18px 0 0;
  max-width: 480px;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--ink-soft);
}
.invest-how-label {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.invest-steps {
  list-style: none;
  counter-reset: invstep;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.invest-steps li {
  counter-increment: invstep;
  position: relative;
  padding-left: 46px;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.55;
}
.invest-steps li::before {
  content: counter(invstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--accent-deep);
  letter-spacing: normal;
}
.invest-amount { font-weight: 500; color: var(--ink); }
.invest-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.invest-platforms {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  max-width: 460px;
}
.invest-platforms li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
}
/* padding lives on the link so the whole tile is the hit area */
.invest-platforms li > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 8px 12px; }
.invest-platforms img {
  max-height: 30px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}
.invest-note {
  margin: 18px 0 0;
  max-width: 460px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mute);
}
.invest-note-cta { margin-top: 32px; }
.invest-disclosure {
  margin: clamp(24px, 4vh, 36px) auto 0;
  max-width: 760px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-mute);
  text-align: center;
}

/* ── Need help investing ───────────────────────────────── */
.invest-help-inner { text-align: center; max-width: 640px; margin: 0 auto; }
.invest-help-title {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: normal;
  color: var(--ink);
}
.invest-help-text {
  margin: 0 0 30px;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--ink-mute);
}
.invest-help-email {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: color .2s ease, border-color .2s ease;
}
.invest-help-email:hover { color: var(--accent-deep); border-color: var(--accent); }

/* Team page — member profiles */
.team-group { margin-top: clamp(48px, 7vh, 88px); }
.team-group:first-of-type { margin-top: 0; }
.team-group-title {
  margin: 0 0 clamp(28px, 4vh, 44px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 56px);
}
.team-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-elev);
}
.team-photo-bg,
.team-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* The original photo (with its scenic background) sits behind, static. */
.team-photo-bg { z-index: 0; }
/* Navy diagonal — over the scenic background, behind the figure; sweeps in on hover. */
.team-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--accent-deep);
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
  transform: translateX(101%);
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}
.team-member:hover .team-photo::after,
.team-member:focus-visible .team-photo::after { transform: translateX(0); }
/* The cut-out sits on top; a gentle zoom from centre on hover (centre origin
   avoids the bottom-edge seam the previous bottom-anchored scale produced). */
.team-photo-img {
  z-index: 2;
  backface-visibility: hidden;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.team-member:hover .team-photo-img,
.team-member:focus-visible .team-photo-img { transform: scale(1.04); }
/* Fade the cut-out in on load (JS only; no-JS shows it immediately). Keeps the
   hover-zoom transform in the same transition list. */
.js .team-photo-img {
  opacity: 0;
  transition: opacity .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.js .team-photo-img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .team-photo::after,
  .team-photo-img { transition: none; }
  .js .team-photo-img { opacity: 1; }
}
.team-name {
  margin: 20px 0 3px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 24px);
  letter-spacing: normal;
  color: var(--ink);
}
.team-role {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-deep);
}
.team-member { cursor: pointer; }
.team-member:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.team-toggle {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color .2s ease;
}
.team-toggle::after { content: "Read bio +"; }
.team-member:hover .team-toggle { color: var(--accent-deep); }
/* Bio lives hidden in the card as the data source; shown in the pop-out modal. */
.team-bio { display: none; }

/* ── Team bio pop-out modal ─────────────────────────────── */
.team-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}
.team-modal.is-open { display: flex; }
.team-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 31, 47, .45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.team-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow: auto;
  background: var(--bg);
  border-radius: 4px;
  padding: clamp(32px, 5vw, 52px);
  box-shadow: 0 40px 90px -28px rgba(10, 18, 32, .55);
  animation: team-modal-in .35s cubic-bezier(.2, .7, .2, 1);
}
@keyframes team-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.team-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 2;
  background: none;
  border: 0;
  padding: 4px;
  font-size: 30px;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color .2s ease;
}
.team-modal-close:hover { color: var(--ink); }
.team-modal-name {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: normal;
  color: var(--ink);
}
.team-modal-role {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-deep);
}
.team-modal-bio {
  margin: 0;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--ink-soft);
}
body.modal-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .team-modal-card { animation: none; }
}
@media (max-width: 860px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* Visually-hidden (screen-reader only) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  .invest-panel.is-active {
    /* minmax(0,1fr), not bare 1fr: a plain 1fr track has a min-content floor,
       and the platforms grid (auto-fill against its 460px max-width) resolves
       4 tiles wide — blowing the column out past the viewport so the last
       tiles bled off-screen. Zeroing the floor lets it wrap to fit. */
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: clamp(32px, 6vh, 52px) clamp(22px, 6vw, 36px);
  }
  .invest-panel-lead { padding-right: 0; padding-bottom: 30px; }
  .invest-panel-how {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 30px;
  }
  .invest-tab { font-size: 15px; padding: 16px 16px; }
}
@media (max-width: 480px) {
  .invest-tabs { grid-template-columns: 1fr; }
  .invest-tab { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .invest-tab:last-child { border-bottom: 0; }
  .invest-tab.is-active { box-shadow: inset 3px 0 0 var(--accent-deep); }
}

/* ── Featured essay — hero card ────────────────────────── */
.ins-featured {
  padding: clamp(72px, 10vh, 120px) 0 clamp(48px, 6vh, 80px);
}
.ins-feature-card {
  max-width: 820px;
  margin: 0 auto;
  border-left: 2px solid var(--accent);
  padding-left: clamp(28px, 4vw, 48px);
}
.ins-feature-card[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.ins-feature-card[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ins-feature-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.ins-tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-deep);
  background: rgba(80, 110, 136, .08);
  padding: 4px 12px;
  border-radius: 2px;
}
.ins-date {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ins-feature-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: normal;
  margin: 0 0 20px;
}
.ins-feature-title a {
  color: var(--ink);
  text-decoration: none;
  transition: color .2s;
}
.ins-feature-title a:hover { color: var(--accent-deep); }
.ins-feature-excerpt {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 0 28px;
}
.ins-read-link {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-deep);
  text-decoration: none;
  transition: color .2s;
}
.ins-read-link:hover { color: var(--ink); }
.ins-read-link span {
  display: inline-block;
  transition: transform .25s ease;
}
.ins-read-link:hover span { transform: translateX(4px); }

/* ── Archive — segmented tabs + overlay-card grid ──────── */
.ins-archive {
  padding: clamp(64px, 9vh, 110px) 0 clamp(72px, 10vh, 120px);
}
/* Grid breaks out wider than the standard column */
.ins-archive .container {
  max-width: 1480px;
}

/* Filter tabs — understated underline labels */
.ins-tabs {
  display: flex;
  justify-content: center;
  gap: clamp(22px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(32px, 4.5vh, 56px);
}
.ins-filter {
  position: relative;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
  background: none;
  border: none;
  padding: 0 2px 18px;
  cursor: pointer;
  transition: color .25s;
}
.ins-filter:hover { color: var(--ink); }
.ins-filter.is-active { color: var(--ink); }
.ins-filter::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--terracotta-on-light);
  transform: scaleX(0);
  transition: transform .3s ease;
}
.ins-filter.is-active::after { transform: scaleX(1); }

/* Card grid */
.ins-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
}
/* Landscape Media / Videos & Webinars go 2-up so the wide thumbnails read large;
   portrait Articles stay 3-up. Driven by data-filter (set by applyFilter).
   Desktop only — below 900px the base grid already steps to 2- then 1-column. */
@media (min-width: 901px) {
  .ins-grid[data-filter="media"],
  .ins-grid[data-filter="videos-webinars"] {
    grid-template-columns: repeat(2, 1fr);
  }
}
.ins-card[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease-out calc(var(--d, 0s)), transform .6s ease-out calc(var(--d, 0s));
}
.ins-card[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ins-card-link {
  display: block;
  text-decoration: none;
}

/* Media tile — image or type, title overlaid */
.ins-card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--dark);
  background-size: cover;
  background-position: center 20%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}
/* Media and Videos & Webinars thumbnails are landscape, so give those cards a
   16:9 tile instead of the portrait 4:5 used for Articles — the source images
   fill it without side-cropping. Each Insights tab shows a single category, so
   the grid stays uniform within a view. */
.ins-card[data-category="media"] .ins-card-media,
.ins-card[data-category="videos-webinars"] .ins-card-media {
  aspect-ratio: 16 / 9;
}
/* legibility scrim */
.ins-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(15,20,31,.84) 0%, rgba(15,20,31,.42) 40%, rgba(15,20,31,.06) 72%, rgba(15,20,31,0) 100%);
  transition: opacity .4s;
}

/* photo tiles: original colour */
.ins-card-media--photo {
  background-color: #232c3b;
}
/* The photo lives on a ::before layer (behind the scrim at z1 and the caption
   at z2) so it can fade in on load without touching the placeholder colour,
   gradient or text. Fed by the --ins-img / --ins-pos custom properties. */
.ins-card-media--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--ins-img);
  background-size: cover;
  background-position: var(--ins-pos, center 20%);
}
/* JS on: start transparent, fade in once the photo has loaded.
   No-JS: the rule above shows it immediately (opacity defaults to 1). */
.js .ins-card-media--photo::before { opacity: 0; transition: opacity .45s ease; }
.js .ins-card-media--photo.is-loaded::before { opacity: 1; }

/* type tiles: brand navy, calm negative space */
.ins-card-media--type {
  background-image: linear-gradient(165deg, #1d2738 0%, #141b29 100%);
}
.ins-card-media--type[data-cat="research"] {
  background-image: linear-gradient(165deg, #213141 0%, #141b29 100%);
}
.ins-card-media--type::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1;
  background: var(--accent);
  opacity: .55;
}

/* gentle hover lift */
.ins-card-link { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.ins-card:hover .ins-card-link { transform: translateY(-4px); }

/* Kicker — category eyebrow with dot, top-left */
.ins-card-kicker {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
.ins-card-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(255,255,255,.14);
}
/* Attention pulse — the newest essay CURRENTLY IN VIEW. Two staggered rings +
   a brighter, glowing core; shares the home page's keyframe.
   Not :first-child — the grid is filtered by category (applyFilter hides the
   non-matching cards with display:none), so the structurally-first card is
   often hidden and its pulse invisible. applyFilter tags the first VISIBLE card
   with .is-latest instead, and re-tags on every tab change.
   No-JS fallback: nothing is filtered, so the first card IS the newest. */
.ins-card.is-latest .ins-card-dot,
html:not(.js) .ins-card:first-child .ins-card-dot {
  width: 8px;
  height: 8px;
  background: var(--terracotta);
  box-shadow: 0 0 8px 1px rgba(250, 160, 138, .6);
}
.ins-card.is-latest .ins-card-dot::before,
.ins-card.is-latest .ins-card-dot::after,
html:not(.js) .ins-card:first-child .ins-card-dot::before,
html:not(.js) .ins-card:first-child .ins-card-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--terracotta);
  animation: insight-dot-pulse 2s cubic-bezier(.3, 0, .5, 1) infinite;
}
.ins-card.is-latest .ins-card-dot::before,
html:not(.js) .ins-card:first-child .ins-card-dot::before { animation-delay: -1s; }

/* Caption — title + byline, bottom */
.ins-card-cap {
  position: relative;
  z-index: 2;
  padding: clamp(20px, 2vw, 28px);
}
.ins-card-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.18;
  letter-spacing: normal;
  margin: 0;
  color: #fff;
  transition: color .25s;
}
.ins-card-byline {
  margin: 10px 0 0;
  font-size: 13px;
  font-style: italic;
  color: rgba(255,255,255,.66);
  font-family: var(--serif);
  letter-spacing: normal;
}
.ins-card:hover .ins-card-title { color: #eaf0f6; }

/* ── Subscribe CTA ─────────────────────────────────────── */
.ins-subscribe {
  padding: clamp(72px, 10vh, 120px) 0;
  /* no band of its own — sits on the page's white background */
}
.ins-subscribe-inner {
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
}
.ins-subscribe-inner[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.ins-subscribe-inner[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ins-subscribe-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 5vw, 56px);
  margin: 0 0 14px;
  color: var(--ink);
  letter-spacing: normal;
}
.ins-subscribe-text {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0 0 36px;
}
.ins-subscribe-form {
  display: flex;
  gap: 12px;
  max-width: 440px;
  margin: 0 auto;
}
.ins-subscribe-input {
  flex: 1;
  font-family: var(--sans);
  font-size: 15px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color .2s;
}
.ins-subscribe-input::placeholder { color: var(--ink-mute); }
.ins-subscribe-input:focus { border-color: var(--accent-deep); }

/* ── Insights page responsive ──────────────────────────── */
@media (max-width: 900px) {
  .ins-grid { grid-template-columns: repeat(2, 1fr); }
  .ins-subscribe-form { flex-direction: column; }
}
@media (max-width: 560px) {
  .ins-grid { grid-template-columns: 1fr; }
  .ins-tabs { gap: 18px; flex-wrap: wrap; }
  /* Top padding gives the filter tabs a thumb-sized tap target on touch. */
  .ins-filter { padding: 10px 2px 14px; letter-spacing: var(--track-label); font-size: 11px; }
  .ins-card-media { aspect-ratio: 4 / 3; }
}

/* ═══════════════════════════════════════════════════════════
   ESSAY / ARTICLE PAGE — editorial print layout
   ═══════════════════════════════════════════════════════════ */

.page-essay { background: var(--bg); }

/* ── Back link ─────────────────────────────────────────── */
.essay-back-wrap {
  padding: clamp(20px, 3vh, 32px) 0 clamp(18px, 2.5vh, 28px);
}
.essay-back {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  transition: color .25s;
}
.essay-back:hover { color: var(--accent-deep); }

/* ── The Portrait — grand, commanding centrepiece ──────── */
.essay-portrait {
  margin: 0 auto;
  padding: 0 var(--gutter);
  max-width: 1240px;
}
.essay-portrait img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 170px);
  margin: 0 auto;
}

/* ── Decorative rule ───────────────────────────────────── */
.essay-rule {
  border: none;
  height: 1px;
  background: var(--line);   /* grey hairline (was tan #cdc8bf) */
  margin: 0;
}

/* ── Header — title block ──────────────────────────────── */
.essay-container {
  max-width: 820px;
  margin: 0 auto;
}
.essay-header {
  padding: clamp(48px, 6vh, 72px) 0 0;
  text-align: center;
}
.essay-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(20px, 2.5vh, 28px) 0;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.essay-meta-dot { opacity: .35; }

.essay-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: normal;
  text-wrap: balance;
  margin: clamp(8px, 1.5vh, 16px) 0 clamp(40px, 5.5vh, 60px);
  color: var(--ink);
}

.essay-epigraph {
  margin: 0 auto clamp(36px, 5vh, 56px);
  padding: 0;
  border: none;
  /* Runs the FULL .essay-container measure, like the body copy and the two
     hairlines that bracket this block. It used to be capped at 560px inside the
     820px container, which left it centred as a BLOCK while its text stayed
     left-aligned (the bare `blockquote` rule pins text-align: left, and a
     direct rule beats the centring .essay-header inherits down). The result
     was a quote whose left edge lined up with nothing — 130px in from the
     hairline ends and the body copy below — and a stranded third line. The
     house blockquote rule already states the intent: "flush left and runs the
     full measure of the body it sits in". The cap was what contradicted it. */
  max-width: none;
  position: relative;
}
/* Serif italic, like the title above it and the section heads below. A sans
   (Manrope, upright) pass was tried on 2026-09-09 to break the register and
   reverted the same day: the whole essay header reads as ONE serif-italic
   voice, and that is the intent. If it is ever revisited, note that Manrope
   cannot be italic here at all — its @font-face declares `font-style: normal`
   only and `font-synthesis: none` on body suppresses synthetic oblique. */
.essay-epigraph p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
  letter-spacing: normal;
}

/* ── Body — editorial typography ───────────────────────── */
.essay-body {
  padding: clamp(48px, 6vh, 72px) 0 clamp(56px, 8vh, 96px);
}

.essay-body h2 {
  font-family: var(--serif);
  /* Italic, kept. Briefly set upright on 2026-09-09 and put straight back — the
     serif italic IS the section-head voice here, and the title and epigraph
     share it. Do not "vary" one of the three; they are meant to match. */
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.3;
  letter-spacing: normal;
  margin: clamp(52px, 7vh, 76px) 0 18px;
  color: var(--ink);
}
.essay-body h2:first-child { margin-top: 0; }

.essay-body p {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.82;
  color: var(--ink-soft);
  margin: 0 0 26px;
}
.essay-body p em { font-style: italic; }

/* Inline quotes */
.essay-inline-quote {
  margin: 40px 0;
  padding: 0 0 0 clamp(24px, 3vw, 36px);
  border-left: 2px solid var(--terracotta-on-light);
}
.essay-inline-quote p {
  font-family: var(--sans);
  font-style: normal;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

/* Inline figure (chart / image within the body) */
.essay-figure {
  margin: clamp(36px, 5vh, 56px) 0;
}
.essay-figure img {
  width: 100%;
  height: auto;
}
.essay-figure figcaption {
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink-mute);
  text-align: center;
}

/* Disclaimer — 3x clearance between the article's last element and the rule.
   NOTE: the selector needs `.essay-body p`-beating specificity or that rule's
   margin shorthand (0 0 26px) zeroes this margin-top (that's why the old
   36-52px clamp never actually applied — the visible gap was just the previous
   paragraph's 26px bottom margin). */
.essay-disclaimer,
.essay-body p.essay-disclaimer {
  margin-top: clamp(72px, 9vh, 90px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-style: italic;
  color: var(--ink-mute) !important;
}

/* ── Essay footer ──────────────────────────────────────── */
.essay-foot {
  padding: clamp(40px, 5vh, 60px) 0 clamp(48px, 6vh, 72px);
  border-top: 1px solid #cdc8bf;
}
.essay-foot .essay-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.essay-author-label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.essay-author-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: var(--ink);
  letter-spacing: normal;
}

/* ── Essay responsive ──────────────────────────────────── */
@media (max-width: 560px) {
  .essay-inline-quote { margin-left: 0; margin-right: 0; }
  .essay-foot .essay-container { flex-direction: column; align-items: flex-start; }
}

/* ── Entrance animation ────────────────────────────────── */
@keyframes essay-portrait-in {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes essay-rise-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.js .essay-back,
.js .essay-portrait img,
.js .essay-header .essay-rule:first-of-type,
.js .essay-meta,
.js .essay-title,
.js .essay-epigraph {
  opacity: 0;
  will-change: opacity, transform;
}

.js .essay-back        { animation: essay-rise-in .7s ease-out .15s forwards; }
.js .essay-portrait img{ animation: essay-portrait-in 1.4s cubic-bezier(.2,.7,.2,1) .25s forwards; }
.js .essay-header .essay-rule:first-of-type { animation: essay-rise-in .8s ease-out .7s forwards; }
.js .essay-meta        { animation: essay-rise-in .8s ease-out .9s forwards; }
.js .essay-title       { animation: essay-rise-in .9s ease-out 1.05s forwards; }
.js .essay-epigraph    { animation: essay-rise-in .9s ease-out 1.25s forwards; }

@media (prefers-reduced-motion: reduce) {
  .js .essay-back,
  .js .essay-portrait img,
  .js .essay-header .essay-rule:first-of-type,
  .js .essay-meta,
  .js .essay-title,
  .js .essay-epigraph {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ── Scroll-cover: the hero owns the first screen, the article rises over it ── */
/* Float the back-link over the hero so the image centres in the full space
   below the header rather than being pushed down by it. */
.page-essay .essay { position: relative; }
.page-essay .essay-back-wrap {
  /* Fixed (out of flow) so it doesn't push the hero portrait down. The topbar is
     home-only, so on article pages the header sits at the top and top:92px lands
     the link just below it. (It was briefly sticky to dodge the topbar; no longer
     needed here.) The portrait's z-index:0 keeps this link clickable. */
  position: fixed;
  top: 92px;
  left: 0;
  right: 0;
  z-index: 1;
}
.page-essay .essay-portrait {
  position: sticky;
  top: 92px;            /* sit just below the sticky site header */
  z-index: 0;           /* below the fixed back link (z1) — being later in the DOM it
                           otherwise paints over it and swallows its clicks; the rising
                           article (z2) still covers both */
  min-height: calc(100vh - 92px);   /* reserve the whole first screen */
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-essay .essay-portrait img {
  max-height: calc(100vh - 92px - clamp(24px, 5vh, 56px));
}
.page-essay .essay-header,
.page-essay .essay-body,
.page-essay .essay-foot {
  position: relative;
  z-index: 2;           /* opaque panel that slides over the portrait */
  background: var(--bg);
}
.page-essay .essay-header {
  /* SQUARE leading edge. It carried `border-radius: 22px 22px 0 0` to read as a
     card rising over the portrait, but the panel is full-bleed — so the corners
     curved away from the viewport edges and left two notches of the page ground
     showing at the top, which is what they looked like rather than a rounded
     card. The shadow alone does the lifting-sheet job, and squarer edges are the
     site's idiom anyway (see the buttons). */
  box-shadow: 0 -24px 60px -24px rgba(20, 30, 50, .22);
}
@media (max-width: 540px) {
  .page-essay .essay-back-wrap { top: 76px; }
  .page-essay .essay-portrait {
    top: 76px;
    min-height: calc(100vh - 76px);
  }
  .page-essay .essay-portrait img {
    max-height: calc(100vh - 76px - clamp(16px, 4vh, 40px));
  }
}

/* ── Short deep-navy gradient at the foot of the large dark sections ──
   Layered over the flat --dark fill: a brief fade into the site's deep
   blue (#070a14) across the bottom ~120px, leaving the rest of the panel
   unchanged. Sits in the background layer, so it never dims the text on
   top. (.hero is excluded — it already has its own bottom-corner vignette.) */
.odds,
.fund-section-band,
.approach-hero,
.approach-intro,
.insights-intro {
  background: linear-gradient(to top, rgba(7, 10, 20, 0.5) 0%, rgba(7, 10, 20, 0) 120px), var(--dark);
}

/* Investable-universe (funnel) section only — also fade in from the TOP, with
   a longer reach down the section, over the shared short bottom gradient. */
.fund-section-band[aria-label="Investment Process"] {
  background:
    linear-gradient(to bottom, rgba(7, 10, 20, 0.5) 0%, rgba(7, 10, 20, 0) 360px),
    linear-gradient(to top,    rgba(7, 10, 20, 0.5) 0%, rgba(7, 10, 20, 0) 120px),
    var(--dark);
  /* Extra navy breathing room below the Portfolio Discipline cards, before
     the light "Three principles" CTA section. */
  padding-bottom: clamp(112px, 17vh, 200px);
}

/* ═══════════════════════════════════════════════════════════
   FOUNDER-LED ADVANTAGE — adviser landing page
   (.page-founder-led-advantage)

   A pinned dark hero with a CSS ripple, which the rest of the page
   scrolls over as a curtain (the device the Approach and Insights
   pages already use), then seven numbered acts alternating
   white / paper / dark. A fixed numeral spine tracks progress.

   House rules followed here: SERIF is for headings and the one big
   figure only — everything else is the sans at the site's body sizes
   (16–18px / 1.6–1.65 / --ink-soft). Colours come from the palette
   tokens, and panels take the site's 3px radius.

   All classes are .fla-* prefixed — the home page owns .advantage-*
   for its own Founder-led Advantage band; the two must not collide.
   ═══════════════════════════════════════════════════════════ */

/* ── Hero: pinned, dark, rippling ────────────────────────── */
.fla-page {
  /* ── THE PAGE'S SANS TYPE SCALE: three sizes, and only three ──────────────
     Asked for 2026-09-29: "too many variations of the body font size — three at
     most". An audit of rendered text found TWELVE sans sizes on desktop (12, 13,
     15, 16, 17, 17.28, 18, 18.56, 20, 22, 23.04 and 24.96px) and seven on a
     phone. Most came from separate clamp()s landing on odd fractions, the rest
     from each act having been tuned by itself. Every running-text rule on this
     page now takes one of these three tokens. Adjust the scale HERE, not rule
     by rule, or the drift comes back.
       small — fine print: footnotes, the chart's past-performance line, and
               the ASX ticker label
       body  — all running copy, the hero and closing ledes, the closing
               links and the Invest now button
       lead  — the sentences that introduce or ask something: .fla-say ledes,
               the proof lede, both CTA-band sentences and the PDS sentence
     Deliberately OUTSIDE the scale, like the serif headings: the 3.3% stat
     line, which is display type carrying the page's claim, and the 12px
     footnote superscript, which is a mark rather than text. The site header
     and footer are site chrome and keep their own sizes.
     Body is 18px on desktop and not higher because it has to serve two
     measures at once: the wide single-column acts and the three-across
     advisers and proof grids, where anything bigger leaves ~30-character
     lines. The phone values are the ones the user already settled
     (17 body, 18 lead) after trying 19/20 and reverting. */
  --fla-fs-small: 15px;
  --fla-fs-body: 18px;
  --fla-fs-lead: 22px;
}

.fla-hero {
  /* The topbar + header (93px) sit above this in flow, so a full 100vh box
     overhangs the fold and the centred content reads low. Subtract the chrome. */
  --fla-chrome: 93px;
  position: sticky; top: 0; z-index: 0;
  /* A BAND at the photograph's own 2029:775, not a full-viewport hero. This is
     what the Figma does, and it is what makes the image work: at 100vh the box
     is about 1.8:1 against the image's 2.6:1, so `cover` had to over-scale and
     the ripples spread across the left third and ran under the copy. At the
     image's own ratio the whole frame shows uncropped - empty gradient left,
     drop right - and the text has clear ground to sit on. Capped at the
     viewport so a short window cannot push the band past the fold; if that cap
     bites, `cover` crops the sides rather than distorting the picture. */
  /* 3:1 rather than the picture's own 2029:775 (2.62:1): the full frame read too
     tall. `cover` therefore crops 62px vertically and, with the bottom anchor
     below, all of it comes off the TOP — empty gradient, so the drop and its
     rings are untouched.
     Showing the whole frame WAS tried, by setting this to 2029 / 775, and
     reverted: it is the only way to keep the top, but it puts the band back to
     489px, which is the height that read too tall. One line change if wanted. */
  /* width:100% makes the INLINE size definite, so aspect-ratio derives the
     HEIGHT from it. Without this the band resolved the other way round —
     height first, then width = height x 3 — which pinned the section near
     1080px wide no matter the viewport and scrolled the whole page sideways
     on every phone and tablet. min-height then acts as a floor on height
     only, as intended, instead of setting a 1080px floor on width. */
  width: 100%;
  aspect-ratio: 3 / 1;
  height: auto;
  min-height: 360px;
  max-height: calc(100vh - var(--fla-chrome));
  display: grid; align-items: center;
  overflow: hidden; isolation: isolate;
  /* The droplet photograph, full-bleed, placed as the Figma has it. The image
     is a 2029x775 panorama whose own composition does the work: the drop sits
     about 75% across and the left third is an empty gradient, so `right center`
     with `cover` keeps the drop right of centre at any viewport while the title
     sits over the clear area. The flat colour beneath is sampled from the
     image's pale left edge, so there is no dark flash before it loads. */
  /* Anchored to the BOTTOM, not the centre: the picture is pushed as far up as
     it goes, so its bottom edge lands exactly on the band's bottom edge and the
     whole 62px of crop comes off the top. */
  background: #d7dfe9 url("assets/scenes/droplet.png") right bottom / cover no-repeat;
  color: var(--ink);
}
.fla-hero-inner { position: relative; z-index: 2; }
/* Only the LEDE is held inside the photograph's clear left region. It is body
   copy over a busy picture, so it has to stay on the calm part. The title is
   large enough to stay legible further across (see the contrast note on
   .fla-hero-title) and is governed by nowrap plus its vw size instead. */
.fla-hero-lede { max-width: min(46%, 560px); }

/* ── Entrance ────────────────────────────────────────────────
   The device the home hero uses: the glow blooms open first,
   then the type arrives on a short stagger, reusing that hero's
   own `hero-fade-up` keyframe so the two pages move alike. Every
   element that starts at opacity 0 here has to be handed back its
   opacity in the reduced-motion block, or killing the animation
   leaves it invisible.
   ────────────────────────────────────────────────────────── */
.fla-hero-title, .fla-hero-lede {
  opacity: 0;
  animation: hero-fade-up .85s ease-out forwards;
}
.fla-hero-title { animation-delay: .70s; }
.fla-hero-lede  { animation-delay: .95s; }

/* Sized so "The Founder-led" always holds one line — the break is explicit,
   so the title reads as exactly two lines at every width. */
.fla-hero-title {
  /* Roman, not italic: the user asked for "The Founder-led Advantage" to be set
     upright. The size below was calibrated on the italic, which sets narrower —
     re-measured after the switch and the line still clears the picture. */
  font-family: var(--serif); font-weight: 500; font-style: normal;
  /* Down from min(7.08vw, 92px): that was calibrated for a full-viewport hero
     with the whole container to run across. In the Figma's band it has only the
     image's clear left region, and at 92px the title crossed the ripples. This
     holds "The Founder-led Advantage" on one line inside that region. */
  /* Up from clamp(26px, 2.86vw, 41px). At this size the title no longer holds
     one line inside the image's clear left region, and wraps to two — which is
     fine, and is how the hero read before the photograph went in. What it must
     not do is exceed that region, and the max-width on .fla-hero-inner > *
     keeps both lines inside it. */
  /* STRICTLY one line, held by nowrap. The size is in vw so the title keeps a
     fixed ratio to the picture's clear left region, which is itself a share of
     the viewport — if it fits at one width it fits at all of them, so nowrap
     can never overflow.
     It does run past that clear region, ending near 58% where the outermost
     rings begin around 52%, and that is fine ON THIS IMAGE: sampled across the
     rows the title occupies, the worst ink contrast out to its right edge is
     8.6:1, because the replacement photograph is far emptier through the upper
     left than the first one was. The <br> that forced two lines existed
     precisely because the FIRST image was not.
     RE-MEASURE if the photograph is swapped again. Whether one line is safe is
     a property of the picture, not of the type.
     Released in the 980px breakpoint below, where the layout stacks and the
     clamp floor would otherwise be wide enough to overflow a phone. */
  font-size: clamp(29px, 4.5vw, 62px);
  white-space: nowrap;
  line-height: 1.08; letter-spacing: normal;
  margin: 0 0 clamp(16px, 2.2vh, 26px);
}
.fla-hero-lede {
  margin: 0;
  font-size: var(--fla-fs-body); line-height: 1.6;
  /* Ink now the ground is the pale photograph rather than navy. Over the
     image's left third this measures about 9:1. */
  color: var(--ink-soft);
}

/* The drawn ripple below is SUPERSEDED by the photograph on .fla-hero. Its
   markup and rules are kept rather than deleted so restoring it is one line:
   delete this display:none. Everything from here to the end of the ripple
   block is dormant while the photo is in place. */
.fla-stage { display: none; }

/* ── The ripple ──────────────────────────────────────────────
   Drawn, not rendered: hairline outlines only. Earlier passes
   modelled the material (Fresnel body, caustic, specular, a lit
   pool) and every one of them read as illustration. There is
   nothing in a 1px stroke to look glossy.

   Everything hangs off the impact point (--fx, --fy): move that
   one pair and the pool, the fall lane and the glow all follow.

   Timings are percentages of --cycle. The landing is at 26%, so
   the ring delays below all start from 0.26 × 9s = 2.34s. Change
   --cycle and those delays need re-deriving.

   Pure CSS, so it runs with JS off; the page script only drifts
   the ambient glow with the pointer.
   ────────────────────────────────────────────────────────── */
.fla-stage {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  --fx: 71%;                          /* impact point within the hero */
  --fy: 77%;                          /* low enough that the widest ring
                                         stays clear of the lede */
  --pool: min(78vw, 1040px);          /* width of the outermost ring */
  --dropw: clamp(21px, 2vw, 32px);    /* a bead of water, not a motif */
  --droph: calc(var(--dropw) * 1.273);/* = the symbol's 44:56 viewBox, or
                                         preserveAspectRatio letterboxes it */
  /* The impact point sits 77% down a (100vh - 93px) hero, i.e. 77vh - 72px
     below its top edge. Falling that plus a little starts the drop just
     off the top of the frame, so it enters rather than appears. */
  --fall: calc(77vh - 40px);
  --cycle: 9s;
  /* Not --line: that is a site-wide hex border token, and shadowing it here
     with an RGB triplet would break any bordered thing dropped into the
     stage later. */
  --fla-ink: 205, 219, 236;               /* the one ink colour, near-neutral */
}
.fla-glow {
  position: absolute; left: var(--fx); top: var(--fy);
  width: 86vmax; height: 86vmax; margin: -43vmax 0 0 -43vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 122, 154, .30) 0%, rgba(88, 106, 134, .13) 36%, transparent 66%);
  transition: transform 1.6s cubic-bezier(.2, .7, .2, 1);
  /* opacity only — the page script owns this element's transform for the
     pointer drift, and a `forwards` animation on transform would win the
     cascade against the inline style and freeze it */
  opacity: 0;
  animation: fla-glow-in 2.4s cubic-bezier(.2, .7, .2, 1) .2s forwards;
}
@keyframes fla-glow-in { to { opacity: 1; } }
/* A tighter lift centred on the impact point, flattened to the pool's own
   proportions. It is atmosphere, not a surface — the linework has to sit in
   something, but anything with a readable edge would put the rendered look
   straight back. Pairs with the broad --glow above: ambient, then a core. */
.fla-sheen {
  position: absolute; left: var(--fx); top: var(--fy);
  width: calc(var(--pool) * 1.16); height: calc(var(--pool) * .44);
  margin: calc(var(--pool) * -.22) 0 0 calc(var(--pool) * -.58);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(132, 157, 192, .38) 0%, rgba(114, 137, 170, .22) 38%,
    rgba(96, 115, 146, .09) 66%, transparent 84%);
  /* the home hero's glow-bloom, on the layer the script does not touch */
  opacity: 0; transform: scale(.55);
  animation: fla-sheen-bloom 2.8s cubic-bezier(.2, .7, .2, 1) .2s forwards;
}
@keyframes fla-sheen-bloom {
  0%   { opacity: 0; transform: scale(.55);  filter: brightness(2); }
  50%  { opacity: 1; transform: scale(1.06); filter: brightness(1.15); }
  100% { opacity: 1; transform: scale(1);    filter: brightness(1); }
}
.fla-drop-defs { position: absolute; width: 0; height: 0; }

/* ── The surface ─────────────────────────────────────────── */
.fla-pool {
  position: absolute; left: var(--fx); top: var(--fy);
  width: var(--pool); height: calc(var(--pool) * .42);
  margin: calc(var(--pool) * -.21) 0 0 calc(var(--pool) / -2);
  /* the global `img, svg { max-width: 100% }` would otherwise clamp this
     against the hero's width and squash the ellipses */
  max-width: none;
  overflow: visible;
}
.fla-waves ellipse {
  fill: none;
  stroke: rgb(var(--fla-ink));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;   /* one weight at every radius */
  /* SVG elements default to transform-origin: 0 0, not 50% 50% like HTML —
     without this the rings expand from the corner instead of concentrically */
  transform-box: fill-box; transform-origin: 50% 50%;
  opacity: 0; transform: scale(.04);
  animation: fla-wave var(--cycle) cubic-bezier(.14, .58, .3, 1) infinite;
}
/* The train thrown off the landing, then one late, smaller ring as the
   rebound bead falls back in at 54%. --wmax stops them all dying at the
   same radius; --wop falls away behind the leading edge. */
.fla-waves ellipse:nth-child(1) { animation-delay: 2.34s; --wmax: 1;   --wop: .70; }
.fla-waves ellipse:nth-child(2) { animation-delay: 2.62s; --wmax: .94; --wop: .60; }
.fla-waves ellipse:nth-child(3) { animation-delay: 2.94s; --wmax: .87; --wop: .51; }
.fla-waves ellipse:nth-child(4) { animation-delay: 3.32s; --wmax: .79; --wop: .42; }
.fla-waves ellipse:nth-child(5) { animation-delay: 3.76s; --wmax: .70; --wop: .33; }
.fla-waves ellipse:nth-child(6) { animation-delay: 4.28s; --wmax: .60; --wop: .24; }
.fla-waves ellipse:nth-child(7) { animation-delay: 4.95s; --wmax: .46; --wop: .28; }
@keyframes fla-wave {
  0%   { opacity: 0; transform: scale(.04); }
  5%   { opacity: var(--wop, .5); }
  73%  { opacity: 0; transform: scale(var(--wmax, 1)); }
  100% { opacity: 0; transform: scale(var(--wmax, 1)); }
}

/* ── The fall lane: upright in screen space, over the pool ── */
.fla-fall { position: absolute; left: var(--fx); top: var(--fy); width: 0; height: 0; z-index: 2; }
.fla-fall > * {
  position: absolute; left: 0; top: 0;
  width: var(--dropw); height: var(--droph);
  max-width: none;                    /* see .fla-pool above */
  margin: calc(var(--droph) * -1) 0 0 calc(var(--dropw) / -2);
  transform-origin: 50% 100%;         /* the surface line, so squash sits on it */
  fill: none;
  stroke: rgb(var(--fla-ink));
  stroke-linejoin: round;
}
/* Each stroke-width is pre-divided by the squeeze its keyframes apply, so
   all three render at ~1px. non-scaling-stroke cancels the viewBox scale
   but not a CSS transform on the host <svg>, which is where the squeeze is. */
.fla-drop {
  stroke-width: 1;                    /* the ring hairline exactly */
  opacity: 0;
  animation: fla-drop var(--cycle) linear infinite,
             fla-drop-fade var(--cycle) linear infinite;
}
/* The reflection rising to meet the drop. Its translateY values are the
   drop's exactly — the flip turns a fall into a rise from below the
   surface. Softened just enough that it reads as reflected rather than as
   a second object; it never gets as strong as the line above it. */
.fla-mirror {
  stroke-width: 1.15;
  opacity: 0;
  /* softer than anything else on the page: a crisp outline down there reads
     as a second droplet rather than as the first one reflected */
  filter: blur(1.4px);
  animation: fla-mirror var(--cycle) linear infinite,
             fla-mirror-fade var(--cycle) linear infinite;
}
/* The Worthington jet — the column the landing throws back up. The same
   outline drawn tall, with its base masked so the line dissolves into the
   surface instead of closing into a bulb. */
.fla-column {
  stroke-width: 1.23;                 /* ÷ scaleX(.81) */
  -webkit-mask-image: linear-gradient(180deg, #000 0 52%, transparent 88%);
          mask-image: linear-gradient(180deg, #000 0 52%, transparent 88%);
  opacity: 0;
  animation: fla-column var(--cycle) linear infinite,
             fla-column-fade var(--cycle) linear infinite;
}
.fla-bead {
  stroke-width: 1.54;                 /* ÷ scaleX(.65) */
  opacity: 0;
  animation: fla-bead var(--cycle) linear infinite,
             fla-bead-fade var(--cycle) linear infinite;
}

/* ── Motion ──────────────────────────────────────────────────
   Gravity is a quadratic, and a quadratic converts to a cubic
   Bézier exactly with its control points at 1/3 and 2/3 — so
   `cubic-bezier(.333, 0, .667, .333)` IS free-fall and
   `cubic-bezier(.333, .667, .667, 1)` is its mirror. Easing the
   motion this way beats approximating the curve with a run of
   keyframes: no polyline facets for the eye to catch, and the
   whole arc is two keyframes instead of nine.

   Opacity rides its own animation on each element, so adding a
   fade step can never split a motion interval and break the
   easing above it.
   ────────────────────────────────────────────────────────── */
@keyframes fla-drop {
  0%     { transform: translateY(calc(var(--fall) * -1)) scale(.95, 1.04);
           animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  26%    { transform: translateY(0) scale(1.02, .92); }
  28%    { transform: translateY(0) scale(1.62, .32); }
  30.5%  { transform: translateY(0) scale(2.2, .08); }
  100%   { transform: translateY(0) scale(2.2, .08); }
}
@keyframes fla-drop-fade {
  0%    { opacity: 0; }
  3%    { opacity: 1; }
  26%   { opacity: 1; }
  28%   { opacity: .7; }
  30.5% { opacity: 0; }
  100%  { opacity: 0; }
}
/* Same motion as the drop with the flip in front of it, so the two stay
   locked together. It stays dark until the drop is close enough to the
   surface for a reflection to mean anything. */
@keyframes fla-mirror {
  0%    { transform: scaleY(-.46) translateY(calc(var(--fall) * -1)) scale(.95, 1.04);
          animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  26%   { transform: scaleY(-.46) translateY(0) scale(1.02, .92); }
  29%   { transform: scaleY(-.46) translateY(0) scale(1.7, .3); }
  100%  { transform: scaleY(-.46) translateY(0) scale(1.7, .3); }
}
@keyframes fla-mirror-fade {
  0%, 13% { opacity: 0; }
  19.5%   { opacity: .16; }
  22.75%  { opacity: .3; }
  26%     { opacity: .4; }
  29%     { opacity: 0; }
  100%    { opacity: 0; }
}
/* Rises decelerating to its apex at 37%, then collapses accelerating. */
/* scaleX values are the old ones x 1.31, compensating for the narrower
   droplet outline this is drawn from, so the jet keeps its own width. */
@keyframes fla-column {
  0%, 26.5% { transform: scaleY(0) scaleX(1.96);
              animation-timing-function: cubic-bezier(.333, .667, .667, 1); }
  37%       { transform: scaleY(2) scaleX(.81);
              animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  53%       { transform: scaleY(0) scaleX(1.37); }
  100%      { transform: scaleY(0) scaleX(1.44); }
}
@keyframes fla-column-fade {
  0%, 26.5% { opacity: 0; }
  29%       { opacity: 1; }
  45%       { opacity: 1; }
  53%       { opacity: 0; }
  100%      { opacity: 0; }
}
/* One clean ballistic arc: up on the decelerating half, down on the
   accelerating one, apex at 41.25%. */
@keyframes fla-bead {
  0%, 28.5% { transform: translateY(0) scale(.62, .68);
              animation-timing-function: cubic-bezier(.333, .667, .667, 1); }
  41.25%    { transform: translateY(calc(var(--droph) * -2.6)) scale(.65, .71);
              animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  54%       { transform: translateY(0) scale(.8, .6); }
  55.5%     { transform: translateY(0) scale(1.15, .2); }
  100%      { transform: translateY(0) scale(1.15, .2); }
}
@keyframes fla-bead-fade {
  0%, 28.5% { opacity: 0; }
  31%       { opacity: 1; }
  52%       { opacity: 1; }
  55.5%     { opacity: 0; }
  100%      { opacity: 0; }
}

/* Held still, the effect resolves to the pose the animation is built
   around: the bead suspended over its column, rings standing on the
   water. It reads as an illustration rather than a stopped video. */
@media (prefers-reduced-motion: reduce) {
  .fla-waves ellipse, .fla-drop, .fla-mirror,
  .fla-column, .fla-bead { animation: none; }
  /* the entrance sets these to opacity 0 and animates them back — killing
     the animation without restoring it would leave the hero blank */
  .fla-hero-title, .fla-hero-lede, .fla-glow, .fla-sheen {
    animation: none; opacity: 1;
  }
  .fla-sheen { transform: none; filter: none; }
  .fla-glow { transition: none; }
  .fla-drop, .fla-mirror { opacity: 0; }
  .fla-waves ellipse:nth-child(1) { transform: scale(.16); opacity: .62; }
  .fla-waves ellipse:nth-child(2) { transform: scale(.29); opacity: .54; }
  .fla-waves ellipse:nth-child(3) { transform: scale(.43); opacity: .46; }
  .fla-waves ellipse:nth-child(4) { transform: scale(.58); opacity: .38; }
  .fla-waves ellipse:nth-child(5) { transform: scale(.73); opacity: .30; }
  .fla-waves ellipse:nth-child(6) { transform: scale(.88); opacity: .22; }
  .fla-waves ellipse:nth-child(7) { transform: scale(1);   opacity: .14; }
  .fla-column { opacity: 1; transform: scaleY(2) scaleX(.81); }
  .fla-bead { opacity: 1; transform: translateY(calc(var(--droph) * -2.6)) scale(.65, .71); }
}

/* ── The curtain: everything below scrolls over the pinned hero ── */
.fla-curtain { position: relative; z-index: 1; }

/* ── Acts ────────────────────────────────────────────────── */
/* Up about a third from clamp(72px, 11vh, 132px). The Figma carries noticeably
   more whitespace between its sections than the build did, and this is the one
   value that sets it for every act at once. Two acts take more still, below. */
.fla-act { padding: clamp(92px, 13.5vh, 160px) 0; }
.fla-act--white { background: #fff; }
.fla-act--paper { background: var(--bg); }
.fla-act--dark { background: var(--dark); color: var(--on-dark); }
.fla-act--tight { padding-bottom: clamp(40px, 6vh, 64px); }


.fla-h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(32px, 3.72vw, 53px);
  line-height: 1.14; letter-spacing: normal;
  color: var(--ink); margin: 0 0 clamp(24px, 3.6vh, 40px);
  /* 34ch, not 26: at 26 the two 33-character titles broke onto a second
     line for want of a few characters. Everything shorter already fitted
     and the one genuinely long title (52 chars) still wraps, so this is
     the only measure the page needs. */
  max-width: 34ch;
}
.fla-h2--light { color: var(--on-dark); }

/* Lead sentence of an act: the sans at the site's lede size — readable first,
   distinguished from body copy by size and ink, not by a second typeface. */
.fla-say {
  margin: 0 0 clamp(22px, 3.2vh, 36px);
  max-width: 72ch;
  font-size: var(--fla-fs-lead);
  line-height: 1.6;
  color: var(--ink);
}
.fla-say--tight { font-size: var(--fla-fs-body); line-height: 1.66; color: var(--ink-soft); }
/* 62ch, not 44: the one line that uses this is 59 characters and was
   breaking on the measure, not on the container. */
.fla-say--centre { max-width: 62ch; margin-left: auto; margin-right: auto; text-align: center; }

/* One column at a readable measure — two columns of uneven length read ragged. */
/* Centred block for the one act that uses it. The measure went out to 80ch
   chasing the Figma's wide column, but at 22px that ran the lines to ~880px —
   well past the 45-75 character range where long paragraphs stay easy to read,
   and the eye kept losing its place on the return sweep. 68ch at 20px lands
   around 700px, which reads cleanly and still sits wider than the container's
   old left-hugging column. The PARAGRAPHS stay left-aligned on purpose: these
   run three and four lines, and centred body copy gives every line a different
   starting edge, which is the single worst thing for finding the next line. */
.fla-cols {
  max-width: 68ch;
  margin-left: auto; margin-right: auto;
  display: grid; gap: 18px;
}
.fla-cols p, .fla-etf-copy p, .fla-spec-copy p, .fla-outperf-copy p {
  margin: 0 0 22px; font-size: var(--fla-fs-body); line-height: 1.66; color: var(--ink-soft);
}
.fla-cols p:last-child, .fla-etf-copy p:last-child, .fla-spec-copy p:last-child { margin-bottom: 0; }

/* Rag control for the one block that sits in a column narrow enough to need it.
   `pretty` asks the browser to avoid the ugly outcomes a greedy line-breaker
   produces — a last line with a single short word, and over-ragged edges. It is
   progressive: browsers without it just keep today's breaking. */
.fla-spec-copy p { text-wrap: pretty; }
/* One step down from the shared 22px, with a little more leading: this is the
   page's longest run of continuous prose, so it carries the most from the
   extra breathing room. Split out of the shared rule above so the ETF,
   specialist and outperformance copy keep their own size. */
.fla-cols p { font-size: var(--fla-fs-body); line-height: 1.7; }
.fla-outperf-copy p { color: rgba(255, 255, 255, .72); }


/* ── 02 Outperformance — stat + copy left, chart right ── */
/* Copy left, chart right. The chart takes the larger share so it reads big,
   and its right edge lands on the container margin — in line with the video and
   platform tiles further down the page. */
.fla-outperf-grid {
  display: grid;
  grid-template-columns: minmax(240px, 31%) 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.fla-outperf-grid > * { min-width: 0; }
/* One quiet line: the figure carries a little weight, the rest is body copy.
   Scoped past `.fla-outperf-copy p`, which would otherwise dim it to 72%. */
.fla-outperf-copy p.fla-stat,
.fla-stat {
  margin: 0 0 clamp(20px, 3vh, 30px);
  /* Kept at 24px+ so the coloured line counts as LARGE text, where 3:1 is the
     AA bar rather than 4.5:1. The size also suits the line carrying the page's
     main claim. */
  font-size: clamp(24px, 1.95vw, 29px); line-height: 1.45;
  /* Salmon, the site's warm accent (--terracotta, #faa08a since 2026-09-23),
     from 2026-09-29: the user asked for this line to match the founder-led
     series in the chart beside it, which draws in the same value
     (founder-chart.js FUND_LINE, 250,160,138). So the claim and the line that
     proves it now read as one colour across the section.
     History, because this line has moved more than anything else on the
     page: terracotta -> teal -> the steel --accent -> sky -> ivory -> salmon.
     8.21:1 on the navy — like ivory and sky it would pass AA at any size, so
     the 24px floor above is about the line's weight as the page's claim, not
     about contrast any more. If --terracotta moves again, this follows it; if
     FUND_LINE moves without it, the two drift apart — change both. */
  color: var(--terracotta);
}
/* set at the body size like the rest of the line — the weight alone
   carries the emphasis */
/* The accent moment in the argument itself. It marks the single number the
   whole case rests on - the 3.3% alpha. Terracotta is reserved for the ACTIONS
   on this page (the "our team" links in the CTA bands and the Invest now
   button); the claim carries brand Ivory, so the two never sit on the same
   job. */
.fla-stat-fig { font-weight: 500; letter-spacing: 0; }
/* Footnote markers. These are navigation, not content, so they are set small
   and inherit their sentence's colour - on the navy stat line that means the
   ivory, which is what the user asked for. That inheritance used to come with
   a contrast caveat — the earlier terracotta and steel shades were both under
   4.5:1, which a 12px marker wants — and ivory at 11.44:1 clears it outright.
   A fixed 12px rather than an em fraction: at .72em the marker on the 25px stat
   line rendered 18px and competed with the sentence it hangs off, and at .52em
   the one in the 19px proof column fell to 9.9px, too small to tap. 12px reads
   as a marker in both places and is consistent between them. */
.fla-ref { color: inherit; }
.fla-ref sup { font-size: 12px; margin-left: .14em; }
/* Hover was white everywhere, which made the marker on the WHITE proof column
   vanish on hover. Scoped: white only where the ground is navy. */
.fla-stat .fla-ref:hover { color: #fff; }
.fla-ref:hover { color: var(--accent-deep); }
.fla-outperf-copy { max-width: 52ch; }
.fla-outperf .btn-outline { margin-top: 6px; color: var(--on-dark); border-color: rgba(255,255,255,.34); }
.fla-outperf .btn-outline:hover { background: #fff; border-color: #fff; color: var(--dark); }
.fla-outperf-chart .founder-chart-wrap { max-width: none; margin: 0 0 14px; }
.fla-outperf-chart .founder-chart { height: clamp(300px, 42vh, 480px); }
.fla-fine { margin: 0; font-size: var(--fla-fs-small); line-height: 1.6; color: rgba(255,255,255,.44); }

/* ── 03 Specialist — copy + video, then the holdings ── */
/* At 52 characters this is by far the longest heading on the page. Two things
   were breaking it onto a second line: the shared 34ch measure, and the 53px
   size cap — at 53px the text runs ~1188px against the container's 1112px of
   content width. Measure removed so the container governs, and the cap set to
   48px, which lands it at ~1076px. One line from ~820px up; below that it
   wraps, as 52 characters must. */
/* Roughly double the shared h2 gap. This heading introduces a two-column
   block rather than a paragraph, and it spans the full container, so it
   needs more air under it than a heading sitting directly on its own copy. */
#fla-spec-h {
  max-width: none;
  font-size: clamp(32px, 3.72vw, 48px);
  margin-bottom: clamp(46px, 7vh, 84px);
}

/* The heading is above the grid (full container width), so this row carries
   only the blurb and the clip — which lets the video track take the larger
   share without squeezing the heading into four lines. */
/* Clip left, blurb right. Done with `order` rather than by moving the figure
   in the markup, so that when the row stacks the copy still comes first —
   see the reset in the ≤980 block. */
/* The copy column was 34% of this row and the text landed at ~29 characters a
   line, which is where the rag turns ugly: "founder-" broke off its own hyphen
   and the paragraph ended on a one-word line. The split now runs nearer even,
   which is also what the Figma does — it gives this copy about 46% of the row
   against the 34% here — and lands the measure near 48 characters without
   touching the type size. */
.fla-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 68px); align-items: stretch; }
.fla-spec-grid .fla-video { order: -1; }
/* Centred against the clip rather than hung from the top of the row. At the
   old 22px the paragraph ran nearly the height of the video, so top-alignment
   was invisible; at the scale's 18px body it is about half that height and,
   hung from the top, left a dead block of white under it. Centring is what the
   outperformance row beside the chart already does. Harmless once the grid
   stacks below 980px — a lone column has nothing to centre against. */
.fla-spec-copy { align-self: center; }
/* Only give the clip the lion's share once there is width to spare — below
   this the blurb's column falls under ~35 characters and stops reading. */
@media (min-width: 1200px) {
  .fla-spec-grid { grid-template-columns: 1.12fr 0.88fr; }
}
/* The frame is pinned to 16:9 (see below), so it cannot fill the column's
   full height when the blurb beside it runs long. Centre it in the track
   rather than leaving all the slack underneath. */
.fla-video { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
/* 0 0 auto, not 1 1 auto: the frame must keep its 16:9 exactly. Stretched
   taller by the flex column it would no longer match the clip, and the
   `cover` below would start cropping the titling off the poster's right. */
.fla-video-frame { flex: 0 0 auto; min-height: 300px; min-width: 0; }
/* grid/flex children default to min-width:auto, which lets the frame push the
   track wider than the container; pin them so the column governs the width */
.fla-spec-grid > * { min-width: 0; }
.fla-video { margin: 0; }
.fla-video-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate;
  border-radius: 3px;
  background: linear-gradient(165deg, #1d2738 0%, #141b29 100%);
  box-shadow: 0 24px 50px -28px rgba(10, 18, 32, .45);
}
/* cover, not contain: the clip is 1280x720 and the frame is pinned to 16:9,
   so nothing is cropped either way — but `contain` leaves the element's
   painted edge a fraction of a pixel short at non-integer widths, and the
   frame's dark gradient shows through it as a hairline down each side. */
.fla-video-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* the whole frame is the pause/play target */
.fla-video-frame { cursor: pointer; }
/* Centre mark so a still poster still reads as a video. pointer-events are
   off throughout: the frame underneath owns the click either way. */
.fla-play {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(12, 18, 30, .3); color: #fff;
  transform: translate(-50%, -50%);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.fla-play::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .36);
  animation: fla-pulse 2.8s cubic-bezier(.3, 0, .5, 1) infinite;
}
@keyframes fla-pulse { 0% { transform: scale(1); opacity: .8 } 70%, 100% { transform: scale(1.5); opacity: 0 } }
.fla-play svg { width: 24px; height: 24px; margin-left: 3px; }
.fla-video-frame:hover .fla-play { transform: translate(-50%, -50%) scale(1.07); background: rgba(12, 18, 30, .58); border-color: #fff; }
/* driven by the media's own play/pause events, so it is right however
   playback started or stopped — including the scroll-past pause */
.fla-video.is-playing .fla-play { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
@media (prefers-reduced-motion: reduce) { .fla-play::before { animation: none; } }

/* Holdings. Each cell is bordered in its own right and the row is gapped, so a
   part-filled last row simply has fewer tiles — no empty grey cell. */
/* the hint now carries the clearance from the video figure above, so the
   grid only needs the small gap under the hint itself */
.fla-holdings {
  list-style: none; margin: clamp(14px, 2vh, 20px) 0 0; padding: 0;
  /* flex, not grid: 17 logos never divide evenly, so a part-filled last row
     centres instead of stranding one tile against an empty gap. */
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.fla-holdings li {
  flex: 0 0 118px;
  background: #fff; border: 1px solid var(--line); border-radius: 3px;
  display: grid; place-items: center; min-height: 84px;
}
/* the tile's padding lives on the link, so the whole tile is the hit area */
.fla-holdings li > a {
  display: grid; place-items: center;
  width: 100%; height: 100%; padding: 20px 16px;
}
.fla-act--paper .fla-holdings li { background: #fff; }
.fla-holdings img {
  max-width: 100%; max-height: 30px; width: auto; height: auto;
  filter: grayscale(1); opacity: .45;
  transition: filter .45s ease, opacity .45s ease;
}
.fla-holdings li:hover { border-color: var(--accent); }
.fla-holdings li:hover img { filter: none; opacity: 1; }
/* same mark as the home carousel's "Click a founder…" line, since it is
   telling you the same thing about the same cards */
.fla-holdings-hint {
  text-align: center;
  /* the gap off the video figure above — the grid's own top margin is small
     so this number is the whole separation between the two blocks */
  margin: clamp(76px, 10vh, 120px) 0 0;
  font-size: 13px; font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ── 04 Reasons — small index marks, not decorative numerals ── */
.fla-reasons {
  list-style: none; padding: 0;
  margin: clamp(48px, 7vh, 84px) 0 0;          /* clears the heading */
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(34px, 4.6vw, 76px);
  row-gap: clamp(48px, 7vh, 76px);             /* when they stack */
}
.fla-reasons li { border-top: 1px solid var(--line); padding-top: clamp(30px, 4.2vh, 42px); padding-bottom: clamp(10px, 2vh, 20px); }
.fla-tick { display: block; width: 26px; height: 26px; margin-bottom: clamp(24px, 3.4vh, 34px); color: var(--terracotta-on-light); }
.fla-tick svg { display: block; width: 100%; height: 100%; }
/* the tick draws itself in as the column arrives */
.fla-tick svg path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.4, 0, .25, 1) .15s; }
.fla-reasons li[data-reveal].is-visible .fla-tick svg path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .fla-tick svg path { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
}
/* Deliberately identical to .fla-proof p — the two three-across sections read
   as one family, so their body copy shares a size, leading and ink. Keep them
   in step if either is retuned. */
.fla-reasons p { margin: 0; font-size: var(--fla-fs-body); line-height: 1.62; color: var(--ink-soft); }

/* ── Statement CTA bands ── */
/* The same photograph as the hero. Full-bleed `cover` rather than the image
   sized down and anchored right, because the picture's left edge carries a
   strong VERTICAL gradient — #dee9f4 at the top through #a1beda at the middle
   to #cdcfd9 at the foot — and no single base colour can meet that without a
   visible seam. Covering the whole band sidesteps it. The band keeps its
   padding-driven height, so the picture is cropped to a horizontal slice
   through the drop, which is what the Figma shows in these bands. */
/* Both CTA bands are navy, as they were before the droplet photograph was tried
   here. The picture, the gradient base under it, the masked ::before that
   blended the two, the min-height that gave it room and the --navy modifier
   that undid all of it for one band are gone rather than left dormant — the
   droplet now lives on the hero only. */
/* Both CTA bands carry the droplet photograph. Getting it right took several
   passes and the two failure modes are worth recording, because they pull in
   opposite directions:
   - `cover` on the band's own background CROPS BY HEIGHT. A band with no fixed
     ratio lost ~240px off the top of the picture — exactly where the bead and
     the head of the rebound column are — and the drop was cut in half.
   - sizing the picture by the band's HEIGHT (a ::before at height:100%) keeps
     the whole frame but draws it small, sitting inside the band with clear
     margin above and below.
   The settled answer sizes it by WIDTH and crops it by height, which is what
   makes a picture fill a band without being cut:
   - the band's ratio is pinned at 6:1 so its height is predictable;
   - the picture sits in a ::before at 78% of the band's WIDTH. Cover then draws
     it 78%-wide and about 40% taller than the band, so it fills the height and
     is cropped top and bottom rather than at the sides. 78% rather than the
     full width because at 100% (which is what a plain `cover` background gives)
     the droplet reads too large for the band;
   - `72%` is where that vertical window has to sit for the whole of the ink to
     be inside it: the bead about a fifth of the way down, the outermost rings
     running out at the bottom edge.
   The picture is then narrower than the band, so its left edge has to meet a
   CSS colour — see the fade on the ::before. */
.fla-say-band {
  position: relative; isolation: isolate; overflow: hidden;
  /* width:100% makes the INLINE size definite so aspect-ratio derives the
     HEIGHT from it — without it the band resolves height-first and pins its own
     width. Same trap the hero hit; see .fla-hero. */
  width: 100%;
  aspect-ratio: 6 / 1;
  height: auto;
  /* Floor and cap: below ~1200px the ratio alone leaves too little room for two
     lines of copy, above ~1800px the band would grow into a hero. */
  min-height: 210px;
  max-height: 320px;
  /* The picture's own left-edge column, sampled down the SLICE OF IT THAT SHOWS
     (image y 29%-89%, which is what the 72% window exposes), so the uncovered
     left continues the photograph's gradient instead of sitting under a flat
     tint. Approximate on purpose — the browser renders the PNG through a colour
     profile, so raw pixel values never match exactly, and the fade below is what
     actually hides the join. RE-SAMPLE IF THE RATIO OR THE 72% CHANGES: a
     different window exposes a different part of that column. */
  background: linear-gradient(180deg, #b6cde7 0%, #a6c1e0 19%, #9ab7d8 35%, #98b5d6 52%, #a5bedc 69%, #b5c9e0 85%, #bbc9dd 100%);
  color: var(--ink);
  padding: clamp(24px, 3.4vh, 44px) 0;
  display: grid; align-items: center;
  /* Channels rather than a hex, the same idiom as --ivory-rgb, because the wash
     below composes this at five different alphas.
     It is brand Ivory's HUE at near-white lightness, not brand Ivory itself:
     222,214,201 as a wash would tint the left warm but also darken it, and what
     the user liked here was the lightness. The red-to-blue spread is 12 —
     double the 6 that :root holds incidental warmth to, because this is a
     DELIBERATELY ivory surface, and it needs the extra to register at all
     against a photograph this blue. The red-to-green and green-to-blue steps
     are kept in brand Ivory's own 8:13 proportion so it warms the same way. */
  --band-wash: 249, 244, 237;
}
/* `z-index: -1` under the band's `isolation: isolate` puts the picture above the
   band's own background but below the copy, with no z-index needed on the text.
   The mask is the load-bearing line: a 26% fade dissolves the picture into the
   gradient instead of meeting it at an edge, which is the only reliable way to
   join a rendered image to a CSS colour. The fade sits entirely inside the
   photograph's empty left region, so no ripple is touched. */
.fla-say-band::before {
  content: ""; position: absolute; inset: 0 0 0 auto; z-index: -1;
  width: 78%;
  background: url("assets/scenes/droplet.png") right 72% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%);
  mask-image: linear-gradient(90deg, transparent 0, #000 26%);
}
/* A soft wash that lifts the left of the band towards the page's own ground, so
   the copy sits on light rather than on mid blue and the band opens out of the
   white section above it instead of starting at a hard edge.
   It has to be a SECOND pseudo-element rather than another background layer,
   because it belongs on TOP of the picture: it reaches a little way across the
   photograph's empty left, which is what makes the lift continuous instead of
   stopping at the join. Both pseudos are z-index:-1, so they paint behind the
   copy and, being equal, in source order — ::before then ::after — which is the
   stacking this depends on.
   It runs out at 56%: the ripples begin around 64% across, and the wash must be
   fully clear of them or it fogs the picture. */
.fla-say-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    rgb(var(--band-wash)) 0%,
    rgba(var(--band-wash), .94) 12%,
    rgba(var(--band-wash), .74) 28%,
    rgba(var(--band-wash), .38) 43%,
    rgba(var(--band-wash), 0) 56%);
}
.fla-say-band--paper { background: var(--bg-elev); }
/* One child now: the sentence carries its own underlined inline link where a
   "Contact us" button used to sit beside it, per the Figma. The flex row is
   kept so the band still centres vertically, and so a second element could
   return without churn. */
.fla-say-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; }
.fla-say-band p {
  margin: 0;
  /* Held inside the picture's clear left region so it never crosses the rings.
     52%, not the 46% the hero uses: the ink in these bands does not begin until
     about 65% across (the picture is inset to 78% and its own left half is
     empty), so there is more clear ground here than on the hero — and the copy
     needs it to hold two lines at the size below. 700px is what the LONGER of
     the two sentences needs; at 640 it took a third line and broke "our team"
     across it. */
  max-width: min(56%, 700px);
  /* Up from clamp(17px, 1.45vw, 21px), which the user called way too small. The
     band is a call to action carrying one sentence; it was set smaller than the
     body copy around it. */
  font-size: var(--fla-fs-lead); line-height: 1.5;
}
.fla-say-band--paper p { color: var(--ink); }

/* ── 05 Proof panels — palette tones, icons draw themselves in ── */
/* Three plain columns on the act's own background — hairline rules rather than
   coloured cells, matching the reasons list. */
.fla-proofs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  /* Tighter than the 34-76px it was: the type in these columns went up a step,
     and a narrow column plus larger type is what turns three lines into six.
     The gap gives that width back. */
  column-gap: clamp(26px, 2.9vw, 44px);
  row-gap: clamp(48px, 7vh, 76px);            /* when they stack */
  margin-top: clamp(58px, 8.5vh, 100px);      /* clears the lede above */
}
.fla-proof {
  position: relative;
  padding-top: clamp(26px, 3.6vh, 36px);
  padding-bottom: clamp(6px, 1.4vh, 14px);
}
.fla-proof::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--line); transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.fla-proof[data-reveal].is-visible::before { transform: scaleX(1); }
.fla-proof-icon { display: block; margin-bottom: clamp(26px, 3.6vh, 36px); }
.fla-proof-icon img { display: block; width: 52px; height: 52px; object-fit: contain; object-position: left center; }
.fla-proof h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(25px, 2.3vw, 34px); line-height: 1.22; letter-spacing: normal; color: var(--ink); margin: 0 0 20px; }

/* ═══ Figma alignment pass ═══════════════════════════════════════════════
   Scoped by section id so the other acts keep the page's left-ragged
   editorial setting - only these three centre in the design. */
#fla-why .fla-h2,
#fla-advisers .fla-h2,
#fla-proof .fla-h2,
#fla-etf .fla-h2 { max-width: none; text-align: center; }

/* The proof act centres throughout: lede, icons, headings and body. */
#fla-proof .fla-say { max-width: 66ch; margin-left: auto; margin-right: auto; text-align: center; font-size: var(--fla-fs-lead); line-height: 1.6; }
#fla-proof .fla-proof { text-align: center; }
#fla-proof .fla-proof-icon img { margin: 0 auto; object-position: center; }

/* Advisers: the tick sits BESIDE its text in a ring, not above it, and the
   rule over each column goes - the design has neither. */
/* The two acts that open with a centred heading over a single block get a step
   beyond the new base — they are the quietest sections on the page and the
   extra room is what makes the centring read as deliberate. */
#fla-why { padding-top: clamp(112px, 16vh, 196px); padding-bottom: clamp(112px, 16vh, 196px); }

/* More air than the other acts get, top and bottom: this section is three
   short columns with a lot of white around them, and at the shared
   clamp(72px, 11vh, 132px) it read as crowded against the bands either side. */
/* Top trimmed back below the shared act padding while the foot keeps the extra
   air: the specialist act above already ends on 108px of its own, so the two
   were stacking into a ~236px gap and this section read as adrift from it. */
#fla-advisers { padding-top: clamp(76px, 11vh, 132px); padding-bottom: clamp(112px, 16vh, 196px); }

/* Horizontal three-across, as the Figma has it. This was briefly stacked into
   one wide column for line length and the user put it back: matching the design
   is the rule, so the fix for the short lines is SIZE, not layout. At 16px in a
   ~295px column the lines land near 37 characters - short of the 45-75 ideal,
   but that is what a three-up grid at this container width can give, and the
   design sets this copy small for the same reason. Do not restack it. */
#fla-advisers .fla-reasons {
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(26px, 3vw, 48px);
}
#fla-advisers .fla-reasons li {
  border-top: 0; padding-top: 0;
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 14px; align-items: start;
}
/* 34px, and it has been here before: it was taken up to 46px on 2026-09-08 and
   the user reverted it the same day. Leave it. */
#fla-advisers .fla-tick {
  width: 34px; height: 34px; margin-bottom: 0; padding: 7px;
  border: 1px solid var(--line); border-radius: 50%;
}
@media (max-width: 760px) {
  /* The three-up must collapse here. The .fla-reasons stack in the 980px block
     cannot reach this list: #fla-advisers .fla-reasons is an ID selector and
     outranks it at any width, so the grid stayed 3-across on phones, where the
     tracks (155+155+176 = 486px) overflowed a ~308px container and scrolled
     the whole page sideways. The "do not restack" note above is about the
     desktop column measure, not about phones. */
  #fla-advisers .fla-reasons { grid-template-columns: 1fr; row-gap: clamp(28px, 4vh, 40px); }
  #fla-advisers .fla-reasons li { column-gap: 14px; }
}
.fla-proof p { margin: 0; font-size: var(--fla-fs-body); line-height: 1.62; color: var(--ink-soft); }

/* The three proof columns share row lines — icon, heading, body — so the body
   copy starts on the same line in all three even though "Research-backed
   thesis" is one line while the other two headings wrap to two.
   Subgrid rather than a min-height on the heading: min-height would hold only
   while the longest heading happens to be exactly two lines, and would break
   again at any width where one wraps to three.
   row-gap is zeroed here because the container's gap exists for the STACKED
   layout; with three explicit rows it would otherwise open up between the icon,
   the heading and the body. Their spacing comes from their own margins.
   Scoped above 980px, below which the columns stack one per row and there is
   nothing to align, and behind @supports so unsupporting browsers simply keep
   today's behaviour rather than getting a half-applied grid. */
@media (min-width: 981px) {
  @supports (grid-template-rows: subgrid) {
    .fla-proofs { grid-template-rows: auto auto auto; row-gap: 0; }
    .fla-proof {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .fla-proof::before { transition: none; }
}

/* ── 06 ETF ── */
/* Inline text link — underlined in the accent, thickening on hover. */
.fla-inline {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness .2s ease, color .2s ease;
}
.fla-inline:hover { text-decoration-thickness: 2px; }
/* "our team" in terracotta on the pale photograph of the CTA bands. The white
   underline these bands used belonged to the navy version they had before. */
.fla-say-band .fla-inline {
  color: var(--terracotta-on-light);
  text-decoration-color: var(--terracotta-on-light);
}
.fla-say-band .fla-inline:hover { color: var(--ink); text-decoration-color: var(--ink); }
/* The outperformance section is NAVY, so this link left the bands' terracotta
   behind: that shared rule put a 3.59:1 colour on a 19px link and sent the
   hover to --ink, which is all but invisible on navy. It followed the stat
   line through sky, ivory and salmon, then on 2026-09-29 the user UNCOUPLED
   it: "keep the team same colour (white) as rest". So it now takes its
   sentence's own colour — the 72% white of .fla-outperf-copy p — and reads as
   a link by its underline alone, which is how a utility link should read
   (see the governing principle in the accent notes: accents mark the claim,
   not "our team"). The stat line stays salmon on its own. The underline is
   currentColor so it matches the words exactly, and the hover lifts to full
   white, which is the non-colour-only change a link needs. */
.fla-outperf .fla-inline {
  color: inherit;
  text-decoration-color: currentColor;
}
.fla-outperf .fla-inline:hover { color: #fff; text-decoration-color: #fff; }
/* "our team" stays on ONE line. It is the two-word call to action these bands
   end on, and wrapping it split the underline across two rows. Safe to pin:
   the phrase is 8 characters against a 700px measure, so it cannot overflow. */
.fla-say-band .fla-inline { white-space: nowrap; }

/* Arrow list — a circled arrow set against the first line of each point. */
.fla-arrows { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(30px, 4.4vh, 46px); }
.fla-arrows li { display: grid; grid-template-columns: 38px 1fr; gap: clamp(15px, 1.5vw, 22px); align-items: start; }
.fla-arrow { display: block; width: 38px; height: 38px; margin-top: -4px; color: var(--accent); }
.fla-arrow svg { display: block; width: 100%; height: 100%; }
.fla-arrows p { margin: 0; font-size: var(--fla-fs-body); line-height: 1.66; color: var(--ink-soft); }

/* The two-column grid is gone — the pointers sit on their own measure and
   the platforms run the full container underneath them. */
/* A margin-top on .fla-etf-copy would collapse against the heading's
   margin-bottom and do nothing, so the gap to the first pointer is set here. */
#fla-etf-h { margin-bottom: clamp(38px, 5.4vh, 62px); }
.fla-etf-copy { max-width: 74ch; }
.fla-etf-side { margin-top: clamp(52px, 8vh, 92px); }
/* (ASX: ZILR) goes to line two on the <br> in the markup; the title itself
   holds one line on the shared 34ch measure. */
.fla-ticker {
  display: inline-block; margin: 0 0 26px; padding: 8px 16px; border-radius: 3px;
  background: var(--dark); color: var(--on-dark);
  font-size: var(--fla-fs-small); font-weight: 500; letter-spacing: var(--track-eyebrow); text-transform: uppercase;
}
.fla-plats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.fla-plats li { background: #fff; border: 1px solid var(--line); border-radius: 3px; display: grid; place-items: center; min-height: 92px; }
.fla-plats li > a { display: grid; place-items: center; width: 100%; height: 100%; padding: 26px 14px; }
/* Full colour, matching .invest-platforms — no grayscale filter and no
   resting opacity, so the hover no longer has anything to reveal. */
.fla-plats img { max-width: 100%; max-height: 34px; width: auto; height: auto; object-fit: contain; }
.fla-plats li { transition: border-color .3s ease; }
.fla-plats li:hover { border-color: var(--accent); }

/* ── PDS ── */
.fla-pds { background: var(--dark); color: var(--on-dark); padding: clamp(78px, 11.5vh, 140px) 0; text-align: center; }
.fla-pds .fla-say { color: #fff; }
/* PDS and TMD read as links by COLOUR, not by rule: the underline is removed
   outright rather than recoloured, so the two devices do not double up.
   --accent is the steel blue of the "Invest now" button's hover fill, chosen
   deliberately to match it.
   KNOWN TRADE-OFF, recorded rather than silently accepted: --accent measures
   only 3.1:1 against this navy, and at 23px this copy needs 4.5:1 — it is just
   under the 24px that would let it settle for the 3:1 large-text bar. It was
   #9cc0e0 (8.7:1) before, and the user asked for this shade instead.
   If it should pass, either nudge .fla-pds .fla-say to 24px, which brings the
   3:1 bar into play, or use #6d90ad — the same hue, one step lighter, 4.9:1.
   The hover, which goes to white with an underline, is well clear either way
   and gives a colour-only link its non-colour affordance. */
.fla-pds .fla-inline {
  color: var(--accent);
  text-decoration: none;
}
.fla-pds .fla-inline:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
/* Brand Ivory, inverting on hover — terracotta until 2026-09-08, when the user
   asked for ivory here. Both states are 11.44:1 (ink on ivory, then ivory on the
   band's navy), well past AA either way; the terracotta it replaced ran at
   4.6:1, which passed but with nothing spare.
   The hover drops the FILL rather than swapping to a second colour, so the
   button turns into its own outline against the navy and the ivory stays the
   only colour in play.
   Bigger than the site-wide .btn's 15px, and scoped here rather than raised on
   .btn: this is the ONE real button on the page and it closes it, where the
   header CTA and the buttons on every other page are still 15px. The padding
   goes up with the type so the label keeps its room inside the box. */
.fla-pds .btn-primary {
  background: rgb(var(--ivory-rgb)); color: var(--dark); border-color: rgb(var(--ivory-rgb));
  font-size: var(--fla-fs-body); padding: 16px 34px;
}
.fla-pds .btn-primary:hover {
  background: transparent; color: rgb(var(--ivory-rgb)); border-color: rgb(var(--ivory-rgb));
}

/* ── 07 Ways to reach the team ── */
/* ── "Speak with the team" ────────────────────────
   This act closes the page and is the quietest thing on it, so it was carrying
   far more weight than it earns at the shared heading and lede sizes. Scoped
   here rather than on .fla-h2 / .fla-say, which set every other section.
   The lede also gets a real measure: at the shared 72ch it ran past 1000px and
   about 80 characters a line, and dropping the size without pulling the width
   in would have made that worse rather than better. */
#fla-team .fla-h2 { font-size: clamp(26px, 2.7vw, 38px); }
#fla-team .fla-say {
  max-width: 58ch;
  font-size: var(--fla-fs-body);
  line-height: 1.6;
}

.fla-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 44px); margin-top: clamp(32px, 5vh, 54px); }
.fla-way { display: grid; justify-items: center; text-align: center; border-top: 1px solid var(--line); padding-top: 26px; }
/* Subtle by design: these three are secondary to everything above them, so
   they are underlined text rather than the filled buttons and bordered icon
   box they used to be. The hairline underline only firms up on hover. */
.fla-way-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fla-fs-body); font-weight: 500; color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.fla-way-link:hover { color: var(--accent-deep); text-decoration-color: var(--accent-deep); }
.fla-way-link svg { width: 15px; height: 15px; flex: none; }

/* ── Footnote ── */
.fla-notes { background: #fff; border-top: 1px solid var(--line); padding: clamp(30px, 4.4vh, 52px) 0 clamp(40px, 6vh, 68px); }
/* Deliberately the quietest type on the page, but full container width —
   a ch measure at 13px pulled it in to ~667px and left it stranded in a
   narrow column. Disclaimers run the page. */
.fla-notes p { margin: 0; max-width: none; font-size: var(--fla-fs-small); line-height: 1.62; color: var(--ink-mute); opacity: .82; }
.fla-notes p span { font-weight: 500; margin-right: 3px; }

/* ── Responsive ─────────────────────────────────────────── */
/* Narrow desktops: a 31/69 split leaves the outperformance copy too tight, so
   the chart moves under it while still running out to the right margin. */
@media (max-width: 1120px) {
  .fla-outperf-grid { grid-template-columns: 1fr; }
  .fla-outperf-copy { max-width: 62ch; }
  .fla-outperf-chart { margin-top: clamp(24px, 4vh, 44px); }
}
@media (max-width: 980px) {
  /* relative, not static: the ripple layer is absolutely positioned against the
     hero, so the hero must stay its containing block or the oversized glow
     escapes overflow:hidden and widens the page. Not sticky here — the curtain
     effect is desktop only. */
  /* Stacked: the copy on a pale ground, the photograph as a band beneath it.
     The foot is deep enough to give the water a band of its own — stacked,
     there is no column beside the text to put it in.
     THREE faults compounded here before 2026-09-21, and the first is the one
     that matters:
     1. `aspect-ratio: 3 / 1` was never released at this width, so the hero kept
        a DEFINITE height derived from its width. The copy is ~420px tall on a
        phone and the box resolved to 368px, and `overflow: hidden` ate the
        difference — the lede lost its last line and a half, mid-sentence. Any
        definite height on a stacked hero will do this; `height: auto` alone
        cannot save it while a ratio is still in force.
     2. `.fla-hero-lede`'s `max-width: min(46%, 560px)` is a DESKTOP measure: it
        exists to hold the copy inside the photograph's empty left region. There
        is no left region once this stacks, and 46% of a 375px phone is a 150px
        ribbon of text running 333px down the page.
     3. `cover` on a near-square box scales the 2.81:1 picture to about 1030px
        wide and crops to its middle — which is exactly where the drop is, so
        the ripples sat directly behind the copy.
     The fix is the one the CTA bands already use at this width: flat ground for
     the words, picture in a pseudo-element at the foot, faded in. */
  .fla-hero {
    aspect-ratio: auto; height: auto; min-height: 0; max-height: none;
    position: relative;
    /* Sampled from the picture's upper region, so the ground the copy sits on
       and the top of the band below it are the same tone and the fade has
       nothing to betray. */
    background: #e9eff7;
    padding: clamp(48px, 8vh, 96px) 0 clamp(170px, 46vw, 260px);
  }
  .fla-hero::after {
    content: ""; position: absolute; inset: auto 0 0 0; z-index: 0;
    height: clamp(150px, 42vw, 240px);
    /* `150% auto`, not `cover`: at a phone's width cover draws the whole 2103px
       frame into 390px and the drop becomes a thumbnail. Same reasoning and the
       same numbers as the CTA bands' mobile strip — keep the two in step. */
    background: url("assets/scenes/droplet.png") right 72% / 150% auto no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%);
    mask-image: linear-gradient(180deg, transparent 0, #000 34%);
  }
  /* Full measure: see fault 2 above. */
  .fla-hero-lede { max-width: none; }
  .fla-stage {
    --fx: 50%; --fy: 87%;
    --pool: min(108vw, 560px);
    --dropw: clamp(18px, 5vw, 26px);
    --fall: 22vh;
  }
  .fla-glow { width: 130vmax; height: 130vmax; margin: -65vmax 0 0 -65vmax; }
  /* below here a single line would be too small to carry the page — let it wrap */
  .fla-hero-title { font-size: clamp(32px, 8.04vw, 52px); white-space: normal; }
  .fla-spec-grid, .fla-outperf-grid { grid-template-columns: 1fr; }
  /* stacked, so there is no left or right — keep the blurb above the clip */
  .fla-spec-grid .fla-video { order: 0; }
  .fla-outperf-copy { max-width: 62ch; }
  .fla-outperf-chart { margin-top: clamp(24px, 4vh, 40px); }
  /* stacked, so there is no blurb alongside to match — back to a plain 16:9 */
  .fla-video-frame { flex: 0 0 auto; aspect-ratio: 16 / 9; min-height: 0; }
  .fla-reasons, .fla-proofs, .fla-ways { grid-template-columns: 1fr; }
  /* The band STACKS here: copy across the full width, picture as a strip
     beneath it. The 5:1 ratio cannot survive a phone — at 390px it would make a
     78px band — and side by side is worse: the copy would land on the rings,
     because a portrait-ish box crops the picture's empty left away and brings
     the ink to about 38% across. So the ratio is released, the picture comes off
     the band's own background and into a ::before pinned to the bottom, and the
     fade runs top-to-bottom into the flat ground the copy sits on. This block
     also releases the copy's 46% measure, which otherwise leaves it in a
     half-width column on a phone. */
  .fla-say-band {
    aspect-ratio: auto; height: auto; min-height: 0; max-height: none;
    position: relative; isolation: isolate;
    background: #dbe4ef;
    /* Cut twice at the user's request — first from clamp(170px, 44vw, 260px),
       then again when the once-trimmed band still read tall at ~520px wide:
       every term here scales with vw, so the water the first cut left (~25% of
       the strip) grows in absolute pixels with the viewport, and what passed at
       390 came back at 520. See the ::before. */
    padding-bottom: clamp(112px, 31vw, 190px);
  }
  .fla-say-band p { max-width: none; }
  .fla-say-band::before {
    content: ""; position: absolute; inset: auto 0 0 0; z-index: -1;
    /* width MUST be reset. The desktop rule sets `width: 78%`, and a width plus
       a left/right pair does not stretch — width wins and the box stays pinned
       left, which left the strip 78% wide with bare ground beside it. */
    width: 100%;
    /* Cut twice; see the padding note on the band. The strip height, the
       position and the fade are ONE calculation, not three preferences: the
       window has to open just far enough above the bead (image y 42%) that the
       fade dissolves ONLY blank water and the ink arrives at full strength.
       Move one and re-derive the others.
       This second cut opens the window at ~35% of the picture, ~4vw above the
       bead, and shortens the fade to 12% to match — the fade can afford to be
       short here because it joins two near-identical pale blues (the flat
       ground and the picture's mid-water), so there is no seam for a longer
       ramp to hide. At the first cut's 22% it would now reach the bead. */
    height: clamp(100px, 28vw, 170px);
    /* 150%, not cover. At a phone's width `cover` draws the whole 2103px frame
       into 390px and the droplet is a thumbnail; zooming to one and a half
       screens brings it back to a legible size, and the crop still lands on the
       picture's empty left. */
    background: url("assets/scenes/droplet.png") right 73% / 150% auto no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%);
    mask-image: linear-gradient(180deg, transparent 0, #000 12%);
  }
  /* The left-hand wash goes with the side-by-side layout it was drawn for. Once
     the picture is a strip UNDER the copy there is no left to lighten, and a
     horizontal fade across a stacked band just reads as a smudge. */
  .fla-say-band::after { content: none; }
  .fla-plats { grid-template-columns: repeat(3, 1fr); }
  /* fewer columns means wider cells, so pull the tiles in rather than
     letting a 3-across grid become three big boxes */
  .fla-plats li { min-height: 74px; }
  .fla-plats li > a { padding: 16px 12px; }
  .fla-plats img { max-height: 28px; }
  .fla-holdings li { flex-basis: 100px; }
  .fla-ways { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fla-plats { grid-template-columns: repeat(2, 1fr); }
  .fla-plats li { min-height: 64px; }
  .fla-plats li > a { padding: 12px 10px; }
  .fla-plats img { max-height: 24px; }
  .fla-h2, .fla-say { max-width: none; }

  /* ── Phone type-and-rhythm pass (2026-09-21) ─────────────────────────
     Stacked, every act is the same full-width column, so size differences
     that read as HIERARCHY on desktop (22px prose in wide measures against
     17px in the three-across grids) read as INCONSISTENCY here — audited at
     390px, running copy arrived in four sizes: 17, 20 and 22px, with ledes
     at 16 and 22. One body size now: 17px/1.65, matching what .fla-reasons
     and .fla-proof already used. THE SIZE WENT ROUND A FULL LOOP before
     settling here: this pass first unified down to 17, the user asked for
     larger ("I like the font, especially body font, to be larger"), the
     whole scale went up to 19/20, and after living with it through the
     spacing rounds the user reverted — "actually revert to smaller font".
     17 is the CONSIDERED answer, not the default; don't walk this loop
     again in either direction without being asked.
     Since 2026-09-29 these sizes live in the page's three-size scale (see
     .fla-page near the top of the FLA section) rather than in overrides here:
     17 is the phone's body token, 18 its lead. The hero lede and the closing
     act, which sat a step lower at 16px, are body now — a fourth size was
     exactly what the scale exists to remove. The 3.3% stat line stays outside
     the scale on its 24px clamp floor. */
  /* The scale's phone values. Every running-text rule reads the tokens, so
     this one block is the whole type change at this width. */
  .fla-page {
    --fla-fs-small: 14px;
    --fla-fs-body: 17px;
    --fla-fs-lead: 18px;
  }
  .fla-cols p,
  .fla-spec-copy .fla-say--tight,
  .fla-outperf-copy p,
  .fla-etf-copy p {
    line-height: 1.65;
  }

  /* Paragraph rhythm in the Why act had TWO sources stacked: .fla-cols'
     18px grid gap plus each p's 22px margin-bottom = 40px holes between
     paragraphs of 28px lines. The margin is the desktop mechanism (shared
     with the other -copy blocks); stacked, the GAP is the single source. */
  .fla-cols { gap: 20px; }
  .fla-cols p { margin-bottom: 0; }

  /* Desktop act padding is 114-135px a side at this height, which stacks
     ~250px of blank between consecutive acts on a phone. The IDs must be
     listed — #fla-why and #fla-advisers carry their own ID-specificity
     paddings that a bare .fla-act override can never beat. */
  #fla-why, #fla-spec, #fla-advisers, #fla-proof, #fla-etf, #fla-outperf, #fla-team {
    padding-top: clamp(52px, 14vw, 72px);
    padding-bottom: clamp(52px, 14vw, 72px);
  }
  .fla-pds { padding: clamp(52px, 14vw, 72px) 0; }

  /* Intra-act gaps sized for 844px viewports, cut to suit a phone's. */
  .fla-proofs { margin-top: 40px; row-gap: 40px; }
  .fla-reasons { margin-top: 38px; }

  /* The rhythm problem the user flagged (red mark under the "Why" heading) was
     FLATNESS: heading-to-body measured ~38px visual against ~33px between
     paragraphs — near-identical steps, so nothing grouped. Two ways to break a
     tie like that, and the user picked between them: binding the heading TIGHT
     to its copy (18px, ~26 visual) was tried first and rejected — "spacing too
     tight" — so the hierarchy runs the other way, with the heading gap clearly
     LARGER than the paragraph gap instead of clearly smaller. ~42 visual against
     the paragraphs' ~33, under the ~55px act padding: three distinct steps, all
     generous. This page's user consistently prefers air and size over density —
     same correction as the 17px->19px type pass. Don't re-tighten. */
  .fla-h2 { margin-bottom: 34px; }

  /* Tidy rag, not justification. The brief was "neat and clean", and at this
     measure the options were tried in order:
     - ragged (the default) — the user called it messy;
     - justify + hyphens:auto — straight edge, but the user called the line-end
       dashes ugly and hard to read, and they were load-bearing: at ~32
       characters a line, justification WITHOUT hyphens pays for its straight
       edge with rivers of white inside the lines, which is worse than either.
     So the straight edge is off the table at this measure — a phone column
     simply cannot justify cleanly without breaking words — and the neatness
     comes from optimising the rag instead. `text-wrap: pretty` re-breaks the
     whole paragraph to even out line lengths, kill one-word last lines and
     avoid extreme steps between neighbouring lines; no dash, no river, and
     browsers without it just keep the ordinary greedy rag. The codebase
     already uses it for exactly this situation (.fla-spec-copy p, desktop).
     `balance` is the wrong tool here: it is capped around six lines and
     shortens EVERY line to match the longest need, which reads as a narrower
     column, not a neater one. */
  .fla-cols p,
  .fla-spec-copy .fla-say--tight,
  .fla-outperf-copy p:not(.fla-stat),
  .fla-etf-copy p,
  .fla-reasons p {
    text-wrap: pretty;
  }
}

/* ─── PARDOT COOKIE CONSENT BANNER — HIDDEN ───────────────
   Pardot (Salesforce Account Engagement) injects #pi_tracking_opt_in_div on
   the WordPress site when its "tracking opt-in" setting is on, with its own
   inline styles (a translucent white slab 100pt down the page with 2em YES/NO
   links). A restyle as a navy bar and then a small corner card was tried on
   2026-11-05; the user asked for it hidden entirely.
   CONSEQUENCE, flagged at the time: with opt-in enabled, Pardot sets its
   tracking cookies only after a visitor clicks Yes — so with the banner
   hidden, new visitors are not tracked by Pardot at all. If marketing wants
   that tracking back without a banner, the place to change it is Pardot's
   opt-in setting (a marketing/legal call), not this rule. Deleting this rule
   brings back Pardot's own unstyled banner. */
#pi_tracking_opt_in_div { display: none !important; }