/* ===== tokens.css ===== */
/* =========================================================
   Main Management — Design Tokens
   Lifted from the design system; paths re-rooted for new-site/
   ========================================================= */

/* @font-face lives in tokens.css (loaded immediately before this file in IpcLayout) —
   the duplicate copy that used to live here was removed 2026-07-02 (it had drifted to
   font-display: swap while tokens.css said optional; swap is now canon in tokens.css). */

:root {
  /* IPC consumes the design-system tokens via tokens.css (loaded immediately before this
     file in IpcLayout). Only IPC's *deliberate* deviations are redefined here — brand colors,
     the Fog scale, semantic aliases, fonts, spacing, radii, motion and containers all inherit
     canon, so brand-token changes propagate to IPC automatically (this is what previously let
     --radius-pill drift). */

  /* Editorial type scale — IPC runs the web-editorial heading sizes (tighter than the deck-base
     canon) plus a slightly larger lede. Intentional for the redesign. */
  --display-hero: clamp(56px, 6.5vw, 96px);  /* homepage hero h1 */
  --display-1:    clamp(56px, 5.6vw, 88px);  /* page heroes — matches the advisor .page-hero h1 scale */
  --h1-size:      clamp(40px, 4.8vw, 64px);
  --h2-size:      clamp(32px, 3.6vw, 48px);
  --h3-size:      clamp(24px, 2.2vw, 32px);
  --h4-size:      clamp(20px, 1.6vw, 24px);
  --h5-size:      18px;
  --lede-size:    clamp(20px, 1.7vw, 24px);
  --body-size:    17px;
  --small-size:   15px;
  --caption-size: 13px;
  --eyebrow-size: 13px;

  /* Elevation — IPC uses deeper, image-led editorial shadows (heavier than canon by design;
     see IPC_INTEGRATION_PLAN.md Tier C). */
  --shadow-sm: 0 1px 2px rgba(14,39,72,0.05), 0 6px 16px -10px rgba(14,39,72,0.18);
  --shadow-md: 0 10px 28px -14px rgba(14,39,72,0.28), 0 3px 8px -5px rgba(14,39,72,0.12);
  --shadow-lg: 0 30px 60px -26px rgba(14,39,72,0.50), 0 10px 24px -14px rgba(14,39,72,0.20);

  /* A11y: the design-system "tertiary text" alias (--fg-3 = fog-120) fails WCAG AA on white;
     bump to fog-180 to match the advisor side (site.css:96). Drives .member-role + small print. */
  --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. site.css :root mirrors this. */
  --container-wide: clamp(1440px, 90vw, 1728px);
  --container:      clamp(1240px, 78vw, 1488px);

  /* Layout — nav heights are IPC-chrome specific (not in canon). */
  --nav-h:          96px;
  --nav-h-scrolled: 72px;
}

/* ===== site.css ===== */
/* =========================================================
   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; }

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.22em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 var(--s-5) 0;
  display: inline-block;
}
.eyebrow.muted { color: var(--fog-180); }   /* fog-120 fails AA on white at eyebrow size */
/* Dot-eyebrow (Mastercard-inspired): a small rust dot precedes the label —
   the section-category signal. The centered variant (.eyebrow-center) keeps
   its own rust rules, so it's excluded here. */
.eyebrow:not(.eyebrow-center)::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.7em;
  border-radius: 50%;
  background: var(--rust);
  vertical-align: 0.12em;
}
.eyebrow.muted:not(.eyebrow-center)::before { background: var(--fog-180); }

/* ----- 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-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 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-accent { background: var(--rust); color: var(--fog-00); border-color: var(--rust); }
.btn-accent:hover { background: var(--rust-dark); border-color: var(--rust-dark); 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); }

/* ======================================================
   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: 36px;
  width: auto;
  transition: height var(--dur) var(--ease);
}
.site-nav.scrolled .brand img { height: 28px; }
/* 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); }
/* Current page — orange + bold across all nav states */
.site-nav .links a[aria-current="page"],
.site-nav.scrolled .links a[aria-current="page"],
body.page-light .site-nav .links a[aria-current="page"] {
  color: var(--rust);
  font-weight: 700;
}
.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: 320px;
  background: var(--fog-00);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 80px rgba(14,39,72,0.12);
  padding: var(--s-3);
  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 a {
  display: block;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--main-blue);
}
.site-nav .dropdown a .sub {
  display: block;
  font-size: 12px;
  color: var(--fg-3);
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 2px;
}
.site-nav .dropdown a:hover { background: var(--fog-10); color: var(--main-blue); }
.site-nav .dropdown a:hover .sub { color: var(--fg-2); }

/* ======================================================
   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
   ====================================================== */

/* Full-screen video landing hero (Bay Bridge). A sticky stage inside a
   taller .hero-track: the hero holds briefly as you start scrolling (so the
   revealed CTAs are usable) then releases into the page. White Main logo +
   right-aligned serif headline reveal on load; CTAs reveal on scroll-start.
   Spec: docs/superpowers/specs/2026-06-25-pci-video-landing-hero-design.md */
.hero-track { position: relative; height: 140vh; background: var(--main-blue-900); }

.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--main-blue-900);
  color: var(--fog-00);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* media layers */
.hero-media  { position: absolute; inset: 0; z-index: 0; will-change: transform; }
.hero-video  { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-scrim  { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(180deg, rgba(9,20,34,.30) 0%, rgba(9,20,34,.06) 40%, rgba(9,20,34,.46) 100%); }
/* soft blue fade anchored at the right edge — backs the right-aligned copy */
.hero-glow   { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  radial-gradient(135% 130% at 100% 50%,
    rgb(14 39 72 / .59) 0%, rgb(14 39 72 / .44) 24%, rgb(14 39 72 / .28) 42%,
    rgb(14 39 72 / .15) 58%, rgb(14 39 72 / .05) 72%, rgb(14 39 72 / 0) 85%); }

/* content stack — right-aligned, vertically centered */
.hero-inner {
  position: relative; z-index: 2;
  max-width: var(--container-wide);
  width: 100%;
  margin: 0 auto;
  padding: 0 8vw;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(34px, 5vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 14ch;
  color: var(--fog-00);
  text-shadow: 0 6px 40px rgba(14,39,72,.5), 0 2px 10px rgba(14,39,72,.4);
}
.hero h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--rust-light); }
.hero h1 .kern-fi { letter-spacing: 0.05em; }

/* headline word reveal — on load, staggered (matches the approved prototype) */
.hero-h1 .w {
  display: inline-block;
  opacity: 0; transform: translateY(40px); filter: blur(6px);
  animation: hero-word 900ms var(--ease-out-expo) both;
}
.hero-h1 .w:nth-child(1) { animation-delay: 800ms; }
.hero-h1 .w:nth-child(2) { animation-delay: 1000ms; }
.hero-h1 .w:nth-child(3) { animation-delay: 1250ms; }
@keyframes hero-word { to { opacity: 1; transform: translateY(0); filter: blur(0); } }

/* ----- 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 520ms 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 500ms var(--ease-out-expo) both;
}
.hero .lede    { animation-delay: 760ms; }
.hero .actions { animation-delay: 900ms; }
@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(16px, 1.4vw, 21px);
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  max-width: 46ch;
  margin: var(--s-6) 0 0 0;
  text-shadow: 0 2px 22px rgba(14,39,72,.6);
  opacity: 0; animation: fade-in 800ms var(--ease) 1700ms both;
}
.hero-lede em { font-style: italic; color: var(--rust-light); }

/* CTAs — hidden on load, revealed on scroll-start (JS adds .is-in) */
.hero-actions {
  display: flex;
  gap: var(--s-4);
  margin-top: var(--s-7);
  opacity: 0; transform: translateY(16px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.hero-actions.is-in { opacity: 1; transform: none; }
.hero-actions .btn { padding: 11px 20px; font-size: 12px; }
/* secondary CTA reads as solid rust on the footage */
.hero-actions .btn-outline-light {
  background: var(--rust);
  border-color: var(--rust);
  color: var(--fog-00);
}
.hero-actions .btn-outline-light:hover {
  background: var(--fog-00);
  border-color: var(--fog-00);
  color: var(--main-blue);
}

/* scroll cue — fades in last, hides once scrolling begins (JS adds .is-hidden) */
.hero-cue {
  position: absolute; left: 50%; bottom: var(--s-6); transform: translateX(-50%);
  z-index: 2; text-align: center;
  color: rgba(255,255,255,0.8);
  font: 600 11px var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0; animation: fade-in 800ms var(--ease) 2000ms both;
  transition: opacity 400ms var(--ease);
}
.hero-cue span { display: block; font-size: 18px; margin-top: 6px; animation: hero-bob 1.8s ease-in-out infinite; }
.hero-cue.is-hidden { opacity: 0 !important; }
@keyframes hero-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Reduced motion: no autoplay reveal/parallax — everything in final state. */
@media (prefers-reduced-motion: reduce) {
  .hero-h1 .w, .hero-lede, .hero-cue {
    animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .hero-actions { opacity: 1 !important; transform: none !important; }
  .hero-cue span { animation: none !important; }
}

/* ======================================================
   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 {
  position: relative;
  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);
  padding-top: var(--s-6);
}
/* small rust tick above the eyebrow — matches the hero / cta-band accent */
.firm-facts .ethos::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: var(--rust);
}
.firm-facts .ethos .dot { color: var(--fog-80); font-weight: 400; margin: 0 0.4em; }
.firm-facts .stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 920px;
  margin: 0 auto;
}
.firm-facts .stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: 0 var(--s-6);
  transition: transform var(--dur-fast) var(--ease);
}
.firm-facts .stat:hover { transform: translateY(-3px); }
.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 {
  position: relative;
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(38px, 4.6vw, 52px);
  line-height: 1;
  color: var(--main-blue);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
/* rust underline that draws in beneath each number as it counts up */
.firm-facts .num::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 28px;
  height: 2px;
  background: var(--rust);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}
.firm-facts .stat.counted .num::after { transform: translateX(-50%) scaleX(1); }
.firm-facts .cap {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fog-180);   /* fog-120 fails AA at 11px on white */
}
.firm-facts .cap i {
  display: block;
  font-style: normal;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--fog-180);
  margin-top: 5px;
}
.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;
}

/* ======================================================
   FEATURE ROW — compact text + photo split (Crawford-style).
   Reusable per home section; add .media-left to flip sides,
   .tint for the fog background.
   ====================================================== */
.feature-row {
  padding: var(--s-9) 0;
  background: var(--fog-00);
  border-bottom: 1px solid var(--border);
}
.feature-row.tint { background: var(--fog-20); }
.feature-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--s-9);
  align-items: center;
}
.feature-row.media-left .feature-media { order: -1; }
/* give the media column extra width for a larger image
   (media-left reorders media into the first track, so widen that track) */
.feature-row.media-wide .feature-grid { grid-template-columns: 52fr 48fr; }
/* eyebrow with a short rule beside it, vertically centered */
.feature-text .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
}
.feature-text .eyebrow::after {
  content: '';
  width: 48px;
  height: 1px;
  background: var(--rust);
}
/* rule on the left of the eyebrow instead of the right */
.feature-text .eyebrow.line-left::after { display: none; }
.feature-text .eyebrow.line-left::before {
  content: '';
  width: 48px;
  height: 1px;
  background: var(--rust);
}
.feature-text 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 var(--s-5);
  max-width: 16ch;
}
.feature-text h2 em { font-style: italic; color: var(--rust); font-weight: 500; }
.feature-text h2.nowrap { white-space: nowrap; }
.nowrap { white-space: nowrap; }
.feature-text p {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.62;
  color: var(--main-blue);
  max-width: 52ch;
  margin: 0 0 var(--s-6);
}
.feature-text .read-link {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--main-blue);
}
.feature-text .read-link::after { content: ' →'; color: var(--rust); }

/* animated underline link: rust underline at rest; on hover the text
   pops (lifts + recolors) and the underline re-sweeps in a new color */
.anim-link {
  position: relative;
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--main-blue);
  text-decoration: none;
  padding-bottom: 5px;
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.anim-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--rust);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 0.7s var(--ease), background var(--dur-fast) var(--ease);
}
.anim-link:hover {
  color: var(--rust);
  transform: translateY(-2px);
}
.anim-link:hover::after {
  background: var(--main-blue);
  animation: anim-underline-sweep 0.7s var(--ease);
}
@keyframes anim-underline-sweep {
  0%   { transform: scaleX(0); transform-origin: left center; }
  100% { transform: scaleX(1); transform-origin: left center; }
}
@media (prefers-reduced-motion: reduce) {
  .anim-link, .anim-link::after { transition: none; }
  .anim-link:hover { transform: none; }
  .anim-link:hover::after { animation: none; }
}
.feature-media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
}
/* show the whole image (no cropping) — keeps logos/edges intact */
.feature-media img.fit-contain {
  aspect-ratio: auto;
  object-fit: contain;
  height: auto;
}
@media (max-width: 860px) {
  .feature-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .feature-row.media-left .feature-media { order: 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 .lede {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--fog-180);
  margin: var(--s-4) 0 0;
  max-width: none;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .section-head .lede { white-space: normal; }
}
.section-head .lede-link {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: var(--main-blue);
  border-bottom: 1px solid var(--rust);
  cursor: pointer;
}
.section-head .lede-link:hover { color: var(--rust); }
.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-sans);
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  color: var(--rust);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  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(--main-blue);
  padding: var(--s-7) 0;
  text-align: center;
  border: 0;
}
.callout .container { max-width: var(--container-narrow); }
.callout p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.4;
  color: var(--fog-00);
  margin: 0 auto;
  max-width: 60ch;
  letter-spacing: -0.005em;
}
.callout p em { color: var(--rust-light); 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-serif);
  font-weight: 500;
  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;
}

/* ======================================================
   HOLD-TO — interactive four-circle diagram.
   Four nodes ring a centre panel; click a node to reveal
   its explanation in the middle. Firm Overview "Four things
   we hold to." Smaller, quieter title than .section-head.
   ====================================================== */
/* tighter top/bottom on the traits section */
.holdto-section { padding: var(--s-6) 0; border-bottom: 0; }

.holdto-head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 72px);   /* more breathing room above the diagram */
}
.holdto-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--main-blue);
  margin: 0;
}

/* two columns: the ring diagram on the left, the explanation card on the right */
.holdto-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
.holdto-diagram {
  position: relative;
  width: 100%;
  aspect-ratio: 1.15 / 1;   /* taller so the top/bottom nodes don't bleed past the edges */
}

/* solid blue arrows linking the four circles clockwise around the ring */
.holdto-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--main-blue);
  pointer-events: none;
}
.holdto-flow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
/* invisible carrier whose only job is to hold a static arrowhead */
.holdto-flow .flow-head {
  stroke: transparent;
}
/* a single brighter-blue highlight that glides continuously around the ring */
.holdto-flow .flow-pulse {
  fill: none;
  stroke: #4a7fb5;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0.07 0.93;
  animation: holdtoPulse 4.5s linear infinite;
}
@keyframes holdtoPulse { to { stroke-dashoffset: -1; } }

.holdto-nodes { position: absolute; inset: 0; }

/* the four buttons, anchored at the four points of the ring —
   revamped: flat white discs with a rust line-icon set over the label */
.holdto-node {
  position: absolute;
  width: 21%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8%;
  text-align: center;
  padding: 6%;
  border-radius: 50%;
  border: 1px solid rgba(14,39,72,0.12);
  background: var(--fog-00);
  color: var(--main-blue);
  cursor: pointer;
  box-shadow: 0 6px 20px -10px rgba(14,39,72,0.22);
  transition: transform var(--dur-base, 280ms) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.holdto-node--1 { top: 13%;  left: 50%; }   /* top */
.holdto-node--2 { top: 50%;  left: 87%; }   /* right */
.holdto-node--3 { top: 87%;  left: 50%; }   /* bottom */
.holdto-node--4 { top: 50%;  left: 13%; }   /* left */

.holdto-node-icon { width: 34%; aspect-ratio: 1 / 1; color: var(--rust); }
.holdto-node-icon svg { display: block; width: 100%; height: 100%; }
.holdto-node-icon :is(path, circle) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.holdto-node-label {
  font-family: var(--font-sans);
  font-size: clamp(10.5px, 1.05vw, 12.5px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.holdto-node:hover {
  border-color: var(--rust);
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 12px 28px -10px rgba(14,39,72,0.30);
}
.holdto-node.is-active {
  border-color: var(--rust);
  background: var(--rust);
  color: var(--fog-00);
  box-shadow: 0 14px 32px -8px rgba(177, 85, 43, 0.42);
}
.holdto-node.is-active .holdto-node-icon { color: var(--fog-00); }
.holdto-node:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}

/* right-column card — shows the clicked value's label + description */
.holdto-card {
  border: 1px solid rgba(14,39,72,0.10);
  border-radius: 14px;
  background: var(--fog-00);
  box-shadow: 0 20px 48px -28px rgba(14,39,72,0.35);
  padding: clamp(28px, 3vw, 44px);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.holdto-pane {
  display: none;
  flex-direction: column;
  gap: var(--s-3);
}
.holdto-pane.is-active {
  display: flex;
  animation: holdtoFade var(--dur-base, 280ms) var(--ease);
}
.holdto-pane-label {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 34px);
  color: var(--rust);
  line-height: 1.1;
}
.holdto-pane-desc {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.7;
  color: var(--fog-220);
  margin: 0;
}
@keyframes holdtoFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ====== "Four things we hold to" — circular puzzle infographic.
   Four interlocking pieces (one SVG path rotated 4×90° → seamless interlock),
   alternating navy/rust, numbered, Main emblem at the hub; each piece is
   explained by a text block in the matching corner. Supersedes the interactive
   ring above (the .holdto-layout / .holdto-diagram / .holdto-node / .holdto-card
   / .holdto-pane rules are now unused). ====== */
.holdto-figure {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 360px) 1fr;
  grid-template-rows: auto auto;
  gap: clamp(20px, 3vw, 40px) clamp(24px, 3.5vw, 60px);
  align-items: center;
  max-width: 1060px;
  margin: 0 auto;
}
.holdto-figure[data-reveal] { opacity: 1; transform: none; transition: none; }
.holdto-cell { max-width: 320px; }
.holdto-cell--tl { grid-column: 1; grid-row: 1; }
.holdto-cell--tr { grid-column: 3; grid-row: 1; }
.holdto-cell--br { grid-column: 3; grid-row: 2; }
.holdto-cell--bl { grid-column: 1; grid-row: 2; }
.holdto-cell-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 var(--s-2);
}
.holdto-cell-desc {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fog-180);
  margin: 0;
}
.holdto-ring {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 100%;
  align-self: center;
}
.holdto-ring-svg { display: block; width: 100%; height: auto; overflow: visible; }
.holdto-piece { stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; }
.holdto-piece--navy { fill: var(--main-blue); }
.holdto-piece--rust { fill: var(--rust); }
.holdto-ring-num {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: 0.5px;
  fill: #fff;
}
.holdto-mark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 17%;
  pointer-events: none;
}
.holdto-mark svg { display: block; width: 100%; height: auto; }

/* faint cross divider behind the ring, separating the four quadrants */
.holdto-figure { position: relative; padding: clamp(6px, 2vw, 26px) 0; }
.holdto-figure::before,
.holdto-figure::after { content: ''; position: absolute; background: var(--border); z-index: 0; pointer-events: none; }
.holdto-figure::before { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
.holdto-figure::after { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.holdto-figure > * { position: relative; z-index: 1; }

/* hover: brighten the piece + its matching text together (linked via JS data-htf) */
.holdto-piece { transition: filter 0.25s var(--ease), opacity 0.25s var(--ease); }
.holdto-piece--navy.is-hot { fill: #1c3f6e; }
.holdto-piece--rust.is-hot { fill: #c56a3c; }
.holdto-piece.is-hot { filter: drop-shadow(0 5px 10px rgba(14, 39, 72, 0.30)); }
.holdto-figure.is-hovering .holdto-piece:not(.is-hot) { opacity: 0.72; }
.holdto-cell-title { position: relative; display: inline-block; }
.holdto-cell-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: -5px;
  width: 24px; height: 2px;
  background: var(--rust);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.holdto-cell.is-hot .holdto-cell-title::after { transform: scaleX(1); }
.holdto-cell-desc { transition: color 0.25s var(--ease); }
.holdto-cell.is-hot .holdto-cell-desc { color: var(--fog-220); }

/* gentle reveal — the container only flips .is-in; its children animate in */
.holdto-figure .holdto-ring { opacity: 0; transform: scale(0.92); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.holdto-figure.is-in .holdto-ring { opacity: 1; transform: none; }
.holdto-figure .holdto-cell { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.holdto-figure.is-in .holdto-cell { opacity: 1; transform: none; }
.holdto-figure.is-in .holdto-cell--tl { transition-delay: 0.12s; }
.holdto-figure.is-in .holdto-cell--tr { transition-delay: 0.22s; }
.holdto-figure.is-in .holdto-cell--br { transition-delay: 0.32s; }
.holdto-figure.is-in .holdto-cell--bl { transition-delay: 0.42s; }
@media (max-width: 820px) {
  .holdto-figure { grid-template-columns: 1fr; grid-template-rows: none; justify-items: center; gap: var(--s-5); }
  .holdto-figure > .holdto-cell, .holdto-figure > .holdto-ring { grid-column: 1; grid-row: auto; }
  .holdto-ring { order: -1; max-width: 300px; }
  .holdto-cell { max-width: 52ch; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .holdto-figure .holdto-ring, .holdto-figure .holdto-cell { opacity: 1; transform: none; transition: none; }
}

/* quick-contact form inside the closing CTA band */
.cta-form {
  display: flex;
  justify-content: center;
  text-align: left;
}
.cta-band.cta-band--form { padding: var(--s-8) 0; }
.cta-band.cta-band--form h2 {
  font-style: italic;
  color: var(--rust);
  font-size: clamp(24px, 2.4vw, 34px);
  margin-bottom: var(--s-2);
}
.cta-band.cta-band--form p { margin-bottom: var(--s-5); }
.cta-form .modal { width: 100%; max-width: 480px; }
.cta-form form { gap: var(--s-2); margin-bottom: 0; }
.cta-form .actions { justify-content: center; margin-top: var(--s-1); }
.cta-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
@media (max-width: 480px) {
  .cta-form .field-row { grid-template-columns: 1fr; }
}

/* stacked layout on narrow screens — ring becomes a 2x2 node grid, card below */
@media (max-width: 760px) {
  .holdto-layout { grid-template-columns: 1fr; gap: var(--s-5); }
  .holdto-diagram { aspect-ratio: auto; }
  .holdto-flow { display: none; }
  .holdto-nodes {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
  }
  .holdto-node {
    position: static;
    width: 100%;
    aspect-ratio: auto;
    transform: none;
    padding: var(--s-4);
    border-radius: 10px;
  }
  .holdto-node:hover { transform: none; }
  .holdto-card { min-height: 0; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .holdto-node, .holdto-node:hover { transition: none; }
  .holdto-pane.is-active { animation: none; }
  .flow-pulse { display: none; }
}

/* ======================================================
   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('/assets/img/ipc/skyline.png');
  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;
  color: var(--rust);
  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); }
.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;
  color: var(--rust-light);
  background: rgba(212,122,80,0.12);
  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); }

/* ======================================================
   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-serif);
  font-style: italic;
  font-weight: 400;
  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); }

/* ======================================================
   OUR PROCESS — upright stacked title + drawn timeline
   ====================================================== */
.process-flow { background: var(--fog-20); }
.process-flow .pf-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  margin-top: var(--s-6);
  padding-left: clamp(24px, 8vw, 140px);
}
.process-flow > .container > .read-link {
  display: block;
  width: fit-content;
  margin-left: auto;
  text-align: right;
  position: relative;
}
/* animated underline that grows in from the left on hover/focus */
.process-flow > .container > .read-link::before {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: var(--rust);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease);
}
.process-flow > .container > .read-link:hover::before,
.process-flow > .container > .read-link:focus-visible::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .process-flow > .container > .read-link::before { transition: none; }
}

/* Stacked, upright title: each letter normal orientation, words run downward.
   "PROCESS" column is nudged lower than "OUR". */
.process-flow .pf-title {
  display: flex;
  gap: 12px;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.process-flow .pf-title .vcol {
  display: flex;
  flex-direction: column;
  line-height: 0.98;
  font-size: clamp(26px, 3.4vw, 34px);
}
.process-flow .pf-title .vcol span { display: block; text-align: center; }
.process-flow .pf-title .vcol.one { color: var(--main-blue); }
.process-flow .pf-title .vcol.two { color: var(--rust); margin-top: 42px; }
.process-flow .pf-title .vcol.two::after {
  content: "";
  display: block;
  width: 18px;
  height: 3px;
  background: var(--rust);
  margin: 14px auto 0;
}

/* Timeline: a rust rule the steps hang from, each with a dot. */
.process-flow .pf-steps {
  list-style: none;
  margin: 0;
  padding-left: 34px;
  position: relative;
  max-width: 60ch;
}
.process-flow .pf-steps::before {
  content: "";
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--rust);
}
.process-flow .pf-steps li {
  position: relative;
  padding: 0 0 var(--s-7) var(--s-4);
  transition: transform 0.3s var(--ease);
}
.process-flow .pf-steps li:last-child { padding-bottom: 0; }
.process-flow .pf-steps li::before {
  content: "";
  position: absolute;
  left: -34px; top: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--fog-20);
  border: 3px solid var(--rust);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
/* hover lift: nudge the step, fill its node, slide the label */
.process-flow .pf-steps li:hover { transform: translateX(6px); }
.process-flow .pf-steps li:hover::before { background: var(--rust); transform: scale(1.18); }
.process-flow .pf-steps li:hover .label { color: var(--rust); }

/* clickable step (Invest with discipline → Investment philosophy) */
.process-flow .pf-steps .pf-link a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.process-flow .pf-steps .pf-arrow {
  display: inline-block;
  color: var(--rust);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.process-flow .pf-steps .pf-link:hover .pf-arrow { opacity: 1; transform: translateX(2px); }
.process-flow .pf-steps .num {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--rust);
}
.process-flow .pf-steps .label {
  display: block;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--main-blue);
  margin: 2px 0 4px;
}
.process-flow .pf-steps .desc {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fog-180);
}
.process-flow .read-link {
  display: inline-block;
  margin-top: var(--s-7);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.process-flow .read-link::after { content: ' →'; color: var(--rust); }

/* scroll-in stagger (toggled by the data-process-reveal observer in ipc-behaviors.js) */
.process-flow [data-process-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.process-flow [data-process-reveal].is-in { opacity: 1; transform: none; }
.process-flow [data-process-reveal]:nth-child(2) { transition-delay: 0.10s; }
.process-flow [data-process-reveal]:nth-child(3) { transition-delay: 0.20s; }
.process-flow [data-process-reveal]:nth-child(4) { transition-delay: 0.30s; }
@media (prefers-reduced-motion: reduce) {
  .process-flow [data-process-reveal] { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 760px) {
  .process-flow .pf-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .process-flow .pf-title { flex-direction: row; gap: 8px; }
  .process-flow .pf-title .vcol { flex-direction: row; line-height: 1; }
  .process-flow .pf-title .vcol.two { margin-top: 0; margin-left: 8px; }
  .process-flow .pf-title .vcol.two::after { display: none; }
}

/* ======================================================
   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-serif);
  font-style: italic;
  font-weight: 400;
  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 h4 {
  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 h4 { 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;
}

/* ======================================================
   TEAM STRIP — intro + avatar row
   ====================================================== */
.team-strip .grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--s-8);
  align-items: center;
}
/* Access groups — in-house team + trusted-network category tiles */
.team-strip .access-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
.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: 11px;
  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(--fog-00);
  color: var(--main-blue);
  padding: var(--s-9) 0 var(--s-10);
  text-align: center;
  position: relative;
  border-top: 1px solid var(--border);
}
.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(30px, 3vw, 46px);
  line-height: 1.1;
  color: var(--main-blue);
  margin: 0 0 var(--s-5) 0;
  letter-spacing: -0.015em;
}
.cta-band h2 em { font-style: italic; color: var(--rust); }
.cta-band p {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  color: var(--fog-180);
  margin: 0 auto var(--s-7);
  max-width: 48ch;
}
.cta-band .btn-inverse {
  background: var(--rust);
  color: var(--fog-00);
  border-color: var(--rust);
}
.cta-band .btn-inverse:hover {
  background: var(--rust-dark);
  color: var(--fog-00);
  border-color: var(--rust-dark);
}

/* ======================================================
   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,
.modal h1 {   /* /ipc/contact/ promotes the form heading to the page h1 — same render as the 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 .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 h5 {
  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);   /* 12px on navy — fog-120 fails AA */
}
.site-footer .legal p { margin: 0; max-width: none; color: var(--fog-80); }   /* fog-120 was 4.14:1 on navy */
.site-footer .legal .legal-disc {
  flex-basis: 100%;
  font-size: 11.5px;
  line-height: 1.55;
  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);
}
.page-hero .container {
  max-width: var(--container-wide);
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-8);
  align-items: end;
}
.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; }

/* Contact page tuning (scoped to .contact-page so other page-light pages — which
   now use page-light only for the dark-on-white nav — aren't affected): tighten
   the vertical rhythm so the hero and the form don't float in large empty bands. */
/* the page opens with the centered address then the blue form card on white */
.contact-page .section {
  padding: calc(var(--nav-h) + clamp(36px, 5vw, 72px)) 0 clamp(56px, 7vw, 96px);
  background: var(--fog-00);
}

/* centered firm address in the eyebrow font, alternating rust / blue lines */
.contact-address {
  text-align: center;
  margin: 0 auto clamp(30px, 4vw, 52px);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 2.1;
  color: var(--main-blue);
}
.contact-address__line { display: block; }
.contact-address__line--a,
.contact-address__line--b { color: var(--main-blue); }

/* blue form card with the white logo centered on top — reusable on any page
   (contact page + the closing CTA on firm-overview / client-experience / philosophy).
   Un-scoped from .contact-page so the same card can be dropped into those CTA bands. */
.modal--blue {
  background: var(--main-blue);
  border: 1px solid var(--main-blue);
  color: var(--fog-00);
  text-align: center;
  padding: var(--s-7);
  margin: 0 auto;
  transform: none;
  box-shadow: 0 28px 70px -28px rgba(14, 39, 72, .55);
}
.contact-logo { display: block; height: 34px; width: auto; margin: 0 auto var(--s-5); }
.modal--blue .eyebrow { color: var(--rust-light); }
.modal--blue .eyebrow::before { background: var(--rust-light); }
.modal--blue h3,
.modal--blue h1,
.modal--blue .success-state p { color: var(--fog-00); }
.modal--blue h3,
.modal--blue h1 { margin: var(--s-1) 0 var(--s-5); }
/* inputs restyled for the dark card */
.modal--blue input,
.modal--blue select,
.modal--blue textarea {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--fog-00);
}
.modal--blue input::placeholder,
.modal--blue textarea::placeholder { color: rgba(255, 255, 255, 0.62); }
.modal--blue select { color: rgba(255, 255, 255, 0.92); }
.modal--blue select option { color: var(--main-blue); }   /* readable dropdown list */
.modal--blue input:focus,
.modal--blue select:focus,
.modal--blue textarea:focus { border-color: var(--rust-light); outline: none; }
/* rust submit button pops on the blue card; center it */
.modal--blue .actions { display: flex; justify-content: center; }
.modal--blue .btn-primary { background: var(--rust); color: var(--fog-00); }
.modal--blue .btn-primary:hover { background: var(--rust-dark); }
.modal--blue .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  text-align: left;
}
@media (max-width: 560px) {
  .modal--blue .field-row { grid-template-columns: 1fr; }
}

/* Compact page-hero variant (smaller header, e.g. Client Experience) */
.page-hero--compact { display: flex; align-items: center; min-height: 56vh; padding: calc(var(--nav-h) + var(--s-6)) 0 var(--s-6); background: var(--fog-00); border-bottom: 1px solid var(--border); }
section.page-hero--compact h1 { color: var(--main-blue); }
section.page-hero--compact .lede { color: var(--fog-180); }
section.page-hero--compact .chapter { color: var(--rust); }
.page-hero--compact .container { grid-template-columns: 1fr; align-items: start; gap: var(--s-6); width: 100%; }
.page-hero--compact .chapter {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.page-hero--compact h1 {
  font-size: clamp(56px, 5.6vw, 88px);  /* matches the advisor .page-hero h1 scale */
  margin-bottom: var(--s-3);
  max-width: 24ch;
}
/* phones: same scale-down the advisor page-hero uses so the serif h1 doesn't overflow */
@media (max-width: 600px) {
  .page-hero h1,
  .page-hero--compact h1,
  .fo-hero h1 { font-size: clamp(34px, 9vw, 52px); }
}
section.page-hero--compact .lede {
  font-size: 19px;
  line-height: 1.6;
  margin-bottom: 0;
  max-width: 54ch;
}
.page-hero--compact .meta .val { font-size: 15px; }
.page-hero .lede {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.6;
  color: var(--fog-180);
  max-width: 54ch;
  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-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.35;
  color: var(--main-blue);
  margin: 0 0 var(--s-6) 0;
}

/* ===== 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: 11px;
  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: 11px;
  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-serif);
  font-style: italic;
  color: var(--rust);
  font-weight: 500;
}

/* ----- 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-serif);
  font-weight: 500;
  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));
}

.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: 11px;
  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-serif);
  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; }
.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-serif);
  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; }

/* 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-serif);
  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-serif);
  font-weight: 500;
  font-size: 22px;
  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; }
}

/* ----- 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(3, 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 .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 .stat { padding: 0 var(--s-4); }
  .site-footer .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .site-nav .links { display: none; }
}

@media (max-width: 600px) {
  .hero-track { height: 150vh; }
  .hero-inner { padding: 0 24px 0 18px; }
  .hero h1 { max-width: 100%; }
  .hero-lede { max-width: 100%; }
  .hero-actions { flex-direction: column; align-items: flex-end; gap: var(--s-3); }
  .hero-actions .btn { justify-content: center; }
  .firm-facts .stats { grid-template-columns: 1fr; gap: var(--s-7); }
  .firm-facts .stat { padding: 0; }
  .firm-facts .stat + .stat::before { display: none; }
  .site-footer .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;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--main-blue);
  color: var(--fog-00);
  padding: var(--s-9) var(--s-5);
  position: relative;
}
.gate .gate-logo { width: 200px; height: auto; margin-bottom: var(--s-7); }
.gate .gate-tag {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 var(--s-9);
}
.gate .gate-tag .dot { color: var(--rust); margin: 0 0.5em; }
.gate .gate-prompt {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
  color: var(--fog-00);
  margin: 0 auto var(--s-8);
  max-width: 18ch;
}
.gate .gate-prompt em { font-style: italic; font-weight: 400; color: #e6a37d; }
.gate .gate-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 320px));
  gap: var(--s-5);
  width: 100%;
  max-width: 680px;
}
.gate .choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--s-2);
  padding: var(--s-6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--fog-00);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.gate .choice:hover {
  border-color: var(--rust);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}
.gate .choice .ck {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
}
.gate .choice .ct {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.15;
  margin-top: 2px;
}
.gate .choice .cd {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.gate .choice .carrow { color: var(--rust); margin-top: var(--s-2); font-size: 18px; }
.gate .gate-foot {
  position: absolute;
  bottom: var(--s-6);
  left: 0; right: 0;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.4);
}
.gate .gate-foot a { color: rgba(255, 255, 255, 0.6); }

/* 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-serif);
  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,
.who-we-serve .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: var(--radius-pill);
  padding: 3px 10px;
}
/* Hover: card flips to Main Blue */
.service-card { transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.service-card:hover { background: var(--main-blue); border-color: var(--main-blue); }
.service-card:hover h3 { color: var(--fog-00); }
.service-card:hover p { color: var(--fog-50); }
.service-card:hover .num { color: var(--rust-light, var(--rust)); }
.service-card:hover .tags span { color: var(--fog-50); border-color: rgba(255,255,255,0.25); }
@media (max-width: 760px) {
  .services .grid, .who-we-serve .grid { grid-template-columns: 1fr; }
}

/* Who we serve — centered header + 2x2 card grid */
.who-we-serve { padding: var(--s-8) 0; }
.wws-head { text-align: center; margin: 0 auto var(--s-7); }
/* eyebrow centered with a rust rule on BOTH sides */
.eyebrow-center {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
}
.eyebrow-center::before,
.eyebrow-center::after {
  content: '';
  width: 72px;
  height: 1px;
  background: var(--rust);
}
.wws-caption {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--main-blue);
  margin: var(--s-4) auto 0;
  max-width: none;
  white-space: nowrap;
}
/* inline link styling (not a boxy button) for the caption CTA */
.wws-caption .lede-link {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: var(--rust);
  font-weight: 500;
  cursor: pointer;
}
.wws-caption .lede-link:hover { color: var(--rust-light); }

.wws-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  align-items: start;
  max-width: 880px;
  margin: 0 auto;
}
.wws-cards .service-card {
  padding: var(--s-5) var(--s-6);
  gap: var(--s-2);
  position: relative;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
/* rust number, left accent bar that grows on hover, gentle lift */
.wws-cards .service-card .num { font-size: 12px; letter-spacing: 0.18em; }
.wws-cards .service-card h3 { font-size: 18px; }
.wws-cards .service-card p { font-size: 13px; line-height: 1.55; }
.wws-cards .service-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--rust);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-fast) var(--ease);
}
.wws-cards .service-card:hover { transform: translateY(-2px); }
.wws-cards .service-card:hover::before { transform: scaleY(1); }
.wws-cards .service-card:hover .num { color: var(--rust); }

/* scroll-in stagger (toggled by the data-wws-reveal observer in ipc-behaviors.js) */
.wws-cards [data-wws-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.wws-cards [data-wws-reveal].is-in { opacity: 1; transform: none; }
.wws-cards [data-wws-reveal]:nth-child(2) { transition-delay: 0.08s; }
.wws-cards [data-wws-reveal]:nth-child(3) { transition-delay: 0.16s; }
.wws-cards [data-wws-reveal]:nth-child(4) { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .wws-cards [data-wws-reveal] { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 760px) {
  .wws-cards { grid-template-columns: 1fr; }
  .wws-caption { white-space: normal; }
}

/* ======================================================
   INTEGRATED TEAM / OPEN ARCHITECTURE
   Crawford-style: a central "You" with the network around it.
   ====================================================== */
.it-head { text-align: center; margin: 0 auto var(--s-8); max-width: 60ch; }
/* rust title flanked by rules on both sides */
.title-ruled {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 40px);
  color: var(--rust);
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.01em;
  margin: 0;
}
.title-ruled::before,
.title-ruled::after {
  content: '';
  flex: 1 1 auto;
  max-width: clamp(48px, 12vw, 160px);
  height: 1px;
  background: var(--rust);
  opacity: 0.6;
}
.it-caption {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--main-blue);
  margin: var(--s-4) auto 0;
}

.it-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(150px, 0.55fr) 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  max-width: 1040px;
  margin: 0 auto;
}
/* gridlines between the four areas: one vertical line through "You",
   plus a horizontal divider between the rows */
.it-grid::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: var(--border);
}
.it-grid .service-card:nth-of-type(1),
.it-grid .service-card:nth-of-type(2) { border-bottom: 1px solid var(--border); }
.it-grid .service-card:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.it-grid .service-card:nth-of-type(2) { grid-column: 3; grid-row: 1; }
.it-grid .service-card:nth-of-type(3) { grid-column: 1; grid-row: 2; }
.it-grid .service-card:nth-of-type(4) { grid-column: 3; grid-row: 2; }
/* uniform text blocks: each cell is a flex column so the title and copy
   always share one left edge — whether or not the title is wrapped in a link */
.it-grid .service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--s-2);
}
/* fixed block width (not ch — ch differs between the 18px title and 13px copy,
   which would misalign their left edges) so all four read on one edge */
.it-grid .service-card h3,
.it-grid .service-card p,
.it-grid .it-card-link { width: 200px; max-width: 100%; }
/* let this heading size to its content so it stays on one line */
.it-grid .service-card h3.it-nowrap { width: auto; max-width: none; white-space: nowrap; }
.it-grid .it-card-link h3,
.it-grid .it-card-link p { width: 100%; }
/* the clickable card nests title + copy inside the link, so the flex gap
   can't reach between them — restore the same 8px there */
.it-grid .it-clickable .it-card-link h3 { margin-bottom: var(--s-2); }
/* all four blocks read the same way (left-aligned); the left column's
   block is anchored toward the centre line so the quadrants stay balanced */
.it-grid .service-card:nth-of-type(1),
.it-grid .service-card:nth-of-type(3) { align-items: flex-end; }
/* strip the boxy card look — clean text cells in a grid */
.it-grid .service-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--s-6) var(--s-6);
}
.it-grid .service-card { transition: transform .2s ease; }
.it-grid .service-card::before { display: none; }
/* keep the flat chart look (no card bg/border), but lift slightly on hover */
.it-grid .service-card:hover { transform: translateY(-4px); box-shadow: none; background: none; border-color: transparent; }
.it-grid .service-card:hover h3 { color: var(--main-blue); }
.it-grid .service-card:hover p { color: var(--fog-180); }
.it-grid .service-card h3 { font-size: 18px; margin: 0; }
.it-grid .service-card p { font-size: 13px; line-height: 1.55; margin: 0; }

/* central focal medallion */
.it-center {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.it-you {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: min(100%, 150px);
  border-radius: 50%;
  background: var(--main-blue);
  color: var(--fog-00);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
  box-shadow: 0 18px 44px rgba(14, 39, 72, 0.22);
  transition: box-shadow .25s ease;
}
/* the You hub lifts on hover too */
.it-center { transition: transform .2s ease; }
.it-center:hover { transform: translateY(-4px); }
.it-center:hover .it-you { box-shadow: 0 26px 54px rgba(14, 39, 72, 0.30); }

/* clickable cell: the only animated card in the grid */
.it-clickable { cursor: pointer; }
.it-clickable .it-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* arrow is absolutely placed so it never shifts the title */
.it-clickable .it-card-link h3 { position: relative; }
.it-clickable .arrow {
  position: absolute;
  top: 0;
  left: calc(100% + 0.3em);
  color: var(--rust);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.it-grid .it-clickable { transition: transform .2s ease; }
.it-grid .it-clickable .it-card-link h3 { color: var(--rust); transition: color var(--dur-fast) var(--ease); }
.it-grid .it-clickable:hover { transform: translateY(-4px); }
.it-grid .it-clickable:hover h3 { color: var(--rust-dark); }
.it-grid .it-clickable:hover .arrow { opacity: 1; transform: translateX(0); }

@media (max-width: 860px) {
  .it-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .it-grid .service-card:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  .it-grid .service-card:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .it-grid .service-card:nth-of-type(3) { grid-column: 1; grid-row: 3; }
  .it-grid .service-card:nth-of-type(4) { grid-column: 2; grid-row: 3; }
  .it-center { grid-column: 1 / span 2; grid-row: 1; }
  .it-you { width: 180px; }
}
@media (max-width: 520px) {
  .it-grid { grid-template-columns: 1fr; }
  .it-grid .service-card:nth-of-type(n) { grid-column: 1; grid-row: auto; }
  .it-center { grid-column: 1; }
}
@media (max-width: 640px) {
  .gate .gate-choices { grid-template-columns: 1fr; max-width: 360px; }
}

/* ======================================================
   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-80); 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 {
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.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;
}
/* Email / Call icon buttons on the card itself (the modal repeats them in full). */
.person-card .pcontact { display: flex; gap: 8px; margin-top: 2px; }
.person-card .pcontact a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--main-blue);
  border: 1px solid var(--border);
  border-radius: 50%;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.person-card .pcontact a:hover {
  border-color: var(--rust);
  color: var(--rust);
  background: rgba(177, 85, 43, 0.06);
}
.person-card:focus-visible { outline: 2px solid var(--rust); outline-offset: 4px; border-radius: 8px; }

/* 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: 11px; font-weight: 700;
  letter-spacing: 0.16em; 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: 50%; 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; }
/* Home video hero is full-bleed to the top; the audience bar + nav overlay it. */
body.hero-home.has-aud-bar { padding-top: 0; }

/* Home: the audience bar starts hidden and slides in on scroll alongside the
   nav links (JS adds .is-revealed at the same p > 0.3 threshold). The 36px it
   vacates simply shows the video — the nav stays at top:36px the whole time. */
body.hero-home .audience-bar {
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
body.hero-home .audience-bar.is-revealed {
  transform: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  body.hero-home .audience-bar { transform: none; opacity: 1; transition: none; }
}

/* Home video hero: the nav opens as logo-only over the video; the section
   links + "Talk with us" CTA fade in once the visitor scrolls down (JS adds
   .nav-revealed), once the nav flips on release (.scrolled), or on keyboard
   focus (so the links stay reachable for keyboard / screen-reader users). */
body.hero-home .site-nav .links,
body.hero-home .site-nav .cta {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
body.hero-home .site-nav.nav-revealed .links,
body.hero-home .site-nav.nav-revealed .cta,
body.hero-home .site-nav.scrolled .links,
body.hero-home .site-nav.scrolled .cta,
body.hero-home .site-nav:focus-within .links,
body.hero-home .site-nav:focus-within .cta {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.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; } }

/* ===================================================================
   Whole-picture band (Investment Philosophy)
   A single continuous relationship: rust spine links four moments.
   =================================================================== */
.wp-band .section-head .lede { max-width: 46ch; margin-top: 0.6rem; }

.wp-spine {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  position: relative;
}
/* the continuous spine line, behind the ticks */
.wp-spine::before {
  content: "";
  position: absolute;
  left: 7px;            /* centers under the 16px tick */
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: var(--border-strong);
}

.wp-moment {
  position: relative;
  padding: 0 0 2rem 2.75rem;   /* left room for tick + spine */
}
.wp-moment:last-child { padding-bottom: 0; }

.wp-tick {
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fog-00);
  border: 2px solid var(--border-strong);
  transition: border-color 0.5s ease, background 0.5s ease, transform 0.5s ease;
}

.wp-verb {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 0.35rem;
}
.wp-moment h3 { margin: 0 0 0.5rem; }
.wp-moment--lead h3 { font-size: 1.6rem; }   /* portfolio reads as the core */
.wp-body p { margin: 0; max-width: 60ch; color: var(--fg-2); }

/* ----- scroll-reveal: tick fills rust, body fades up ----- */
.wp-moment .wp-body {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.wp-moment.is-in .wp-body { opacity: 1; transform: none; }
.wp-moment.is-in .wp-tick {
  border-color: var(--rust);
  background: var(--rust);
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .wp-moment .wp-body { opacity: 1; transform: none; transition: none; }
  .wp-moment .wp-tick { transition: none; }
}

/* ===================================================================
   Our Team — title row + sticky category nav + member sections
   =================================================================== */
html { scroll-behavior: smooth; }

.team-title {
  background: var(--fog-00);
  padding: calc(var(--nav-h) + var(--s-7)) 0 var(--s-7);
  border-bottom: 1px solid var(--border);
}
/* match the wide container used by section/hero headers on the other pages, so
   the title lines up with the roster below it and every other page's header */
.team-title .container { max-width: var(--container-wide); }
.team-title .chapter { display: block; }
.team-title h1 { margin: 0.4rem 0 0; max-width: 16ch; color: var(--main-blue); }
.team-title .lede {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.6;
  color: var(--fog-180);
  max-width: 54ch;
  margin: 1rem 0 0;
}

/* ----- sticky category nav ----- */
.team-nav {
  position: sticky;
  top: var(--nav-h-scrolled);   /* sits just under the scrolled site-nav */
  z-index: 40;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.team-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
}
.team-nav a {
  display: inline-block;
  padding: 0.95rem 0;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  position: relative;
  text-decoration: none;
  transition: color 0.25s ease;
}
.team-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--rust);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}
.team-nav a:hover { color: var(--fg-1); }
.team-nav a.is-active { color: var(--rust); }
.team-nav a.is-active::after { transform: scaleX(1); }

/* ----- team sections ----- */
.team-section {
  padding: var(--s-8) 0;
  scroll-margin-top: calc(var(--nav-h-scrolled) + 64px);  /* clear both sticky bars */
  border-bottom: 1px solid var(--border);
}
.team-section:last-child { border-bottom: none; }
.team-section h2 { margin: 0 0 var(--s-6); }

.member-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
@media (max-width: 760px) {
  .member-grid { grid-template-columns: 1fr; }
  .team-nav ul { gap: var(--s-4); }
}

.member-card {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.member-card.is-in { opacity: 1; transform: none; }

.member-photo {
  aspect-ratio: 4 / 5;
  background: var(--fog-20);
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-4);
  overflow: hidden;
}
.member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.member-photo span {
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  color: var(--fog-80);
}
.member-name { margin: 0 0 0.2rem; font-weight: 600; color: var(--fg-1); }
.member-role { margin: 0; color: var(--fg-3); font-size: 0.92rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .team-nav a::after { transition: none; }
  .member-card { opacity: 1; transform: none; transition: none; }
}

/* ==================== Investment-approach chart ==================== */
/* Give this row a wider media column so the chart reads large,
   and nudge the whole row slightly left */
#investment-approach.feature-row.media-wide .feature-grid {
  grid-template-columns: 58fr 42fr;
  transform: translateX(-1.5rem);
}
@media (max-width: 860px) {
  #investment-approach.feature-row.media-wide .feature-grid { transform: none; }
}

/* Bubble/card that lifts the chart off the page */
.approach-card {
  margin: 0 0 0 -1.25rem;
  background: var(--fog-00);
  border: 1px solid var(--fog-30);
  border-radius: 16px;
  padding: 0.85rem 1.35rem 0.7rem;
  box-shadow: 0 22px 50px -12px rgba(14, 39, 72, 0.22), 0 4px 12px rgba(14, 39, 72, 0.06);
}
@media (max-width: 860px) { .approach-card { margin-left: 0; } }

.approach-chart { display: block; width: 100%; height: auto; overflow: visible; }
.approach-chart .ac-grid line { stroke: var(--fog-80); stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; opacity: 0.5; }
.approach-chart .ac-area { opacity: 0; }
.approach-chart .ac-mkt { fill: none; stroke: var(--rust); stroke-width: 1.3; stroke-linejoin: round; }
.approach-chart .ac-you { fill: none; stroke: var(--main-blue); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Sleek legend beneath the chart */
.approach-legend {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
  font-family: 'Lato', system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--fog-220);
}
.approach-legend li { display: inline-flex; align-items: center; gap: 0.5rem; }
.ac-sw { display: inline-block; width: 20px; height: 0; border-top: 2px solid; border-radius: 2px; }
.ac-sw-you { border-color: var(--main-blue); }
.ac-sw-mkt { border-color: var(--rust); }

/* Pre-draw state: lines hidden via dash offset (lengths set by ipc-behaviors.js).
   The draw + tip-riding arrows are driven frame-by-frame in ipc-behaviors.js. */
.approach-chart .ac-mkt { stroke-dasharray: var(--ac-lenM, 900); stroke-dashoffset: var(--ac-lenM, 900); }
.approach-chart .ac-you { stroke-dasharray: var(--ac-lenY, 800); stroke-dashoffset: var(--ac-lenY, 800); }

/* Area fades in alongside the draw */
.approach-chart.is-in .ac-area { animation: ac-soft 5s ease .35s forwards; }
@keyframes ac-soft { 0%, 30% { opacity: 0; } 100% { opacity: 1; } }

/* Once the draw finishes, the market line + its arrow recede so "you" leads */
.approach-chart.ac-done .ac-mkt { opacity: 0.42; transition: opacity 1.1s ease; }

@media (prefers-reduced-motion: reduce) {
  .approach-chart .ac-mkt, .approach-chart .ac-you { stroke-dashoffset: 0 !important; }
  .approach-chart .ac-mkt { opacity: 0.42; }
  .approach-chart .ac-area { opacity: 1 !important; animation: none !important; }
}

/* ======================================================================
   Client Experience — concierge orbit (replaces the meeting photo)
   "You" at the centre; five value chips ride a slow ring with a rust
   radar pulse. Draw + fade-up on scroll (.is-in); continuous spin/pulse.
   ====================================================================== */
.exp-orbit { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; overflow: visible; }

.exp-orbit .eo-core { fill: var(--main-blue); }
.exp-orbit .eo-coreT { font: 700 14px var(--font-sans); fill: var(--fog-00); letter-spacing: 0.01em; }
.exp-orbit .eo-dot { fill: var(--rust); }
.exp-orbit .eo-txt { font: 600 12px var(--font-sans); fill: var(--main-blue); }

/* ring: drawn on reveal */
.exp-orbit .eo-ring {
  fill: none; stroke: var(--fog-50); stroke-width: 1.5;
  stroke-dasharray: 691.15; stroke-dashoffset: 691.15;   /* 2*pi*110 */
}
.exp-orbit.is-in .eo-ring { transition: stroke-dashoffset 1.4s cubic-bezier(.45,.05,.3,1); stroke-dashoffset: 0; }

/* chips: hidden until reveal, then fade up in sequence.
   NOTE: positioning lives in each chip's transform="translate(...)" attribute,
   so we must NOT set a CSS transform here (CSS transform overrides the SVG
   attribute and collapses every chip onto the origin). */
.exp-orbit .eo-chip { opacity: 0; }
.exp-orbit.is-in .eo-chip { animation: eo-pop 0.55s ease forwards; }
.exp-orbit.is-in .eo-chip.c1 { animation-delay: 0.45s; }
.exp-orbit.is-in .eo-chip.c2 { animation-delay: 0.65s; }
.exp-orbit.is-in .eo-chip.c3 { animation-delay: 0.85s; }
.exp-orbit.is-in .eo-chip.c4 { animation-delay: 1.05s; }
.exp-orbit.is-in .eo-chip.c5 { animation-delay: 1.25s; }
@keyframes eo-pop { from { opacity: 0; } to { opacity: 1; } }

/* continuous spin + counter-spin (starts after reveal) */
.exp-orbit .eo-spin { transform-origin: 160px 160px; }
.exp-orbit.is-in .eo-spin { animation: eo-spin 26s linear 1.5s infinite; }
.exp-orbit.is-in .eo-up   { animation: eo-spin 26s linear 1.5s infinite reverse; }
@keyframes eo-spin { to { transform: rotate(360deg); } }

/* radar pulse from the core */
.exp-orbit .eo-pulse { fill: none; stroke: var(--rust); opacity: 0; }
.exp-orbit.is-in .eo-pulse.p1 { animation: eo-rad 3.8s ease-out 1.5s infinite; }
.exp-orbit.is-in .eo-pulse.p2 { animation: eo-rad 3.8s ease-out 3.4s infinite; }
@keyframes eo-rad {
  0%   { r: 38px; opacity: 0.5; stroke-width: 2; }
  100% { r: 132px; opacity: 0; stroke-width: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .exp-orbit .eo-ring { stroke-dashoffset: 0 !important; transition: none !important; }
  .exp-orbit .eo-chip { opacity: 1 !important; transform: none !important; animation: none !important; }
  .exp-orbit .eo-spin, .exp-orbit .eo-up { animation: none !important; }
  .exp-orbit .eo-pulse { display: none; }
}

/* ======================================================================
   Generic fade-up reveal — blocks tagged [data-reveal] animate in on scroll
   (JS adds .is-in via IntersectionObserver). Used across the home sections.
   ====================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.45,.05,.3,1);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ======================================================================
   REDESIGN KIT — "One Confident Hand"
   Shared vocabulary used across pages: oversized rust section index,
   big serif statements, asymmetric editorial grid, framed/duotone media,
   full-bleed bands, value lists, elevated cards. Brand tokens only.
   ====================================================================== */

/* Oversized, low-opacity rust section numeral */
.section-index {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(58px, 6.5vw, 104px);
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: rgba(177, 85, 43, 0.16);
  user-select: none;
  margin: 0;
}
.section-index--light { color: rgba(255, 255, 255, 0.22); }

/* Big serif editorial statement headline */
.statement {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(30px, 3.5vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--main-blue);
  margin: 0 0 var(--s-5);
  max-width: 18ch;
  text-wrap: balance;
}
.statement em { font-style: italic; color: var(--rust); font-weight: 500; }
.statement--light { color: var(--fog-00); }
.statement--light em { color: var(--rust-light); }

/* Asymmetric editorial section: text + framed media */
.editorial {
  padding: var(--s-10) 0;
  background: var(--fog-00);
  border-bottom: 1px solid var(--border);
}
.editorial.tint { background: var(--fog-20); }
.editorial .editorial-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(48px, 6vw, 104px);
  align-items: center;
}
/* media-left mirrors the column widths so the photo matches the media-right side */
.editorial--media-left .editorial-grid { grid-template-columns: 0.98fr 1.02fr; }
.editorial--media-left .editorial-media { order: -1; }
.editorial-text { position: relative; padding-top: var(--s-7); }
.editorial-text .section-index {
  position: absolute;
  top: clamp(-46px, -3vw, -22px);
  left: -2px;
}
.editorial-text .eyebrow { display: inline-block; margin: 0 0 var(--s-4); }
.editorial-text p { color: var(--main-blue); max-width: 46ch; margin: 0 0 var(--s-6); }
.editorial-text .about-creds { margin: 0 0 var(--s-6); }
@media (max-width: 860px) {
  .editorial .editorial-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .editorial--media-left .editorial-media { order: 0; }
}

/* Art-directed framed media with depth */
.media-frame { position: relative; margin: 0; }
.media-frame img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;   /* larger editorial-media radius (Mastercard-inspired) */
  box-shadow: var(--shadow-lg);
}
/* rust corner-frame peeking out from behind, top-left */
.media-frame--corner::before {
  content: '';
  position: absolute;
  top: -14px; left: -14px;
  width: 40%; height: 48%;
  border-top: 3px solid var(--rust);
  border-left: 3px solid var(--rust);
  border-top-left-radius: 20px;
  z-index: 0;
}
/* tone stock toward the brand blue so it stops reading as generic stock */
.media-frame--duotone img { filter: saturate(0.72) contrast(1.02); }
.media-frame--duotone::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(14,39,72,0.34), rgba(14,39,72,0.58));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Value list — key + one-line value with a rust tick (replaces the orbit graphic) */
.value-list { list-style: none; margin: 0 0 var(--s-6); padding: 0; max-width: 44ch; }
.value-list li {
  display: grid;
  grid-template-columns: 10.5em 1fr;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
.value-list li:last-child { border-bottom: 0; }
.value-k {
  position: relative;
  padding-left: var(--s-4);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--main-blue);
}
.value-k::before {
  content: '';
  position: absolute; left: 0; top: 0.45em;
  width: 12px; height: 2px; background: var(--rust);
}
.value-v { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; color: var(--fog-180); transition: color var(--dur-fast) var(--ease); }
/* hover animation on the one-word tags: the rust tick extends and the label steps
   right to stay clear of it. We animate padding-left, not transform — the tick is a
   ::before inside .value-k, so transforming .value-k would move both together and the
   growing tick would overrun the text. */
.value-k { transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease); }
.value-k::before { transition: width var(--dur-fast) var(--ease); }
.value-list li:hover .value-k { color: var(--rust); padding-left: var(--s-6); }
.value-list li:hover .value-k::before { width: 24px; }
.value-list li:hover .value-v { color: var(--main-blue); }
@media (max-width: 560px) {
  .value-list li { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .value-k, .value-k::before, .value-v { transition: none; }
}

/* Full-bleed cinematic band (one per page) */
.bleed {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 12vw, 156px) 0;
  background: var(--main-blue);
  border-bottom: 1px solid var(--border);
}
.bleed-media { position: absolute; inset: 0; z-index: 0; }
.bleed-media img { width: 100%; height: 100%; object-fit: cover; }
.bleed::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, rgba(9,26,49,0.94) 0%, rgba(14,39,72,0.78) 46%, rgba(14,39,72,0.42) 100%);
}
.bleed .container { position: relative; z-index: 2; }
.bleed-card { max-width: 42rem; }
.bleed-card .section-index { margin: 0 0 var(--s-3); }
.bleed-card .eyebrow { display: inline-block; color: var(--rust-light); margin: 0 0 var(--s-4); }
.bleed-card p { color: rgba(255,255,255,0.82); max-width: 48ch; margin: 0 0 var(--s-6); }

/* Light variant of the animated underline link (on dark bands) */
.anim-link--light { color: var(--fog-00); }
.anim-link--light::after { background: var(--rust-light); }
.anim-link--light:hover { color: var(--rust-light); }
.anim-link--light:hover::after { background: var(--fog-00); }

/* Hero: scale up + rust eyebrow */
.hero h1 { font-size: clamp(56px, 7.2vw, 104px); max-width: 13ch; }
.hero .eyebrow { display: inline-block; color: var(--rust-light); margin: 0 0 var(--s-5); }

/* Firm-facts: larger numerals for presence */
.firm-facts .num { font-size: clamp(44px, 5vw, 64px); }

/* Button confidence: a touch larger + lift/elevation on solid CTAs */
.btn { padding: 15px 30px; }
.btn-primary:hover, .btn-accent:hover, .btn-inverse:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover, .btn-accent:hover, .btn-inverse:hover { transform: none; }
}

/* Who We Serve heading: keep "serve." blue here (override the global rust h2 em) */
.wws-head h2 em { color: var(--main-blue); }
/* Who We Serve: compact elevated cards in a single 4-up row (2-up tablet, 1-up phone) */
.wws-cards {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  align-items: stretch;
  max-width: var(--container);
}
.wws-cards .service-card {
  background: var(--fog-00);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-5);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.wws-cards .service-card .num { display: none; }
/* rust serif title; reserve two lines so descriptions line up across the row,
   bottom-aligned so a one-line title sits directly above its description (the
   slack becomes top padding instead of an odd gap under the title) */
.wws-cards .service-card h3 {
  font-size: 18.5px;
  line-height: 1.2;
  min-height: 2.4em;
  color: var(--rust);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wws-cards .service-card p { font-size: 12.5px; line-height: 1.55; }
.wws-cards .service-card::before { top: 14px; bottom: 14px; border-radius: 2px; }
.wws-cards .service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--fog-50);
  background: var(--fog-00);
}
.wws-cards .service-card:hover h3 { color: var(--rust-dark); }
.wws-cards .service-card:hover p { color: var(--fog-180); }
@media (max-width: 1024px) {
  .wws-cards { grid-template-columns: repeat(2, 1fr); max-width: 820px; gap: var(--s-5); }
  .wws-cards .service-card h3 { min-height: 0; }
}
@media (max-width: 600px) {
  .wws-cards { grid-template-columns: 1fr; max-width: 460px; }
}
@media (prefers-reduced-motion: reduce) {
  .wws-cards .service-card:hover { transform: none; }
}

/* ======================================================================
   About Main Management — pull-quote, credential chips, framed photo
   ====================================================================== */
.about-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  color: var(--fg-2);
  margin: 0 0 var(--s-5);
  padding-left: var(--s-4);
  border-left: 2px solid var(--rust);
  max-width: 34ch;
}
.about-creds {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0 0 var(--s-6);
  padding: 0;
}
.about-creds li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--main-blue);
  background: var(--fog-00);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 7px 14px;
}
.about-creds .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rust); }

/* photo with a rust corner-frame */
#about .framed-photo {
  position: relative;
  margin: 0;
  padding: 12px 0 0 12px;
}
#about .framed-photo::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 72px; height: 72px;
  border-top: 3px solid var(--rust);
  border-left: 3px solid var(--rust);
  border-radius: 6px 0 0 0;
}
#about .framed-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
  /* layered shadow for depth — soft ambient + tighter contact, blue-tinted */
  box-shadow:
    0 26px 50px -20px rgba(14, 39, 72, 0.38),
    0 10px 20px -12px rgba(14, 39, 72, 0.22);
}

/* Investment Approach — overhead working-session photo (replaces the chart) */
#investment-approach .ia-photo {
  max-width: 80%;
  margin-right: auto;   /* sits to the left within its column */
  border-radius: 8px;
  box-shadow:
    0 26px 50px -20px rgba(14, 39, 72, 0.38),
    0 10px 20px -12px rgba(14, 39, 72, 0.20);
}
@media (max-width: 860px) { #investment-approach .ia-photo { max-width: 100%; } }

/* ======================================================================
   Firm Overview page — cinematic hero, dark stat band, story chapters
   ====================================================================== */
.fo-hero {
  position: relative;
  overflow: hidden;
  min-height: 56vh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + var(--s-7)) 0 var(--s-7);
  background: var(--fog-00);
  color: var(--main-blue);
  border-bottom: 1px solid var(--border);
}
.fo-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('/assets/img/ipc/mafia.png');
  background-size: cover;
  background-position: center 32%;
  /* very slight drift for life without magnifying the subjects */
  animation: fo-kenburns 24s ease-in-out infinite alternate;
}
@keyframes fo-kenburns { from { transform: scale(1); } to { transform: scale(1.05) translateY(-1%); } }
.fo-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(14,39,72,0.50) 0%, rgba(14,39,72,0.42) 38%, rgba(14,39,72,0.93) 100%);
}
.fo-hero .container { position: relative; z-index: 2; max-width: var(--container-wide); }
.fo-hero-copy { max-width: 60ch; }
.chapter--light { color: var(--rust); }
.fo-hero h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--display-1);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--main-blue);
  margin: 0.15em 0 var(--s-5);
  max-width: 18ch;
}
.fo-hero h1 em { font-style: italic; color: var(--rust); }
.fo-hero .lede { font-size: 19px; line-height: 1.6; color: var(--fog-180); max-width: 54ch; margin: 0; }
.fo-scroll-cue {
  position: absolute;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  width: 22px; height: 34px;
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 12px;
  z-index: 2;
  /* hold for a few seconds, then fade out and stay hidden */
  animation: fo-cue-dismiss 1.2s ease 5s forwards;
}
@keyframes fo-cue-dismiss {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}
.fo-scroll-cue::before {
  content: '';
  position: absolute;
  left: 50%; top: 7px;
  transform: translateX(-50%);
  width: 3px; height: 7px;
  border-radius: 2px;
  background: #fff;
  animation: fo-cue 1.8s ease-in-out infinite;
}
@keyframes fo-cue {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 11px); }
}

/* dark stat band variant */
.firm-facts--dark { background: var(--main-blue); border-bottom: 0; }
/* dark band carries three stats */
.firm-facts--dark .stats { grid-template-columns: repeat(3, 1fr); }
.firm-facts--dark .stat { padding: 0 var(--s-4); }
.firm-facts--dark .num { font-size: clamp(30px, 3.4vw, 44px); }
@media (max-width: 600px) {
  .firm-facts--dark .stats { grid-template-columns: 1fr; gap: var(--s-7); }
}
.firm-facts--dark .ethos { color: var(--rust-light); }
.firm-facts--dark .num { color: var(--fog-00); }
.firm-facts--dark .cap { color: rgba(255,255,255,0.6); }
.firm-facts--dark .stat + .stat::before { background: rgba(255,255,255,0.18); }
.firm-facts--dark .availability { color: rgba(255,255,255,0.5); }

/* story chapters */
.fo-story { padding: var(--s-9) 0; }
.fo-chapter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  align-items: center;
}
.fo-chapter + .fo-chapter { margin-top: var(--s-9); }
.fo-chapter--flip .fo-chapter-media { order: 2; }
.fo-chapter-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 26px 50px -22px rgba(14,39,72,0.4);
}
.fo-chapter .fo-chapter-media img { aspect-ratio: 16 / 10; }
.fo-num {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(56px, 6vw, 88px);
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: rgba(177, 85, 43, 0.18);   /* rust ghost numeral — matches .section-index on the home page */
  margin-bottom: var(--s-3);
}
.fo-chapter-text h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--main-blue);
  margin: 0 0 var(--s-4);
  max-width: 16ch;
}
.fo-chapter-text h2 em { font-style: italic; color: var(--rust); }
.fo-chapter-text h2.fo-title--rust { color: var(--rust); font-style: normal; white-space: nowrap; }
.fo-chapter-text p { font-size: 17px; line-height: 1.62; color: var(--main-blue); max-width: 48ch; margin: 0; }

/* ---- Founders (chapter 01: firm history) ---- */
.fo-founders {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-9);
  align-items: center;
}
.fo-founders + .fo-chapter { margin-top: var(--s-9); }
.fo-founders-head { max-width: 48ch; }
.fo-founders-head h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--rust);
  margin: 0 0 var(--s-4);
}
.fo-founders-head h2 em { font-style: normal; color: var(--rust); }
.fo-founders-head p { font-size: 17px; line-height: 1.62; color: var(--main-blue); margin: 0; }
.fo-founders-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 130px);
  gap: var(--s-4);
  justify-content: start;
}
.founder-card {
  display: flex;
  flex-direction: column;
  /* staggered reveal: each card eases in slightly after the previous */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: calc(var(--i) * 120ms);
}
.fo-founders.is-in .founder-card { opacity: 1; transform: none; }
.founder-photo {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 26px 50px -22px rgba(14,39,72,0.4);
}
.founder-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.founder-card:hover .founder-photo img { transform: scale(1.04); }
.founder-photo::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 48px; height: 3px;
  background: var(--rust);
}
.founder-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--main-blue);
  margin-top: var(--s-4);
}
.founder-role {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fog-50);
  margin-top: 2px;
}

@media (max-width: 860px) {
  .fo-chapter { grid-template-columns: 1fr; gap: var(--s-6); }
  .fo-chapter-text h2.fo-title--rust { white-space: normal; }
  .fo-chapter--flip .fo-chapter-media { order: 0; }
  .fo-hero { min-height: 78vh; }
  .fo-founders { grid-template-columns: 1fr; gap: var(--s-6); }
  .fo-founders-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  .founder-card { opacity: 1; transform: none; transition: none; }
  .founder-photo img { transition: none; }
}

/* Firm Overview — "what sets us apart" as an elevated 2x2 grid
   (replaces the arc-arrow circle diagram; same card language as the rest of the site) */
.holdto-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  max-width: 940px;
  margin: 0 auto;
}
.holdto-card {
  background: var(--fog-00);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-7);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* rust line-icon that strokes itself in on scroll */
.holdto-icon {
  display: block;
  width: 38px;
  height: 38px;
  color: var(--rust);
  margin-bottom: var(--s-5);
}
.holdto-icon svg { display: block; width: 100%; height: 100%; }
.holdto-icon :is(path, circle) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s var(--ease);
}
.holdto-grid.is-in .holdto-icon :is(path, circle) {
  stroke-dashoffset: 0;
  transition-delay: calc(var(--i, 0) * 0.14s + 0.15s);
}
.holdto-card h3 {
  position: relative;
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.1;
  color: var(--main-blue);
  margin: 0 0 var(--s-4);
}
/* rust underline wipes across on hover */
.holdto-card h3::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: var(--rust);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(.22,.61,.36,1);
}
.holdto-card:hover h3::after { transform: scaleX(1); }
.holdto-card p {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fog-180);
  margin: 0;
  max-width: none;
}
.holdto-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--fog-50);
}
@media (max-width: 760px) {
  .holdto-grid { grid-template-columns: 1fr; max-width: 460px; }
}
@media (prefers-reduced-motion: reduce) {
  .holdto-card:hover { transform: none; }
  .holdto-icon :is(path, circle) { stroke-dashoffset: 0; transition: none; }
  .holdto-card h3::after { transition: none; }
}

/* ======================================================
   FIRM OVERVIEW — scroll motion ("oomph")
   Layered on top of the generic [data-reveal] fade. These blocks let
   their inner halves carry the movement, so the parent fades opacity only.
   ====================================================== */

/* Hero: cascade the eyebrow → headline → lede rather than one block fade */
.fo-hero-copy[data-reveal] { transform: none; }
.fo-hero-copy > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.fo-hero-copy.is-in > * { opacity: 1; transform: none; }
.fo-hero-copy.is-in .chapter { transition-delay: .05s; }
.fo-hero-copy.is-in h1       { transition-delay: .16s; }
.fo-hero-copy.is-in .lede    { transition-delay: .32s; }

/* Story chapters: media + text slide in from opposite sides, lightly staggered */
.fo-chapter[data-reveal],
.fo-founders[data-reveal] { transform: none; }

.fo-chapter-media,
.fo-chapter-text {
  opacity: 0;
  transition: opacity .85s ease, transform .85s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
  will-change: transform;
}
.fo-chapter .fo-chapter-media { transform: translateX(-44px); }
.fo-chapter .fo-chapter-text  { transform: translateX(44px); }
.fo-chapter--flip .fo-chapter-media { transform: translateX(44px); }
.fo-chapter--flip .fo-chapter-text  { transform: translateX(-44px); }
.fo-chapter.is-in .fo-chapter-media,
.fo-chapter.is-in .fo-chapter-text { opacity: 1; transform: none; }
.fo-chapter.is-in .fo-chapter-text { transition-delay: .12s; }

/* ghost chapter number drifts up + brightens after its text lands */
.fo-num { transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.fo-chapter[data-reveal] .fo-num,
.fo-founders[data-reveal] .fo-num { opacity: 0; transform: translateY(14px); }
.fo-chapter.is-in .fo-num,
.fo-founders.is-in .fo-num { opacity: 1; transform: none; transition-delay: .24s; }

/* parallax + hover zoom inside the chapter frame.
   The transform is split across two custom properties so the JS parallax
   (--py, instant) and the hover zoom (--ps, eased) never overwrite each other. */
@property --ps { syntax: "<number>"; inherits: false; initial-value: 1.12; }
@property --py { syntax: "<length>"; inherits: false; initial-value: 0px; }

.fo-chapter-media {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 26px 50px -22px rgba(14,39,72,0.4);
  cursor: pointer;
}
.fo-chapter-media img {
  border-radius: 0;
  box-shadow: none;
  --ps: 1.12;
  --py: 0px;
  transform: translate3d(0, var(--py), 0) scale(var(--ps));
  transition: --ps .55s cubic-bezier(.22,.61,.36,1);
}
.fo-chapter-media:hover { box-shadow: 0 34px 62px -20px rgba(14,39,72,0.52); }
.fo-chapter-media:hover img { --ps: 1.2; }

/* Founders: head slides in from the right while the cards stagger up + pop */
.fo-founders-head {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .85s ease, transform .85s cubic-bezier(.22,.61,.36,1);
}
.fo-founders.is-in .fo-founders-head { opacity: 1; transform: none; transition-delay: .1s; }
.founder-card { transform: translateY(24px) scale(0.96); }
.fo-founders.is-in .founder-card { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fo-hero-copy > *,
  .fo-chapter-media,
  .fo-chapter-text,
  .fo-num,
  .fo-founders-head {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .fo-chapter-media img { transform: none; }
}

/* ======================================================
   FIRM OVERVIEW — compact history strip
   Three equal columns (image[s] on top, text below) that replace the
   full-width alternating chapters. Staggered fade-up + hover zoom; the
   founders ride column 01 as a small trio. Stacks to 1-up on mobile.
   ====================================================== */
/* Firm history — vertical list of rows: paragraph on the left, photo on the
   right (photos sit directly on the white page, no card). */
.fo-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 6vw, 84px);
}
.fo-step {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;   /* text | photo (photo the smaller column) */
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
/* zigzag: flip the even row so the photo sits left, still the smaller column */
.fo-step:nth-child(even) {
  grid-template-columns: 0.85fr 1.15fr;   /* photo | text */
}
.fo-step:nth-child(even) .fo-step-media { grid-column: 1; }
.fo-step:nth-child(even) .fo-step-body  { grid-column: 2; }
.fo-step-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 24px 50px -26px rgba(14,39,72,0.42);
  margin: 0;
}
.fo-step-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(.22,.61,.36,1);
}
.fo-step:hover .fo-step-media img { transform: scale(1.04); }
/* group photos: bias the crop upward so faces stay in frame */
.fo-step-media--focus-top img { object-position: center 15%; }

.fo-step-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(23px, 2.1vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--rust);
  margin: 0 0 var(--s-4);
}
.fo-step-body p {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: 1.7;
  color: var(--fog-180);
  margin: 0;
}
/* staggered fade-up — generic [data-reveal] supplies the base motion */
.fo-step[data-reveal] { transition-delay: calc(var(--i, 0) * 0.08s); }

/* stack the row on narrow screens (photo below the text) */
@media (max-width: 760px) {
  .fo-step,
  .fo-step:nth-child(even) { grid-template-columns: 1fr; gap: var(--s-5); }
  .fo-step:nth-child(even) .fo-step-media,
  .fo-step:nth-child(even) .fo-step-body { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .fo-step-media img { transition: none; }
}

/* Firm history — text column (left) + one auto-rotating photo gallery (right).
   Replaces the .fo-step rows above (those rules are now unused). */
.fo-story-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;   /* text | photo (photo a touch narrower) */
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.fo-story-text {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 34px);
}
.fo-story-text p {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: 1.7;
  color: var(--main-blue);
  text-indent: 1.6em;
  margin: 0;
}
.fo-gallery { margin: 0; }
.fo-gallery-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 24px 50px -26px rgba(14,39,72,0.42);
}
.fo-gallery-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.fo-gallery-img.is-active { opacity: 1; }
/* group photos: bias the crop upward so faces stay in frame */
.fo-gallery-img--focus-top { object-position: center 15%; }
.fo-gallery-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: var(--s-4);
}
.fo-gallery-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(14,39,72,0.22);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.fo-gallery-dot:hover { background: rgba(14,39,72,0.42); }
.fo-gallery-dot.is-active { background: var(--rust); transform: scale(1.15); }

@media (max-width: 760px) {
  .fo-story-grid { grid-template-columns: 1fr; gap: var(--s-5); }
}
@media (prefers-reduced-motion: reduce) {
  .fo-gallery-img { transition: none; }
}

/* ======================================================
   FIRM OVERVIEW — cloud-video mission band
   Full-bleed clip (GG bridge in fog) under "By the numbers"; the mission
   statement sits over the lower fog and rises in as the band scrolls into
   view. Clip = gg-bridge-clouds.mp4 — stabilized (ffmpeg vidstab) + scaled to
   1080p + compressed from the 242MB 4K master (gg bridge clouds.mov, kept
   unreferenced); poster = gg-bridge-clouds-poster.jpg.
   ====================================================== */
.cloud-mission {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 746px;
  background: var(--main-blue);
}
.cloud-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* pin the crop to the top so the bridge towers stay in frame; the bottom is
     cropped instead, which is fine — that's where the gradient + mission sit */
  object-position: center top;
  display: block;
  z-index: 0;
}
/* gradient wash: clear at the top so the bridge + fog read on their own, then
   deepening to brand navy across the lower third where the mission sits — gives
   the white type a deliberate landing zone instead of floating over the whole clip */
.cloud-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(14, 39, 72, 0.88) 0%,
    rgba(14, 39, 72, 0.62) 22%,
    rgba(14, 39, 72, 0.18) 50%,
    rgba(14, 39, 72, 0) 76%);
  z-index: 1;
  pointer-events: none;
}
.cloud-text {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: 78px var(--s-5);
  text-align: center;
}
.cloud-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rust-light);
  margin: 0 0 var(--s-4);
  text-shadow: 0 1px 2px rgba(14,39,72,0.45);
}
.cloud-line {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  margin: 0;
  color: #fff;   /* override the global p slate colour */
  text-shadow: 0 1px 1.1px rgba(14,39,72,0.26), 0 2px 1px rgba(14,39,72,0.19);
}
.cloud-line em { font-style: italic; color: var(--rust-light); }
.cloud-line + .cloud-line { margin-top: 10px; }
/* the mission rises + fades in as the band scrolls into view */
.cloud-mission .cloud-eyebrow,
.cloud-mission .cloud-line {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.22,.61,.36,1);
}
.cloud-mission.is-revealed .cloud-eyebrow { opacity: 1; transform: none; transition-delay: 0.05s; }
.cloud-mission.is-revealed .cloud-line:nth-of-type(1) { opacity: 1; transform: none; transition-delay: 0.18s; }
.cloud-mission.is-revealed .cloud-line:nth-of-type(2) { opacity: 1; transform: none; transition-delay: 0.34s; }
/* shorter + tighter on small screens */
@media (max-width: 760px) {
  .cloud-mission { min-height: 520px; }
  .cloud-text { padding: 52px var(--s-5); }
}
@media (prefers-reduced-motion: reduce) {
  .cloud-mission .cloud-eyebrow,
  .cloud-mission .cloud-line { opacity: 1; transform: none; transition: none; }
}

/* Mission — centred statement sitting above "what sets us apart" in the same
   section: blue eyebrow heading, fully rust statement */
.fo-mission { text-align: center; max-width: var(--container-narrow); margin: 0 auto var(--s-6); }
.fo-mission .eyebrow-center { margin: 0 0 var(--s-5); color: var(--main-blue); }
.fo-mission .eyebrow-center::before,
.fo-mission .eyebrow-center::after { background: var(--main-blue); }
.fo-mission .statement {
  color: var(--rust);
  font-style: italic;
  font-size: clamp(21px, 2.3vw, 31px);
  max-width: 30ch;
  margin: 0 auto var(--s-4);
}
.fo-mission-sub {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fog-180);
  max-width: 52ch;
  margin: 0 auto;
}

/* ==================== Client Experience — reference-style sections (A/B/C) ==================== */
/* Shared visual language: lettered label + big serif headline + sub-lede,
   ghost-numbered bordered panels (click-to-reveal body), tinted callout band. */

.ref-section {
  background: var(--fog-00);                              /* white page */
  padding-top: 4.5rem;                                   /* tighter, purposeful rhythm */
  padding-bottom: 4.5rem;
}
.ref-section .container { max-width: var(--container-wide); }
/* all sections are white now — keep .tint as a no-op so the section rhythm comes
   from the standard full-width bottom borders rather than a fill */
.ref-section.tint { background: var(--fog-00); }

.ref-head { margin-bottom: 2.4rem; }
.ref-label {
  display: block;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rust);
  margin-bottom: .9rem;
}
.ref-headline {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  color: var(--main-blue);
  margin: 0 0 .7rem;
}
.ref-headline em { font-style: italic; color: var(--rust); font-weight: 400; }
.ref-lede {
  max-width: 64ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
}
.ref-lede em { font-style: italic; color: var(--rust); }
.ref-lede a {
  color: var(--rust);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.ref-lede a::after {
  content: "\2192";          /* → */
  display: inline-block;
  margin-left: .3em;
  transition: transform .25s ease;
}
.ref-lede a:hover { color: var(--rust-dark); }
.ref-lede a:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .ref-lede a::after { transition: none; }
}

/* panel grid — 2-up by default; modifier for 2x2 */
.ref-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}
.ref-grid--four { grid-template-columns: repeat(2, 1fr); }

/* two equal cards side by side */
.ref-grid--joined {
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 1.4rem;
}

.ref-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  padding: 2rem 2rem 1.8rem;
  background: var(--main-blue);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  color: var(--fog-00);
  box-shadow: 0 1px 2px rgba(14, 39, 72, .04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ref-panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(14, 39, 72, .28);
  border-color: rgba(255, 255, 255, 0.30);
}
.ref-panel:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

/* ghost number + rust rule header row */
.ref-panel-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-bottom: .8rem;
}
/* always-visible one-line teaser so collapsed cards don't read as empty */
.ref-panel-teaser {
  font-family: var(--font-sans);
  font-size: .94rem;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0 0 1.1rem;
  max-width: 44ch;
}
.ref-num {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 600;
  color: var(--fog-50);
  flex: none;
}
.ref-panel-headings { display: flex; flex-direction: column; gap: .35rem; }
.ref-panel-eyebrow {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rust);
}
.ref-panel-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  line-height: 1.15;
  font-weight: 600;
  color: var(--main-blue);
}

.ref-panel-cue {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fog-180);
  transition: color .25s ease;
}
.ref-panel:hover .ref-panel-cue,
.ref-panel[aria-expanded="true"] .ref-panel-cue { color: var(--rust); }
.ref-cue-label::before { content: "Read more"; }
.ref-panel[aria-expanded="true"] .ref-cue-label::before { content: "Read less"; }
.ref-plus {
  display: inline-block;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--rust);
  transition: transform .3s ease;
}
.ref-panel[aria-expanded="true"] .ref-plus { transform: rotate(90deg); }

/* collapsible body — grid-rows animation */
.ref-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
  width: 100%;
}
.ref-panel[aria-expanded="true"] .ref-body { grid-template-rows: 1fr; }
.ref-body-inner {
  overflow: hidden;
  display: block;
  color: var(--fg-2);
  line-height: 1.6;
  opacity: 0;
  transition: opacity .3s ease .05s;
}
.ref-panel[aria-expanded="true"] .ref-body-inner {
  opacity: 1;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--border);
}

/* expanded card stays white; a deeper shadow signals the open state */
.ref-panel[aria-expanded="true"] {
  box-shadow: 0 16px 38px rgba(14, 39, 72, .12);
  border-color: var(--border-strong);
}
.ref-body-link {
  display: inline-block;
  margin-top: .8rem;
  font-weight: 600;
  color: var(--rust);
}
.ref-body-link .arrow { transition: transform .2s ease; display: inline-block; }
.ref-body-link:hover .arrow { transform: translateX(3px); }

/* tinted callout band with rust left border */
.ref-callout {
  margin-top: 1.8rem;
  padding: 1.1rem 1.4rem;
  background: var(--fog-10);
  border-left: 3px solid var(--rust);
  border-radius: 0 8px 8px 0;
  color: var(--fg-2);
  font-size: .98rem;
  line-height: 1.55;
}
.ref-callout a { color: var(--rust); font-weight: 600; }
.ref-callout em { font-style: italic; color: var(--rust); }
/* motto — centered pull-quote, opens section A with breathing room below */
.ref-motto {
  margin: 0;
  text-align: left;
}
.ref-motto-ey {
  display: block;
  font-family: var(--font-sans);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rust);
  margin-bottom: 1.5rem;
}
.ref-motto-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  color: var(--main-blue);
  margin: 0;
}
.ref-motto-quote em { font-style: italic; color: var(--rust); }
.ref-motto::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  background: var(--rust);
  margin: 1.8rem 0 0;
}
/* gentle stagger: the second card fades up a beat behind the first */
.ref-grid--joined .ref-panel:nth-child(2) { transition-delay: .12s; }

/* timeline (section B): white ref-section */
.process-flow.ref-section { background: var(--fog-00); }
.process-flow.ref-section .pf-steps { margin-top: .5rem; }
.process-flow.ref-section .pf-steps li::before { background: var(--fog-00); }

/* ---- horizontal progress track (section B) ---- */
.htl { margin-top: 2.4rem; }
.htl-track { position: relative; }

/* marker geometry shared by the line position + nodes */
.htl { --htl-marker: 42px; }          /* circle diameter */

/* base line + animated progress fill, centred on the marker row */
.htl-line {
  position: absolute;
  top: calc(var(--htl-marker) / 2 - 1px);
  left: 12.5%;                          /* first marker centre (1 / (n*2)) */
  right: 12.5%;                         /* last marker centre */
  height: 2px;
  background: var(--fog-50);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s var(--ease, ease);
}
.htl.is-in .htl-line { transform: scaleX(1); }
.htl-line-fill {
  display: block;
  height: 100%;
  width: calc(var(--htl-progress, 0) * 100%);
  background: var(--rust);
  transition: width .45s var(--ease, ease);
}
/* arrowhead just past the right end of the line */
.htl-arrow {
  position: absolute;
  top: calc(var(--htl-marker) / 2 - 6px);
  right: calc(12.5% - 12px);
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 11px solid var(--fog-50);
  opacity: 0;
  transition: opacity .4s ease .6s;
}
.htl.is-in .htl-arrow { opacity: 1; }

.htl-nodes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  position: relative;
}
.htl-nodes > li { flex: 1 1 0; min-width: 0; }
.htl-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: 0 .5rem;
  background: none;
  border: 0;
  font: inherit;
  text-align: center;
  color: inherit;
  cursor: pointer;
}
.htl-marker {
  position: relative;
  z-index: 1;                           /* mask the line behind the circle */
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--htl-marker);
  height: var(--htl-marker);
  border-radius: 50%;
  background: var(--fog-00);
  border: 2px solid var(--rust);
  transition: background .3s ease, border-color .3s ease, transform .25s ease, box-shadow .25s ease;
}
.htl-mnum {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .85rem;
  color: var(--rust);
  transition: color .3s ease;
}
.htl-label {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.18;
  color: var(--main-blue);
  transition: color .25s ease;
}
.htl-node:hover .htl-marker { transform: scale(1.08); box-shadow: 0 6px 16px rgba(14, 39, 72, .14); }
.htl-node:hover .htl-label { color: var(--rust); }
.htl-node:focus-visible .htl-marker { outline: 2px solid var(--rust); outline-offset: 3px; }

/* completed steps (before the active one) fill rust */
.htl-node.is-complete .htl-marker { background: var(--rust); border-color: var(--rust); }
.htl-node.is-complete .htl-mnum { color: var(--fog-00); }
/* the active step fills blue */
.htl-node.is-active .htl-marker {
  background: var(--main-blue);
  border-color: var(--main-blue);
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(14, 39, 72, .22);
}
.htl-node.is-active .htl-mnum { color: var(--fog-00); }
.htl-node.is-active .htl-label { color: var(--rust); }
@media (prefers-reduced-motion: reduce) {
  .htl-line { transform: scaleX(1); transition: none; }
  .htl-line-fill { transition: none; }
  .htl-arrow { opacity: 1; transition: none; }
}

/* supporting text appears as a refined block-quote card */
.htl-panels { margin-top: 4rem; }
.htl-quote {
  display: none;
  position: relative;
  margin: 0 auto;
  max-width: 640px;
  padding: 1.6rem 1.8rem 1.7rem;
  background: var(--main-blue);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(14, 39, 72, .05), 0 22px 48px rgba(14, 39, 72, .26);
}
/* slim inset rust accent down the left edge */
.htl-quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 4px;
  background: var(--rust);
  border-radius: 0 4px 4px 0;
}
.htl-quote.is-active { display: block; animation: htlQuoteIn .35s var(--ease, ease) both; }
@keyframes htlQuoteIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* header: rust number chip (echoes the timeline markers) + title */
.htl-quote-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-bottom: 1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
}
.htl-quote-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--rust);
  color: var(--fog-00);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .02em;
}
.htl-quote-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.12;
  color: var(--main-blue);
}
.htl-quote-text {
  display: block;
  max-width: 64ch;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--fg-2);
}
.htl-quote .ref-body-link {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 600;
  color: var(--rust);
}
.htl-quote-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.htl-quote-list li { margin-bottom: .6rem; }
.htl-quote-list li:last-child { margin-bottom: 0; }
.htl-quote .ref-body-link .arrow { display: inline-block; transition: transform .2s ease; }
.htl-quote .ref-body-link:hover .arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .htl-quote.is-active { animation: none; }
}
@media (max-width: 620px) {
  .htl { --htl-marker: 36px; }
  .htl-label { font-size: .82rem; }
  .htl-mnum { font-size: .78rem; }
  .htl-node { padding: 0 .3rem; gap: .5rem; }
}

/* ===== Client Experience cards on dark blue — flip the inner text to light ===== */
.ref-panel-teaser { color: rgba(255, 255, 255, 0.80); }
.ref-num { color: rgba(255, 255, 255, 0.22); }
.ref-panel-eyebrow { color: var(--rust-light); }
.ref-panel-title { color: var(--fog-00); }
.ref-panel-cue { color: rgba(255, 255, 255, 0.62); }
.ref-panel:hover .ref-panel-cue,
.ref-panel[aria-expanded="true"] .ref-panel-cue { color: var(--rust-light); }
.ref-plus { color: var(--rust-light); }
.ref-body-inner { color: rgba(255, 255, 255, 0.82); }
.ref-panel[aria-expanded="true"] .ref-body-inner { border-top-color: rgba(255, 255, 255, 0.16); }
.ref-panel[aria-expanded="true"] { border-color: rgba(255, 255, 255, 0.30); box-shadow: 0 16px 38px rgba(14, 39, 72, .30); }
.ref-body-link { color: var(--rust-light); }
.htl-quote-head { border-bottom-color: rgba(255, 255, 255, 0.16); }
.htl-quote-title { color: var(--fog-00); }
.htl-quote-text { color: rgba(255, 255, 255, 0.82); }
.htl-quote-list { color: rgba(255, 255, 255, 0.82); }
.htl-quote .ref-body-link { color: var(--rust-light); }

/* ---- cross-industry chip grid (section C) ---- */
.ind-block { margin-top: 3.6rem; }
.ind-eyebrow {
  margin: 0 auto 1.3rem;
  max-width: none;
  text-align: center;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rust);
}
.ind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: .9rem;
  max-width: 920px;
  margin-inline: auto;
}
.ind-grid[data-reveal] { transform: none; }   /* children carry the movement */
.ind-chip {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .8rem .95rem;
  background: var(--fog-00);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(14, 39, 72, .04);
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease,
              transform .55s cubic-bezier(.22,.61,.36,1),
              box-shadow .2s ease,
              border-color .2s ease;
}
.ind-grid.is-in .ind-chip { opacity: 1; transform: none; }
.ind-grid.is-in .ind-chip:nth-child(1)  { transition-delay: .03s; }
.ind-grid.is-in .ind-chip:nth-child(2)  { transition-delay: .06s; }
.ind-grid.is-in .ind-chip:nth-child(3)  { transition-delay: .09s; }
.ind-grid.is-in .ind-chip:nth-child(4)  { transition-delay: .12s; }
.ind-grid.is-in .ind-chip:nth-child(5)  { transition-delay: .15s; }
.ind-grid.is-in .ind-chip:nth-child(6)  { transition-delay: .18s; }
.ind-grid.is-in .ind-chip:nth-child(7)  { transition-delay: .21s; }
.ind-grid.is-in .ind-chip:nth-child(8)  { transition-delay: .24s; }
.ind-grid.is-in .ind-chip:nth-child(9)  { transition-delay: .27s; }
.ind-grid.is-in .ind-chip:nth-child(10) { transition-delay: .30s; }
.ind-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(14, 39, 72, .09);
  border-color: var(--border-strong);
}
.ind-ic {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: var(--rust);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ind-name {
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--main-blue);
}
/* "and more →" — plain link (no bubble), sits in the open grid cell below the
   Entertainment chip, centered within that cell. Arrow trails the text. */
.ind-more {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  align-self: center;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--rust);
  text-decoration: none;
}
.ind-more .arrow { display: inline-block; margin-left: .3rem; transition: transform .2s ease; }
.ind-more:hover .arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .ind-chip { opacity: 1; transform: none; transition: box-shadow .2s ease, border-color .2s ease; }
}


@media (max-width: 760px) {
  .ref-grid, .ref-grid--four, .ref-grid--joined { grid-template-columns: 1fr; }
  .ref-join { padding: .2rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ref-panel, .ref-body, .ref-body-inner, .ref-plus { transition: none; }
}

/* ============================================================
   Firm Overview — colored cards on a white page (body.fo-cards).
   The hero and the "By the numbers" dark band stay full-bleed;
   the story, values and CTA sections become rounded brand-colored
   cards with white gutters between them.
   ============================================================ */
body.fo-cards .fo-story,
body.fo-cards .holdto-section,
body.fo-cards .cta-band.cta-band--form {
  background: transparent;
  border: 0;
  padding: clamp(48px, 6vw, 86px) clamp(16px, 4vw, 56px);
}
body.fo-cards .cta-band.cta-band--form { padding-bottom: clamp(56px, 7vw, 100px); }
body.fo-cards .cta-band.cta-band--form::before { display: none; } /* drop the section top tick */
/* hairline divider between the values section and the closing CTA */
body.fo-cards .holdto-section { border-bottom: 1px solid var(--border); }

/* cards removed — content (text + photos) sits directly on the white background */
body.fo-cards .fo-card {
  max-width: var(--container);
  margin: 0 auto;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
}
/* keep the CTA form tidy where the rust card used to be */
body.fo-cards .fo-card--rust .modal { max-width: 600px; margin: 0 auto; }

@media (max-width: 600px) {
  body.fo-cards .fo-story,
  body.fo-cards .holdto-section,
  body.fo-cards .cta-band.cta-band--form { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   Home landing — colored cards on a white page (body.home-cards).
   The video hero and the full-bleed investment-approach photo stay
   full-bleed; "By the numbers" keeps its strip format. who-we-serve,
   About and Client Experience become rounded brand-colored cards.
   ============================================================ */
body.home-cards #about,
body.home-cards #client-experience,
body.home-cards #investment-approach {
  background: transparent;
  border: 0;
  /* vertical padding = half the gap between adjacent cards (adjacent paddings stack) */
  padding: clamp(24px, 2.8vw, 44px) clamp(16px, 4vw, 56px);
}
body.home-cards .hc-card {
  max-width: var(--container);
  margin: 0 auto;
  border-radius: 28px;
  padding: clamp(32px, 4.5vw, 76px);
  /* deeper resting shadow for more lift off the white page */
  box-shadow: 0 18px 44px -20px rgba(14,39,72,0.40), 0 6px 16px -10px rgba(14,39,72,0.18);
  cursor: pointer;
  /* hover transitions (transform also drives the [data-reveal] entrance) */
  transition: opacity .7s ease, transform .5s var(--ease-out-expo), box-shadow .45s var(--ease);
}
body.home-cards .hc-card--tint { background: var(--fog-20); }
body.home-cards .hc-card--navy { background: var(--main-blue); color: var(--fog-00); }
body.home-cards .hc-card--rust { background: #F5EBE4; }

/* hover: lift the whole card with a deeper shadow (cards are clickable) */
body.home-cards .hc-card:hover,
body.home-cards #investment-approach .bleed-inner:hover {
  transform: translateY(-8px);
  box-shadow: 0 36px 72px -28px rgba(14,39,72,0.55), 0 14px 30px -16px rgba(14,39,72,0.24);
}
@media (prefers-reduced-motion: reduce) {
  body.home-cards .hc-card:hover,
  body.home-cards #investment-approach .bleed-inner:hover { transform: none; }
}

/* navy card (About) — eyebrow + body text recolored for the dark surface;
   the statement / section-index / anim-link use their existing --light variants */
body.home-cards .hc-card--navy .eyebrow { color: var(--rust-light); }
body.home-cards .hc-card--navy .eyebrow::before { background: var(--rust-light); }
body.home-cards .hc-card--navy .editorial-text p { color: rgba(255,255,255,0.80); }

/* About (card 01) is a light featured card */
body.home-cards .hc-card--light { background: var(--fog-00); }

/* Cards 01 + 02 share the framed-photo treatment: a rust square offset behind
   the photo + dark-blue outlined corner brackets ON THE PHOTO (top-left +
   bottom-right). Columns are top-aligned and the photo frame fills its column
   so text + photo sit symmetrically in relation to the card borders. */
body.home-cards #about .editorial-grid,
body.home-cards #client-experience .editorial-grid,
body.home-cards #investment-approach .editorial-grid { align-items: start; }
/* match the photo top to the text content top (editorial-text has padding-top: s-7) */
body.home-cards .framed-media { position: relative; margin-top: var(--s-7); }
body.home-cards .framed-media img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;   /* sharp photo, pairing with the bracket treatment */
  box-shadow: 0 18px 40px -24px rgba(14, 39, 72, 0.40);
}
body.home-cards .framed-square {
  position: absolute;
  z-index: 1;
  top: -26px; right: -26px;
  width: 60%; height: 62%;
  background: var(--rust);
}
body.home-cards .framed-corner {
  position: absolute;
  z-index: 3;
  width: clamp(34px, 3.6vw, 52px);
  height: clamp(34px, 3.6vw, 52px);
  border-color: var(--main-blue);
  pointer-events: none;
}
body.home-cards .framed-corner--tl { top: -10px; left: -10px; border-top: 2px solid; border-left: 2px solid; }
body.home-cards .framed-corner--br { bottom: -10px; right: -10px; border-bottom: 2px solid; border-right: 2px solid; }
body.home-cards .framed-corner--tr { top: -10px; right: -10px; border-top: 2px solid; border-right: 2px solid; }
body.home-cards .framed-corner--bl { bottom: -10px; left: -10px; border-bottom: 2px solid; border-left: 2px solid; }
/* card 02 sits on the rust-tint surface — dark-rust corners + a blue square for
   contrast. Photo is media-left, so the square peeks BOTTOM-LEFT (outward, away
   from the copy) — it pairs with the top-left bracket to frame the photo's outer
   edge rather than crowding the text the way a top-right square would. */
body.home-cards #client-experience .framed-corner { border-color: var(--rust-dark); }
body.home-cards #client-experience .framed-square {
  background: var(--main-blue);
  top: auto; right: auto;
  bottom: -26px; left: -26px;
}
/* lift the photo + square to the top of the card so they don't sit low / the
   square doesn't hang past the card floor (the text column is taller here) */
body.home-cards #client-experience .framed-media { margin-top: 0; }

@media (max-width: 600px) {
  body.home-cards #about,
  body.home-cards #client-experience,
  body.home-cards #investment-approach { padding-left: 12px; padding-right: 12px; }
  body.home-cards .hc-card,
  body.home-cards #investment-approach .bleed-inner { border-radius: 20px; }
  body.home-cards #investment-approach .bleed-inner { padding: clamp(56px, 16vw, 96px) clamp(24px, 6vw, 40px); }
}

/* Investment approach (03) — a white editorial card like 01/02 (text + framed
   photo), but with TWO offset squares around the photo instead of one: rust at
   the top-left, blue at the bottom-right. */
body.home-cards #investment-approach { overflow: visible; padding-bottom: clamp(72px, 9vw, 132px); }
/* skyline kept slightly desaturated to tame the warm golden-hour tones */
body.home-cards #investment-approach .framed-media img { filter: saturate(0.7); }
/* shrink the photo so it reads smaller in relation to the squares, and keep the
   whole composition compact (centered in its column) */
body.home-cards #investment-approach .framed-media { max-width: 66%; margin-left: auto; margin-right: auto; }
/* reposition/recolor + resize the two squares around the photo (override the
   single top-right .framed-square): small squares set farther out from the photo */
body.home-cards #investment-approach .framed-square {
  width: clamp(56px, 7vw, 92px); height: clamp(56px, 7vw, 92px);
}
body.home-cards #investment-approach .framed-square--tl { top: -46px; left: -46px; right: auto; bottom: auto; background: var(--rust); }
body.home-cards #investment-approach .framed-square--br { top: auto; left: auto; right: -46px; bottom: -46px; background: var(--main-blue); }
/* crop-mark brackets on the two free corners (tr + bl); colours cross the
   diagonals so each bracket pairs with the opposite-corner square */
body.home-cards #investment-approach .framed-corner--tr { border-color: var(--main-blue); }
body.home-cards #investment-approach .framed-corner--bl { border-color: var(--rust); }

/* "Who we serve" — a white section: title on the LEFT, four wide navy cards
   STACKED on the right (cards sized a touch smaller than the title column).
   SHARP corners + a matte "inset letterpress" depth: a fine top highlight and
   a soft bottom-inner shadow press the surface in, no shine. Fill lightens to
   a brighter blue on hover. Left-aligned header; entrance stagger reuses the
   existing [data-wws-reveal] observer. */
body.home-cards .who-we-serve { background: transparent; border-bottom: 0; padding: clamp(32px, 4vw, 56px) 0 clamp(32px, 4vw, 56px); }
/* two-column layout: header left, stacked cards right. Title top-aligns with
   the first card (align-items:start); tighter gap between the two columns. */
body.home-cards .wws-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.5vw, 40px);
  align-items: start;
  /* narrower than the container + centered, so both columns pull in from the
     page edges and sit more toward the middle */
  max-width: 1040px;
  margin-inline: auto;
}
body.home-cards .wws-head { text-align: left; max-width: none; margin: 0; }
/* width fits "Categories are never" on the first line (hard break after it) */
body.home-cards .wws-head h2 { font-size: clamp(28px, 3vw, 44px); max-width: 22ch; margin: 0 0 var(--s-4); }
/* caption stays on a single line */
body.home-cards .wws-caption { margin: 0; max-width: none; white-space: nowrap; }

/* the right column: a single stacked column (overrides the 4-up grid) */
body.home-cards .wws-cards {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: var(--s-4);
  align-items: stretch;
  max-width: none;
  margin: 0;
}
body.home-cards .wws-cards .service-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--main-blue);                  /* flat matte navy */
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0;                              /* SHARP corners */
  /* inset letterpress: top inner highlight + bottom inner shadow press it in,
     plus a faint contact shadow grounding it on the white page */
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.10),
              inset 0 -10px 24px rgba(0, 0, 0, 0.30),
              0 10px 24px -16px rgba(14, 39, 72, 0.50);
  /* shorter (smaller) but wider — less vertical padding, cards fill the column */
  padding: clamp(12px, 1.4vw, 18px) clamp(20px, 2.2vw, 30px);
  /* include opacity/transform so the scroll-in fade-up survives (and the hover) */
  transition: opacity .6s var(--ease), transform .55s var(--ease-out-expo),
              background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
body.home-cards .wws-cards .service-card h3 {
  display: block;
  min-height: 0;
  margin-bottom: 6px;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.2;
  color: #fff;
}
body.home-cards .wws-cards .service-card p {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}
/* a more pronounced fade-up entrance (shows while scrolling); [data-wws-reveal]
   observer in ipc-behaviors.js adds .is-in per card with the staggered delays already in CSS */
body.home-cards .wws-cards [data-wws-reveal] { opacity: 0; transform: translateY(28px); }
body.home-cards .wws-cards [data-wws-reveal].is-in { opacity: 1; transform: none; }
body.home-cards .wws-cards .service-card:hover {
  transform: translateY(-4px);
  background: var(--main-blue-500);             /* lighten to a brighter blue */
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12),
              inset 0 -10px 24px rgba(0, 0, 0, 0.30),
              0 18px 34px -16px rgba(14, 39, 72, 0.55);
  transition-delay: 0s;   /* don't carry the reveal stagger delay into hover */
}
body.home-cards .wws-cards .service-card:hover h3,
body.home-cards .wws-cards .service-card:hover p { color: #fff; }
/* stack the two columns on narrow viewports */
@media (max-width: 900px) {
  body.home-cards .wws-layout { grid-template-columns: 1fr; gap: var(--s-6); }
  body.home-cards .wws-head h2 { max-width: 18ch; }
  body.home-cards .wws-caption { white-space: normal; }   /* allow wrap on narrow screens */
}
@media (prefers-reduced-motion: reduce) {
  body.home-cards .wws-cards .service-card:hover { transform: none; }
}

/* ======================================================================
   Team marquee — full-bleed navy band under "Who we serve": auto-scrolling
   headshots (pause on hover) + a "Meet the team" CTA. Each headshot links to
   the team page deep-linked to that member's group tab. Filled by the
   [data-tm] module in ipc-behaviors.js. Reduced motion → manually scrollable, no loop.
   ====================================================================== */
.team-marquee {
  position: relative;
  background: var(--main-blue);
  padding: clamp(18px, 2vw, 30px) 0;   /* tight band — photos only */
  /* breathing room separating the navy band from the sections above + below */
  margin: clamp(44px, 6vw, 96px) 0;
  overflow: hidden;
}
.eyebrow--light { color: var(--rust-light); }
.eyebrow--light::before { background: var(--rust-light) !important; }
.team-marquee .tm-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.team-marquee .tm-track {
  display: flex;
  gap: clamp(28px, 3vw, 52px);   /* more space between photos */
  width: max-content;
  padding: var(--s-2) 0;
  animation: tm-scroll var(--tm-dur, 90s) linear infinite;
}
.team-marquee:hover .tm-track { animation-play-state: paused; }
@keyframes tm-scroll { to { transform: translateX(-50%); } }

.tm-card {
  flex: 0 0 auto;
  width: 168px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  color: #fff;
}
.tm-card .photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  overflow: hidden;
  background: var(--main-blue-700);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tm-card .photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .5s var(--ease); }
.tm-card .photo .mono {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 34px;
  color: rgba(255,255,255,0.85); background: var(--main-blue-700);
}
.tm-card:hover .photo { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.35); }
.tm-card:hover .photo img { transform: scale(1.05); }

@media (max-width: 600px) {
  .tm-card { width: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .team-marquee .tm-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .team-marquee .tm-track { animation: none; }
  .tm-card:hover .photo { transform: none; }
  .tm-card:hover .photo img { transform: none; }
}

/* ===== Print (IPC shell) ===== */
@media print {
  .audience-bar, .site-nav, .skip-link, #mm-cookie-notice { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}