/* =========================================================
   Main Management — site.css
   Component & layout styles. Loads after tokens.css.
   Design language:
     - Swiss / International Typographic Style discipline
       (strict grid, asymmetric balance, generous whitespace)
     - Playfair Display + Lato (brand)
     - Main Blue / Rust / SF Fog scale (brand)
     - No gradients, no fluff, type does the work
   ========================================================= */

* { box-sizing: border-box; }

/* Suppress horizontal scroll from the off-canvas mobile menu (fixed, parked
   off the right edge). On the scroll root only, so position:sticky is unaffected. */
html { overflow-x: hidden; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: 1.6;
  letter-spacing: 0.005em;
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--main-blue); color: var(--fog-00); }

/* ----- Headings ----- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--main-blue);
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 var(--s-4) 0;
  text-wrap: balance;
}
h1 { font-size: var(--h1-size); line-height: 1.02; }
h2 { font-size: var(--h2-size); line-height: 1.05; }
h3 { font-size: var(--h3-size); line-height: 1.15; }
h4 { font-size: var(--h4-size); line-height: 1.25; }
h5 { font-size: var(--h5-size); line-height: 1.35; font-weight: 600; }

h1 em, h2 em, h3 em { font-style: italic; color: var(--rust); font-weight: 400; }

p {
  margin: 0 0 var(--s-4) 0;
  color: var(--fg-2);
  font-size: var(--body-size);
  line-height: 1.62;
  max-width: 62ch;
  text-wrap: pretty;
}

p.lede {
  font-size: var(--lede-size);
  line-height: 1.55;
  color: var(--main-blue);
  max-width: 56ch;
  font-weight: 300;
}

strong { font-weight: 700; color: var(--main-blue); }
em     { font-style: italic; }

a {
  color: var(--main-blue);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--rust); }

/* ----- Eyebrow ----- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--eyebrow-size);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 var(--s-5) 0;
  display: inline-block;
}
.eyebrow.muted { color: var(--fog-180); }

/* A11y: the design-system "tertiary text" alias (--fg-3 = fog-120) fails AA
   (~3.6:1) at small sizes on white. Remap it to fog-180 (~6.4:1) site-wide —
   a local override pending the systemic fix in the design system. Raw fog-120
   is kept for large/decorative use (monogram initials) and input placeholders. */
:root { --fg-3: var(--fog-180); }

/* Wide-screen margins: let containers keep scaling with the viewport instead of
   freezing at the token caps (side margins were ballooning on large monitors).
   Below ~1500px viewports nothing changes. ipc.css :root mirrors this. */
:root {
  --container-wide: clamp(1440px, 90vw, 1728px);
  --container:      clamp(1240px, 78vw, 1488px);
}

/* ----- Containers ----- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-6);
}
.container.wide   { max-width: var(--container-wide); }
.container.narrow { max-width: var(--container-narrow); }

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: var(--radius-pill); /* button/chip radius — 2px, de-pilled */
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary { background: var(--main-blue); color: var(--fog-00); }
.btn-primary:hover { background: var(--main-blue-700); color: var(--fog-00); }
.btn-outline { background: transparent; color: var(--main-blue); border-color: var(--main-blue); }
.btn-outline:hover { background: var(--main-blue); color: var(--fog-00); }
.btn-inverse { background: var(--fog-00); color: var(--main-blue); border-color: var(--fog-00); }
.btn-inverse:hover { background: var(--rust); color: var(--fog-00); border-color: var(--rust); }
.btn-outline-light { background: transparent; color: var(--fog-00); border-color: var(--fog-00); }
.btn-outline-light:hover { background: var(--fog-00); color: var(--main-blue); }
.btn-ghost   { background: transparent; color: var(--main-blue); padding: 16px 0; }
.btn-ghost:hover { color: var(--rust); }

.btn .arrow { font-size: 16px; transition: transform var(--dur-fast) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ======================================================
   ACCESSIBILITY & INTERACTION BASELINE
   (Web Interface Guidelines remediation — 2026-06-08)
   ====================================================== */
html { color-scheme: light; }

/* Preserve intrinsic ratio so width/height attrs can't distort, and never
   overflow the container. Specific `… img { height: … }` rules still win. */
img { max-width: 100%; height: auto; }

/* Always-visible keyboard focus. !important beats any page-level
   `:focus { outline: none }`; :focus-visible keeps it off mouse clicks. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--main-blue) !important;
  outline-offset: 2px;
}

/* Remove the 300ms tap delay + grey tap flash on touch targets. */
a, button, [role="button"], input, select, textarea, summary, label, .btn {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  touch-action: manipulation;
}

/* In-page anchors clear the fixed nav instead of hiding beneath it. */
[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }

/* Don't chain scroll to the page behind open overlays. */
.nav-mobile,
#etf-leave,
.rg-modal { overscroll-behavior: contain; }

/* Make the in-content "GIPS-verified composite" disclosure links read as links
   without needing a hover (CCO request) — base <a> is text-decoration:none. */
.ag-row a[href="/legal/gips/"],
.pt-why-card__body a[href="/legal/gips/"] { text-decoration: underline; text-underline-offset: 2px; }

/* ======================================================
   SITE NAV
   Institutional, restrained, editorial.
   - 2px Main Blue brand mark at the very top (always)
   - Tall nav (96px) on the hero; compresses to 72px on scroll
   - Logo left, nav right-aligned, CTA as arrow text-link
   - No bordered pill button — too SaaS-template
   ====================================================== */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--nav-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease),
              height var(--dur) var(--ease);
}
/* Top hairline — the always-on brand mark (rust reads on both dark hero and white scrolled state) */
.site-nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--rust);
  z-index: 1;
}
.site-nav.scrolled {
  height: var(--nav-h-scrolled);
  background: rgba(255,255,255,0.96);
  border-bottom-color: var(--border);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}

.site-nav .inner {
  height: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--s-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-7);
}

.site-nav .brand {
  display: flex;
  align-items: center;
  transition: opacity var(--dur-fast) var(--ease);
}
.site-nav .brand:hover { opacity: 0.8; }
.site-nav .brand img {
  display: block;
  height: 46px;
  width: auto;
  transition: height var(--dur) var(--ease);
}
.site-nav.scrolled .brand img { height: 36px; }
/* Dual-logo swap — white logo over dark hero, dark logo when scrolled past */
.site-nav .brand .logo-dark { display: none; }
.site-nav.scrolled .brand .logo-light { display: none; }
.site-nav.scrolled .brand .logo-dark { display: block; }

.site-nav .right {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

.site-nav .links {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: var(--s-7);
}
.site-nav .links a {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--fog-00);  /* white over dark hero by default */
  padding: 8px 2px;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.site-nav .links a:hover { color: var(--rust-light); }
.site-nav.scrolled .links a { color: var(--main-blue); }
.site-nav.scrolled .links a:hover { color: var(--rust); }
.site-nav .links a.has-caret::after {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 8px; margin-bottom: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
  vertical-align: middle;
  opacity: 0.65;
}
.site-nav .links li.has-dropdown:hover > a.has-caret::after { transform: rotate(225deg); margin-bottom: -2px; }

/* CTA as confident text link with rust arrow — not a bordered pill */
.site-nav .cta {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--fog-00);  /* white over dark hero by default */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.site-nav .cta::after {
  content: '→';
  display: inline-block;
  color: var(--rust-light);
  font-size: 18px;
  transition: transform var(--dur-fast) var(--ease);
}
.site-nav .cta:hover { color: var(--rust-light); }
.site-nav .cta:hover::after { transform: translateX(4px); }
.site-nav.scrolled .cta { color: var(--main-blue); }
.site-nav.scrolled .cta::after { color: var(--rust); }
.site-nav.scrolled .cta:hover { color: var(--rust); }

/* Strategies dropdown */
.site-nav .has-dropdown { position: relative; }
.site-nav .dropdown {
  position: absolute;
  top: calc(100% + 4px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 312px;
  background: var(--fog-00);
  border: 1px solid var(--border-strong);
  border-radius: 6px;                     /* soft, refined — not a hard square, not a SaaS pill */
  box-shadow: 0 18px 44px -26px rgba(14,39,72,0.38), 0 2px 6px -3px rgba(14,39,72,0.12);
  padding: 0;
  overflow: hidden;                       /* clip item hover + dividers to the radius */
  list-style: none;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.site-nav .has-dropdown:hover .dropdown,
.site-nav .has-dropdown:focus-within .dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.site-nav .dropdown li { border-bottom: 1px solid var(--border); }
.site-nav .dropdown li:last-child { border-bottom: 0; }
.site-nav .dropdown a {
  display: block;
  padding: 13px 18px;
  border-left: 2px solid transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--main-blue);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.site-nav .dropdown a .sub {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--fg-3);
  letter-spacing: 0;
  margin-top: 3px;
}
.site-nav .dropdown a:hover { background: var(--fog-10); border-left-color: var(--rust); color: var(--main-blue); }
.site-nav .dropdown a:hover .sub { color: var(--fg-2); }
.site-nav .dropdown__feature { border-top: 1px solid var(--border-strong); }
.site-nav .dropdown__feature a { background: var(--fog-10); }
.site-nav .dropdown__feature a:hover { background: var(--fog-20); }

/* ----- "Talk with us" CTA dropdown (advisor) -----
   Distinct from the plain nav dropdowns: icon-led pathway items, right-aligned
   to the CTA. The trigger keeps .cta styling; its arrow becomes a caret. */
.site-nav .nav-cta { position: relative; display: inline-flex; align-items: center; }
.site-nav .cta.cta--menu::after {
  content: ''; width: 6px; height: 6px;
  margin-left: 2px; margin-bottom: 2px;
  border: 0;
  border-right: 1.5px solid var(--rust-light);
  border-bottom: 1.5px solid var(--rust-light);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
  font-size: 0; line-height: 0;
}
.site-nav.scrolled .cta.cta--menu::after,
body.page-light .site-nav .cta.cta--menu::after {
  border-right-color: var(--rust); border-bottom-color: var(--rust);
}
.site-nav .nav-cta:hover .cta.cta--menu::after,
.site-nav .nav-cta:focus-within .cta.cta--menu::after { transform: rotate(225deg); margin-bottom: -2px; }

.site-nav .nav-cta__menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 312px; list-style: none; margin: 0; padding: 0;
  background: var(--fog-00);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 18px 44px -26px rgba(14,39,72,0.4), 0 2px 6px -3px rgba(14,39,72,0.12);
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  z-index: 60;
}
/* invisible bridge so the cursor can cross the gap without dropping :hover */
.site-nav .nav-cta__menu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.site-nav .nav-cta:hover .nav-cta__menu,
.site-nav .nav-cta:focus-within .nav-cta__menu { opacity: 1; pointer-events: auto; transform: none; }
.site-nav .nav-cta__menu li { border-bottom: 1px solid var(--border); }
.site-nav .nav-cta__menu li:last-child { border-bottom: 0; }
.site-nav .nav-cta__menu li:first-child a { border-top-left-radius: 6px; border-top-right-radius: 6px; }
.site-nav .nav-cta__menu li:last-child a { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.site-nav .nav-cta__menu a {
  display: block; padding: 13px 18px; text-decoration: none;
  border-left: 2px solid transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.site-nav .nav-cta__menu a:hover { background: var(--fog-10); border-left-color: var(--rust); }
.site-nav .nav-cta__t { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--main-blue); letter-spacing: 0.01em; }
.site-nav .nav-cta__s { display: block; font-family: var(--font-sans); font-weight: 400; font-size: 12.5px; line-height: 1.35; color: var(--fg-3); margin-top: 3px; }

/* ======================================================
   MOBILE NAV — hamburger + slide-in panel (shown <=1200px)
   ====================================================== */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--fog-00);
}
body.page-light .nav-toggle,
.site-nav.scrolled .nav-toggle { color: var(--main-blue); }
.nav-toggle__icon { position: relative; display: block; width: 24px; height: 16px; }
.nav-toggle__icon span {
  position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 2px;
}
.nav-toggle__icon span:nth-child(1) { top: 0; }
.nav-toggle__icon span:nth-child(2) { top: 7px; }
.nav-toggle__icon span:nth-child(3) { top: 14px; }

.nav-mobile-backdrop {
  position: fixed; inset: 0;
  background: rgba(9,26,49,0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease);
  z-index: 1290;
}
.nav-mobile-backdrop.is-open { opacity: 1; pointer-events: auto; }

.nav-mobile {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(400px, 88vw);
  background: var(--fog-00);
  box-shadow: none;
  z-index: 1300;
  transform: translateX(100%);
  /* visibility keeps the closed panel's links out of the Tab order (it is
     aria-hidden); the 0.32s delay lets the slide-out finish before hiding. */
  visibility: hidden;
  transition: transform 0.32s var(--ease-out-expo, var(--ease)), visibility 0s linear 0.32s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 72px var(--s-6) var(--s-7);
  display: flex;
  flex-direction: column;
}
.nav-mobile.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.32s var(--ease-out-expo, var(--ease)), visibility 0s;
  box-shadow: -24px 0 64px rgba(14,39,72,0.22);
}
body.nav-mobile-open { overflow: hidden; }
.nav-mobile__close {
  position: absolute; top: 16px; right: 14px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--main-blue);
}
.nav-mobile__close svg { width: 22px; height: 22px; }
.nav-mobile__close:hover { color: var(--rust); }

.nav-mobile .links { list-style: none; margin: 0; padding: 0; }
.nav-mobile .links > li { border-bottom: 1px solid var(--border); }
.nav-mobile .links > li > a {
  display: block; padding: 15px 0;
  font-family: var(--font-sans); font-weight: 500; font-size: 22px;
  line-height: 1.2; color: var(--main-blue); text-decoration: none;
}
.nav-mobile .links > li > a:hover { color: var(--rust); }
.nav-mobile .links a.has-caret::after { display: none; }   /* drop the desktop chevron */
/* nested submenu (was the desktop .dropdown) as an indented list */
.nav-mobile .dropdown { list-style: none; margin: -2px 0 12px; padding: 0; }
.nav-mobile .dropdown a {
  display: block; padding: 9px 0 9px 16px;
  border-left: 2px solid var(--border);
  font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  color: var(--fog-180); text-decoration: none;
}
.nav-mobile .dropdown a:hover { color: var(--rust); border-left-color: var(--rust); }
.nav-mobile .dropdown a .sub { display: none; }            /* keep the panel compact */
.nav-mobile__cta {
  margin-top: var(--s-6);
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 700; font-size: 15px;
  letter-spacing: 0.02em;
  color: #fff; background: var(--main-blue);
  padding: 14px 24px; border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.nav-mobile__cta:hover { background: var(--rust); }

/* "Talk with us" group in the mobile panel (advisor) — the three pathways */
.nav-mobile__talk { margin-top: var(--s-7); display: flex; flex-direction: column; }
.nav-mobile__talk-label {
  font-family: var(--font-sans); font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fog-180);
  margin-bottom: 4px;
}
.nav-mobile__talk > a {
  padding: 13px 0; font-family: var(--font-sans); font-weight: 600; font-size: 16px;
  color: var(--main-blue); text-decoration: none; border-top: 1px solid var(--border);
}
.nav-mobile__talk > a:hover { color: var(--rust); }
.nav-mobile__talk > a.is-primary {
  margin-top: 16px; align-self: flex-start; border-top: 0;
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; background: var(--main-blue);
  padding: 13px 22px; border-radius: var(--radius-pill);
}
.nav-mobile__talk > a.is-primary:hover { background: var(--rust); color: #fff; }

@media (max-width: 1200px) {
  .site-nav .right { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ======================================================
   page-light — pages without a dark hero (strategy pages, etc.).
   Nav defaults to the "scrolled" appearance: white bg + dark text +
   dark logo. Without this, nav text would be white-on-white.
   ====================================================== */
body.page-light .site-nav {
  background: rgba(255,255,255,0.96);
  border-bottom-color: var(--border);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
body.page-light .site-nav .links a,
body.page-light .site-nav .cta { color: var(--main-blue); }
body.page-light .site-nav .links a:hover,
body.page-light .site-nav .cta:hover { color: var(--rust); }
body.page-light .site-nav .cta::after { color: var(--rust); }
body.page-light .site-nav .brand .logo-light { display: none; }
body.page-light .site-nav .brand .logo-dark { display: block; }

/* ======================================================
   HERO — Swiss-disciplined, text-led, BIG
   ====================================================== */

.hero {
  position: relative;
  background: var(--main-blue);
  color: var(--fog-00);
  padding: calc(var(--nav-h) + var(--s-7)) 0 var(--s-9);
  border-bottom: 0;
  overflow: hidden;
}

/* Query container: the hero text below sizes off THIS container (cqi units), not the
   viewport — so text + the container-%-sized bridge scale off the same reference,
   freeze together above 1440, and never drift apart on zoom. */
.hero .container { max-width: var(--container-wide); position: relative; z-index: 1; container-type: inline-size; }

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(56px, 6.8cqi, 96px);  /* container-relative (was var(--display-hero), vw-based) */
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-6) 0;
  max-width: 18ch;
  color: var(--fog-00);
}
.hero h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--rust-light);
}

/* ----- Editorial word-reveal — used on every page hero -----
   Words fade up in reading order with a deliberate stagger.
   The .climax word arrives with an extra beat so the punchline lands
   on its own. Generalized to both .hero (dark home hero) and .page-hero
   (light page heroes — strategies, philosophy, partnership, etc.).
*/
.hero h1.reveal,
.page-hero h1.reveal { line-height: 1.02; }

.hero h1.reveal .w,
.page-hero h1.reveal .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  animation: word-rise 720ms var(--ease-out-expo) both;
}
.hero h1.reveal .w:nth-child(1), .page-hero h1.reveal .w:nth-child(1) { animation-delay: 80ms;  }
.hero h1.reveal .w:nth-child(2), .page-hero h1.reveal .w:nth-child(2) { animation-delay: 200ms; }
.hero h1.reveal .w:nth-child(3), .page-hero h1.reveal .w:nth-child(3) { animation-delay: 320ms; }
.hero h1.reveal .w:nth-child(4), .page-hero h1.reveal .w:nth-child(4) { animation-delay: 440ms; }
.hero h1.reveal .w:nth-child(5), .page-hero h1.reveal .w:nth-child(5) { animation-delay: 560ms; }
.hero h1.reveal .w:nth-child(6), .page-hero h1.reveal .w:nth-child(6) { animation-delay: 680ms; }
.hero h1.reveal .w:nth-child(7), .page-hero h1.reveal .w:nth-child(7) { animation-delay: 800ms; }
.hero h1.reveal .w:nth-child(8), .page-hero h1.reveal .w:nth-child(8) { animation-delay: 920ms; }
@keyframes word-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Climax — extra 320ms beat after the lead-in words, plus a slower duration
   and a soft scale-overshoot so the punchline word lands with weight. */
.hero h1.reveal .w.climax,
.page-hero h1.reveal .w.climax {
  animation-delay: 1360ms;
  animation-duration: 900ms;
  animation-name: word-climax;
}
@keyframes word-climax {
  0%   { opacity: 0; transform: translateY(14px) scale(0.985); }
  60%  { opacity: 1; transform: translateY(0)    scale(1.012); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* The lede + actions follow the homepage hero reveal — they fade in once
   the headline has finished, so the eye lands on the H1 first.
   Scoped to .hero only; strategy / page-hero paints everything instantly. */
.hero .lede,
.hero .actions {
  opacity: 0;
  animation: fade-in 600ms var(--ease-out-expo) both;
}
.hero .lede    { animation-delay: 2360ms; }
.hero .actions { animation-delay: 2520ms; }
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Accessibility: anyone with reduced-motion enabled gets the page instantly. */
@media (prefers-reduced-motion: reduce) {
  .hero h1.reveal .w,
  .hero .lede,
  .hero .actions {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.hero .lede {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(20px, 1.47cqi, 24px);  /* container-relative, matches headline scaling */
  line-height: 1.55;
  color: var(--fog-50);
  max-width: 56ch;
  margin: 0 0 var(--s-8) 0;
}

.hero .actions {
  display: flex;
  gap: var(--s-4);
  align-items: center;
}

/* Bottom rule bridges from dark hero to light proof bar */
.hero::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -1px; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 2px;
  background: var(--rust);
  z-index: 2;
}

/* Golden Gate line-art — a self-drawing scene: a skeleton (exact-centerline)
   mask reveals the filled artwork left-to-right, paced to the headline reveal,
   completing as the climax word "partnership" lands (~2.3s) — the bridge IS the
   partnership, drawn line by line. Strokes cover the art exactly, so it draws
   progressively with no gaps and nothing snaps in at the end. The SVG owns its
   own SMIL timeline + reduced-motion handling. It's a child of .container and sized in % of the CONTAINER
   (not the raw viewport), so it scales in lockstep with the copy and freezes once
   .container caps at 1440 — keeping it clear of the text at any zoom. The SVG owns
   its per-stroke timeline + reduced-motion handling; brightness lives here. */
.hero-copy { position: relative; z-index: 1; }   /* copy paints above the art */

.hero-art {
  display: none;                       /* shown only when the hero is wide enough */
  position: absolute;
  right: 0;                            /* anchored to the container right edge (= the
                                          nav / page-margin line); all units relative so
                                          the bridge↔text relationship is zoom-stable */
  top: 61.5%;
  transform: translateY(-50%) scale(0.78);
  transform-origin: 100% 0;            /* top-right anchor */
  width: 77%;                          /* % of .container, so it tracks the copy */
  z-index: 0;
  pointer-events: none;
}
.hero-art img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.82;                       /* resting brightness; the SVG self-draws */
}

/* Show the art once the hero is wide enough to hold it, and keep the lede's
   measure short so it stays in its own lane, clear of the towers. */
@media (min-width: 1000px) {
  .hero-art { display: block; }
  .hero .lede { max-width: 46ch; }
}

/* ======================================================
   FIRM FACTS — clean, no-box stat strip (replaces .proof-bar).
   An ethos triad over three understated count-up stats with
   hairline dividers; platform availability demoted to a quiet line.
   ====================================================== */
.firm-facts {
  background: var(--fog-00);
  padding: var(--s-8) 0;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.firm-facts .container { max-width: var(--container-wide); }
.firm-facts .ethos {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  max-width: none;
  margin: 0 auto var(--s-7);
}
.firm-facts .ethos .dot { color: var(--fog-80); font-weight: 400; margin: 0 0.4em; }
.firm-facts .stats {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: clamp(var(--s-6), 6vw, var(--s-10));
}
.firm-facts .stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 0 clamp(var(--s-4), 3vw, var(--s-7));
}
.firm-facts .stat + .stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 2.4em;
  background: var(--fog-50);
}
.firm-facts .num {
  font-family: var(--font-serif);         /* big hero stats are display numbers — Playfair, the rare artistic exception (restored, was weight 700) */
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, 46px);
  line-height: 1;
  color: var(--main-blue);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.firm-facts .cap {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--fog-180);
}
.firm-facts .cap i {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: var(--fog-180);
  margin-top: 3px;
}
.firm-facts .availability {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--fog-180);
  max-width: none;
  margin: var(--s-7) auto 0;
}

/* ======================================================
   SECTION SCAFFOLDING — shared by content sections
   ====================================================== */
.section {
  padding: var(--s-10) 0;
  border-bottom: 1px solid var(--border);
}
.section.tint { background: var(--fog-10); }
.section.dark { background: var(--main-blue); color: var(--fog-00); }
.section .container { max-width: var(--container-wide); }
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-7);
  margin-bottom: var(--s-8);
}
.section-head .text { max-width: 60ch; }
.section-head h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--main-blue);
  margin: 0;
  max-width: 18ch;
}
.section-head h2 em { font-style: italic; color: var(--rust); font-weight: 500; }
.section-head .see-all {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--main-blue);
  white-space: nowrap;
}
.section-head .see-all::after { content: ' →'; color: var(--rust); }
.section-head .see-all:hover { color: var(--rust); }

/* Chapter marker — small italic Playfair number above each section H2.
   Quiet editorial wayfinding (Origins-style); not a SaaS eyebrow. */
.chapter {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--rust);
  letter-spacing: 0;
  margin: 0 0 var(--s-4) 0;
}

/* ======================================================
   CALLOUT — single-line band between sections, italic Playfair.
   Lifted from the deck's bottom-callout pattern.
   ====================================================== */
.callout {
  background: var(--fog-10);
  padding: var(--s-6) 0;
  text-align: center;
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.callout .container { max-width: var(--container-narrow); }
.callout p {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.4;
  color: var(--main-blue);
  margin: 0 auto;
  max-width: 60ch;
  letter-spacing: -0.005em;
}
.callout p em { color: var(--rust); font-style: italic; font-weight: 500; }

/* ======================================================
   PRINCIPLES — 5 horizontal cards for the philosophy tenets.
   Lifted from the deck's philosophy_principles slide.
   (Selector specificity bumped to override .philosophy-teaser .grid.)
   ====================================================== */
.philosophy-teaser .principles {
  margin-top: var(--s-8);
}
.philosophy-teaser .principles > .grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-4);
}
.principle-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: var(--fog-00);
  border: 1px solid var(--fog-30);
  border-radius: 4px;
  padding: var(--s-6) var(--s-5);
  min-height: 180px;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.principle-card:hover { border-color: var(--main-blue); transform: translateY(-2px); }
.principle-card .num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  color: var(--rust);
  letter-spacing: 0;
}
.principle-card .label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--main-blue);
  margin-top: var(--s-2);
}
.principle-card .desc {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fog-180);
  margin: 0;
  max-width: none;
}

/* ======================================================
   BRAND PILLAR STRIP — dot-separated eyebrow pillars.
   Lifted from the deck's `PARTNER-OWNED · INDEPENDENT · …` strip.
   ====================================================== */
.pillar-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-6);
  margin-top: var(--s-7);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pillar-strip .pillar {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--main-blue);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pillar-strip .pillar::after {
  content: '·';
  color: var(--rust);
  font-size: 18px;
  margin-left: var(--s-6);
  line-height: 1;
}
.pillar-strip .pillar:last-child::after { content: none; }

/* ======================================================
   TRAITS — partnership traits as icon cards (not list).
   ====================================================== */
.traits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin: var(--s-6) 0 var(--s-6);
}
.trait-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--fog-30);
  border-radius: 4px;
  background: var(--fog-00);
  transition: border-color var(--dur-fast) var(--ease);
}
.trait-card:hover { border-color: var(--main-blue); }
.trait-card .label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  color: var(--main-blue);
  letter-spacing: -0.005em;
}
.trait-card .desc {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fog-180);
  margin: 0;
}

/* ======================================================
   SKYLINE — SF Bay Bridge silhouette accent.
   Lifted from the deck's firm_pillars slide. Subtle anchor element.
   ====================================================== */
.skyline-band {
  position: relative;
  overflow: hidden;
}
.skyline-band::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 88px;
  background-image: url('../img/sf_skyline.webp');
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 100%;
  opacity: 0.08;
  pointer-events: none;
}

/* ======================================================
   STRATEGIES GRID — 4 strategy cards + 1 All Asset feature
   ====================================================== */
.strategies .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}
.strategy-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  background: var(--fog-00);
  border: 1px solid var(--fog-50);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  min-height: 280px;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
  position: relative;
  color: var(--main-blue);
  text-decoration: none;
}
.strategy-card:hover {
  border-color: var(--main-blue);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px rgba(14,39,72,0.18);
}
.strategy-card .chip {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* rust-dark (not rust) — the plain rust/8% pair was ~4.9:1, too close for
     axe on some renders; rust-dark clears ~6.8:1 (2026-07-14 contrast pass). */
  color: var(--rust-dark);
  background: rgba(177,85,43,0.08);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.strategy-card h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--main-blue);
  margin: 0;
}
.strategy-card p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fog-180);
  margin: 0;
  max-width: none;
}
.strategy-card .arrow {
  margin-top: auto;
  font-size: 22px;
  color: var(--rust);
  align-self: flex-end;
  transition: transform var(--dur-fast) var(--ease);
}
.strategy-card:hover .arrow { transform: translateX(4px); }

/* All Asset feature card — wider, more editorial */
.all-asset-feature {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-7);
  background: var(--main-blue);
  color: var(--fog-00);
  border-radius: var(--radius-lg);
  padding: var(--s-8);
  text-decoration: none;
  align-items: center;
  transition: transform var(--dur-fast) var(--ease);
}
.all-asset-feature:hover { transform: translateY(-2px); }
/* Closing CTA under the All Asset bar — routes to the full strategies index. */
.strategies-allcta { text-align: center; margin-top: var(--s-7); }
.all-asset-feature .chip {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* rust-light is already the lightest rust token (needed to read on navy);
     the fix here is a lighter background tint so the tint doesn't wash the
     text down toward the fill color — 0.12 measured ~4.1:1, 0.04 clears
     ~4.6:1 (2026-07-14 contrast pass). */
  color: var(--rust-light);
  background: rgba(212,122,80,0.04);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--s-4);
  display: inline-block;
}
.all-asset-feature h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.1;
  color: var(--fog-00);
  margin: 0 0 var(--s-4) 0;
  max-width: 14ch;
}
.all-asset-feature p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fog-50);
  margin: 0 0 var(--s-5) 0;
  max-width: 52ch;
}
.all-asset-feature .models {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.all-asset-feature .model {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-pill);
  color: var(--fog-00);
}
.all-asset-feature .arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog-00);
  margin-top: var(--s-5);
}
.all-asset-feature .arrow-link::after {
  content: '→';
  color: var(--rust-light);
  transition: transform var(--dur-fast) var(--ease);
}
.all-asset-feature:hover .arrow-link::after { transform: translateX(4px); }

/* Light variant — matches the white strategy cards instead of the navy fill */
.all-asset-feature--light {
  background: var(--fog-00);
  border: 1px solid var(--fog-50);
}
.all-asset-feature--light:hover {
  border-color: var(--main-blue);
  box-shadow: 0 12px 32px -16px rgba(14,39,72,0.18);
}
.all-asset-feature--light .chip { color: var(--rust-dark); background: rgba(177,85,43,0.08); }
.all-asset-feature--light h3 { color: var(--main-blue); font-style: normal; }
.all-asset-feature--light p { color: var(--fog-180); }
.all-asset-feature--light .model { border-color: var(--fog-50); color: var(--main-blue); }
.all-asset-feature--light .arrow-link { color: var(--main-blue); }
.all-asset-feature--light .arrow-link::after { color: var(--rust); }

/* ======================================================
   PHILOSOPHY TEASER — fog-10, big pullquote left + prose right
   ====================================================== */
.philosophy-teaser .grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-9);
  align-items: start;
}
.philosophy-teaser .quote {
  position: sticky;
  top: 120px;
}
.philosophy-teaser .quote .q {
  display: block;
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 4vw, 64px);
  line-height: 1.05;
  color: var(--main-blue);
  letter-spacing: -0.015em;
  max-width: 12ch;
}
.philosophy-teaser .quote .q em { font-style: italic; color: var(--rust); }
.philosophy-teaser .quote .cite {
  display: block;
  margin-top: var(--s-5);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rust);
}
.philosophy-teaser .body p {
  max-width: 56ch;
  color: var(--main-blue);
  font-size: 17px;
}
.philosophy-teaser .tenets {
  list-style: none;
  padding: 0;
  margin: var(--s-7) 0 var(--s-7);
  counter-reset: tenet;
}
.philosophy-teaser .tenets li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--border);
  align-items: baseline;
}
.philosophy-teaser .tenets li:last-child { border-bottom: 1px solid var(--border); }
.philosophy-teaser .tenets li::before {
  counter-increment: tenet;
  content: counter(tenet, decimal-leading-zero);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--rust);
}
.philosophy-teaser .tenets li .label {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--main-blue);
  display: block;
  margin-bottom: 2px;
}
.philosophy-teaser .tenets li .desc {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fog-180);
}
.philosophy-teaser .read-link {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.philosophy-teaser .read-link::after { content: ' →'; color: var(--rust); }

/* ======================================================
   PARTNERSHIP TEASER — 2-up: prose + pullquote
   ====================================================== */
.partnership-teaser .grid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: var(--s-9);
  align-items: center;
}
.partnership-teaser .prose p {
  font-size: 17px;
  max-width: 52ch;
  color: var(--main-blue);
}
.partnership-teaser .traits {
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0 var(--s-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-5);
}
.partnership-teaser .traits li {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--main-blue);
  position: relative;
  padding-left: 22px;
}
.partnership-teaser .traits li::before {
  content: '→';
  position: absolute;
  left: 0; top: 0;
  color: var(--rust);
  font-weight: 700;
}
.partnership-teaser .pullquote {
  border-left: 2px solid var(--rust);
  padding: var(--s-2) 0 var(--s-2) var(--s-6);
}
.partnership-teaser .pullquote .q {
  display: block;
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 2.4vw, 38px);
  line-height: 1.2;
  color: var(--main-blue);
  letter-spacing: -0.01em;
  max-width: 18ch;
}
.partnership-teaser .pullquote .cite {
  display: block;
  margin-top: var(--s-4);
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 14px;
  font-weight: 400;
  color: var(--fog-180);
}
.partnership-teaser .read-link {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.partnership-teaser .read-link::after { content: ' →'; color: var(--rust); }

/* ======================================================
   INSIGHTS STRIP — 4 insight cards
   ====================================================== */
.insights-strip .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
.insight-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  text-decoration: none;
  padding: var(--s-5) 0 0 0;
  border-top: 1px solid var(--main-blue);
}
.insight-card .meta {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  display: flex;
  gap: var(--s-3);
  align-items: center;
}
.insight-card .meta .sep { color: var(--fog-50); }
.insight-card .meta .date { color: var(--fog-180); }
.insight-card h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  color: var(--main-blue);
  margin: var(--s-2) 0 var(--s-2) 0;
  letter-spacing: -0.005em;
  transition: color var(--dur-fast) var(--ease);
}
.insight-card:hover h3 { color: var(--rust); }
.insight-card .abstract {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fog-180);
  line-height: 1.5;
  margin: 0;
}
.insight-card .author {
  margin-top: auto;
  padding-top: var(--s-4);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fog-180);
  font-style: italic;
}
/* Author role under the byline (R65) — so a reader knows who the author is
   ("I don't know who Alex Varner is"). Name stays italic; role reads plain. */
.insight-card .author-role {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--fog-180);
}

/* ======================================================
   TEAM STRIP — intro + avatar row
   ====================================================== */
.team-strip .grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--s-8);
  align-items: center;
}
.team-strip .intro h2 { max-width: 14ch; }
.team-strip .intro p {
  font-size: 17px;
  color: var(--main-blue);
  max-width: 36ch;
}
.team-strip .intro .read-link {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: var(--s-4);
  display: inline-block;
}
.team-strip .intro .read-link::after { content: ' →'; color: var(--rust); }
.team-strip .avatars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-4);
}
.team-strip .avatar {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  text-decoration: none;
  text-align: left;
}
.team-strip .avatar .img {
  aspect-ratio: 3/4;
  background: var(--fog-30);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 36px;
  color: var(--fog-180);
  letter-spacing: -0.02em;
}
.team-strip .avatar .name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--main-blue);
  margin-top: var(--s-2);
}
.team-strip .avatar .role {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fog-180);
}

/* Single team photo (replaces the avatars grid). The photo lives where the
   six headshots used to sit; the overlay gives a soft "Meet everyone" CTA. */
.team-strip .team-photo {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  aspect-ratio: 3 / 2;
  box-shadow: 0 12px 32px rgba(14, 39, 72, 0.12);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.team-strip .team-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.team-strip .team-photo .overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 22px 16px;
  background: linear-gradient(to top, rgba(14, 39, 72, 0.78) 0%, rgba(14, 39, 72, 0.32) 60%, transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.team-strip .team-photo .overlay-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.92;
}
.team-strip .team-photo .overlay-cta {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}
.team-strip .team-photo .overlay-cta .arrow { color: var(--rust); margin-left: 4px; }
.team-strip .team-photo:hover img { transform: scale(1.03); }
.team-strip .team-photo:hover { box-shadow: 0 16px 40px rgba(14, 39, 72, 0.18); }

/* ======================================================
   CTA BAND — Main Blue, final call to action
   ====================================================== */
.cta-band {
  background: var(--main-blue);
  color: var(--fog-00);
  padding: var(--s-11) 0;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative;
}
.cta-band::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 2px;
  background: var(--rust);
}
.cta-band .container { max-width: var(--container-narrow); }
.cta-band h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 64px);
  line-height: 1.05;
  color: var(--fog-00);
  margin: 0 0 var(--s-5) 0;
  letter-spacing: -0.015em;
}
.cta-band h2 em { font-style: italic; color: var(--rust-light); }
.cta-band p {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  color: var(--fog-50);
  margin: 0 auto var(--s-7);
  max-width: 48ch;
}
.cta-band .btn-inverse {
  background: var(--fog-00);
  color: var(--main-blue);
  border-color: var(--fog-00);
}
.cta-band .btn-inverse:hover {
  background: var(--rust);
  color: var(--fog-00);
  border-color: var(--rust);
}

/* ======================================================
   CONTACT MODAL
   ====================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14,39,72,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--fog-00);
  max-width: 560px;
  width: 100%;
  border-radius: var(--radius-lg);
  padding: var(--s-8);
  box-shadow: 0 24px 80px rgba(14,39,72,0.24);
  transform: translateY(12px);
  transition: transform var(--dur) var(--ease);
}
.modal-backdrop.open .modal { transform: translateY(0); }
.modal h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: 32px;
  line-height: 1.15;
  margin: var(--s-2) 0 var(--s-6);
  letter-spacing: -0.01em;
}
.modal form {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.modal input, .modal select, .modal textarea {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--main-blue);
  background: var(--fog-00);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.modal input::placeholder, .modal textarea::placeholder { color: var(--fog-120); }
.modal input:focus, .modal select:focus, .modal textarea:focus { border-color: var(--main-blue); }
.modal textarea { min-height: 96px; resize: vertical; }
.modal select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%237A8898' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}
.modal select:has(option[value=""]:checked) { color: var(--fog-120); }
.modal .actions { display: flex; gap: var(--s-3); margin-top: var(--s-2); }
.modal .success { text-align: left; }
.modal .success .eyebrow { color: var(--rust); }

/* ======================================================
   RESPONSIVE additions
   ====================================================== */
@media (max-width: 1024px) {
  .strategies .grid { grid-template-columns: repeat(2, 1fr); }
  .all-asset-feature { grid-template-columns: 1fr; }
  .insights-strip .grid { grid-template-columns: repeat(2, 1fr); }
  .team-strip .grid { grid-template-columns: 1fr; }
  .team-strip .avatars { grid-template-columns: repeat(4, 1fr); }
  .philosophy-teaser .principles > .grid { grid-template-columns: repeat(2, 1fr); }
  .traits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .section-head { flex-direction: column; align-items: start; }
  .philosophy-teaser .grid,
  .partnership-teaser .grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .philosophy-teaser .quote { position: static; }
  .strategies .grid { grid-template-columns: 1fr; }
  .insights-strip .grid { grid-template-columns: 1fr; }
  .team-strip .avatars { grid-template-columns: repeat(3, 1fr); }
  .partnership-teaser .traits { grid-template-columns: 1fr; }
  .philosophy-teaser .principles > .grid { grid-template-columns: 1fr; }
  .traits-grid { grid-template-columns: 1fr; }
  .pillar-strip { gap: var(--s-3); }
  .pillar-strip .pillar::after { margin-left: var(--s-3); }
}

/* ======================================================
   FOOTER (stub for now)
   ====================================================== */
.site-footer {
  background: var(--main-blue);
  color: var(--fog-80);
  padding: var(--s-9) 0 var(--s-6);
  font-size: 14px;
}
.site-footer .container { max-width: var(--container-wide); }
.site-footer .grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-8);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-footer img.logo { height: 28px; width: auto; margin-bottom: var(--s-4); }
.site-footer .col h2 {
  /* was h5 — bumped to h2 for correct heading-order (2026-07-14 a11y pass);
     selector follows, style unchanged. */
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fog-50);
  margin: 0 0 var(--s-4) 0;
}
.site-footer .col ul { list-style: none; padding: 0; margin: 0; }
.site-footer .col li { margin: 0 0 var(--s-2) 0; }
.site-footer a { color: var(--fog-80); }
.site-footer a:hover { color: var(--fog-00); }
.site-footer .seam {
  display: inline-block;
  margin-top: var(--s-4);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 16px;
  color: var(--fog-00);
}
.site-footer .seam:hover { color: var(--rust-light); }
.site-footer .legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding-top: var(--s-5);
  font-size: 12px;
  color: var(--fog-80); /* fog-120 was 4.14:1 on navy — fails AA at 12px */
}
.site-footer .legal p { margin: 0; max-width: none; color: var(--fog-80); }
.site-footer .legal .legal-disc {
  flex-basis: 100%;
  font-size: 11.5px;
  line-height: 1.55;
  /* No artificial cap — spans the same container/gutters as the rest of the
     footer content (was max-width: 110ch, which left most of the width unused). */
  max-width: none;
}

/* ======================================================
   STRATEGY PAGE — shared template for the four strategy pages.
   White hero, big H1, descriptive lede, CTA pair.
   ====================================================== */
.page-hero {
  position: relative;
  background: var(--fog-00);
  padding: calc(var(--nav-h) + var(--s-9)) 0 var(--s-9);
  border-bottom: 1px solid var(--border);
}
/* Strategy heroes carry a graphic emblem above the eyebrow. The standard
   nav-h + s-9 top pad leaves a ~96px empty band between the nav and the motif,
   which reads as awkward whitespace above the graphic. Tuck the emblem up. */
.page-hero:has(.hero-motif) {
  padding-top: calc(var(--nav-h) + var(--s-6));
}
.page-hero .container {
  max-width: var(--container-wide);
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-8);
  align-items: end;
}
/* No-rail heroes (philosophy, partnership, resources): the hero carries no
   meta rail, so collapse to a single column and cap the lede to a readable
   measure instead of letting it stretch the full wide container. */
.page-hero:not(:has(.meta)) .container { grid-template-columns: 1fr; }
.page-hero:not(:has(.meta)) .lede { max-width: 64ch; }
/* SECT hero: the block-wave motif is wide and short, so top-align the right
   column to pull its info up and close the awkward top-right whitespace. */
.page-hero:has(.hero-motif--sect) .container { align-items: start; }
/* ---- Strategy hero graphics (R59) ---------------------------------------
   One-for-one ports of the mainmgtetfs.com fund-page hero graphics. Dynamic
   BUYW, INTL, and TMAT drawing lives in strategy-hero-graphics.js. ---------- */
.hero-motif {
  display: block;
  margin: 0 0 var(--s-5);
  max-width: 100%;
}
.hero-motif svg,
.hero-motif canvas {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hero-motif--sect { width: clamp(180px, 22.5vw, 345px); aspect-ratio: 1.7 / 1; }
.hero-motif--buyw { width: clamp(220px, 25vw, 360px); aspect-ratio: 2 / 1; }
.hero-motif--intl { width: clamp(190px, 23vw, 320px); aspect-ratio: 1.45 / 1; }
.hero-motif--tmat { width: clamp(230px, 30vw, 400px); aspect-ratio: 16 / 7; }

/* BUYW: the column field now fades its own left/right ends via a per-bar opacity
   envelope (see initBars in strategy-hero-graphics.js), so the mask here only
   feathers the bottom — the baseline melts into the hero instead of a hard floor. */
.hero-motif--buyw {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 82%, transparent 100%);
}

.sg-engine-ring {
  transform-box: fill-box;
  transform-origin: center;
}
.sg-spin-slow { animation: sg-rotate-engine 60s linear infinite; }
.sg-spin-med { animation: sg-rotate-engine-rev 45s linear infinite; }
.sg-spin-fast { animation: sg-rotate-engine 35s linear infinite; }
.sg-spin-slow-rev { animation: sg-rotate-engine-rev 80s linear infinite; }
.sg-segment {
  fill: none;
  stroke-width: 35;
  stroke-linecap: butt;
  stroke: var(--fog-30);
  animation-name: sg-phase-shift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.sg-dur-1 { animation-duration: 12s; }
.sg-dur-2 { animation-duration: 15s; }
.sg-dur-3 { animation-duration: 18s; }
.sg-dur-4 { animation-duration: 20s; }
.sg-delay-1 { animation-delay: 0s; }
.sg-delay-2 { animation-delay: -3s; }
.sg-delay-3 { animation-delay: -7s; }
.sg-delay-4 { animation-delay: -11s; }
.sg-delay-5 { animation-delay: -15s; }
.sg-delay-6 { animation-delay: -5s; }

.sg-neuron-node {
  fill: var(--main-blue);
  transition: fill 2s ease-out;
}
.sg-synapse-line {
  stroke: var(--main-blue);
  stroke-width: 1.5px;
  transition: stroke 2s ease-out, stroke-opacity 2s ease-out;
}
.sg-neuron-node.shocked {
  fill: var(--rust) !important;
  transition: fill 0.05s ease-out;
}
.sg-synapse-line.shocked {
  stroke: var(--rust) !important;
  stroke-opacity: 1 !important;
  transition: stroke 0.05s ease-out, stroke-opacity 0.05s ease-out;
}

@keyframes sg-rotate-engine {
  to { transform: rotate(360deg); }
}
@keyframes sg-rotate-engine-rev {
  to { transform: rotate(-360deg); }
}
@keyframes sg-phase-shift {
  0%, 20% { stroke: var(--main-blue); }
  35%, 55% { stroke: var(--fog-30); }
  70%, 90% { stroke: var(--rust); }
  100% { stroke: var(--main-blue); }
}
@media (prefers-reduced-motion: reduce) {
  .sg-spin-slow,
  .sg-spin-med,
  .sg-spin-fast,
  .sg-spin-slow-rev,
  .sg-segment {
    animation: none;
  }
}
@media (max-width: 720px) {
  .hero-motif { margin-bottom: var(--s-4); }
  .hero-motif--sect { width: min(195px, 55.5vw); }
  .hero-motif--buyw { width: min(220px, 68vw); }
  .hero-motif--intl { width: min(200px, 62vw); }
  .hero-motif--tmat { width: min(270px, 78vw); }   /* wider/shorter aspect needs more width on phones */
}

.page-hero .chapter {
  margin-bottom: var(--s-3);
}
.page-hero h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(56px, 5.6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--main-blue);
  margin: 0 0 var(--s-6) 0;
  max-width: 14ch;
}
.page-hero h1 em { font-style: italic; color: var(--rust); font-weight: 500; }
.page-hero .lede {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(18px, 1.3vw, 22px);
  line-height: 1.5;
  color: var(--main-blue);
  max-width: 52ch;
  margin: 0 0 var(--s-7) 0;
}
.page-hero .actions {
  display: flex;
  gap: var(--s-4);
  align-items: center;
}
.page-hero .meta {
  border-left: 1px solid var(--border);
  padding-left: var(--s-7);
  padding-bottom: var(--s-3);
}
.page-hero .meta .key {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 var(--s-2) 0;
}
.page-hero .meta .val {
  font-family: var(--font-sans);          /* spec values (benchmark, inception) are data, not titles */
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: var(--main-blue);
  margin: 0 0 var(--s-6) 0;
}

/* "Also available as" — the ETF version, presented as a third hero-meta spec
   item, in line with Benchmark / Inception (not a tacked-on badge). The value
   is a link to the fund site via the standard data-etf-link disclosure
   interstitial (prospectus / distributor boilerplate). */
.page-hero .meta a.meta-etf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  text-decoration: none;
  transition: color .18s var(--ease);
}
.meta-etf:hover { color: var(--rust); }
.meta-etf:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; border-radius: 2px; }
.meta-etf__ico {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  color: var(--rust);
  transition: transform .18s var(--ease);
}
.meta-etf:hover .meta-etf__ico { transform: translate(1px, -1px); }

/* ===== THESIS ===== */
.thesis {
  padding: var(--s-10) 0;
  background: var(--fog-00);
  border-bottom: 1px solid var(--border);
}
.thesis .container { max-width: var(--container); }
.thesis .grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--s-9);
  align-items: start;
}
.thesis .quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.1;
  color: var(--main-blue);
  letter-spacing: -0.01em;
  position: sticky;
  top: 120px;
}
.thesis .quote em { color: var(--rust); font-style: italic; }
.thesis .body p {
  font-size: 17px;
  line-height: 1.62;
  color: var(--main-blue);
  max-width: 60ch;
  margin: 0 0 var(--s-5) 0;
}
.thesis .body p:last-child { margin-bottom: 0; }
.thesis .body p em { color: var(--rust); font-style: italic; }

/* ===== AT A GLANCE — ported from deck sector_at_a_glance =====
   Editorial spec sheet placed between Thesis and How-It-Works. Two-column
   grid: left = three short editorial blocks (Objective / Approach /
   Implementation); right = a definition-list facts card. Swiss layout
   with rust eyebrow numerals + hairline dividers.
   Scoped under `.ag` so each rule is unambiguous. */
.at-glance {
  padding: var(--s-10) 0;
  background: var(--fog-00);
  border-bottom: 1px solid var(--border);
}
.at-glance .container { max-width: var(--container-wide); }

.ag .ag-head {
  margin-bottom: var(--s-7);
  max-width: 60ch;
}
.ag .ag-kicker {
  font-family: var(--font-sans);
  font-size: var(--eyebrow-size);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 var(--s-3) 0;
}
.ag h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--main-blue);
  margin: 0 0 var(--s-3) 0;
}
.ag h2 em { font-style: italic; color: var(--rust); font-weight: 500; }
.ag .ag-lede {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--fog-180);
  margin: 0;
}

.ag .ag-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-8);
  align-items: start;
}

/* ----- Left: three editorial blocks ----- */
.ag .ag-text {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.ag .ag-text__block {
  padding-top: var(--s-4);
  border-top: 1px solid var(--fog-30);
}
.ag .ag-text__block:first-child { border-top: 0; padding-top: 0; }
.ag .ag-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--eyebrow-size);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--main-blue);
  margin: 0 0 12px 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.ag .ag-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--rust);
  line-height: 1;
}
.ag .ag-text__block p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.62;
  color: var(--main-blue);
  margin: 0;
}
.ag .ag-text__block em {
  font-family: var(--font-sans);
  font-style: italic;
  color: var(--rust);
  font-weight: 600;
}

/* ----- Right: facts card ----- */
.ag .ag-facts {
  background: var(--fog-10);
  border: 1px solid var(--fog-30);
  border-radius: 4px;
  padding: var(--s-6);
  position: relative;
}
.ag .ag-facts::before {
  content: '';
  position: absolute;
  top: 0; left: var(--s-6); right: var(--s-6);
  height: 2px;
  background: var(--rust);
}
.ag .ag-facts__head {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 var(--s-4) 0;
}
.ag .ag-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.ag .ag-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--s-4);
  padding: 10px 0;
  border-top: 1px solid var(--fog-30);
  align-items: baseline;
}
.ag .ag-row:first-child { border-top: 0; padding-top: 0; }
.ag .ag-row dt {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog-150);
  margin: 0;
}
.ag .ag-row dd {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--main-blue);
  margin: 0;
  font-feature-settings: 'tnum' 1;
}

/* ----- Responsive ----- */
@media (max-width: 900px) {
  .ag .ag-grid {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
  .ag .ag-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ===== HOW IT WORKS — 3-panel process with rust chevrons ===== */
.how-it-works {
  padding: var(--s-10) 0;
  background: var(--fog-10);
  border-bottom: 1px solid var(--border);
}
.how-it-works .container { max-width: var(--container-wide); }
.how-it-works h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--main-blue);
  margin: 0 0 var(--s-8) 0;
  max-width: 16ch;
}
.how-it-works h2 em { font-style: italic; color: var(--rust); font-weight: 500; }
.how-grid {
  display: grid;
  grid-template-columns: 1fr 32px 1fr 32px 1fr;
  gap: var(--s-3);
  align-items: stretch;
}
.how-panel {
  background: var(--fog-00);
  border: 1px solid var(--fog-30);
  border-radius: 4px;
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.how-panel .step {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--rust);
}
.how-panel h3 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--main-blue);
  margin: 0 0 var(--s-3) 0;
}
.how-panel .desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fog-180);
  margin: 0;
}
.how-panel ul.lens {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.how-panel ul.lens li {
  padding: var(--s-3) 0;
  border-top: 1px solid var(--border);
}
.how-panel ul.lens li:first-child { border-top: 0; padding-top: 0; }
.how-panel ul.lens .lens-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--main-blue);
  display: block;
  margin-bottom: 2px;
}
.how-panel ul.lens .lens-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fog-180);
}
.how-panel .weights {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.how-panel .weight-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: 4px;
}
.how-panel .weight-row.over {
  background: var(--main-blue);
  color: var(--fog-00);
}
.how-panel .weight-row.mkt {
  background: var(--fog-20);
  color: var(--main-blue);
}
.how-panel .weight-row.under {
  background: var(--fog-00);
  border: 1px solid var(--fog-50);
  color: var(--main-blue);
}
.how-panel .weight-row .w-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
}
.how-panel .weight-row.under .w-label,
.how-panel .weight-row.mkt .w-label { color: var(--rust); opacity: 1; }
.how-panel .weight-row .w-value {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
}
.how-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--rust);
  font-style: italic;
}
.how-it-works .closing {
  margin-top: var(--s-7);
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--main-blue);
  text-align: center;
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}
.how-it-works .closing em { color: var(--rust); }

/* ===== HOW IT WORKS — richer variant ported from deck slide_market_to_conviction =====
   Scoped under `.hiw` so it only overrides the basic .how-* layout on pages that
   opt in via `<section class="how-it-works hiw">`. Strategies index keeps the
   simpler 3-panel layout untouched.
*/
.hiw .hiw-lede {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--fog-180);
  max-width: 60ch;
  margin: 0 0 var(--s-6) 0;
}

/* ----- Apple-style magnetized scroll pin ----- */
.hiw .hiw-pin {
  position: relative;
  height: 260vh;
}
.hiw .hiw-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--nav-h) + var(--s-3));
}
/* Locked section title — pins with the animation so the heading stays above it. */
.hiw .hiw-sticky > h2 {
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.05;
  margin: 0 0 var(--s-2);
}
.hiw .hiw-sticky > .hiw-lede {
  margin: 0 0 var(--s-5);
}

.hiw .hiw-cols {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  gap: var(--s-6);
  align-items: start;
  width: 100%;
}
.hiw .hiw-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  opacity: 0.42;
  transform: translateY(0);
  transition: opacity 500ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Active-column highlight rules (mirrors conviction panel pattern) */
.hiw[data-step="0"] .hiw-col { opacity: 0.6; }
.hiw[data-step="1"] .hiw-col[data-col="1"],
.hiw[data-step="2"] .hiw-col[data-col="2"],
.hiw[data-step="3"] .hiw-col[data-col="3"] {
  opacity: 1;
  transform: translateY(-2px);
}
/* Active column eyebrow gets a slightly stronger rust em + a thin underline */
.hiw .hiw-col__eyebrow {
  position: relative;
}
.hiw .hiw-col__eyebrow::after {
  content: '';
  position: absolute;
  left: 0; bottom: -8px;
  width: 0;
  height: 2px;
  background: var(--rust);
  transition: width 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hiw[data-step="1"] .hiw-col[data-col="1"] .hiw-col__eyebrow::after,
.hiw[data-step="2"] .hiw-col[data-col="2"] .hiw-col__eyebrow::after,
.hiw[data-step="3"] .hiw-col[data-col="3"] .hiw-col__eyebrow::after,
.hiw[data-step="all"] .hiw-col .hiw-col__eyebrow::after { width: 28px; }
/* When a step is past, keep that column "revealed" but not as bright as active */
.hiw[data-step="2"] .hiw-col[data-col="1"],
.hiw[data-step="3"] .hiw-col[data-col="1"],
.hiw[data-step="3"] .hiw-col[data-col="2"] { opacity: 0.85; }
.hiw[data-step="all"] .hiw-col { opacity: 1; transform: none; }
.hiw .hiw-divider {
  width: 1px;
  background: var(--fog-30);
  margin: var(--s-2) 0;
}

.hiw .hiw-col__head { margin-bottom: var(--s-2); }
.hiw .hiw-col__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--eyebrow-size);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--main-blue);
  margin: 0 0 var(--s-3) 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.hiw .hiw-col__eyebrow em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--rust);
  line-height: 1;
}
.hiw .hiw-col__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.15;
  color: var(--main-blue);
  margin: 0 0 6px 0;
  letter-spacing: -0.005em;
}
.hiw .hiw-col__sub {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fog-180);
  margin: 0;
}

/* ----- Column 1: sector list with bars ----- */
.hiw .hiw-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-sans);
  color: var(--main-blue);
}
.hiw .hiw-row {
  display: grid;
  grid-template-columns: 16px 1fr 80px 32px;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--fog-20);
}
.hiw .hiw-row:last-child { border-bottom: 0; }
.hiw .hiw-row svg {
  color: var(--rust);
  flex-shrink: 0;
}
.hiw .hiw-row__name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hiw .hiw-row__bar {
  height: 7px;
  background: rgba(14,39,72,0.06);
  border-radius: 1.5px;
  position: relative;
  overflow: hidden;
}
.hiw .hiw-row__bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--bar, 0%);
  background: linear-gradient(90deg, #12365D 0%, #0B1F38 100%);
  border-radius: 1.5px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hiw .hiw-row__pct {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.hiw .hiw-total {
  display: grid;
  grid-template-columns: 1fr 36px;
  gap: 8px;
  padding: 8px 0 4px 0;
  margin-top: 2px;
  border-top: 1px solid var(--fog-50);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  color: var(--main-blue);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.hiw .hiw-total span:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.hiw .hiw-caption {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 12px;
  color: var(--fog-150);
  margin: var(--s-2) 0 0 0;
}

/* ----- Column 2: lens stack ----- */
.hiw .hiw-lens-stack {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.hiw .hiw-lens {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--fog-30);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hiw .hiw-lens:first-child { border-top: 0; padding-top: 0; }
.hiw .hiw-lens__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  color: var(--rust);
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  padding-top: 2px;
}
.hiw .hiw-lens__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.2;
  color: var(--main-blue);
  margin: 0 0 4px 0;
  letter-spacing: -0.005em;
}
.hiw .hiw-lens__body {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fog-180);
  margin: 0;
}

/* ----- Column 3: OW / MW / UW buckets ----- */
.hiw .hiw-buckets {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.hiw .hiw-bucket {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--s-3);
  row-gap: 5px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--fog-30);
  border-radius: 4px;
  background: var(--fog-00);
}
.hiw .hiw-bucket__label {
  grid-row: 1 / span 2;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3) 6px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
  border-radius: 3px;
  box-sizing: border-box;
}
.hiw .hiw-bucket--ow .hiw-bucket__label {
  background: var(--main-blue);
  color: var(--fog-00);
}
.hiw .hiw-bucket--mw .hiw-bucket__label {
  background: var(--fog-20);
  color: var(--main-blue);
}
.hiw .hiw-bucket--uw .hiw-bucket__label {
  background: var(--fog-00);
  color: var(--rust);
  border: 1.5px solid var(--rust);
}
.hiw .hiw-bucket__pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 5px;
  align-content: start;
}
/* UW bucket has long names ("Communication Services", "Consumer Discretionary")
   that don't fit comfortably in the 2-col grid. Drop to single column so the
   labels never get force-broken mid-word. Only 3 pills, so vertical stacking
   stays compact. */
.hiw .hiw-bucket--uw .hiw-bucket__pills {
  grid-template-columns: 1fr;
}
.hiw .hiw-pill {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
.hiw .hiw-pill {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  background: var(--fog-00);
  border: 1px solid var(--fog-50);
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--main-blue);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 500ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hiw .hiw-pill svg {
  color: var(--rust);
  flex-shrink: 0;
}
.hiw .hiw-bucket__caption {
  grid-column: 2 / -1;
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--fog-150);
  margin: 2px 0 0 0;
}

/* ----- Same-equity-sleeve banner ----- */
.hiw .hiw-sleeve {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin: var(--s-7) auto var(--s-3) auto;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--main-blue);
  letter-spacing: -0.005em;
  text-align: center;
}
.hiw .hiw-sleeve span {
  flex: 0 0 80px;
  border-top: 1px solid var(--fog-80);
  display: block;
}

/* ----- per-column paint-in animations (triggered by .revealed on each col) ----- */
.hiw .hiw-col.revealed .hiw-row__bar > span { transform: scaleX(1); }
.hiw .hiw-col.revealed .hiw-row:nth-child(1)  .hiw-row__bar > span { transition-delay: 40ms; }
.hiw .hiw-col.revealed .hiw-row:nth-child(2)  .hiw-row__bar > span { transition-delay: 90ms; }
.hiw .hiw-col.revealed .hiw-row:nth-child(3)  .hiw-row__bar > span { transition-delay: 140ms; }
.hiw .hiw-col.revealed .hiw-row:nth-child(4)  .hiw-row__bar > span { transition-delay: 190ms; }
.hiw .hiw-col.revealed .hiw-row:nth-child(5)  .hiw-row__bar > span { transition-delay: 240ms; }
.hiw .hiw-col.revealed .hiw-row:nth-child(6)  .hiw-row__bar > span { transition-delay: 290ms; }
.hiw .hiw-col.revealed .hiw-row:nth-child(7)  .hiw-row__bar > span { transition-delay: 340ms; }
.hiw .hiw-col.revealed .hiw-row:nth-child(8)  .hiw-row__bar > span { transition-delay: 390ms; }
.hiw .hiw-col.revealed .hiw-row:nth-child(9)  .hiw-row__bar > span { transition-delay: 440ms; }
.hiw .hiw-col.revealed .hiw-row:nth-child(10) .hiw-row__bar > span { transition-delay: 490ms; }
.hiw .hiw-col.revealed .hiw-row:nth-child(11) .hiw-row__bar > span { transition-delay: 540ms; }

.hiw .hiw-col.revealed .hiw-lens { opacity: 1; transform: translateY(0); }
.hiw .hiw-col.revealed .hiw-lens:nth-child(1) { transition-delay: 100ms; }
.hiw .hiw-col.revealed .hiw-lens:nth-child(2) { transition-delay: 280ms; }
.hiw .hiw-col.revealed .hiw-lens:nth-child(3) { transition-delay: 460ms; }

.hiw .hiw-col.revealed .hiw-pill { opacity: 1; transform: translateY(0); }
.hiw .hiw-col.revealed .hiw-bucket--ow .hiw-pill:nth-child(1) { transition-delay: 80ms; }
.hiw .hiw-col.revealed .hiw-bucket--ow .hiw-pill:nth-child(2) { transition-delay: 140ms; }
.hiw .hiw-col.revealed .hiw-bucket--ow .hiw-pill:nth-child(3) { transition-delay: 200ms; }
.hiw .hiw-col.revealed .hiw-bucket--ow .hiw-pill:nth-child(4) { transition-delay: 260ms; }
.hiw .hiw-col.revealed .hiw-bucket--mw .hiw-pill:nth-child(1) { transition-delay: 320ms; }
.hiw .hiw-col.revealed .hiw-bucket--mw .hiw-pill:nth-child(2) { transition-delay: 380ms; }
.hiw .hiw-col.revealed .hiw-bucket--mw .hiw-pill:nth-child(3) { transition-delay: 440ms; }
.hiw .hiw-col.revealed .hiw-bucket--mw .hiw-pill:nth-child(4) { transition-delay: 500ms; }
.hiw .hiw-col.revealed .hiw-bucket--uw .hiw-pill:nth-child(1) { transition-delay: 560ms; }
.hiw .hiw-col.revealed .hiw-bucket--uw .hiw-pill:nth-child(2) { transition-delay: 620ms; }
.hiw .hiw-col.revealed .hiw-bucket--uw .hiw-pill:nth-child(3) { transition-delay: 680ms; }

/* ----- Responsive: collapse to single column on narrow screens; disable pin ----- */
@media (max-width: 1000px) {
  .hiw .hiw-pin { height: auto; }
  .hiw .hiw-sticky { position: static; max-height: none; }
  .hiw .hiw-cols {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
  .hiw .hiw-divider {
    width: 100%;
    height: 1px;
    margin: 0;
  }
  .hiw .hiw-col { opacity: 1 !important; transform: none !important; }
  .hiw .hiw-col .hiw-row__bar > span,
  .hiw .hiw-col .hiw-lens,
  .hiw .hiw-col .hiw-pill { transition-delay: 0ms !important; }
  .hiw.in-view .hiw-row__bar > span { transform: scaleX(1); }
  .hiw.in-view .hiw-lens,
  .hiw.in-view .hiw-pill { opacity: 1; transform: none; }
}

/* ----- Reduced motion: kill pin, paint everything immediately ----- */
@media (prefers-reduced-motion: reduce) {
  .hiw .hiw-pin { height: auto; }
  .hiw .hiw-sticky { position: static; max-height: none; }
  .hiw .hiw-col { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hiw .hiw-row__bar > span { transform: scaleX(1) !important; transition: none !important; }
  .hiw .hiw-lens { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hiw .hiw-pill { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===== CONVICTION — ported from deck's slide_sector_conviction =====
   Native SVG/HTML; 4-panel diagnostic + fieldset-style allocation box.
   Animations triggered on scroll into view via JS adding .in-view class.
*/
.conviction {
  padding: var(--s-10) 0;
  background: var(--fog-00);
  border-bottom: 1px solid var(--border);
}
.conviction .container { max-width: var(--container-wide); }
.conviction h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--main-blue);
  margin: 0 0 var(--s-4) 0;
  max-width: 18ch;
}
.conviction h2 em { font-style: italic; color: var(--rust); font-weight: 500; }
/* Locked title — pinned with the conviction panels so the heading stays above. */
.conviction-sticky > h2 { font-size: clamp(26px, 2.8vw, 38px); margin: 0 0 var(--s-2); }
.conviction-sticky > .lede {
  font-family: var(--font-sans); font-weight: 300;
  font-size: 16px; line-height: 1.5; color: var(--fog-180);
  max-width: 72ch; margin: 0 0 var(--s-5);
}
.conviction > .container > .lede {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  color: var(--main-blue);
  max-width: 60ch;
  margin: 0 0 var(--s-8) 0;
}

/* Sticky pin — the 2x2 grid pins to viewport while user scrolls through
   the 4-step highlight progression. After the pin ends, the allocation
   strip flows naturally below and gets its own reveal.
   Apple-style: section sticks, panel highlight advances with scroll. */
.conviction-pin {
  position: relative;
  /* Total height: 4 highlight steps × 75vh each = 300vh of scroll
     while the sticky inner is pinned. Tweak to taste. */
  height: 300vh;
}
.conviction-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--nav-h) + var(--s-5));
  /* keep an explicit max-height so the sticky stays within viewport */
  max-height: calc(100vh - var(--nav-h) - var(--s-5));
  overflow: visible;
}

/* Four-panel grid */
.sc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.sc-panel {
  position: relative;
  background: var(--fog-00);
  border: 1px solid var(--fog-50);
  border-radius: 6px;
  padding: var(--s-6) var(--s-6) var(--s-5) var(--s-6);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 1.4fr;
  gap: var(--s-6);
  align-items: center;
  min-height: 240px;
  box-shadow: 0 2px 5px -3px rgba(14,39,72,0.1);
  /* Step-based highlight — default dimmed; active panel gets full opacity + rust border */
  opacity: 0.5;
  transition: opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.conviction[data-step="0"] .sc-panel { opacity: 0.8; }  /* pre-pin: all panels readable */
.conviction[data-step="1"] .sc-panel:nth-child(1),
.conviction[data-step="2"] .sc-panel:nth-child(2),
.conviction[data-step="3"] .sc-panel:nth-child(3),
.conviction[data-step="4"] .sc-panel:nth-child(4) {
  opacity: 1;
  border-color: var(--rust);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -16px rgba(177,85,43,0.28), 0 2px 5px -3px rgba(14,39,72,0.1);
}
/* "All revealed" state — once user scrolls past the 4th step */
.conviction[data-step="all"] .sc-panel {
  opacity: 1;
}
.sc-badge {
  position: absolute; top: 0; left: 0;
  width: 44px; height: 44px;
  background: var(--main-blue);
  border-radius: 6px 0 6px 0;
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--font-serif);
  font-size: 18px; font-weight: 700;
  font-style: italic;
  line-height: 1;
}
.sc-panel__left {
  padding-left: var(--s-5);
}
.sc-panel__title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  line-height: 1.2;
  margin: 0 0 var(--s-3) 0;
}
.sc-panel__body {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--main-blue);
  line-height: 1.55;
  margin: 0;
  max-width: 36ch;
}
.sc-panel__viz {
  display: flex; flex-direction: column;
  justify-content: center; align-self: stretch;
  padding: var(--s-3) 0;
}
.sc-viz__title {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--main-blue);
  line-height: 1.3;
  text-align: center;
  margin-bottom: var(--s-3);
}
.sc-viz__title small {
  display: inline-block;
  opacity: 0.6;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
}

/* Panel 01 — long-history line chart */
.sc-linechart {
  width: 100%; height: 72px;
  display: block;
}
/* Paint-in animation: stroke fires when this panel hits .revealed */
.sc-linechart .sc-line {
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  transition: stroke-dashoffset 2200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sc-panel.revealed .sc-linechart .sc-line {
  stroke-dashoffset: 0;
}
.sc-linechart-axis {
  display: flex; justify-content: space-between;
  font-family: var(--font-sans); font-size: 10px;
  color: var(--fog-180);
  margin-top: 4px; padding: 0 2px;
  letter-spacing: 0.04em;
}
.sc-linechart-legend {
  display: flex; justify-content: center; gap: var(--s-5);
  margin-top: var(--s-3);
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--fog-180);
}
.sc-linechart-legend span {
  display: inline-flex; align-items: center; gap: 5px;
}
.sc-legend-band {
  width: 11px; height: 11px;
  background: rgba(14,39,72,0.12);
}
.sc-legend-line {
  width: 16px; height: 2px;
  background: var(--main-blue);
}

/* Panel 02 — historical valuation percentile bar
   Animation story:
     1. Tick labels (0%, 25%...) fade in (existing — first 200ms).
     2. The bar wipes L→R via clip-path (1000 ms).
     3. As the wipe passes each sector-marker dot's x-position, the dot
        pops in. Dot delays are matched to the wipe progress so the bar
        "carries" each dot up out of nothing — cinematic.
     4. Two tail dots (Cheap + Expensive) wear a rust ring + soft glow
        so the eye reads them as "where we act."
     5. Zone labels (Cheap/Neutral/Expensive) fade in after the bar
        finishes painting. */

.sc-percbar-ticks {
  display: grid; grid-template-columns: repeat(5, 1fr);
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--fog-180);
  margin-bottom: 6px; line-height: 1;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 500ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sc-percbar-ticks span {
  text-align: center; position: relative; padding-bottom: 6px;
}
.sc-percbar-ticks span::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: 1px; height: 5px;
  background: var(--fog-80);
}
.sc-panel.revealed .sc-percbar-ticks { opacity: 1; transform: translateY(0); }

/* Wrapper for bar + marker dots overlay */
.sc-percbar-wrap {
  position: relative;
}

.sc-percbar {
  display: grid; grid-template-columns: 1fr 8fr 1fr;
  height: 46px;
  border-radius: 4px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
  /* Single continuous L→R wipe instead of 3 individual segment scales */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1000ms cubic-bezier(0.22, 0.61, 0.36, 1) 150ms;
}
.sc-percbar > div:nth-child(1) { background: var(--rust); }
.sc-percbar > div:nth-child(2) { background: var(--fog-30); }
.sc-percbar > div:nth-child(3) { background: var(--rust); }
.sc-panel.revealed .sc-percbar { clip-path: inset(0 0 0 0); }

/* Sector-marker dots — each dot represents one sector at its current
   valuation percentile. Most cluster in the neutral middle; the two
   in the tails (rust) carry conviction-grade signal. */
.sc-percbar-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sc-pdot {
  position: absolute;
  /* top is set inline per-dot for Y-scatter; falls back to 50% */
  top: 50%;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--main-blue);
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(14,39,72,0.25);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: opacity 350ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sc-pdot--cheap, .sc-pdot--exp {
  background: var(--rust);
  width: 12px; height: 12px;
  box-shadow:
    0 0 0 4px rgba(177,85,43,0.18),
    0 1px 3px rgba(177,85,43,0.45);
}
.sc-panel.revealed .sc-pdot {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
/* Dot delays match the bar-wipe progress at each dot's position
   (wipe is 1000ms with 150ms front-pad, so position-frac × 1000 + 250) */
.sc-panel.revealed .sc-pdot:nth-child(1) { transition-delay: 300ms; }   /* @5%  cheap */
.sc-panel.revealed .sc-pdot:nth-child(2) { transition-delay: 420ms; }   /* @17% */
.sc-panel.revealed .sc-pdot:nth-child(3) { transition-delay: 510ms; }   /* @26% */
.sc-panel.revealed .sc-pdot:nth-child(4) { transition-delay: 610ms; }   /* @36% */
.sc-panel.revealed .sc-pdot:nth-child(5) { transition-delay: 710ms; }   /* @46% */
.sc-panel.revealed .sc-pdot:nth-child(6) { transition-delay: 800ms; }   /* @55% */
.sc-panel.revealed .sc-pdot:nth-child(7) { transition-delay: 900ms; }   /* @65% */
.sc-panel.revealed .sc-pdot:nth-child(8) { transition-delay: 1030ms; }  /* @78% */
.sc-panel.revealed .sc-pdot:nth-child(9) { transition-delay: 1190ms; }  /* @94% exp */

.sc-percbar-labels {
  display: grid; grid-template-columns: 1fr 8fr 1fr;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  margin-top: 6px; line-height: 1.2;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 500ms cubic-bezier(0.22, 0.61, 0.36, 1) 1300ms,
              transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1) 1300ms;
}
.sc-percbar-labels > div { text-align: center; }
.sc-percbar-labels > div:nth-child(1) { color: var(--rust); }
.sc-percbar-labels > div:nth-child(2) { color: var(--fog-220); }
.sc-percbar-labels > div:nth-child(3) { color: var(--rust); }
.sc-percbar-labels small {
  display: block; font-weight: 500;
  font-size: 9.5px; margin-top: 2px;
  color: inherit; opacity: 0.85;
}
.sc-panel.revealed .sc-percbar-labels { opacity: 1; transform: translateY(0); }

.sc-percbar-footer {
  text-align: right;
  font-family: var(--font-sans);
  font-size: 10px; font-style: italic;
  color: var(--fog-180);
  margin-top: 8px;
  opacity: 0;
  transition: opacity 500ms cubic-bezier(0.22, 0.61, 0.36, 1) 1500ms;
}
.sc-panel.revealed .sc-percbar-footer { opacity: 1; }

/* Panel 03 — 5 sparklines */
.sc-sparks {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.sc-spark-col {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.sc-spark-label {
  font-family: var(--font-sans);
  font-size: 9.5px; font-weight: 700;
  color: var(--main-blue);
  text-transform: uppercase; letter-spacing: 0.04em;
  text-align: center; line-height: 1.2;
  min-height: 24px;
}
.sc-spark { width: 100%; height: 28px; display: block; }
.sc-spark .sc-spark-line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1100ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sc-panel.revealed .sc-spark-col:nth-child(1) .sc-spark-line { transition-delay: 100ms; stroke-dashoffset: 0; }
.sc-panel.revealed .sc-spark-col:nth-child(2) .sc-spark-line { transition-delay: 260ms; stroke-dashoffset: 0; }
.sc-panel.revealed .sc-spark-col:nth-child(3) .sc-spark-line { transition-delay: 420ms; stroke-dashoffset: 0; }
.sc-panel.revealed .sc-spark-col:nth-child(4) .sc-spark-line { transition-delay: 580ms; stroke-dashoffset: 0; }
.sc-panel.revealed .sc-spark-col:nth-child(5) .sc-spark-line { transition-delay: 740ms; stroke-dashoffset: 0; }

.sc-spark-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(0.22, 1.61, 0.5, 1);
}
.sc-panel.revealed .sc-spark-col:nth-child(1) .sc-spark-dot { transition-delay: 800ms; opacity: 1; transform: scale(1); }
.sc-panel.revealed .sc-spark-col:nth-child(2) .sc-spark-dot { transition-delay: 960ms; opacity: 1; transform: scale(1); }
.sc-panel.revealed .sc-spark-col:nth-child(3) .sc-spark-dot { transition-delay: 1120ms; opacity: 1; transform: scale(1); }
.sc-panel.revealed .sc-spark-col:nth-child(4) .sc-spark-dot { transition-delay: 1280ms; opacity: 1; transform: scale(1); }
.sc-panel.revealed .sc-spark-col:nth-child(5) .sc-spark-dot { transition-delay: 1440ms; opacity: 1; transform: scale(1); }
.sc-spark-dot--pos { background: var(--main-blue); color: #fff; }
.sc-spark-dot--neu { background: var(--fog-80); }
.sc-spark-dot--neg { background: var(--rust); }
.sc-spark-dot svg { width: 10px; height: 10px; }
.sc-spark-legend {
  display: flex; justify-content: center; gap: var(--s-4);
  margin-top: var(--s-4);
  font-family: var(--font-sans);
  font-size: 10.5px; color: var(--fog-180);
}
.sc-spark-legend span {
  display: inline-flex; align-items: center; gap: 5px;
}
.sc-spark-legend .sc-spark-dot { width: 11px; height: 11px; opacity: 1; transform: none; }
.sc-spark-legend .sc-spark-dot svg { width: 7px; height: 7px; }

/* Panel 04 — catalyst bullets */
.sc-bullets {
  display: flex; flex-direction: column;
  gap: var(--s-3); justify-content: center;
}
.sc-bullet {
  display: grid; grid-template-columns: 6px 1fr;
  gap: 14px; align-items: center;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 400ms ease, transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sc-bullet::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--rust);
  border-radius: 50%;
}
.sc-panel.revealed .sc-bullet:nth-child(1) { transition-delay: 100ms; opacity: 1; transform: translateX(0); }
.sc-panel.revealed .sc-bullet:nth-child(2) { transition-delay: 320ms; opacity: 1; transform: translateX(0); }
.sc-panel.revealed .sc-bullet:nth-child(3) { transition-delay: 540ms; opacity: 1; transform: translateX(0); }
.sc-bullet__text {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--main-blue);
  line-height: 1.4; font-weight: 500;
}

/* Bottom — SECTOR ALLOCATION fieldset-style box */
.sc-strip {
  margin-top: var(--s-9);
  position: relative;
  border: 1px solid var(--fog-50);
  border-radius: 6px;
  padding: var(--s-8) var(--s-6) var(--s-6) var(--s-6);
  background: var(--fog-00);
}
.sc-strip__title {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--fog-00); padding: 0 var(--s-4);
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 800;
  color: var(--main-blue);
  text-transform: uppercase; letter-spacing: 0.18em;
  line-height: 1;
}
.sc-strip__footer {
  position: absolute; bottom: 0; left: 50%;
  transform: translate(-50%, 50%);
  background: var(--fog-00); padding: 0 var(--s-3);
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 11px;
  color: var(--fog-180);
  line-height: 1;
}
.sc-strip__zones {
  display: grid;
  grid-template-columns: 3fr 1px 4fr 1px 4fr;
  gap: var(--s-5); align-items: start;
}
.sc-strip__divider {
  background: var(--fog-50);
  width: 1px;
  align-self: stretch;
  margin: 4px 0;
}
.sc-zone {
  display: flex; flex-direction: column;
  align-items: center; gap: var(--s-2);
}
.sc-zone__label {
  font-family: var(--font-serif); font-style: italic;
  font-size: 16px; line-height: 1;
}
.sc-zone__rule {
  width: 32px; height: 2px;
}
.sc-zone--uw .sc-zone__label { color: var(--rust); }
.sc-zone--uw .sc-zone__rule  { background: var(--rust); }
.sc-zone--mw .sc-zone__label { color: var(--fog-180); }
.sc-zone--mw .sc-zone__rule  { background: var(--fog-80); }
.sc-zone--ow .sc-zone__label { color: var(--main-blue); }
.sc-zone--ow .sc-zone__rule  { background: var(--main-blue); }
/* All three zones share the same 2-column grid so the strip reads as
   one balanced row of equal-height tiles. UW has 3 pills (row 1: 2,
   row 2: 1 wide), MW has 4 (2×2), OW has 4 (2×2). Long OW names like
   "Communication Services" wrap at word boundaries inside their cell. */
.sc-zone__pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: var(--s-3);
  width: 100%;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}
/* UW's third pill spans the full row so the bottom edge stays balanced */
.sc-zone--uw .sc-alloc-pill:nth-child(3) {
  grid-column: 1 / -1;
}
.sc-alloc-pill {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: 10.5px; font-weight: 700;
  line-height: 1.2;
  background: var(--fog-00);
  min-width: 0;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms ease, transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sc-alloc-pill svg { display: block; }
.sc-alloc-pill__name {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* Reveal-in-view animations on the strip only (driven by separate observer
   so they fire when the strip enters viewport — not when section enters) */
.sc-strip.in-view .sc-zone--uw .sc-alloc-pill:nth-child(1) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
.sc-strip.in-view .sc-zone--uw .sc-alloc-pill:nth-child(2) { transition-delay: 180ms; opacity: 1; transform: translateY(0); }
.sc-strip.in-view .sc-zone--uw .sc-alloc-pill:nth-child(3) { transition-delay: 260ms; opacity: 1; transform: translateY(0); }
.sc-strip.in-view .sc-zone--mw .sc-alloc-pill:nth-child(1) { transition-delay: 340ms; opacity: 1; transform: translateY(0); }
.sc-strip.in-view .sc-zone--mw .sc-alloc-pill:nth-child(2) { transition-delay: 420ms; opacity: 1; transform: translateY(0); }
.sc-strip.in-view .sc-zone--mw .sc-alloc-pill:nth-child(3) { transition-delay: 500ms; opacity: 1; transform: translateY(0); }
.sc-strip.in-view .sc-zone--mw .sc-alloc-pill:nth-child(4) { transition-delay: 580ms; opacity: 1; transform: translateY(0); }
.sc-strip.in-view .sc-zone--ow .sc-alloc-pill:nth-child(1) { transition-delay: 660ms; opacity: 1; transform: translateY(0); }
.sc-strip.in-view .sc-zone--ow .sc-alloc-pill:nth-child(2) { transition-delay: 740ms; opacity: 1; transform: translateY(0); }
.sc-strip.in-view .sc-zone--ow .sc-alloc-pill:nth-child(3) { transition-delay: 820ms; opacity: 1; transform: translateY(0); }
.sc-strip.in-view .sc-zone--ow .sc-alloc-pill:nth-child(4) { transition-delay: 900ms; opacity: 1; transform: translateY(0); }

.sc-alloc-pill--uw {
  border: 1px solid var(--rust);
  color: var(--main-blue);
}
.sc-alloc-pill--mw {
  border: 1px solid var(--fog-50);
  color: var(--main-blue);
}
.sc-alloc-pill--ow {
  border: 1.5px solid var(--main-blue);
  background: rgba(14,39,72,0.04);
  color: var(--main-blue);
}

.sc-strip__axis {
  margin-top: var(--s-4); height: 14px; position: relative;
}
.sc-strip__axis::before {
  content: ''; position: absolute;
  left: 14px; right: 14px; top: 50%;
  height: 2px;
  background: var(--rust);
  transform: translateY(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 1050ms;
}
.sc-strip.in-view .sc-strip__axis::before { transform: translateY(-50%) scaleX(1); }
.sc-strip__axis::after {
  content: ''; position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 14px solid var(--rust);
  opacity: 0;
  transition: opacity 320ms ease 1900ms;
}
.sc-strip.in-view .sc-strip__axis::after { opacity: 1; }
.sc-strip__axis-left {
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 14px solid var(--rust);
  opacity: 0;
  transition: opacity 320ms ease 1900ms;
}
.sc-strip.in-view .sc-strip__axis-left { opacity: 1; }

/* ----- Responsive: disable the pin on narrow screens (matches .hiw / .fp).
   The JS conviction handler bypasses the scroll-scrub at the same 1000px
   breakpoint and paints every panel; here we release the sticky pin + tall
   track so the section just flows, and force panels readable as a safety. ----- */
@media (max-width: 1000px) {
  .conviction-pin { height: auto; }
  .conviction-sticky { position: static; max-height: none; }
  .conviction .sc-panel { opacity: 1; }
}

/* Short-but-wide viewports (e.g. a 13" laptop in a windowed browser): a pinned
   scrolly scene can't fit between the nav and the bottom of the window, so the
   scroll-lock reads as cramped/confusing. Release the pin for the shared
   sections (hiw / fp / conviction) and let them flow; the JS (__pinFb) plays
   each reveal once on scroll-into-view instead — motion without the lock. The
   width-based unpins above still cover narrow/mobile; this is keyed on HEIGHT. */
@media (max-height: 860px) {
  .hiw .hiw-pin { height: auto; }
  .hiw .hiw-sticky { position: static; max-height: none; }
  .conviction-pin { height: auto; }
  .conviction-sticky { position: static; max-height: none; }
  /* NOTE: .fp .fp-pin is unpinned in its OWN block below — the base
     `.fp .fp-pin { height: 200vh }` rule appears later in this file than here,
     so an override placed here would lose on source order. */
}

/* Reduced motion: skip all the paint-ins and pin highlights. */
@media (prefers-reduced-motion: reduce) {
  .sc-panel,
  .sc-linechart .sc-line,
  .sc-percbar,
  .sc-percbar-ticks,
  .sc-percbar-labels,
  .sc-percbar-footer,
  .sc-pdot,
  .sc-spark .sc-spark-line,
  .sc-spark-dot,
  .sc-bullet,
  .sc-alloc-pill,
  .sc-strip__axis::before,
  .sc-strip__axis::after,
  .sc-strip__axis-left {
    transition: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
    clip-path: inset(0 0 0 0) !important;
  }
  .sc-panel { transform: none !important; }
  /* Also skip the pin: just let content flow naturally */
  .conviction-pin { height: auto; }
  .conviction-sticky { position: static; max-height: none; }
}

/* ===== WHERE IT FITS — ported from deck slide_use_case_portfolio_fit =====
   Single SVG with two pies (Client Portfolio → Growth Bucket), rust
   connector lines, Growth-Bucket panel framing, plus right-side
   advisor / pairings cards. Apple-style sticky pin animates the story
   across three steps.
   Scoped under `.fp` so it doesn't collide with anything legacy. */
.fits {
  padding: var(--s-10) 0;
  background: var(--fog-10);
  border-bottom: 1px solid var(--border);
}
.fits .container { max-width: var(--container-wide); }
.fits h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--main-blue);
  margin: 0 0 12px 0;
  max-width: 22ch;
}
.fits h2 em { font-style: italic; color: var(--rust); font-weight: 500; }

.fp .fp-header {
  margin-bottom: var(--s-4);
}
.fp .fp-lede {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fog-180);
  max-width: 70ch;
  margin: 0;
}

/* ----- Apple-style sticky pin ----- */
.fp .fp-pin {
  position: relative;
  height: 200vh;
}
.fp .fp-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--nav-h) + var(--s-3));
}

.fp .fp-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-6);
  align-items: start;
}

/* ----- Left: pie SVG container ----- */
.fp .fp-viz {
  background: var(--fog-00);
  padding: var(--s-6) var(--s-5);
  border-radius: 4px;
  border: 1px solid var(--fog-30);
}
.fp .fp-viz-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 var(--s-3) 0;
}
.fp .fp-alloc {
  width: 100%;
  max-width: 920px;
  height: auto;
  display: block;
}
.fp .fp-alloc svg, .fp .fp-alloc text {
  font-family: var(--font-sans);
}
.fp .fp-caption {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 12.5px;
  color: var(--fog-150);
  margin: var(--s-3) 0 0 0;
  text-align: right;
}

/* ----- SVG element initial states (drawn-in by JS step toggling) ----- */
.fp .fp-slice {
  opacity: 0;
  transform: scale(0.78);
  transform-origin: center center;
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fp .fp-client-pie { transform-origin: 260px 180px; }
.fp .fp-bucket-pie { transform-origin: 736px 197px; }
.fp .fp-client-pie .fp-slice { transform-origin: 260px 180px; }
.fp .fp-bucket-pie .fp-slice { transform-origin: 736px 197px; }

.fp .fp-growth-trace {
  /* Path declares pathLength="100" so dash math is geometry-agnostic — works
     for the 180° trace on sector/international (~412px) and the 252° trace
     on thematic (~576px) without arc-specific tuning. */
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  /* Drawn top → bottom as a transitional flourish into the bucket reveal.
     Triggered at data-step="2", not on first .in-view, so it precedes the
     connector + bucket animation rather than racing with the client pie. */
  transition: stroke-dashoffset 750ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.fp .fp-client-labels text,
.fp .fp-bucket-labels text,
.fp .fp-bucket-head {
  opacity: 0;
  transition: opacity 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fp .fp-connectors line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fp .fp-connect-dot {
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.22, 0.61, 0.36, 1) 600ms;
}
.fp .fp-bucket-panel {
  opacity: 0;
  transform: scale(0.96);
  transform-origin: 730px 188px;
  transition: opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ----- Initial paint-in (fires once on section entry, not driven by pin) -----
   Decouples the left-pie reveal from the data-step machinery so the section
   doesn't sit blank while the pin is still in step "0". */
.fp.in-view .fp-client-pie .fp-slice { opacity: 1; transform: scale(1); }
.fp.in-view .fp-client-pie .fp-slice[data-slice="0"] { transition-delay: 80ms; }
.fp.in-view .fp-client-pie .fp-slice[data-slice="1"] { transition-delay: 240ms; }
.fp.in-view .fp-client-pie .fp-slice[data-slice="2"] { transition-delay: 400ms; }
.fp.in-view .fp-client-labels text { opacity: 1; transition-delay: 600ms; }
/* Note: growth-trace is intentionally NOT triggered here — it animates
   at step 2 as the lead-in to the bucket reveal. See below. */

/* ----- Step 2 cascade: trace → connectors → bucket panel → right pie → labels -----
   Growth-trace draws first (0–750 ms) as a visual lead-in: the eye is pulled
   from the Growth slice's right edge down toward the bucket panel. Everything
   else's transition-delay is offset by ~550 ms so the trace finishes before
   the bucket animation begins. */

/* Trace draws first (no delay) */
.fp[data-step="2"] .fp-growth-trace,
.fp[data-step="3"] .fp-growth-trace,
.fp[data-step="all"] .fp-growth-trace { stroke-dashoffset: 0; }

/* Connectors start once the trace is most of the way through */
.fp[data-step="2"] .fp-connectors line,
.fp[data-step="3"] .fp-connectors line,
.fp[data-step="all"] .fp-connectors line { stroke-dashoffset: 0; transition-delay: 550ms; }
.fp[data-step="2"] .fp-connect-dot,
.fp[data-step="3"] .fp-connect-dot,
.fp[data-step="all"] .fp-connect-dot { opacity: 1; transition-delay: 1150ms; }

/* Bucket panel scales in after connectors land */
.fp[data-step="2"] .fp-bucket-panel,
.fp[data-step="3"] .fp-bucket-panel,
.fp[data-step="all"] .fp-bucket-panel { opacity: 1; transform: scale(1); transition-delay: 750ms; }

.fp[data-step="2"] .fp-bucket-head,
.fp[data-step="3"] .fp-bucket-head,
.fp[data-step="all"] .fp-bucket-head { opacity: 1; transition-delay: 1150ms; }

.fp[data-step="2"] .fp-bucket-pie .fp-slice,
.fp[data-step="3"] .fp-bucket-pie .fp-slice,
.fp[data-step="all"] .fp-bucket-pie .fp-slice { opacity: 1; transform: scale(1); }
.fp[data-step="2"] .fp-bucket-pie .fp-slice[data-slice="0"],
.fp[data-step="3"] .fp-bucket-pie .fp-slice[data-slice="0"],
.fp[data-step="all"] .fp-bucket-pie .fp-slice[data-slice="0"] { transition-delay: 950ms; }
.fp[data-step="2"] .fp-bucket-pie .fp-slice[data-slice="1"],
.fp[data-step="3"] .fp-bucket-pie .fp-slice[data-slice="1"],
.fp[data-step="all"] .fp-bucket-pie .fp-slice[data-slice="1"] { transition-delay: 1110ms; }
.fp[data-step="2"] .fp-bucket-pie .fp-slice[data-slice="2"],
.fp[data-step="3"] .fp-bucket-pie .fp-slice[data-slice="2"],
.fp[data-step="all"] .fp-bucket-pie .fp-slice[data-slice="2"] { transition-delay: 1270ms; }

.fp[data-step="2"] .fp-bucket-labels text,
.fp[data-step="3"] .fp-bucket-labels text,
.fp[data-step="all"] .fp-bucket-labels text { opacity: 1; transition-delay: 1350ms; }

/* ----- Right-side cards ----- */
.fp .fp-side {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.fp .fp-card {
  padding: var(--s-5) var(--s-5);
  border: 1px solid var(--fog-30);
  border-radius: 4px;
  background: var(--fog-00);
  position: relative;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fp .fp-card::before {
  content: '';
  position: absolute;
  top: 0; left: var(--s-5); right: var(--s-5);
  height: 2px;
  background: var(--rust);
}
.fp .fp-card__eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.15;
  color: var(--main-blue);
  margin: 0 0 var(--s-3) 0;
}
.fp .fp-card__eyebrow em { font-style: italic; color: var(--rust); }
.fp .fp-card__list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.fp .fp-card__list li {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--main-blue);
  padding-left: 20px;
  position: relative;
}
.fp .fp-card__list li::before {
  content: '→';
  position: absolute;
  left: 0; top: 0;
  color: var(--rust);
  font-weight: 700;
}
.fp .fp-card a {
  color: var(--main-blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(177, 85, 43, 0.45);
  transition: border-color 200ms ease, color 200ms ease;
}
.fp .fp-card a:hover {
  color: var(--rust);
  border-bottom-color: var(--rust);
}

/* ----- Step 3: right cards reveal ----- */
.fp[data-step="3"] .fp-card,
.fp[data-step="all"] .fp-card { opacity: 1; transform: translateY(0); }
.fp[data-step="3"] .fp-card[data-card="1"],
.fp[data-step="all"] .fp-card[data-card="1"] { transition-delay: 100ms; }
.fp[data-step="3"] .fp-card[data-card="2"],
.fp[data-step="all"] .fp-card[data-card="2"] { transition-delay: 360ms; }

/* ----- Responsive: collapse + disable pin ----- */
@media (max-width: 1100px) {
  .fp .fp-pin { height: auto; }
  .fp .fp-sticky { position: static; }
  .fp .fp-grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .fp .fp-slice,
  .fp .fp-client-labels text,
  .fp .fp-bucket-labels text,
  .fp .fp-bucket-head,
  .fp .fp-bucket-panel,
  .fp .fp-connect-dot,
  .fp .fp-card { opacity: 1 !important; transform: none !important; }
  .fp .fp-connectors line,
  .fp .fp-growth-trace { stroke-dashoffset: 0 !important; }
}

/* Short-but-wide viewports (e.g. a 13" laptop in a windowed browser): release
   the fp pin so it flows; JS plays the reveal on scroll-into-view. Placed AFTER
   the base `.fp .fp-pin { height: 200vh }` rule so it wins on source order. */
@media (max-height: 860px) {
  .fp .fp-pin { height: auto; }
  .fp .fp-sticky { position: static; }
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  .fp .fp-pin { height: auto; }
  .fp .fp-sticky { position: static; }
  .fp .fp-slice,
  .fp .fp-client-labels text,
  .fp .fp-bucket-labels text,
  .fp .fp-bucket-head,
  .fp .fp-bucket-panel,
  .fp .fp-connect-dot,
  .fp .fp-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .fp .fp-connectors line,
  .fp .fp-growth-trace {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

/* ===== TRACK RECORD callout (descriptive, no numbers) ===== */
.track-record {
  padding: var(--s-6) 0;
  background: var(--fog-10);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.track-record .container { max-width: var(--container-narrow); }
/* (Earlier inception/since markup removed — section is now a single
   gated-link CTA. Styles live on .gated-link below.) */
.track-record .gated-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--main-blue);
}
.track-record .gated-link::after {
  content: '→';
  color: var(--rust);
  font-size: 16px;
  transition: transform var(--dur-fast) var(--ease);
}
.track-record .gated-link:hover { color: var(--rust); }
.track-record .gated-link:hover::after { transform: translateX(4px); }

/* ===== RELATED STRATEGIES ===== */
.related {
  padding: var(--s-10) 0;
  background: var(--fog-00);
  border-bottom: 1px solid var(--border);
}
.related .container { max-width: var(--container-wide); }
.related h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.15;
  color: var(--main-blue);
  margin: 0 0 var(--s-6) 0;
  letter-spacing: -0.01em;
}
.related h2 em { font-style: italic; color: var(--rust); font-weight: 500; }
.related .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}

/* ===== PAGE CTA — strategy-specific final call ===== */
.page-cta {
  background: var(--main-blue);
  color: var(--fog-00);
  padding: var(--s-10) 0;
  text-align: center;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.page-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 2px;
  background: var(--rust);
}
.page-cta .container { max-width: var(--container-narrow); }
.page-cta h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.1;
  color: var(--fog-00);
  margin: 0 0 var(--s-4) 0;
  letter-spacing: -0.015em;
}
.page-cta h2 em { font-style: italic; color: var(--rust-light); }
.page-cta p {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 300;
  color: var(--fog-50);
  margin: 0 auto var(--s-6);
  max-width: 50ch;
}

@media (max-width: 1024px) {
  .how-grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .how-arrow { transform: rotate(90deg); padding: var(--s-2) 0; }
  .related .grid { grid-template-columns: repeat(2, 1fr); }
  .page-hero .container { grid-template-columns: 1fr; }
  .page-hero .container > * { min-width: 0; }   /* let the column shrink below the h1's intrinsic width */
  .page-hero h1 { overflow-wrap: break-word; }
  .page-hero .meta { border-left: 0; border-top: 1px solid var(--border); padding: var(--s-6) 0 0; }
  .thesis .grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .thesis .quote { position: static; }
  .sc-grid { grid-template-columns: 1fr; }
  .sc-panel { grid-template-columns: 1fr; gap: var(--s-5); min-height: 0; }
  .sc-strip__zones { grid-template-columns: 1fr; gap: var(--s-6); }
  .sc-strip__divider { display: none; }
  .fits-grid { grid-template-columns: 1fr; }
  .portfolio-pair { grid-template-columns: 1fr; gap: var(--s-5); }
  .pie-arrow { transform: rotate(90deg); }
}

/* ======================================================
   SKIP LINK (a11y)
   Visually hidden by default; appears on keyboard focus.
   Uses the clip-path pattern so it never paints accidentally.
   ====================================================== */
.skip-link {
  position: absolute;
  top: 0; left: 0;
  background: var(--main-blue);
  color: var(--fog-00);
  padding: var(--s-3) var(--s-4);
  z-index: 100;
  font-size: 14px;
  width: 1px; height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
.skip-link:focus {
  width: auto; height: auto;
  clip-path: none;
  overflow: visible;
}

/* ======================================================
   RESPONSIVE — tablet & mobile
   ====================================================== */
@media (max-width: 960px) {
  .firm-facts .stats { gap: var(--s-6); }
  .site-footer .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .hero { padding-top: calc(var(--nav-h) + var(--s-9)); padding-bottom: var(--s-9); }
  .hero .actions { flex-direction: column; align-items: stretch; }
  .hero .actions .btn { justify-content: center; }
  .firm-facts .stats { flex-direction: column; align-items: center; gap: var(--s-7); }
  .firm-facts .stat { padding: 0; align-items: center; text-align: center; }
  .firm-facts .stat + .stat::before { display: none; }
  .site-footer .grid { grid-template-columns: 1fr; }
  /* page-hero scales down on phones so the big serif h1 doesn't overflow */
  .page-hero { padding: calc(var(--nav-h) + var(--s-7)) 0 var(--s-7); }
  .page-hero h1 { font-size: clamp(34px, 9vw, 52px); }
  .page-hero .lede {
    max-width: calc(100vw - (var(--s-6) * 2));
    font-size: 17px;
  }
  .page-hero .actions { flex-direction: column; align-items: stretch; }
  .page-hero .actions,
  .page-hero .actions .btn { max-width: calc(100vw - (var(--s-6) * 2)); }
  .page-hero .actions .btn { justify-content: center; white-space: normal; }
  .related .grid { grid-template-columns: 1fr; }
}

/* ======================================================
   AUDIENCE GATE — root splash that routes to /advisor or /pci.
   Branded navy splash; two choice cards; remembered + deep-link
   bypass handled in the page's inline script.
   ====================================================== */
.gate {
  min-height: 100vh;
  min-height: 100svh; /* mobile: fit the small viewport so the cards never sit under the URL bar / no resize jump */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--fog-00);
  color: var(--fg-1);
  padding: var(--s-9) var(--s-5);
  position: relative;
  overflow: hidden;
}
/* Soft editorial backdrop — barely-there fog wash + hairline accent. */
.gate::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--fog-10) 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 120%, var(--fog-10) 0%, transparent 55%);
  pointer-events: none;
}
.gate > * { position: relative; z-index: 1; }
.gate .gate-logo {
  width: clamp(220px, 18vw, 272px);
  height: auto;
  margin-bottom: var(--s-7);
  animation: gate-rise var(--dur-slow) var(--ease-out-expo) both;
}
.gate .gate-tag {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fog-180);
  margin: 0 0 var(--s-7);
  animation: gate-rise var(--dur-slow) var(--ease-out-expo) 60ms both;
}
.gate .gate-tag .dot { color: var(--rust); margin: 0 0.5em; }
.gate .gate-prompt {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--main-blue);
  margin: 0 auto var(--s-8);
  max-width: 16ch;
  animation: gate-rise var(--dur-slow) var(--ease-out-expo) 120ms both;
}
.gate .gate-prompt em { font-style: italic; font-weight: 400; color: var(--rust); }
.gate .gate-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  gap: var(--s-5);
  width: 100%;
  max-width: 712px;
}
.gate .choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 6px;
  padding: var(--s-6) var(--s-6) var(--s-5);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--fog-00);
  color: var(--fg-1);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(14, 39, 72, 0.04), 0 18px 40px -24px rgba(14, 39, 72, 0.22);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
  animation: gate-rise var(--dur-slow) var(--ease-out-expo) both;
}
.gate .choice:nth-child(1) { animation-delay: 200ms; }
.gate .choice:nth-child(2) { animation-delay: 280ms; }
.gate .choice:hover {
  border-color: var(--rust);
  box-shadow: 0 2px 4px rgba(14, 39, 72, 0.05), 0 26px 54px -22px rgba(14, 39, 72, 0.30);
  transform: translateY(-3px);
}
/* TITLE — the actual destination page. The dominant element of the card. */
.gate .choice .ck {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(23px, 2.3vw, 29px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--main-blue);
  min-height: 2.2em; /* reserve two lines so subtitles align when one title wraps */
}
/* Supporting tagline — secondary. */
.gate .choice .ct {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--rust);
}
/* Description — recessive. */
.gate .choice .cd {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fog-180);
  margin-top: 2px;
}
.gate .choice .carrow {
  color: var(--rust);
  margin-top: auto; /* pin to card bottom so arrows align across cards */
  padding-top: var(--s-3);
  font-size: 18px;
  transition: transform .22s var(--ease);
}
.gate .choice:hover .carrow { transform: translateX(5px); }
.gate .gate-foot {
  /* In flow below the cards (the mobile treatment, now at every size) — the
     old absolute bottom-pin overlapped the choice cards whenever the content
     was tall relative to the viewport. As a flex item of .gate (align-items:
     center) it would shrink-wrap, so force full width; also reset the global
     `p { max-width: 62ch; margin-bottom }` rule so the block spans and
     centers cleanly. */
  position: static;
  width: 100%;
  max-width: none;
  margin: var(--s-7) 0 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--fog-180);
}
.gate .gate-foot a { color: var(--fog-180); text-decoration: underline; text-underline-offset: 2px; }
.gate .gate-foot a:hover { color: var(--rust); }
@keyframes gate-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ======================================================
   BRAND INTRO LOADER — one-shot "M" mark over home pages.
   Markup injected by assets/js/intro-loader.js into #mm-intro.
   The head gate adds html.mm-intro-on before first paint so the
   navy overlay covers before any home content shows. Hero is also
   --main-blue, so the fade-out reveal is seamless.
   ====================================================== */
html.mm-intro-on, html.mm-intro-on body { overflow: hidden; }
#mm-intro { display: none; }
html.mm-intro-on #mm-intro {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  background: var(--fog-00);
  opacity: 1;
  transition: opacity 600ms var(--ease);
}
html.mm-intro-on #mm-intro.is-done { opacity: 0; pointer-events: none; }
#mm-intro svg { width: clamp(96px, 12vw, 128px); height: auto; }

/* ======================================================
   STRATEGY HERO RESOURCES RAIL — injected by
   strategy-resources.js into .page-hero .meta. The
   advisor "what do I need right now" quick-access list.
   ====================================================== */
.page-hero .meta .hero-rsx {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}
.hero-rsx__label {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 var(--s-3);
}
.hero-rsx__list { list-style: none; margin: 0; padding: 0; }
.hero-rsx__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px 12px; margin: 0 -12px;
  border-radius: 8px;
  text-decoration: none; color: var(--main-blue);
  transition: background .18s var(--ease);
}
.hero-rsx__item + .hero-rsx__item { margin-top: 0; }
.hero-rsx__item:hover { background: var(--fog-10); }
.hero-rsx__ico {
  flex: 0 0 20px; width: 20px; height: 20px;
  display: grid; place-items: center; color: var(--fog-180);
  transition: color .18s var(--ease);
}
.hero-rsx__ico svg { width: 18px; height: 18px; }
.hero-rsx__item:hover .hero-rsx__ico { color: var(--rust); }
.hero-rsx__txt {
  flex: 1 1 auto;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  line-height: 1.2; color: var(--main-blue);
}
.hero-rsx__sub {
  display: block;
  font-size: 11.5px; font-weight: 400; color: var(--fog-180);
  margin-top: 1px;
}
.hero-rsx__arrow {
  color: var(--fog-80); font-size: 15px;
  transition: transform .18s var(--ease), color .18s var(--ease);
}
.hero-rsx__item:hover .hero-rsx__arrow { color: var(--rust); transform: translateX(3px); }
.hero-rsx__note {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-size: 11.5px; color: var(--fog-180);
  margin: var(--s-4) 0 0;
}
.hero-rsx__note svg { flex: 0 0 12px; width: 12px; height: 12px; }
/* Small rust lock on gated (Advisor Use Only) rail items — e.g. Strategy Deck */
.hero-rsx__locktag {
  display: inline-block; vertical-align: -1px; margin-left: 6px;
  width: 12px; height: 12px; color: var(--rust);
}
.hero-rsx__locktag svg { width: 12px; height: 12px; display: block; }

/* Audience switcher in the nav (advisor / pci homepages) */
.site-nav .aud-switch {
  font-family: var(--font-sans);
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-right: var(--s-5);
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.75);
  transition: color .2s ease;
}
.site-nav .aud-switch .arrow { color: var(--rust); }
.site-nav .aud-switch:hover { color: #fff; }
.site-nav.scrolled .aud-switch { color: var(--fog-180); }

/* ======================================================
   FIDUCIARY BAND — PCI positioning statement.
   ====================================================== */
.fiduciary-band {
  background: var(--fog-10);
  border-bottom: 1px solid var(--border);
  text-align: center;
  padding: var(--s-9) 0;
}
.fiduciary-band p {
  font-family: var(--font-sans);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.3;
  color: var(--main-blue);
  max-width: 26ch;
  margin: 0 auto;
}
.fiduciary-band em { color: var(--rust); font-style: italic; }

/* ======================================================
   SERVICES — PCI four-service grid (Investment / Cash /
   Planning / Tax). Calm cards, pill tags, no decorative icons.
   ====================================================== */
.services .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6);
}
.service-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--s-7);
  background: var(--fog-00);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.service-card .num {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
}
.service-card h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--main-blue);
  margin: 0;
}
.service-card p {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fog-180);
  margin: 0;
  max-width: none;
}
.service-card .tags {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-top: var(--s-4);
}
.service-card .tags span {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--fog-180);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px 10px;
}
@media (max-width: 760px) {
  .services .grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Phone: the two cards stack and the fund disclosure is long, so the content
     is taller than the viewport. Flow from the top (not vertically centred, which
     clips the logo) and pull the footer OUT of absolute positioning so it sits
     below the cards instead of overlapping the second one. */
  .gate {
    justify-content: flex-start;
    padding-top: var(--s-7);
    padding-bottom: var(--s-6);
  }
  .gate .gate-choices { grid-template-columns: 1fr; max-width: 360px; }
  /* Tighten the desktop vertical rhythm so the whole gate fits a phone screen. */
  .gate .gate-logo { margin-bottom: var(--s-5); }
  .gate .gate-tag { margin-bottom: var(--s-4); }
  .gate .gate-prompt { margin-bottom: var(--s-6); }
  /* Full-width stacked cards don't need the 2-line title reserve (that gap is
     what makes titles look like they float above their subtitles on mobile). */
  .gate .choice .ck { min-height: 0; }
  /* (.gate-foot needs no mobile override — the base rule is static/full-width
     at every size now.) */
}

/* ======================================================
   TEAM PAGE — tabbed roster, headshot grid, person modal.
   One page, audience-aware ordering via the page's inline JS.
   ====================================================== */
.team-intro { padding: calc(var(--nav-h) + var(--s-9)) 0 var(--s-7); }
.team-intro .container { max-width: var(--container-wide); }
.team-intro h1 {
  font-family: var(--font-serif);
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: var(--s-2) 0 var(--s-5);
}
.team-intro h1 em { font-style: italic; color: var(--rust); }
.team-intro .lede { max-width: 56ch; font-size: 18px; line-height: 1.6; color: var(--fog-180); }

.team-section { padding-bottom: var(--s-10); }
.team-section .container { max-width: var(--container-wide); }

.team-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1, 4px) var(--s-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-8);
}
.team-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: var(--s-3) 2px var(--s-4);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--fog-180);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.team-tab:hover { color: var(--main-blue); }
.team-tab[aria-selected="true"] { color: var(--main-blue); border-bottom-color: var(--rust); }
.team-tab .count { color: var(--fog-180); font-weight: 400; margin-left: 0.4em; font-size: 12px; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-7) var(--s-5);
}
.person-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
/* The modal trigger (photo + name + title). Carries the old button reset that
   used to live on .person-card, now that the card is a plain container holding
   real phone/schedule links alongside it. */
.person-card__trigger {
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  width: 100%;
  font: inherit;
  color: inherit;
}
/* Direct line + scheduling link, rendered on the card for sales reps. */
.person-card .pphone {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--main-blue);
  text-decoration: none;
  line-height: 1.3;
}
.person-card .pphone:hover { color: var(--rust); }
.person-card .pschedule {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rust);
  text-decoration: none;
}
.person-card .pschedule:hover { text-decoration: underline; }
.person-card .photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  background: var(--fog-20);
  transition: box-shadow .3s ease, transform .3s ease;
}
.person-card:hover .photo {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(14, 39, 72, 0.16);
}
.person-card .photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .5s var(--ease, ease);
}
.person-card:hover .photo img { transform: scale(1.05); }
.person-card .photo .mono {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: clamp(28px, 4vw, 40px);
  color: var(--fog-120); background: var(--fog-20);
}
.person-card .pname {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--main-blue);
  line-height: 1.15;
}
.person-card .ptitle {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fog-180);
  line-height: 1.45;
}
/* Sub-territory chip under name + title (used inside the East region card,
   where each person carries their own slice of the geography). */
.person-card .psubregion {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
  background: rgba(177, 85, 43, 0.08);
  border-radius: var(--radius-pill);
  align-self: flex-start;
}

/* Person detail modal — full-colour photo in a header, bio below */
.modal.person {
  max-width: 600px;
  padding: 0;
  overflow: hidden;
}
.modal.person .pm-body { padding: var(--s-7); overflow-y: auto; max-height: 86vh; }
.modal.person .pm-head {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}
.modal.person .pm-photo {
  position: relative;
  flex: 0 0 auto;
  width: 152px; height: 152px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--fog-20);
}
.modal.person .pm-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.modal.person .pm-photo .mono {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 44px; color: var(--fog-120);
}
.modal.person .pm-eyebrow {
  font-family: var(--font-sans); font-size: var(--eyebrow-size); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--rust);
}
.modal.person .pm-name {
  font-family: var(--font-serif); font-weight: 500; font-size: 27px;
  line-height: 1.1; color: var(--main-blue); margin: 6px 0 3px;
}
.modal.person .pm-title { font-family: var(--font-sans); font-size: 14px; color: var(--fog-180); margin: 0; }
.modal.person .pm-bio p { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.65; color: var(--fg-1); margin: 0 0 var(--s-4); max-width: none; }
.modal.person .pm-contact {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  border-top: 1px solid var(--border); padding-top: var(--s-5); margin-top: var(--s-3);
}
.modal.person .pm-contact a {
  font-family: var(--font-sans); font-size: 13.5px; color: var(--main-blue);
  display: inline-flex; align-items: center; gap: 0.4em; text-decoration: none;
}
.modal.person .pm-contact a:hover { color: var(--rust); }
.modal.person .pm-close {
  position: absolute; top: var(--s-4); right: var(--s-4); z-index: 2;
  appearance: none; background: rgba(255,255,255,0.92); border: 1px solid var(--border);
  width: 32px; height: 32px; border-radius: var(--radius-pill); cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--fog-180);
  display: flex; align-items: center; justify-content: center;
}
.modal.person .pm-close:hover { color: var(--main-blue); border-color: var(--fog-80); }
@media (max-width: 480px) {
  .modal.person .pm-head { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .modal.person .pm-photo { width: 128px; height: 128px; }
}

@media (max-width: 1024px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) { .team-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); } }

/* ======================================================
   AUDIENCE BAR — slim top utility strip showing the current
   audience as a dropdown (advisor / pci homepages + team page).
   Scoped via body.has-aud-bar so legacy sub-pages are untouched:
   the fixed nav is pushed down 36px and the rust top-mark moves
   onto the bar.
   ====================================================== */
/* Shift content + the fixed nav down together by the bar height — works on
   every page regardless of its header, so the bar can go site-wide. */
body.has-aud-bar { padding-top: 36px; }
body.has-aud-bar .site-nav { top: 36px; }
body.has-aud-bar .site-nav::before { display: none; }

/* ===== Header entrance — cascade the nav in once the brand font is ready =====
   The nav is injected client-side and its text swaps fallback -> Lato on load,
   which showed a brief "squeeze." We hold the nav links, the Talk-with-us CTA,
   and the audience-bar content hidden (body.nav-anim, set before first paint),
   then fade them in left-to-right once Lato has loaded (body.nav-ready, toggled
   from document.fonts.load in site-nav.js). The swap happens off-screen; the
   brand logo and the bar's height stay put as anchors, so nothing shifts. */
body.nav-anim .audience-bar .inner > *,
body.nav-anim .site-nav .links > li,
body.nav-anim .site-nav .right > .cta,
body.nav-anim .site-nav .right > .nav-cta { opacity: 0; }

body.nav-anim.nav-ready .audience-bar .inner > *,
body.nav-anim.nav-ready .site-nav .links > li,
body.nav-anim.nav-ready .site-nav .right > .cta,
body.nav-anim.nav-ready .site-nav .right > .nav-cta {
  opacity: 1;
  transition: opacity 0.45s var(--ease, ease);
}
/* left-to-right stagger across the bar, the nav links, then the CTA */
body.nav-ready .audience-bar .inner > * { transition-delay: 0.02s; }
body.nav-ready .site-nav .links > li:nth-child(1) { transition-delay: 0.06s; }
body.nav-ready .site-nav .links > li:nth-child(2) { transition-delay: 0.12s; }
body.nav-ready .site-nav .links > li:nth-child(3) { transition-delay: 0.18s; }
body.nav-ready .site-nav .links > li:nth-child(4) { transition-delay: 0.24s; }
body.nav-ready .site-nav .links > li:nth-child(5) { transition-delay: 0.30s; }
body.nav-ready .site-nav .links > li:nth-child(6) { transition-delay: 0.36s; }
body.nav-ready .site-nav .right > .cta,
body.nav-ready .site-nav .right > .nav-cta { transition-delay: 0.42s; }
@media (prefers-reduced-motion: reduce) {
  body.nav-anim.nav-ready .audience-bar .inner > *,
  body.nav-anim.nav-ready .site-nav .links > li,
  body.nav-anim.nav-ready .site-nav .right > .cta,
  body.nav-anim.nav-ready .site-nav .right > .nav-cta { transition: none; }
}

/* Home-hero variant — instead of the font-load reveal above, the nav rides the
   SAME CSS timeline as the hero headline/subheader. The hero lede fades in at a
   2.36s animation-delay; we start the nav cascade on that same beat, so they
   land together. Because both are CSS animations off the one document clock,
   they pause/resume in lockstep even if the tab was hidden during load — no JS
   timer to drift. body.hero-home is set in site-nav.js only on pages with the
   animated hero, and by 2.36s the brand font is loaded, so no swap shows.
   The animation's `both` fill holds opacity:0 through the delay, overriding the
   body.nav-anim rule above. */
@keyframes nav-fade-in { from { opacity: 0; } to { opacity: 1; } }
body.hero-home .audience-bar .inner > *,
body.hero-home .site-nav .links > li,
body.hero-home .site-nav .right > .cta,
body.hero-home .site-nav .right > .nav-cta {
  animation: nav-fade-in 0.5s var(--ease-out-expo, ease) both;
}
body.hero-home .audience-bar .inner > * { animation-delay: 2.36s; }
body.hero-home .site-nav .links > li:nth-child(1) { animation-delay: 2.40s; }
body.hero-home .site-nav .links > li:nth-child(2) { animation-delay: 2.46s; }
body.hero-home .site-nav .links > li:nth-child(3) { animation-delay: 2.52s; }
body.hero-home .site-nav .links > li:nth-child(4) { animation-delay: 2.58s; }
body.hero-home .site-nav .links > li:nth-child(5) { animation-delay: 2.64s; }
body.hero-home .site-nav .links > li:nth-child(6) { animation-delay: 2.70s; }
body.hero-home .site-nav .right > .cta,
body.hero-home .site-nav .right > .nav-cta { animation-delay: 2.76s; }
@media (prefers-reduced-motion: reduce) {
  body.hero-home .audience-bar .inner > *,
  body.hero-home .site-nav .links > li,
  body.hero-home .site-nav .right > .cta,
  body.hero-home .site-nav .right > .nav-cta { animation: none; opacity: 1; }
}

.audience-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 36px;
  z-index: 60;
  background: var(--main-blue-900);
  display: flex;
  align-items: center;
}
.audience-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--rust);
}
.audience-bar .inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--s-7);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
}
.audience-bar .aud-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.aud-dd { position: relative; }
.aud-dd-toggle {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  padding: 8px 0;
}
.aud-dd-toggle:hover { color: #fff; }
.aud-dd-toggle .aud-caret {
  font-size: 10px;
  color: var(--rust-light);
  transition: transform var(--dur-fast, .15s) var(--ease, ease);
}
.aud-dd.open .aud-dd-toggle .aud-caret { transform: rotate(180deg); }
.aud-dd-menu {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  min-width: 240px;
  list-style: none;
  margin: 0; padding: 6px;
  background: var(--fog-00);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 16px 44px rgba(14, 39, 72, 0.20);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 61;
}
.aud-dd.open .aud-dd-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.aud-dd-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 9px 12px;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--main-blue);
  text-decoration: none;
}
.aud-dd-menu a:hover { background: var(--fog-10); }
.aud-dd-menu a[aria-current="true"] { color: var(--fog-180); cursor: default; }
.aud-dd-menu a[aria-current="true"]::after { content: '✓'; color: var(--rust); font-size: 12px; }
@media (max-width: 600px) { .audience-bar .aud-label { display: none; } }

/* ===== Print — content pages read as documents, chrome and navy ink drop out ===== */
@media print {
  .audience-bar, .site-nav, .skip-link, #mm-cookie-notice, .etf-leave,
  .nav-cta, .btn, [data-open-contact] { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  main { max-width: none !important; }
  .page-hero, .hero { background: #fff !important; }
  .page-hero, .page-hero *, .hero, .hero * { color: #000 !important; text-shadow: none !important; }
  .site-footer { background: #fff !important; border-top: 1px solid #000; }
  .site-footer, .site-footer * { color: #000 !important; }
  a { color: #000 !important; }
}