/*
 * Local fix overrides for the Acumen Holding replica.
 * -------------------------------------------------------------------------
 * Navbar jitter fix:
 * The header's utility bar (Careers / FAQ / In the Press) collapses from 40px
 * to 0 once the page is scrolled past 24px. That bar lives inside the
 * `sticky top-0` wrapper at the very top of the document flow, so collapsing
 * it removes 40px of content ABOVE the current scroll position. With the
 * browser's default scroll anchoring enabled, the viewport's scrollY is then
 * readjusted to keep content stable — which pushes scrollY back across the
 * 24px threshold, re-expanding the bar, which moves scrollY again... an
 * infinite feedback loop that shows up as the navbar bouncing up and down.
 *
 * Disabling scroll anchoring stops the browser from compensating for the
 * bar's height change, so the collapse plays its 200ms transition once and
 * settles instead of oscillating.
 */
html {
  overflow-anchor: none;
  scroll-behavior: smooth;
}

/*
 * In-page anchor offset
 * -------------------------------------------------------------------------
 * The hero "Explore our services" button jumps to #our-subsidiaries. Add a
 * scroll-margin so the sticky header doesn't cover the section heading.
 */
#our-subsidiaries {
  scroll-margin-top: 120px;
}

/*
 * Latest News horizontal scroller
 * -------------------------------------------------------------------------
 * The home "Latest News" band is a horizontally scrollable strip of all
 * articles. Add smooth touch momentum and a subtle gold scrollbar.
 */
.insights-scroller {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-color: color-mix(in oklch, var(--gold) 45%, transparent) transparent;
}

/*
 * About Us — History timeline (custom, not Tailwind utilities)
 * -------------------------------------------------------------------------
 * A vertical chronological timeline. The connecting spine deepens in tone
 * from the founding year to today (a quiet progression cue), the two anchor
 * moments (2010, Today) are larger haloed gold nodes with an italic marker,
 * and the six phases sit as solid gold nodes. Titles use the site's Fraunces
 * display face. All positioning is explicit so it renders regardless of which
 * Tailwind classes are compiled into the main bundle.
 */
.acmtl {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 860px;
}
.acmtl-item {
  position: relative;
  padding: 0 0 clamp(1.6rem, 3vw, 2.4rem) 2.5rem;
}
.acmtl-item:last-child {
  padding-bottom: 0;
}
/* connecting spine segment between consecutive nodes */
.acmtl-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0.55rem;
  bottom: 0;
  width: 2px;
  background: color-mix(in oklch, var(--gold) 55%, transparent);
}
/* spine deepens over time */
.acmtl-item:nth-child(1)::before { background: color-mix(in oklch, var(--gold) 30%, transparent); }
.acmtl-item:nth-child(2)::before { background: color-mix(in oklch, var(--gold) 40%, transparent); }
.acmtl-item:nth-child(3)::before { background: color-mix(in oklch, var(--gold) 50%, transparent); }
.acmtl-item:nth-child(4)::before { background: color-mix(in oklch, var(--gold) 60%, transparent); }
.acmtl-item:nth-child(5)::before { background: color-mix(in oklch, var(--gold) 70%, transparent); }
.acmtl-item:nth-child(6)::before { background: color-mix(in oklch, var(--gold) 80%, transparent); }
.acmtl-item:nth-child(7)::before { background: color-mix(in oklch, var(--gold) 92%, transparent); }
.acmtl-node {
  position: absolute;
  left: 2.5px;
  top: 0.4rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold);
  z-index: 1;
}
.acmtl-anchor .acmtl-node {
  left: -1px;
  top: 0.3rem;
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 5px color-mix(in oklch, var(--gold) 16%, transparent);
}
.acmtl-content {
  min-width: 0;
}
.acmtl-mark {
  display: block;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  letter-spacing: 0.01em;
  color: var(--gold-deep);
  margin-bottom: 0.3rem;
}
.acmtl-title {
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.55vw, 1.55rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--charcoal);
}
.acmtl-now .acmtl-title {
  color: var(--gold-deep);
}
.insights-scroller::-webkit-scrollbar {
  height: 8px;
}
.insights-scroller::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--gold) 40%, transparent);
  border-radius: 999px;
}
.insights-scroller::-webkit-scrollbar-track {
  background: transparent;
}

/*
 * Founder headshot (Rana Adawi)
 * -------------------------------------------------------------------------
 * Rana's transparent cutout sits at the top of the text column (above the
 * eyebrow/quote) with NO background panel, so it blends directly into the dark
 * charcoal band. It spans the full width of the paragraph container, and a
 * bottom mask fades the torso edge into the background for a seamless
 * transition into the heading below.
 */
/*
 * The band is full-bleed, so its text uses a custom left pad that doesn't line
 * up with the .container-page every other section uses. Re-derive the same left
 * offset — max(0, (contentWidth - container-max)/2) + gutter — where content
 * width excludes the scrollbar (--sbw, set by enhancements.js) so Rana and the
 * founder copy align vertically with the sections above and below.
 */
.leader-band-text {
  padding-left: calc(max(0px, (100vw - var(--sbw, 0px) - var(--container-max)) / 2) + var(--gutter-x)) !important;
}
.leader-band-headshot {
  margin: 0 0 1.75rem;
}
.leader-band-headshot img {
  width: clamp(200px, 55%, 320px);
  height: auto;
  display: block;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}
/* On stacked (single-column) phone layouts, centre Rana's cutout instead of
   leaving it hugging the left text edge. Matches the band's 900px breakpoint. */
@media (max-width: 900px) {
  .leader-band-headshot img {
    margin-inline: auto;
  }
}
/* Brokerage — "Trading philosophy" band recoloured from the dark grey block to
   the standard light warm-gold ground used across the site. Text is darkened
   for contrast on the light ground (the emphasised phrase stays deep gold). */
.brk-philosophy-gold {
  background: linear-gradient(180deg, #f7f4ea 0%, #f1ecdc 100%);
}
.brk-philosophy-gold blockquote {
  color: var(--ink, #2e2e2e);
}
.brk-philosophy-gold span[style*="gold-bright"] {
  color: var(--gold-deep, #877949) !important;
}
.brk-philosophy-gold .text-muted-foreground {
  color: color-mix(in oklch, var(--charcoal, #1f1f1f) 55%, transparent);
}
/* Careers — empty/loading state for the roles list when the ATS returns no
   roles or is unreachable (replaces the old static fallback). */
.crs-role.crs-role--empty {
  display: block;
  border: none;
  padding: 1.75rem 0;
}
.crs-role.crs-role--empty .crs-role-meta {
  margin: 0;
  color: color-mix(in oklch, var(--charcoal, #1f1f1f) 55%, transparent);
}
/*
 * Size the founder band to a full viewport on desktop (the content is
 * vertically centred within it). min-height only — a fixed height clamps the
 * grid below its content on narrower desktop widths (~1100–1450px), where the
 * text column wraps taller than 100svh and spills over the Latest News
 * section below. Left to auto-height on <=900px where the columns stack.
 */
@media (min-width: 901px) {
  .leader-band-grid {
    min-height: 100svh !important;
  }
}

/*
 * Primary gold
 * -------------------------------------------------------------------------
 * Set the website's primary gold to #B0A06C. This overrides both the base
 * `--gold` (#aa9b6b) and its wide-gamut lab() variant in the main stylesheet;
 * because fixes.css is linked last, this :root rule wins by source order.
 * Local per-component --gold overrides (e.g. the footer) are left intact.
 */
:root {
  --gold: #B0A06C;
  /* ==DESIGN-POLISH== warm the ground: --paper resolved to clinical #fff
     everywhere, so sections read flat and white-on-white cards had no depth.
     A warm ivory-white keeps full contrast for ink text (and is imperceptible
     where --paper is used as near-white text on dark grounds) while letting
     true-white cards lift off the page. */
  --paper: #FAF8F2;
}

/*
 * Color changes
 * -------------------------------------------------------------------------
 * 1. Navbar takes the footer's former dark color (--surface-ink, #2a2a2a).
 *    All headers render data-theme="dark" (light text), so a solid dark bar
 *    keeps text readable in every state (transparent-over-hero, scrolled, and
 *    the inner-page #3E3E3E). The hero gradient overlay is hidden since the
 *    bar is now opaque.
 * 2. Footer becomes light (#FBFAF3); its text/dividers/controls flip to dark
 *    for contrast, pairing with the new black text logo.
 */

/* --- Full-width navbar: logo hard-left, Contact us hard-right --- */
.sticky.top-0.z-50 .container-page {
  max-width: none !important;
  padding-inline: clamp(1.25rem, 2.5vw, 2.5rem) !important;
}

/* --- Navbar: former footer color --- */
.sticky.top-0.z-50 > [data-theme="dark"] {
  background-color: #2a2a2a !important;
}
.sticky.top-0.z-50 > header {
  border-bottom-color: rgba(243, 238, 216, 0.14) !important; /* faint cream hairline */
}
.sticky.top-0.z-50 > div[aria-hidden="true"].pointer-events-none {
  display: none !important; /* hero fade overlay no longer needed under an opaque bar */
}

/* --- Footer: light theme (#FBFAF3) --- */
footer[role="contentinfo"] {
  background-color: #FBFAF3 !important;
  color: var(--charcoal) !important;
}
/* column links + contact (email/phone/address) */
footer[role="contentinfo"] nav a {
  color: var(--charcoal);
}
footer[role="contentinfo"] nav a:hover {
  color: #7d714c;
}
/* column headings */
footer[role="contentinfo"] nav h2 {
  color: #7d714c !important;
}
/* tagline, legal text, copyright, address */
footer[role="contentinfo"] p,
footer[role="contentinfo"] address {
  color: rgba(31, 31, 31, 0.66) !important;
}
/* hairline dividers */
footer[role="contentinfo"] [aria-hidden="true"].bg-white\/10 {
  background-color: rgba(31, 31, 31, 0.12) !important;
}
/* "Back to the top" outline button */
footer[role="contentinfo"] button[aria-label="Back to the top"] {
  border-color: var(--charcoal) !important;
  color: var(--charcoal) !important;
}
footer[role="contentinfo"] button[aria-label="Back to the top"]:hover {
  background-color: var(--charcoal) !important;
  color: #FBFAF3 !important;
}
/* social icons (outside <nav>): keep deep gold, darken on hover */
footer[role="contentinfo"] ul:not(.space-y-1) a {
  color: #7d714c;
}
footer[role="contentinfo"] ul:not(.space-y-1) a:hover {
  color: var(--charcoal);
}

/*
 * Stats grid glow
 * -------------------------------------------------------------------------
 * Place a soft, warm "shining" gradient behind the 2x2 key-stats grid
 * (AUM / Founded / Experience / Companies covered) on the homepage. A
 * ::before pseudo-element sits behind the cells (z-index:-1) so it reads as
 * a diffuse light source without touching the hairline crosshair dividers.
 * The glow is anchored slightly above-left of centre so the light appears to
 * fall across the figures, and it's tinted with the site's primary gold.
 */
.about-stats-grid {
  position: relative;
  isolation: isolate;
}
.about-stats-grid::before {
  content: "";
  position: absolute;
  inset: -14% -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      58% 62% at 50% 50%,
      rgba(176, 160, 108, 0.22) 0%,
      rgba(176, 160, 108, 0.10) 42%,
      rgba(176, 160, 108, 0.03) 66%,
      transparent 80%
    );
  filter: blur(4px);
}

/*
 * About Us — metrics as separate boxes
 * -------------------------------------------------------------------------
 * On the About page the 2x2 metrics block (.about-stats-col) draws a single
 * connected crosshair via ::before / ::after and offsets each cell from the
 * centre lines with asymmetric padding. Here we turn each metric into its own
 * self-contained bordered box instead: hide the crosshair, add a gap between
 * cells, and give every cell a full gold hairline border with even padding.
 */
.about-stats-col {
  gap: 1rem;
  /* Keep the base grid (2 equal columns, 2 equal 1fr rows, height:100%): with
     the overview grid's align-items:stretch, the block fills the left column's
     height and all four cells come out the same size. */
}
.about-stats-col::before,
.about-stats-col::after {
  display: none !important;
}
.about-stats-col > .about-stat-cell-v {
  border: 1px solid var(--hairline-gold);
  border-radius: 3px;
  padding: 1.5rem !important; /* even padding, overrides the nth-child centre-line offsets */
  justify-content: center;
}
/* Perfect squares that also fill the left column's height: the block height
   equals the left column's height (align-items:stretch), and a cell is square
   when the metrics column width equals that height. The left column settles at
   548px once the right column takes 548px, so 548px is the fixed point
   (266px squares -> 2*266 + 16px gap = 548px = left column height). */
@media (min-width: 1024px) {
  .about-overview-grid {
    grid-template-columns: minmax(0, 1fr) 548px !important;
  }
}

/*
 * About Us — alternating section backgrounds
 * -------------------------------------------------------------------------
 * Every mid-page section resolved to pure white (both --paper and --off-white
 * map to #fff), so the page read as one flat white band between the dark hero
 * and dark CTA. Introduce a gentle warm rhythm by tinting alternating
 * sections with soft ivory / sand tones while leaving the others white:
 *
 *   hero (dark) → white → ivory → white → sand → CTA (dark)
 *
 * Each section is wrapped in an anchor <div id="..."> that holds its own
 * <section>; the <section> is what paints the background, so we tint that.
 * Content -> anchor id mapping on this page:
 *   #overview          "A global investment firm" (metrics)  -> white
 *   #philosophy        "Three attributes that guide..."       -> ivory
 *   #our-subsidiaries  "Explore our subsidiaries"             -> white
 *   #why-acumen        "Built on five principles"             -> sand
 *   #faq               FAQ accordion                          -> white
 *
 * Scoped under #main:has(#philosophy): that anchor id is rendered only on the
 * About route, so other pages that reuse generic ids (e.g. #faq) are left
 * untouched. Selectors match the same markup in both the pre-rendered HTML
 * and the client-rendered tree, so the rhythm holds after SPA navigation too.
 */
#main:has(#philosophy) #philosophy section,
#main:has(#philosophy) #why-acumen section {
  background: linear-gradient(180deg, #ECE7D7 0%, #E1DAC5 100%); /* lighter warm sand, subtle gradient */
  /* Anchor the gradient to the viewport so both sections render identically
     regardless of their (differing) heights — otherwise the taller
     #why-acumen section stretches the gradient and looks like a different tone. */
  background-attachment: fixed;
}

/*
 * Why Acumen — six-principle grid
 * -------------------------------------------------------------------------
 * The base grid centres a trailing row of two cards (items 4 & 5) for the
 * old five-principle layout via explicit grid-column starts. Now that a sixth
 * principle ("Long-Term by Design") has been added, reset those overrides so
 * all six cards flow into an even 3x2 grid (each spans 2 of 6 columns, so
 * three per row). Only applies at the >=768px breakpoint where the grid is
 * six columns; below that the cards stack in a single column unchanged.
 */
@media (min-width: 768px) {
  #why-acumen .why-acumen-grid > *:nth-child(4),
  #why-acumen .why-acumen-grid > *:nth-child(5) {
    grid-column: span 2;
  }
}

/*
 * Footer legal bar — full-bleed
 * -------------------------------------------------------------------------
 * Push the copyright to the far left and the Terms/Privacy links to the far
 * right by letting the footer's .container-page span the full width (the row
 * already uses justify-between). Mirrors the full-width navbar treatment.
 */
footer[role="contentinfo"] .container-page {
  max-width: none !important;
  padding-inline: clamp(1.25rem, 2.5vw, 2.5rem) !important;
}

/*
 * Leadership — uniform headshot framing on the About Us hub. contain (not
 * cover): the wide 3-up board cards would otherwise zoom-crop the portraits;
 * the full photo fits inside the frame, anchored to the card's bottom edge.
 */
#leadership .aspect-\[4\/5\] img {
  object-fit: contain;
  object-position: bottom center;
}

/*
 * History timeline — per-event description text.
 */
.acmtl-desc {
  margin: 0.55rem 0 0;
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  line-height: 1.62;
  color: rgba(31, 31, 31, 0.64);
  max-width: 62ch;
}
.acmtl-item { padding-bottom: clamp(2rem, 3.4vw, 2.9rem); }

/* ==ACM2== About Acumen v2 sections== */
.acm2{padding-block:clamp(3.5rem,6vw,6rem)}
.acm2-statementband{background:#fff}
.acm2-statementband.acm2-alt{background:linear-gradient(180deg,#ECE7D7 0%,#E1DAC5 100%)}
/*
 * Discretionary Mandates page — dark, editorial "mandate ledger".
 * Four advisory disciplines separated by hairline rules, then a value ladder
 * whose gold bars climb (staggered on load) to an oversized Fraunces ROI.
 */
.amd-eyebrow{font-family:Inter,sans-serif;text-transform:uppercase;font-weight:600;font-size:11px;letter-spacing:.24em;color:var(--gold)}
.amd-h{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.08;letter-spacing:-.015em;color:var(--gold-soft);margin:.7rem 0 0}
.amd-sub{font-size:clamp(.98rem,1.2vw,1.1rem);line-height:1.6;color:rgba(255,255,255,.58);margin:.9rem 0 0;max-width:62ch}
/* Core Advisory — four practice areas */
.amd-grid4{display:grid;grid-template-columns:1fr;margin-top:clamp(2.5rem,4vw,3.5rem);border-top:1px solid var(--amd-hair,rgba(255,255,255,.12))}
@media(min-width:640px){.amd-grid4{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,3rem)}}
@media(min-width:1080px){.amd-grid4{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:0}}
.amd-col{padding:clamp(1.6rem,2.4vw,2.25rem) 0 clamp(1.9rem,2.6vw,2.5rem);border-bottom:1px solid var(--amd-hair,rgba(255,255,255,.1))}
.amd-col:last-child{border-bottom:none}
@media(min-width:640px) and (max-width:1079.98px){.amd-col:nth-last-child(-n+2){border-bottom:none}}
@media(min-width:1080px){.amd-col{border-bottom:none;border-right:1px solid var(--amd-hair,rgba(255,255,255,.1));padding-inline:clamp(1.6rem,1.9vw,2.25rem)}.amd-col:first-child{padding-left:0}.amd-col:last-child{border-right:none;padding-right:0}}
/* light scheme (white background) */
/*
 * amd-gold — the Notable Mandates ledger on a light gold (--gold-soft) band
 * instead of the dark surface-ink. Every white-on-dark color in the ledger
 * flips to its ink-on-gold counterpart; the bars keep their gold gradient
 * over a deepened track so they still read.
 */
.amd-gold{background:var(--gold-soft)}
.amd-gold .amd-eyebrow{color:var(--gold-deep)}
.amd-gold .amd-h{color:var(--charcoal)}
.amd-gold .amd-summary{color:color-mix(in oklch,var(--ink) 82%,transparent)}
.amd-gold .amd-summary b{color:var(--gold-deep)}
.amd-gold .amd-ledger{border-top-color:color-mix(in oklch,var(--ink) 22%,transparent)}
.amd-gold .amd-row{border-bottom-color:color-mix(in oklch,var(--ink) 14%,transparent)}
.amd-gold .amd-co-name{color:var(--charcoal)}
.amd-gold .amd-co-desc{color:color-mix(in oklch,var(--ink) 64%,transparent)}
.amd-gold .amd-bar-wrap{background:color-mix(in oklch,var(--gold-deep) 20%,transparent)}
.amd-gold .amd-bar{background:linear-gradient(90deg,color-mix(in oklch,var(--gold-deep) 78%,transparent),var(--gold))}
.amd-gold .amd-roi{color:var(--gold-deep)}
.amd-gold .amd-roi--adv{color:color-mix(in oklch,var(--ink) 55%,transparent)}
.amd-light{--amd-hair:color-mix(in oklch,var(--ink) 12%,transparent)}
.amd-light .amd-h{color:var(--charcoal)}
.amd-light .amd-sub{color:color-mix(in oklch,var(--ink) 66%,transparent)}
.amd-light .amd-title{color:var(--charcoal)}
.amd-light .amd-list li{color:color-mix(in oklch,var(--ink) 72%,transparent)}
.amd-tag{display:inline-block;font-family:Inter,sans-serif;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--charcoal);background:var(--gold);padding:.28rem .5rem;border-radius:2px}
.amd-title{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.18;color:var(--cream);margin:.95rem 0 1.15rem}
.amd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem}
.amd-list li{position:relative;padding-left:1.05rem;font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.6)}
.amd-list li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
/* Notable Mandates — value ladder */
.amd-summary{margin-top:1.5rem;font-family:"Fraunces",Georgia,serif;font-weight:300;font-size:clamp(1.15rem,1.7vw,1.55rem);line-height:1.45;color:rgba(255,255,255,.74);max-width:44ch}
.amd-summary b{color:var(--gold);font-weight:500}
.amd-ledger{margin-top:clamp(2.5rem,4vw,3.25rem);border-top:1px solid rgba(255,255,255,.14)}
.amd-row{display:grid;grid-template-columns:1fr auto;gap:.7rem 1.5rem;align-items:center;padding:clamp(1.35rem,2.2vw,1.9rem) 0;border-bottom:1px solid rgba(255,255,255,.1)}
@media(min-width:820px){.amd-row{grid-template-columns:minmax(190px,1fr) minmax(0,1.7fr) 118px}}
.amd-row:last-child{border-bottom:none}
.amd-co-name{font-family:"Fraunces",Georgia,serif;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.2;color:var(--cream)}
.amd-co-desc{font-size:.82rem;line-height:1.45;color:rgba(255,255,255,.46);margin-top:.34rem}
.amd-bar-wrap{grid-column:1/-1;height:8px;background:rgba(176,160,108,.14);border-radius:2px;overflow:hidden}
@media(min-width:820px){.amd-bar-wrap{grid-column:auto}}
.amd-bar{display:block;height:100%;background:linear-gradient(90deg,color-mix(in oklch,var(--gold) 52%,transparent),var(--gold-bright,#c4b078));border-radius:2px}
.amd-roi{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:.95;letter-spacing:-.02em;color:var(--gold);text-align:right}
.amd-roi--adv{font-family:Inter,sans-serif;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4)}

.acm2-values{background:#fff}
.acm2-why{background:linear-gradient(180deg,#F7F4EA 0%,#F1ECDC 100%)}
.acm2-eyebrow{display:inline-flex;align-items:center;gap:.75rem;line-height:1;margin-bottom:1.25rem}
.acm2-flag{display:inline-block;width:28px;height:10px;background:var(--gold);clip-path:polygon(0 0,100% 0,82% 100%,0 100%)}
.acm2-eyebrow>span:last-child{font-family:var(--font-sans,Inter,sans-serif);text-transform:uppercase;font-weight:600;font-size:12px;letter-spacing:.18em;color:var(--gold)}
.acm2-wrap{max-width:940px}
.acm2-statement{font-weight:400;font-size:clamp(1.75rem,3.6vw,3rem);line-height:1.1;letter-spacing:-.025em;color:var(--ink);max-width:22ch}
.acm2-lede{margin-top:1.25rem;font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.65;color:color-mix(in oklch,var(--ink) 72%,transparent);max-width:70ch}
.acm2-h2{font-weight:400;font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.12;letter-spacing:-.02em;color:var(--ink)}
.acm2-values-grid{margin-top:clamp(2.5rem,4vw,3.5rem);display:grid;grid-template-columns:1fr;gap:1px;background:color-mix(in oklch,var(--gold) 16%,transparent);border:1px solid color-mix(in oklch,var(--gold) 16%,transparent)}
@media(min-width:640px){.acm2-values-grid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.acm2-values-grid{grid-template-columns:1fr 1fr 1fr}}
.acm2-value{background:#fff;padding:clamp(1.5rem,2.4vw,2.1rem)}
.acm2-value-num{font-size:1rem;letter-spacing:.05em;color:var(--gold)}
.acm2-value-title{margin-top:.65rem;font-weight:400;font-size:clamp(1.15rem,1.7vw,1.4rem);letter-spacing:-.01em;color:var(--ink)}
.acm2-value-desc{margin-top:.6rem;font-size:.95rem;line-height:1.6;color:color-mix(in oklch,var(--ink) 66%,transparent)}
.acm2-why-grid{margin-top:clamp(2.5rem,4vw,3.5rem);display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,4vw,4rem);align-items:start}
@media(min-width:960px){.acm2-why-grid{grid-template-columns:1.15fr .85fr}}
.acm2-subeyebrow{font-family:var(--font-sans,Inter,sans-serif);text-transform:uppercase;font-weight:600;font-size:11px;letter-spacing:.2em;color:var(--gold);margin-bottom:.9rem}
.acm2-subh{font-weight:400;font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.01em;color:var(--ink);margin-bottom:1.75rem}
.acm2-pillars{display:grid;grid-template-columns:1fr;gap:1.4rem 2rem}
@media(min-width:560px){.acm2-pillars{grid-template-columns:1fr 1fr}}
.acm2-pillar{border-top:1px solid color-mix(in oklch,var(--gold) 28%,transparent);padding-top:.85rem}
.acm2-pillar-num{font-size:.85rem;letter-spacing:.05em;color:var(--gold)}
.acm2-pillar-txt{margin-top:.4rem;font-size:.95rem;line-height:1.5;color:color-mix(in oklch,var(--ink) 74%,transparent)}
.acm2-donut-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.5rem,3vw,2.5rem)}
.acm2-donut{width:clamp(200px,24vw,264px);aspect-ratio:1;border-radius:50%;-webkit-mask:radial-gradient(transparent 55%,#000 56%);mask:radial-gradient(transparent 55%,#000 56%);flex:none}
.acm2-legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:.55rem;min-width:190px}
.acm2-legend-item{display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:color-mix(in oklch,var(--ink) 78%,transparent)}
.acm2-swatch{width:12px;height:12px;border-radius:2px;flex:none}

/* ==ACM2 refinements== alignment & spacing (About Acumen v2) */
/* Vision / Mission: editorial two-column — label left, statement+lede right */
@media (min-width: 900px) {
  .acm2-statementband .acm2-wrap {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    row-gap: 1.35rem;
    max-width: 1120px;
    align-items: start;
  }
  .acm2-statementband .acm2-eyebrow { grid-column: 1; grid-row: 1; margin: 0; padding-top: 0.4rem; }
  .acm2-statementband .acm2-statement { grid-column: 2; grid-row: 1; margin: 0; max-width: 22ch; }
  .acm2-statementband .acm2-lede { grid-column: 2; grid-row: 2; margin: 0; max-width: 60ch; }
}
/* Why Acumen — sector focus: donut above a compact two-column legend */
.acm2-donut-wrap { flex-direction: column; align-items: flex-start; gap: 1.75rem; }
.acm2-legend { grid-template-columns: 1fr 1fr; gap: 0.6rem 1.5rem; }

/*
 * Why Acumen — "Where we deploy" sector focus list
 * -------------------------------------------------------------------------
 * Hairline-separated rows, one refined gold line-icon per sector (weights
 * intentionally not shown).
 */
.acm2-sec-list {
  list-style: none; margin: 0; padding: 0;
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column;
}
.acm2-sec {
  display: flex; align-items: center; gap: .95rem;
  padding: .72rem 0;
  border-bottom: 1px solid color-mix(in oklch, var(--ink) 10%, transparent);
}
.acm2-sec:first-child { border-top: 1px solid color-mix(in oklch, var(--ink) 10%, transparent); }
.acm2-sec-ic {
  display: inline-flex; flex: none;
  color: var(--gold-deep, #877949);
  transition: color .2s ease;
}
.acm2-sec-ic svg { width: 19px; height: 19px; }
.acm2-sec-name { font-size: .92rem; color: color-mix(in oklch, var(--ink) 80%, transparent); }
.acm2-sec:hover .acm2-sec-ic { color: var(--gold, #b0a06c); }

/*
 * What We Do — 03 · Group Structure ("How Acumen is Structured.")
 * -------------------------------------------------------------------------
 * Org diagram on the light ivory band: parent card centred, thin connector
 * stem + crossbar, three subsidiary cards with gold top bars and a small
 * stat ledger each. Connectors hide on mobile where the cards stack.
 */
.wwd-gs {
  background: linear-gradient(180deg, #F7F4EA 0%, #F1ECDC 100%);
  border-top: 1px solid color-mix(in oklch, var(--gold) 18%, transparent);
}
.wwd-gs-h2 {
  font-weight: 400;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink, #1f1f1f);
}
.wwd-gs-lede {
  margin-top: 1rem;
  font-size: clamp(.95rem, 1.1vw, 1.0625rem); line-height: 1.65;
  color: color-mix(in oklch, var(--ink) 70%, transparent);
  max-width: 70ch;
}
.wwd-gs-tree { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.wwd-gs-parent {
  width: min(420px, 100%); margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(31, 31, 31, .14);
  border-top: 4px solid var(--gold, #b0a06c);
  padding: 1.35rem 1.75rem 1.5rem;
  text-align: center;
  box-shadow: 0 1px 2px rgba(31, 31, 31, .05), 0 14px 32px -22px rgba(31, 31, 31, .2);
}
.wwd-gs-tag {
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 10px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep, #877949);
}
.wwd-gs-name {
  margin-top: .45rem;
  font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  line-height: 1.15; letter-spacing: -.01em;
  color: var(--ink, #1f1f1f);
}
.wwd-gs-stem {
  width: 1px; height: 30px; margin: 0 auto;
  background: color-mix(in oklch, var(--ink) 35%, transparent);
}
.wwd-gs-cross { display: none; }
.wwd-gs-subs {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 1.25rem;
}
@media (min-width: 768px) {
  .wwd-gs-cross {
    display: block; position: relative;
    height: 30px; margin: 0 25%;
    border-top: 1px solid color-mix(in oklch, var(--ink) 35%, transparent);
    border-left: 1px solid color-mix(in oklch, var(--ink) 35%, transparent);
    border-right: 1px solid color-mix(in oklch, var(--ink) 35%, transparent);
  }
  .wwd-gs-cross::after {
    content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
    width: 1px;
    background: color-mix(in oklch, var(--ink) 35%, transparent);
  }
  .wwd-gs-subs { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
@media (min-width: 1024px) {
  /* four arms across on desktop; connector spans the outer card centres */
  .wwd-gs-cross { margin: 0 12.5%; }
  .wwd-gs-subs { grid-template-columns: repeat(4, 1fr); }
}
.wwd-gs-card {
  background: #fff;
  border: 1px solid rgba(31, 31, 31, .14);
  border-top: 4px solid var(--gold, #b0a06c);
  padding: 1.4rem 1.5rem 1.5rem;
  box-shadow: 0 1px 2px rgba(31, 31, 31, .05), 0 14px 32px -22px rgba(31, 31, 31, .2);
}
.wwd-gs-card .wwd-gs-name { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.wwd-gs-stats {
  margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid rgba(31, 31, 31, .1);
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
}
.wwd-gs-num {
  display: block;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1; letter-spacing: -.01em;
  color: var(--gold-deep, #877949);
  white-space: nowrap;
}
.wwd-gs-lbl {
  display: block; margin-top: .35rem;
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in oklch, var(--ink) 50%, transparent);
}

/* Pillars — ledger refinement: short gold tick over each rule, quieter
   tabular numerals, slightly stronger text */
.acm2-pillar { position: relative; }
.acm2-pillar::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 26px; height: 2px; background: var(--gold);
  transition: width .3s ease;
}
.acm2-pillar:hover::before { width: 44px; }
.acm2-pillar-num {
  font-variant-numeric: tabular-nums;
  font-size: .8rem; letter-spacing: .08em;
  color: var(--gold-deep, #877949);
}
.acm2-pillar-txt { color: color-mix(in oklch, var(--ink) 82%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .acm2-pillar::before { transition: none; }
}
/* Values — tighten heading→grid rhythm a touch */
.acm2-values-grid { margin-top: clamp(2rem, 3vw, 2.75rem); }

/* Utility strip above the navbar: the old Careers/FAQ/Press variant is
   hidden; next-enhancements.js replaces every page's strip with one
   standardized social bar (#acm-social-bar), so the 40px strip exists on
   every page at lg and the original top-[120px] sub-nav offsets hold. */
.sticky.top-0.z-50 div:has(> .container-page nav[aria-label="Utility"]) {
  display: none !important;
}
#acm-social-bar {
  position: relative; z-index: 10;
  display: none;
  background: var(--utility-bar, #2a2a2a);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
@media (min-width: 1024px) {
  #acm-social-bar { display: block; }
}
.acm-social-row {
  height: 40px;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 22px;
}
.acm-social-row a {
  display: inline-flex; align-items: center;
  color: color-mix(in oklch, var(--gold, #b0a06c) 72%, transparent);
  transition: color .2s ease, transform .2s ease;
}
.acm-social-row a:hover {
  color: var(--gold-bright, #c4b078);
  transform: translateY(-1px);
}
.acm-social-row svg { width: 15px; height: 15px; }

/* Media pages (News / In the Press / Awards) — dark animated hero band:
   charcoal ground with the site's gold pinstripe drift + light sweep
   (.acm-anim-band), content aligned to container-page like the section
   below. Inline hero colors are overridden for the dark ground. */
.acm-hero-dark { background: var(--charcoal, #1f1f1f) !important; }
.acm-hero-dark h1 { color: var(--gold-soft, #f3eed8) !important; }
.acm-hero-dark h1 em,
.acm-hero-dark h1 .italic { color: var(--gold, #b0a06c) !important; }
.acm-hero-dark p { color: color-mix(in oklch, var(--cream, #f3eed8) 72%, transparent) !important; }

/* Awards — "Recognition by the numbers" band on the warm sand ground used
   by other light sections; numerals deepen for contrast, labels flip dark */
.awards-stats-sand {
  /* same light ivory ramp as the "Key moments in our journey" band; anchored
     to that section's scale so this short band shows the same light
     top-of-gradient tones instead of compressing the full range */
  background-color: #F1ECDC;
  background-image: linear-gradient(180deg, #F7F4EA 0%, #F1ECDC 100%);
  background-size: 100% 900px;
  background-repeat: no-repeat;
}
.awards-stats-sand .font-display { color: var(--gold-deep, #877949) !important; }
.awards-stats-sand .uppercase { color: color-mix(in oklch, var(--charcoal, #1f1f1f) 62%, transparent) !important; }

/* ==NAV-MEGA== Static-page primary-nav mega-menu (matches the SPA dropdowns) */
.acm-mega{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;z-index:60}
.acm-mega.acm-mega-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .18s ease,transform .18s ease}
.acm-nav-trigger .acm-caret{display:inline-block;width:6px;height:6px;margin-left:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.65;transition:transform .2s ease}
.acm-nav-has-dd:hover .acm-caret,.acm-nav-open .acm-caret{transform:rotate(225deg) translateY(1px)}

/*
 * Leadership cards — enforce a uniform card width so every headshot is the
 * exact same size. The arbitrary w-[240px]/sm:w-[260px] classes aren't in the
 * compiled stylesheet, so cards were sizing to their (varying) role text and
 * the aspect-[4/5] image boxes came out different widths/heights. Pinning the
 * width fixes the image dimensions identically across all cards; a fixed image
 * height + object-fit:cover keeps faces framed consistently.
 */
#leadership a.group {
  width: 260px !important;
  flex: 0 0 260px !important;
}
#leadership a.group > .relative.aspect-\[4\/5\] {
  width: 100%;
  height: 325px; /* 260 * 5/4 — explicit so it never depends on aspect-ratio support */
  aspect-ratio: auto;
}
#leadership a.group > .relative.aspect-\[4\/5\] img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/*
 * Hero fund ticker — the marquee chips are links to the fund pages;
 * brighten the title on hover so they read as clickable.
 */
/* ease the scroll speed: the fragment's inline <style> sets the loop to 55s
   via the animation shorthand and sits later in source order, so !important
   is needed to slow it */
.acumen-marquee-track {
  animation-duration: 85s !important;
}
.acm-fund-chip {
  text-decoration: none;
}
.acm-fund-chip:hover .headline-tight {
  color: var(--gold, #b0a06c);
}

/*
 * Leadership page cards — the portrait cutouts sit in a 16:9 landscape box
 * with object-fit:cover, which zoom-crops the faces. contain shows the full
 * photo, anchored to the frame's bottom edge. Scoped to the bio-card buttons
 * so the founders page's real 16:9 photography keeps its cover crop.
 */
button.group .aspect-\[16\/9\] {
  /* a 16:9 frame leaves the contained portraits small; 4:3 renders them
     about a third larger while still showing the full photo */
  aspect-ratio: 4 / 3;
}
button.group .aspect-\[16\/9\] img {
  object-fit: contain;
  object-position: bottom center;
}

/*
 * Leadership full-bio expander — open-state cue on the card. The expanded
 * bio renders as a separate full-width row, so the card itself signals which
 * leader is open: gold frame plus a flipped chevron.
 */
button[data-bio][aria-expanded="true"] {
  border-color: var(--gold, #b0a06c) !important;
  box-shadow: 0 0 0 1px var(--gold, #b0a06c);
}
/* deep-linked bios (/leadership?bio=<slug>) scroll the card into view */
button[data-bio-slug] {
  scroll-margin-top: 110px;
}
button[data-bio][aria-expanded="true"] .lucide-chevron-down {
  transform: rotate(180deg);
}

/*
 * About Us hub — .acm-anim-band institutional background animation
 * -------------------------------------------------------------------------
 * A restrained, formal motion for the dark intro band: a fine gold pinstripe
 * (a nod to tailored suiting) drifting slowly on the diagonal, plus a gentle
 * gold light sweep. Both sit behind the content at very low opacity. Honors
 * prefers-reduced-motion.
 */
.acm-anim-band { position: relative; overflow: hidden; }
.acm-anim-band > * { position: relative; z-index: 1; }
.acm-anim-band::before {
  content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg,
    transparent 0 26px,
    color-mix(in oklch, var(--gold) 90%, transparent) 26px 27px);
  opacity: .085;
  animation: acm-pinstripe 22s linear infinite;
  animation-delay: -6s; /* pre-advance the drift so motion is underway on load */
  will-change: transform;
}
@keyframes acm-pinstripe { from { transform: translate(0, 0); } to { transform: translate(-19.1px, 19.1px); } }
.acm-anim-band::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg,
    transparent 30%,
    color-mix(in oklch, var(--gold) 14%, transparent) 48%,
    color-mix(in oklch, var(--gold) 6%, transparent) 55%,
    transparent 72%);
  background-size: 250% 100%;
  animation: acm-sweep 16s ease-in-out infinite alternate;
  animation-delay: -7s; /* rewind: gold light is already crossing on load, not off-screen */
  will-change: background-position;
}
@keyframes acm-sweep { 0% { background-position: 185% 0; } 100% { background-position: -85% 0; } }
@media (prefers-reduced-motion: reduce) {
  .acm-anim-band::before, .acm-anim-band::after { animation: none; }
}

/*
 * About Us hub — #history timeline: horizontal layout (>=768px only)
 * -------------------------------------------------------------------------
 * Re-lay the vertical .acmtl timeline as a horizontal, scrollable track (nodes
 * on a top rule, phase text below). Scoped to #history so the standalone
 * /history page keeps its vertical, description-rich timeline — and gated to
 * tablet/desktop widths: on phones the horizontal strip truncated the phase
 * titles, so mobile keeps the base vertical timeline.
 */
@media (min-width: 768px) {
  #history .acmtl {
    display: flex; flex-wrap: nowrap; max-width: none; gap: 0;
    overflow-x: auto; padding: .5rem 0 1.5rem;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    scrollbar-color: color-mix(in oklch, var(--gold) 40%, transparent) transparent;
  }
  #history .acmtl::-webkit-scrollbar { height: 8px; }
  #history .acmtl::-webkit-scrollbar-thumb { background: color-mix(in oklch, var(--gold) 40%, transparent); border-radius: 999px; }
  #history .acmtl::-webkit-scrollbar-track { background: transparent; }
  #history .acmtl-item {
    flex: 0 0 clamp(185px, 23vw, 240px);
    position: relative; padding: 2.75rem 1.75rem 0 0; scroll-snap-align: start;
  }
  /* horizontal connecting rule at the node line (overrides the vertical spine);
     the deepening gold tone from the nth-child rules is preserved */
  #history .acmtl-item::before {
    left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 2px;
  }
  #history .acmtl-node { left: 0; top: 1px; }
  #history .acmtl-anchor .acmtl-node { left: -3px; top: -3px; }
  #history .acmtl-content { padding-top: .7rem; }
  #history .acmtl-mark { margin-bottom: .15rem; }
}

/*
 * Leadership — wrap the cards instead of a horizontal scroller
 * -------------------------------------------------------------------------
 * The carousel used a -mx/px full-bleed trick that pushed the scroll track
 * 40px into the left gutter, and hid most of the eight board members off
 * screen. Zero those offsets, drop the horizontal overflow, and let the
 * fixed-width cards wrap onto following lines so every leader is visible
 * without scrolling sideways. Names stay on a single line.
 */
#leadership .insights-scroller {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: visible;
}
#leadership .insights-scroller > div {
  flex-wrap: wrap;
  width: auto;
  padding-bottom: 0;
}
/* phones: the fixed-width cards stack one per row — centre them */
@media (max-width: 767.98px) {
  #leadership .insights-scroller > div {
    justify-content: center;
  }
}
/*
 * Board of Directors — fixed 3 + 5 arrangement on desktop. The Chairman,
 * Vice Chairman, and CEO share the first line (5/15 tracks each); the five
 * remaining board members share the second (3/15 each), so both rows run
 * flush across the full content width. Below lg the cards keep the wrap
 * flow. (.acm-board tags the board track in the fragment; the Executive
 * Team group is untouched.)
 */
@media (min-width: 1024px) {
  #leadership .acm-board {
    display: grid;
    grid-template-columns: repeat(15, minmax(0, 1fr));
  }
  #leadership .acm-board > a.group {
    width: auto !important;
    flex: none !important;
  }
  #leadership .acm-board > a.group:nth-child(-n + 3) {
    grid-column: span 5;
  }
  #leadership .acm-board > a.group:nth-child(n + 4) {
    grid-column: span 3;
  }
  /*
   * Executive Team — same flush content width as the board grid above.
   * Ten fixed-width cards wrapped short of the right edge; five equal
   * columns give two even rows spanning the full container.
   */
  #leadership .insights-scroller > div:not(.acm-board) {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  #leadership .insights-scroller > div:not(.acm-board) > a.group {
    width: auto !important;
    flex: none !important;
  }
}

#leadership a.group h3 {
  white-space: nowrap;
  /* the card's text-[1.05rem] / leading-[1.2] utilities aren't in the
     compiled bundle, so the name fell back to a 26px h3 default and the
     longer names clipped; restore the intended scale, which also fits
     every name on its single line */
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
@media (min-width: 1024px) {
  /* in the five-across grids the cells get too narrow for the longest
     names at full size until ~1310px; let the name track the viewport
     within that band and cap back at the intended 1.05rem */
  #leadership a.group h3 {
    font-size: clamp(0.8rem, 1.28vw, 1.05rem);
  }
}

/*
 * Mega-menu redesign (SPA + static replica share these classes)
 * -------------------------------------------------------------------------
 * Remove the left "The Group" featured intro (col-span-3) and the right dark
 * "The Group" box (col-span-4); promote the middle selections to full width
 * and restyle each as a dark "The Group"-style card. Scoped to the dropdown
 * panels via [role="region"][aria-label$=" menu"].
 */
[role="region"][aria-label$=" menu"] .md\:col-span-3,
[role="region"][aria-label$=" menu"] .md\:col-span-4 {
  display: none !important;
}
[role="region"][aria-label$=" menu"] ul.md\:col-span-5 {
  grid-column: 1 / -1 !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 1rem !important;
  align-self: stretch !important;
}
[role="region"][aria-label$=" menu"] ul.md\:col-span-5 > li {
  display: flex;
}
[role="region"][aria-label$=" menu"] ul.md\:col-span-5 > li > a {
  width: 100%;
  padding: 1.6rem 1.5rem !important;
  background: var(--charcoal);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: border-color .2s ease, background-color .2s ease;
}
[role="region"][aria-label$=" menu"] ul.md\:col-span-5 > li > a:hover {
  border-color: color-mix(in oklch, var(--gold) 60%, transparent) !important;
  background: color-mix(in oklch, var(--charcoal) 92%, var(--gold));
}
[role="region"][aria-label$=" menu"] ul.md\:col-span-5 > li > a > div > span {
  color: var(--cream) !important;
  font-family: "Fraunces", Georgia, serif;
  font-size: 20px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
}
[role="region"][aria-label$=" menu"] ul.md\:col-span-5 > li > a:hover > div > span {
  color: var(--gold) !important;
}
[role="region"][aria-label$=" menu"] ul.md\:col-span-5 > li > a > p {
  color: var(--muted-foreground) !important;
  margin-top: .55rem !important;
}

/* Mega-menu cards — arrow affordance in each box (top-right, slides on hover) */
[role="region"][aria-label$=" menu"] ul.md\:col-span-5 > li > a {
  position: relative;
}
[role="region"][aria-label$=" menu"] ul.md\:col-span-5 > li > a::after {
  /* long thin editorial arrow, drawn as an SVG mask so it renders crisply
     at any size and always takes the gold */
  content: "";
  position: absolute;
  top: calc(1.6rem + 5px);
  right: 1.5rem;
  width: 44px;
  height: 14px;
  background-color: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 14'%3E%3Cpath d='M0 7h42M35.5 1.5 41.5 7l-6 5.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 14'%3E%3Cpath d='M0 7h42M35.5 1.5 41.5 7l-6 5.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .9;
  transition: transform .25s ease, opacity .25s ease;
}
[role="region"][aria-label$=" menu"] ul.md\:col-span-5 > li > a:hover::after {
  transform: translateX(5px);
  opacity: 1;
}
/* keep the title clear of the arrow (24px inset + 44px arrow + breathing room) */
[role="region"][aria-label$=" menu"] ul.md\:col-span-5 > li > a > div {
  padding-right: 4.75rem;
}

/*
 * Mutual Funds page — fund fact sheets (dark). Big gold Fraunces returns,
 * bordered panels, key/value overview grid.
 */
.amf-eyebrow{font-family:Inter,sans-serif;text-transform:uppercase;font-weight:600;font-size:11px;letter-spacing:.24em;color:var(--gold)}
.amf-card{border:1px solid rgba(255,255,255,.12);background:#242424;padding:clamp(1.75rem,3.2vw,3rem)}
.amf-card + .amf-card{margin-top:clamp(2rem,3vw,2.75rem)}
.amf-name{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.05;letter-spacing:-.015em;color:var(--gold-soft)}
.amf-tags{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem}
.amf-tag{font-family:Inter,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(176,160,108,.45);padding:.32rem .7rem;border-radius:2px}
.amf-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);margin-top:clamp(1.75rem,2.6vw,2.25rem)}
.amf-metric{background:#242424;padding:clamp(1.35rem,2.2vw,1.85rem)}
.amf-metric-v{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:clamp(1.55rem,2.6vw,2.25rem);line-height:1;letter-spacing:-.02em;color:var(--gold)}
.amf-metric-l{font-family:Inter,sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:.85rem;line-height:1.4}
.amf-sect{font-family:Inter,sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:clamp(1.9rem,2.6vw,2.4rem) 0 .4rem}
.amf-dl{display:grid;grid-template-columns:1fr;border-top:1px solid rgba(255,255,255,.1)}
@media(min-width:640px){.amf-dl{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,3.5rem)}}
.amf-dl-row{display:flex;justify-content:space-between;align-items:baseline;gap:1.25rem;padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.amf-dl-k{font-size:.82rem;color:rgba(255,255,255,.5);flex:none}
.amf-dl-v{font-size:.9rem;line-height:1.4;color:var(--cream);text-align:right}
.amf-asof{margin-top:1.25rem;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.38)}

/*
 * Mutual Funds — light card variant. The live fund (Ezdehar) sits on a warm
 * parchment ground as a printed fact sheet; the archived fund keeps the dark
 * card. Backgrounds encode fund status: daylight = current, dark = closed.
 */
.amf-card.amf-light{border-color:rgba(31,31,31,.16);background:#FFFDF6;box-shadow:0 1px 2px rgba(31,31,31,.05),0 18px 40px -20px rgba(31,31,31,.22)}
.amf-light .amf-name{color:var(--charcoal)}
.amf-light .amf-tag{color:var(--gold-deep);border-color:rgba(125,113,76,.5)}
.amf-light .amf-metrics{background:rgba(31,31,31,.14);border-color:rgba(31,31,31,.14)}
.amf-light .amf-metric{background:#FFFDF6}
.amf-light .amf-metric-v{color:var(--gold-deep)}
.amf-light .amf-metric-l{color:rgba(31,31,31,.5)}
.amf-light .amf-sect{color:rgba(31,31,31,.5)}
.amf-light .amf-dl{border-top-color:rgba(31,31,31,.16)}
.amf-light .amf-dl-row{border-bottom-color:rgba(31,31,31,.1)}
.amf-light .amf-dl-k{color:rgba(31,31,31,.5)}
.amf-light .amf-dl-v{color:var(--charcoal)}
.amf-light .amf-asof{color:rgba(31,31,31,.42)}

/* ==ACM2 Vision / Mission split==
 * Full-bleed two-panel split: a clean white Vision panel meets a deep-bronze
 * Mission panel. Vision's content left edge and Mission's content right edge
 * align to the page's `.container-page` gutters (same --gutter-x / --container-max
 * geometry) so both statements sit on the same vertical lines as the sections
 * above and below. --sbw (set by enhancements.js) matches the scrollbar offset
 * container-page picks up from centering within the viewport. These classes
 * shipped in the about bundle with NO styles — the section had collapsed to an
 * unstyled, edge-hugging left column with the gold panel missing entirely. */
.acm2-split{padding-block:0}
.acm2-split-grid{display:grid;grid-template-columns:1fr}
.acm2-half{display:flex;flex-direction:column;justify-content:center;padding:clamp(2.75rem,8vw,3.75rem) var(--gutter-x)}
.acm2-half-white{background:#fff}
.acm2-half-gold{background:linear-gradient(150deg,#877949 0%,#5f5537 100%)}
.acm2-half-inner{width:100%;max-width:34rem}
/* Bronze panel: flip type to light for contrast */
.acm2-half-gold .acm2-flag{background:var(--gold-soft)}
.acm2-half-gold .acm2-eyebrow>span:last-child{color:var(--gold-soft)}
.acm2-half-gold .acm2-statement{color:#fffdf7}
.acm2-half-gold .acm2-lede{color:rgba(255,255,255,.82)}
@media(min-width:1024px){
  .acm2-split-grid{grid-template-columns:1fr 1fr}
  /* left inset of the centered, max-width-capped page container */
  .acm2-split{--acm2-edge:max(var(--gutter-x), calc((100vw - var(--sbw, 0px) - var(--container-max)) / 2 + var(--gutter-x)))}
  .acm2-half{padding-top:clamp(4rem,6vw,6.5rem);padding-bottom:clamp(4rem,6vw,6.5rem)}
  /* Vision: outer (left) edge on the container gutter, inner (seam) breathing room */
  .acm2-half-white{padding-left:var(--acm2-edge);padding-right:clamp(2rem,4vw,4rem)}
  .acm2-half-white .acm2-half-inner{margin-left:0;margin-right:auto}
  /* Mission mirrors it: outer (right) edge on the container gutter. The grid
     already lays out within the usable width (scrollbar excluded), so the plain
     --acm2-edge lands Mission's right edge on the container's right gutter. */
  .acm2-half-gold{padding-right:var(--acm2-edge);padding-left:clamp(2rem,4vw,4rem)}
  .acm2-half-gold .acm2-half-inner{margin-left:auto;margin-right:0}
}

/*
 * Brokerage capabilities grid (#capabilities) — light scheme. The section
 * ships dark (surface-ink with white-alpha text/hairlines); remap to a white
 * ground with ink text, gold strokes/dividers, and gold index numbers. The ID
 * selector outbeats the utility classes, including their hover variants.
 * (Card anchors carry a hover:bg-white/* utility, so any broad
 * [class*="bg-white/"] rule would tint the tiles — keep bg rules targeted.)
 */
#capabilities{background:#fff;color:var(--charcoal);border-top:none}
/* no rule line above the card grid (the heading row's underline) */
#capabilities [class*="justify-between"][class*="border-b"]{border-bottom:none}
#capabilities [class*="text-[var(--paper)]"]{color:var(--charcoal)}
#capabilities [class*="text-[var(--cream)]"]{color:var(--charcoal)}
/* strokes & dividers: gold hairlines */
#capabilities [class*="border-white/10"]{border-color:color-mix(in oklch,var(--gold) 55%,transparent)}
/* index numbers (01–06): gold */
#capabilities [class*="text-white/30"]{color:var(--gold)}
#capabilities [class*="text-white/55"]{color:color-mix(in oklch,var(--ink) 62%,transparent)}
/* the short dash line in each card: gold */
#capabilities [class*="bg-white/15"]{background-color:var(--gold)}
/* card tiles: white ground, soft gold wash on hover */
#capabilities .group{background:transparent}
#capabilities .group:hover{background:color-mix(in oklch,var(--gold) 7%,transparent)}

/* ===================================================================
 * Careers — Opportunities section (Open Roles / Internships / Benefits)
 * A dedicated, anchored content section so the hero + card CTAs
 * (#open-roles / #internships / #benefits) resolve to real content.
 * =================================================================== */
.crs-ops { --crs-line: color-mix(in oklab, var(--gold) 26%, transparent); }
.crs-band { padding-block: clamp(3.5rem, 6vw, 6rem); }
.crs-band--roles    { background: var(--paper); border-top: 1px solid var(--border); }
.crs-band--intern   { background: linear-gradient(180deg, #F7F4EA 0%, #F1ECDC 100%); }
.crs-band--benefits { background: var(--paper); border-top: 1px solid var(--border); }

.crs-eyebrow { display:inline-flex; align-items:center; gap:.7rem; margin-bottom:1.15rem;
  font-family: var(--font-sans, Inter, sans-serif); text-transform:uppercase; font-weight:600;
  font-size:12px; letter-spacing:.18em; color: var(--gold-deep); }
.crs-flag { display:inline-block; width:26px; height:9px; background:var(--gold);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%); }
.crs-head { max-width: 640px; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.crs-h2 { margin:0; font-weight:400; font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height:1.08; letter-spacing:-.02em; color: var(--ink); }
.crs-lede { margin:1.1rem 0 0; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height:1.62;
  color: color-mix(in oklab, var(--ink) 66%, transparent); max-width: 54ch; }

.crs-roles { list-style:none; margin:0; padding:0; }
.crs-role { display:grid; grid-template-columns: auto 1fr auto; align-items:center;
  gap: clamp(1rem, 3vw, 2.5rem); padding: clamp(1.4rem, 2.4vw, 2rem) 0;
  border-top: 1px solid var(--crs-line); transition: padding-left .3s var(--ease-acumen, ease); }
.crs-role:last-child { border-bottom: 1px solid var(--crs-line); }
@media (hover:hover) { .crs-role:hover { padding-left: .55rem; } }
.crs-role-num { font-size:.8rem; letter-spacing:.05em; color: var(--gold); font-variant-numeric: tabular-nums; }
.crs-role-title { margin:0; font-weight:400; font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  line-height:1.2; letter-spacing:-.01em; color: var(--ink); transition: color .25s; }
.crs-role:hover .crs-role-title { color: var(--gold-deep); }
.crs-role-meta { margin:.4rem 0 0; font-size:.9rem; letter-spacing:.02em;
  color: color-mix(in oklab, var(--ink) 56%, transparent); }

.crs-apply { display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap;
  font-family: var(--font-sans, Inter, sans-serif); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em; color: var(--gold-deep);
  text-decoration:none; transition: gap .25s, color .25s; }
.crs-apply:hover { gap:.9rem; color: var(--ink); }
.crs-arrow { transition: transform .25s; }
.crs-apply:hover .crs-arrow { transform: translateX(3px); }
.crs-apply--solid { align-self:flex-start; margin-top: clamp(1.75rem, 3vw, 2.25rem);
  gap:.7rem; padding: .95rem 1.5rem; border:1px solid var(--gold); }
.crs-apply--solid:hover { background: var(--gold); color: var(--charcoal); gap:1rem; }

.crs-intern-grid { display:grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items:center; }
@media (min-width: 900px) { .crs-intern-grid { grid-template-columns: 1.05fr .95fr; } }
.crs-intern-copy { display:flex; flex-direction:column; }
.crs-intern-copy .crs-lede { max-width: 48ch; }
.crs-facts { margin:0; display:grid; grid-template-columns: 1fr 1fr; gap:1px;
  background: var(--crs-line); border:1px solid var(--crs-line); }
.crs-facts > div { background:#FBFAF3; padding: clamp(1.3rem, 2vw, 1.9rem); }
.crs-facts dt { margin:0; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color: var(--gold-deep); }
.crs-facts dd { margin:.55rem 0 0; font-size: clamp(1.1rem, 1.6vw, 1.5rem); line-height:1.15;
  letter-spacing:-.01em; color: var(--ink); }

.crs-benefits { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:1px;
  background: var(--crs-line); border:1px solid var(--crs-line); }
@media (min-width: 640px) { .crs-benefits { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .crs-benefits { grid-template-columns: 1fr 1fr 1fr; } }
.crs-benefit { background: var(--paper); padding: clamp(1.6rem, 2.4vw, 2.25rem); }
.crs-benefit-num { font-size:.85rem; letter-spacing:.05em; color: var(--gold); font-variant-numeric: tabular-nums; }
.crs-benefit-title { margin:.7rem 0 0; font-weight:400; font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  letter-spacing:-.01em; color: var(--ink); }
.crs-benefit-desc { margin:.55rem 0 0; font-size:.94rem; line-height:1.6;
  color: color-mix(in oklab, var(--ink) 62%, transparent); }

#open-roles, #internships, #benefits, #contact { scroll-margin-top: 100px; }
#ezdehar-fund, #misr-el-kheir-fund { scroll-margin-top: 110px; }

/* Careers: lift the three cards (Open Roles / Internships / Benefits) out of the
 * hero overlap into their own standalone band below the hero. Scoped to the
 * careers page only (the sole page whose <main> contains #opportunities) so the
 * shared HeroLayout2 overlap is preserved on /subsidiaries and /founders. */
@media (min-width: 768px) {
  /* hero is just title + intro — drop the tall min-height and overlap padding */
  main:has(#opportunities) [aria-label="Page hero"] { min-height: 0 !important; }
  main:has(#opportunities) [aria-label="Page hero"] > div { padding-bottom: clamp(3rem, 5vw, 4.5rem) !important; }
  /* remove the upward pull so the cards sit in normal flow */
  main:has(#opportunities) .md\:-mt-\[150px\] { margin-top: 0 !important; }
  main:has(#opportunities) .md\:-translate-y-\[100px\] { translate: none !important; }
  /* the cards section becomes a light ivory band; hide the partial overlay */
  main:has(#opportunities) section:has(> .md\:-mt-\[150px\]) {
    background: linear-gradient(180deg, #F7F4EA 0%, #F1ECDC 100%) !important;
    padding-block: clamp(3.5rem, 6vw, 5.5rem);
  }
  main:has(#opportunities) section:has(> .md\:-mt-\[150px\]) > [aria-hidden] { display: none !important; }
  main:has(#opportunities) section:has(> .md\:-mt-\[150px\]) > .md\:-mt-\[150px\] { padding-block: 0; }
  /* flow the cards 2→3 columns instead of forcing a cramped 3-up on tablets */
  main:has(#opportunities) section:has(> .md\:-mt-\[150px\]) .grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  }
}

/* ==Next port== restore canonical Tailwind display-utility ordering.
 * In the compiled bundle .hidden precedes .inline-flex, which breaks the
 * mobile/desktop logo swap (`hidden md:inline-flex`) below 768px — both
 * logos rendered. Re-declared here in the correct order. */
.hidden { display: none; }
@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:grid { display: grid; }
  .md\:inline-flex { display: inline-flex; }
  .md\:hidden { display: none; }
}
@media (min-width: 1024px) {
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  .lg\:grid { display: grid; }
  .lg\:inline-flex { display: inline-flex; }
  .lg\:hidden { display: none; }
}

/*
 * Phone layout for the 12-column editorial grids and their stat strips.
 * -------------------------------------------------------------------------
 * 1. grid-cols-12 shells (Portfolio, Asset Management, Subsidiaries, etc.)
 *    keep 12 tracks at every width, but their gap-10/gap-12 gutters alone
 *    need 440-528px — more than a phone container — so full-width
 *    col-span-12 children (which span all 11 gaps) overflow the screen.
 *    Collapse to a single column below sm; every unprefixed span in the
 *    markup is col-span-12 (full width), multi-column spans only start at
 *    md:/lg:, so nothing intentionally two-up is affected. The span reset
 *    is required: a span-12 item on a 1-track grid would mint 11 implicit
 *    tracks and re-create the same gap overflow.
 * 2. The stat strips inside them ("24+ / 20+ / MENA" and the matching
 *    three-up figures) pin grid-cols-3 at every width, cramming the boxes
 *    on phones. Stack them one per row; the hairline gap-px grid keeps
 *    drawing the dividers between rows.
 */
@media (max-width: 639.98px) {
  .grid.grid-cols-12 {
    grid-template-columns: 1fr;
  }
  .grid.grid-cols-12 > [class*="col-span-"] {
    grid-column: 1 / -1;
  }
  .grid.grid-cols-3.gap-px.bg-border {
    grid-template-columns: 1fr;
  }
}

/*
 * Navbar "Contact us" CTA — desktop only. Below lg the hamburger is the
 * navigation entry point and its drawer already carries a Contact link, so
 * drop the button from the bar on phones/tablets (covers both the SPA
 * headers' min-[480px] variant and the static replica headers, where it
 * otherwise rendered at every width).
 */
@media (max-width: 1023.98px) {
  header a[aria-label="Contact Acumen Holding"] {
    display: none !important;
  }
}

/*
 * Injected hamburger (next-enhancements.js adds .acm-menu-btn to static-page
 * headers that shipped without one). Visible below lg where the primary nav
 * is display:none; hidden on desktop where the full nav renders.
 */
.acm-menu-btn {
  display: none;
}
@media (max-width: 1023.98px) {
  .acm-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cream, #f3eed8);
  }
  .acm-menu-btn:hover {
    color: var(--gold, #b0a06c);
  }
}

/* =============================================================
 * History — ascending "equity curve" timeline
 * -------------------------------------------------------------
 * Progressive enhancement (built by next-enhancements.js) of the
 * vertical .acmtl list on /history. The firm's 15-year story drawn
 * as the growth chart of an investment house: a gold curve climbing
 * left->right, nodes on the curve, an active milestone scrubbed into
 * a detail panel below. Dark scheme on a black band; the intro
 * section above it is flipped to white so the two alternate.
 * ============================================================= */
/* One continuous history section: the architectural photo spans the entire
   page (fixed to the viewport so it fills the whole scroll), under a dark
   gradient for legibility, with a slow gold light-sweep drifting across it.
   Both the intro band and the timeline band go transparent so they read as a
   single section over the one shared photo. */
main:has(#history-intro) {
  position: relative;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.6) 42%, rgba(0,0,0,0.86) 100%),
    url(/assets/history-architecture-new.jpg) center / cover no-repeat fixed,
    #000 !important;
}
main:has(#history-intro) > section { position: relative; z-index: 1; }
main:has(#history-intro)::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg,
    transparent 30%,
    color-mix(in oklch, var(--gold) 12%, transparent) 48%,
    color-mix(in oklch, var(--gold) 5%, transparent) 55%,
    transparent 72%);
  background-size: 250% 100%;
  animation: acm-sweep 16s ease-in-out infinite alternate;
  animation-delay: -7s;
  will-change: background-position;
}
@media (prefers-reduced-motion: reduce) {
  main:has(#history-intro)::after { animation: none; }
}
/* Per-milestone photo layers: two fixed underlays the timeline JS crossfades
   as the active milestone changes. Each layer carries its own copy of the
   dark legibility gradient (an element's children paint over its background,
   so the gradient on <main> can't darken these). The plain background above
   stays as the no-JS fallback. */
.acm-tl-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.acm-tl-bg.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .acm-tl-bg { transition: none; }
}

/* both bands transparent so the single photo shows through seamlessly */
#history-intro {
  background: transparent !important;
  /* tighten the intro so the timeline rises into the first viewport, right
     under "History" and its sub-paragraph */
  padding-top: clamp(1.5rem, 4vh, 3rem) !important;
  padding-bottom: clamp(0.5rem, 1.5vh, 1rem) !important;
}
#history-intro h1 {
  color: var(--gold-soft, #f3eed8) !important;
}
#history-intro p {
  color: color-mix(in oklch, var(--cream, #f3eed8) 74%, transparent) !important;
  max-width: 60ch; /* keep readable line length now that the container spans full width */
}
/* the intro's own pinstripe/sweep read muddy over a photo — the page-wide
   sweep above replaces them */
#history-intro.acm-anim-band::before,
#history-intro.acm-anim-band::after {
  display: none !important;
}

section:has(#acm-history-ol) {
  background: transparent !important;
  padding-top: 0 !important; /* remove the top band so the curve sits just below the intro */
}
/* remove the "Milestones / Two decades of conviction." heading block */
section:has(#acm-history-ol) > .container-page > .inline-flex,
section:has(#acm-history-ol) > .container-page > h2 {
  display: none !important;
}
section:has(.acm-tl) h2 {
  color: var(--gold-soft, #f3eed8) !important;
}
/* mobile fallback (the vertical .acmtl list) sits on the same dark ground —
   flip its dark text to light so it stays legible */
section:has(.acm-tl) .acmtl-title {
  color: var(--cream, #f3eed8) !important;
}
section:has(.acm-tl) .acmtl-desc {
  color: color-mix(in oklch, var(--cream) 72%, transparent) !important;
}
section:has(.acm-tl) .acmtl-mark,
section:has(.acm-tl) .acmtl-now .acmtl-title {
  color: var(--gold, #b0a06c) !important;
}
/* desktop: the interactive curve replaces the vertical list */
@media (min-width: 768px) {
  .acm-tl-host > .acmtl { display: none; }
}
/* mobile: keep the proven vertical timeline, hide the horizontal curve */
@media (max-width: 767.98px) {
  .acm-tl { display: none; }
}

.acm-tl {
  margin-top: clamp(0.5rem, 1vw, 1rem);
  color: var(--cream, #f3eed8);
}
/* desktop & laptop: lift the timeline higher into the first viewport and
   compress the widget so the detail text below the curve fits on-screen too */
@media (min-width: 768px) {
  #history-intro {
    padding-top: clamp(0.5rem, 1.5vh, 1.25rem) !important;
    padding-bottom: clamp(0.25rem, 0.75vh, 0.6rem) !important;
  }
  .acm-tl-viz { height: clamp(180px, 26vh, 300px) !important; }
  .acm-tl-detail {
    margin-top: clamp(0.75rem, 1.6vh, 1.35rem) !important;
    padding-top: clamp(0.75rem, 1.6vh, 1.35rem) !important;
    min-height: 0 !important;
  }
}
.acm-tl-viz {
  position: relative;
  width: 100%;
  height: clamp(240px, 32vw, 400px);
}
.acm-tl-curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.acm-tl-path {
  fill: none;
  stroke: var(--gold, #b0a06c);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: stroke-dashoffset 1.6s cubic-bezier(.22, 1, .36, 1);
}
.acm-tl-nodes {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.acm-tl-nodes > li {
  position: absolute;
  left: var(--x);
  bottom: var(--y);
  transform: translate(-50%, 50%);
}
.acm-tl-node {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--gold, #b0a06c);
  background: #000;
  cursor: pointer;
  padding: 0;
  transition: background-color .25s, box-shadow .25s, transform .25s;
}
.acm-tl-node:hover {
  background: color-mix(in oklch, var(--gold) 55%, transparent);
  transform: scale(1.15);
}
.acm-tl-node:focus-visible {
  outline: 2px solid var(--gold-soft, #f3eed8);
  outline-offset: 3px;
}
.acm-tl-node[aria-pressed="true"] {
  background: var(--gold, #b0a06c);
  box-shadow: 0 0 0 5px color-mix(in oklch, var(--gold) 22%, transparent),
    0 0 18px 2px color-mix(in oklch, var(--gold) 45%, transparent);
}
/* index numeral under each node; year mark above the two dated endpoints */
.acm-tl-ix {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap; /* keep the numeral on one line (li box is only ~15px wide) */
  font-size: 10px;
  letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklch, var(--cream) 45%, transparent);
}
.acm-tl-node[aria-pressed="true"] ~ .acm-tl-ix {
  color: var(--gold, #b0a06c);
}
.acm-tl-year {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  letter-spacing: -.01em;
  color: var(--gold, #b0a06c);
  white-space: nowrap;
}

.acm-tl-detail {
  margin-top: clamp(2rem, 3.5vw, 3rem);
  border-top: 1px solid color-mix(in oklch, var(--gold) 30%, transparent);
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  min-height: 190px;
}
.acm-tl-detail-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .85rem;
}
.acm-tl-detail-marker {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--gold, #b0a06c);
}
.acm-tl-detail-progress {
  font-size: 11px;
  letter-spacing: .28em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklch, var(--cream) 50%, transparent);
}
.acm-tl-detail-title {
  margin: 0 0 .7rem;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--cream, #f3eed8);
}
.acm-tl-detail-desc {
  margin: 0;
  max-width: 68ch;
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  line-height: 1.7;
  color: color-mix(in oklch, var(--cream) 78%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .acm-tl-path { transition: none; }
}

/* ==Next port== Mobile/tablet navbar alignment.
 * The header row is a 3-column grid (logo | primary nav | actions). Below lg
 * the nav is display:none, so the actions cell auto-places into the CENTER
 * column, stranding the hamburger mid-bar. Switch the row to flex with
 * space-between under lg: logo hard-left, actions (contact + menu) hard-right. */
@media (max-width: 1023.98px) {
  .sticky.top-0.z-50 .h-16.grid {
    display: flex;
    justify-content: space-between;
  }
}

/* Asset Management hero CTA jumps to the on-page "Product Lines" section;
   offset the landing so the sticky header doesn't cover the heading, and
   scroll there smoothly. */
html { scroll-behavior: smooth; }
#product-lines { scroll-margin-top: clamp(88px, 8vw, 128px); }

/* Home "Latest News" rail: the snap container's own left padding (px-6 /
   lg:px-10) is not part of the snapport, so on load the browser snaps the
   first card past it and the rail starts pre-scrolled. Matching
   scroll-padding makes position zero a valid resting snap point. */
.insights-scroller { scroll-padding-left: 1.5rem; }
@media (min-width: 1024px) {
  .insights-scroller { scroll-padding-left: 2.5rem; }
}

/*
 * What We Do — 03 · Mutual funds & equity portfolios band
 * -------------------------------------------------------------------------
 * Summary section under "Explore what we do." (#services): a dark charcoal
 * band alternating with the white services section above, holding two linked
 * cards (Mutual Funds / Equity Portfolios) with ledger-style metric tiles.
 * Markup uses semantic .wwd-fp-* hooks; arbitrary Tailwind utilities in
 * fragments are not compiled, so all styling lives here.
 */
.wwd-fp {
  background: var(--charcoal, #1f1f1f);
  color: var(--off-white, #f5f2e8);
  border-top: 1px solid color-mix(in oklch, var(--gold) 18%, transparent);
}
.wwd-fp-h2 {
  font-weight: 400;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--gold-soft, #f3eed8);
}
.wwd-fp-lede {
  margin-top: 1.25rem;
  max-width: none;
  font-size: clamp(.95rem, 1.1vw, 1.0625rem);
  line-height: 1.7;
  color: color-mix(in oklab, var(--off-white) 72%, transparent);
}
.wwd-fp-grid {
  margin-top: clamp(2rem, 3.5vw, 3rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .wwd-fp-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
.wwd-fp-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #242424;
  border-radius: 8px;
  padding: clamp(1.75rem, 2.6vw, 2.5rem);
  color: inherit;
  text-decoration: none;
  transition: border-color .25s ease, background-color .25s ease;
}
.wwd-fp-card:hover {
  border-color: color-mix(in oklch, var(--gold) 45%, transparent);
  background: #272623;
}
.wwd-fp-ix {
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold, #b0a06c);
}
.wwd-fp-title {
  margin-top: .8rem;
  font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  letter-spacing: -.01em;
  color: var(--cream, #f3eed8);
  transition: color .25s ease;
}
.wwd-fp-card:hover .wwd-fp-title { color: var(--gold-bright, #c4b078); }
.wwd-fp-desc {
  margin-top: .8rem;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .6);
  flex: 1;
}
.wwd-fp-metrics {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .1);
}
.wwd-fp-metrics > div { background: #242424; padding: .95rem 1.1rem; }
.wwd-fp-num {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--gold, #b0a06c);
}
.wwd-fp-lbl {
  display: block;
  margin-top: .5rem;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: rgba(255, 255, 255, .48);
}
.wwd-fp-cta {
  margin-top: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold, #b0a06c);
  transition: gap .25s ease, color .25s ease;
}
.wwd-fp-cta svg { width: 14px; height: 14px; }
.wwd-fp-card:hover .wwd-fp-cta { gap: .8rem; color: var(--gold-bright, #c4b078); }

/*
 * Asset Management — product-line side drawer
 * -------------------------------------------------------------------------
 * Opened by next-enhancements.js when a "Six product lines" card is clicked
 * (instead of navigating to the funds page). Right-hand panel over a dimmed
 * backdrop; slides in from the right, honors prefers-reduced-motion.
 */
#acm-pl-drawer { position: fixed; inset: 0; z-index: 95; }
.acm-pl-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 15, 15, .55);
  opacity: 0;
  transition: opacity .3s ease;
  cursor: pointer;
}
.acm-pl-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(440px, 94vw);
  display: flex; flex-direction: column;
  background: var(--charcoal, #1f1f1f);
  color: var(--off-white, #f5f2e8);
  border-left: 1px solid color-mix(in oklch, var(--gold) 32%, transparent);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  overflow-y: auto;
  transform: translateX(102%);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
#acm-pl-drawer.is-open .acm-pl-backdrop { opacity: 1; }
#acm-pl-drawer.is-open .acm-pl-panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .acm-pl-backdrop, .acm-pl-panel { transition: none; }
}
.acm-pl-close {
  position: absolute; top: .9rem; right: 1rem;
  font-size: 2rem; line-height: 1;
  background: none; border: none; padding: .35rem .55rem;
  color: var(--cream, #f3eed8);
  cursor: pointer;
  transition: color .2s ease;
}
.acm-pl-close:hover { color: var(--gold, #b0a06c); }
.acm-pl-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: .6rem;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold, #b0a06c);
}
.acm-pl-flag {
  display: inline-block; width: 26px; height: 9px;
  background: var(--gold, #b0a06c);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
}
.acm-pl-title {
  margin: 1.1rem 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--gold-soft, #f3eed8);
}
.acm-pl-desc {
  margin: .9rem 0 0;
  font-size: 15px; line-height: 1.7;
  color: rgba(255, 255, 255, .66);
}
.acm-pl-instr-label {
  margin-top: 1.7rem; padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.acm-pl-instr-list {
  list-style: none; margin: .9rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .8rem;
}
.acm-pl-instr {
  display: block;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #242424;
  padding: 1.05rem 1.15rem;
  color: inherit; text-decoration: none;
}
a.acm-pl-instr--link {
  position: relative;
  transition: border-color .2s ease, background-color .2s ease;
}
a.acm-pl-instr--link:hover {
  border-color: color-mix(in oklch, var(--gold) 45%, transparent);
  background: #272623;
}
.acm-pl-instr-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
}
.acm-pl-instr-name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.1rem; letter-spacing: -.01em;
  color: var(--cream, #f3eed8);
  /* full-width so the tag chips always wrap onto their own row under the
     fund name instead of sitting beside it */
  flex: 1 0 100%;
  margin-bottom: .15rem;
}
.acm-pl-tag {
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold, #b0a06c);
  border: 1px solid color-mix(in oklch, var(--gold) 40%, transparent);
  border-radius: 2px;
  padding: .18rem .45rem;
  white-space: nowrap;
}
.acm-pl-instr-desc {
  margin: .55rem 0 0;
  font-size: 13.5px; line-height: 1.6;
  color: rgba(255, 255, 255, .58);
}
.acm-pl-instr-stats {
  margin-top: .85rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 1px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .1);
}
.acm-pl-instr-stats > div { background: #242424; padding: .6rem .7rem; }
.acm-pl-instr-num {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.02rem; line-height: 1.1; letter-spacing: -.01em;
  color: var(--gold, #b0a06c);
  white-space: nowrap;
}
.acm-pl-instr-lbl {
  display: block; margin-top: .3rem;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.4;
  color: rgba(255, 255, 255, .45);
}
.acm-pl-instr-link {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .8rem;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold, #b0a06c);
  transition: gap .2s ease;
}
a.acm-pl-instr--link:hover .acm-pl-instr-link { gap: .6rem; }
.acm-pl-ctas {
  margin-top: auto; padding-top: 2rem;
  display: flex; flex-direction: column; gap: .7rem;
}
.acm-pl-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .65rem 1.4rem;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  text-decoration: none; border-radius: 2px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.acm-pl-cta--solid {
  background: var(--gold, #b0a06c);
  color: var(--charcoal, #1f1f1f);
  border: 1px solid var(--gold, #b0a06c);
}
.acm-pl-cta--solid:hover {
  background: var(--gold-deep, #877949);
  border-color: var(--gold-deep, #877949);
  color: var(--paper, #fff);
}
.acm-pl-cta--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  color: var(--off-white, #f5f2e8);
}
.acm-pl-cta--ghost:hover {
  background: var(--off-white, #f5f2e8);
  border-color: var(--off-white, #f5f2e8);
  color: var(--charcoal, #1f1f1f);
}

/*
 * Careers — Acumen ATS apply drawer form
 * -------------------------------------------------------------------------
 * The drawer shell reuses the .acm-pl-* classes (backdrop/panel/close/title);
 * these style the application form rendered from the job's ATS schema.
 */
.acm-apply-body { display: flex; flex-direction: column; flex: 1; }
.acm-apply-loading { margin-top: 1.4rem; font-size: 14px; color: rgba(255, 255, 255, .55); }
.acm-apply-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.4rem; }
.acm-apply-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.acm-apply-field label {
  display: block; margin-bottom: .4rem;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in oklch, var(--cream, #f3eed8) 62%, transparent);
}
.acm-apply-req { color: var(--gold, #b0a06c); }
.acm-apply-hint { margin: .35rem 0 0; font-size: 11.5px; color: rgba(255, 255, 255, .4); }
.acm-apply-field input[type="text"],
.acm-apply-field input[type="email"],
.acm-apply-field input[type="tel"],
.acm-apply-field input[type="url"],
.acm-apply-field input[type="number"],
.acm-apply-field input[type="date"],
.acm-apply-field select,
.acm-apply-field textarea {
  width: 100%;
  background: #242424;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 2px;
  color: var(--cream, #f3eed8);
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 14px;
  padding: .6rem .75rem;
  transition: border-color .2s ease;
}
.acm-apply-field input:focus,
.acm-apply-field select:focus,
.acm-apply-field textarea:focus {
  outline: none;
  border-color: var(--gold, #b0a06c);
}
.acm-apply-field input[type="file"] {
  width: 100%;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .6);
}
.acm-apply-field input[type="file"]::file-selector-button {
  background: transparent;
  border: 1px solid color-mix(in oklch, var(--gold) 55%, transparent);
  border-radius: 2px;
  color: var(--gold, #b0a06c);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  padding: .45rem .8rem;
  margin-right: .75rem;
  cursor: pointer;
}
.acm-apply-checks { display: flex; flex-direction: column; gap: .45rem; }
.acm-apply-check { display: inline-flex; align-items: center; gap: .55rem; }
.acm-apply-check label {
  margin: 0;
  font-size: 13.5px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: rgba(255, 255, 255, .72);
}
.acm-apply-check input[type="checkbox"] { accent-color: var(--gold, #b0a06c); }
.acm-apply-field--inline { display: flex; flex-direction: column; gap: .3rem; }
.acm-apply-error {
  border: 1px solid rgba(190, 84, 84, .6);
  background: rgba(160, 40, 40, .16);
  color: #e8b4b4;
  font-size: 13px; line-height: 1.5;
  padding: .7rem .9rem;
}
.acm-apply-error a { color: #f2cccc; text-decoration: underline; }
.acm-apply-submit { margin-top: .3rem; width: 100%; border: none; cursor: pointer; }
.acm-apply-submit:disabled { opacity: .6; cursor: default; }
.acm-apply-success { margin-top: 2.2rem; text-align: center; }
.acm-apply-success-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--gold, #b0a06c);
  color: var(--gold, #b0a06c);
  font-size: 1.3rem;
}
.acm-apply-success h4 {
  margin: 1rem 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400; font-size: 1.4rem;
  color: var(--gold-soft, #f3eed8);
}
.acm-apply-success p { margin: .6rem 0 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .6); }
.acm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/*
 * Careers — job detail inner page (/careers/jobs/<slug>)
 * -------------------------------------------------------------------------
 * A dark animated hero (title + meta chips) over an ivory body with the
 * ATS description and a sticky apply card. Reuses the careers header/
 * footer shell; "Apply for this role" opens the form drawer.
 */
.jd-hero-inner {
  padding-top: clamp(112px, 14vw, 176px);
  padding-bottom: clamp(2.75rem, 4.5vw, 4rem);
}
.jd-back {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in oklch, var(--cream, #f3eed8) 62%, transparent);
  text-decoration: none;
  transition: color .2s ease, gap .2s ease;
}
.jd-back:hover { color: var(--gold, #b0a06c); gap: .7rem; }
.jd-eyebrow-row { margin-top: 1.6rem; }
.jd-eyebrow { font-size: 12px; letter-spacing: .18em; color: var(--gold); }
.jd-title {
  margin: 1.1rem 0 0;
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.05; letter-spacing: -.02em;
  color: var(--gold-soft, #f3eed8);
  max-width: 22ch;
}
.jd-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.jd-chip {
  display: inline-flex; align-items: center;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold, #b0a06c);
  border: 1px solid color-mix(in oklch, var(--gold) 42%, transparent);
  border-radius: 2px;
  padding: .35rem .65rem;
}

.jd-body { background: var(--paper, #fff); }
.jd-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .jd-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.jd-sectlabel {
  margin: 0 0 1rem;
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-deep, #877949);
}
.jd-desc {
  white-space: pre-wrap;
  font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.75;
  color: color-mix(in oklch, var(--ink, #1f1f1f) 82%, transparent);
  max-width: 68ch;
  word-break: break-word;
}
.jd-desc.jd-empty { white-space: normal; font-style: italic; color: color-mix(in oklch, var(--ink) 55%, transparent); }

.jd-col-side { position: relative; }
@media (min-width: 900px) { .jd-col-side { position: sticky; top: clamp(96px, 12vh, 140px); } }
.jd-card {
  border: 1px solid color-mix(in oklch, var(--gold) 24%, transparent);
  background: linear-gradient(180deg, #F7F4EA 0%, #F1ECDC 100%);
  padding: clamp(1.5rem, 2.4vw, 2rem);
}
.jd-card-label {
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-deep, #877949);
}
.jd-card-text {
  margin: .7rem 0 1.3rem;
  font-size: 14px; line-height: 1.6;
  color: color-mix(in oklch, var(--ink) 68%, transparent);
}
.jd-apply {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; padding: .8rem 1.4rem;
  border: 1px solid var(--gold, #b0a06c);
  background: var(--gold, #b0a06c);
  color: var(--charcoal, #1f1f1f);
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.jd-apply:hover {
  background: var(--gold-deep, #877949);
  border-color: var(--gold-deep, #877949);
  color: var(--paper, #fff);
  transform: translateY(-1px);
}
.jd-card-note {
  margin: .9rem 0 0;
  font-size: 11px; letter-spacing: .04em;
  color: color-mix(in oklch, var(--ink) 52%, transparent);
}

/*
 * Pegasus watermark — dark "Get in touch" CTA bands
 * -------------------------------------------------------------------------
 * The 7 charcoal CTA sections (asset-management, brokerage, about, home,
 * leadership, securities, subsidiaries) share one class signature: a
 * charcoal ground + a gold-18% top border. Match that combo and lay the
 * white Pegasus icon behind the content as a faint, right-anchored
 * watermark. pointer-events:none + z-index keep it purely decorative.
 */
section[class*="var(--charcoal)"][class*="var(--gold)_18%"] {
  position: relative;
  overflow: hidden;
  /* own stacking context so the shooting stars can sit on a negative layer
     (behind the Pegasus) yet still above the band's own background */
  isolation: isolate;
}
section[class*="var(--charcoal)"][class*="var(--gold)_18%"] > * {
  position: relative;
  z-index: 1;
}
section[class*="var(--charcoal)"][class*="var(--gold)_18%"]::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  /* anchor the logo to the far right on every width. .container-page is
     full-bleed (max-width:none) with a ~2.5vw gutter, so track the gutter
     rather than a centered-1440 box — otherwise the Pegasus drifts inward on
     ultra-wide screens instead of staying at the right edge. */
  top: 50%;
  left: auto;
  right: clamp(24px, 2.5vw, 72px);
  transform: translateY(-50%);
  width: clamp(150px, 20vw, 300px);
  aspect-ratio: 1157 / 1540;
  background: url(/assets/pegasus-gold.svg) center / contain no-repeat;
  opacity: 0.3;
}
/* Mobile: the watermark sits behind the copy and gets clipped by the band
   edge — drop it entirely on small screens */
@media (max-width: 767px) {
  section[class*="var(--charcoal)"][class*="var(--gold)_18%"]::after {
    display: none;
  }
}
/* Gold shooting stars: next-enhancements.js injects a .pegasus-stars layer
   holding four .pegasus-star comets into each charcoal/gold band. They stay
   dormant (opacity 0) until the band scrolls into view — .pegasus-lit fires
   each one, staggered, to streak once from the left of the screen to the right
   (no repeat). Each star has a bright head leading on the right and a comet
   tail fading out behind it. */
section[class*="var(--charcoal)"][class*="var(--gold)_18%"] .pegasus-stars {
  position: absolute;
  inset: 0;
  z-index: -1; /* behind the Pegasus watermark (::after, z-index 0) */
  pointer-events: none;
  overflow: hidden;
}
section[class*="var(--charcoal)"][class*="var(--gold)_18%"] .pegasus-star {
  position: absolute;
  left: 0;
  top: 50%;
  width: clamp(180px, 20vw, 360px); /* tail length */
  height: clamp(3px, 0.45vw, 6px); /* streak thickness */
  transform: translate(-20vw, -50%) rotate(4deg);
  /* radial head (bright, leading right edge) layered over the fading tail */
  background:
    radial-gradient(
      circle at 100% 50%,
      rgba(255, 246, 220, 0.98) 0%,
      rgba(224, 206, 150, 0.7) 16%,
      rgba(176, 160, 108, 0) 44%
    ),
    linear-gradient(
      90deg,
      rgba(176, 160, 108, 0) 0%,
      rgba(176, 160, 108, 0.5) 70%,
      rgba(224, 206, 150, 0.95) 100%
    );
  border-radius: 999px;
  filter: blur(0.6px) drop-shadow(0 0 7px rgba(176, 160, 108, 0.6));
  opacity: 0;
}
/* spread the four stars across the band's height, with varied tail lengths */
section[class*="var(--charcoal)"][class*="var(--gold)_18%"] .pegasus-star:nth-child(1) { top: 28%; }
section[class*="var(--charcoal)"][class*="var(--gold)_18%"] .pegasus-star:nth-child(2) { top: 45%; width: clamp(140px, 16vw, 300px); }
section[class*="var(--charcoal)"][class*="var(--gold)_18%"] .pegasus-star:nth-child(3) { top: 60%; width: clamp(200px, 22vw, 380px); }
section[class*="var(--charcoal)"][class*="var(--gold)_18%"] .pegasus-star:nth-child(4) { top: 76%; width: clamp(150px, 17vw, 320px); }
/* one-shot flight: fade in at the left, streak right, fade out — staggered */
section[class*="var(--charcoal)"][class*="var(--gold)_18%"].pegasus-lit .pegasus-star {
  animation: pegasusShootingStar 2.7s cubic-bezier(0.3, 0, 0.25, 1) forwards;
}
section[class*="var(--charcoal)"][class*="var(--gold)_18%"].pegasus-lit .pegasus-star:nth-child(1) { animation-delay: 0s; }
section[class*="var(--charcoal)"][class*="var(--gold)_18%"].pegasus-lit .pegasus-star:nth-child(2) { animation-delay: 0.5s; animation-duration: 2.4s; }
section[class*="var(--charcoal)"][class*="var(--gold)_18%"].pegasus-lit .pegasus-star:nth-child(3) { animation-delay: 1s; }
section[class*="var(--charcoal)"][class*="var(--gold)_18%"].pegasus-lit .pegasus-star:nth-child(4) { animation-delay: 1.55s; animation-duration: 2.9s; }
@keyframes pegasusShootingStar {
  0% {
    opacity: 0;
    transform: translate(-20vw, calc(-50% - 46px)) rotate(4deg);
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(112vw, calc(-50% + 46px)) rotate(4deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* no motion: skip the streaks rather than freeze them mid-screen */
  section[class*="var(--charcoal)"][class*="var(--gold)_18%"].pegasus-lit .pegasus-star {
    animation: none;
    opacity: 0;
  }
}
@media (max-width: 1023.98px) {
  /* tablet/mobile: text goes full-width, so there's no room beside it —
     keep the Pegasus bleeding off the right edge; the stars still fly */
  section[class*="var(--charcoal)"][class*="var(--gold)_18%"]::after {
    left: auto;
    right: -2.5rem;
    opacity: 0.3;
  }
}

/* --------------------------------------------------------------------------
 * Heading consistency — unify every container's eyebrow + section heading to
 * one canonical treatment (gold flag 28x10, uppercase label 12px / 0.18em,
 * section heading clamp(1.75rem,3.2vw,2.6rem) / 1.1 / -0.02em). The scale
 * matches the "Explore what we do." services heading used as the reference.
 * Named heading classes carry their own sizes across fragments; these rules
 * override the outliers so they read identically site-wide.
 * -------------------------------------------------------------------------- */
/* Eyebrow flags → 28x10 (crs-flag ships 26x9; acm2-flag is already canonical) */
.crs-flag { width: 28px; height: 10px; }
/* Eyebrow labels → 12px / 0.18em (amd ships 11px/.24em) */
.amd-eyebrow,
.crs-eyebrow { font-size: 12px; letter-spacing: 0.18em; }
/* Section headings → a single scale */
.amd-h,
.acm2-h2,
.acm2-statement,
.crs-h2,
.wwd-gs-h2,
.wwd-fp-h2,
h2.font-display.text-h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.6rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}

/* ==========================================================================
 * ==DESIGN-POLISH== Site-wide finish pass
 * --------------------------------------------------------------------------
 * The identity (Fraunces display, Inter utility, gold on charcoal) is right;
 * the finish was clinical. This section: quality details everywhere (focus,
 * selection, CTA micro-lift) and a proper design treatment for /leadership —
 * standard hero proportions, confident section headings, cards that lift off
 * a warmed ground, a disciplined hover instead of the solid-gold flood, and
 * the About page's ivory band rhythm. (--paper warmed in the :root above.)
 * ========================================================================== */

/* --- Quality details (site-wide) ----------------------------------------- */
/* keyboard focus: a gold ring instead of the UA default blue */
:focus-visible {
  outline: 2px solid var(--gold, #b0a06c);
  outline-offset: 3px;
}
/* text selection in the brand gold */
::selection {
  background: color-mix(in oklch, var(--gold, #b0a06c) 32%, transparent);
}
/* primary gold CTAs: micro-lift + soft gold shadow on hover */
a[class*="bg-[var(--gold)]"] {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
a[class*="bg-[var(--gold)]"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -14px color-mix(in oklch, var(--gold-deep, #877949) 55%, transparent);
}

/* --- /leadership: hero at the standard proportions ------------------------ */
/* the compact pt-16/pb-10 made the dark band read as an afterthought; give it
   the same generous clamp the media heroes use, and a display-size h1 (the
   fragment sizes the h1 inline, hence !important). Scoped via the page's
   unique #committees anchor, following this file's #main:has(...) pattern. */
#main:has(#committees) > section.acm-hero-dark > .container-page {
  padding-top: clamp(96px, 13vw, 168px);
  padding-bottom: clamp(72px, 10vw, 128px);
}
#main:has(#committees) > section.acm-hero-dark h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.3rem) !important;
}

/* --- /leadership: confident section headings ------------------------------ */
/* "Board of Directors" etc. rendered at ~1.15rem — barely above the card
   names, so the page had no hierarchy. Scale them toward the canonical h2. */
#board h2.font-display,
#executive h2.font-display,
#committees h2.font-display,
#governance h2.font-display,
#policies h2.font-display {
  font-size: clamp(1.5rem, 2.4vw, 2.05rem) !important;
  letter-spacing: -0.015em !important;
}

/* --- /leadership: alternating band rhythm ---------------------------------- */
/* strict light-gold / white alternation down the page:
   hero (dark) → board (white) → executive (gold) → committees (white)
   → governance (gold) → policies (white) → CTA (dark).
   #policies shipped a stray grey (#f2f2f2) ground — normalised to white. */
#board,
#committees,
#policies {
  background: #fff !important;
}
#executive,
#governance {
  background: linear-gradient(180deg, #f7f4ea 0%, #f1ecdc 100%) !important;
}

/* --- /leadership: leader cards -------------------------------------------- */
/* true white cards so they lift off the warmed paper/ivory grounds */
.acm-subtab-grid button.group {
  background: #fff;
  border-color: color-mix(in oklch, var(--ink, #1f1f1f) 10%, transparent);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease,
    background-color 0.25s ease;
}
/* refined hover: gold hairline + gentle lift + gold-cast shadow — replaces
   the fragment's hover:bg-[var(--gold)] flood (specificity beats the utility) */
.acm-subtab-grid button.group:hover {
  background: #fff;
  border-color: color-mix(in oklch, var(--gold, #b0a06c) 65%, transparent);
  transform: translateY(-3px);
  box-shadow:
    0 14px 34px -22px color-mix(in oklch, var(--gold-deep, #877949) 45%, transparent),
    0 2px 6px rgba(31, 31, 31, 0.05);
}
.acm-subtab-grid button.group:hover h3 {
  color: var(--gold-deep, #877949);
}
/* the "Full bio" footer reads as an action, not an afterthought */
.acm-subtab-grid button.group > .flex-1 > span:last-child {
  color: var(--gold-deep, #877949);
}
.acm-subtab-grid button.group:not([aria-expanded="true"]):hover .lucide-chevron-down {
  transform: translateY(2px);
}
@media (prefers-reduced-motion: reduce) {
  .acm-subtab-grid button.group,
  .acm-subtab-grid button.group:hover,
  a[class*="bg-[var(--gold)]"],
  a[class*="bg-[var(--gold)]"]:hover {
    transition: none;
    transform: none;
  }
}

/* --- /leadership: sticky gold sub-nav depth ------------------------------- */
.sticky.z-40 {
  box-shadow: 0 10px 26px -20px rgba(31, 31, 31, 0.45);
}

/*
 * Founder band — fit within one viewport
 * -------------------------------------------------------------------------
 * Rana's cutout (320px wide, ~385px tall) plus ~450px of quote/bio/CTA
 * overflowed the 100svh band on common laptop heights. Scale the headshot
 * and the display quote down so headshot + text sit comfortably inside a
 * single viewport. (!important where the fragment's inline <style> sets the
 * type sizes and loads after this file.)
 */
.leader-band-headshot img {
  width: clamp(230px, 49%, 370px);
}
.leader-band-headshot {
  margin: 0 0 0.85rem;
}
/* compensate the larger headshot: tighter vertical rhythm keeps the whole
   band inside one viewport (fragment inline <style> loads later, hence
   !important) */
.leader-band-inner .leader-band-rule {
  margin-top: 12px !important;
}
.leader-band-inner .leader-band-rule--tight {
  margin-top: 16px !important;
}
.leader-band-bio {
  margin-top: 14px !important;
}
.leader-band-cta-wrap {
  margin-top: 16px !important;
}
.leader-band-quote {
  font-size: clamp(1.25rem, 1.8vw, 1.65rem) !important;
  line-height: 1.35 !important;
}
.leader-band-bio {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/*
 * Business-line leadership bands (#line-leaders)
 * -------------------------------------------------------------------------
 * Each What We Do line page closes with the leaders of that business —
 * compact photo/name/role cards deep-linking to /leadership?bio=<slug>
 * (the deep link opens that leader's full bio). Card treatment matches the
 * leadership-page polish: white on warm paper, gold hairline + lift on hover.
 */
.wwd-leaders {
  list-style: none;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .wwd-leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .wwd-leaders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.wwd-leader {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid color-mix(in oklch, var(--ink, #1f1f1f) 10%, transparent);
  padding: 0.9rem 1.1rem;
  text-decoration: none;
  color: var(--ink, #1f1f1f);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.wwd-leader:hover {
  border-color: color-mix(in oklch, var(--gold, #b0a06c) 65%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -22px color-mix(in oklch, var(--gold-deep, #877949) 45%, transparent);
}
.wwd-leader-photo {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--off-white, #f5f3ee);
}
/*
 * Leader avatars come in two framings: tall torso portraits (face small at
 * top) and square/tight headshots (face already fills the frame). A single
 * crop can't serve both — the zoom that rescues a torso face cuts the scalp
 * off a tight headshot. So the DEFAULT here is the safe centred crop that
 * never clips a head (correct for headshots, and the no-JS fallback), and
 * initLeaderAvatars() adds .avatar-tall to the portrait-aspect images to
 * zoom their faces up. Sizing the img (not a transform) keeps the browser
 * sampling the full-res source, so both stay sharp.
 */
.wwd-leader-photo img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
}
.wwd-leader-photo img.avatar-tall {
  width: 134%;
  height: 134%;
  left: 50%;
  top: -1.8%;
  transform: translateX(-50%);
  object-position: 50% 0%;
}
.wwd-leader-name {
  display: block;
  font-size: 1.02rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.wwd-leader:hover .wwd-leader-name {
  color: var(--gold-deep, #877949);
}
.wwd-leader-role {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--ink, #1f1f1f) 55%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .wwd-leader, .wwd-leader:hover { transition: none; transform: none; }
}
/* the line's philosophy quote, merged directly below the leader cards (the
   old standalone section with its hairline + eyebrow was removed) */
.wwd-line-quote {
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  max-width: none;
  width: 100%;
}

/*
 * Awards — year slider (built by initAwardsSlider in next-enhancements.js)
 * -------------------------------------------------------------------------
 * Year tab rail + prev/next arrows over a sliding track, one slide per
 * year. The server-rendered stacked blocks are moved into the slides, so
 * without JS the page keeps the original vertical list.
 */
.acm-aw-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  order: -1; /* rail above the viewport inside the flex-col wrap */
  margin-bottom: 0.25rem;
}
.acm-aw-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.acm-aw-tab {
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 11px;
  letter-spacing: 0.18em;
  padding: 0.55rem 1.05rem;
  border: 1px solid color-mix(in oklch, var(--ink, #1f1f1f) 18%, transparent);
  border-radius: 2px;
  background: #fff;
  color: color-mix(in oklch, var(--ink, #1f1f1f) 72%, transparent);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.acm-aw-tab:hover {
  border-color: color-mix(in oklch, var(--gold, #b0a06c) 65%, transparent);
  color: var(--ink, #1f1f1f);
}
.acm-aw-tab[aria-selected="true"] {
  background: var(--charcoal, #1f1f1f);
  border-color: var(--charcoal, #1f1f1f);
  color: var(--gold-soft, #f3eed8);
}
.acm-aw-arrows {
  display: flex;
  gap: 0.4rem;
}
.acm-aw-arrow {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in oklch, var(--ink, #1f1f1f) 18%, transparent);
  border-radius: 2px;
  background: #fff;
  color: var(--gold-deep, #877949);
  font-size: 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.acm-aw-arrow:hover:not(:disabled) {
  border-color: color-mix(in oklch, var(--gold, #b0a06c) 65%, transparent);
  color: var(--ink, #1f1f1f);
}
.acm-aw-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.acm-aw-viewport {
  overflow: hidden;
  position: relative;
  transition: height 0.3s ease;
}
.acm-aw-track {
  display: flex;
  align-items: flex-start;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.acm-aw-slide {
  flex: 0 0 100%;
  min-width: 0;
}
@media (prefers-reduced-motion: reduce) {
  .acm-aw-track,
  .acm-aw-viewport {
    transition: none;
  }
}
/* the awards list section sits on plain white (was the warm --paper tone) */
section:has(.acm-aw-viewport) {
  background: #fff !important;
}
/* the award text block fills the row so it sits flush against the logo
   (the row's justify-between was centering it between logo and chip) */
.acm-aw-slide li > .min-w-0 {
  flex: 1 1 auto;
  text-align: left;
}
/* issuer logo beside each award row (injected by initAwardLogos): quiet
   grayscale at rest so the mixed brand colours don't fight the page, full
   colour when the row is hovered */
.acm-aw-logo {
  flex: none;
  width: 72px;
  height: 48px;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.acm-aw-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) opacity(0.7);
  transition: filter 0.25s ease;
}
li:hover > .acm-aw-logo img {
  filter: none;
}
@media (max-width: 639.98px) {
  .acm-aw-logo {
    width: 52px;
    height: 40px;
  }
}

/*
 * News article hero — align the banner text with the body column
 * -------------------------------------------------------------------------
 * The article hero wraps its text in a CENTERED narrow container
 * (.container-page.max-w-[820px]) while the body below uses the full
 * container with a left-aligned max-w-[720px] block — so the headline
 * started ~220px to the right of the paragraphs. Let the hero container
 * span the standard page grid (left edges align) and cap the text width on
 * the children instead.
 */
section[class*="var(--charcoal)"] > .container-page.max-w-\[820px\] {
  max-width: var(--container-max) !important;
}
section[class*="var(--charcoal)"] > .container-page.max-w-\[820px\] > * {
  max-width: 820px;
}

/*
 * Leadership — full-bio expander: don't let the bio row inflate the cards
 * -------------------------------------------------------------------------
 * .acm-subtab-grid equalises card rows with grid-auto-rows:1fr. The full-bio
 * panel is inserted as its own grid row, so with 1fr rows EVERY row stretches
 * to the tallest one — the panel's — and all the cards balloon (a long bio on
 * a phone runs ~2000px, so each card did too). While a bio is open, size the
 * rows to their content; the 1fr equalisation returns when it closes.
 */
.acm-subtab-grid:has(.acm-bio-panel) {
  grid-auto-rows: auto;
}

/*
 * Leadership — Committees: description without the outer box
 * -------------------------------------------------------------------------
 * Each committee description ships in a bordered white card (p-7 border
 * bg-background). Drop the frame so the text sits directly on the paper
 * ground; the short gold tick stays as the accent above the heading, matching
 * the pillar/ledger treatment used elsewhere on the site.
 */
#committees [data-subtab-panel] > div {
  border: none !important;
  background: transparent !important;
  padding: 0.9rem 0 0 !important; /* room for the gold tick above the heading */
}

/* ==MOBILE-UX== Mobile usability fixes (phone/tablet only) ==================
 *
 * 1. iOS focus-zoom guard: every form control in the fragments ships at 14px
 *    (text-sm). iOS Safari auto-zooms the page when a focused field is under
 *    16px, which throws the reader out of the form. 16px on touch widths
 *    disables that zoom without changing the desktop scale.
 */
@media (max-width: 1023.98px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/*
 * 2a. Horizontal-nav scroll hints. The gold sticky sub-nav (Board of Directors
 *    / Executive Leadership / ... / Policies) overflows sideways on phones
 *    with the trailing items fully off-screen. next-enhancements.js
 *    (initScrollHints) stamps data-more-left/right on any scrollable nav;
 *    these edge fades appear only while more content actually exists in that
 *    direction, so at either end of the strip nothing is veiled.
 *    (Gated behind :has() like the other fixes in this file.)
 */
@media (max-width: 1023.98px) {
  .sticky.z-40 > .container-page::before,
  .sticky.z-40 > .container-page::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 38px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .sticky.z-40 > .container-page::before {
    left: 0;
    background: linear-gradient(to right, var(--gold, #b0a06c), transparent);
  }
  .sticky.z-40 > .container-page::after {
    right: 0;
    background: linear-gradient(to left, var(--gold, #b0a06c), transparent);
  }
  .sticky.z-40 > .container-page:has(> nav[data-more-left])::before {
    opacity: 1;
  }
  .sticky.z-40 > .container-page:has(> nav[data-more-right])::after {
    opacity: 1;
  }
}

/*
 * 2b. Leadership business-line tabs — carousel on phones/tablets. The
 *    horizontal tab strip hid all but the first business line off-screen on
 *    phones. next-enhancements.js (initSubtabCarousel) injects a carousel
 *    control — the current line label centred between ← / → arrows that cycle
 *    through the tabs — before each tab list. Below 1024px it replaces the
 *    tablist; desktop keeps the sidebar. display:none needs !important — the
 *    fragment's inline <style> loads after fixes.css and re-sets display:flex.
 */
@media (max-width: 1023.98px) {
  .acm-subtab-nav {
    display: none !important;
  }
  /* bare control — no card frame or background, just arrows + label */
  .acm-subtab-carousel {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 1.5rem;
    border: 0;
    background: transparent;
  }
  .acm-subtab-current {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.85rem 0.5rem;
    font-family: var(--font-sans, Inter, sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
    line-height: 1.25;
    color: var(--ink, #1f1f1f);
  }
  .acm-subtab-arrow {
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--gold-deep, #877949);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
  }
  .acm-subtab-arrow:hover {
    color: var(--ink, #1f1f1f);
  }
  .acm-subtab-arrow--prev:hover {
    transform: translateX(-2px);
  }
  .acm-subtab-arrow--next:hover {
    transform: translateX(2px);
  }
}
@media (min-width: 1024px) {
  .acm-subtab-carousel {
    display: none;
  }
}

/*
 * Mobile menu (#acm-mobile-menu, built by initMobileMenu)
 * -------------------------------------------------------------------------
 * Full-screen charcoal drawer with the Acumen wordmark anchored top-left and
 * an accordion so phones can reach the sub-pages the desktop mega-menu shows.
 * Primary items are Fraunces; sub-pages use the site's sub-nav vocabulary
 * (uppercase gold with a small gold tick) so the drawer reads as native.
 */
#acm-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--charcoal, #1f1f1f);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 0 1.75rem 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.acm-mm-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0 1.5rem;
  background: var(--charcoal, #1f1f1f);
}
.acm-mm-logo {
  display: inline-flex;
  align-items: center;
  color: var(--cream, #f3eed8);
}
.acm-mm-logo > span {
  display: inline-block;
  height: 26px;
  aspect-ratio: 473 / 112;
  background-color: currentColor;
  -webkit-mask-image: url(/__l5e/assets-v1/f5307620-806e-430d-bc91-31a2659b69fc/acumen-wordmark.png);
  mask-image: url(/__l5e/assets-v1/f5307620-806e-430d-bc91-31a2659b69fc/acumen-wordmark.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.acm-mm-close {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  background: none;
  border: 0;
  color: var(--cream, #f3eed8);
  cursor: pointer;
}
.acm-mm-nav {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  margin-bottom: auto;
}
.acm-mm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.acm-mm-link {
  flex: 1 1 auto;
  padding: 0.85rem 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.55rem;
  letter-spacing: -0.01em;
  color: var(--cream, #f3eed8);
  text-decoration: none;
  transition: color 0.2s ease;
}
.acm-mm-link:hover,
.acm-mm-link:active {
  color: var(--gold, #b0a06c);
}
.acm-mm-chev {
  flex: none;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--gold, #b0a06c);
  cursor: pointer;
  transition: transform 0.25s ease;
}
.acm-mm-chev[aria-expanded="true"] {
  transform: rotate(180deg);
}
.acm-mm-sub {
  display: flex;
  flex-direction: column;
  padding: 0.25rem 0 0.9rem 0.25rem;
}
.acm-mm-sublink {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0;
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--cream, #f3eed8) 78%, transparent);
  text-decoration: none;
  transition: color 0.2s ease;
}
.acm-mm-tick {
  flex: none;
  width: 16px;
  height: 2px;
  background: var(--gold, #b0a06c);
  transition: width 0.2s ease;
}
.acm-mm-sublink:hover,
.acm-mm-sublink:active {
  color: var(--gold-soft, #f3eed8);
}
.acm-mm-sublink:hover .acm-mm-tick {
  width: 26px;
}
@media (prefers-reduced-motion: reduce) {
  .acm-mm-chev,
  .acm-mm-tick {
    transition: none;
  }
}

/*
 * 3. Touch-target sizes. Footer column/legal links measure ~21px tall and the
 *    hero fund-ticker chips ~26px — well under the ~44px touch guideline.
 *    Vertical padding grows the hit area on touch widths; inline-block so the
 *    padding actually takes on the inline links.
 */
@media (max-width: 1023.98px) {
  footer[role="contentinfo"] a {
    display: inline-block;
    padding-block: 5px;
  }
  .acm-fund-chip {
    padding-block: 9px;
  }
}

/*
 * GT Sectra — repair the display font
 * -------------------------------------------------------------------------
 * The exported stylesheet's @font-face rules point at /__l5e/assets-v1/…
 * paths from the original hosting environment, which 404 here, so every
 * heading silently fell back to Fraunces. Re-declare the same family/weights
 * against the woff2 files generated from the brand kit's TTFs
 * (public/brand-assets/kit/Typography). fixes.css loads after the main
 * stylesheet, so these later declarations win.
 */
@font-face {
  font-family: "GT Sectra";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/gt-sectra-400.woff2) format("woff2");
}
@font-face {
  font-family: "GT Sectra";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/gt-sectra-500.woff2) format("woff2");
}
@font-face {
  font-family: "GT Sectra";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/gt-sectra-700.woff2) format("woff2");
}
@font-face {
  font-family: "GT Sectra";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/gt-sectra-900.woff2) format("woff2");
}

/*
 * Brand kit — marque grid. The exported utilities on these tiles
 * (min-h-[160px], max-h-[96px]) were never emitted into the compiled
 * stylesheet, so every logo rendered at its natural size and the tiles
 * came out wildly uneven. Enforce the intended uniform tile geometry.
 */
.bk-marque-grid figure > div {
  min-height: 160px;
  max-height: 200px;
  padding: 2rem;
}
.bk-marque-grid figure img {
  max-height: 96px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/*
 * Mobile back CTA — injected by initMobileBackCta (next-enhancements.js) at
 * the top of <main> on nested routes. Desktop keeps the full nav, so the
 * strip only appears under 768px.
 */
.acm-back-cta { display: none; }
@media (max-width: 767px) {
  .acm-back-cta {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem max(24px, 2.5vw);
    background: var(--charcoal);
    color: var(--gold);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-bottom: 1px solid color-mix(in oklch, var(--gold) 22%, transparent);
    transition: color 0.2s ease;
  }
  .acm-back-cta:hover, .acm-back-cta:active { color: var(--gold-soft, #e8dcb8); }
  .acm-back-cta svg { flex-shrink: 0; }
}


/* ==AMD-LOGOS== Notable Mandates client logos (Advisory & Activism ledger) ==
 * Percentage bars/ROI removed; the client logo now sits transparently in the
 * right-hand slot of each row (the PNGs themselves are background-cleared).
 * Rows without a logo keep just the name/description. */
.amd-ledger--logos .amd-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.9rem 1.5rem}
.amd-logo{flex:none;display:flex;align-items:center;justify-content:center;width:118px;height:76px}
.amd-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
@media(max-width:519.98px){.amd-logo{width:96px;height:64px}}

/* Advisory & Activism — Overview: let the heading and body copy span the
 * full content width instead of the 18ch/60ch columns. */
#advisory .max-w-\[18ch\],
#advisory .max-w-\[60ch\]{max-width:none}
/* …and let the Notable Mandates sub-heading run on one line (base rule
 * caps .amd-summary at 44ch). */
section:has(.amd-ledger--logos) .amd-summary{max-width:none}

/* ==WWD-QUOTE-AUTHOR== business-line pages: the Executive Leadership lists
 * were removed; the line quote now carries a portrait of its author. Same
 * circular crop language as .wwd-leader-photo, scaled up. */
.wwd-line-quote--author{display:flex;align-items:center;gap:clamp(1.25rem,2.5vw,2.25rem)}
.wwd-quote-photo{position:relative;flex:none;width:clamp(88px,10vw,128px);height:clamp(88px,10vw,128px);border-radius:50%;overflow:hidden;background:var(--off-white,#f5f3ee);border:1px solid color-mix(in oklch,var(--gold,#b0a06c) 45%,transparent)}
.wwd-quote-photo img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%;display:block}
.wwd-quote-body{flex:1;min-width:0}
@media(max-width:519.98px){.wwd-line-quote--author{flex-direction:column;align-items:flex-start}}