:root {
  --ink: #fdfcf8;
  --black: #efeadf;
  --navy: #f7f4ec;
  --navy-2: #f2eee4;
  --navy-3: #ece7db;
  --gold: #664d0d;
  --gold-soft: #5f470c;
  --gold-dim: rgba(102, 77, 13, 0.42);
  --cream: #111b2e;
  --text: #111b2e;
  --text-dim: #333d55;
  --muted: #454d61;
  --hairline: rgba(17, 27, 46, 0.16);
}

/* ---------- type ---------- */
/* Definition, not boldness (principal's request): dark-on-light strokes lack
   the optical thickening that light-on-dark text gets, and Cormorant's regular
   weight reads wispy on ivory. Two changes:
   1. Body weight 400 -> 500 (the true medium cut, loaded from Google Fonts,
      not a synthesized bold) for all running text. Headings keep their own
      explicit weights, so titles are untouched.
   2. font-smoothing back to the platform default - "antialiased" thins dark
      text on light grounds on macOS. */
body {
  font-weight: 500;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
.form label.consent { font-weight: 500; }
/* form controls and buttons do not inherit body weight from the UA stylesheet */
.nav .nav-top { font-weight: 500; }
.form input, .form select, .form textarea { font-weight: 500; }
h1, h2, h3, .display { color: var(--text); }
::selection { background: var(--gold); color: #fff; }

/* ---------- header ---------- */
.site-header.scrolled,
body.no-hero .site-header {
  background: rgba(247, 244, 236, 0.92);
  box-shadow: 0 1px 0 var(--hairline);
}
.brand svg { fill: var(--text); opacity: 1; }
.brand .wordmark { color: var(--text); }
/* the supplied wordmark is white artwork; invert it for light grounds */
.brand img.logo-img { filter: invert(1) brightness(0.28) saturate(0.7); }
.nav .nav-top { color: var(--text-dim); }
.nav .nav-top:hover { color: var(--gold); }
.dropdown {
  background: rgba(253, 252, 248, 0.99);
  border-color: var(--hairline);
  box-shadow: 0 18px 40px rgba(17, 27, 46, 0.13);
}
.dropdown a { color: var(--text-dim); }
.dropdown a:hover { color: var(--gold); background: rgba(17, 27, 46, 0.05); }
.account-btn {
  border-color: rgba(17, 27, 46, 0.28);
  background: rgba(17, 27, 46, 0.05);
  color: var(--text-dim);
}
.account-btn:hover { border-color: var(--gold); color: var(--gold); }
.nav-toggle { color: var(--text); }
@media (max-width: 1020px) {
  .nav { background: rgba(250, 248, 242, 0.99); }
}

/* ---------- hero ---------- */
/* Heroes sit over photography and video. Instead of a dark scrim with white
   text, the light build lays an ivory wash over the media and sets the text in
   deep navy - the effect of a photograph printed under vellum. The wash
   deepens toward the centre and foot of the frame, where the text sits, so
   legibility does not depend on what the footage is doing. */
.hero {
  background:
    radial-gradient(1200px 600px at 70% 20%, rgba(102, 77, 13, 0.07), transparent 60%),
    linear-gradient(180deg, #fbf9f3 0%, var(--navy) 55%, #efe9dc 100%);
}
.hero::after {
  background: linear-gradient(180deg, transparent, rgba(247, 244, 236, 0.55));
}
/* Two layers: a soft vertical wash so the foot of the frame carries the page
   ground, plus an elliptical wash concentrated behind the centred text block.
   Combined they reach roughly 0.9 opacity where the words sit — enough to hold
   deep-navy type over busy footage — while the top edge stays near 0.45 so the
   image is still clearly present. */
.hero-bg::after {
  background:
    radial-gradient(110% 70% at 50% 48%,
      rgba(247, 244, 236, 0.75) 0%,
      rgba(247, 244, 236, 0.25) 60%,
      rgba(247, 244, 236, 0) 100%),
    linear-gradient(180deg,
      rgba(247, 244, 236, 0.45) 0%,
      rgba(247, 244, 236, 0.62) 45%,
      rgba(247, 244, 236, 0.90) 100%);
}
.hero .tagline { color: var(--text-dim); }
.hero .tagline .em { color: var(--gold-soft); }
.hero .hero-media-tag {
  color: var(--gold);
  background: rgba(253, 252, 248, 0.85);
  border-color: var(--gold-dim);
}

/* ---------- heroes over MEDIA: identical to the dark build ----------
   Principal's instruction (2026-08-27): hero videos must show exactly as they
   do in the dark version - no ivory tint. Extended 2026-09-03 to still-image
   heroes as well (owner: the ivory wash read as a washed-out white filter).
   These sections keep the dark scrim and light type from the base stylesheet;
   the build adds .hero-on-video to any hero whose background is a <video> or
   an <img>. The dark band then sits on the ivory page as a deliberate
   full-bleed plate, matching the contact banner. */
/* stop list written EXACTLY as the base stylesheet writes it, so the computed
   style is byte-identical to the dark build and parity can be asserted */
.hero-on-video .hero-bg::after {
  background: linear-gradient(180deg, rgba(6, 9, 16, 0.55), rgba(6, 9, 16, 0.35) 45%, rgba(6, 9, 16, 0.7));
}
.hero-on-video::after {
  background: linear-gradient(180deg, transparent, rgba(6, 9, 16, 0.65));
}
.hero-on-video h1 { color: #fff; }
.hero-on-video .tagline { color: rgba(255, 255, 255, 0.85); }
.hero-on-video .tagline .em { color: #d9bd8c; }
/* the base gold kicker measures 3.85:1 over the scrim's worst case (a flaw
   inherited from the dark design, surfaced by over-media contrast checking);
   the lighter house gold clears 5:1 without changing the look */
.hero-on-video .kicker { color: #d9bd8c; }
.hero-on-video .kicker::after { border-bottom-color: rgba(200, 163, 95, 0.35); }
.hero-on-video .hero-media-tag {
  color: #c8a35f;
  background: rgba(6, 9, 16, 0.72);
  border-color: rgba(200, 163, 95, 0.35);
}
/* buttons sitting on the dark media plate use the dark build's gold, not the
   deepened light-theme gold (which would vanish against the scrim) */
.hero-on-video .btn { color: #d9bd8c; border-color: #c8a35f; }
.hero-on-video .btn:hover { background: #c8a35f; color: #050810; }
.hero-on-video .btn.solid { background: #c8a35f; color: #050810; }
.hero-on-video .btn.solid:hover { background: #d9bd8c; color: #050810; }

/* On pages whose hero is a dark video plate, the FIXED header floats over it
   until the page scrolls. Dark-navy chrome is unreadable there, so the header
   keeps the dark build's light chrome while unscrolled, and switches to the
   light theme's dark-on-ivory chrome the moment the .scrolled bar appears.
   (This gap was found visually after the automated audit missed it - the
   audit now models fixed-header stacking on these pages too.) */
.video-hero-page .site-header:not(.scrolled) .nav .nav-top { color: rgba(255, 255, 255, 0.88); }
.video-hero-page .site-header:not(.scrolled) .nav .nav-top:hover { color: #d9bd8c; }
.video-hero-page .site-header:not(.scrolled) .brand .wordmark { color: #fff; }
.video-hero-page .site-header:not(.scrolled) .brand svg { fill: #fff; }
.video-hero-page .site-header:not(.scrolled) .brand img.logo-img { filter: none; }
.video-hero-page .site-header:not(.scrolled) .nav-toggle { color: #fff; }
.video-hero-page .site-header:not(.scrolled) .account-btn {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}
/* the pop-out dropdown panel paints its own light background, so its links
   stay dark regardless of scroll state */
.video-hero-page .site-header:not(.scrolled) .dropdown a { color: #333d55; }
.video-hero-page .site-header:not(.scrolled) .dropdown a:hover { color: #664d0d; }
@media (max-width: 1020px) {
  /* the open mobile menu also paints its own light panel */
  .video-hero-page .site-header:not(.scrolled) .nav.open .nav-top { color: #333d55; }
}

/* ---------- media ---------- */
.media-ph {
  border-color: rgba(102, 77, 13, 0.5);
  background:
    repeating-linear-gradient(45deg, rgba(17, 27, 46, 0.03) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, var(--navy-2), var(--navy-3));
}
.media-ph .ph-play { border-color: rgba(17, 27, 46, 0.3); color: var(--text-dim); }
.media-ph .ph-desc { color: var(--muted); }
.media-real img, .media-real video { border-color: var(--hairline); }

/* ---------- cards and panels ---------- */
.card {
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.35));
  box-shadow: 0 1px 2px rgba(17, 27, 46, 0.04);
}
.card:hover { border-color: var(--gold-dim); }
.stat .stat-value { color: var(--text); }
.rh-stat-value { color: var(--text); }
.fund-meta { background: linear-gradient(170deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4)); }
.featured-card { background: linear-gradient(160deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4)); }
.fc-art { background: rgba(17, 27, 46, 0.03); }
.chart-card { background: var(--ink); box-shadow: 0 1px 2px rgba(17, 27, 46, 0.05); }
.fund-tags .tag.status { color: #2e6345; border-color: rgba(46,99,69,0.55); }

/* ---------- marquee ---------- */
.marquee .track { color: rgba(17, 27, 46, 0.68); }

/* ---------- longform sidebar ---------- */
.side-toc a:hover, .side-toc a.active { color: var(--text); border-left-color: var(--gold); }

/* ---------- forms ---------- */
.form input, .form select, .form textarea {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(17, 27, 46, 0.18);
  color: var(--text);
}
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--gold);
  background: #fff;
}
.form input::placeholder, .form textarea::placeholder { color: rgba(17, 27, 46, 0.4); }

/* ---------- buttons ---------- */
.btn { color: var(--gold); }
.btn:hover { background: var(--gold); color: #fff; }
.btn.solid { background: var(--gold); color: #fff; }
.btn.solid:hover { background: #5f470c; color: #fff; }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(102, 77, 13, 0.09), transparent 65%),
    var(--black);
}

/* ---------- contact video banner ---------- */
/* This is a contained media plate, not a page ground, and its footage is very
   dark. Washing it toward ivory turns it grey; it keeps the dark scrim and
   light caption from the base stylesheet and reads as a deliberate dark inset
   on the ivory page. Only the frame is warmed to match. */
.video-banner { border-color: rgba(17, 27, 46, 0.18); }

/* ---------- fund charts, legends, cross-fund strip ---------- */
.legend-line.teal { background: #2f7f80; }
.legend-line.red { background: #9d3b3b; }
.legend-line.green { background: #2e6345; }
.legend-line.grey { background: rgba(17, 27, 46, 0.35); }
.fund-nav a.current { color: var(--gold); }
.fund-nav a:hover { color: var(--gold); }

/* ---------- Invest page ---------- */
.compare .cmp { background: linear-gradient(170deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4)); }
table.perf-table td.pos { color: #2e6345; }
table.perf-table td.neg { color: #9d3b3b; }
.provider-strip .ps-logos { background: #ffffff; }
.form .file-drop { background: rgba(255, 255, 255, 0.6); border-color: rgba(102, 77, 13, 0.5); }
.form .file-field:hover .file-drop, .form .file-field:focus-within .file-drop { background: #fff; }

/* ---------- email contact block ---------- */
.email-block { background: linear-gradient(170deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4)); }
.email-block .email-cta { color: var(--gold); }
.email-block .email-cta:hover { color: var(--text); border-bottom-color: var(--gold); }

/* ---------- footer ---------- */
.site-footer { border-top-color: var(--hairline); }