/* ==========================================================================
   Berjaya Mutual — /v4 shared shell add-ons
   Loaded on every /v4 page after the per-page stylesheet. Only holds the
   pieces the ChatGPT prototype did not ship: the EN/BM language switch, the
   preview badge, and cross-page safety rules. Namespaced loosely to .site-*
   so it never leaks outside the v4 layout.
   ========================================================================== */

/* ==========================================================================
   THEME TOKENS — canonical, theme-aware, page-independent
   The prototype's homepage stylesheet uses --text-primary / --text-secondary
   while the inner-page stylesheet (about.css) uses --text / --muted. So on
   inner pages --text-primary was undefined and fell back to WHITE, which is
   invisible on the light background. shared.css loads last on every page, so
   defining every colour token here — light by default, dark under
   [data-theme="dark"] / prefers-color-scheme — makes body copy legible on
   every /v4 page regardless of which per-page stylesheet is loaded.
   ========================================================================== */
:root {
  --text-primary: #0b2434;
  --text-secondary: #4c6474;
  --muted: #4c6474;
  --white: #0b2434;
  --text: #12344b;
  --border: rgba(24, 103, 142, 0.18);
  --line: rgba(24, 103, 142, 0.18);
  --surface: rgba(255, 255, 255, 0.74);
  --surface-elevated: rgba(255, 255, 255, 0.92);
  --panel: rgba(255, 255, 255, 0.82);
  --bg-secondary: #eef4f8;
}
:root[data-theme="light"] {
  --text-primary: #0b2434;
  --text-secondary: #4c6474;
  --muted: #4c6474;
  --white: #0b2434;
  --text: #12344b;
  --border: rgba(24, 103, 142, 0.18);
  --line: rgba(24, 103, 142, 0.18);
  --surface: rgba(255, 255, 255, 0.74);
  --surface-elevated: rgba(255, 255, 255, 0.92);
  --panel: rgba(255, 255, 255, 0.82);
  --bg-secondary: #eef4f8;
}
:root[data-theme="dark"] {
  --text-primary: #e9f4fe;
  --text-secondary: #a9c1d2;
  --muted: #a9c1d2;
  --white: #e9f4fe;
  --text: #e2f4ff;
  --border: rgba(72, 209, 255, 0.2);
  --line: rgba(72, 209, 255, 0.2);
  --surface: rgba(4, 25, 40, 0.72);
  --surface-elevated: rgba(5, 35, 56, 0.88);
  --panel: rgba(4, 25, 40, 0.82);
  --bg-secondary: #03111f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text-primary: #e9f4fe;
    --text-secondary: #a9c1d2;
    --muted: #a9c1d2;
    --white: #e9f4fe;
    --text: #e2f4ff;
    --border: rgba(72, 209, 255, 0.2);
    --line: rgba(72, 209, 255, 0.2);
    --surface: rgba(4, 25, 40, 0.72);
    --surface-elevated: rgba(5, 35, 56, 0.88);
    --panel: rgba(4, 25, 40, 0.82);
    --bg-secondary: #03111f;
  }
}

/* ==========================================================================
   HEADER — authoritative layout for the /v4 shell
   The ChatGPT prototype nav was built for ~7 short links + one dropdown.
   /v4 adds a wordmark, three dropdowns and an EN/BM switch, so the header
   is re-laid-out here (this file loads last, so these rules win).
   ========================================================================== */
.site-header {
  justify-content: space-between !important;
  gap: clamp(10px, 1.6vw, 22px) !important;
  padding: 0 clamp(16px, 4vw, 40px) !important;
}
.site-header .brand {
  flex: 0 0 auto;
  gap: 9px;
  min-width: fit-content;
  z-index: 2;
}
.site-header .brand-logo {
  width: auto !important;
  height: 34px !important;
  max-height: 34px !important;
  filter: none !important;
}
.site-header .brand__name {
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: var(--text-primary, #f8fbff);
}
:root[data-theme="light"] .site-header .brand__name { color: #08314d; }

.site-header .site-nav {
  flex: 1 1 auto;
  justify-content: center;
  gap: clamp(6px, 1vw, 15px) !important;
  font-size: clamp(0.7rem, 0.82vw, 0.8rem) !important;
  min-width: 0;
}
/* short labels in the bar: keep the long ones from wrapping / overflowing */
.site-header .site-nav > a,
.site-header .site-nav .nav-parent { padding: 10px 2px; }

.site-header .header-actions { flex: 0 0 auto; gap: 8px; }
.site-header .search-link { width: 36px; height: 36px; }
.site-header .search-link svg { width: 18px; height: 18px; }
.site-header .login-button { min-height: 36px; padding: 8px 14px; font-size: 0.76rem; }

/* the drawer-only controls never show on desktop */
.nav-drawer-controls { display: none; }
.site-nav .theme-control--mobile,
.site-nav .lang-switch--mobile { display: none; }

/* ---- Language switch — styled to sit beside the theme control ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(71, 203, 255, 0.24);
  border-radius: 999px;
  background: rgba(2, 18, 30, 0.54);
  box-shadow: inset 0 0 18px rgba(0, 166, 255, 0.1);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}
:root[data-theme="light"] .lang-switch {
  border-color: rgba(24, 103, 142, 0.16);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 20px rgba(0, 118, 186, 0.07);
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--muted, #a8bdd0);
  transition: background 200ms ease, color 200ms ease;
}
.lang-switch a:hover { color: var(--text-primary, #f8fbff); }
.lang-switch a.is-active {
  background: linear-gradient(135deg, rgba(0, 166, 255, 0.22), rgba(99, 220, 113, 0.2));
  color: var(--white, #f8fbff);
  box-shadow: 0 0 16px rgba(0, 166, 255, 0.14);
}
:root[data-theme="light"] .lang-switch a.is-active { color: #063251; }

/* ---- Hamburger earlier: the full bar only fits comfortably ~1180px+ ---- */
@media (max-width: 1240px) {
  .site-header .site-nav,
  .site-header .header-actions { display: none !important; }
  .site-header .nav-toggle {
    display: grid !important;
    width: 44px; height: 44px;
    place-content: center;
    gap: 5px;
    border: 1px solid var(--line, rgba(71, 203, 255, 0.22));
    border-radius: 50%;
    background: rgba(1, 15, 25, 0.7);
    color: var(--white, #f8fbff);
  }
  :root[data-theme="light"] .site-header .nav-toggle {
    background: rgba(255, 255, 255, 0.82);
    color: #08314d;
  }
  .site-header .nav-toggle span:not(.sr-only) { width: 20px; height: 2px; background: currentColor; border-radius: 2px; }

  body.nav-open .site-header .site-nav {
    position: fixed;
    top: var(--header-height, 74px);
    left: 0; right: 0;
    max-height: calc(100dvh - var(--header-height, 74px));
    overflow-y: auto;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 18px clamp(16px, 5vw, 32px) 28px;
    background: rgba(2, 12, 21, 0.98);
    border-bottom: 1px solid var(--line, rgba(71, 203, 255, 0.22));
    font-size: 0.95rem !important;
  }
  :root[data-theme="light"] body.nav-open .site-header .site-nav {
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 26px 46px rgba(20, 82, 122, 0.12);
  }
  body.nav-open .site-nav > a,
  body.nav-open .site-nav .nav-menu,
  body.nav-open .site-nav .nav-parent { width: 100%; }
  body.nav-open .site-nav > a,
  body.nav-open .site-nav .nav-parent {
    padding: 13px 4px !important;
    font-weight: 700;
    border-bottom: 1px solid rgba(128, 170, 200, 0.14);
  }
  body.nav-open .site-nav .nav-menu.has-dropdown {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  /* dropdowns become an always-open inline list inside the drawer */
  body.nav-open .site-nav .nav-dropdown {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 2px 0 8px !important;
    padding: 6px !important;
    display: grid !important;
    gap: 1px;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    background: rgba(0, 166, 255, 0.08) !important;
  }
  :root[data-theme="light"] body.nav-open .site-nav .nav-dropdown { background: rgba(0, 118, 186, 0.06) !important; }
  body.nav-open .site-nav .nav-dropdown a {
    padding: 11px 14px !important;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary, #a8bdd0) !important;
  }
  body.nav-open .site-nav .nav-dropdown a:hover { color: var(--brand-green, #63dc71) !important; }
  body.nav-open .site-nav a::after,
  body.nav-open .site-nav .nav-parent::after { display: none !important; }

  /* theme + language controls pinned to the bottom of the drawer */
  body.nav-open .nav-drawer-controls {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(128, 170, 200, 0.18);
  }
  body.nav-open .site-nav .theme-control--mobile { display: inline-grid !important; }
  body.nav-open .site-nav .lang-switch--mobile { display: inline-flex !important; }
}

@media (max-width: 380px) {
  .site-header .brand__name { display: none; }
}

/* ==========================================================================
   Reveal-on-scroll safety net
   The prototype hides [data-reveal] elements until an IntersectionObserver
   adds .is-visible. If that observer misses an element (large blocks, async
   timing, reduced-motion), the section stays invisible but still takes
   layout space -> a big empty gap. These rules + the layout fallback script
   guarantee the revealed state is actually painted.
   ========================================================================== */
[data-reveal].is-visible,
[data-load].is-visible {
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
}
/* card wrappers on the homepage "Products & Services" grid must be block
   so the grid lays them out (an <a> is inline by default) */
.solutions-grid > a { display: block; height: 100%; color: inherit; }

/* ==========================================================================
   Story cards ("Individual / Institutional Investors") — light-theme text
   The prototype styles these cards dark-first (near-white copy over a dark
   scrim). In light mode the card + scrim turn pale but the sub-labels stay
   near-white and vanish. Give them legible, on-brand colours.
   ========================================================================== */
:root[data-theme="light"] .story-card h3 { color: #06263b; }
:root[data-theme="light"] .story-card p {
  color: #0a5c86;
  text-shadow: none;
}
:root[data-theme="light"] .story-card__content span {
  color: #06263b;
  text-shadow: none;
}
:root[data-theme="light"] .round-action {
  color: #06405f;
  border-color: rgba(0, 126, 188, 0.42);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 16px rgba(0, 126, 188, 0.1);
}

/* ==========================================================================
   FOOTER — authoritative layout for every /v4 page
   The prototype's .site-footer is `display:grid` sized for exactly four
   children; /v4 needs a real multi-column link footer, so it is fully
   re-built here. This file loads last on every page, so this is what wins
   and the footer is identical everywhere.
   ========================================================================== */
.site-footer.v4-footer {
  display: block !important;
  grid-template-columns: none !important;
  padding: 0 !important;
  background: #02111c;
  color: var(--text-secondary, #a8bdd0);
  border-top: 1px solid rgba(71, 203, 255, 0.14);
}
:root[data-theme="light"] .site-footer.v4-footer {
  background: #eef4f8;
  color: #4a6070;
  border-top: 1px solid rgba(24, 103, 142, 0.14);
}

/* neutralise the prototype's `.site-footer nav { display:flex }` /
   `.site-footer p { text-align:right }` etc. for our rebuilt footer */
.site-footer.v4-footer nav { display: block; gap: 0; justify-content: flex-start; font-size: inherit; font-weight: inherit; }
.site-footer.v4-footer p { text-align: left; font-weight: inherit; }
.site-footer.v4-footer address { font-size: inherit; }

.v4-footer__inner {
  max-width: var(--max, 1160px);
  margin: 0 auto;
  padding: clamp(44px, 6vw, 72px) clamp(20px, 5vw, 40px) clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.v4-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
}
.v4-footer__logo img { height: 34px; width: auto; display: block; }
.v4-footer__logo span {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.015em;
  color: var(--text-primary, #f4faff);
}
:root[data-theme="light"] .v4-footer__logo span { color: #08314d; }

.site-footer.v4-footer .v4-footer__tag {
  margin: 0 0 16px;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--text-primary, #dbe9f4);
}
:root[data-theme="light"] .site-footer.v4-footer .v4-footer__tag { color: #1f3a4b; }

.site-footer.v4-footer .v4-footer__addr {
  margin: 0 0 16px;
  font-style: normal;
  font-size: 0.82rem;
  line-height: 1.7;
}
.v4-footer__addr a { color: inherit; }
.v4-footer__addr a:hover { color: var(--brand-blue, #00a6ff); }

.v4-footer__col h4 {
  margin: 0 0 14px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-green, #63dc71);
}
:root[data-theme="light"] .v4-footer__col h4 { color: #076aa0; }
.v4-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.v4-footer__col a {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-secondary, #a8bdd0);
  transition: color 160ms ease;
}
.v4-footer__col a:hover { color: var(--text-primary, #f4faff); }
:root[data-theme="light"] .v4-footer__col a { color: #4a6070; }
:root[data-theme="light"] .v4-footer__col a:hover { color: #08314d; }

.v4-footer__bar {
  border-top: 1px solid rgba(128, 170, 200, 0.16);
}
.v4-footer__bar > div {
  max-width: var(--max, 1160px);
  margin: 0 auto;
  padding: 18px clamp(20px, 5vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.site-footer.v4-footer .v4-footer__bar p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-secondary, #90a9be);
}
.v4-footer__bar p span { opacity: 0.65; }
.site-footer.v4-footer .v4-footer__bar p:last-child { font-family: var(--bv-font-mono, monospace); font-size: 0.72rem; opacity: 0.7; }

@media (max-width: 900px) {
  .v4-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .v4-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .v4-footer__inner { grid-template-columns: 1fr; }
  .v4-footer__bar > div { justify-content: flex-start; }
}

/* ---- Preview badge in the footer -------------------------------------- */
.v4-preview-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 10px;
  border: 1px dashed var(--border, rgba(71, 203, 255, 0.28));
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary, #a8bdd0);
  opacity: 0.75;
}

/* ---- Multi-dropdown nav (prototype only shipped one) ------------------ */
.site-nav .nav-menu.has-dropdown + .nav-menu.has-dropdown { margin-left: 0; }

/* ---- Generic inner-page content (routes with no bespoke v4 design) ---- */
.v4-page {
  max-width: var(--max, 1160px);
  margin: 0 auto;
  padding: clamp(120px, 16vh, 190px) clamp(20px, 5vw, 40px) clamp(64px, 10vh, 120px);
}
.v4-page__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-green, #63dc71);
}
.v4-page__eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
}
.v4-page h1 {
  margin: 18px 0 0;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.v4-page__lede {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.6;
  font-weight: 500;
  color: #3c586a;
}
:root[data-theme="dark"] .v4-page__lede { color: #b6cbdb; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .v4-page__lede { color: #b6cbdb; }
}
.v4-prose {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 1rem;
}
.v4-prose h2 {
  margin: 26px 0 0;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.v4-prose h3 {
  margin: 18px 0 0;
  font-size: 1.15rem;
  font-weight: 700;
}
.v4-prose p,
.v4-prose li { text-align: justify; color: var(--text-primary, #f8fbff); }
.v4-prose p { line-height: 1.75; }
.v4-prose ul,
.v4-prose ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; }
.v4-prose a { color: var(--brand-blue, #00a6ff); text-decoration: underline; text-underline-offset: 3px; }

/* self-consistent panel palette — card background and its text are set
   together so they always contrast, whatever the global tokens resolve to */
.v4-card, .v4-table-wrap, details.v4-acc, .v4-alert {
  --_panel: #ffffff;
  --_panel-2: #f2f7fa;
  --_ink: #0b2434;
  --_ink-soft: #45606f;
  --_edge: rgba(24, 103, 142, 0.16);
}
:root[data-theme="dark"] .v4-card,
:root[data-theme="dark"] .v4-table-wrap,
:root[data-theme="dark"] details.v4-acc,
:root[data-theme="dark"] .v4-alert {
  --_panel: rgba(8, 27, 42, 0.72);
  --_panel-2: rgba(10, 33, 50, 0.9);
  --_ink: #e9f4fe;
  --_ink-soft: #a9c1d2;
  --_edge: rgba(72, 209, 255, 0.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .v4-card,
  :root:not([data-theme="light"]) .v4-table-wrap,
  :root:not([data-theme="light"]) details.v4-acc,
  :root:not([data-theme="light"]) .v4-alert {
    --_panel: rgba(8, 27, 42, 0.72);
    --_panel-2: rgba(10, 33, 50, 0.9);
    --_ink: #e9f4fe;
    --_ink-soft: #a9c1d2;
    --_edge: rgba(72, 209, 255, 0.18);
  }
}

.v4-card {
  border: 1px solid var(--_edge);
  border-radius: 14px;
  background: var(--_panel);
  color: var(--_ink);
  padding: clamp(20px, 3vw, 30px);
}
.v4-card h3 { color: var(--_ink); }
.v4-card p, .v4-card li, .v4-card small, .v4-card__meta { color: var(--_ink-soft); }
.v4-card__meta { font-size: 12px; margin: 4px 0 0; }
.v4-card__list { margin: 14px 0 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 8px; }
.v4-card__list a { color: #0a6fb0; font-weight: 600; }
:root[data-theme="dark"] .v4-card__list a { color: #6fd0ff; }
.v4-card__list a:hover { text-decoration: underline; }

.v4-grid {
  margin-top: 30px;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}

.v4-table-wrap { margin-top: 24px; overflow-x: auto; border: 1px solid var(--_edge); border-radius: 14px; background: var(--_panel); }
.v4-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; color: var(--_ink); }
.v4-table th,
.v4-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--_edge); white-space: nowrap; }
.v4-table thead th {
  background: var(--_panel-2);
  color: var(--_ink);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.v4-table tbody td { color: var(--_ink-soft); }
.v4-table tbody tr:last-child td { border-bottom: 0; }

details.v4-acc {
  border: 1px solid var(--_edge);
  border-radius: 14px;
  background: var(--_panel);
  color: var(--_ink);
  overflow: hidden;
}
details.v4-acc + details.v4-acc { margin-top: 12px; }
details.v4-acc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-weight: 700;
  font-size: 1.05rem;
}
details.v4-acc > summary::-webkit-details-marker { display: none; }
details.v4-acc > summary svg { width: 18px; height: 18px; flex: 0 0 18px; transition: transform 220ms ease; }
details.v4-acc[open] > summary svg { transform: rotate(180deg); }
details.v4-acc > summary { color: var(--_ink); }
.v4-acc__body { padding: 0 22px 22px; color: var(--_ink-soft); }
.v4-acc__body > * { text-align: justify; }
.v4-acc__body h3 { color: var(--_ink); }

/* expandable person / profile card */
details.v4-card { cursor: default; }
details.v4-card > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
details.v4-card > summary::-webkit-details-marker { display: none; }
details.v4-card > summary h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
details.v4-card > summary .v4-card__role { font-size: 13px; font-weight: 600; color: var(--text-secondary, #a8bdd0); }
details.v4-card > summary .v4-card__more {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-blue, #00a6ff);
}
details.v4-card > summary .v4-card__more svg { width: 15px; height: 15px; transition: transform 200ms ease; }
details.v4-card[open] > summary .v4-card__more svg { transform: rotate(180deg); }
details.v4-card .v4-card__bio {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border, rgba(71, 203, 255, 0.22));
  font-size: 0.93rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
details.v4-card .v4-card__bio p { text-align: justify; line-height: 1.7; }

.v4-alert {
  margin-top: 30px;
  border: 1px solid var(--_edge);
  border-left: 3px solid var(--brand-green, #63dc71);
  border-radius: 12px;
  background: var(--_panel);
  color: var(--_ink-soft);
  padding: 18px 22px;
}
.v4-alert p { text-align: justify; color: var(--_ink-soft); }

.v4-actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }

/* form (contact / complaint) */
/* ==========================================================================
   --bv-* token aliases
   The ported /v3 markup uses --bv-* custom properties in inline styles.
   Map them onto the v4 palette so nothing renders unstyled.
   ========================================================================== */
:root {
  --bv-text: var(--text-primary, #f8fbff);
  --bv-text-secondary: var(--text-secondary, #a8bdd0);
  --bv-text-tertiary: color-mix(in srgb, var(--text-secondary, #a8bdd0) 78%, transparent);
  --bv-border: var(--border, rgba(71, 203, 255, 0.22));
  --bv-border-strong: color-mix(in srgb, var(--border, rgba(71, 203, 255, 0.4)) 100%, #fff 12%);
  --bv-neutral-0: var(--surface-elevated, rgba(4, 30, 49, 0.96));
  --bv-neutral-200: var(--text-secondary, #a8bdd0);
  --bv-primary-300: var(--brand-green, #63dc71);
  --bv-primary-500: var(--brand-blue, #00a6ff);
  --bv-blue-500: var(--brand-blue, #00a6ff);
  --bv-success: var(--brand-green, #63dc71);
  --bv-danger: #ff6b6b;
  --bv-radius-2: 10px;
  --bv-radius-3: 14px;
  --bv-shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.45);
  --bv-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ==========================================================================
   bv-* compatibility layer
   Inner /v4 routes reuse the content markup from the /v3 blades (same copy,
   same DB wiring). These rules give that markup the v4 dark / Inter look so
   nothing has to be re-authored. Only used inside the v4 layout.
   ========================================================================== */
.bv-section { padding-block: clamp(48px, 8vw, 96px); }
.bv-section--tight { padding-block: clamp(32px, 5vw, 60px); }
/* deliberate dark band — always dark, both themes; re-map the text tokens
   for its descendants so the ported inline `color:#fff` / --bv-neutral-200
   copy reads correctly */
.bv-section--inverse {
  background: linear-gradient(135deg, #072a41, #04202f);
  --text-primary: #f2f9ff;
  --text-secondary: #c3d6e6;
  --bv-neutral-200: #c3d6e6;
  --bv-text-secondary: #c3d6e6;
  --border: rgba(120, 200, 255, 0.22);
  color: #dce9f4;
}
.bv-section--inverse .bv-h2,
.bv-section--inverse h2,
.bv-section--inverse h3 { color: #f2f9ff; }
.bv-section--subtle { background: rgba(24, 103, 142, 0.045); }
:root[data-theme="dark"] .bv-section--subtle { background: rgba(255, 255, 255, 0.02); }
.bv-container { width: 100%; max-width: var(--max, 1160px); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.bv-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 960px) { .bv-layout { grid-template-columns: minmax(0, 1fr) 300px; } }
.bv-section-head { display: flex; flex-direction: column; gap: 12px; max-width: 62ch; margin-bottom: 32px; }
.bv-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-green, #63dc71);
}
.bv-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.bv-h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.14; letter-spacing: -0.02em; }
.bv-h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 700; }
.bv-lead { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--text-secondary, #a8bdd0); }
.bv-prose { display: flex; flex-direction: column; gap: 16px; font-size: 1rem; }
.bv-prose h2 { margin: 22px 0 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -0.015em; }
.bv-prose h3 { margin: 16px 0 0; font-size: 1.15rem; font-weight: 700; }
.bv-prose h4 { margin: 14px 0 0; font-size: 1rem; font-weight: 700; }
.bv-prose p, .bv-prose li { text-align: justify; line-height: 1.75; color: var(--text-primary, #f8fbff); }
.bv-prose ul, .bv-prose ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; }
.bv-prose a { color: var(--brand-blue, #00a6ff); text-decoration: underline; text-underline-offset: 3px; }
.bv-grid { display: grid; gap: 18px; align-items: start; }
.bv-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.bv-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; }
.bv-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.bv-table th, .bv-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.bv-table thead th { background: var(--surface-elevated, rgba(4, 30, 49, 0.86)); font-weight: 700; }
.bv-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.bv-table .fund-name { font-weight: 600; }
.bv-table-note, .bv-table__note { margin-top: 12px; font-size: 13px; color: var(--text-secondary); }
.bv-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px; font-weight: 700; font-size: 14px;
  background: linear-gradient(135deg, var(--brand-blue, #00a6ff), var(--brand-green, #63dc71));
  color: #02121f; border: 1px solid transparent;
}
.bv-btn--ghost { background: transparent; color: var(--text-primary, #f8fbff); border-color: var(--border); }
.bv-btn--light { background: var(--white, #f8fbff); color: #02121f; }
.bv-reveal { opacity: 1; }
.bv-section-head--between { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; max-width: none; }

.bv-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface, rgba(3, 22, 35, 0.82));
  padding: clamp(20px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bv-card h3 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.bv-card img { border-radius: 10px; }

.bv-textlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 14px;
  color: var(--brand-blue, #00a6ff);
}
.bv-textlink svg { width: 15px; height: 15px; }

.bv-news { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bv-news__item { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.bv-news__media { height: 170px; background-size: cover; background-position: center; }
.bv-news__body { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.bv-news__date { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); }
.bv-news__date svg { width: 15px; height: 15px; }
.bv-news__body h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.bv-news__body p { text-align: justify; font-size: 0.92rem; color: var(--text-secondary); }
.bv-news__text p { margin: 0 0 .6em; }
.bv-news__text p:last-child { margin-bottom: 0; }

.bv-placeholder {
  display: flex; align-items: center; gap: 12px;
  border: 1px dashed var(--border); border-radius: 14px;
  padding: 18px 22px; color: var(--text-secondary);
}
.bv-placeholder svg { width: 22px; height: 22px; flex: 0 0 22px; }

.bv-cta {
  position: relative; overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--bg-secondary, #03111f), rgba(0, 166, 255, 0.14));
  border: 1px solid var(--border);
  padding: clamp(30px, 5vw, 56px);
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
.bv-cta h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; }
.bv-cta p { color: var(--text-secondary); max-width: 60ch; }

.bv-faq-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.bv-faq-nav a {
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.bv-faq-nav a:hover { color: var(--text-primary); border-color: var(--brand-blue, #00a6ff); }
.bv-faq-cat { margin-top: 48px; }
.bv-faq-cat details.bv-card { padding: 0; }
.bv-faq-cat details.bv-card > summary { padding: 18px 22px; list-style: none; }
.bv-faq-cat details.bv-card > summary::-webkit-details-marker { display: none; }
.bv-faq-cat details.bv-card > summary svg { transition: transform 200ms ease; }
.bv-faq-cat details.bv-card[open] > summary svg { transform: rotate(180deg); }
.bv-faq-cat details.bv-card > .bv-prose { padding: 0 22px 22px; }

details.bv-acc {
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); overflow: hidden;
}
details.bv-acc > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 24px; font-weight: 800; font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}
details.bv-acc > summary::-webkit-details-marker { display: none; }
details.bv-acc > summary svg { width: 20px; height: 20px; flex: 0 0 20px; transition: transform 200ms ease; }
details.bv-acc[open] > summary svg { transform: rotate(180deg); }
.bv-acc__body { padding: 0 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.bv-acc__body details.bv-card { padding: 16px 18px; }
.bv-acc__body details.bv-card > summary { list-style: none; }
.bv-acc__body details.bv-card > summary::-webkit-details-marker { display: none; }

.bv-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.v4-form { margin-top: 30px; display: grid; gap: 16px; max-width: 640px; }
.v4-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.v4-form input,
.v4-form textarea,
.v4-form select {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-elevated, rgba(4, 30, 49, 0.86));
  color: var(--text-primary);
}
.v4-form textarea { min-height: 130px; resize: vertical; }
.v4-form .v4-form__submit { justify-self: start; }
.v4-flash {
  margin-top: 24px;
  border: 1px solid var(--brand-green, #63dc71);
  border-radius: 12px;
  padding: 14px 18px;
  background: rgba(99, 220, 113, 0.1);
  color: var(--text-primary);
}

/* ---- infotek content alignment (Oct 2026) ---- */
.v4-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #a8bdd0);
}
.v4-crumbs a { color: inherit; text-decoration: none; }
.v4-crumbs a:hover { color: var(--brand-green, #63dc71); }
.v4-card__bio .v4-card__title { margin: 0 0 12px; font-size: 1rem; font-weight: 700; color: var(--_ink, inherit); }

/* Legacy infotek content ported verbatim (alerts, privacy policy, product
   pages). Only presentation lives here — the text is untouched. */
.v4-legacy, .v4-pp { line-height: 1.7; }
.v4-legacy .v4-sechead, .v4-pp .v4-sechead { margin: 0 0 18px; }
.v4-legacy .v4-sechead h2, .v4-legacy > div h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; margin: 8px 0 14px; }
.v4-legacy .v4-sechead span { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-green, #63dc71); }
.v4-legacy #eng .v4-sechead, .v4-legacy #bm .v4-sechead { text-align: center; }
.v4-pp__block { margin: 0 0 28px; text-align: justify; }
/* Performance page (PF-05): one disclaimer for the page, plus a short line under each wholesale fund */
.v4-perf-note { margin: 14px 0 0; font-size: 14px; font-weight: 600; color: var(--text-primary, inherit); }
.v4-perf-disclaimer { margin-top: 32px; padding: 20px 22px; border: 1px solid var(--c-field-edge, rgba(127,127,127,.25)); border-radius: 12px; font-size: 14px; line-height: 1.6; color: var(--text-primary, inherit); }
.v4-perf-disclaimer p { margin: 0 0 12px; }
.v4-perf-disclaimer p:last-child { margin-bottom: 0; }
.v4-perf-disclaimer__title { font-size: 14px; }
.v4-perf-disclaimer__label { margin-bottom: 4px !important; }
.v4-strong { font-weight: 700; }
.v4-pp__head { display: inline-block; margin: 0 0 4px; font-size: 13px; letter-spacing: .04em; padding: 4px 10px; border-radius: 6px; background: rgba(99, 220, 113, .14); color: var(--text-primary, inherit); }
.v4-pp__list { width: 100%; border-collapse: collapse; }
.v4-pp__list td { padding: 3px 0; vertical-align: top; }
.v4-pp__idx { width: 2.2em; text-align: left; }
.v4-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-top: .62em; }
.v4-chev { font-weight: 700; }
.v4-xtable { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: .95rem; }
.v4-xtable th, .v4-xtable td { border: 1px solid var(--line, rgba(140, 160, 180, .28)); padding: 10px 12px; vertical-align: top; }
.v4-xtable th { background: #0a4f8a; color: #fff; font-weight: 700; }
.v4-xtable ul { margin: 0; padding-left: 0; list-style: none; }
.v4-xtable img { max-width: 100%; height: auto; border-radius: 8px; }
.v4-xtable td { word-break: break-word; }
.v4-legacy a, .v4-pp a { color: #0a6fb0; font-weight: 600; }
:root[data-theme="dark"] .v4-legacy a, :root[data-theme="dark"] .v4-pp a { color: #6fd0ff; }
@media (max-width: 760px) {
  /* the Scam Alerts list (v4-xtable--stack) stacks; tables with a header row stay tables;
     header-less numeric tables scroll */
  .v4-xtable--stack, .v4-xtable--stack tbody, .v4-xtable--stack tr, .v4-xtable--stack td, .v4-xtable--stack th { display: block; width: 100% !important; }
  .v4-xtable:not(:has(th)) { display: block; overflow-x: auto; white-space: nowrap; }
  .v4-xtable:has(th):not(.v4-xtable--stack) { font-size: .85rem; }
  .v4-xtable:has(th):not(.v4-xtable--stack) th, .v4-xtable:has(th):not(.v4-xtable--stack) td { padding: 8px 6px; }
  /* numbers stay on one line (columns 2-3: NAV, change, fund size); names and dates wrap */
  .v4-xtable:has(th):not(.v4-xtable--stack) td:nth-child(2), .v4-xtable:has(th):not(.v4-xtable--stack) td:nth-child(3) { white-space: nowrap; }
  .v4-xtable:has(th):not(.v4-xtable--stack) td { word-break: normal; overflow-wrap: normal; }
  .v4-xtable td .v4-chip { margin: 4px 0 0; font-size: .6rem; padding: 2px 7px; letter-spacing: .02em; }
}
.v4-legacy .bg-th-blue { background: #0a4f8a; color: #fff; font-weight: 700; }
.v4-legacy .text-center { text-align: center; }
.v4-legacy .img-fluid { max-width: 100%; height: auto; }
.v4-legacy .fw-bold { font-weight: 700; }
.bv-btn.v4-dl { margin: 6px 0; display: inline-flex; align-items: center; gap: 8px; }
/* G-10: document links — fund name kept for screen readers and search engines, file type shown */
.v4-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.v4-dl__type { font-weight: 500; opacity: .8; }

/* footer: infotek columns (brand + Sitemap + Links + Recent Posts + Contact Us) */
.v4-footer__inner { grid-template-columns: 1.5fr 1fr 1fr 1.1fr 1fr; }
.v4-footer__subhead { margin: 18px 0 8px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6fd0ff; }
:root[data-theme="light"] .v4-footer__subhead { color: #076aa0; }
.v4-footer__col li { line-height: 1.5; }
.v4-footer__btn { font-weight: 700; }
.site-footer.v4-footer .v4-footer__bar p:last-child { font-family: inherit; font-size: inherit; opacity: 1; }
.v4-footer__bar a { color: inherit; }
@media (max-width: 1100px) { .v4-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .v4-footer__inner { grid-template-columns: 1fr; } }

/* ---- Compact footer (Oct 2026) — same content, lower height ---- */
.v4-footer__inner {
  max-width: 1240px;
  padding: clamp(32px, 4vw, 44px) clamp(20px, 4vw, 40px) clamp(22px, 3vw, 28px);
  grid-template-columns: 2.1fr 1.35fr 1fr 1.2fr 1.15fr;
  gap: clamp(22px, 2.6vw, 40px);
}
.v4-footer__logo { margin-bottom: 10px; }
.site-footer.v4-footer .v4-footer__tag {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: justify;
  hyphens: auto;
  color: var(--text-secondary, #a8bdd0);
}
:root[data-theme="light"] .site-footer.v4-footer .v4-footer__tag { color: #4a6070; }
.v4-footer__col h4 { margin: 4px 0 10px; font-size: 0.68rem; }
.v4-footer__col ul { gap: 6px; }
.v4-footer__col li,
.v4-footer__col a { font-size: 0.8rem; line-height: 1.45; }
.v4-footer__col li { color: var(--text-secondary, #a8bdd0); }
.v4-footer__col small { font-size: 0.7rem; }
.v4-footer__btn { display: inline-block; margin-top: 4px; color: var(--brand-green, #63dc71) !important; }

/* Contact Info strip (from the infotek off-canvas panel) */
.v4-footer__info { border-top: 1px solid rgba(128, 170, 200, 0.12); }
.v4-footer__info > div {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px clamp(20px, 4vw, 40px);
  display: flex;
  align-items: center;
  gap: 8px 18px;
  flex-wrap: wrap;
}
.v4-footer__info h4 {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6fd0ff;
}
:root[data-theme="light"] .v4-footer__info h4 { color: #076aa0; }
.v4-footer__info address {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0;
  font-style: normal;
  font-size: 0.78rem;
}
.v4-footer__info address > * + *::before { content: "·"; margin: 0 10px; opacity: 0.5; }
.v4-footer__info a { color: inherit; }
.v4-footer__info a:hover { color: var(--brand-blue, #00a6ff); }

.v4-footer__bar > div { max-width: 1240px; padding: 12px clamp(20px, 4vw, 40px); }
.site-footer.v4-footer .v4-footer__bar p:last-child { font-size: 0.76rem; opacity: 0.85; }

@media (max-width: 1100px) {
  .v4-footer__inner { grid-template-columns: repeat(3, 1fr); }
  .v4-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .v4-footer__inner { grid-template-columns: 1fr 1fr; }
  .v4-footer__info address { flex-direction: column; }
  .v4-footer__info address > * + *::before { content: none; }
}

/* Menu parents with children are not links — hover (or focus/tap) reveals the dropdown */
.site-nav .nav-parent { cursor: default; color: inherit; outline: none; user-select: none; }
.site-nav .nav-parent:focus-visible { color: var(--brand-green, #63dc71); }

/* ---- Floating back-to-top button ---- */
.v4-totop {
  position: fixed;
  right: clamp(16px, 2.4vw, 32px);
  bottom: clamp(16px, 2.4vw, 32px);
  z-index: 90;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(99, 220, 113, 0.55);
  border-radius: 50%;
  background: rgba(2, 17, 28, 0.82);
  color: #63dc71;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 18px rgba(0, 166, 255, 0.18);
  backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.9);
  transition: opacity 240ms ease, transform 240ms cubic-bezier(.2, .8, .2, 1), visibility 240ms, background 200ms ease, color 200ms ease;
}
.v4-totop svg { width: 20px; height: 20px; transition: transform 200ms ease; }
.v4-totop.is-shown { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.v4-totop:hover, .v4-totop:focus-visible {
  background: linear-gradient(135deg, #63dc71, #00a6ff);
  color: #02111c;
  outline: none;
}
.v4-totop:hover svg, .v4-totop:focus-visible svg { transform: translateY(-2px); }
:root[data-theme="light"] .v4-totop {
  background: rgba(255, 255, 255, 0.92);
  color: #076aa0;
  border-color: rgba(10, 134, 199, 0.45);
  box-shadow: 0 10px 24px rgba(20, 82, 122, 0.16);
}
:root[data-theme="light"] .v4-totop:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .v4-totop { transition: opacity 120ms ease, visibility 120ms; transform: none; } }

/* ---- Contact Us page ---- */
.v4-contact {
  --c-panel: #ffffff;
  --c-panel-2: #f4f8fb;
  --c-ink: #0b2434;
  --c-ink-soft: #4a6372;
  --c-edge: rgba(24, 103, 142, 0.16);
  --c-field: #f6f9fc;
  --c-field-edge: rgba(24, 103, 142, 0.22);
  --c-accent: #076aa0;
  --c-glow: rgba(10, 134, 199, 0.16);
}
:root[data-theme="dark"] .v4-contact {
  --c-panel: rgba(8, 27, 42, 0.78);
  --c-panel-2: rgba(10, 33, 50, 0.7);
  --c-ink: #eaf4fd;
  --c-ink-soft: #a9c1d2;
  --c-edge: rgba(72, 209, 255, 0.18);
  --c-field: rgba(2, 15, 26, 0.75);
  --c-field-edge: rgba(120, 170, 205, 0.26);
  --c-accent: #63dc71;
  --c-glow: rgba(99, 220, 113, 0.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .v4-contact {
    --c-panel: rgba(8, 27, 42, 0.78);
    --c-panel-2: rgba(10, 33, 50, 0.7);
    --c-ink: #eaf4fd;
    --c-ink-soft: #a9c1d2;
    --c-edge: rgba(72, 209, 255, 0.18);
    --c-field: rgba(2, 15, 26, 0.75);
    --c-field-edge: rgba(120, 170, 205, 0.26);
    --c-accent: #63dc71;
    --c-glow: rgba(99, 220, 113, 0.18);
  }
}

.v4-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* contact cards */
.v4-contact__info { display: flex; flex-direction: column; gap: 14px; }
.v4-contact__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--c-edge);
  border-radius: 16px;
  background: var(--c-panel-2);
  color: var(--c-ink);
  text-decoration: none;
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), border-color 220ms ease, box-shadow 220ms ease;
}
a.v4-contact__item:hover, a.v4-contact__item:focus-visible {
  transform: translateY(-2px);
  border-color: var(--c-accent);
  box-shadow: 0 12px 28px var(--c-glow);
  outline: none;
}
.v4-contact__icon {
  flex: 0 0 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #00a6ff, #63dc71);
  box-shadow: 0 8px 18px var(--c-glow);
}
.v4-contact__icon svg { width: 20px; height: 20px; }
.v4-contact__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v4-contact__label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.v4-contact__value { font-size: 1.05rem; font-weight: 700; color: var(--c-ink); overflow-wrap: anywhere; }
.v4-contact__addr { font-size: 0.95rem; line-height: 1.6; color: var(--c-ink); }

/* form card */
.v4-contact__card {
  position: relative;
  padding: clamp(24px, 3.2vw, 38px);
  border: 1px solid var(--c-edge);
  border-radius: 20px;
  background: var(--c-panel);
  color: var(--c-ink);
  box-shadow: 0 24px 60px rgba(4, 30, 50, 0.12);
  overflow: hidden;
}
.v4-contact__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #00a6ff, #63dc71);
}
.v4-contact__card h3 { margin: 0; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 800; color: var(--c-ink); }
.v4-contact__lead { margin: 8px 0 22px; color: var(--c-ink-soft); font-size: 0.98rem; }
.v4-contact__success {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(99, 220, 113, 0.45);
  background: rgba(99, 220, 113, 0.12);
  color: var(--c-ink);
  font-size: 0.9rem;
  font-weight: 600;
}
.v4-contact__form { display: flex; flex-direction: column; gap: 16px; }
.v4-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v4-field { display: flex; flex-direction: column; gap: 7px; }
.v4-field > span { font-size: 0.8rem; font-weight: 700; color: var(--c-ink); }
.v4-field input,
.v4-field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--c-field-edge);
  border-radius: 12px;
  background: var(--c-field);
  color: var(--c-ink);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.v4-field textarea { resize: vertical; min-height: 130px; }
.v4-field input::placeholder,
.v4-field textarea::placeholder { color: var(--c-ink-soft); opacity: 0.7; }
.v4-field input:focus,
.v4-field textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 4px var(--c-glow);
}
/* stop Chrome's autofill from repainting fields in yellow/beige */
.v4-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--c-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--c-field) inset;
  caret-color: var(--c-ink);
}
.v4-contact__submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #00a6ff, #63dc71);
  color: #02111c;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 24px var(--c-glow);
  transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.v4-contact__submit svg { width: 18px; height: 18px; flex: 0 0 18px; transition: transform 200ms ease; }
.v4-contact__submit:hover, .v4-contact__submit:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 16px 32px var(--c-glow);
  outline: none;
}
.v4-contact__submit:hover svg { transform: translateX(3px); }

@media (max-width: 900px) {
  .v4-contact__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .v4-contact__row { grid-template-columns: 1fr; }
  .v4-contact__submit { align-self: stretch; justify-content: center; }
}

/* ---- Person cards + profile modal ---- */
.v4-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), border-color 220ms ease, box-shadow 220ms ease;
}
.v4-pcard h3 { margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.35; }
.v4-pcard .v4-card__role { font-size: 13px; font-weight: 600; color: var(--_ink-soft); }
.v4-pcard__open {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #076aa0;
  cursor: pointer;
}
:root[data-theme="dark"] .v4-pcard__open { color: #6fd0ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v4-pcard__open { color: #6fd0ff; } }
.v4-pcard__open svg { width: 15px; height: 15px; transition: transform 200ms ease; }
/* whole card is the click target */
.v4-pcard__open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.v4-pcard:has(.v4-pcard__open):hover,
.v4-pcard:has(.v4-pcard__open:focus-visible) {
  transform: translateY(-3px);
  border-color: rgba(0, 166, 255, 0.45);
  box-shadow: 0 16px 34px rgba(0, 80, 140, 0.14);
}
.v4-pcard:hover .v4-pcard__open svg { transform: translateX(3px); }
.v4-pcard__open:focus-visible { outline: none; }

.v4-pmodal {
  --m-panel: #ffffff;
  --m-ink: #0b2434;
  --m-ink-soft: #4a6372;
  --m-edge: rgba(24, 103, 142, 0.16);
  --m-head: linear-gradient(135deg, rgba(0, 166, 255, 0.1), rgba(99, 220, 113, 0.1));
  width: min(760px, calc(100vw - 32px));
  max-height: min(84vh, 760px);
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--m-ink);
  overflow: visible;
}
:root[data-theme="dark"] .v4-pmodal {
  --m-panel: #071a29;
  --m-ink: #eaf4fd;
  --m-ink-soft: #a9c1d2;
  --m-edge: rgba(72, 209, 255, 0.2);
  --m-head: linear-gradient(135deg, rgba(0, 166, 255, 0.16), rgba(99, 220, 113, 0.1));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .v4-pmodal {
    --m-panel: #071a29;
    --m-ink: #eaf4fd;
    --m-ink-soft: #a9c1d2;
    --m-edge: rgba(72, 209, 255, 0.2);
    --m-head: linear-gradient(135deg, rgba(0, 166, 255, 0.16), rgba(99, 220, 113, 0.1));
  }
}
.v4-pmodal::backdrop { background: rgba(2, 12, 22, 0.62); backdrop-filter: blur(6px); }
.v4-pmodal[open] { animation: v4-pmodal-in 320ms cubic-bezier(.2, .8, .2, 1); }
.v4-pmodal[open]::backdrop { animation: v4-backdrop-in 320ms ease; }
.v4-pmodal.is-closing { animation: v4-pmodal-out 220ms ease forwards; }
.v4-pmodal.is-closing::backdrop { animation: v4-backdrop-out 220ms ease forwards; }
@keyframes v4-pmodal-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes v4-pmodal-out { to { opacity: 0; transform: translateY(12px) scale(0.97); } }
@keyframes v4-backdrop-in { from { opacity: 0; } }
@keyframes v4-backdrop-out { to { opacity: 0; } }
html:has(.v4-pmodal[open]) { overflow: hidden; }

.v4-pmodal__panel {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  border: 1px solid var(--m-edge);
  border-radius: 22px;
  background: var(--m-panel);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.v4-pmodal__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  background: var(--m-head);
  border-bottom: 1px solid var(--m-edge);
}
.v4-pmodal__head::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #00a6ff, #63dc71);
}
.v4-pmodal__avatar {
  flex: 0 0 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #00a6ff, #63dc71);
  color: #02111c;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(0, 166, 255, 0.25);
}
.v4-pmodal__kicker {
  flex: 1 1 auto;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--m-ink-soft);
}
.v4-pmodal__close {
  flex: 0 0 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--m-edge);
  border-radius: 12px;
  background: var(--m-panel);
  color: var(--m-ink);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, color 180ms ease;
}
.v4-pmodal__close svg { width: 18px; height: 18px; }
.v4-pmodal__close:hover, .v4-pmodal__close:focus-visible { transform: rotate(90deg); border-color: #00a6ff; color: #00a6ff; outline: none; }
.v4-pmodal__body {
  padding: 22px clamp(20px, 3vw, 30px) 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--m-ink-soft);
  text-align: justify;
}
.v4-pmodal__body .v4-card__title {
  margin: 0 0 14px;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
  color: var(--m-ink);
}
.v4-pmodal__body p { margin: 0; }
@media (max-width: 560px) {
  .v4-pmodal { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .v4-pmodal__panel { border-radius: 22px 22px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .v4-pmodal[open], .v4-pmodal[open]::backdrop, .v4-pmodal.is-closing, .v4-pmodal.is-closing::backdrop { animation: none; }
}

/* Circled-chevron bullet (stands in for infotek's fa-circle-chevron-right) */
.v4-chev-bullet {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 0.22em;
  border-radius: 50%;
  background: linear-gradient(135deg, #00a6ff, #63dc71);
}
.v4-chev-bullet::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: -2px;
  border-top: 2px solid #02111c;
  border-right: 2px solid #02111c;
  transform: rotate(45deg);
}
.v4-mandates td { padding: 6px 0; }
.v4-mandates .v4-pp__idx { width: 30px; }

/* Buttons inside legacy content keep their own (dark-on-gradient) text colour,
   overriding the legacy link colour */
.v4-legacy a.bv-btn,
:root[data-theme="dark"] .v4-legacy a.bv-btn,
.v4-legacy a.bv-btn:hover { color: #02121f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v4-legacy a.bv-btn { color: #02121f; } }
.v4-legacy .bv-btn { font-weight: 800; text-decoration: none; }
/* G-13: buttons inside prose (e.g. SIDREC FAQ downloads) were taking the blue underlined link
   style — keep the button's own colours. Outline buttons use the theme text colour + a visible border. */
.bv-prose a.bv-btn, .bv-prose a.bv-btn:hover { color: #02121f; text-decoration: none; }
html:root body .bv-prose a.bv-btn.bv-btn--ghost,
html:root body .v4-legacy a.bv-btn.bv-btn--ghost { color: var(--text-primary); border: 1.5px solid var(--text-secondary); background: transparent; text-decoration: none; }
html:root body .bv-prose a.bv-btn.bv-btn--ghost:hover,
html:root body .v4-legacy a.bv-btn.bv-btn--ghost:hover { border-color: var(--text-primary); background: var(--surface, rgba(127,127,127,.08)); }

/* ---- Income Distribution: year filter + table ---- */
.v4-yearfilter, .v4-income-wrap {
  --y-field: #f6f9fc;
  --y-edge: rgba(24, 103, 142, 0.24);
  --y-ink: #0b2434;
  --y-soft: #4a6372;
  --y-head: #0a4f8a;
  --y-row: rgba(10, 134, 199, 0.05);
  --y-foot: rgba(10, 134, 199, 0.1);
  --y-accent: #076aa0;
}
:root[data-theme="dark"] .v4-yearfilter, :root[data-theme="dark"] .v4-income-wrap {
  --y-field: rgba(2, 15, 26, 0.8);
  --y-edge: rgba(120, 170, 205, 0.28);
  --y-ink: #eaf4fd;
  --y-soft: #a9c1d2;
  --y-head: rgba(0, 166, 255, 0.18);
  --y-row: rgba(255, 255, 255, 0.03);
  --y-foot: rgba(99, 220, 113, 0.1);
  --y-accent: #63dc71;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .v4-yearfilter, :root:not([data-theme="light"]) .v4-income-wrap {
    --y-field: rgba(2, 15, 26, 0.8);
    --y-edge: rgba(120, 170, 205, 0.28);
    --y-ink: #eaf4fd;
    --y-soft: #a9c1d2;
    --y-head: rgba(0, 166, 255, 0.18);
    --y-row: rgba(255, 255, 255, 0.03);
    --y-foot: rgba(99, 220, 113, 0.1);
    --y-accent: #63dc71;
  }
}
.v4-yearfilter { margin: 4px 0 22px; }
.v4-yearfilter__row { display: flex; align-items: stretch; gap: 10px; }
.v4-yearfilter__field {
  position: relative;
  flex: 0 1 220px;
  display: flex;
  align-items: center;
}
.v4-yearfilter__field svg {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--y-soft);
  pointer-events: none;
}
.v4-yearfilter__field input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--y-edge);
  border-radius: 12px;
  background: var(--y-field);
  color: var(--y-ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.v4-yearfilter__field input::placeholder { color: var(--y-soft); opacity: 0.75; font-weight: 500; letter-spacing: 0; }
.v4-yearfilter__field input:focus { outline: none; border-color: var(--y-accent); box-shadow: 0 0 0 4px rgba(0, 166, 255, 0.16); }
.v4-yearfilter__field.is-invalid input { border-color: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.16); }
.v4-yearfilter__btn {
  flex: 0 0 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #00a6ff, #63dc71);
  color: #02111c;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.v4-yearfilter__btn svg { width: 19px; height: 19px; }
.v4-yearfilter__btn:hover, .v4-yearfilter__btn:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 166, 255, 0.28); outline: none; }
.v4-yearfilter__hint { margin: 8px 0 0; font-size: 0.82rem; color: var(--y-soft); }
.v4-yearfilter__error { margin: 6px 0 0; font-size: 0.82rem; font-weight: 700; color: #e5484d; }

.v4-income-wrap { overflow-x: auto; border: 1px solid var(--y-edge); border-radius: 14px; }
.v4-income { width: 100%; border-collapse: collapse; text-align: center; color: var(--y-ink); }
.v4-income th {
  padding: 13px 16px;
  width: 50%;
  background: var(--y-head);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
:root[data-theme="dark"] .v4-income th { color: var(--y-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v4-income th { color: var(--y-ink); } }
.v4-income td { padding: 12px 16px; border-top: 1px solid var(--y-edge); font-size: 0.95rem; font-weight: 600; color: var(--y-ink); }
.v4-income tbody tr:nth-child(even) td { background: var(--y-row); }
.v4-income tfoot td { background: var(--y-foot); color: var(--y-soft); font-size: 0.85rem; font-weight: 600; font-style: italic; }

/* ---- Product page hero with animated fund visual ---- */
.v4-pagehero--visual .v4-page {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.v4-fundvis { width: 100%; max-width: 480px; justify-self: end; }
.v4-fundvis__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.82;
  max-height: 400px;
}
.v4-fundvis__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 900px) {
  .v4-pagehero--visual .v4-page { grid-template-columns: 1fr; }
  .v4-fundvis { justify-self: center; max-width: 420px; }
}

/* ---- Contact Us: consent checkboxes ---- */
.v4-consent { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.v4-check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
}
.v4-check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.v4-check__box {
  flex: 0 0 22px;
  height: 22px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--c-field-edge);
  border-radius: 7px;
  background: var(--c-field);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.v4-check__box::after {
  content: "";
  width: 6px;
  height: 11px;
  margin-top: -2px;
  border: solid #02111c;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 160ms ease;
}
.v4-check input:checked + .v4-check__box {
  background: linear-gradient(135deg, #00a6ff, #63dc71);
  border-color: transparent;
}
.v4-check input:checked + .v4-check__box::after { transform: rotate(45deg) scale(1); }
.v4-check input:focus-visible + .v4-check__box { box-shadow: 0 0 0 4px var(--c-glow); border-color: var(--c-accent); }
.v4-check__text { color: var(--c-ink); }
.v4-check__text a { color: var(--c-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.v4-check__req { margin-left: 2px; font-style: normal; color: #e5484d; font-weight: 800; }
.v4-check__opt { color: var(--c-ink-soft); font-size: 0.82rem; }
.v4-check.is-invalid .v4-check__box { border-color: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.16); }
.v4-consent__error { margin: -4px 0 0 34px; font-size: 0.82rem; font-weight: 700; color: #e5484d; }

/* ================================================================
   G-13: WCAG AA text contrast (pre-launch audit)
   - Light theme: darker blue #076aa0 (was #0a86c7, 3.6:1 -> 5.3:1) — replaced above
   - Light theme: green TEXT uses #4a7a2e (audit's suggestion, 4.6:1). The bright
     #63dc71 stays for decorative fills, gradients and the dark theme.
   - Footer: no faded copyright / company number / news dates
   ================================================================ */
:root[data-theme="light"] .v4-page__eyebrow,
:root[data-theme="light"] .bv-eyebrow,
:root[data-theme="light"] .v4-legacy .v4-sechead span,
:root[data-theme="light"] .v4-crumbs a:hover { color: #4a7a2e; }
:root[data-theme="light"] .v4-footer__btn { color: #4a7a2e !important; }
.site-footer.v4-footer .v4-footer__bar p,
.site-footer.v4-footer .v4-footer__bar p:last-child,
.v4-footer__bar p span { opacity: 1; }
:root[data-theme="light"] .site-footer.v4-footer .v4-footer__bar p { color: #4c6474; }
:root[data-theme="dark"] .site-footer.v4-footer .v4-footer__bar p span { color: #8aa0b0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-footer.v4-footer .v4-footer__bar p span { color: #8aa0b0; } }
.v4-footer__date { display: block; color: var(--text-secondary); }
/* G-13: Performance page — no text below 14px (source/as-of row was 12px, disclaimer 13px) */
.v4-xtable tr.v4-perf-source td { font-size: 14px; }
/* Tables inside an accordion: not justified like the accordion text; the "As Of <date>" cell on one line */
.v4-acc__body .v4-xtable { text-align: left; }
.v4-xtable tr.v4-perf-source td:last-child { white-space: nowrap; text-align: center; }
/* CT-03: contact page map + directions */
.v4-contact__map { margin-top: 32px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface, transparent); }
.v4-contact__map iframe { display: block; width: 100%; height: 360px; border: 0; }
.v4-contact__mapbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 14px 18px; font-size: .92rem; color: var(--c-ink, var(--text-primary)); }
@media (max-width: 640px) { .v4-contact__map iframe { height: 280px; } }

/* IA-02: with the extra 'Pusat Dana' item the BM menu is ~80px wider, so BM switches to the
   drawer menu up to 1320px (EN keeps 1240px). Same rules as the 1240px block above. */
@media (max-width: 1320px) {
  :root[lang="ms-MY"] .site-header .site-nav,
  :root[lang="ms-MY"] .site-header .header-actions { display: none !important; }
  :root[lang="ms-MY"] .site-header .nav-toggle {
    display: grid !important;
    width: 44px; height: 44px;
    place-content: center;
    gap: 5px;
    border: 1px solid var(--line, rgba(71, 203, 255, 0.22));
    border-radius: 50%;
    background: rgba(1, 15, 25, 0.7);
    color: var(--white, #f8fbff);
  }
  :root[lang="ms-MY"][data-theme="light"] .site-header .nav-toggle {
    background: rgba(255, 255, 255, 0.82);
    color: #08314d;
  }
  :root[lang="ms-MY"] .site-header .nav-toggle span:not(.sr-only) { width: 20px; height: 2px; background: currentColor; border-radius: 2px; }
  :root[lang="ms-MY"] body.nav-open .site-header .site-nav {
    position: fixed;
    top: var(--header-height, 74px);
    left: 0; right: 0;
    max-height: calc(100dvh - var(--header-height, 74px));
    overflow-y: auto;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 18px clamp(16px, 5vw, 32px) 28px;
    background: rgba(2, 12, 21, 0.98);
    border-bottom: 1px solid var(--line, rgba(71, 203, 255, 0.22));
    font-size: 0.95rem !important;
  }
  :root[lang="ms-MY"][data-theme="light"] body.nav-open .site-header .site-nav {
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 26px 46px rgba(20, 82, 122, 0.12);
  }
  :root[lang="ms-MY"] body.nav-open .site-nav > a,
  :root[lang="ms-MY"] body.nav-open .site-nav .nav-menu,
  :root[lang="ms-MY"] body.nav-open .site-nav .nav-parent { width: 100%; }
  :root[lang="ms-MY"] body.nav-open .site-nav > a,
  :root[lang="ms-MY"] body.nav-open .site-nav .nav-parent {
    padding: 13px 4px !important;
    font-weight: 700;
    border-bottom: 1px solid rgba(128, 170, 200, 0.14);
  }
  :root[lang="ms-MY"] body.nav-open .site-nav .nav-menu.has-dropdown {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  :root[lang="ms-MY"] /* dropdowns become an always-open inline list inside the drawer */
  body.nav-open .site-nav .nav-dropdown {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 2px 0 8px !important;
    padding: 6px !important;
    display: grid !important;
    gap: 1px;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    background: rgba(0, 166, 255, 0.08) !important;
  }
  :root[lang="ms-MY"][data-theme="light"] body.nav-open .site-nav .nav-dropdown { background: rgba(0, 118, 186, 0.06) !important; }
  :root[lang="ms-MY"] body.nav-open .site-nav .nav-dropdown a {
    padding: 11px 14px !important;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary, #a8bdd0) !important;
  }
  :root[lang="ms-MY"] body.nav-open .site-nav .nav-dropdown a:hover { color: var(--brand-green, #63dc71) !important; }
  :root[lang="ms-MY"] body.nav-open .site-nav a::after,
  :root[lang="ms-MY"] body.nav-open .site-nav .nav-parent::after { display: none !important; }
  :root[lang="ms-MY"] /* theme + language controls pinned to the bottom of the drawer */
  body.nav-open .nav-drawer-controls {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(128, 170, 200, 0.18);
  }
  :root[lang="ms-MY"] body.nav-open .site-nav .theme-control--mobile { display: inline-grid !important; }
  :root[lang="ms-MY"] body.nav-open .site-nav .lang-switch--mobile { display: inline-flex !important; }
}

/* ---- Products & Services overview (/v4/products, HP-04 / HP-11) ---- */
/* menu labels with children are not links (user request) */
.v4-products .bv-card { height: 100%; gap: 14px; }
.v4-products .bv-card > h2, .v4-products .bv-card > p { margin: 0; }
.v4-products .bv-card .bv-btn { margin-top: auto; align-self: flex-start; }
.v4-products__for { font-weight: 600; }
.v4-products__for span {
  display: block; margin-bottom: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-secondary, #a8bdd0);
}
.v4-products__min { font-size: 0.86rem; color: var(--text-secondary, #a8bdd0); }
.v4-products__centre { display: flex; flex-wrap: wrap; gap: 10px; }
.v4-products__centre a {
  padding: 10px 16px; border: 1px solid var(--border); border-radius: 999px;
  font-weight: 600; font-size: 0.92rem;
}
.v4-products__centre a:hover { border-color: var(--brand-green, #63dc71); }

/* ==========================================================================
   TWO-TIER NAVIGATION (audit IA-01 / IA-02 / IA-04)
   Utility bar above the sticky primary header; it scrolls away with the page.
   ========================================================================== */
.v4-utilbar {
  position: relative;
  z-index: 60; /* its dropdown opens over the sticky header (z 50) */
  background: var(--nav-bg, rgba(2, 18, 31, 0.82));
  border-bottom: 1px solid rgba(65, 190, 255, 0.12);
  font-size: 0.76rem;
}
:root[data-theme="light"] .v4-utilbar { background: rgba(232, 244, 251, 0.9); border-bottom-color: rgba(24, 103, 142, 0.12); }
.v4-utilbar__inner {
  display: flex; align-items: center; justify-content: flex-end; gap: 18px;
  min-height: 42px;
  padding: 0 clamp(16px, 4vw, 40px);
}
.v4-utilbar__links { display: flex; align-items: center; gap: 20px; font-weight: 600; }
.v4-utilbar__links > a,
.v4-utilbar__links .nav-parent { color: var(--text-secondary, #a8bdd0); padding: 6px 0; cursor: default; }
.v4-utilbar__links > a:hover,
.v4-utilbar__links .nav-parent:hover,
.v4-utilbar__links .is-active { color: var(--brand-green, #63dc71); }
:root[data-theme="light"] .v4-utilbar__links > a,
:root[data-theme="light"] .v4-utilbar__links .nav-parent { color: #2b4d63; }
:root[data-theme="light"] .v4-utilbar__links .is-active,
:root[data-theme="light"] .v4-utilbar__links a:hover { color: #1f6e3a; }
.v4-utilbar__links .nav-parent::after { content: " ▾"; font-size: 0.8em; }
/* anchor the Fund Centre dropdown to the right edge instead of centring it */
.v4-utilbar .nav-dropdown { top: calc(100% + 6px); left: auto; right: 0; transform: translateY(8px); font-size: 0.86rem; }
.v4-utilbar .has-dropdown:hover .nav-dropdown,
.v4-utilbar .has-dropdown:focus-within .nav-dropdown { transform: translateY(0); }
.v4-utilbar__controls { display: flex; align-items: center; gap: 8px; }
.v4-utilbar .theme-control,
.v4-utilbar .lang-switch { padding: 2px; }
.v4-utilbar .theme-control button { width: 28px; min-height: 24px; padding: 3px 0; }
.v4-utilbar .theme-control button[data-theme-choice="system"] { width: 40px; }
.v4-utilbar .lang-switch a { min-width: 28px; min-height: 24px; padding: 3px 6px; }
/* The utility bar stays at the top too (client, Nov 2026); the primary header sticks just below it.
   Desktop only: the bar is hidden at 1240px and below. In-page links clear both bars. */
@media (min-width: 1241px) {
  .v4-utilbar { position: sticky; top: 0; }
  .site-header { top: 43px !important; }
  .v4-invest__online, details.v4-acc[id], .bv-tablewrap { scroll-margin-top: 153px; }
  #performance { scroll-margin-top: 133px; }
}

/* primary bar: six audience-led items, so they get a little more room */
.site-header .site-nav { gap: clamp(12px, 1.8vw, 26px) !important; font-size: clamp(0.76rem, 0.9vw, 0.86rem) !important; }
/* Home is shown on desktop too (user request) */
.site-nav .nav-drawer-only { display: none; }

@media (max-width: 1240px) {
  .v4-utilbar { display: none; }
  body.nav-open .site-nav .nav-home,
  body.nav-open .site-nav a.nav-drawer-only { display: block; }
  body.nav-open .site-nav .nav-menu.nav-drawer-only { display: flex; }
}

/* ---- Home: segment gateway (Phase 1 / G-12) — cards reuse .solutions-grid article ---- */
.v4-gateway__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.v4-gateway__grid article { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; padding: clamp(22px, 2.4vw, 30px); }
.v4-gateway__grid > a { display: block; }
.v4-gateway__grid article h3,
.v4-gateway__grid article p { margin: 0; }
.v4-gateway__grid article h3 { font-size: clamp(1.2rem, 1.7vw, 1.45rem); }
.v4-gateway__grid article .v4-gateway__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-green, #63dc71); }
:root[data-theme="light"] .v4-gateway__grid article .v4-gateway__eyebrow { color: #1f6e3a; }
.v4-gateway__points { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 8px; font-size: 0.92rem; }
.v4-gateway__points li { position: relative; padding-left: 18px; }
.v4-gateway__points li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue, #00a6ff), var(--brand-green, #63dc71));
}
.v4-gateway__grid .mini-link { margin-top: auto; }
@media (max-width: 900px) { .v4-gateway__grid { grid-template-columns: 1fr !important; } }

/* ---- Company Overview: heritage timeline (Phase 1 / CO-02) — reuses about.css .timeline-track ---- */
.v4-heritage .timeline-track { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.v4-heritage .section-bar > p { align-self: end; }
/* Timeline (client, Nov 2026). Each card draws its own dot and its own piece of the line (from its dot to the
   next card's dot), so the line always runs through the dot centres, even while the cards animate in.
   Desktop: a rail above the cards with a short stem down to each one. Tablet/mobile: a vertical line on
   the left. Line colours are solid enough to read in light and dark mode; the part already scrolled past
   (between two lit dots) is the brand gradient. */
.v4-heritage {
  --hl-line: #2f6f99;                          /* dark mode */
  --hl-halo: rgba(0, 166, 255, 0.28);
}
:root[data-theme="light"] .v4-heritage {
  --hl-line: #9ccbe6;
  --hl-halo: rgba(0, 150, 230, 0.2);
}
.v4-heritage .timeline-line { display: none; }
.v4-heritage .timeline-track { padding-top: 46px; }
.v4-heritage .timeline-track article { padding: 22px 16px 18px; }
/* dot: 22px including its 4px halo (border-box: `* { box-sizing }` does not reach pseudo-elements, which made
   the dots 30px and moved their centres 4px off the line), centre 27px in and 33px above the card.
   Past milestones are a muted teal; Today is green and pulses (below). */
.v4-heritage .timeline-track article::before {
  box-sizing: border-box;
  z-index: 2; top: -44px; left: 16px; width: 22px; height: 22px;
  border: 4px solid var(--hl-halo); background-clip: padding-box;
  background-color: transparent;
  background-image: linear-gradient(135deg, #63dc71, #00a6ff);
  box-shadow: none;
  filter: grayscale(.75);
}
.v4-heritage .timeline-track article.is-lit::before { box-shadow: none; }
/* line piece: 4px across to the next dot (100% + the 14px gap), plus a 2px stem down to the card */
.v4-heritage .timeline-track article::after {
  box-sizing: border-box;
  content: ""; position: absolute; z-index: 1;
  top: -35px; left: 26px; width: calc(100% + 14px); height: 35px;
  background:
    linear-gradient(var(--hl-line), var(--hl-line)) 0 0 / 100% 4px no-repeat,
    linear-gradient(var(--hl-line), var(--hl-line)) 0 0 / 2px 100% no-repeat;
  border-radius: 2px 0 0 0;
}
/* lit part: a soft blue-green gradient flowing along the line (one 50% tile moved by 100% = one seamless loop) */
.v4-heritage .timeline-track article.is-lit:has(+ article.is-lit)::after {
  background:
    linear-gradient(90deg, #2a86b8, #4fae63, #2a86b8) 0 0 / 50% 4px repeat-x,
    linear-gradient(#2a86b8, #2a86b8) 0 0 / 2px 100% no-repeat;
  animation: hl-flow-x 2.4s linear infinite;
  filter: drop-shadow(0 0 3px rgba(79, 174, 99, 0.35));   /* soft glow: dark mode only */
}
:root[data-theme="light"] .v4-heritage .timeline-track article.is-lit:has(+ article.is-lit)::after { filter: none; }
/* Today: solid green, pulses (with a glow in dark mode) */
.v4-heritage .timeline-track article:last-child::before {
  background-image: none; background-color: #63dc71; filter: none; border-color: rgba(99, 220, 113, 0.3);
  animation: hl-pulse 1.6s ease-in-out infinite, hl-glow 1.6s ease-in-out infinite;
}
:root[data-theme="light"] .v4-heritage .timeline-track article:last-child::before { animation: hl-pulse 1.6s ease-in-out infinite; }
@keyframes hl-flow-x { to { background-position: 100% 0, 0 0; } }
@keyframes hl-flow-y { to { background-position: 0 100%; } }
@keyframes hl-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
@keyframes hl-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(99, 220, 113, 0); } 50% { box-shadow: 0 0 16px 4px rgba(99, 220, 113, 0.7); } }
@media (prefers-reduced-motion: reduce) {
  .v4-heritage .timeline-track article::before,
  .v4-heritage .timeline-track article::after { animation: none !important; }
}
.v4-heritage .timeline-track article:last-child::after { width: 2px; }
/* Tablet and mobile: vertical; dot centre 27px left of the card and 29px down, line down to the next dot */
@media (max-width: 1180px) {
  .v4-heritage .timeline-track { grid-template-columns: 1fr; gap: 14px; padding-top: 0; padding-left: 38px; }
  .v4-heritage .timeline-track article { padding: 18px 18px 16px; }
  .v4-heritage .timeline-track article::before { top: 18px; left: -38px; }
  .v4-heritage .timeline-track article::after,
  .v4-heritage .timeline-track article.is-lit::after {
    top: 29px; left: -29px; width: 4px; height: calc(100% + 14px); border-radius: 2px;
    background: var(--hl-line);
  }
  .v4-heritage .timeline-track article.is-lit:has(+ article.is-lit)::after {
    background: linear-gradient(180deg, #2a86b8, #4fae63, #2a86b8) 0 0 / 100% 50% repeat-y;
    animation-name: hl-flow-y;
  }
  .v4-heritage .timeline-track article:last-child::after { display: none; }
}

/* ---- Home: goal planner additions (HP-08 shortfall line, neutral next step) ---- */
.planner-gap:empty { display: none; }
.planner-gap {
  margin: 16px 0 0; padding: 12px 16px;
  border-left: 3px solid var(--brand-green, #63dc71); border-radius: 8px;
  background: rgba(0, 166, 255, 0.08);
  font-weight: 700; font-size: 0.92rem;
}
.planner-next { margin-top: 18px; display: grid; gap: 12px; }
.planner-next p { margin: 0; color: var(--text-secondary, #a8bdd0); font-size: 0.9rem; }
.planner-next .goal-intro__actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* four steps now (Approach / Automate removed per HP-06) */
.planner-steps { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
:root[data-theme="light"] .plan-summary > p:first-child { color: #0b3a55; }
/* the active step sits in the flow so the panel grows with its content (summary is taller now) */
.planner-step.is-active { position: relative; inset: auto; }

/* ---- How to invest (/v4/how-to-invest, UT-01) ---- */
.v4-invest { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: none; }
.v4-invest > li { height: 100%; }
.v4-invest > li > h2, .v4-invest > li > p { margin: 0; }
.v4-invest__num {
  font-size: 2.2rem; font-weight: 900; line-height: 1; letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--brand-blue, #00a6ff), var(--brand-green, #63dc71));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.v4-invest__links { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: auto; padding-top: 6px; }
.v4-invest__channels { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.v4-invest__channels li { display: grid; gap: 3px; padding-left: 14px; border-left: 2px solid var(--brand-green, #63dc71); font-size: 0.92rem; }
.v4-invest__channels span { color: var(--text-secondary, #a8bdd0); }
.v4-invest__help { margin-top: 28px; padding: clamp(24px, 4vw, 40px); display: grid; gap: 12px; }
.v4-invest__help h2, .v4-invest__help p { margin: 0; }
.v4-invest__note { margin: 22px 0 0; font-size: 0.82rem; color: var(--text-secondary, #a8bdd0); max-width: 90ch; }
.v4-invest-cta { margin-top: 10px; }
@media (max-width: 960px) { .v4-invest { grid-template-columns: 1fr; } }

/* ==========================================================================
   INSIGHTS TABS (Read / Watch & Listen / Attend) + THE BERJAYA BRIEF STRIP
   Self-contained: used on the home page and on /v4/insights.
   ========================================================================== */
.v4-ins { margin-top: 24px; display: grid; gap: 22px; }
.v4-ins__empty { margin-top: 12px; font-size: 1.15rem; font-weight: 600; }
.v4-ins__tabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--border, rgba(71, 203, 255, 0.22)); }
.v4-ins__tabs button {
  margin-bottom: -1px; padding: 12px 18px;
  border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 0.95rem; color: var(--text-secondary, #a8bdd0);
}
.v4-ins__tabs button[aria-selected="true"] { color: var(--text-primary, #f8fbff); border-bottom-color: var(--brand-green, #63dc71); }
:root[data-theme="light"] .v4-ins__tabs button[aria-selected="true"] { color: #08314d; }
.v4-ins__tabs button:focus-visible { outline: 2px solid var(--brand-blue, #00a6ff); outline-offset: 2px; }
.v4-ins__grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.v4-ins__card, .v4-ins__event {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border, rgba(71, 203, 255, 0.22)); border-radius: 16px;
  background: var(--surface, rgba(3, 22, 35, 0.82));
}
:root[data-theme="light"] .v4-ins__card, :root[data-theme="light"] .v4-ins__event { background: rgba(255, 255, 255, 0.86); }
.v4-ins__thumb { display: block; aspect-ratio: 16 / 9; background: center / cover no-repeat; background-color: rgba(0, 166, 255, 0.12); }
.v4-ins__thumb--pod { display: grid; place-items: center; background-image: linear-gradient(135deg, #00a6ff, #63dc71); }
.v4-ins__thumb--pod b { color: #02121f; font-size: 1.2rem; font-weight: 900; letter-spacing: -0.01em; }
.v4-ins__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.v4-ins__body h3, .v4-ins__body h4, .v4-ins__body p { margin: 0; }
.v4-ins__body h3, .v4-ins__body h4 { font-size: 1.05rem; font-weight: 800; line-height: 1.3; }
.v4-ins__body p { font-size: 0.9rem; color: var(--text-secondary, #a8bdd0); }
.v4-ins__body .v4-ins__meta { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-green, #63dc71); }
:root[data-theme="light"] .v4-ins__body .v4-ins__meta { color: #1f6e3a; }
.v4-ins__actions { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: auto; padding-top: 6px; }
.v4-ins__link, .v4-ins__more { font-weight: 800; font-size: 0.88rem; color: var(--brand-blue, #00a6ff); }
:root[data-theme="light"] .v4-ins__link, :root[data-theme="light"] .v4-ins__more { color: #0067a3; }
.v4-ins__more { display: inline-block; margin-top: 16px; }
.v4-ins__more--all { margin-top: 0; justify-self: start; }
.v4-ins__subhead { margin: 6px 0 12px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary, #a8bdd0); }
.v4-ins__events { display: grid; gap: 14px; margin-bottom: 18px; }
.v4-ins__event { flex-direction: row; }
.v4-ins__event.is-past { opacity: 0.85; }
.v4-ins__date {
  flex: 0 0 92px; display: grid; place-content: center; text-align: center; gap: 2px;
  background: linear-gradient(160deg, rgba(0, 166, 255, 0.18), rgba(99, 220, 113, 0.16));
}
.v4-ins__date b { font-size: 1.9rem; font-weight: 900; line-height: 1; }
.v4-ins__date span { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

.v4-pod {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  border-bottom: 1px solid rgba(0, 166, 255, 0.18);
}
.v4-pod__intro p:not(.eyebrow) { color: var(--text-secondary, #a8bdd0); max-width: 46ch; }
.v4-pod__listen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.v4-pod__episodes { display: grid; gap: 12px; }
.v4-pod__ep {
  display: flex; align-items: center; gap: 16px; padding: 12px;
  border: 1px solid var(--border, rgba(71, 203, 255, 0.22)); border-radius: 14px;
  background: var(--surface, rgba(3, 22, 35, 0.82));
  transition: border-color 0.2s ease, transform 0.2s ease;
}
:root[data-theme="light"] .v4-pod__ep { background: rgba(255, 255, 255, 0.86); }
.v4-pod__ep:hover { border-color: var(--brand-green, #63dc71); transform: translateX(4px); }
.v4-pod__cover {
  flex: 0 0 64px; height: 64px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, #00a6ff, #63dc71) center / cover no-repeat;
}
.v4-pod__cover b { color: #02121f; font-weight: 900; }
.v4-pod__text { display: grid; gap: 4px; }
.v4-pod__text small { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary, #a8bdd0); }
.v4-pod__text strong { font-size: 1rem; line-height: 1.3; }
@media (max-width: 900px) { .v4-pod { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .v4-ins__event { flex-direction: column; } .v4-ins__date { flex-basis: auto; padding: 12px; grid-auto-flow: column; gap: 8px; align-items: baseline; } }

/* ---- Online Investment Portal: top-bar dropdown + How to invest section ---- */
.v4-utilbar .v4-portal .nav-dropdown { min-width: 320px; }
.v4-portal__item { display: grid; gap: 3px; padding: 10px 12px; border-radius: 6px; color: var(--text-primary, #f8fbff); }
:root[data-theme="light"] .v4-portal__item { color: #08314d; }
.v4-portal__item strong { font-size: 0.86rem; }
.v4-portal__item small { font-size: 0.76rem; font-weight: 500; line-height: 1.4; color: var(--text-secondary, #a8bdd0); }
.v4-portal__item em,
.v4-invest__soon {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  font-style: normal; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: #02121f; background: linear-gradient(135deg, var(--brand-blue, #00a6ff), var(--brand-green, #63dc71));
}
span.v4-portal__item { cursor: default; }
/* a "Coming soon" entry in a primary-nav dropdown: same type as the links around it */
.site-nav .v4-nav-soon, .site-nav .v4-nav-soon strong { font: inherit; }
.site-nav .v4-nav-soon strong { white-space: nowrap; }
.v4-invest__soon { margin: 0; align-self: flex-start; }
.v4-invest__online { margin-top: 44px; display: grid; gap: 18px; scroll-margin-top: 110px; }
.v4-invest__online .bv-card h3, .v4-invest__online .bv-card p { margin: 0; }
.v4-invest__online .bv-card p { color: var(--text-secondary, #a8bdd0); font-size: 0.92rem; }
.v4-invest__online .bv-grid { align-items: stretch; }
.v4-invest__online .bv-grid > .bv-card { height: 100%; }
.v4-invest__processing ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 0.92rem; }
.v4-invest__processing .v4-invest__note { margin: 4px 0 0; }
body.nav-open .site-nav .v4-portal__item { padding: 11px 14px; color: var(--text-secondary, #a8bdd0); font-weight: 600; font-size: 0.9rem; }

/* ---- Empty state: "Coming Soon" in place of data-driven content ---- */
.v4-coming-soon { margin: 0; font-size: 1.15rem; font-weight: 600; }

/* ---- Menu labels with children: click / tap toggles the list (header script adds .is-open) ---- */
.has-dropdown.is-open .nav-dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.v4-utilbar .has-dropdown.is-open .nav-dropdown { transform: translateY(0); }
.site-nav .nav-parent, .v4-utilbar .nav-parent { cursor: default; }
/* One About page (Nov 2026): the About menu item of the section in view */
.nav-dropdown a.is-current { color: var(--brand-green, #63dc71); font-weight: 800; }
:root[data-theme="light"] .nav-dropdown a.is-current { color: #1f6e3a; }

/* ---- HP-05: fund sections opened from a #link clear the sticky header ---- */
details.v4-acc[id] { scroll-margin-top: 110px; }

/* ---- Profile photos (About: Board, Management, Consulting Team) ---- */
/* the photo runs edge to edge across the top of the card; text keeps the card padding */
.v4-pcard--photo { overflow: hidden; padding-top: 0; }
.v4-pcard__photo {
  display: block;
  width: calc(100% + 2 * clamp(20px, 3vw, 30px));
  margin: 0 calc(-1 * clamp(20px, 3vw, 30px)) 12px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  background: #eef3f7;
}
.v4-pmodal__avatar--photo { width: 52px; object-fit: cover; object-position: center top; padding: 0; }
/* profile grids keep the same card width however many people a page has
   (auto-fit stretched 3 cards across the row, so photos grew on short lists) */
.v4-pgrid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ---- Loading screen logo: it shares .brand-logo with the header, whose height cap
   (header height - 22px = 62px) kept it small; give it its own, slightly larger size ---- */
.loader .loader__logo { width: auto; height: 120px; max-height: none; }
/* progress bar sits below the taller logo (half its height + a gap) */
.loader .loader__track { top: calc(50% + 78px); }

/* ---- G-07: SC licence statement (home Company Overview + footer bar) ---- */
.v4-licence { margin-top: 14px; font-size: 0.9rem; font-weight: 600; opacity: 0.85; }
.v4-footer__licence { margin: 0 0 8px; font-size: 0.8rem; line-height: 1.55; max-width: 110ch; opacity: 0.85; }

/* ---- Contact form: enquiry topic dropdown (CT-02), styled like the other fields ---- */
.v4-field select {
  width: 100%;
  padding: 13px 42px 13px 15px;
  border: 1px solid var(--c-field-edge);
  border-radius: 12px;
  background: var(--c-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a6ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
  color: var(--c-ink);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.v4-field select:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 4px var(--c-glow); }
.v4-field select:invalid { color: var(--c-ink-soft); }
.v4-field select option { color: #08314d; background: #fff; }

/* ---- Home "Our Products & Services": three products now (Fund Size / Income Distribution removed) ---- */
.v4-offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 900px) { .v4-offer-grid { grid-template-columns: 1fr !important; } }

/* ---- WF-04: Shariah-compliant / Conventional chip beside each fund name ---- */
.v4-chip {
  display: inline-block; flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; border: 1px solid;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.4; white-space: nowrap; vertical-align: middle;
}
.v4-chip--shariah { color: #63dc71; border-color: rgba(99, 220, 113, 0.55); background: rgba(99, 220, 113, 0.1); }
.v4-chip--conv { color: #8fd3ff; border-color: rgba(0, 166, 255, 0.5); background: rgba(0, 166, 255, 0.1); }
:root[data-theme="light"] .v4-chip--shariah { color: #17703a; border-color: rgba(23, 112, 58, 0.45); background: rgba(23, 112, 58, 0.08); }
:root[data-theme="light"] .v4-chip--conv { color: #0a5a8c; border-color: rgba(10, 90, 140, 0.4); background: rgba(10, 90, 140, 0.07); }
details.v4-acc > summary .v4-chip { margin-right: auto; margin-left: -4px; }
.v4-xtable td .v4-chip { margin-left: 8px; }
@media (max-width: 600px) {
  /* chip drops below the fund name so the name keeps its width */
  details.v4-acc > summary:has(.v4-chip) { flex-wrap: wrap; row-gap: 8px; }
  details.v4-acc > summary > span:first-child { flex: 1 1 calc(100% - 40px); }
  details.v4-acc > summary .v4-chip { order: 2; margin-left: 0; }
}
@media (min-width: 1241px) {
  /* primary-nav dropdowns grow to fit their widest item (e.g. a label + "Coming soon" badge) */
  .site-header .site-nav .nav-dropdown { width: max-content; max-width: 420px; }
}

/* ---- Download List: rows a link asked for (?find=...) are tinted, with a short pulse on arrival ---- */
.bv-tablewrap { scroll-margin-top: 110px; }
.bv-table tr.v4-dl-hit > td { background: rgba(0, 166, 255, 0.13); animation: v4-dl-hit 1.1s ease-out 0.6s 2 both; }
.bv-table tr.v4-dl-hit > td:first-child { box-shadow: inset 4px 0 0 #00a6ff; }
:root[data-theme="light"] .bv-table tr.v4-dl-hit > td { background: rgba(10, 90, 140, 0.09); animation-name: v4-dl-hit-light; }
:root[data-theme="light"] .bv-table tr.v4-dl-hit > td:first-child { box-shadow: inset 4px 0 0 #0a5a8c; }
@keyframes v4-dl-hit { 0% { background: rgba(0, 166, 255, 0.4); } 100% { background: rgba(0, 166, 255, 0.13); } }
@keyframes v4-dl-hit-light { 0% { background: rgba(10, 90, 140, 0.26); } 100% { background: rgba(10, 90, 140, 0.09); } }
@media (prefers-reduced-motion: reduce) { .bv-table tr.v4-dl-hit > td { animation: none; } }

/* ---- Who We Serve: audience icon on each card (individual -> sophisticated -> institution) ---- */
.v4-gateway__icon {
  display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 4px; border-radius: 14px;
  color: #63dc71; background: linear-gradient(135deg, rgba(99, 220, 113, 0.16), rgba(0, 166, 255, 0.14));
  border: 1px solid rgba(99, 220, 113, 0.32);
}
.v4-gateway__icon svg { width: 26px; height: 26px; }
:root[data-theme="light"] .v4-gateway__icon { color: #1f6e3a; background: linear-gradient(135deg, rgba(31, 110, 58, 0.1), rgba(0, 120, 190, 0.08)); border-color: rgba(31, 110, 58, 0.25); }

/* ---- Light mode: no neon (27 Oct 2026). Glows, glowing text and halo filters are dark-mode only.
        shared.css loads after every page stylesheet, so these win; delete this block to undo. ---- */
:root[data-theme="light"] *,
:root[data-theme="light"] *::before,
:root[data-theme="light"] *::after { text-shadow: none !important; }

/* halo filters on logos, canvases, SVG lines and dots */
:root[data-theme="light"] .brand-logo,
:root[data-theme="light"] .loader__logo,
:root[data-theme="light"] #globe-canvas,
:root[data-theme="light"] #globe,
:root[data-theme="light"] #portfolio-hero,
:root[data-theme="light"] #institution-core,
:root[data-theme="light"] .goal-option span,
:root[data-theme="light"] .exp-badge:hover,
:root[data-theme="light"] .exp-badge:focus-visible,
:root[data-theme="light"] .exp-badge__orbit circle,
:root[data-theme="light"] .journey-path,
:root[data-theme="light"] .context-system circle,
:root[data-theme="light"] .flow-line path,
:root[data-theme="light"] .mandate-flow path,
:root[data-theme="light"] .universe-svg path,
:root[data-theme="light"] .capital-pulses circle,
:root[data-theme="light"] .orbit-dot { filter: none !important; }

/* the loader logo breathes with opacity instead of a green glow */
:root[data-theme="light"] .loader__logo { animation: v4-logo-breathe 1.4s ease-in-out infinite !important; }
@keyframes v4-logo-breathe { 50% { opacity: 0.72; } }

/* glowing outlines, lines and dots */
:root[data-theme="light"] .cursor-light,
:root[data-theme="light"] .theme-control button.is-active,
:root[data-theme="light"] .lang-switch a.is-active,
:root[data-theme="light"] .login-button,
:root[data-theme="light"] .image-panel:hover .round-action,
:root[data-theme="light"] .process__line span,
:root[data-theme="light"] .process-node.is-lit .process-icon,
:root[data-theme="light"] .goal-ring::after,
:root[data-theme="light"] .goal-journey i,
:root[data-theme="light"] .ecosystem-node.is-active,
:root[data-theme="light"] .overview-timeline b,
:root[data-theme="light"] .timeline-line span,
:root[data-theme="light"] .timeline-track::before,
:root[data-theme="light"] .timeline-track article.is-lit::before,
:root[data-theme="light"] .orbit-node.is-active,
:root[data-theme="light"] .verified-core,
:root[data-theme="light"] .detector-flow span,
:root[data-theme="light"] .arch-line span,
:root[data-theme="light"] .process-system article.is-lit,
:root[data-theme="light"] .sentiment-line i,
:root[data-theme="light"] .process-line span,
:root[data-theme="light"] .capital-scale::before,
:root[data-theme="light"] .scale-marker button,
:root[data-theme="light"] .flow-node,
:root[data-theme="light"] .flow-particle,
:root[data-theme="light"] .source-ring,
:root[data-theme="light"] .history-river i,
:root[data-theme="light"] .flow-line::before,
:root[data-theme="light"] .band-fill,
:root[data-theme="light"] .architecture-spine span,
:root[data-theme="light"] .journey-line::before,
:root[data-theme="light"] .universe-node,
:root[data-theme="light"] .universe-map::after,
:root[data-theme="light"] .objective-node,
:root[data-theme="light"] .exp-badge::before { box-shadow: none !important; }
:root[data-theme="light"] .exp-badge::before { display: none; }

/* buttons and floating panels keep a plain soft shadow instead of a coloured glow */
:root[data-theme="light"] .button--green,
:root[data-theme="light"] .button-green { box-shadow: 0 6px 16px rgba(20, 75, 112, 0.12) !important; }
:root[data-theme="light"] .nav-dropdown,
:root[data-theme="light"] .v4-totop { box-shadow: 0 16px 40px rgba(20, 75, 112, 0.14) !important; }

/* homepage hero: no blue/green light blobs behind the chart */
:root[data-theme="light"] .hero::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 250, 252, 0.9) 47%, rgba(237, 246, 251, 0.7) 100%) !important;
}
:root[data-theme="light"] .hero-graph::before { display: none; }
/* inner-page loaders were dark even in light mode */
:root[data-theme="light"] .loader { background: #f7fafc; }
:root[data-theme="light"] .loader__track { background: rgba(24, 103, 142, 0.12); }
/* page heroes: no blue/green light blobs in light mode */
:root[data-theme="light"] .about-hero::before,
:root[data-theme="light"] .closing::before,
:root[data-theme="light"] .approach-hero::before,
:root[data-theme="light"] .alerts-hero::before,
:root[data-theme="light"] .size-hero::before,
:root[data-theme="light"] .income-hero::before,
:root[data-theme="light"] .performance-hero::before,
:root[data-theme="light"] .mandate-hero::before,
:root[data-theme="light"] .fund-hero::before,
:root[data-theme="light"] .wholesale-hero::before {
  background: linear-gradient(90deg, rgba(248, 252, 255, 0.98), rgba(236, 246, 252, 0.82), rgba(255, 255, 255, 0.6)) !important;
}

/* ---- Profile cards (Board, Key Personnel, Shariah Adviser, ...) share one height per row;
        "Read Profile" sits at the bottom ---- */
.bv-grid:has(> .v4-pcard) { align-items: stretch; }
.v4-pcard .v4-pcard__open { margin-top: auto; padding-top: 10px; }

/* ---- Profile photos as a small square thumbnail at the card's top-left
        (client: the edge-to-edge 4:5 photo was too big); name and role below ---- */
.v4-pcard--photo { padding-top: clamp(20px, 3vw, 30px); }
.v4-pcard__photo {
  width: 84px;
  height: 84px;
  margin: 0 0 12px;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid var(--bv-border, rgba(0, 0, 0, 0.08));
}

/* ---- Buttons: label stays on one line; the "light" button (a dark fill in light mode,
        since --white is the dark ink there) gets light text in light mode ---- */
.bv-btn { white-space: nowrap; flex-shrink: 0; }
.bv-btn--light { color: #f8fbff; }
:root[data-theme="dark"] .bv-btn--light { color: #02121f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bv-btn--light { color: #02121f; } }
.bv-btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
#performance { scroll-margin-top: 90px; }

/* ---- Mobile drawer: parent menus start closed; tapping one opens it with a slide
        (the header script keeps only one open at a time); chevron shows the state.
        :root[lang] matches the BM drawer rules' specificity, so this wins for EN and BM. ---- */
@media (max-width: 1320px) {
  :root[lang] body.nav-open .site-nav .nav-parent {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  :root[lang] body.nav-open .site-nav .nav-parent::after {
    content: "" !important;
    display: block !important;
    position: static !important;
    width: 8px !important; height: 8px !important;
    margin: 0 6px 4px 12px !important;
    inset: auto !important;
    transform-origin: center !important;
    border: solid currentColor; border-width: 0 2px 2px 0;
    background: none !important;
    opacity: 0.7;
    transform: rotate(45deg);
    transition: transform 300ms ease, margin 300ms ease;
  }
  :root[lang] body.nav-open .site-nav .nav-menu.is-open > .nav-parent::after {
    transform: rotate(-135deg);
    margin-bottom: -4px !important;
  }
  :root[lang] body.nav-open .site-nav .nav-dropdown {
    max-height: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: max-height 350ms ease, opacity 250ms ease, padding 350ms ease, margin 350ms ease, visibility 0s linear 350ms;
  }
  :root[lang] body.nav-open .site-nav .nav-menu.is-open > .nav-dropdown {
    max-height: 40rem !important;
    margin: 2px 0 8px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: max-height 450ms ease, opacity 300ms ease 60ms, padding 350ms ease, margin 350ms ease, visibility 0s;
  }
}
@media (max-width: 1320px) and (prefers-reduced-motion: reduce) {
  :root[lang] body.nav-open .site-nav .nav-dropdown,
  :root[lang] body.nav-open .site-nav .nav-parent::after { transition: none !important; }
}