/* ============================================================
   FulcrumLens — Direction A: Credit Research Desk
   Ink navy header · warm-paper pages · Newsreader serif heads ·
   IBM Plex Sans body · oxblood accent. Restraint over decoration.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Palette */
  --ink:        #14202E; /* header / deep navy */
  --ink-2:      #1B2B3D; /* raised navy surfaces */
  --ink-3:      #243140; /* deepest navy detail */
  --paper:      #FFFFFF; /* page background, now white not warm beige */
  --paper-2:    #F0F3F7; /* sunken panels, cool light grey */
  --card:       #FFFFFF;
  --rule:       #E4E7EC; /* cool hairline rules */
  --rule-ink:   rgba(255,255,255,0.12);

  --text:       #1C2632; /* primary body text on paper */
  --text-soft:  #4A5664; /* secondary text */
  --text-faint: #7A8290; /* meta / captions */
  --on-ink:     #EFEAE0; /* text on navy */
  --on-ink-soft:#A9B4C2;

  --accent:     #B08D57; /* Lens gold, replacing the former oxblood red */
  --accent-2:   #9A7B45; /* hover gold */
  --accent-tint:#F3EDE1; /* faint gold wash */
  --gold:       #B08D57; /* sparingly, for fine detail */
  /* Navy underline and highlight tones, replacing oxblood for active, hover and
     selected states. The lighter slate sits on dark navy backgrounds (header and
     ink sections), the darker navy on light backgrounds (paper and beige heroes). */
  --ul-on-dark:  #3C5067; /* lighter navy on dark backgrounds, like the masthead divider */
  --ul-on-light: #14202E; /* darker navy on light backgrounds */
  /* Cool light-blue band tones. These sit close in hue to the navy, so a light
     section next to an ink section reads as a gentle step rather than the harsh
     warm-beige-against-navy jump. Used for landing-page bands and their seams. */
  --mist:      #F0F3F7; /* cool light section band */
  --mist-2:    #DBE2EA; /* sunken cool panel / raised detail on a mist band */
  --mist-rule: #AEB7C4; /* cool hairline and divider */

  /* Type */
  --serif: "Newsreader", "Spectral", Georgia, "Times New Roman", serif;
  --sans:  "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Scale */
  --container: 1180px;
  --container-narrow: 820px;
  --gap: 24px;
  --radius: 0;
  --radius-lg: 0;

  --shadow-sm: 0 1px 2px rgba(20,32,46,0.06);
  --shadow-md: 0 6px 24px rgba(20,32,46,0.10);
  --shadow-lg: 0 18px 50px rgba(20,32,46,0.16);

  --header-h: 62px;          /* collapsed single-row header */
  --mast-bar-h: 80px;        /* legacy, retained for any references */
  --mast-nav-h: 52px;        /* legacy, retained for any references */
  --header-h-tall: 78px;     /* top-mode single row plus the rule beneath it */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x:hidden lives on html (not body) so the sticky header keeps its
   scroll container and never breaks. The body uses overflow-x:clip as well: clip
   contains horizontal overflow without creating a scroll container, which is what
   actually stops mobile browsers from widening the layout viewport and leaving a
   swipeable band to the right of the page. The sticky header is unaffected. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 450; line-height: 1.12; color: var(--ink); margin: 0 0 .4em; letter-spacing: -0.01em; }
h1 { font-family: "Libre Baskerville", "Baskerville", "Baskerville Old Face", Georgia, serif; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 500; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 450; }   
h3 { font-size: 1.28rem; }
p { margin: 0 0 1rem; }
::selection { background: var(--accent); color: #fff; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 28px; }
.container.narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(56px, 8vw, 104px); }
/* The page-hero already separates content, so the first section after it does not
   need full top padding. Halve the top only; padding-bottom and every other
   section are unchanged. The landing page uses .hero, so it is unaffected. */
.page-hero + .section { padding-top: clamp(28px, 4vw, 48px); }
.section--paper2 { background: var(--paper-2); }
.section--mist { background: var(--mist); }
/* The landing page runs on a clean white base with cool mist bands alternating
   in, in place of the warm paper elsewhere. */
body[data-page="home"] { background: #fff; }
.section--mist .point { border-top-color: var(--mist-rule); }
.section--ink { background: var(--ink); color: var(--on-ink); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
/* Eyebrow: a plain uppercase label, navy on light and light-slate on ink. No
   decorative dash rule and no oxblood. */
.eyebrow {
  font-family: var(--sans);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 .9rem;
  display: block;
}
.section--ink .eyebrow { color: var(--on-ink-soft); }
.lede { font-size: 1.18rem; color: var(--text-soft); max-width: 64ch; }
.section--ink .lede { color: var(--on-ink-soft); }
.center { text-align: center; }
.center .eyebrow, .center .lede { margin-left: auto; margin-right: auto; }
.newsletter .eyebrow { margin-bottom: 1.4rem; }
.center .lede { display: block; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
/* Reserve the sticky header height from the first paint, before the shared chrome
   is injected by JS, so the masthead does not reflow the page or shift the hero as
   it fades in. The header is never hidden or animated, it is simply present. The
   reserved values match the rendered header: the expanded masthead (bar plus nav)
   with its 1px rule and 1px border on desktop, and the single-row bar with its 1px
   border below the nav breakpoint. */
[data-site-header] { display: block; min-height: calc(var(--header-h-tall) + 2px); background: transparent; }
@media (max-width: 1200px) { [data-site-header] { min-height: calc(var(--header-h) + 1px); } }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  color: var(--text);
  border-bottom: 1px solid var(--rule);
  transition: background .28s var(--ease), border-color .28s var(--ease);
}
/* Home page: at the top the header is transparent so the hero photo shows behind
   it (the hero is pulled up under the header by its own negative margin). Once the
   header collapses on scroll it returns to the solid white bar. */
/* The masthead rows never carry their own background, so the header bar colour is
   controlled entirely by .site-header: transparent at the top, solid white once it
   collapses on scroll. This keeps every page consistent regardless of the per-page
   pre-paint inline style. */
.site-header .mast,
.site-header .mast__bar,
.site-header .mast__nav { background: transparent; }
.site-header:not(.is-collapsed) { background: transparent; border-bottom-color: transparent; }
/* Pull the first hero up under the header by the full expanded-header height so the
   photo always bleeds to the very top behind the transparent bar. Over-pulling at
   narrow widths (where the header is shorter) is harmless: the equal top padding
   keeps the hero content in the same place, only the background extends further.
   The body-scoped selectors beat the base .hero / .page-hero padding-block rules. */
body[data-page="home"] .hero {
  margin-top: calc(-1 * (var(--header-h-tall) + 2px));
  padding-top: calc(var(--header-h-tall) + 2px);
}
body .page-hero {
  margin-top: calc(-1 * (var(--header-h-tall) + 2px));
  padding-top: calc(var(--header-h-tall) + clamp(34px, 5vw, 70px));
}
.brand { display: flex; align-items: center; gap: .55rem; margin-right: auto; }
/* Wordmark: explicit Lazard-style small caps. The leading F and L stay full
   size, ULCRUM and ENS drop to 0.85em, everything in caps. The colours come
   from variables so the same markup renders white-on-navy in the header and
   footer and could render navy-on-light via .brand__mark--ink, no image. */
.brand__mark {
  --brand-fg: var(--ink);
  --brand-pivot: var(--gold);
  font-family: "Libre Baskerville", "Baskerville", "Baskerville Old Face", Georgia, serif;
  font-size: 1.46rem; font-weight: 400; color: var(--brand-fg);
  text-transform: uppercase; letter-spacing: .03em; line-height: 1;
}
.brand__sub { font-size: 0.85em; }
.brand__pivot { color: var(--brand-pivot); }
/* Light-background variant (kept for reuse, not used by the navy chrome). */
.brand__mark--ink { --brand-fg: var(--ink); }
/* The header wordmark is navy on the white bar, but the footer sits on navy, so
   its wordmark stays white. */
.footer-brand .brand__mark { --brand-fg: #fff; }
.brand__tag {
  font-family: var(--sans); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint);
  border-left: 1px solid var(--rule); padding-left: .55rem;
}
@media (max-width: 1080px) { .brand__tag { display: none; } }

/* ---- Two-row centred masthead (FT style) ----
   Top row: centred FulcrumLens wordmark with the descriptor beneath it.
   Second row: centred horizontal nav. A partial-width gradient hairline
   divides the two. On scroll the whole thing collapses to a slim
   left-aligned single row at the original --header-h. The header is in
   normal flow (sticky), so animating the heights reflows the page
   smoothly rather than jumping. Reduced motion switches states instantly
   via the global transition kill-switch. */
/* Single-row header: the wordmark sits on the left, in line with the nav on the
   right, and a grey rule runs beneath both. It stays this shape in every state, so
   scrolling only swaps the transparent background for solid white and drops the
   rule (the header border takes over). The descriptor tagline is gone. */
.mast {
  position: relative;
  width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 28px;
  display: grid; grid-template-columns: auto 1fr;
  grid-template-areas: "brand nav";
  align-items: center; column-gap: 28px;
  padding-block: 16px 17px;
}
.mast__bar {
  grid-area: brand;
  width: auto; height: auto;
  display: flex; align-items: center; gap: 12px;
}
.mast__side { display: flex; align-items: center; min-width: 0; }
.mast__side--right { display: none; }
.mast__brand {
  flex-direction: row; align-items: center; gap: .55rem;
  margin: 0; justify-self: start; text-align: left;
}
.mast__brand .brand__mark { font-size: 1.7rem; }
.mast__desc { display: none; }
/* Grey hairline beneath the single row, a little inset from each page edge. It is
   absolutely positioned so its full-viewport width never stretches the grid columns
   (which was pushing the nav off the right edge on very wide screens). */
.mast__rule {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  height: 1px; width: calc(100vw - 152px);
  background: var(--mist-rule);
}
.mast__nav {
  grid-area: nav;
  width: auto; height: auto;
  display: flex; align-items: center; justify-content: flex-end;
}
.mast__nav .nav__menu { gap: 8px; }

/* Collapsed on scroll: same single row, just slimmer, with the rule dropped since
   the solid white header carries its own bottom border. */
.site-header.is-collapsed .mast { padding-block: 12px; }
.site-header.is-collapsed .mast__rule { display: none; }

/* The nav is right-aligned in every state, so wide dropdown panels right-align to
   their trigger (grow leftward, never past the right edge). */
.nav__menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 10px 13px; border-radius: var(--radius);
  font-size: .92rem; font-weight: 450; color: var(--text-soft);
  white-space: nowrap; transition: color .15s var(--ease), background .15s var(--ease);
}
.nav__link:hover, .nav__item:hover .nav__link, .nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ul-on-light); border-radius: 0; }
.nav__link .caret { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; transition: transform .2s var(--ease); }
.nav__item:hover .nav__link .caret { transform: rotate(225deg) translateY(-1px); }

/* Dropdown */
.dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 248px; background: #fff; color: var(--text);
  /* Square corners on dropdowns and their controls. Local override only, the
     --radius tokens stay as they are for cards and buttons elsewhere. */
  border: 1px solid var(--rule); border-radius: 0;
  box-shadow: var(--shadow-lg);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
/* Wide dropdowns right-align to their trigger so the 460px panel grows
   leftward and never extends past the right viewport edge, which was
   adding horizontal page overflow for the right-side nav items. */
.dropdown.dropdown--wide { min-width: 460px; columns: 2; column-gap: 6px; left: auto; right: 0; border-radius: 0; }
.nav__item:hover .dropdown, .nav__item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown__link {
  display: block; padding: 9px 12px; border-radius: 0;
  font-size: .9rem; color: var(--text-soft); break-inside: avoid;
  transition: background .12s, color .12s;
}
.dropdown__link b { color: var(--ink); font-weight: 600; transition: box-shadow .12s var(--ease); }
/* Hover: ink text with a tight 2px oxblood underline under the label only, no
   full-width fill. */
.dropdown__link:hover { background: none; color: var(--ink); }
.dropdown__link:hover b { box-shadow: 0 2px 0 var(--ul-on-light); }
.dropdown__head {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint); padding: 10px 12px 4px; font-weight: 600;
  /* Span both columns so the link columns resume below it, top-aligned. */
  column-span: all;
}

/* CTA + burger */
.nav__cta {
  margin-left: 6px; padding: 9px 16px; border-radius: var(--radius);
  background: var(--accent); color: #fff; font-size: .88rem; font-weight: 500;
  border: 1px solid var(--accent); transition: background .15s var(--ease);
  white-space: nowrap; flex: none;
}
.nav__cta:hover { background: var(--accent-2); }
.burger {
  display: none; width: 42px; height: 42px; border: 0;
  background: transparent; border-radius: 0; position: relative;
}
.burger span, .burger span::before, .burger span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.6px;
  background: var(--ink); transform: translate(-50%,-50%); transition: .2s var(--ease);
}
.burger span::before { transform: translate(-50%, -6px); }
.burger span::after  { transform: translate(-50%,  6px); }

/* ---------- Mobile menu (full overlay) ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 200; background: #fff;
  color: var(--text); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s var(--ease);
  overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu__top { display: flex; align-items: center; height: var(--header-h); padding: 0 22px; border-bottom: 1px solid var(--rule); }
.mobile-menu__close { margin-left: auto; width: 42px; height: 42px; background: transparent; border: 0; border-radius: 0; color: var(--ink); font-size: 1.5rem; }
.m-acc { border-bottom: 1px solid var(--rule); }
.m-acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; background: transparent; border: 0; color: var(--ink);
  font-family: var(--serif); font-size: 1.32rem; text-align: left;
}
.m-acc__btn .caret { width: 9px; height: 9px; border-right: 1.5px solid var(--text-faint); border-bottom: 1.5px solid var(--text-faint); transform: rotate(45deg); transition: transform .2s var(--ease); }
.m-acc.open .m-acc__btn .caret { transform: rotate(225deg); }
.m-acc__panel { max-height: 0; overflow: hidden; transition: max-height .28s var(--ease); }
.m-acc.open .m-acc__panel { max-height: 720px; }
.m-acc__panel a { display: block; padding: 11px 34px; color: var(--text-soft); font-size: .98rem; }
.m-acc__panel a:hover { color: var(--ink); background: var(--paper-2); }
.mobile-menu__cta { margin: 22px; padding: 14px; text-align: center; background: var(--ink); color: #fff; border-radius: 0; font-weight: 500; }
body.menu-open { overflow: hidden; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: 12px 22px; border-radius: var(--radius); font-size: .94rem; font-weight: 500;
  border: 1px solid transparent; transition: .15s var(--ease); cursor: pointer;
}
.btn .arw { transition: transform .18s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }
/* Primary actions read as clear buttons, like the ghost and on-ink buttons, and
   warm to a faint oxblood only on hover rather than sitting as solid red. */
.btn--primary { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--primary:hover { background: var(--accent-tint); color: var(--accent); border-color: var(--accent); }
/* On navy sections and the navy newsletter panel the clear state uses light text
   and a faint light border, warming to a translucent oxblood on hover. */
.section--ink .btn--primary, .newsletter .btn--primary { color: #fff; border-color: var(--rule-ink); }
.section--ink .btn--primary:hover, .newsletter .btn--primary:hover { background: rgba(123,30,34,.30); color: #fff; border-color: var(--accent-2); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { border-color: var(--ink); background: #fff; }
.btn--on-ink { background: transparent; color: #fff; border-color: var(--rule-ink); }
.btn--on-ink:hover { border-color: #fff; background: rgba(255,255,255,.06); }
/* Solid navy button for the primary action on light backgrounds. */
.btn--solid { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--solid:hover { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }

/* ============================================================
   HERO
   ============================================================ */
.hero { background: #fff; color: var(--text); position: relative; overflow: hidden; }
/* The rotating hero video is the background now, so the old still-image layer is
   gone. The video's poster attribute still provides a static fallback. */
/* Soft white wash over the image so text stays crisp on the left and the photo
   only reads faintly, strongest toward the right where the copy ends. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.55) 42%, rgba(255,255,255,0.28) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 30%, rgba(255,255,255,0.5) 100%);
}
/* Rotating hero video, greyscale and faint. Two stacked elements crossfade: only
   the .is-active one is visible (opacity .36), the other sits hidden at 0 while it
   preloads the next clip, so the visible clip never reloads and never flashes a
   poster. The 0.4s opacity transition drives the fade. */
.hero__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05) contrast(1.1) brightness(0.9); opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease);
}
.hero__video.is-active { opacity: .75; }
.hero__inner { position: relative; z-index: 2; padding-block: clamp(70px, 11vw, 140px); text-align: left; }
/* Home hero: one large single-colour statement, no accent tint. */
.hero h1 { color: var(--ink); font-size: clamp(2.9rem, 6.4vw, 4.9rem); line-height: 1.06; max-width: 15ch; }
.hero__tag {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  color: var(--text-soft); margin-top: .4rem;
}
.hero__sub { color: var(--text-soft); font-size: 1.12rem; max-width: 60ch; margin-top: 1.4rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.2rem; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.stat__num { font-family: var(--serif); font-weight: 500; font-size: clamp(2.8rem, 5vw, 3.8rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat__lbl { font-size: .78rem; letter-spacing: .12em; color: var(--text-faint); text-transform: uppercase; margin-top: .5rem; }

/* ---- Home "Who We Are" + statistics band ----
   A left intro column (eyebrow + paragraph) sits beside the big numbers, like the
   Citadel / Evercore layout. The numbers are a single navy colour throughout. */
/* Who We Are and Our Vision are both mist and sit directly next to each other, so
   they read as one continuous block with only a small seam between them. Generous
   padding on the outer edges, a tight gap where the two meet. */
/* Who We Are + numbers, Evercore-style full-bleed split mirroring Our Vision:
   the Who We Are text sits on the mist left half, the statistics on a navy panel
   that bleeds to the right page edge and runs the full height of the section.
   The section drops its block padding so the navy meets top and bottom; padding
   lives inside the columns. The navy carries a faint tower photo for texture
   under a near-opaque navy wash. */
.home-numbers-section { padding-block: 0; overflow-x: clip; }
/* #vision carries no block padding of its own either: the navy panel must run
   the full height of the section, so the vertical padding lives in the columns. */
#vision { padding-block: 0; }

/* Fade the Who We Are and Our Vision content in when the section enters the
   viewport, in sync with the number count-up. Scoped to .js-reveal (added only when
   JS is on and motion is allowed), so no-JS and reduced-motion keep it visible. */
.js-reveal .home-numbers-section .numbers-lead,
.js-reveal .home-numbers-section .numbers-navy,
.js-reveal #vision .vision-left,
.js-reveal #vision .vision-quote {
  opacity: 0; transition: opacity .7s var(--ease);
}
.js-reveal .home-numbers-section.is-revealed .numbers-lead,
.js-reveal .home-numbers-section.is-revealed .numbers-navy,
.js-reveal #vision.is-revealed .vision-left,
.js-reveal #vision.is-revealed .vision-quote {
  opacity: 1;
}
.js-reveal .home-numbers-section.is-revealed .numbers-navy { transition-delay: .12s; }
.js-reveal #vision.is-revealed .vision-quote { transition-delay: .14s; }

.numbers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.numbers-lead {
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(56px, 8vw, 104px);
  padding-left: max(28px, calc((100vw - var(--container)) / 2 + 28px));
  padding-right: clamp(32px, 4vw, 64px);
}
.numbers-lead p:not(.eyebrow) { font-family: var(--sans); font-size: 1.3rem; line-height: 1.5; color: var(--text-soft); margin: 0; max-width: 34ch; }
.numbers-navy {
  display: flex; align-items: center; justify-content: center;
  background-color: var(--ink);
  background-image: linear-gradient(rgba(20, 32, 46, .86), rgba(20, 32, 46, .88)), url("../assets/backgrounds/statistics-tower.jpg");
  background-size: cover; background-position: center;
  padding-block: clamp(48px, 7vw, 96px);
  padding-left: clamp(40px, 4.5vw, 80px);
  padding-right: max(28px, calc((100vw - var(--container)) / 2 + 28px));
}
/* Stats as an inverted triangle on the navy: two on top, one centred below. */
.home-stats__item { display: flex; flex-direction: column; }
.numbers-navy .home-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: center; column-gap: clamp(36px, 5vw, 84px); row-gap: clamp(30px, 4vw, 48px);
  width: 100%;
}
.numbers-navy .home-stats__item { align-items: center; text-align: center; }
.numbers-navy .home-stats__item:nth-child(3) { grid-column: 1 / -1; justify-self: center; }
.home-stats__num { font-family: var(--serif); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.numbers-navy .home-stats__num { color: #fff; font-size: clamp(3rem, 4.4vw, 4.4rem); }
.home-stats__label { font-family: var(--sans); font-size: .9rem; font-weight: 600; margin: 0; }
.numbers-navy .home-stats__label { color: var(--on-ink-soft); margin-top: 12px; }

@media (max-width: 860px) {
  .numbers-grid { grid-template-columns: 1fr; }
  .numbers-lead { padding-right: max(28px, calc((100vw - var(--container)) / 2 + 28px)); }
  .numbers-navy { padding-left: max(28px, calc((100vw - var(--container)) / 2 + 28px)); }
}
@media (max-width: 480px) {
  .numbers-navy .home-stats { grid-template-columns: 1fr; row-gap: 30px; }
  .numbers-navy .home-stats__item:nth-child(3) { grid-column: auto; }
}

/* ============================================================
   REPORT-TYPE CARDS (home)
   ============================================================ */
/* ============================================================
   RESTRUCTURING TYPES — full-bleed split panels
   Three cinematic panels, equal at rest. Hover (or tap on touch)
   expands one to ~60% and reveals its service list. Boutique feel:
   navy-tinted overlay, gold hairline dividers, serif display titles.
   ============================================================ */
.rx-split { display: flex; width: 100%; height: min(82vh, 760px); min-height: 520px; overflow: hidden; background: #F4F5F7; }
.rx-panel {
  position: relative; overflow: hidden;
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: flex-end;
  color: var(--ink); text-decoration: none;
  transition: flex-grow .7s var(--ease);
}
.rx-panel + .rx-panel { border-left: 1px solid rgba(20,32,46,0.12); }

/* At rest the photo shows greyscale and pale under a light wash, so each panel
   reads as a soft grey image with navy text. On hover, focus or tap the panel
   turns to full colour, its text flips to white and it expands. */
.rx-panel__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: .4; filter: grayscale(1);
  transform: scale(1.001); transform-origin: center;
  transition: opacity .6s var(--ease), transform .7s var(--ease), filter .6s var(--ease);
  will-change: transform, opacity, filter;
}
.rx-panel__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(244,245,247,0.62) 0%, rgba(244,245,247,0.32) 60%, rgba(244,245,247,0.24) 100%);
  transition: background .7s var(--ease);
}
.rx-panel__content {
  position: relative; z-index: 2; width: 100%;
  padding: 0 clamp(22px, 3.4vw, 56px) 13vh;
  transform: translateY(0); transition: transform .7s var(--ease);
}
.rx-panel__eyebrow {
  display: block; font-family: var(--sans);
  font-size: .7rem; font-weight: 600; letter-spacing: .32em;
  color: rgba(20,32,46,0.5); margin-bottom: 16px;
  transition: color .5s var(--ease);
}
.rx-panel__title {
  font-family: var(--serif); font-weight: 500; color: var(--ink);
  text-transform: uppercase; letter-spacing: .08em;
  font-size: clamp(1.55rem, 2.3vw, 2.6rem); line-height: 1.04; margin: 0;
  transition: color .5s var(--ease);
}
.rx-panel__list {
  list-style: none; margin: 22px 0 0; padding: 0;
  opacity: 0; transform: translateY(10px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.rx-panel__list li {
  font-family: var(--sans); font-size: .94rem; font-weight: 400;
  letter-spacing: .02em; line-height: 1.95; color: rgba(20,32,46,0.72);
  transition: color .5s var(--ease);
}

/* Expanded state, shared by tap (.is-open) and keyboard focus: full-colour image
   and white text. */
.rx-panel.is-open { flex-grow: 1.5; }
.rx-panel.is-open .rx-panel__bg { transform: scale(1.02); opacity: 1; filter: grayscale(0); }
.rx-panel.is-open .rx-panel__overlay { background: linear-gradient(to top, rgba(20,32,46,0.82) 0%, rgba(20,32,46,0.45) 55%, rgba(20,32,46,0.35) 100%); }
.rx-panel.is-open .rx-panel__content { transform: translateY(-14px); }
.rx-panel.is-open .rx-panel__list { opacity: 1; transform: none; }
.rx-panel.is-open .rx-panel__eyebrow { color: rgba(255,255,255,0.7); }
.rx-panel.is-open .rx-panel__title { color: #fff; }
.rx-panel.is-open .rx-panel__list li { color: rgba(255,255,255,0.85); }
.rx-panel:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }

/* Hover expand, only on devices that truly hover with a fine pointer. Only the
   hovered panel turns to colour and white text. */
@media (hover: hover) and (pointer: fine) {
  .rx-panel:hover { flex-grow: 1.5; }
  .rx-panel:hover .rx-panel__bg,
  .rx-panel:focus-visible .rx-panel__bg { transform: scale(1.02); opacity: 1; filter: grayscale(0); }
  .rx-panel:hover .rx-panel__overlay,
  .rx-panel:focus-visible .rx-panel__overlay { background: linear-gradient(to top, rgba(20,32,46,0.82) 0%, rgba(20,32,46,0.45) 55%, rgba(20,32,46,0.35) 100%); }
  .rx-panel:hover .rx-panel__content { transform: translateY(-14px); }
  .rx-panel:hover .rx-panel__list,
  .rx-panel:focus-visible .rx-panel__list { opacity: 1; transform: none; }
  .rx-panel:hover .rx-panel__eyebrow,
  .rx-panel:focus-visible .rx-panel__eyebrow { color: rgba(255,255,255,0.7); }
  .rx-panel:hover .rx-panel__title,
  .rx-panel:focus-visible .rx-panel__title { color: #fff; }
  .rx-panel:hover .rx-panel__list li,
  .rx-panel:focus-visible .rx-panel__list li { color: rgba(255,255,255,0.85); }
  .rx-panel:focus-visible { flex-grow: 1.5; }
}

/* Mobile: stack full-width, no expand, service lists always visible. */
@media (max-width: 760px) {
  .rx-split { flex-direction: column; height: auto; min-height: 0; }
  .rx-panel { flex: 0 0 auto; height: 34vh; min-height: 240px; }
  .rx-panel.is-open { flex: 0 0 auto; }
  .rx-panel + .rx-panel { border-left: 0; border-top: 1px solid rgba(20,32,46,0.12); }
  .rx-panel__content { padding-bottom: 7vh; transform: none; }
  .rx-panel__bg { transform: none; }
  .rx-panel__list { opacity: 1; transform: none; }
}

/* Reduced motion: equal panels, no expand, no zoom, lists shown. */
@media (prefers-reduced-motion: reduce) {
  .rx-panel:hover, .rx-panel.is-open, .rx-panel:focus-visible { flex-grow: 1; }
  .rx-panel__bg { transform: none !important; }
  .rx-panel__content { transform: none !important; }
  .rx-panel__list { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   REPORT GRID + CARDS
   ============================================================ */
.library-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
/* The search box and the filter selects butt directly against each other as one
   joined control bar. gap is 0 and each control after the first pulls left by 1px
   so adjacent borders collapse into a single shared hairline. The outer border of
   the whole group stays intact. */
.toolbar { display: flex; gap: 0; flex-wrap: wrap; align-items: stretch; }
.toolbar > * { position: relative; }
.toolbar > * + * { margin-left: -1px; }
/* A focused control rises above its joined neighbours so its accent border and
   focus ring sit on top rather than under the next control. */
.toolbar > *:focus-within, .toolbar > *:focus { z-index: 2; }
.search {
  display: flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid var(--rule); border-radius: 0; padding: 9px 13px; min-width: 240px;
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.search input { border: 0; outline: 0; font: inherit; font-size: .92rem; background: transparent; width: 100%; color: var(--text); }
.search svg { flex: none; color: var(--text-faint); }
.select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237A8290' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center; border: 1px solid var(--rule); border-radius: 0; padding: 9px 34px 9px 13px; font: inherit; font-size: .9rem; color: var(--text); }

.report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.report-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

/* Report cards: no container. Content sits on the page background, separated by
   a single bottom hairline, with square corners on the card and the thumbnail. */
.rcard {
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--rule);
}
.rcard__thumb { position: relative; aspect-ratio: 16 / 10; background: var(--ink); overflow: hidden; border-radius: 0; }
.rcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rcard__thumb img { transition: filter .3s var(--ease), transform .4s var(--ease); }
.rcard:hover .rcard__thumb img { filter: brightness(0.5); transform: scale(1.04); }
.rcard__thumb::after {
  content: "\23F1  " attr(data-read);
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-ink); background: rgba(20,32,46,0.45);
  opacity: 0; transition: opacity .3s var(--ease); pointer-events: none;
}
.rcard:hover .rcard__thumb::after { opacity: 1; }
.rcard__body { padding: 18px 0 22px; display: flex; flex-direction: column; flex: 1; }
.rcard__cat { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 0; }
/* Our Work latest reports sit on the navy band, so their category line takes the
   gold of the section eyebrow. Scoped to that page only. */
body[data-page="our work"] [data-latest] .rcard__cat { color: var(--gold); }
/* Reserve roughly three lines so the description starts at the same height
   across cards whatever the title length. */
.rcard h3 { font-size: 1.24rem; margin: 8px 0 0; min-height: 3.36em; }
.rcard h3 a { background-image: linear-gradient(var(--ul-on-light), var(--ul-on-light)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s var(--ease); }
.rcard:hover h3 a { background-size: 100% 1px; }
/* On the navy Our Work latest band the card hover underline uses the lighter navy. */
.section--ink .rcard h3 a { background-image: linear-gradient(var(--ul-on-dark), var(--ul-on-dark)); }
.rcard__summary { font-size: .92rem; color: var(--text-soft); margin: 10px 0 16px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rcard__date { margin-top: auto; font-size: .76rem; color: var(--text-faint); font-family: var(--sans); letter-spacing: .02em; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: .72rem; color: var(--text-soft); background: var(--paper-2); border: 1px solid var(--rule); padding: 3px 8px; border-radius: var(--radius); white-space: nowrap; }
.tag--accent { color: var(--accent); background: var(--accent-tint); border-color: #EAD6D2; }
.tag--region { color: var(--text-soft); background: var(--paper-2); border-color: var(--rule); }

/* Filter rows (report-type, industry, advisors): underlined text filters, not
   pills. Scoped via [data-chips] so report-card tags above stay as chips. The
   underline sits a little below the text inside a ~40px tall tappable area. */
[data-chips] { gap: 6px 26px; }
[data-chips] .tag {
  display: inline-block; line-height: 1; font-size: .95rem;
  padding: 20px 0 10px;
  background: none; border: 0; border-radius: 0;
  color: var(--text-soft); white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color .15s var(--ease), box-shadow .15s var(--ease);
}
[data-chips] .tag:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ul-on-light); }
[data-chips] .tag--accent { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ul-on-light); }

.empty-state { text-align: center; padding: 70px 20px; border: 1px dashed var(--rule); border-radius: var(--radius-lg); background: #fff; color: var(--text-soft); }
.empty-state h3 { color: var(--ink); }
.result-count { font-family: var(--sans); font-size: .8rem; color: var(--text-faint); }

/* Generated thumbnail fallback (monogram) */
.thumb-gen { width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative;
  background:
    radial-gradient(120% 140% at 85% 10%, rgba(176,141,87,.16), transparent 55%),
    linear-gradient(160deg, var(--ink-2), var(--ink)); }
.thumb-gen__mono { font-family: var(--serif); font-size: 2.6rem; color: #fff; opacity: .9; }
.thumb-gen__line { position:absolute; left:18px; right:18px; bottom:16px; font-family: var(--sans); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color: var(--gold); }

/* ============================================================
   SECTION: page hero / breadcrumb band
   ============================================================ */
.page-hero { background: #fff; color: var(--text); padding-block: clamp(48px, 7vw, 86px); border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
/* Faint greyscale hero photo on white, same recipe as the landing hero. */
.page-hero[class*="page-hero--"]::before {
  content: ""; position: absolute; inset: -480px 0 0 0; z-index: 0; pointer-events: none;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: grayscale(1); opacity: .2;
  transform: translate3d(0, var(--py, 0px), 0) scale(1.06); transform-origin: center top;
  will-change: transform;
}
/* Soft white wash over the image so the navy text stays crisp. */
.page-hero[class*="page-hero--"]::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.55) 45%, rgba(255,255,255,0.3) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 34%, rgba(255,255,255,0.5) 100%);
}
/* per-page image only; path is relative to THIS stylesheet, exactly like the landing hero */
.page-hero--reports::before    { background-image: url("../assets/thumbnails/reports.jpg"); }
.page-hero--industry::before   { background-image: url("../assets/thumbnails/industry.jpg"); }
.page-hero--interviews::before { background-image: url("../assets/thumbnails/interview.jpg"); }
.page-hero--team::before       { background-image: url("../assets/thumbnails/team.jpg"); }
.page-hero--careers::before    { background-image: url("../assets/thumbnails/careers.jpg"); }
.page-hero--financial::before  { background-image: url("../assets/thumbnails/financial.jpg"); }
.page-hero--legal::before      { background-image: url("../assets/thumbnails/legal.jpg"); }
.page-hero--ourwork::before      { background-image: url("../assets/thumbnails/work.jpg"); }
/* financial thumbnail runs bright, darken just this one */
.page-hero.page-hero--financial::before { filter: grayscale(1) brightness(0.62); }
/* industry: the container ship sits at the vertical centre of the photo, which the
   parallax top-overhang would crop out of view. Below the parallax breakpoint the
   effect is off, so drop the overhang and centre the ship. From 1024px up (where the
   parallax runs) keep a shorter overhang and nudge the image so the ship stays framed. */
.page-hero.page-hero--industry::before { inset: 0; background-position: 50% 50%; }
@media (min-width: 1024px) {
  .page-hero.page-hero--industry::before { inset: -260px 0 0 0; background-position: 50% 10%; }
}
/* Report detail hero: its own component. The image is per-report and set
   dynamically as --hero-img on the header element (see report.html), so it is
   wired here rather than as a fixed per-page rule. It reuses the shared ::before
   image layer, the overhang and the JS parallax. The header carries a long title
   and a multi-line summary, so the navy overlay runs stronger than the section
   pages to keep the text readable. No thumbnail means no page-hero--report class,
   so the header falls back to plain navy with no image and no parallax. */
.page-hero--report::before { background-image: var(--hero-img, none); }
.page-hero.page-hero--report::after {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.6) 48%, rgba(255,255,255,0.34) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.45) 0%, transparent 34%, rgba(255,255,255,0.55) 100%);
}

/* Parallax is driven by JS (components.js) writing --py on the hero element; the
   image layer above translates by it. Reduced-motion users get a static image. */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .page-hero[class*="page-hero--"]::before { transform: none; }
}
.page-hero > .container { position: relative; z-index: 2; text-shadow: none; }
.page-hero h1 { color: var(--ink); }
.page-hero .lede { color: var(--text-soft); max-width: none; }
.page-hero .eyebrow { display: none; }
.breadcrumb { font-family: var(--sans); font-size: .76rem; letter-spacing: .04em; color: var(--text-soft); margin-bottom: 1rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { color: var(--ink); }

/* ============================================================
   MISSION / VISION
   ============================================================ */
.vision-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.vision-pillars { display: grid; gap: 18px; }
.pillar { display: flex; gap: 16px; padding: 18px 20px; background: rgba(255,255,255,.03); border: 1px solid var(--rule-ink); border-radius: var(--radius-lg); }
.pillar__no { font-family: var(--sans); color: var(--gold); font-size: .85rem; padding-top: .2rem; }
.pillar h3 { color: #fff; font-size: 1.1rem; margin-bottom: .25rem; }
.pillar p { color: var(--on-ink-soft); font-size: .92rem; margin: 0; }

/* ============================================================
   LOGO GRIDS (universities / alumni)
   ============================================================ */
.logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.logo-cell {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 26px 18px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  min-height: 104px; text-align: center; transition: background .15s var(--ease);
}
.logo-cell:hover { background: var(--paper-2); }
.logo-mark {
  width: 34px; height: 34px; flex: none; border-radius: 0; background: var(--paper-2);
  border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600; font-size: .95rem; color: var(--ink);
}
.logo-name { font-size: .9rem; font-weight: 500; color: var(--text-soft); line-height: 1.2; text-align: left; }
.logo-name small { display: block; font-size: .72rem; color: var(--text-faint); font-weight: 400; }

/* alumni variant: darker chips */
.logo-grid--alumni { background: var(--ink-2); border-color: var(--rule-ink); }
.logo-grid--alumni .logo-cell { border-color: var(--rule-ink); }
.logo-grid--alumni .logo-cell:hover { background: var(--ink); }
.logo-grid--alumni .logo-name { color: var(--on-ink-soft); }
.logo-grid--alumni .logo-name small { color: var(--on-ink-soft); opacity: .7; }
.logo-grid--alumni .logo-mark { background: rgba(255,255,255,.05); border-color: var(--rule-ink); color: var(--gold); }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.newsletter { background: var(--ink-2); border: 1px solid var(--rule-ink); border-radius: 0; padding: clamp(30px, 5vw, 56px); position: relative; overflow: hidden; }
.newsletter::after { content:""; position:absolute; right:-60px; top:-60px; width:240px; height:240px; border-radius:50%; background: radial-gradient(circle, rgba(176,141,87,.12), transparent 70%); }
.newsletter__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.newsletter h2 { color: #fff; }
.newsletter p { color: var(--on-ink-soft); margin: 0; }
.nl-form { display: flex; gap: 10px; flex-wrap: wrap; }
.nl-form input {
  flex: 1; min-width: 220px; padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid var(--rule-ink); background: rgba(255,255,255,.04); color: #fff; font: inherit; font-size: .95rem;
}
.nl-form input::placeholder { color: var(--on-ink-soft); }
.nl-form input:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.07); }
.nl-note { font-size: .78rem; color: var(--on-ink-soft); margin-top: 12px; }
.nl-success { display: none; align-items: center; gap: 10px; color: #fff; font-size: .98rem; padding: 14px 0; }
.nl-success svg { color: var(--gold); flex: none; }
.nl-form.done { display: none; }
.nl-success.show { display: flex; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--ink); color: var(--on-ink-soft); border-top: 1px solid var(--rule-ink); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-block: 64px 40px; }
.footer-brand .brand__mark { font-size: 1.5rem; }
.footer-about { font-size: .92rem; max-width: 34ch; margin-top: 1rem; }
.footer-col h4 { color: #fff; font-family: var(--sans); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin: 0 0 1rem; }
.footer-col a { display: block; padding: 6px 0; font-size: .92rem; color: var(--on-ink-soft); }
.footer-col a:hover { color: #fff; }
.social { display: flex; gap: 10px; margin-top: 1.4rem; }
.social a { width: 40px; height: 40px; border: 1px solid var(--rule-ink); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--on-ink-soft); transition: .15s var(--ease); }
.social a:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.05); }
.footer-bottom { border-top: 1px solid var(--rule-ink); padding-block: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; }
.footer-bottom .disclaimer { max-width: 70ch; color: var(--on-ink-soft); opacity: .8; }

/* ============================================================
   REPORT DETAIL
   ============================================================ */
/* The report body is a single reading column centred on the page, with all prose
   and every exhibit sharing that one column. */
.report-main { position: relative; }
.report-shell { max-width: 780px; margin-inline: auto; min-width: 0; }
.detail-body h2 { margin-top: 2.4rem; scroll-margin-top: calc(var(--header-h) + 26px); }
.detail-body p { color: var(--text); }
.detail-body .first-para { font-size: 1.15rem; color: var(--text); }
/* Inline prose links, eg a cross-reference to another report */
.report-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: rgba(123,30,34,.4); transition: text-decoration-color .15s var(--ease); }
.report-link:hover { text-decoration-color: var(--accent); }
/* References list at the foot of a report body, set apart by a hairline rule */
.report-sources { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--rule); }
.report-sources h2 { margin-top: 0; font-size: 1.2rem; }
.report-sources .report-sources__list { list-style: none; margin: 16px 0 0; padding: 0; }
.report-sources .report-sources__item { font-family: var(--sans); font-size: .85rem; line-height: 1.55; color: var(--text-faint); margin-bottom: 12px; }
.report-sources .report-sources__item:last-child { margin-bottom: 0; }
/* Financial exhibit tables, framed as a card to sit in the same family as the bond chart */
.report-table { margin: 32px 0; padding: 20px 20px 18px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.report-table__title { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.04rem; font-weight: 600; color: var(--ink); margin-bottom: 14px; letter-spacing: -0.01em; }
.report-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.report-table__tbl { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: .84rem; }
/* navy header band, paper text, no heavy weight */
.report-table__tbl thead th { background: var(--ink); color: var(--on-ink); font-weight: 600; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; padding: 11px 14px; text-align: right; white-space: nowrap; }
.report-table__tbl thead th.lft { text-align: left; }
/* horizontal hairline rules only, no vertical lines, generous padding */
.report-table__tbl td { padding: 11px 14px; text-align: right; color: var(--text-soft); border-bottom: 1px solid var(--rule); white-space: nowrap; font-variant-numeric: tabular-nums; }
.report-table__tbl td.lft { text-align: left; color: var(--text); font-weight: 500; white-space: normal; font-variant-numeric: normal; }
.report-table__tbl tbody tr:last-child td { border-bottom: none; }
/* fulcrum (second-lien) row: one restrained gold accent */
.report-table__tbl tr.report-table__row--fulcrum td { background: rgba(176,141,87,0.07); }
.report-table__tbl tr.report-table__row--fulcrum td.lft { box-shadow: inset 3px 0 0 var(--gold); color: var(--ink); }
.report-table__tbl tr.report-table__row--wall td { background: rgba(123,30,34,0.05); }
.report-table__tbl tr.report-table__row--wall td.lft { box-shadow: inset 3px 0 0 var(--accent); color: var(--ink); }
/* Total and subtotal rows: bold with a stronger navy rule above so they read as
   totals rather than another line item. Sits on top of any fulcrum or wall accent. */
.report-table__tbl tr.report-table__row--total td { font-weight: 600; color: var(--ink); border-top: 1.5px solid var(--ink); }
.report-table__tbl tr.report-table__row--total td.lft { font-weight: 700; }
/* no-recovery cells recede with a faint oxblood tint */
.report-table__tbl td.report-table__cell--nil { color: rgba(123,30,34,0.5); }
.detail-body .report-table__note { font-family: var(--sans); font-size: .78rem; color: var(--text-faint); margin-top: 14px; line-height: 1.55; }
/* waterfall toggle reuses the bond-chart pill tabs */
.report-table__tabs { display: flex; flex-wrap: wrap; gap: 0 24px; margin-bottom: 16px; }
/* Table tabs read as underlined text filters, like the report-library filters,
   not pills: flat text that takes a navy underline when hovered or active. */
.report-table__tab { padding: 4px 0 8px; border: 0; border-radius: 0; background: none; color: var(--text-soft); font-family: var(--sans); font-size: .82rem; font-weight: 500; cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color .15s var(--ease), box-shadow .15s var(--ease); }
.report-table__tab:hover { color: var(--ink); }
.report-table__tab.is-active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ul-on-light); }
.report-table__panel { display: none; }
.report-table__panel.is-active { display: block; }
@media (max-width: 600px) { .report-table { padding: 16px 14px 14px; } }

/* Interactive recovery waterfall: a stacked capital-structure bar with a moving
   EV fill-line, in the same card family as the chart and tables. Single accents:
   navy for covered, gold for the fulcrum, faint oxblood for underwater. */
.wfx { margin: 32px 0; padding: 20px 20px 18px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.wfx__head { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.wfx__title { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 1.04rem; color: var(--ink); letter-spacing: -.01em; }
.wfx__tabs { display: flex; flex-wrap: wrap; gap: 0 24px; }
/* Recovery tabs read as underlined text filters, like the report-library filters,
   not pills: flat text that takes a navy underline when hovered or active. */
.wfx__tab { padding: 4px 0 8px; border: 0; border-radius: 0; background: none; color: var(--text-soft); font-family: var(--sans); font-size: .82rem; font-weight: 500; cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color .15s var(--ease), box-shadow .15s var(--ease); }
.wfx__tab:hover { color: var(--ink); }
.wfx__tab.is-active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ul-on-light); }
.wfx__readout { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.wfx__mult { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 1.6rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.wfx__ev { font-family: var(--sans); font-size: .82rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.wfx__viz { display: flex; gap: 18px; align-items: stretch; }
.wfx__bar { position: relative; flex: 0 0 88px; height: 300px; display: flex; flex-direction: column-reverse; border: 1px solid var(--rule); border-radius: 0; overflow: hidden; background: #fff; }
.wfx__seg { display: flex; align-items: center; justify-content: center; overflow: hidden; transition: background .25s var(--ease); }
.wfx__seg + .wfx__seg { border-bottom: 1px solid rgba(255,255,255,.45); }
.wfx__seg--covered { background: var(--ink); }
.wfx__seg--fulcrum { background: var(--gold); }
.wfx__seg--underwater { background: rgba(123,30,34,.08); }
.wfx__seg-name { font-family: var(--sans); font-size: .6rem; letter-spacing: .04em; text-transform: uppercase; white-space: normal; text-align: center; line-height: 1.1; padding: 0 3px; overflow-wrap: break-word; }
.wfx__seg--covered .wfx__seg-name { color: var(--on-ink); }
.wfx__seg--fulcrum .wfx__seg-name { color: var(--ink); font-weight: 600; }
.wfx__seg--underwater .wfx__seg-name { color: var(--accent); opacity: .8; }
.wfx__fill { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(20,32,46,.7); transition: bottom .35s var(--ease); pointer-events: none; }
.wfx__rows { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.wfx__row { padding: 4px 0 4px 11px; border-left: 3px solid transparent; }
.wfx__row--fulcrum { border-left-color: var(--gold); }
.wfx__row--underwater { opacity: .68; }
.wfx__row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wfx__row-name { font-family: var(--sans); font-weight: 600; font-size: .92rem; color: var(--text); white-space: nowrap; }
.wfx__row-pct { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.wfx__row--underwater .wfx__row-pct { color: var(--accent); }
.wfx__row-meta { font-family: var(--sans); font-size: .76rem; color: var(--text-faint); margin-top: 1px; }
.wfx__control { margin-top: 20px; }
.wfx__slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--rule); outline: none; margin: 0; }
.wfx__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer; }
.wfx__slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer; }
.wfx__scale { display: flex; justify-content: space-between; font-family: var(--sans); font-size: .72rem; color: var(--text-faint); margin-top: 6px; }
/* Optional distressed-comps band marked on the slider track, plus footnotes. */
.wfx__track { position: relative; }
.wfx__track .wfx__slider { position: relative; z-index: 1; }
.wfx__band { position: absolute; top: 50%; transform: translateY(-50%); height: 12px; background: rgba(176,141,87,0.2); border: 1px solid rgba(176,141,87,0.5); border-radius: 6px; pointer-events: none; z-index: 0; }
.wfx__band-label { color: var(--gold); font-weight: 600; }
.wfx__notes { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
.wfx__note { font-family: var(--sans); font-size: .76rem; color: var(--text-faint); line-height: 1.55; margin: 0 0 7px; }
.wfx__note:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .wfx__viz { gap: 12px; }
  .wfx__bar { flex-basis: 58px; height: 260px; }
  /* Let long tranche names wrap on narrow screens so the recovery percentage is
     never pushed off the edge. */
  .wfx__row-name { font-size: .86rem; white-space: normal; }
  .wfx__readout { flex-wrap: wrap; gap: 4px 14px; }
}
/* Small-print footnote under an exhibit */
.detail-body .report-note { font-family: var(--sans); font-size: .78rem; color: var(--text-faint); margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); line-height: 1.55; }
.detail-sidebar { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 18px; }
.fact-card { background: #fff; border: 1px solid var(--rule); border-radius: 0; padding: 22px; box-shadow: var(--shadow-sm); }
.fact-card h4 { font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 14px; font-weight: 600; }
.fact { display: flex; flex-direction: column; padding: 10px 0; border-top: 1px solid var(--rule); }
.fact:first-of-type { border-top: 0; padding-top: 0; }
.fact__k { font-size: .74rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.fact__v { font-size: .96rem; color: var(--ink); font-weight: 500; margin-top: 2px; }
.fact__v a { color: var(--accent); }
.fact__v a:hover { text-decoration: underline; }
/* Hero byline: an understated masthead line under the report summary. */
.page-hero .report-byline { font-family: var(--sans); font-size: .82rem; font-weight: 400; letter-spacing: .03em; color: var(--on-ink-soft); margin-top: 16px; }
.page-hero .report-byline__sep { color: var(--gold); margin: 0 .15em; }

/* Deal Facts advisers grouped by the side each firm acted for. */
.fact--advisers .fact__k { margin-bottom: 8px; }
.adv-side { padding-top: 10px; }
.adv-side:first-of-type { padding-top: 4px; }
.adv-side__label { display: block; font-family: var(--sans); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); font-weight: 600; margin-bottom: 5px; }
.adv-row { display: flex; gap: 10px; padding: 2px 0; }
.adv-row__k { flex: none; width: 62px; font-size: .74rem; color: var(--text-faint); }
.adv-row__v { font-size: .92rem; color: var(--ink); font-weight: 500; }
.adv-row__v a { color: var(--accent); }
.adv-row__v a:hover { text-decoration: underline; }
.adv-role { color: var(--text-faint); font-weight: 400; }

/* Two-column body block, used for paired lists like catalysts and risks. */
.rpt-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 44px); margin: 26px 0; }
.rpt-col__h { font-family: var(--serif); font-size: 1.12rem; margin: 0 0 10px; }
.rpt-col__list { margin: 0; padding-left: 1.1rem; }
.rpt-col__list li { font-size: .95rem; color: var(--text-soft); margin-bottom: 7px; line-height: 1.5; }
.rpt-col__list li:last-child { margin-bottom: 0; }
@media (max-width: 620px) { .rpt-twocol { grid-template-columns: 1fr; gap: 22px; } }

/* Plain-text advisers map above the Summary: two columns split by a faint rule. */
.adv-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 40px); margin: 0 0 30px; padding-bottom: 26px; border-bottom: 1px solid var(--rule); }
.adv-intro__col + .adv-intro__col { border-left: 1px solid var(--rule); padding-left: clamp(20px, 4vw, 40px); }
.adv-intro__side { font-size: .96rem; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.adv-intro__line { font-size: .95rem; line-height: 1.55; color: var(--text); margin: 0 0 5px; }
.adv-intro__line:last-child { margin-bottom: 0; }
.adv-intro__role { font-weight: 600; color: var(--ink); margin-right: 6px; }
@media (max-width: 560px) {
  .adv-intro { grid-template-columns: 1fr; gap: 20px; }
  .adv-intro__col + .adv-intro__col { border-left: 0; padding-left: 0; padding-top: 20px; border-top: 1px solid var(--rule); }
}

.author-line { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.author-ava { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; font-size: .85rem; flex: none; }

/* Report hero image: darken + hover read-time overlay */
.report-hero-media { position: relative; overflow: hidden; border-radius: 0; }
.report-hero-media img { transition: filter .3s var(--ease), transform .4s var(--ease); filter: brightness(0.72); }
.report-hero-media::after {
  content: attr(data-readtime);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-ink); background: rgba(20,32,46,0.5);
  opacity: 0; transition: opacity .3s var(--ease);
}
.report-hero-media:hover img { filter: brightness(0.42); transform: scale(1.04); }
.report-hero-media:hover::after { opacity: 1; }

/* ============================================================
   INTERVIEWS
   ============================================================ */
.tab-row { display: flex; gap: 6px; border-bottom: 1px solid var(--rule); margin-bottom: 36px; flex-wrap: wrap; }
.tab { padding: 12px 18px; background: transparent; border: 0; font: inherit; font-size: .98rem; color: var(--text-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade .25s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.topic-card { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.topic-card__no { font-family: var(--sans); font-size: .76rem; color: var(--accent); }
.topic-card h3 { margin: 8px 0 8px; font-size: 1.16rem; }
.topic-card p { font-size: .9rem; color: var(--text-soft); margin: 0 0 14px; }
.topic-card details { border-top: 1px solid var(--rule); padding-top: 12px; }
.topic-card summary { font-size: .84rem; font-weight: 600; color: var(--accent); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.topic-card summary::-webkit-details-marker { display: none; }
.topic-card summary::before { content: "+"; font-family: var(--sans); }
.topic-card details[open] summary::before { content: "\2013"; }
.topic-card details p { margin-top: 10px; font-size: .88rem; }

/* ============================================================
   TEAM / CAREERS / OUR WORK
   ============================================================ */

/* Circular team layout (text + round photo, no card) */
/* Team layout — square photo, stacked text, no card.
   Rows centre their fixed-width cards and wrap after the number that fits, so the
   count reduces 4 to 3 to 2 to 1 as the viewport narrows, centred at every step. */
.team-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px 28px; }
.person { text-align: centre; width: 250px; max-width: 100%; }
.person__photo {
  width: 100%; aspect-ratio: 1; border-radius: 50%; margin-bottom: 14px;
  overflow: hidden; background: linear-gradient(160deg, var(--ink-2), var(--ink));
  display: flex; align-items: center; justify-content: center;
}
/* object-fit cover with a centred focal point fills the circle and keeps the
   subject centred whatever the source aspect ratio. */
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.person__photo span { font-family: var(--serif); font-size: 2.4rem; color: #fff; opacity: .92; }
.person__name { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); margin: 0; line-height: 1.2; }
.person__role { font-size: .86rem; color: var(--accent); font-weight: 600; margin: 5px 0 0; }
.person__uni { font-size: .8rem; color: var(--text-faint); margin: 3px 0 0; }
.section--ink .person__name { color: #fff; }
.section--ink .person__uni { color: var(--on-ink-soft); }

/* Centre the editorial tiers: eyebrows, headings, sublabels and In formation
   lines. Scoped to the tier sections, the Join Us band (.section--ink) is left
   as is. Cards stay left-aligned inside, only the group is centred. */
body[data-page="team"] .section:not(.section--ink) .container { text-align: center; }
/* A faint gold hairline runs underneath the eyebrow, like the rule under the
   header, in place of the old dash to its right. */
body[data-page="team"] .section:not(.section--ink) .eyebrow::after {
  content: ""; display: block; height: 1px;
  width: 100%; max-width: 720px; margin: 12px auto 0;
  background: rgba(176, 141, 87, 0.4);
}

.member-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.member { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.member:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.member__photo { aspect-ratio: 1; display:flex; align-items:center; justify-content:center; background: linear-gradient(160deg, var(--ink-2), var(--ink)); }
.member__photo span { font-family: var(--serif); font-size: 2.2rem; color: #fff; opacity:.92; }
.member__body { padding: 18px 18px 20px; }
.member__body h3 { font-size: 1.1rem; margin: 0; }
.member__role { color: var(--accent); font-size: .82rem; font-weight: 600; margin: 4px 0 8px; }
.member__uni { color: var(--text-faint); font-size: .82rem; }

.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); align-items: center; padding-block: clamp(36px,6vw,68px); border-top: 1px solid var(--rule); }
.feature-row:first-child { border-top: 0; }
.feature-row.flip .feature-row__media { order: 2; }
.feature-row__media { aspect-ratio: 4/3; border-radius: var(--radius-lg); border: 1px solid var(--rule); background: linear-gradient(160deg, var(--paper-2), #fff); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-sm); }
.feature-stat { font-family: var(--serif); font-size: clamp(2.4rem,6vw,4rem); color: var(--ink); }
.feature-stat small { display:block; font-family: var(--sans); font-size: .9rem; letter-spacing:.04em; text-transform:uppercase; color: var(--accent); font-weight:600; margin-top:.4rem; }

.cta-band { background: var(--accent); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); }
.cta-band .btn--ghost { color:#fff; border-color: rgba(255,255,255,.5); }
.cta-band .btn--ghost:hover { background: rgba(255,255,255,.12); border-color:#fff; }

.value-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.value { padding: 26px 24px; border:1px solid var(--rule); border-radius: 0; background:#fff; }
.value__ic { width:44px; height:44px; border-radius:8px; background: var(--accent-tint); color: var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.value h3 { font-size:1.14rem; }
.value p { font-size:.92rem; color: var(--text-soft); margin:0; }

/* Contribute accordion: full-width rows in the Lazard manner, thin rules
   between items and a chevron that flips on open. Native <details>, no JS. */
.accordion { border-top: 1px solid var(--rule); }
.accordion__item { border-bottom: 1px solid var(--rule); }
.accordion__head { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 2px; cursor:pointer; list-style:none; }
.accordion__head::-webkit-details-marker { display:none; }
.accordion__title { font-family: var(--sans); font-weight:600; font-size:1.18rem; color: var(--ink); transition: color .2s ease; }
.accordion__head:hover .accordion__title { color: var(--accent); }
.accordion__item[open] .accordion__title { color: var(--accent); }
.accordion__chev { color: var(--text-faint); flex:0 0 auto; transition: transform .25s ease; }
.accordion__item[open] .accordion__chev { transform: rotate(180deg); }
.accordion__body { padding: 0 2px 26px; max-width: 68ch; }
.accordion__body p { font-size:.98rem; color: var(--text-soft); line-height:1.62; margin:0 0 12px; }
.accordion__body p:last-child { margin-bottom:0; }
.accordion-foot { margin:28px 0 0; max-width: 72ch; font-size:.98rem; line-height:1.62; color: var(--text-soft); }

/* ---- Institutional statement + supporting points (Our Vision, Our Work) ----
   A large serif lead line with body text beneath, then a tidy column grid of
   plain header-and-text points. No card chrome, no glyph markers. Colours
   adapt on the navy (section--ink) background. */
.statement { max-width: 820px; }
.statement__lead { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 450; line-height: 1.16; margin: 0 0 1.1rem; }
.statement__body { font-size: 1.12rem; line-height: 1.62; color: var(--text-soft); max-width: 68ch; margin: 0; }
.section--ink .statement__body { color: var(--on-ink-soft); }
/* Our Vision statement runs the full container width rather than the narrow
   reading measure used elsewhere. */
#vision .statement { max-width: none; }
#vision .statement__body { max-width: none; }

.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 3.5vw, 52px); margin-top: clamp(40px, 6vw, 72px); }
.point { border-top: 1px solid var(--rule); padding-top: 20px; }
.section--ink .point { border-top-color: rgba(255,255,255,.18); }
.point__no { display: block; font-family: var(--sans); font-size: 3.12rem; font-weight: 600; letter-spacing: .02em; line-height: 1; color: var(--ink); margin-bottom: 16px; }
.point h3 { font-family: var(--serif); font-size: 1.18rem; color: var(--ink); margin: 0 0 .5rem; }
.section--ink .point h3 { color: #fff; }
.point p { font-size: .96rem; line-height: 1.6; color: var(--text-soft); margin: 0; }
.section--ink .point p { color: var(--on-ink-soft); }

/* Our Vision, Evercore-style full-bleed split: a navy pull-quote fills the left
   half, bleeding to the left page edge and running the full height of the
   section, cutting it vertically in two; the numbered goals sit on the right
   over the mist band. The section drops its own block padding so the navy
   touches top and bottom; the padding lives inside the columns instead. The DOM
   keeps the goals first (so mobile leads with them) and the quote is pulled to
   the left on desktop with order. Column inner edges line up with the container
   gutter. The navy carries a faint tower photo for texture, layered under a
   near-opaque navy wash so the colour still dominates. */
.vision-section { overflow-x: clip; }
.vision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.vision-left {
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(48px, 6vw, 80px);
  padding-right: max(28px, calc((100vw - var(--container)) / 2 + 28px));
  padding-left: clamp(32px, 4vw, 64px);
}
.vision-h { margin: 0 0 clamp(22px, 3vw, 34px); }
.points--stack { display: flex; flex-direction: column; gap: clamp(16px, 1.9vw, 24px); grid-template-columns: none; margin-top: 0; }
.points--stack .point { display: grid; grid-template-columns: auto 1fr; column-gap: clamp(16px, 1.6vw, 22px); row-gap: 2px; padding-top: clamp(14px, 1.6vw, 18px); }
.points--stack .point__no { grid-row: 1 / span 2; align-self: start; font-size: clamp(2rem, 3.4vw, 2.6rem); margin: 0; }
.points--stack .point h3 { grid-column: 2; align-self: end; margin: 0 0 .3rem; }
.points--stack .point p { grid-column: 2; }
.vision-quote {
  order: -1; /* navy to the left on desktop */
  display: flex; align-items: center; justify-content: center; text-align: center;
  background-color: var(--ink);
  background-image: linear-gradient(rgba(20, 32, 46, .86), rgba(20, 32, 46, .88)), url("../assets/backgrounds/vision-tower.jpg");
  background-size: cover; background-position: center;
  padding-block: clamp(48px, 7vw, 96px);
  padding-inline: clamp(36px, 5vw, 88px);
}
.vision-quote__inner { margin: 0; max-width: 26rem; }
.vision-quote p { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2rem, 3vw, 2.9rem); line-height: 1.28; letter-spacing: -.01em; color: #fff; margin: 0; }
.vision-quote__by { margin-top: clamp(22px, 2.6vw, 34px); font-family: var(--sans); font-style: normal; font-size: .82rem; font-weight: 500; letter-spacing: .04em; color: var(--on-ink-soft); }
@media (max-width: 820px) {
  .vision-grid { grid-template-columns: 1fr; }
  .vision-quote { order: 0; } /* natural order: goals lead on mobile */
  .vision-left { padding-left: max(28px, calc((100vw - var(--container)) / 2 + 28px)); }
  .vision-quote__inner { max-width: none; }
}
/* Link points (Our Work coverage): no card chrome, the call-to-action reads as
   plain text and turns oxblood on hover rather than carrying a permanent accent. */
.point--link { display: block; }
.point__cta { display: inline-block; margin-top: 14px; font-family: var(--sans); font-weight: 600; font-size: .9rem; color: var(--ink); transition: color .15s var(--ease); }
.point--link:hover .point__cta, .point--link:focus-visible .point__cta { color: var(--accent); }

/* ---- Regional coverage dotted map ---- */
.map-wrap { position: relative; max-width: 980px; margin: 0 auto; }
.map-wrap svg { display: block; width: 100%; height: auto; }
.map-region circle { transition: fill .2s var(--ease), opacity .2s var(--ease); }
.map-region:not([data-covered]) circle { fill: #97a1b0; opacity: .26; }
.map-region:not([data-covered]).is-active circle { opacity: .5; }
.map-region[data-covered] circle { fill: #a0855b; opacity: .92; }
.map-region[data-covered].is-active circle { fill: #c9a86b; opacity: 1; }

.map-tooltip {
  position: absolute; z-index: 5; pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  background: var(--ink-2); color: #fff; border: 1px solid var(--rule-ink);
  border-radius: 0; padding: 9px 13px; max-width: 230px;
  box-shadow: var(--shadow-md); text-align: left;
}
.map-tooltip[hidden] { display: none; }
.map-tooltip__name { display: block; font-family: var(--sans); font-size: .84rem; font-weight: 600; color: #fff; }
.map-tooltip__note { display: block; font-family: var(--sans); font-size: .76rem; color: var(--on-ink-soft); margin-top: 3px; }
.map-tooltip__note--soft { color: var(--gold); }

.map-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; justify-content: flex-start; padding: 0; margin: 22px 0 0; }
.map-legend li { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink-soft); }
.map-legend__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.map-legend__dot--gold { background: #a0855b; }
.map-legend__dot--grey { background: #97a1b0; opacity: .5; }

/* ---- Coverage layout: map left (larger), stats stacked right ---- */
.coverage-grid { display: grid; grid-template-columns: 3fr 1fr; gap: clamp(32px, 4vw, 60px); align-items: stretch; }
.coverage-map { min-width: 0; }
.coverage-stats {
  border-left: 1px solid rgba(255,255,255,.16);
  padding-left: clamp(28px, 3.5vw, 52px);
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(22px, 3vw, 38px);
}

/* Large prominent figures: light numeral, muted uppercase label beneath. Gold is
   reserved for the map coverage dots, not the stats. */
.metric { text-align: left; }
.metric__num { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1; color: #EAEEF4; }
.metric__label { font-family: var(--sans); font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--on-ink-soft); margin: 12px 0 0; }

@media (max-width: 860px) {
  .coverage-grid { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 38px); }
  .coverage-stats {
    border-left: 0; padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.16); padding-top: clamp(26px, 5vw, 34px);
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 24px;
  }
}
@media (max-width: 430px) { .coverage-stats { grid-template-columns: 1fr; } }

/* ---- Cohesive stat band ---- */
.stat-band { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.stat-band__item { padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 32px); border-left: 1px solid var(--rule); }
.stat-band__item:first-child { border-left: 0; }
.stat-band__num { font-family: var(--serif); font-weight: 600; font-size: clamp(4rem, 4vw, 5rem); color: var(--ink); line-height: 1; }
.stat-band__label { font-family: var(--sans); font-size: .8rem; letter-spacing: .03em; text-transform: uppercase; color: var(--text-faint); margin: 12px 0 0; }

/* Open-roles blocks: plain header-and-text, no card chrome, in a 2x2 grid.
   A restrained top hairline separates each block in place of a card outline. */
.role-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 38px 52px; }
.role { padding-top: 22px; border-top: 1px solid var(--rule); }
.role h3 { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 10px; }
.role p { font-size: .95rem; color: var(--text-soft); margin: 0; }

.prose { max-width: 70ch; }
.prose p { color: var(--text); }
.prose ul { color: var(--text-soft); padding-left: 1.2rem; }
.prose li { margin-bottom: .5rem; }

/* Report detail: prose and every exhibit share the one centred reading column, so
   nothing needs a separate measure or a break-out gutter any more. */
.detail-body.prose,
.detail-body.prose > * { max-width: none; }

/* ---- Deal Facts: collapsible block at the top of the report ---- */
.deal-facts { border: 1px solid var(--rule); background: #fff; margin: 0 0 36px; }
.deal-facts__summary {
  list-style: none; cursor: pointer; padding: 14px 18px;
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
}
.deal-facts__summary::-webkit-details-marker { display: none; }
.deal-facts__summary::after {
  content: ""; width: 8px; height: 8px; margin-left: 12px; flex: none;
  border-right: 1.5px solid var(--text-faint); border-bottom: 1.5px solid var(--text-faint);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.deal-facts[open] .deal-facts__summary::after { transform: rotate(-135deg); }
.deal-facts__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 28px; padding: 4px 18px 12px; border-top: 1px solid var(--rule);
}
.deal-facts__grid .fact { border-top: 0; padding: 11px 0; }
.deal-facts__grid .fact--advisers { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 14px; }
/* ---- Report intro: authors and PDF ---- */
.report-intro-meta{
  margin: 30px 0 42px;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);

  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:26px;
}

.report-intro-meta__authors h4{
  font-family: var(--sans);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin:0 0 12px;
  font-weight:600;
}

.report-intro-meta__actions{
  display:grid;
  gap:10px;
  min-width:220px;
}

/* ---- End-of-report footer: authors and actions ---- */
.report-end {
  margin-top: 54px; padding-top: 28px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-end; justify-content: space-between;
}
.report-end__authors h4 {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 12px; font-weight: 600;
}
.report-end__actions { display: grid; gap: 10px; min-width: 220px; }

/* ---- Section rail: fixed jump-nav on the right edge ---- */
.section-rail {
  position: fixed; top: 50%; right: 20px; transform: translateY(-50%);
  z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
}
.section-rail__item {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--text-faint);
}
.section-rail__label {
  font-family: var(--sans); font-size: .74rem; color: var(--ink); white-space: nowrap;
  opacity: 0; transform: translateX(6px); pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.section-rail__dash {
  display: block; width: 18px; height: 2px; background: currentColor; flex: none;
  transition: width .2s var(--ease), background .2s var(--ease);
}
.section-rail__item:hover { color: var(--ink); }
.section-rail__item:hover .section-rail__dash { width: 28px; }
.section-rail__item:hover .section-rail__label { opacity: 1; transform: none; }
.section-rail__item.is-active { color: var(--ink); }
.section-rail__item.is-active .section-rail__dash { width: 34px; background: var(--ink); }
@media (max-width: 1200px) { .section-rail { display: none; } }

.divider { height:1px; background: var(--rule); border:0; margin: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .report-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .member-grid { grid-template-columns: repeat(3, 1fr); }
  .topic-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-sidebar { position: static; order: -1; }
}
@media (max-width: 1200px) {
  .nav__menu, .nav__cta { display: none; }
  .burger { display: inline-flex; align-items: center; justify-content: center; }
  /* Mobile: a slim single row with the wordmark and burger. The full nav lives in
     the overlay, and the grey rule is dropped. */
  .mast__nav, .mast__rule { display: none; }
  .mast { padding-block: 0; grid-template-columns: 1fr; }
  .mast__bar { height: var(--header-h); }
  .mast__brand .brand__mark { font-size: 1.5rem; }
  .site-header.is-collapsed .mast { height: var(--header-h); }
  .vision-grid { grid-template-columns: 1fr; }
  .newsletter__inner { grid-template-columns: 1fr; }
  .feature-row, .feature-row.flip .feature-row__media { grid-template-columns: 1fr; order: 0; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .container { padding-inline: 20px; }
  .report-grid, .report-grid.cols-2, .value-grid, .role-grid, .topic-grid { grid-template-columns: 1fr; }
  .points { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: 1fr; }
  .stat-band__item { border-left: 0; border-top: 1px solid var(--rule); }
  .stat-band__item:first-child { border-top: 0; }
  .logo-grid, .member-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero__stats { gap: 26px; }
  .library-head { flex-direction: column; align-items: stretch; }
  .search { min-width: 0; }
  /* The joined bar stacks vertically on narrow screens. The shared hairline
     moves from the vertical seams to the horizontal ones. */
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar > * + * { margin-left: 0; margin-top: -1px; }
}

/* ---- Interactive charts (report body) ---- */
.fl-chart {
  margin: 32px 0;
  padding: 20px 20px 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.fl-chart__title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.fl-chart__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin-bottom: 16px;
}
/* Chart tabs read as underlined text filters, consistent with the table and
   recovery tabs and the report-library filters, not pills. */
.fl-chart__tab {
  padding: 4px 0 8px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-soft);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color .15s var(--ease), box-shadow .15s var(--ease);
}
.fl-chart__tab:hover { color: var(--ink); }
.fl-chart__tab.is-active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ul-on-light); }
/* Inter reads a touch loose on small UI; tighten the pill tabs and the filter
   pills so they read tight and intentional. Eyebrows and body text untouched. */
.report-table__tab, .wfx__tab, .fl-chart__tab, [data-chips] .tag { letter-spacing: -0.008em; }
.fl-chart__panels { position: relative; }
.fl-chart__panel { display: none; height: 340px; }
.fl-chart__panel.is-active { display: block; }
.fl-chart__panel canvas { width: 100% !important; height: 100% !important; }
.fl-chart__note {
  margin: 14px 0 0;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--text-faint, #7C8794);
}
@media (max-width: 600px) {
  .fl-chart { padding: 16px 14px 14px; }
  .fl-chart__panel { height: 280px; }
}

/* ---- Scroll reveal ----
   JS adds .js-reveal to the body once it is running and IntersectionObserver
   is available, so without JS (or if it fails) nothing is ever hidden.
   Transforms and opacity only, for a GPU-friendly fade and rise. */
.js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity .3s ease-out, transform .3s ease-out; }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
/* Hero entrance: hidden and animated purely from CSS, gated on .js-reveal which a
   tiny inline head script sets on the document element before first paint, so the
   hero starts hidden from the first frame with no visible-then-hidden flash. It
   plays even if the main script never loads, so the hero is never left hidden.
   A top-down cascade: heading first, then the descriptive text, then actions and
   stats. The both fill mode holds the hidden state through each stagger delay. */
@keyframes flHeroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.js-reveal .hero__inner > *,
.js-reveal .page-hero > .container > * { animation: flHeroIn .4s ease-out both; }
.js-reveal .hero__inner > .hero__tag,
.js-reveal .hero__inner > .hero__sub,
.js-reveal .page-hero > .container > .lede { animation-delay: .13s; }
.js-reveal .hero__inner > .hero__actions,
.js-reveal .hero__inner > .hero__stats { animation-delay: .26s; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
}

body[data-page="team"] .section {
  padding: 40px 0;
}