/* =========================================================================
   BEO Investments LLC — design system
   Palette pulled from the live site: navy accent #253550, warm cream #E0E0DB,
   white, and near-black dark sections.  Cormorant Garamond + Archivo.
   ========================================================================= */

:root {
  /* live-site palette */
  --paper:      #FFFFFF;   /* white sections */
  --cream:      #ECEAE2;   /* warm light accent (lightAccent) */
  --cream-deep: #E2E1D8;
  --ink:        #15171B;   /* near-black dark sections + text */
  --ink-2:      #1C2029;
  --navy:       #253550;   /* brand accent (exact token) */
  --navy-hi:    #34507A;   /* lifted navy for links / kickers on light */
  --navy-soft:  rgba(52, 80, 122, 0.10);
  --muted:      rgba(21, 23, 27, 0.64);
  --faint:      rgba(21, 23, 27, 0.44);
  --line:       rgba(21, 23, 27, 0.12);
  --line-soft:  rgba(21, 23, 27, 0.07);
  --on-dark:    #ECEAE2;
  --on-dark-dim:rgba(236, 234, 226, 0.66);
  --on-dark-faint:rgba(236, 234, 226, 0.40);
  --line-dark:  rgba(236, 234, 226, 0.14);
  --steel:      #8AA0BC;   /* light blue for dark sections */

  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:    'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;

  --maxw: 1240px;
  --gutter: clamp(20px, 4.5vw, 56px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 82px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.62; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--navy); color: #fff; }

/* ---------- layout (tighter rhythm — fewer empty gaps) ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: 1440px; }
.section { padding-block: clamp(54px, 7vw, 104px); }
.section--tight { padding-block: clamp(40px, 5vw, 74px); }
.bg-cream { background: var(--cream); }
.bg-white { background: var(--paper); }
.bg-dark  { background: var(--ink); color: var(--on-dark); }
.bg-navy  { background: var(--navy); color: var(--on-dark); }

/* ---------- type ---------- */
.kicker { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--navy-hi); display: inline-flex; align-items: center; gap: 13px; }
.kicker::before { content: ''; width: 28px; height: 1px; background: var(--navy-hi); }
.bg-dark .kicker, .bg-navy .kicker { color: var(--steel); }
.bg-dark .kicker::before, .bg-navy .kicker::before { background: var(--steel); }

h1, h2, h3, .display { font-family: var(--display); font-weight: 500; line-height: 1.08; letter-spacing: 0.004em; color: var(--ink); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-navy h1, .bg-navy h2, .bg-navy h3, .on-dark { color: var(--on-dark); }
.h-hero { font-size: clamp(2.1rem, 4vw, 3.5rem); font-weight: 500; line-height: 1.1; }
.h-xl   { font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1.12; }
.h-lg   { font-size: clamp(1.5rem, 2.5vw, 2.1rem); }
.h-md   { font-size: clamp(1.25rem, 1.9vw, 1.55rem); }
.serif-lead { font-family: var(--display); font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.48; font-style: italic; color: var(--muted); }
.bg-dark .serif-lead, .bg-navy .serif-lead { color: var(--on-dark-dim); }
.lead { font-size: clamp(1rem, 1.25vw, 1.12rem); color: var(--muted); line-height: 1.7; }
.body { color: var(--muted); font-size: 1.02rem; line-height: 1.78; }
.body--lg { font-size: 1.08rem; }
.bg-dark .body, .bg-navy .body { color: var(--on-dark-dim); }
em, .italic { font-style: italic; }
.navy { color: var(--navy-hi); }

.rule { height: 1px; background: var(--navy-hi); opacity: .5; transform-origin: left; }
.reveal .rule { transform: scaleX(0); transition: transform 1.1s var(--ease) .1s; }
.reveal.is-visible .rule { transform: scaleX(1); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 11px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); padding: 15px 28px; border: 1px solid var(--ink); background: transparent; position: relative; overflow: hidden; transition: color .5s var(--ease), border-color .5s var(--ease); }
.btn span { position: relative; z-index: 2; }
.btn .arw { transition: transform .5s var(--ease); }
.btn::after { content: ''; position: absolute; inset: 0; background: var(--ink); transform: translateY(101%); transition: transform .5s var(--ease); z-index: 1; }
.btn:hover { color: #fff; }
.btn:hover::after { transform: translateY(0); }
.btn:hover .arw { transform: translateX(5px); }
.btn--solid { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--solid::after { background: var(--navy-hi); }
.btn--solid:hover { color: #fff; border-color: var(--navy-hi); }
.btn--sm { padding: 11px 18px; font-size: 10.5px; }
.btn--light { color: var(--on-dark); border-color: var(--line-dark); }
.btn--light::after { background: var(--on-dark); }
.btn--light:hover { color: var(--ink); border-color: var(--on-dark); }

.text-link { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-hi); }
.text-link .ln { width: 20px; height: 1px; background: var(--navy-hi); transition: width .4s var(--ease); }
.text-link:hover .ln { width: 38px; }
.bg-dark .text-link, .bg-navy .text-link { color: var(--steel); }
.bg-dark .text-link .ln, .bg-navy .text-link .ln { background: var(--steel); }

/* ---------- header (logo only) ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); height: var(--header-h); transition: background .5s var(--ease), height .5s var(--ease), border-color .5s var(--ease); border-bottom: 1px solid transparent; }
.site-header.scrolled { background: rgba(255,255,255,0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); height: 62px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; }
.brand__logo { width: 46px; height: 46px; flex: none; transition: width .5s var(--ease), height .5s var(--ease); }
.site-header.scrolled .brand__logo { width: 38px; height: 38px; }
/* header sits over the dark hero video at the top → logo + nav light until scrolled */
.site-header:not(.scrolled) .brand__logo { filter: invert(1) brightness(1.7); }
.site-header:not(.scrolled) .nav__link { color: rgba(255,255,255,0.82); }
.site-header:not(.scrolled) .nav__link:hover { color: #fff; }
.site-header:not(.scrolled) .btn--hdr { color: #fff; border-color: rgba(255,255,255,0.5); }
.site-header:not(.scrolled) .btn--hdr::after { background: #fff; }
.site-header:not(.scrolled) .btn--hdr:hover { color: var(--ink); }
.site-header:not(.scrolled) .nav-toggle { border-color: rgba(255,255,255,0.5); }
.site-header:not(.scrolled) .nav-toggle span, .site-header:not(.scrolled) .nav-toggle span::before, .site-header:not(.scrolled) .nav-toggle span::after { background: #fff; }

.nav { display: flex; align-items: center; gap: clamp(15px, 1.8vw, 26px); }
.nav__link { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); position: relative; padding: 6px 0; transition: color .35s var(--ease); background: transparent; border: 0; cursor: pointer; }
.nav__link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after, .nav__link[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { margin-left: 4px; }

/* ---- About dropdown ---- */
.nav__group { position: relative; display: inline-flex; align-items: center; }
.nav__trigger { display: inline-flex; align-items: center; gap: 7px; }
.nav__caret { width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .3s var(--ease); margin-top: -3px; }
.nav__trigger[aria-expanded="true"] .nav__caret { transform: rotate(-135deg); margin-top: 2px; }
.nav__dropdown { position: absolute; top: calc(100% + 14px); left: -14px; min-width: 180px; background: #fff; border: 1px solid var(--line-soft); box-shadow: 0 18px 40px -16px rgba(21,23,27,0.20), 0 4px 12px rgba(21,23,27,0.06); padding: 10px 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease); z-index: 70; border-radius: 4px; }
.nav__group:hover .nav__dropdown, .nav__group:focus-within .nav__dropdown, .nav__trigger[aria-expanded="true"] + .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__sublink { display: block; font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); padding: 10px 22px; transition: background .25s var(--ease), color .25s var(--ease); }
.nav__sublink:hover { background: var(--cream); color: var(--navy); }
.site-header:not(.scrolled) .nav__dropdown { background: rgba(21,23,27,0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(255,255,255,0.08); }
.site-header:not(.scrolled) .nav__sublink { color: rgba(255,255,255,0.85); }
.site-header:not(.scrolled) .nav__sublink:hover { background: rgba(255,255,255,0.06); color: #fff; }

.nav-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--line); background: transparent; position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: .35s var(--ease); }
.nav-toggle span::before { transform: translate(-50%, -6px); }
.nav-toggle span::after { transform: translate(-50%, 5px); }
body.nav-open .nav-toggle span { background: transparent !important; }
body.nav-open .nav-toggle span::before { transform: translate(-50%, -50%) rotate(45deg); }
body.nav-open .nav-toggle span::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- hero (full-width 16:9 video) ---------- */
.hero { position: relative; width: 100%; background: var(--ink); }
.hero__media { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 92vh; min-height: 460px; overflow: hidden; }
.hero__media video, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,11,16,0.78) 0%, rgba(8,11,16,0.45) 42%, rgba(8,11,16,0.15) 100%), linear-gradient(0deg, rgba(8,11,16,0.55), transparent 45%); }
.hero__copy { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(40px, 7vw, 86px); }
.hero__copy .wrap { width: 100%; }
.hero__copy .h-hero, .hero__copy .kicker, .hero__copy .serif-lead { color: #fff; }
.hero__copy .kicker { color: var(--steel); } .hero__copy .kicker::before { background: var(--steel); }
.hero__copy .serif-lead { color: rgba(255,255,255,0.85); }
.hero__tagline { margin-top: 24px; font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--steel); display: inline-flex; align-items: center; gap: 12px; }
.hero__tagline::before { content: ''; width: 24px; height: 1px; background: var(--steel); }

/* hero entrance */
.enter { opacity: 0; transform: translateY(20px); animation: enterUp 1s var(--ease) forwards; }
@keyframes enterUp { to { opacity: 1; transform: none; } }
.d1{animation-delay:.1s}.d2{animation-delay:.24s}.d3{animation-delay:.38s}.d4{animation-delay:.52s}.d5{animation-delay:.66s}

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.d2 { transition-delay: .1s; } .reveal.d3 { transition-delay: .2s; } .reveal.d4 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .reveal, .enter { opacity: 1 !important; transform: none !important; animation: none !important; } }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 64px); }
.stat { border-left: 2px solid var(--navy-hi); padding-left: 22px; }
.bg-dark .stat, .bg-navy .stat { border-color: var(--steel); }
.stat__num { font-family: var(--display); font-size: clamp(2.6rem, 5.5vw, 4.3rem); font-weight: 500; line-height: 0.95; }
.stat__num .sym { color: var(--navy-hi); }
.bg-dark .stat__num .sym, .bg-navy .stat__num .sym { color: var(--steel); }
.stat__label { margin-top: 10px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.bg-dark .stat__label, .bg-navy .stat__label { color: var(--on-dark-dim); }

/* ---------- pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.pillar { padding: 36px clamp(18px, 2.2vw, 32px) 34px; border-bottom: 1px solid var(--line); position: relative; }
.pillar + .pillar { border-left: 1px solid var(--line); }
.pillar__n { font-family: var(--display); font-size: 15px; color: var(--navy-hi); }
.pillar h3 { margin: 16px 0 12px; }
.pillar::after { content: ''; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--navy-hi); transition: width .9s var(--ease); }
.pillar.is-visible::after { width: 54px; }

/* ---------- split / media ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4.5vw, 72px); align-items: center; }
.split--media-first .split__media { order: -1; }
.split__media { position: relative; overflow: hidden; align-self: stretch; min-height: 340px; }
.split__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.split__media:hover img { transform: scale(1.04); }
.split__media .frame { position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,0.35); pointer-events: none; z-index: 2; }

.figure { position: relative; overflow: hidden; }
.figure img { transition: transform 1.4s var(--ease); }
.figure:hover img { transform: scale(1.04); }
.figcap { font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-top: 12px; }

/* full-bleed image band with overlaid statement */
.bleed { position: relative; min-height: clamp(420px, 60vh, 620px); display: flex; align-items: center; overflow: hidden; }
.bleed__bg { position: absolute; inset: 0; z-index: 0; }
.bleed__bg img { width: 100%; height: 100%; object-fit: cover; }
.bleed__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,17,24,0.9) 0%, rgba(13,17,24,0.7) 45%, rgba(13,17,24,0.4) 100%); }
.bleed__inner { position: relative; z-index: 2; width: 100%; }
.statement { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 2.9vw, 2.5rem); line-height: 1.24; color: var(--on-dark); }
.statement .navy { color: var(--steel); font-style: italic; }

/* ---------- features ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.feature { background: var(--paper); padding: 34px 28px; transition: background .5s var(--ease); }
.bg-cream .feature { background: var(--cream); }
.feature:hover { background: var(--navy-soft); }
.feature__n { font-family: var(--display); color: var(--navy-hi); font-size: 14px; }
.feature h3 { margin: 14px 0 11px; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band__glow { position: absolute; inset: 0; background: radial-gradient(70% 130% at 50% 120%, rgba(138,160,188,0.16), transparent 70%); pointer-events: none; }

/* ---------- footer (dark anchor) ---------- */
.site-footer { background: var(--ink); color: var(--on-dark); border-top: 3px solid var(--navy); padding-block: clamp(50px, 6vw, 80px) 32px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 38px; }
.footer-col h4 { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--steel); margin-bottom: 17px; }
.footer-col a { display: block; color: var(--on-dark-dim); font-size: 14px; padding: 5px 0; transition: color .3s var(--ease); }
.footer-col a:hover { color: #fff; }
.footer-addr { font-style: normal; color: var(--on-dark-dim); font-size: 14px; line-height: 1.9; }
.footer-addr a { color: var(--steel); display: inline; padding: 0; }
.footer-logo { width: 48px; height: 48px; margin-bottom: 16px; filter: invert(1) brightness(1.7); }
.footer-bottom { margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.footer-disc { color: var(--on-dark-faint); font-size: 11.5px; line-height: 1.7; margin-top: 20px; }
.footer-disc a { color: var(--steel); display: inline; padding: 0; }
.copyright { font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-faint); }

/* ---------- interior page hero ---------- */
.page-hero { position: relative; padding-top: calc(var(--header-h) + clamp(40px, 6vw, 84px)); padding-bottom: clamp(36px, 5vw, 66px); overflow: hidden; }
.page-hero.bg-dark { background: var(--ink); }
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .26; }
.page-hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,23,27,0.6), rgba(21,23,27,0.92)); }
.page-hero__inner { position: relative; z-index: 2; }

/* ---------- interior full-bleed image hero (no text overlay) ---------- */
.page-hero-image { width: 100%; height: clamp(380px, 62vh, 620px); overflow: hidden; margin-top: var(--header-h); position: relative; background: var(--ink); }
.page-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.03); transition: transform 8s linear; }
.page-hero-image:hover img { transform: scale(1.07); }
.page-hero-image::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 100px; background: linear-gradient(180deg, transparent, #FFFFFF); pointer-events: none; }

/* ---------- big italic page title (used as H1 on interior pages) ---------- */
.page-title { font-family: var(--display); font-style: italic; font-weight: 500; color: var(--navy); font-size: clamp(2.8rem, 5.5vw, 4.8rem); line-height: 1; letter-spacing: -0.005em; margin: 0; }

/* ---------- compact disclosure-style note paragraph ---------- */
.page-note { max-width: 880px; margin: 0 auto; text-align: center; color: var(--faint); font-size: 13px; line-height: 1.75; font-family: var(--sans); }

/* ---------- page intro: balanced two-column title + lede (interior pages) ---------- */
.page-intro { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 5vw, 88px); align-items: start; }
.page-intro__head { padding-top: clamp(0px, 1vw, 12px); }
.page-intro__body { padding-top: clamp(12px, 2vw, 28px); }
.page-intro__body .body-rich { max-width: 60ch; }
@media (max-width: 860px) { .page-intro { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- principle plaque (right column for The Firm Our Approach) ---------- */
.plaque { background: #fff; border: 1px solid var(--line-soft); border-left: 3px solid var(--navy); padding: clamp(28px, 3vw, 40px); box-shadow: 0 6px 24px -12px rgba(37,53,80,0.18); }
.bg-cream .plaque { background: rgba(255,255,255,0.7); }
.plaque__kicker { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--navy-hi); margin: 0 0 18px; }
.plaque__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.plaque__list li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: baseline; }
.plaque__list .n { font-family: var(--display); font-style: italic; font-weight: 500; color: var(--navy-hi); font-size: 18px; line-height: 1; }
.plaque__list .t { font-family: var(--display); font-weight: 500; font-size: clamp(1.15rem, 1.4vw, 1.32rem); color: var(--navy); line-height: 1.25; letter-spacing: -0.003em; margin: 0 0 4px; }
.plaque__list .d { font-family: var(--sans); font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0; }

/* ---------- proper disclaimer note (small, italic-tinted, muted) ---------- */
.disclaimer-note { font-family: var(--sans); font-size: 12px; line-height: 1.7; color: var(--faint); font-style: italic; border-top: 1px solid var(--line); padding-top: clamp(16px, 2vw, 22px); margin-top: clamp(24px, 3vw, 40px); max-width: 64ch; }

/* ---------- capabilities — editorial 3-column list (numeral | title | body) ---------- */
.capabilities { list-style: none; margin: 0; padding: 0; }
.capability { display: grid; grid-template-columns: clamp(80px, 9vw, 120px) minmax(180px, 1.3fr) minmax(0, 2.4fr); gap: clamp(28px, 3.6vw, 64px); padding: clamp(38px, 4.2vw, 60px) clamp(8px, 1vw, 20px); border-top: 1px solid var(--line); align-items: start; position: relative; transition: padding .4s var(--ease), background .4s var(--ease); }
.capability:last-child { border-bottom: 1px solid var(--line); }
.capability::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--navy); transition: width .5s var(--ease); }
.capability:hover { background: rgba(21,23,27,0.015); }
.capability:hover::before { width: 2px; }
.bg-cream .capability:hover { background: rgba(255,255,255,0.35); }

.capability__n { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(3rem, 5vw, 4.6rem); color: var(--navy-hi); line-height: 0.95; margin: 0; letter-spacing: -0.012em; opacity: 0.75; }

.capability__head { padding-top: clamp(12px, 1.4vw, 22px); }
.capability__title { font-family: var(--display); font-weight: 500; font-style: normal; font-size: clamp(1.4rem, 1.9vw, 1.75rem); color: var(--navy); margin: 0 0 14px; line-height: 1.15; letter-spacing: -0.003em; }
.capability__rule { display: block; width: 36px; height: 1px; background: var(--navy-hi); opacity: 0.6; }

.capability__copy { padding-top: clamp(14px, 1.6vw, 24px); }
.capability__body { font-family: var(--display); font-weight: 400; font-size: clamp(16.5px, 1.25vw, 18.5px); line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 60ch; }
.capability__body + .capability__body { margin-top: 14px; }

.bg-cream .capability { border-top-color: rgba(21,23,27,0.12); }
.bg-cream .capability:last-child { border-bottom-color: rgba(21,23,27,0.12); }

@media (max-width: 860px) {
  .capability { grid-template-columns: 70px 1fr; gap: 14px 24px; padding-left: 0; padding-right: 0; }
  .capability__copy { grid-column: 2; padding-top: 6px; }
  .capability__head { padding-top: clamp(4px, 1vw, 12px); }
}
@media (max-width: 560px) {
  .capability { grid-template-columns: 1fr; gap: 10px; }
  .capability__head, .capability__copy { padding-top: 0; }
  .capability__copy { grid-column: 1; }
}

/* ---------- 2-column capabilities variant (for long lists, partnerships) ---------- */
.capabilities--cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1200px; margin-inline: auto; border-top: 1px solid var(--line); }
.bg-cream .capabilities--cols-2 { border-top-color: rgba(21,23,27,0.12); }
.capabilities--cols-2 .capability { display: block; padding: clamp(30px, 3.4vw, 48px) clamp(24px, 2.6vw, 38px); border-top: none; border-bottom: 1px solid var(--line); transition: background .4s var(--ease); }
.bg-cream .capabilities--cols-2 .capability { border-bottom-color: rgba(21,23,27,0.12); }
.capabilities--cols-2 .capability::before { display: none; }
.capabilities--cols-2 .capability:nth-child(odd) { border-right: 1px solid var(--line); }
.bg-cream .capabilities--cols-2 .capability:nth-child(odd) { border-right-color: rgba(21,23,27,0.12); }
.capabilities--cols-2 .capability:last-child { border-bottom: 1px solid var(--line); }
.bg-cream .capabilities--cols-2 .capability:last-child { border-bottom-color: rgba(21,23,27,0.12); }
.capabilities--cols-2 .capability:hover { background: rgba(21,23,27,0.025); transform: none; }
.bg-cream .capabilities--cols-2 .capability:hover { background: rgba(255,255,255,0.45); }

.capabilities--cols-2 .capability__n { display: block; margin: 0 0 18px; font-size: clamp(2.2rem, 3.4vw, 3rem); }
.capabilities--cols-2 .capability__head { display: block; padding-top: 0; margin-bottom: 14px; }
.capabilities--cols-2 .capability__copy { display: block; padding-top: 14px; border-top: 1px solid var(--line-soft); }

@media (max-width: 720px) {
  .capabilities--cols-2 { grid-template-columns: 1fr; }
  .capabilities--cols-2 .capability:nth-child(odd) { border-right: none; }
  .capabilities--cols-2 .capability { padding-left: 0; padding-right: 0; }
}

/* ---------- CTA band white variant (when following a cream section) ---------- */
.cta-band--white { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- subtle divider when two cream sections sit back-to-back (Partnerships) ---------- */
.cap-section { border-top: 1px solid rgba(21,23,27,0.08); }

/* ---------- SERA dark typographic hero (matches live, with sera_back bg) ---------- */
.sera-hero { position: relative; background-color: var(--ink); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--on-dark); margin-top: var(--header-h); padding: clamp(64px, 9vw, 130px) 0 clamp(56px, 8vw, 100px); overflow: hidden; min-height: clamp(380px, 56vh, 520px); display: flex; align-items: center; }
.sera-hero__overlay { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(13,17,24,0.92) 0%, rgba(13,17,24,0.78) 45%, rgba(13,17,24,0.55) 100%), radial-gradient(ellipse at top right, rgba(184,153,104,0.10), transparent 55%); pointer-events: none; }
.sera-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 44px); align-items: start; }
.sera-hero__mark { width: clamp(34px, 4vw, 48px); height: clamp(34px, 4vw, 48px); color: var(--gold); display: block; padding-top: clamp(6px, 1vw, 12px); }
.sera-hero__mark svg { width: 100%; height: 100%; }
.sera-hero__title { font-family: var(--display); font-style: italic; font-weight: 500; line-height: 1.0; color: #fff; margin: 0; letter-spacing: -0.01em; display: flex; flex-direction: column; }
.sera-hero__brand { font-size: clamp(2.8rem, 5.4vw, 4.6rem); }
.sera-hero__sub { font-size: clamp(2.4rem, 4.6vw, 4rem); color: rgba(255,255,255,0.92); }
.sera-hero__legend { list-style: none; padding: 0; margin: clamp(26px, 3vw, 40px) 0 0; display: flex; flex-direction: column; gap: clamp(4px, 0.6vw, 8px); }
.sera-hero__legend li { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 1.5vw, 1.4rem); color: rgba(255,255,255,0.85); position: relative; padding-left: 20px; }
.sera-hero__legend li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 12px; height: 1px; background: var(--gold); }
@media (max-width: 560px) { .sera-hero__inner { grid-template-columns: 1fr; gap: 20px; } .sera-hero__mark { padding-top: 0; } }

/* ---------- SERA update banner (top-of-page notice) ---------- */
.sera-banner { background: linear-gradient(180deg, rgba(184,153,104,0.10), rgba(184,153,104,0.05)); border-top: 1px solid rgba(184,153,104,0.35); border-bottom: 1px solid rgba(184,153,104,0.35); padding: 14px 0; }
.sera-banner__inner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.sera-banner__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); animation: pulse 2s var(--ease) infinite; flex: none; }
.sera-banner__text { font-family: var(--sans); font-size: 13px; color: var(--ink-2); margin: 0; letter-spacing: 0.005em; line-height: 1.55; text-align: center; }
.sera-banner__text strong { color: var(--navy); font-weight: 700; }

/* ---------- SERA product screenshots (thumbnails — designed for small display) ---------- */
.sera-shot { margin: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; align-self: center; max-width: 380px; width: 100%; margin-inline: auto; }
.sera-shot img { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0 14px 36px -18px rgba(21,23,27,0.28), 0 3px 10px rgba(21,23,27,0.05); border: 1px solid var(--line-soft); background: #fff; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.sera-shot:hover img { transform: translateY(-4px); box-shadow: 0 22px 52px -22px rgba(21,23,27,0.34), 0 5px 14px rgba(21,23,27,0.07); }
.sera-shot figcaption { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); text-align: center; }

/* ---------- SERA pricing tweaks: price display + disabled buttons ---------- */
.sera-pricing .strategy-card { padding-bottom: clamp(28px, 2.8vw, 38px); }
.sera-price { font-family: var(--display); font-style: italic; font-weight: 500; color: var(--navy); margin: clamp(14px, 1.6vw, 20px) 0 clamp(18px, 2vw, 24px); line-height: 1; }
.sera-price__amount { font-size: clamp(2.2rem, 3.2vw, 2.8rem); letter-spacing: -0.01em; }
.sera-price__period { font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-left: 8px; }

/* Disabled buttons (under-update state) */
.btn--disabled { background: rgba(21,23,27,0.06) !important; color: var(--faint) !important; border-color: transparent !important; cursor: not-allowed !important; box-shadow: none !important; pointer-events: none; }
.btn--disabled::after { display: none !important; }
.btn--disabled:hover { transform: none !important; }

/* Small status tag */
.sera-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; color: var(--gold); padding: 6px 14px; border-radius: var(--pill); background: rgba(184,153,104,0.08); border: 1px solid rgba(184,153,104,0.35); }
.sera-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ---------- SERA notify form ---------- */
.sera-notify { max-width: 520px; margin: clamp(20px, 2.4vw, 28px) auto 0; }
.sera-notify__label { display: block; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.sera-notify__row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.sera-notify input[type="email"] { background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 14px 16px; font-family: var(--sans); font-size: 15px; color: var(--ink); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.sera-notify input[type="email"]:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(37,53,80,0.10); }
@media (max-width: 560px) { .sera-notify__row { grid-template-columns: 1fr; } }

/* ---------- ribbon-strip: thin cream accent band (no full section padding) ---------- */
.ribbon-strip { padding: clamp(18px, 2.2vw, 28px) 0; }
.ribbon-strip .principles-line { border: none; padding: 0; }
.principles-line--bare { border: none !important; padding: 0 !important; justify-content: center; }
@media (max-width: 720px) {
  .principles-line--bare { justify-content: flex-start; }
}

/* ---------- cinematic section slim variant ---------- */
.section-cinematic--slim { padding-block: clamp(56px, 6vw, 92px); }
.section-cinematic--slim .h-serif-big { font-size: clamp(1.75rem, 2.8vw, 2.4rem); line-height: 1.2; }

/* ---------- client tier cards (sophisticated three-card with monogram) ---------- */
.client-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2vw, 30px); }
.client-tier { background: #fff; border: 1px solid var(--line-soft); border-radius: 4px; padding: clamp(34px, 3.4vw, 48px) clamp(28px, 2.8vw, 38px) clamp(36px, 3.6vw, 50px); position: relative; transition: transform .4s var(--ease), box-shadow .4s var(--ease); box-shadow: 0 2px 8px rgba(21,23,27,0.04), 0 18px 40px -20px rgba(37,53,80,0.18); overflow: hidden; display: flex; flex-direction: column; }

/* Watermark variant — mirrors the Investments strategy cards */
.client-tiers--watermark .client-tier {
  background:
    radial-gradient(ellipse at top right, rgba(184,153,104,0.05), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(37,53,80,0.035), transparent 60%),
    #fff;
}
.client-tier__corner { position: absolute; top: 22px; right: 22px; width: 10px; height: 10px; background: var(--gold); display: block; z-index: 3; transition: width .5s var(--ease), height .5s var(--ease), background .5s var(--ease); }
.client-tier:hover .client-tier__corner { width: 22px; background: var(--navy); }
.client-tier__watermark {
  position: absolute;
  bottom: -12px;
  right: 0;
  left: 0;
  text-align: right;
  padding-right: clamp(28px, 3vw, 44px);
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(8rem, 13vw, 13rem);
  color: var(--navy);
  opacity: 0.07;
  line-height: 0.75;
  letter-spacing: -0.04em;
  pointer-events: none;
  z-index: 1;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  user-select: none;
}
.client-tier:hover .client-tier__watermark { opacity: 0.10; transform: translateY(-6px); }
.client-tier__rule, .client-tier__title, .client-tier__body { position: relative; z-index: 2; }
@media (max-width: 720px) {
  .client-tiers--watermark .client-tier__watermark { font-size: 8rem; opacity: 0.06; }
}
.client-tier::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.client-tier:hover { transform: translateY(-6px); box-shadow: 0 4px 14px rgba(21,23,27,0.06), 0 30px 60px -22px rgba(37,53,80,0.28); }
.client-tier:hover::before { transform: scaleX(1); }
.client-tier__mark { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(2.6rem, 3.6vw, 3.4rem); color: var(--navy-hi); line-height: 1; letter-spacing: -0.012em; margin: 0; opacity: 0.85; }
.client-tier__rule { display: block; width: 32px; height: 1px; background: var(--navy-hi); opacity: 0.6; margin: 22px 0; }
.client-tier__title { font-family: var(--display); font-weight: 500; font-size: clamp(1.4rem, 1.85vw, 1.7rem); color: var(--navy); margin: 0 0 20px; line-height: 1.15; letter-spacing: -0.003em; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.client-tier__body { font-family: var(--display); font-weight: 400; font-size: clamp(16.5px, 1.25vw, 17.5px); line-height: 1.55; color: var(--ink-2); margin: 0; flex: 1; }
@media (max-width: 860px) { .client-tiers { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- contact page (rich card + form, process steps) ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(320px, 1fr) 1.4fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 28px; } }

.contact-card { background: #fff; border: 1px solid var(--line-soft); border-top: 3px solid var(--navy); border-radius: 4px; padding: clamp(32px, 3.4vw, 44px) clamp(28px, 3vw, 38px); box-shadow: 0 4px 14px rgba(21,23,27,0.05), 0 24px 56px -24px rgba(37,53,80,0.20); position: sticky; top: calc(var(--header-h) + 24px); }
/* mobile: un-stick the card — sticky pins it under the header and the form
   scrolls behind it, unreadable (same fix as .bio__media on leadership) */
@media (max-width: 860px) { .contact-card { position: static; } }
.contact-card__kicker { font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--navy-hi); margin: 0 0 14px; font-weight: 600; }
.contact-card__title { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 2vw, 1.85rem); color: var(--navy); line-height: 1.1; letter-spacing: -0.005em; margin: 0; }
.contact-card__list { margin: clamp(26px, 3vw, 36px) 0 0; padding: 0; display: flex; flex-direction: column; gap: clamp(18px, 2vw, 24px); }
.contact-card__row { display: flex; flex-direction: column; gap: 6px; }
.contact-card__row dt { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.contact-card__row dd { font-family: var(--display); font-weight: 400; font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.5; color: var(--ink-2); margin: 0; }
.contact-card__row dd a { color: var(--navy); border-bottom: 1px solid var(--navy-hi); padding-bottom: 1px; transition: color .3s var(--ease); }
.contact-card__row dd a:hover { color: var(--ink); }
.contact-card__seal { margin-top: clamp(28px, 3vw, 38px); padding-top: clamp(20px, 2vw, 28px); border-top: 1px solid var(--line-soft); display: flex; align-items: baseline; justify-content: center; gap: 14px; font-family: var(--sans); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--faint); }
.contact-card__seal strong { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 24px; color: var(--navy); letter-spacing: -0.005em; text-transform: none; opacity: 0.9; }

.contact-form-wrap .h-serif-big { color: var(--navy); }
.contact-form { display: flex; flex-direction: column; gap: clamp(14px, 1.4vw, 20px); }
.contact-form .field { margin-bottom: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.4vw, 20px); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.contact-form .field label { font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.contact-form .field input, .contact-form .field textarea, .contact-form .field select { background: #fff; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); padding: 14px 16px; font-family: var(--sans); font-size: 15px; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.contact-form .field input:focus, .contact-form .field textarea:focus, .contact-form .field select:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(37,53,80,0.10); }
.form-actions { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); flex-wrap: wrap; margin-top: clamp(6px, 1vw, 14px); }
.form-actions .form-note { margin: 0; font-family: var(--sans); font-size: 12px; color: var(--faint); max-width: 38ch; }

/* ---------- form tabs (general / talk-to-us toggle) ---------- */
.form-tabs { display: inline-flex; align-items: center; gap: 4px; background: rgba(21,23,27,0.06); border-radius: var(--pill); padding: 5px; margin-bottom: clamp(18px, 2vw, 26px); }
.form-tab { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 11px 22px; border-radius: var(--pill); background: transparent; border: 0; cursor: pointer; transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); white-space: nowrap; }
.form-tab:hover { color: var(--ink-2); }
.form-tab.is-active { background: var(--navy); color: #fff; box-shadow: 0 6px 18px -6px rgba(37,53,80,0.45); }
@media (max-width: 480px) { .form-tabs { display: flex; width: 100%; } .form-tab { flex: 1; padding: 11px 14px; font-size: 11px; } }

.form-intro { transition: opacity .35s var(--ease); }
.form-intro.is-fading { opacity: 0; }

/* ---------- process steps (what happens next) ---------- */
.process-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 28px); }
.process-step { background: #fff; border: 1px solid var(--line-soft); border-radius: 4px; padding: clamp(28px, 3vw, 38px) clamp(26px, 2.8vw, 34px); box-shadow: 0 2px 8px rgba(21,23,27,0.04), 0 16px 36px -20px rgba(37,53,80,0.16); position: relative; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.process-step:hover { transform: translateY(-4px); box-shadow: 0 4px 14px rgba(21,23,27,0.06), 0 22px 48px -20px rgba(37,53,80,0.24); }
.process-step__n { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(2rem, 2.8vw, 2.5rem); color: var(--navy-hi); line-height: 1; letter-spacing: -0.008em; opacity: 0.75; display: block; margin-bottom: 18px; }
.process-step__title { font-family: var(--display); font-weight: 500; font-size: clamp(1.25rem, 1.5vw, 1.45rem); color: var(--navy); margin: 0 0 14px; line-height: 1.2; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.process-step__body { font-family: var(--display); font-weight: 400; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.55; color: var(--ink-2); margin: 0; }
@media (max-width: 860px) { .process-steps { grid-template-columns: 1fr; } }

/* ---------- career value cards (4-up sophisticated grid) ---------- */
.career-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 1.8vw, 26px); }
.career-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 4px; padding: clamp(30px, 3vw, 40px) clamp(26px, 2.6vw, 34px) clamp(34px, 3.2vw, 44px); position: relative; transition: transform .4s var(--ease), box-shadow .4s var(--ease); box-shadow: 0 2px 8px rgba(21,23,27,0.04), 0 16px 36px -20px rgba(37,53,80,0.16); overflow: hidden; display: flex; flex-direction: column; }
.career-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); }
.career-card:hover { transform: translateY(-5px); box-shadow: 0 4px 14px rgba(21,23,27,0.06), 0 26px 52px -22px rgba(37,53,80,0.26); }
.career-card:hover::before { transform: scaleX(1); }
.career-card__mark { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(2rem, 2.6vw, 2.6rem); color: var(--navy-hi); line-height: 1; letter-spacing: -0.012em; margin: 0; opacity: 0.8; }
.career-card__rule { display: block; width: 28px; height: 1px; background: var(--navy-hi); opacity: 0.6; margin: 18px 0; }
.career-card__title { font-family: var(--display); font-weight: 500; font-size: clamp(1.25rem, 1.5vw, 1.45rem); color: var(--navy); margin: 0 0 16px; line-height: 1.18; letter-spacing: -0.003em; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.career-card__body { font-family: var(--display); font-weight: 400; font-size: clamp(15.5px, 1.15vw, 16.5px); line-height: 1.55; color: var(--ink-2); margin: 0; flex: 1; }
@media (max-width: 1100px) { .career-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 560px) { .career-grid { grid-template-columns: 1fr; } }

/* ---------- why-grid (4 stat blocks for Advisory cinematic) ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2vw, 36px); max-width: 1100px; margin-inline: auto; }
.why-item { padding: clamp(22px, 2.4vw, 30px) 0 0; border-top: 1px solid rgba(184,153,104,0.45); transition: border-color .4s var(--ease); }
.why-item:hover { border-top-color: var(--gold); }
.why-item__h { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 2.6vw, 2.4rem); color: #fff; line-height: 1; margin: 0 0 16px; letter-spacing: -0.008em; }
.why-item__b { font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.04em; line-height: 1.65; color: rgba(255,255,255,0.78); margin: 0; max-width: 24ch; }
@media (max-width: 860px) { .why-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 480px) { .why-grid { grid-template-columns: 1fr; } }

/* ---------- accordion capabilities (interactive expander, compact + sophisticated) ---------- */
.capabilities--accordion { display: block; max-width: 1100px; margin-inline: auto; border-top: 1px solid var(--line); }
.bg-cream .capabilities--accordion { border-top-color: rgba(21,23,27,0.14); }
.capabilities--accordion .capability { display: block; padding: 0; border-top: none; border-bottom: 1px solid var(--line); background: transparent; transition: background .4s var(--ease); position: relative; }
.bg-cream .capabilities--accordion .capability { border-bottom-color: rgba(21,23,27,0.14); }
.capabilities--accordion .capability::before { display: none; }
.capabilities--accordion .capability:hover { background: rgba(21,23,27,0.018); }
.bg-cream .capabilities--accordion .capability:hover { background: rgba(255,255,255,0.4); }
.capabilities--accordion .capability.is-open { background: rgba(37,53,80,0.025); }
.bg-cream .capabilities--accordion .capability.is-open { background: #fff; box-shadow: 0 4px 14px -6px rgba(21,23,27,0.10); }

.capability__trigger { display: grid; grid-template-columns: clamp(60px, 7vw, 86px) 1fr auto; align-items: center; gap: clamp(18px, 2.4vw, 36px); width: 100%; padding: clamp(26px, 2.6vw, 36px) clamp(8px, 1.4vw, 24px); background: transparent; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: padding .4s var(--ease); }
.capability__trigger:hover { padding-left: clamp(14px, 1.8vw, 30px); }
.capability__trigger:focus-visible { outline: 2px solid var(--navy-hi); outline-offset: -2px; }

.capabilities--accordion .capability__n { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(2rem, 3vw, 2.8rem); color: var(--navy-hi); line-height: 1; letter-spacing: -0.012em; opacity: 0.7; margin: 0; transition: opacity .4s var(--ease), color .4s var(--ease); }
.capabilities--accordion .capability.is-open .capability__n { opacity: 1; color: var(--navy); }

.capabilities--accordion .capability__title { font-family: var(--display); font-weight: 500; font-style: normal; font-size: clamp(1.35rem, 1.8vw, 1.7rem); color: var(--ink); margin: 0; line-height: 1.15; letter-spacing: -0.003em; transition: color .4s var(--ease); }
.capabilities--accordion .capability.is-open .capability__title { color: var(--navy); }

.capability__icon { width: clamp(28px, 2.6vw, 36px); height: clamp(28px, 2.6vw, 36px); border: 1px solid var(--line); border-radius: 50%; position: relative; flex: none; transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease); }
.bg-cream .capability__icon { border-color: rgba(21,23,27,0.18); }
.capability__icon::before, .capability__icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--ink-2); transition: transform .4s var(--ease), background .4s var(--ease); }
.capability__icon::before { width: 11px; height: 1px; transform: translate(-50%, -50%); }
.capability__icon::after { width: 1px; height: 11px; transform: translate(-50%, -50%); }
.capabilities--accordion .capability.is-open .capability__icon { background: var(--navy); border-color: var(--navy); }
.capabilities--accordion .capability.is-open .capability__icon::before { background: #fff; }
.capabilities--accordion .capability.is-open .capability__icon::after { background: #fff; transform: translate(-50%, -50%) rotate(90deg); }

.capability__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.capabilities--accordion .capability.is-open .capability__panel { grid-template-rows: 1fr; }
.capability__panel-inner { overflow: hidden; min-height: 0; }
.capabilities--accordion .capability__copy { padding: 0 clamp(8px, 1.4vw, 24px) clamp(30px, 3.2vw, 44px) calc(clamp(60px, 7vw, 86px) + clamp(18px, 2.4vw, 36px) + clamp(8px, 1.4vw, 24px)); border-top: 0; max-width: 78ch; }
.capabilities--accordion .capability__body { font-family: var(--display); font-weight: 400; font-size: clamp(16.5px, 1.25vw, 18.5px); line-height: 1.6; color: var(--ink-2); margin: 0; max-width: none; }
.capabilities--accordion .capability__body + .capability__body { margin-top: 14px; }

@media (max-width: 720px) {
  .capabilities--accordion .capability__copy { padding-left: clamp(8px, 1.4vw, 24px); }
  .capability__trigger { grid-template-columns: 50px 1fr auto; gap: 14px; padding-block: 22px; }
  .capabilities--accordion .capability__n { font-size: 1.7rem; }
  .capabilities--accordion .capability__title { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .capability__panel { transition: none; }
  .capability__icon::before, .capability__icon::after { transition: none; }
}

/* ---------- tx-card refined: optional image cap + remove featured treatment ---------- */
.tx-card { padding: 0; overflow: hidden; }
.tx-card__img { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cream); }
.tx-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 1.4s var(--ease); }
.tx-card:hover .tx-card__img img { transform: scale(1.08); }
.tx-card__inner { padding: clamp(22px, 2vw, 28px); }
/* keep grid span but normal styling — JP wants it like every other card */
.tx-card--feature { grid-column: span 1; background: #fff; color: var(--ink); border: 1px solid var(--line-soft); }
.tx-card--feature .tx-card__val { color: var(--navy); font-size: clamp(1.5rem, 2vw, 1.85rem); }
.tx-card--feature .tx-card__type { color: var(--muted); }
.tx-card--feature .tx-card__name { color: var(--ink); border-color: var(--line-soft); }
.tx-card--feature .tx-card__meta dt { color: var(--faint); }
.tx-card--feature .tx-card__meta dd { color: var(--ink-2); }

/* ---------- principles line (institutional credentials, single horizontal row) ---------- */
.principles-line { list-style: none; margin: 0; padding: clamp(14px, 1.6vw, 20px) 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: clamp(14px, 2vw, 32px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bg-cream .principles-line { border-color: rgba(21,23,27,0.12); }
.principles-line li { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--navy-hi); font-weight: 600; display: inline-flex; align-items: center; gap: clamp(14px, 2vw, 32px); }
.principles-line li + li::before { content: ''; display: inline-block; width: 4px; height: 4px; background: var(--navy-hi); transform: rotate(45deg); margin-right: clamp(10px, 1.6vw, 28px); opacity: 0.6; }
@media (max-width: 720px) {
  .principles-line { gap: 10px 18px; }
  .principles-line li { font-size: 10.5px; letter-spacing: 0.18em; gap: 10px; }
  .principles-line li + li::before { margin-right: 6px; }
}

/* ---------- pillar ornament (centered four-pillar strip, single gold diamond above) ---------- */
.pillar-ornament { margin-top: clamp(48px, 5vw, 72px); margin-inline: auto; max-width: 920px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.pillar-ornament__mark { display: block; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); margin-bottom: 18px; opacity: 0.95; }
.pillar-ornament__kicker { font-family: var(--display); font-style: italic; font-weight: 500; color: var(--navy-hi); font-size: clamp(14px, 1.1vw, 16px); letter-spacing: 0.04em; margin: 0; }
.pillar-ornament .principles-line { justify-content: center; border: none; padding: 0; }
@media (max-width: 720px) {
  .pillar-ornament { margin-top: 36px; }
  .pillar-ornament .principles-line { justify-content: center; }
}

/* ---------- strategy grid (investments page — refined sophisticated 3-card) ---------- */
.strategy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(20px, 2vw, 28px); }
.strategy-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 4px; padding: clamp(36px, 3.4vw, 50px) clamp(32px, 3vw, 42px) clamp(34px, 3.2vw, 44px); position: relative; transition: transform .4s var(--ease), box-shadow .4s var(--ease); box-shadow: 0 2px 8px rgba(21,23,27,0.04), 0 18px 40px -20px rgba(37,53,80,0.18); overflow: hidden; display: flex; flex-direction: column; }
.strategy-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.strategy-card:hover { transform: translateY(-6px); box-shadow: 0 4px 14px rgba(21,23,27,0.06), 0 30px 60px -22px rgba(37,53,80,0.28); }
.strategy-card:hover::before { transform: scaleX(1); }
.strategy-card__n { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(2.4rem, 3.2vw, 3rem); color: var(--navy-hi); display: block; line-height: 1; letter-spacing: -0.005em; opacity: 0.85; }
.strategy-card__title { font-family: var(--display); font-weight: 500; font-size: clamp(1.45rem, 1.9vw, 1.75rem); color: var(--navy); margin: clamp(18px, 2vw, 26px) 0 20px; line-height: 1.15; letter-spacing: -0.003em; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.strategy-card__ideal { font-family: var(--display); font-style: italic; font-weight: 500; color: var(--navy-hi); font-size: clamp(15px, 1.1vw, 16px); line-height: 1.55; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }

/* ---------- Editorial Chapter variant: large Roman numerals, gold accent, no dividers ---------- */
.strategy-grid--editorial .strategy-card { padding: clamp(38px, 3.6vw, 54px) clamp(34px, 3.2vw, 44px) clamp(36px, 3.4vw, 46px); }
.strategy-grid--editorial .strategy-card__n { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(3.4rem, 4.6vw, 4.4rem); color: var(--navy); line-height: 0.95; letter-spacing: -0.018em; opacity: 0.92; margin: 0; }
.strategy-grid--editorial .strategy-card__accent { display: block; width: 48px; height: 1px; background: var(--gold); margin-top: clamp(14px, 1.6vw, 20px); opacity: 0.85; transition: width .5s var(--ease); }
.strategy-grid--editorial .strategy-card:hover .strategy-card__accent { width: 72px; }
.strategy-grid--editorial .strategy-card__title { font-family: var(--display); font-weight: 500; font-style: normal; font-size: clamp(1.55rem, 2vw, 1.9rem); color: var(--navy); margin: clamp(20px, 2.4vw, 28px) 0 18px; line-height: 1.12; letter-spacing: -0.004em; padding-bottom: 0; border-bottom: 0; }
.strategy-grid--editorial .strategy-card__body { font-family: var(--display); font-weight: 400; font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.6; color: var(--ink-2); margin: 0 0 clamp(24px, 2.6vw, 32px); flex: 1; }
.strategy-grid--editorial .strategy-card__ideal { font-family: var(--display); font-style: italic; font-weight: 500; color: var(--navy-hi); font-size: clamp(14.5px, 1.1vw, 16px); line-height: 1.5; margin: 0; padding: 4px 0 4px 16px; border-top: 0; border-left: 2px solid var(--navy); }

/* ---------- Watermark Chapter Cards variant (richer "wow" treatment) ---------- */
.strategy-grid--watermark .strategy-card {
  background:
    radial-gradient(ellipse at top right, rgba(184,153,104,0.05), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(37,53,80,0.035), transparent 60%),
    #fff;
  overflow: hidden;
}
.strategy-grid--watermark .strategy-card__chapter { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--navy-hi); margin: 0 0 clamp(18px, 2vw, 24px); display: inline-flex; align-items: center; gap: 14px; position: relative; z-index: 2; }
.strategy-grid--watermark .strategy-card__chapter::after { content: ''; width: 28px; height: 1px; background: var(--gold); display: inline-block; }
.strategy-grid--watermark .strategy-card__accent { width: 56px; margin-top: clamp(4px, 0.6vw, 8px); position: relative; z-index: 2; }
.strategy-grid--watermark .strategy-card:hover .strategy-card__accent { width: 84px; }
.strategy-grid--watermark .strategy-card__title { position: relative; z-index: 2; margin-top: clamp(18px, 2vw, 24px); }
.strategy-grid--watermark .strategy-card__body, .strategy-grid--watermark .strategy-card__ideal { position: relative; z-index: 2; }
.strategy-grid--watermark .strategy-card__corner { position: absolute; top: 22px; right: 22px; width: 10px; height: 10px; background: var(--gold); display: block; z-index: 3; transition: width .5s var(--ease), height .5s var(--ease), background .5s var(--ease); }
.strategy-grid--watermark .strategy-card:hover .strategy-card__corner { width: 22px; background: var(--navy); }
.strategy-grid--watermark .strategy-card__watermark {
  position: absolute;
  bottom: -12px;
  right: 0;
  left: 0;
  text-align: right;
  padding-right: clamp(28px, 3vw, 44px);
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(8rem, 13vw, 13rem);
  color: var(--navy);
  opacity: 0.07;
  line-height: 0.75;
  letter-spacing: -0.04em;
  pointer-events: none;
  z-index: 1;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  user-select: none;
}
.strategy-grid--watermark .strategy-card:hover .strategy-card__watermark { opacity: 0.10; transform: translateY(-6px); }
@media (max-width: 720px) {
  .strategy-grid--watermark .strategy-card__watermark { font-size: 8rem; opacity: 0.06; }
}

/* ---------- service grid (partnerships, advisory pages — 2 column or 3 column) ---------- */
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 2vw, 28px); }
.service-item { padding: clamp(24px, 2.4vw, 32px) clamp(22px, 2.2vw, 28px); border-left: 2px solid var(--navy); background: #fff; border-radius: 0 6px 6px 0; box-shadow: 0 2px 8px rgba(21,23,27,0.03), 0 12px 28px -16px rgba(37,53,80,0.12); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.service-item:hover { transform: translateX(4px); box-shadow: 0 4px 12px rgba(21,23,27,0.05), 0 18px 36px -16px rgba(37,53,80,0.20); }
.bg-cream .service-item { background: rgba(255,255,255,0.6); }
.service-item h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.25rem, 1.6vw, 1.5rem); color: var(--navy); margin: 0 0 14px; line-height: 1.2; }
.service-item p { font-family: var(--display); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0 0 12px; }
.service-item p:last-child { margin-bottom: 0; }

/* ---------- portfolio stat strip (experience page lead band) ---------- */
.portfolio-strip { list-style: none; padding: clamp(28px, 3vw, 40px) 0 0; margin: clamp(36px, 4vw, 56px) 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2vw, 28px); }
.portfolio-strip li { display: flex; flex-direction: column; gap: 8px; padding-right: clamp(8px, 1vw, 16px); border-right: 1px solid var(--line-soft); align-items: flex-start; }
.portfolio-strip li:last-child { border-right: none; padding-right: 0; }
.portfolio-strip__k { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 2.2vw, 2.1rem); color: var(--navy); line-height: 1; letter-spacing: -0.008em; white-space: nowrap; }
.portfolio-strip__v { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
@media (max-width: 1024px) {
  .portfolio-strip { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .portfolio-strip li:nth-child(3) { border-right: none; padding-right: 0; }
}
@media (max-width: 640px) {
  .portfolio-strip { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .portfolio-strip li:nth-child(2) { border-right: none; padding-right: 0; }
}

/* ---------- sector filter chips ---------- */
.sector-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 4px 0; }
.sector-chip { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); background: transparent; border: 1px solid var(--line); padding: 9px 18px; border-radius: var(--pill); cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.sector-chip:hover { background: rgba(21,23,27,0.04); border-color: var(--navy-hi); }
.sector-chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 6px 18px -6px rgba(37,53,80,0.45); }
.tx-card.is-hidden { display: none; }

/* ---------- transaction grid (experience page) ---------- */
.tx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(14px, 1.4vw, 20px); }
.tx-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 6px; padding: clamp(22px, 2vw, 28px); transition: transform .4s var(--ease), box-shadow .4s var(--ease); box-shadow: 0 2px 8px rgba(21,23,27,0.04), 0 14px 36px -22px rgba(37,53,80,0.16); }
.tx-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(21,23,27,0.06), 0 22px 48px -22px rgba(37,53,80,0.24); }
.tx-card__val { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 2vw, 1.85rem); line-height: 1; color: var(--navy); margin: 0; letter-spacing: -0.003em; }
.tx-card__type { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 4px 0 14px; }
.tx-card__name { font-family: var(--display); font-weight: 500; font-size: clamp(1.05rem, 1.3vw, 1.25rem); color: var(--ink); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); line-height: 1.2; }
.tx-card__meta { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; }
.tx-card__meta > div { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; }
.tx-card__meta dt { font-family: var(--sans); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); align-self: center; }
.tx-card__meta dd { font-family: var(--sans); font-size: 13px; color: var(--ink-2); text-align: right; margin: 0; line-height: 1.4; }
.tx-card--feature { grid-column: span 2; background: var(--navy); color: var(--on-dark); border: none; }
.tx-card--feature .tx-card__val { color: #fff; font-size: clamp(2.2rem, 3vw, 2.8rem); }
.tx-card--feature .tx-card__type { color: var(--steel); }
.tx-card--feature .tx-card__name { color: #fff; border-color: rgba(255,255,255,0.18); }
.tx-card--feature .tx-card__meta dt { color: var(--on-dark-faint); }
.tx-card--feature .tx-card__meta dd { color: var(--on-dark); }
@media (max-width: 720px) { .tx-card--feature { grid-column: span 1; } }

/* ---------- bio block (leadership) ---------- */
.bio { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
@media (max-width: 860px) { .bio { grid-template-columns: 1fr; } }
.bio__media { position: sticky; top: calc(var(--header-h) + 40px); display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* mobile: un-stick the photo — sticky pins it under the header and the bio text
   scrolls over the portrait, unreadable (must come AFTER the sticky rule above) */
@media (max-width: 860px) { .bio__media { position: static; } }
.bio__photo { position: relative; width: 100%; max-width: 460px; margin: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 28px 64px -26px rgba(21,23,27,0.32), 0 8px 22px rgba(21,23,27,0.10); background: var(--ink); }
.bio__photo img { width: 100%; height: auto; display: block; border-radius: inherit; }
.bio__frame { position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,0.42); pointer-events: none; z-index: 2; }
/* legacy fallback if .bio__media still has a direct <img> child */
.bio__media > img { width: 100%; max-width: 460px; height: auto; object-fit: cover; border-radius: 4px; box-shadow: 0 24px 60px -24px rgba(21,23,27,0.30); }
.bio__link { font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--navy-hi); border-bottom: 1px solid var(--navy-hi); padding-bottom: 2px; transition: color .3s var(--ease), border-color .3s var(--ease); }
.bio__link:hover { color: var(--navy); border-color: var(--navy); }
.bio__role { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--navy-hi); margin: 0; }
.bio__name { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1.05; color: var(--navy); letter-spacing: -0.005em; margin: 10px 0 0; }

/* ---------- bio credentials ribbon (under bio body) ---------- */
.bio__creds { list-style: none; padding: clamp(22px, 2.4vw, 32px) 0 0; margin: clamp(28px, 3vw, 40px) 0 0; border-top: 1px solid rgba(21,23,27,0.15); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
.bio__creds--5 { grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.bio__creds li { display: flex; flex-direction: column; gap: 6px; padding-right: clamp(8px, 1vw, 16px); border-right: 1px solid rgba(21,23,27,0.10); }
.bio__creds li:last-child { border-right: none; padding-right: 0; }
.bio__creds-k { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 2vw, 1.85rem); color: var(--navy); line-height: 1; letter-spacing: -0.005em; white-space: nowrap; }
.bio__creds--5 .bio__creds-k { font-size: clamp(1.25rem, 1.7vw, 1.55rem); }
.bio__creds-v { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
.bio__creds--5 .bio__creds-v { font-size: 10px; letter-spacing: 0.14em; }
@media (max-width: 1024px) {
  .bio__creds--5 { grid-template-columns: repeat(3, 1fr); gap: 18px 22px; }
  .bio__creds--5 li:nth-child(3) { border-right: none; padding-right: 0; }
}
@media (max-width: 720px) {
  .bio__creds, .bio__creds--5 { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .bio__creds li:nth-child(2), .bio__creds--5 li:nth-child(2) { border-right: none; padding-right: 0; }
}

/* ---------- bio positioning line + name eyebrow ---------- */
.bio__positioning { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.4; color: var(--navy-hi); margin: clamp(14px, 1.6vw, 20px) 0 0; letter-spacing: 0.002em; }
.bio__name { font-size: clamp(2.6rem, 5vw, 4rem); margin-top: 8px; }

/* ---------- CTA subline (used under buttons) ---------- */
.cta-subline { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); margin: clamp(14px, 1.6vw, 20px) 0 0; }

/* ---------- bio hero block (portrait + name + featured quote) ---------- */
.bio-hero { display: grid; grid-template-columns: minmax(280px, 0.95fr) 1.25fr; gap: clamp(40px, 5vw, 84px); align-items: start; margin-bottom: clamp(40px, 5vw, 64px); }
@media (max-width: 860px) { .bio-hero { grid-template-columns: 1fr; gap: 28px; } }

.bio-hero__media { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.bio-hero__photo { position: relative; width: 100%; max-width: 460px; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; box-shadow: 0 28px 64px -28px rgba(21,23,27,0.32), 0 8px 22px rgba(21,23,27,0.10); background: var(--ink); }
.bio-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--ease); }
.bio-hero__photo:hover img { transform: scale(1.04); }
.bio-hero__frame { position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,0.35); pointer-events: none; z-index: 2; }
.bio-hero__caption { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(13.5px, 1vw, 15px); color: var(--muted); text-align: center; line-height: 1.5; margin: 0; }
.bio-hero__link { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--navy-hi); border-bottom: 1px solid var(--navy-hi); padding-bottom: 2px; transition: color .3s var(--ease), border-color .3s var(--ease); }
.bio-hero__link:hover { color: var(--navy); border-color: var(--navy); }

.bio-hero__intro { padding-top: clamp(16px, 2.4vw, 36px); }
.bio-hero__role { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--navy-hi); margin: 0 0 18px; }
.bio-hero__name { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1; color: var(--navy); letter-spacing: -0.008em; margin: 0; }
.bio-hero__positioning { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.05rem, 1.35vw, 1.3rem); color: var(--navy-hi); margin: clamp(14px, 1.8vw, 20px) 0 0; line-height: 1.4; }
.bio-hero__quote { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.2rem, 1.65vw, 1.5rem); line-height: 1.5; color: var(--ink); margin: clamp(28px, 3.4vw, 44px) 0 0; padding-left: clamp(18px, 1.8vw, 26px); border-left: 2px solid var(--navy); max-width: 50ch; }

.bio-body { max-width: 80ch; margin-inline: auto; }
.bio-body .body-lede { color: var(--navy); }

.bio-actions { margin-top: clamp(30px, 3.4vw, 44px); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ---------- solid header variant for interior pages (always white, dark text) ---------- */
.site-header--solid { background: rgba(255,255,255,0.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-header--solid .brand__logo { filter: none !important; }
.site-header--solid .nav__link { color: var(--ink-2) !important; }
.site-header--solid .nav__link:hover { color: var(--ink) !important; }
.site-header--solid .btn--hdr { color: var(--ink) !important; border-color: var(--ink) !important; }
.site-header--solid .btn--hdr::after { background: var(--ink) !important; }
.site-header--solid .btn--hdr:hover { color: #fff !important; }
.site-header--solid .nav-toggle { border-color: var(--line) !important; }
.site-header--solid .nav-toggle span,
.site-header--solid .nav-toggle span::before,
.site-header--solid .nav-toggle span::after { background: var(--ink) !important; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.field input, .field textarea, .field select { background: var(--paper); border: 1px solid var(--line); color: var(--ink); padding: 13px 14px; font-family: var(--sans); font-size: 15px; transition: border-color .3s var(--ease); }
.bg-cream .field input, .bg-cream .field textarea, .bg-cream .field select { background: #fff; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--navy-hi); }
.field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 13px; color: var(--faint); }
.form-status { font-family: var(--sans); font-size: 14px; margin-top: 13px; }
.form-status.ok { color: var(--navy-hi); }
.form-status.err { color: #b0573f; }

/* ---------- maintenance (SERA) ---------- */
.maint-badge { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--steel); border: 1px solid var(--line-dark); padding: 9px 16px; }
.maint-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--steel); animation: pulse 2s var(--ease) infinite; }
@keyframes pulse { 0%,100%{ opacity:1; box-shadow: 0 0 0 0 rgba(138,160,188,.5);} 50%{ opacity:.5; box-shadow: 0 0 0 6px rgba(138,160,188,0);} }

/* utility */
.mt-s{margin-top:15px}.mt-m{margin-top:26px}.mt-l{margin-top:42px}.mt-xl{margin-top:64px}
.maxw-prose{max-width:64ch}.maxw-md{max-width:760px}.center{text-align:center}
.divider { height: 1px; background: var(--line); }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap: clamp(24px,3vw,48px); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(20px,2.5vw,36px); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 860px) {
  :root { --header-h: 66px; }
  /* top/left + explicit viewport size (not inset:0): the header's backdrop-filter
     makes it the containing block for this fixed nav, so inset:0 would collapse
     the menu to the header strip. Explicit 100vw/100dvh covers the viewport either way. */
  .nav { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; flex-direction: column; justify-content: center; gap: 22px; background: rgba(21,23,27,0.97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateX(100%); transition: transform .55s var(--ease); overflow-y: auto; padding: 80px 24px; }
  body.nav-open .nav { transform: none; }
  body.nav-open { overflow: hidden; } /* lock page scroll while the menu is open */
  .nav__link { font-size: 16px; color: #fff !important; }
  /* beat the .site-header--solid !important overrides (dark ink on the dark
     overlay = invisible links). Same specificity, later in source → wins. */
  .site-header .nav__link { color: #fff !important; }
  .site-header .btn--hdr { color: #fff !important; border-color: rgba(255,255,255,0.5) !important; }
  body.nav-open .nav-toggle { border-color: rgba(255,255,255,0.5) !important; }
  body.nav-open .nav-toggle span::before,
  body.nav-open .nav-toggle span::after { background: #fff !important; }
  .nav-toggle { display: block; z-index: 61; }
  .nav__group { flex-direction: column; gap: 14px; align-items: center; width: 100%; }
  .nav__caret { display: none; }
  .nav__dropdown { position: static; opacity: 1; visibility: visible; transform: none; background: transparent !important; border: none; box-shadow: none; padding: 8px 0 0; display: flex; flex-direction: column; gap: 10px; align-items: center; }
  .nav__sublink { color: rgba(255,255,255,0.7) !important; font-size: 13px !important; padding: 4px 0 !important; background: transparent !important; }
  .nav__sublink:hover { color: #fff !important; background: transparent !important; }
  .hero__media { aspect-ratio: auto; height: 78vh; min-height: 480px; }
  .split, .grid-2 { grid-template-columns: 1fr; gap: 30px; }
  .split--media-first .split__media { order: 0; }
  .pillars, .grid-3 { grid-template-columns: 1fr; }
  .pillar + .pillar { border-left: none; }
  .stats { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   RICHNESS LAYER — depth, rounded corners, soft layered shadows, hover lift
   ========================================================================= */
:root {
  --radius: 18px;
  --radius-sm: 10px;
  --radius-lg: 26px;
  --pill: 999px;
  --gold:        #B89968;
  --gold-soft:   rgba(184,153,104,0.16);
  --gold-line:   rgba(184,153,104,0.42);
  --shadow-sm: 0 4px 18px rgba(21,23,27,0.06);
  --shadow-md: 0 14px 38px rgba(21,23,27,0.10), 0 2px 6px rgba(21,23,27,0.05);
  --shadow-lg: 0 32px 80px -36px rgba(37,53,80,0.32), 0 8px 24px rgba(21,23,27,0.08);
  --shadow-xl: 0 50px 120px -40px rgba(37,53,80,0.40), 0 16px 36px rgba(21,23,27,0.10);
}

/* warm depth on light surfaces */
body { background: linear-gradient(180deg, #FFFFFF 0%, #FCFBF7 100%); }
.bg-cream { background: linear-gradient(165deg, #F2F0E9 0%, #E8E6DC 100%); }

/* media → rounded, soft shadow, gentle lift */
.split__media { border-radius: var(--radius); box-shadow: var(--shadow-lg); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.split__media:hover { transform: translateY(-6px); box-shadow: 0 42px 92px -32px rgba(37,53,80,0.38), 0 10px 28px rgba(21,23,27,0.10); }
.split__media .frame { inset: 14px; border-radius: calc(var(--radius) - 8px); border-color: rgba(255,255,255,0.45); }
.figure { border-radius: var(--radius); box-shadow: var(--shadow-md); }

/* contained graphic card (pie chart etc.) */
.media-card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 52px); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.media-card:hover { transform: translateY(-6px); box-shadow: 0 42px 92px -32px rgba(37,53,80,0.38); }
.media-card img { width: 100%; height: auto; object-fit: contain; }

/* buttons → pill + lift */
.btn { border-radius: var(--pill); transition: color .5s var(--ease), border-color .5s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); }
.btn--solid { box-shadow: 0 12px 28px -10px rgba(37,53,80,0.55); }
.btn--solid:hover { box-shadow: 0 18px 36px -10px rgba(37,53,80,0.65); transform: translateY(-2px); }

/* pillars → floating cards */
.pillars { border-top: none; background: transparent; gap: clamp(16px, 2vw, 24px); }
.pillar { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), box-shadow .5s var(--ease); overflow: hidden; padding: clamp(34px, 3vw, 44px) clamp(28px, 2.5vw, 38px); }
.pillar + .pillar { border-left: 1px solid var(--line-soft); }
.pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.pillar::after { top: auto; bottom: 0; height: 3px; border-radius: 0; background: linear-gradient(90deg, var(--navy), var(--gold)); }
.pillar.is-visible::after { width: 100%; }
.pillar__n { display: inline-flex; align-items: center; gap: 11px; font-style: italic; }
.pillar__n::after { content:''; width: 22px; height:1px; background: var(--gold-line); }

/* feature cards */
.feature-grid { background: transparent; border: none; gap: clamp(14px, 1.6vw, 20px); }
.feature { border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.feature:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

/* scrolled header gets a soft shadow */
.site-header.scrolled { box-shadow: 0 10px 30px -18px rgba(21,23,27,0.28); }

/* page-hero rounded image cards on interior pages keep richness too */
.split__media, .media-card, .figure { will-change: transform; }

/* =========================================================================
   INSTITUTIONAL LAYER — restrained, professional, serious
   Refined ribbon, clean rules, side-by-side pillars, bare figures
   ========================================================================= */

/* ---- hero refinements ---- */
.hero__media { max-height: 100vh; min-height: 560px; }
.hero__media::after { background: linear-gradient(110deg, rgba(8,11,16,0.72) 0%, rgba(8,11,16,0.35) 48%, rgba(8,11,16,0.05) 100%), linear-gradient(0deg, rgba(8,11,16,0.55), transparent 50%); }
.hero__copy { bottom: clamp(80px, 11vw, 140px); }
.hero__copy .h-hero { font-style: italic; font-weight: 400; font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 1.04; text-shadow: 0 2px 30px rgba(0,0,0,0.35); max-width: 22ch; }
.hero__copy .serif-lead { font-style: italic; max-width: 36ch; text-shadow: 0 2px 18px rgba(0,0,0,0.45); }
.hero__copy .kicker { color: var(--steel); letter-spacing: 0.32em; font-size: 11px; }
.hero__copy .kicker::before { background: var(--steel); width: 36px; }
.hero__tagline { font-family: var(--display); font-style: italic; font-size: clamp(13px, 1vw, 15px); letter-spacing: 0.06em; text-transform: none; color: rgba(255,255,255,0.78); }
.hero__tagline::before { background: var(--steel); width: 32px; }

/* ---- credentials ribbon (static, single-line, restrained) ---- */
.ribbon { background: var(--ink); color: var(--on-dark); padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
.ribbon__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; gap: clamp(14px, 2.4vw, 40px); }
.ribbon__list li { display: inline-flex; align-items: baseline; gap: 10px; flex: 0 1 auto; min-width: 0; justify-content: center; position: relative; white-space: nowrap; }
.ribbon__list li + li::before { content: ''; position: absolute; left: calc(-1 * clamp(8px, 1.2vw, 20px)); top: 50%; transform: translateY(-50%); width: 1px; height: 20px; background: rgba(255,255,255,0.14); }
.ribbon__k { font-family: var(--display); font-weight: 500; font-size: clamp(16px, 1.35vw, 20px); color: #fff; letter-spacing: 0.003em; line-height: 1.2; }
.ribbon__v { font-family: var(--sans); font-size: clamp(9.5px, 0.78vw, 11px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-dim); line-height: 1.4; }
@media (max-width: 860px) {
  .ribbon__list { flex-wrap: wrap; flex-direction: column; gap: 12px; align-items: flex-start; }
  .ribbon__list li + li::before { display: none; }
}

/* ---- ornamental section rule: gradient hairline + gold center diamond ---- */
.rule-sm {
  display: inline-block;
  position: relative;
  width: clamp(82px, 8vw, 112px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--navy-hi) 18%, var(--navy-hi) 82%, transparent);
  opacity: 0.85;
  vertical-align: middle;
  overflow: visible;
}
.rule-sm::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
}
.bg-cream .rule-sm::after { box-shadow: 0 0 0 2px var(--cream); }
.bg-dark .rule-sm, .bg-navy .rule-sm, .rule-sm--on-dark {
  background: linear-gradient(90deg, transparent, var(--steel) 18%, var(--steel) 82%, transparent);
  opacity: 1;
}
.bg-dark .rule-sm::after, .bg-navy .rule-sm::after, .rule-sm--on-dark::after {
  box-shadow: 0 0 0 2px rgba(13,17,24,0.6);
}

/* ---- full-row soft divider between text blocks ---- */
.divider-soft { height: 1px; background: var(--line); margin-block: 0; }
.bg-dark .divider-soft, .bg-navy .divider-soft { background: var(--line-dark); }

/* ---- bare figure: image only, no card, no shadow, no rounded chrome ---- */
.figure-bare { position: relative; align-self: stretch; min-height: 320px; overflow: hidden; }
.figure-bare img { width: 100%; height: 100%; object-fit: contain; max-height: 520px; }
.figure-bare--tall img { object-fit: cover; max-height: 560px; min-height: 380px; border-radius: 4px; }
.split .figure-bare { display: flex; align-items: center; justify-content: center; }

/* ---- premise headline (italic serif, navy) ---- */
.premise-title { font-family: var(--display); font-style: italic; font-weight: 500; line-height: 1.06; color: var(--navy); font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.005em; max-width: 18ch; }

/* ---- premise section (subtle gradient + polished figure) ---- */
.section--premise {
  background:
    radial-gradient(ellipse at top right, rgba(184,153,104,0.05), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(37,53,80,0.03), transparent 60%);
}
.premise-fig { display: flex; flex-direction: column; align-items: center; gap: 18px; align-self: end; width: 100%; padding-bottom: clamp(8px, 1.4vw, 24px); }
.premise-fig__wrap { position: relative; width: 100%; padding: clamp(20px, 3vw, 40px); }
.premise-fig__wrap img { width: 100%; height: auto; display: block; transition: transform 1.2s var(--ease); }
.premise-fig:hover .premise-fig__wrap img { transform: scale(1.03); }
.premise-fig__corner { position: absolute; bottom: 14px; right: 14px; width: 10px; height: 10px; background: var(--navy); display: block; transition: width .5s var(--ease), background .5s var(--ease); }
.premise-fig:hover .premise-fig__corner { width: 22px; background: var(--gold); }
.premise-fig__caption { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(13px, 1vw, 14.5px); color: var(--muted); margin: 0; text-align: center; letter-spacing: 0.01em; }

/* ---- upright serif big heading (Our Edge, Where Discipline Meets Opportunity) ---- */
.h-serif-big { font-family: var(--display); font-weight: 500; font-style: normal; line-height: 1.06; color: var(--navy); font-size: clamp(2rem, 3.8vw, 3rem); letter-spacing: -0.003em; margin: 0; }

/* ---- rich institutional body type (editorial serif, generous leading) ---- */
.body-rich { font-family: var(--display); font-weight: 400; font-size: clamp(17.5px, 1.32vw, 19.5px); line-height: 1.58; color: var(--ink-2); letter-spacing: 0.003em; max-width: 64ch; }
.body-rich + .body-rich { margin-top: clamp(14px, 1.3vw, 20px); }
.body-rich em { font-style: italic; }
.body-rich strong { font-weight: 500; }

/* ---- lede paragraph (first paragraph after H2, slightly larger, italic accent) ---- */
.body-lede { font-family: var(--display); font-weight: 500; font-style: italic; font-size: clamp(19px, 1.55vw, 22px); line-height: 1.5; color: var(--navy); letter-spacing: 0.002em; max-width: 60ch; }

/* ---- Our Edge column split (slightly favor the text side, tighter) ---- */
.split--edge { grid-template-columns: 1.15fr 1fr; gap: clamp(36px, 4vw, 72px); align-items: start; }
@media (max-width: 860px) { .split--edge { grid-template-columns: 1fr; } }

/* ---- pillar stack (right column under Our Edge) — soft shadow, clean ---- */
.pillar-stack { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 22px); }
.pillar-card { background: #fff; border: 1px solid rgba(21,23,27,0.05); border-radius: 6px; padding: clamp(24px, 2.4vw, 30px) clamp(26px, 2.6vw, 32px); transition: transform .4s var(--ease), box-shadow .4s var(--ease); position: relative; box-shadow: 0 2px 8px rgba(21,23,27,0.04), 0 14px 36px -18px rgba(37,53,80,0.18); overflow: hidden; }
.pillar-card:hover { transform: translateY(-3px); box-shadow: 0 4px 14px rgba(21,23,27,0.06), 0 22px 48px -20px rgba(37,53,80,0.28); }
.pillar-card__title { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); margin: 0 0 12px; position: relative; z-index: 2; }
.pillar-card__body { font-family: var(--sans); font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 0; position: relative; z-index: 2; }

/* Watermark variant for home pillars (smaller, scaled for narrow stacked cards) */
.pillar-stack--watermark .pillar-card {
  background:
    radial-gradient(ellipse at top right, rgba(184,153,104,0.06), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(37,53,80,0.035), transparent 60%),
    #fff;
}
.pillar-card__corner { position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; background: var(--gold); display: block; z-index: 3; transition: width .5s var(--ease), background .5s var(--ease); }
.pillar-card:hover .pillar-card__corner { width: 18px; background: var(--navy); }
.pillar-card__watermark {
  position: absolute;
  bottom: -6px;
  right: 0;
  left: 0;
  text-align: right;
  padding-right: clamp(18px, 2vw, 28px);
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4.6rem, 7vw, 6.5rem);
  color: var(--navy);
  opacity: 0.07;
  line-height: 0.75;
  letter-spacing: -0.04em;
  pointer-events: none;
  z-index: 1;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  user-select: none;
}
.pillar-card:hover .pillar-card__watermark { opacity: 0.10; transform: translateY(-4px); }

/* ---- legacy stats-display (compat) ---- */
.stats-display { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; text-align: right; margin-top: 24px; }
.stat-display { font-family: var(--display); font-weight: 500; font-style: italic; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; color: var(--navy); margin: 0; white-space: nowrap; }

/* ---- inline stats (compact, sits under the leadership quote in Our Edge) ---- */
.stats-inline { display: flex; align-items: center; gap: clamp(22px, 3vw, 40px); max-width: 38ch; padding-top: clamp(18px, 2vw, 26px); border-top: 1px solid rgba(21,23,27,0.10); }
.stats-inline__item { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.stats-inline__num { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.05; color: var(--navy); letter-spacing: -0.003em; margin: 0; white-space: nowrap; }
.stats-inline__num .count { display: inline-block; min-width: 1.4ch; text-align: right; font-variant-numeric: tabular-nums; }
.stats-inline__num .stats-inline__lbl { font-style: italic; font-weight: 500; font-size: 0.65em; color: var(--navy-hi); margin-left: 4px; letter-spacing: 0; }
.stats-inline__cap { font-family: var(--sans); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0; }
.stats-inline__divider { width: 1px; height: clamp(32px, 4vw, 48px); background: rgba(21,23,27,0.15); flex: none; }
@media (max-width: 720px) {
  .stats-inline { flex-direction: column; align-items: flex-start; gap: 16px; }
  .stats-inline__divider { width: 60px; height: 1px; }
}

/* ---- horizontal stats row (centered, animated) — legacy, kept for compat ---- */
.stats-row { margin-top: clamp(48px, 6vw, 84px); padding-top: clamp(36px, 4vw, 56px); border-top: 1px solid rgba(21,23,27,0.10); display: flex; align-items: center; justify-content: center; gap: clamp(40px, 8vw, 120px); flex-wrap: wrap; }
.stats-row__item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.stats-row.is-visible .stats-row__item { opacity: 1; transform: none; }
.stats-row.is-visible .stats-row__item:nth-child(3) { transition-delay: .18s; }
.stats-row__num { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1; color: var(--navy); letter-spacing: -0.005em; margin: 0; white-space: nowrap; }
.stats-row__num .count { display: inline-block; min-width: 1.6ch; text-align: right; font-variant-numeric: tabular-nums; }
.stats-row__num .stats-row__lbl { font-style: italic; font-weight: 500; font-size: 0.6em; color: var(--navy-hi); margin-left: 6px; letter-spacing: 0; }
.stats-row__cap { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin: 0; }
.stats-row__divider { width: 1px; height: clamp(54px, 7vw, 96px); background: linear-gradient(180deg, transparent, rgba(21,23,27,0.20), transparent); }
@media (max-width: 720px) {
  .stats-row { flex-direction: column; gap: 28px; }
  .stats-row__divider { width: clamp(60px, 30vw, 120px); height: 1px; background: linear-gradient(90deg, transparent, rgba(21,23,27,0.20), transparent); }
}

/* ---- CINEMATIC CONTENT SECTION (safe-door bg, lighter overlay, white text, parallax) ---- */
.section-cinematic { position: relative; padding-block: clamp(80px, 10vw, 140px); overflow: hidden; isolation: isolate; background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--on-dark); }
.section-cinematic__overlay { position: absolute; inset: 0; z-index: 0; background:
  linear-gradient(100deg, rgba(13,17,24,0.78) 0%, rgba(13,17,24,0.55) 55%, rgba(13,17,24,0.30) 100%),
  linear-gradient(180deg, rgba(13,17,24,0.20) 0%, rgba(13,17,24,0.55) 100%);
}
.section-cinematic__overlay::before, .section-cinematic__overlay::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(184,153,104,0.45) 25%, rgba(184,153,104,0.45) 75%, transparent); }
.section-cinematic__overlay::before { top: 0; }
.section-cinematic__overlay::after { bottom: 0; }
.section-cinematic__wrap { position: relative; z-index: 1; }
.section-cinematic .h-serif-big { color: #fff; font-style: italic; font-weight: 400; line-height: 1.04; font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
.section-cinematic .body-rich { color: rgba(255,255,255,0.86); }
.kicker--on-dark { color: var(--steel); }
.kicker--on-dark::before { background: var(--steel); }
.h-serif-big--on-dark { color: #fff; }
.rule-sm--on-dark { background: var(--gold) !important; opacity: .85; height: 1px; width: 64px; }
.body-rich--on-dark { color: rgba(255,255,255,0.86); }
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .section-cinematic { background-attachment: fixed; }
}

/* ---- legacy bridge band (compat — no longer used on home) ---- */
.bridge-band { display: none; }
.bridge-band-old { position: relative; height: clamp(280px, 36vh, 380px); overflow: hidden; display: flex; align-items: center; justify-content: center; isolation: isolate; background-size: cover; background-position: center 30%; background-repeat: no-repeat; }
.bridge-band__overlay { position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(120% 80% at 50% 50%, rgba(13,17,24,0.45) 0%, rgba(13,17,24,0.88) 80%),
  linear-gradient(180deg, rgba(13,17,24,0.35) 0%, rgba(13,17,24,0.78) 100%);
}
.bridge-band__overlay::before, .bridge-band__overlay::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(184,153,104,0.5) 30%, rgba(184,153,104,0.5) 70%, transparent); }
.bridge-band__overlay::before { top: 0; }
.bridge-band__overlay::after { bottom: 0; }
.bridge-band__inner { position: relative; z-index: 2; text-align: center; padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.bridge-band__mark { width: clamp(58px, 6vw, 80px); height: auto; filter: invert(1) brightness(1.7); opacity: 0.95; }
.bridge-band__rule { display: block; width: 0; height: 1px; background: var(--gold); transition: width 1.2s var(--ease) .2s; }
.bridge-band__inner.is-visible .bridge-band__rule { width: clamp(80px, 12vw, 160px); }
.bridge-band__line { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 1.8vw, 1.55rem); color: #fff; letter-spacing: 0.01em; margin: 0; opacity: 0; transform: translateY(8px); transition: opacity .9s var(--ease) .35s, transform .9s var(--ease) .35s; }
.bridge-band__inner.is-visible .bridge-band__line { opacity: 1; transform: none; }

/* parallax-fixed on capable browsers, falls back to scroll on mobile */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .bridge-band { background-attachment: fixed; }
}

/* ---- CTA band → quiet cream, tight, with disclosure ---- */
.cta-band { background: var(--cream); padding-block: clamp(48px, 5.5vw, 72px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cta-band__title { font-family: var(--display); font-style: italic; font-weight: 500; line-height: 1.12; color: var(--navy); font-size: clamp(1.6rem, 2.8vw, 2.2rem); letter-spacing: -0.005em; margin: 0; }
.cta-band__bridge { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--navy-hi); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; max-width: 58ch; margin: 0 auto 22px; letter-spacing: 0.005em; }
.cta-band__inner { max-width: 720px; margin-inline: auto; }
.cta-band__disc-wide { max-width: 92ch; margin-inline: auto; text-align: left; }
@media (max-width: 720px) {
  .cta-band__disc-wide { text-align: left; }
}
.cta-band__sub { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--muted); margin-top: 14px; max-width: 56ch; margin-inline: auto; }
.cta-band__actions { margin-top: 24px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-band__disc { font-family: var(--sans); font-size: 12px; line-height: 1.65; color: var(--faint); margin-top: 28px; max-width: 64ch; margin-inline: auto; }
.cta-band__glow { display: none; }
.cta-band .premise-title { color: var(--navy); margin-inline: auto; max-width: 22ch; text-align: center; font-size: clamp(1.6rem, 2.8vw, 2.2rem); }

/* ---- footer: remove the gold gradient ribbon, restore clean navy rule ---- */
.site-footer { border-top: 3px solid var(--navy); }
.site-footer::before { display: none; }

/* ---- selection ---- */
::selection { background: var(--navy); color: #fff; }

/* ---- section rhythm: keep tight, don't over-pad ---- */
.section { padding-block: clamp(60px, 7vw, 96px); }

/* ---- responsive heading tone-down ---- */
@media (max-width: 720px) {
  .premise-title { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .hero__copy .h-hero { font-size: clamp(2rem, 8.5vw, 3rem); }
}

/* ---- compatibility shims (older classes still referenced on interior pages) ---- */
.h-display { font-family: var(--display); font-weight: 500; line-height: 1.08; color: var(--ink); font-size: clamp(1.8rem, 3vw, 2.6rem); }
.pull { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.4; color: var(--ink); padding-left: 22px; border-left: 2px solid var(--navy-hi); }
.kicker--gold { color: var(--navy-hi); }
.kicker--gold::before { background: var(--navy-hi); }
.orn { display: none; }
.wave { display: none; }
.hero__seal { display: none; }
.marquee { display: none; }
.media-card { background: transparent; border: none; box-shadow: none; padding: 0; }
.media-card:hover { transform: none; box-shadow: none; }
.stat { background: #fff; border: 1px solid var(--line-soft); border-radius: 6px; box-shadow: var(--shadow-sm); padding: clamp(22px, 2.5vw, 32px); position: relative; overflow: hidden; transition: border-color .4s var(--ease); }
.stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--navy); }
.stat:hover { border-color: var(--navy-hi); transform: none; box-shadow: var(--shadow-md); }


/* Footer LinkedIn link (company has LinkedIn only) */
.footer-linkedin {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer-linkedin:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

/* ---- legal pages (qualifications / disclosures / privacy): text spans the full wrap ---- */
.section--legal .body-rich,
.section--legal .body-lede,
.section--legal .page-note { max-width: none; }
.section--legal .body-rich { line-height: 1.66; } /* longer lines read better with a touch more leading */

/* ---- back-to-top square (pages that include a .to-top button, e.g. experience) ---- */
.to-top {
  position: fixed; right: clamp(18px, 3vw, 30px); bottom: clamp(18px, 3vw, 30px); z-index: 55;
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 4px; color: var(--navy);
  box-shadow: 0 10px 30px -12px rgba(21,23,27,0.28);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s var(--ease),
              background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--navy); color: #fff; border-color: var(--navy); transform: translateY(-3px); }
.to-top svg { display: block; }