/* ==========================================================================
   Bond Financial — Site Styles
   Brand palette (logo-derived, exact): navy #003767, near-black #231F20,
   gray #939598, white #FFFFFF. No other hues.
   Type: EB Garamond (display/headings), Raleway (body/UI).
   ========================================================================== */

/* ---------- Fonts (self-hosted, variable) ---------- */
@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fonts/EBGaramond-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fonts/EBGaramond-Italic-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../assets/fonts/Raleway-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../assets/fonts/Raleway-Italic-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --navy: #003767;
  --ink: #231f20;
  --gray: #939598;
  --white: #ffffff;

  /* functional surfaces built only from approved colors */
  --paper: #ffffff;
  --paper-soft: #f4f5f6;          /* near-white wash (gray at low opacity, flattened) */
  --line: rgba(147, 149, 152, 0.35);
  --navy-overlay: rgba(0, 55, 103, 0.66);
  --ink-overlay: rgba(35, 31, 32, 0.45);

  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1500px;              /* standard content width site-wide */
  --maxw-narrow: 900px;        /* readable single-column measure */
  --panel-w: 1140px;           /* shared content width for homepage hero + tier panels */
  --gutter: clamp(1.25rem, 4vw, 4rem);

  --header-h: 96px;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  color: var(--navy);
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.5rem, 1.6rem + 4.4vw, 4.75rem); font-weight: 500; }
h2 { font-size: clamp(2rem, 1.4rem + 2.7vw, 3.25rem); }
h3 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); }
h4 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); }
p { margin: 0 0 1.25rem; }
strong, b { font-weight: 700; }
em, i { font-style: italic; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--maxw-narrow); }
.container--wide { max-width: 1500px; }
.section { padding-block: clamp(3.5rem, 2rem + 6vw, 8rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.section--navy { background: var(--navy); color: var(--white); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); }
.section--soft { background: var(--paper-soft); }
.section--navy a { color: var(--white); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 0.55rem;
  display: block;
}
/* tight eyebrow → heading pairing */
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3, .eyebrow + h4 { margin-top: 0; }
/* What We Do — five-elements diagram centered above the section */
.vex-diagram-row { margin-bottom: clamp(2rem, 4vw, 3rem); }
.vex-diagram { display: block; width: 100%; max-width: 950px; height: auto; margin-inline: auto; }
.section--navy .eyebrow { color: rgba(255, 255, 255, 0.7); }
.lede { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.6; }
.measure { max-width: 68ch; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border: 1.5px solid var(--navy);
  background: var(--navy);
  color: var(--white);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn:hover { background: transparent; color: var(--navy); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--white); }
.btn--on-dark { border-color: var(--white); background: transparent; color: var(--white); }
.btn--on-dark:hover { background: var(--white); color: var(--navy); }
.textlink {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.textlink::after { content: "\2192"; transition: transform 0.25s var(--ease); }
.textlink:hover { text-decoration: none; }
.textlink:hover::after { transform: translateX(4px); }
.section--navy .textlink { color: var(--white); }

/* ---------- Skip link & focus ---------- */
.skip-link {
  position: absolute; left: 1rem; top: -100px;
  background: var(--navy); color: var(--white);
  padding: 0.75rem 1.25rem; z-index: 1000; transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.section--navy :focus-visible, .hero :focus-visible { outline-color: var(--white); }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
/* header inner spans full viewport width */
.site-header .container { max-width: none; }

/* Glassmorphism once scrolled.
   Painted on a ::before layer rather than on .site-header itself: a
   backdrop-filter establishes a containing block for fixed-position
   descendants, which resolved the open mobile nav (position:fixed) against
   the header box instead of the viewport and clipped it to header height.
   Keep the filter off the header element. */
.site-header::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 1px 0 var(--line);
  transition: opacity 0.35s var(--ease);
}
.site-header.is-solid::before { opacity: 1; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header::before { background: rgba(255, 255, 255, 0.95); }
}

/* utility bar */
.utility-bar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  transition: border-color 0.35s var(--ease);
}
.site-header.is-solid .utility-bar { border-bottom-color: var(--line); }
.utility-bar__inner {
  display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem;
  min-height: 42px;
}
.utility-bar a {
  font-family: var(--font-body); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--white); display: inline-flex; align-items: center; gap: 0.5rem;
}
.site-header.is-solid .utility-bar a { color: var(--navy); }
.utility-bar a:hover { text-decoration: none; opacity: 0.75; }
.utility-bar .util-social svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* main bar */
.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; }
.brand img, .brand svg { height: 46px; width: auto; }
.brand .logo-default { display: block; }
.brand .logo-solid { display: none; }
.site-header.is-solid .brand .logo-default { display: none; }
.site-header.is-solid .brand .logo-solid { display: block; }

.primary-nav > ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: clamp(1.25rem, 2vw, 2.5rem);
}
.primary-nav a {
  font-family: var(--font-body); font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--white); display: inline-flex; align-items: center; gap: 0.35rem;
  padding-block: 0.5rem; white-space: nowrap;
}
.nav-cta--mobile { display: none; }
.site-header.is-solid .primary-nav > ul > li > a { color: var(--navy); }
.primary-nav a:hover { text-decoration: none; opacity: 0.78; }
.has-sub > a::after {
  content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s var(--ease);
}
.has-sub { position: relative; }
.has-sub:hover > a::after, .has-sub:focus-within > a::after { transform: rotate(225deg) translateY(2px); }
.submenu {
  list-style: none; margin: 0; padding: 0.6rem 0;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
  min-width: 270px; background: var(--white); box-shadow: 0 18px 40px rgba(35,31,32,0.16);
  opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  border-top: 3px solid var(--navy);
}
.has-sub:hover > .submenu, .has-sub:focus-within > .submenu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.submenu a {
  display: block; color: var(--ink); text-transform: none; letter-spacing: 0.01em;
  font-size: 0.95rem; font-weight: 500; padding: 0.6rem 1.5rem; opacity: 1;
}
.submenu a:hover { background: var(--paper-soft); color: var(--navy); opacity: 1; }
.nav-cta { margin-left: 0.5rem; }

/* burger */
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer; padding: 0.5rem;
  width: 46px; height: 46px;
}
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--white); margin: 5px auto; transition: 0.3s var(--ease); }
.site-header.is-solid .nav-toggle span { background: var(--navy); }

@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .primary-nav {
    position: fixed; inset: 0 0 0 auto; width: min(86vw, 380px);
    background: var(--navy); padding: calc(var(--header-h) + 1rem) 2rem 2rem;
    transform: translateX(100%); transition: transform 0.35s var(--ease);
    overflow-y: auto; box-shadow: -20px 0 50px rgba(35,31,32,0.25);
  }
  .primary-nav.is-open { transform: translateX(0); }
  .primary-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav a, .site-header.is-solid .primary-nav a { color: var(--white); padding-block: 0.9rem; }
  .primary-nav > ul > li { border-bottom: 1px solid rgba(255,255,255,0.14); }
  .has-sub > a::after { margin-left: auto; }
  .submenu {
    position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none;
    background: transparent; border-top: 0; padding: 0 0 0.75rem 1rem; min-width: 0;
    display: none;
  }
  /* the desktop hover rule above resets .submenu's transform; it outranks the
     transform:none here on specificity, so restate it or the static drawer
     submenu slides half its width left on hover. */
  .has-sub:hover > .submenu, .has-sub:focus-within > .submenu { transform: none; }
  .has-sub.is-expanded .submenu { display: block; }
  .submenu a { color: rgba(255,255,255,0.82); padding: 0.5rem 0; }
  .submenu a:hover { background: transparent; color: var(--white); }
  .nav-cta--mobile { display: block; margin: 1rem 0 0; }
  .nav-cta .btn { width: 100%; justify-content: center; }
  /* the burger sits on top of the open drawer and doubles as its close
     button — the panel is a positioned sibling and would otherwise paint
     over it, leaving no way out of the menu */
  .nav-toggle { position: relative; z-index: 2; }
  .site-header .nav-toggle[aria-expanded="true"] span { background: var(--white); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ==========================================================================
   Homepage — cinematic full-viewport panels
   ========================================================================== */
/* free, fluid scrolling on the homepage (no snap); smooth anchor/dot navigation */
html:has(body.home), body.home { scroll-behavior: smooth; }

/* homepage: navy glass on scroll (every panel is dark, so keep white text) */
.home .site-header::before {
  background: rgba(0, 55, 103, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: none;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .home .site-header::before { background: rgba(0, 55, 103, 0.85); }
}
.home .site-header.is-solid .utility-bar { border-bottom-color: rgba(255,255,255,0.18); }
.home .site-header.is-solid .utility-bar a,
.home .site-header.is-solid .primary-nav > ul > li > a { color: var(--white); }
.home .site-header.is-solid .brand .logo-default { display: block; }
.home .site-header.is-solid .brand .logo-solid { display: none; }
.home .site-header.is-solid .nav-toggle span { background: var(--white); }

/* section dots */
.scroll-dots {
  position: fixed; left: clamp(1rem, 2.5vw, 2.75rem); top: 50%; transform: translateY(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 30px;
}
.scroll-dot {
  position: relative; width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.7); background: transparent; cursor: pointer; padding: 0;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.scroll-dot.is-active { background: var(--white); transform: scale(1.25); }
@media (max-width: 760px) { .scroll-dots { display: none; } }

/* scroll cue on hero */
.scroll-cue { position: absolute; left: 50%; bottom: clamp(1.5rem, 4vh, 3rem); transform: translateX(-50%); z-index: 2; width: 24px; height: 38px; border: 1.5px solid rgba(255,255,255,0.7); border-radius: 14px; }
.scroll-cue::before { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 2px; background: var(--white); transform: translateX(-50%); animation: scrollcue 1.8s var(--ease) infinite; }
@keyframes scrollcue { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 12px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue::before { animation: none; } }

/* tier panels */
.home-tier {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  color: var(--white); overflow: hidden;
}
.home-tier__bg {
  position: absolute; left: 0; right: 0; top: -12%; height: 124%;
  background-size: cover; background-position: center; will-change: transform;
}
.home-tier::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(35,31,32,0.55), rgba(0,55,103,0.72));
}
.home-tier__inner { position: relative; z-index: 2; width: 100%; max-width: var(--panel-w); margin-inline: auto; text-align: center; padding-block: var(--header-h); }
.home-tier .num { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: rgba(255,255,255,0.75); display: block; margin-bottom: 0.75rem; }
.home-tier h2 { color: var(--white); font-size: clamp(2.4rem, 1.6rem + 4vw, 4.5rem); margin-bottom: 1.5rem; }
.home-tier__body { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); line-height: 1.7; color: rgba(255,255,255,0.92); max-width: 68ch; margin-inline: auto; margin-bottom: 1.75rem; }
.home-tier .textlink { color: var(--white); }

.home .hero__sub, .home-tier__body {
  font-size: 19px;
}

/* ==========================================================================
   Hero (homepage)
   ========================================================================== */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  color: var(--white); overflow: hidden;
}
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s var(--ease), transform 8s linear;
  transform: scale(1.06);
}
.hero__slide.is-active { opacity: 1; transform: scale(1.14); }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--ink-overlay), var(--navy-overlay));
  z-index: 1;
}
.hero__inner { position: relative; z-index: 2; width: 100%; max-width: 1500px; margin-inline: auto; text-align: center; padding-block: var(--header-h); }
.hero h1 { color: var(--white); margin-bottom: 1.5rem; }
.hero h1 .accent { font-style: italic; }
.hero__sub { max-width: 68ch; margin-inline: auto; font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); line-height: 1.7; color: rgba(255,255,255,0.92); }
.hero__dots { position: absolute; left: var(--gutter); bottom: clamp(2rem,5vh,4rem); z-index: 2; display: flex; gap: 0.6rem; }
.hero__dot { width: 38px; height: 3px; background: rgba(255,255,255,0.4); border: 0; padding: 0; cursor: pointer; }
.hero__dot.is-active { background: var(--white); }

/* ==========================================================================
   Page banner (interior pages)
   ========================================================================== */
.page-banner {
  position: relative; min-height: clamp(340px, 52vh, 560px); display: flex; align-items: flex-end;
  color: var(--white); overflow: hidden;
}
.page-banner__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.page-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35,31,32,0.25), var(--navy-overlay)); }
.page-banner__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(2.5rem, 6vh, 5rem) clamp(2.5rem, 5vh, 4rem); padding-top: calc(var(--header-h) + 2rem); }
.page-banner h1 { color: var(--white); margin: 0; }
.page-banner .eyebrow { color: rgba(255,255,255,0.78); }
.page-banner__sub { color: var(--white); font-family: var(--font-body); font-style: italic; font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem); line-height: 1.5; max-width: 42ch; margin: 0.9rem 0 0; text-wrap: pretty; }
.breadcrumb { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-bottom: 1rem; }
.breadcrumb a { color: inherit; }

/* ==========================================================================
   Generic content
   ========================================================================== */
.prose > * + * { margin-top: 1.25rem; }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 2rem; }
.prose p { max-width: 70ch; }
.section--navy .prose p { color: rgba(255,255,255,0.9); }

.pull-quote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.35;
  border-left: 3px solid var(--gray); padding-left: clamp(1.25rem, 3vw, 2.5rem); margin: 2.5rem 0;
}
.pull-quote cite { display: block; font-style: normal; font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-top: 1rem; }
.section--navy .pull-quote cite { color: rgba(255,255,255,0.8); }

/* ---------- Wealth-management circle: hover states + side pop-ups ----------
   The four numerals AND the four quadrant headlines were lifted out of the PNG
   (whose lobes/fields are now flat) into wm-num-0N / wm-label-0N alpha masks,
   so each can be recoloured and scaled without touching the artwork. At rest
   masks + colours reproduce the original pixel-for-pixel. All geometry is a %
   of the 1800px canvas; note the art is NOT centred in it — the circle sits at
   4.111%/4.333%, 82.11% wide, because the export reserves drop-shadow room. */
.wmc { position: relative; width: 100%; max-width: 576px; margin-inline: auto; }
@media (max-width: 600px) { .wmc { max-width: 408px; } }
.wmc .vex-diagram { max-width: none; }   /* the wrapper owns the size now */

/* Every mark is laid out at its HOVERED size and scaled DOWN to rest, never up:
   scaling a mask up blurs mid-animation, because the browser rasterises the
   layer once at layout size and then stretches that bitmap. Don't add
   will-change here either — it pins the rasterisation and the blur returns. */
.wmc__mark {
  position: absolute; pointer-events: none;
  background-color: var(--wmc-ink);
  -webkit-mask: var(--wmc-mask) center / contain no-repeat;
          mask: var(--wmc-mask) center / contain no-repeat;
  transform: scale(var(--wmc-s));
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
/* numerals — hover scale 1.16, so the box is 6.667% x 1.16 and rests at 1/1.16 */
.wmc__num { width: 7.734%; aspect-ratio: 1; --wmc-s: 0.862; }
.wmc__num--q1 { left: 55.023%; top: 27.943%; --wmc-mask: url("../assets/images/wm-num-01.png"); --wmc-ink: #53668c; --wmc-ink-on: #32537d; }
.wmc__num--q2 { left: 55.163%; top: 55.273%; --wmc-mask: url("../assets/images/wm-num-02.png"); --wmc-ink: #003767; --wmc-ink-on: #002c52; }
.wmc__num--q3 { left: 27.743%; top: 55.323%; --wmc-mask: url("../assets/images/wm-num-03.png"); --wmc-ink: #cfd1da; --wmc-ink-on: #e5e6eb; }
.wmc__num--q4 { left: 27.743%; top: 27.913%; --wmc-mask: url("../assets/images/wm-num-04.png"); --wmc-ink: #909ab2; --wmc-ink-on: #b3b8c8; }
/* headlines — hover scale 1.08 (a two-line block travels much further than a
   numeral at the same factor), so each box is its own size x 1.08 */
.wmc__label { --wmc-s: 0.926; --wmc-ink: #003767; --wmc-ink-on: #002c52; }
.wmc__label--q1 { left: 58.083%; top: 17.359%; width: 15.844%; height: 8.402%; --wmc-mask: url("../assets/images/wm-label-01.png"); }
.wmc__label--q2 { left: 58.863%; top: 64.902%; width: 14.224%; height: 8.575%; --wmc-mask: url("../assets/images/wm-label-02.png"); }
.wmc__label--q3 { left: 17.050%; top: 65.079%; width: 15.120%; height: 8.402%; --wmc-mask: url("../assets/images/wm-label-03.png"); }
.wmc__label--q4 { left: 18.009%; top: 17.359%; width: 13.262%; height: 8.402%; --wmc-mask: url("../assets/images/wm-label-04.png"); }

/* hit areas: four quarter-discs clipped to the ring, minus the centre hub */
.wmc__zones { position: absolute; left: 4.111%; top: 4.333%; width: 82.11%; height: 82.17%; border-radius: 50%; overflow: hidden; }
.wmc__zone {
  position: absolute; width: 50%; height: 50%; padding: 0; border: 0;
  background: none; cursor: pointer; font: inherit; color: transparent;
  overflow: hidden; text-indent: -200vw; white-space: nowrap;
}
.wmc__zone:focus-visible { outline: 2px solid var(--navy); outline-offset: -6px; border-radius: 4px; }
.wmc__zone--1 { top: 0; right: 0; }
.wmc__zone--2 { bottom: 0; right: 0; }
.wmc__zone--3 { bottom: 0; left: 0; }
.wmc__zone--4 { top: 0; left: 0; }
/* the "Relationship Management" hub belongs to no quadrant */
.wmc__hub { position: absolute; left: 50%; top: 50%; width: 19.4%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; }

.wmc__pop {
  position: absolute; z-index: 3; width: 250px;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(35, 31, 32, 0.13);
  padding: 1.15rem 1.3rem 1.25rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
}
.wmc__pop-title { font-family: var(--font-display); font-size: 1.2rem; color: var(--navy); margin: 0 0 0.6rem; line-height: 1.2; }
.wmc__pop ul { list-style: none; margin: 0; padding: 0; }
.wmc__pop li { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.5; color: var(--ink); padding-left: 0.9rem; position: relative; }
.wmc__pop li + li { margin-top: 0.25rem; }
.wmc__pop li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 1px; background: var(--gray); }
/* anchored to the artwork's edges, not the box's, since the art sits off-centre */
.wmc__pop--1 { left: calc(86.22% + 1.25rem); top: 4.333%; }
.wmc__pop--2 { left: calc(86.22% + 1.25rem); bottom: 13.5%; }
.wmc__pop--3 { right: calc(95.89% + 1.25rem); bottom: 13.5%; }
.wmc__pop--4 { right: calc(95.89% + 1.25rem); top: 4.333%; }

.wmc:has(.wmc__zone--1:hover) .wmc__mark--q1, .wmc:has(.wmc__zone--1:focus-visible) .wmc__mark--q1,
.wmc:has(.wmc__zone--2:hover) .wmc__mark--q2, .wmc:has(.wmc__zone--2:focus-visible) .wmc__mark--q2,
.wmc:has(.wmc__zone--3:hover) .wmc__mark--q3, .wmc:has(.wmc__zone--3:focus-visible) .wmc__mark--q3,
.wmc:has(.wmc__zone--4:hover) .wmc__mark--q4, .wmc:has(.wmc__zone--4:focus-visible) .wmc__mark--q4 {
  background-color: var(--wmc-ink-on); --wmc-s: 1;
}
.wmc:has(.wmc__zone--1:hover) .wmc__pop--1, .wmc:has(.wmc__zone--1:focus-visible) .wmc__pop--1,
.wmc:has(.wmc__zone--2:hover) .wmc__pop--2, .wmc:has(.wmc__zone--2:focus-visible) .wmc__pop--2,
.wmc:has(.wmc__zone--3:hover) .wmc__pop--3, .wmc:has(.wmc__zone--3:focus-visible) .wmc__pop--3,
.wmc:has(.wmc__zone--4:hover) .wmc__pop--4, .wmc:has(.wmc__zone--4:focus-visible) .wmc__pop--4 {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s, 0s, 0s;
}

/* No room beside the graphic: keep the interaction, but float the card under
   the circle instead of beside it. It is a tooltip, so overlapping what
   follows while hovering is fine and needs no reserved space.
   Threshold = the width below which a 250px card + 20px gap stops fitting
   next to the 576px graphic; recompute it if either number changes. */
@media (max-width: 1240px) {
  .wmc__pop--1, .wmc__pop--2, .wmc__pop--3, .wmc__pop--4 {
    left: 50%; right: auto; top: 100%; bottom: auto;
    margin-top: 0.75rem; width: min(280px, 92%);
    transform: translate(-50%, 6px);
  }
  .wmc:has(.wmc__zone--1:hover) .wmc__pop--1, .wmc:has(.wmc__zone--1:focus-visible) .wmc__pop--1,
  .wmc:has(.wmc__zone--2:hover) .wmc__pop--2, .wmc:has(.wmc__zone--2:focus-visible) .wmc__pop--2,
  .wmc:has(.wmc__zone--3:hover) .wmc__pop--3, .wmc:has(.wmc__zone--3:focus-visible) .wmc__pop--3,
  .wmc:has(.wmc__zone--4:hover) .wmc__pop--4, .wmc:has(.wmc__zone--4:focus-visible) .wmc__pop--4 {
    transform: translate(-50%, 0);
  }
}
/* Touch: no hover to drive any of it, and the tab list directly below carries
   the same copy — so drop the interaction rather than fake it. */
@media (hover: none) {
  .wmc__zones, .wmc__pop { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wmc__mark, .wmc__pop { transition: none; }
  /* colour still shifts, size does not (NOT transform:none — that would jump
     every mark up to its oversized layout box) */
  .wmc:has(.wmc__zone--1:hover) .wmc__num--q1, .wmc:has(.wmc__zone--2:hover) .wmc__num--q2,
  .wmc:has(.wmc__zone--3:hover) .wmc__num--q3, .wmc:has(.wmc__zone--4:hover) .wmc__num--q4,
  .wmc:has(.wmc__zone--1:focus-visible) .wmc__num--q1, .wmc:has(.wmc__zone--2:focus-visible) .wmc__num--q2,
  .wmc:has(.wmc__zone--3:focus-visible) .wmc__num--q3, .wmc:has(.wmc__zone--4:focus-visible) .wmc__num--q4 { --wmc-s: 0.862; }
  .wmc:has(.wmc__zone--1:hover) .wmc__label--q1, .wmc:has(.wmc__zone--2:hover) .wmc__label--q2,
  .wmc:has(.wmc__zone--3:hover) .wmc__label--q3, .wmc:has(.wmc__zone--4:hover) .wmc__label--q4,
  .wmc:has(.wmc__zone--1:focus-visible) .wmc__label--q1, .wmc:has(.wmc__zone--2:focus-visible) .wmc__label--q2,
  .wmc:has(.wmc__zone--3:focus-visible) .wmc__label--q3, .wmc:has(.wmc__zone--4:focus-visible) .wmc__label--q4 { --wmc-s: 0.926; }
}

/* ---------- 3-up tier cards (homepage) ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 880px) { .tier-grid { grid-template-columns: 1fr; } }
.tier-card { display: flex; flex-direction: column; }
.tier-card .num { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--navy); margin-bottom: 0.75rem; }
.tier-card h3 { margin-bottom: 0.75rem; }
.tier-card p { flex: 1; }

/* ---------- Full-width feature image ---------- */
.feature-img { width: 100%; height: clamp(300px, 46vh, 560px); object-fit: cover; }

/* ---------- Closing CTA line ---------- */
.firm-cta { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.3; color: var(--white); max-width: 22ch; margin: 0 auto 2rem; }

/* ---------- Alternating media rows ---------- */
.media-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.media-row + .media-row { margin-top: clamp(3rem, 6vw, 6rem); }
.media-row__img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.media-row--reverse .media-row__img { order: 2; }
@media (max-width: 860px) {
  .media-row, .media-row--reverse { grid-template-columns: 1fr; gap: 1.75rem; }
  .media-row--reverse .media-row__img { order: 0; }
}

/* image height = paired content height + 100px (set by JS); text vertically centered */
.media-row--fill { align-items: center; }
.media-row--fill .media-row__img img { width: 100%; height: auto; aspect-ratio: auto; object-fit: cover; display: block; }
.media-row--fill .media-row__text { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 860px) { .media-row--fill .media-row__img img { height: clamp(300px, 75vw, 440px); } }

/* layered offset accent behind the photo (peeks into the column gap) */
.media-row--layered .media-row__img { position: relative; }
.media-row--layered .media-row__img > img { position: relative; z-index: 1; }
.media-row--layered .media-row__img::before { content: ""; position: absolute; z-index: 0; background: var(--navy); }
/* offset block sits on the OUTER side, away from the text column */
.media-row--layered:not(.media-row--reverse) .media-row__img::before { inset: 28px 28px -28px -28px; }
.media-row--layered.media-row--reverse .media-row__img::before { inset: 28px -28px -28px 28px; }
@media (max-width: 860px) { .media-row--layered .media-row__img::before { display: none; } }

/* CTA band with blue-cast photo background */
.cta-band { position: relative; overflow: hidden; color: var(--white); }
.cta-band__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,55,103,0.82), rgba(1,29,51,0.9)); }
.cta-band__inner { position: relative; z-index: 2; }
.cta-band .firm-cta { max-width: 28ch; }
.pull-quote--band { border: 0; padding: 0; margin: 0 auto; max-width: 26ch; color: var(--white); }
.pull-quote--band cite { color: rgba(255,255,255,0.8); }

/* ---------- Timeline (Our Story) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding: 0 0 2.25rem 3rem; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--navy); }
.timeline .year { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; color: var(--navy); display: block; margin-bottom: 0.35rem; }
.timeline h3 { font-size: 1.4rem; margin-bottom: 0.4rem; }
.timeline p { margin: 0; max-width: 60ch; }

/* ---------- Team grid ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 820px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; } }
.team-card { text-align: center; }
.team-card .btn { margin-top: 0.25rem; }
.team-card__photo {
  aspect-ratio: 4/5; background: var(--paper-soft); overflow: hidden; margin-bottom: 1.1rem;
  display: flex; align-items: center; justify-content: center;
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__photo.is-placeholder { border: 1px dashed var(--line); color: var(--gray); }
.team-card__photo .ph { font-family: var(--font-display); font-size: 3rem; color: var(--navy); }
.team-card h3 { font-size: 1.45rem; margin-bottom: 0.15rem; }
.team-card .role { font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.9rem; }

/* image placeholder utility */
.img-placeholder {
  background: var(--paper-soft); border: 1px dashed var(--line); color: var(--navy);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.08em; padding: 1.5rem;
}

/* ---------- Bio page ---------- */
.bio { display: grid; grid-template-columns: 360px 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 820px) { .bio { grid-template-columns: 1fr; } }
.bio__photo { aspect-ratio: 4/5; background: var(--paper-soft); overflow: hidden; position: sticky; top: calc(var(--header-h) + 1rem); }
.bio__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .bio__photo { position: static; max-width: 320px; } }

/* ---------- Logo marquee (community / partnerships) ---------- */
.marquee { overflow: hidden; padding-block: 2.5rem; }
.marquee__track { display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 5rem); width: max-content; animation: marquee 60s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track img { height: 56px; width: auto; max-width: 180px; object-fit: contain; opacity: 0.85; filter: grayscale(1); transition: filter 0.3s, opacity 0.3s; }
.marquee__track a:hover img { filter: grayscale(0); opacity: 1; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; row-gap: 2rem; } }

/* ---------- Org link grid (community tier 4) ---------- */
.org-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 2rem; }
.org-grid li { flex: 0 1 300px; text-align: center; border-bottom: 1px solid var(--line); padding: 0.85rem 0; }
.org-grid a { font-weight: 500; }

/* ---------- Process: interactive steps ---------- */
.process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.process-step { background: var(--white); padding: clamp(1.5rem, 2.5vw, 2.25rem); }
.process-step button, .process-step a { all: unset; display: block; cursor: pointer; }
.process-step .step-no { font-family: var(--font-display); font-style: italic; color: var(--navy); font-size: 1.25rem; }
.process-step h3 { font-size: 1.25rem; margin: 0.4rem 0 0.5rem; }
.process-step p { margin: 0; font-size: 0.95rem; }
.process-step:hover, .process-step:focus-within { background: var(--navy); }
.process-step:hover *, .process-step:focus-within * { color: var(--white) !important; }

/* vertical explorer (What We Do — element list + content panel) */
.vex { display: grid; grid-template-columns: 340px 1fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
@media (max-width: 760px) { .vex { grid-template-columns: 1fr; } }
.vex__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.vex__item { all: unset; display: block; cursor: pointer; padding: 1rem 1.5rem; margin-left: -1px; border-left: 2px solid transparent; font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); transition: color 0.25s var(--ease), border-color 0.25s var(--ease); }
.vex__item[aria-selected="true"] { color: var(--navy); border-left-color: var(--navy); }
.vex__item:hover { color: var(--navy); }
.vex__item:focus-visible { outline-offset: -3px; }
.vex__item .i-num { font-style: italic; font-size: 0.9rem; margin-right: 0.65rem; }
.vex__bullets { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.vex__bullets li { position: relative; padding-left: 1.25rem; line-height: 1.5; }
.vex__bullets li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); }
.vex__panel { display: none; }
.vex__panel.is-active { display: block; animation: vexfade 0.4s var(--ease); }
.vex__panel h3 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.25rem); margin: 0 0 1.1rem; }
@keyframes vexfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vex__panel.is-active { animation: none; } }

/* accordion (interactive WM definition) */
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__btn {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 1.4rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); color: var(--navy);
}
.accordion__btn .icon { flex: 0 0 auto; width: 18px; height: 18px; position: relative; }
.accordion__btn .icon::before, .accordion__btn .icon::after { content: ""; position: absolute; background: var(--navy); transition: transform 0.3s var(--ease); }
.accordion__btn .icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.accordion__btn .icon::after { top: 0; left: 8px; width: 2px; height: 18px; }
.accordion__btn[aria-expanded="true"] .icon::after { transform: scaleY(0); }
.accordion__panel { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--ease); }
.accordion__panel-inner { padding: 0 0 1.6rem; }
.accordion__panel p { max-width: 72ch; }

/* ---------- Partner blocks ---------- */
.partner { display: grid; justify-items: center; grid-template-columns: 220px 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; padding-block: clamp(2rem, 4vw, 3.25rem); border-bottom: 1px solid var(--line); }
.partner:last-child { border-bottom: 0; }
@media (max-width: 720px) { .partner { grid-template-columns: 1fr; gap: 1.25rem; } }
.partner__logo img { width: auto; height: auto; max-width: 100%; max-height: 110px; object-fit: contain; }
.partner .partner__logo { 
  justify-items: center
}
/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-block address { font-style: normal; line-height: 1.9; font-size: 1.1rem; }
.map-embed { aspect-ratio: 4/3; width: 100%; border: 0; }
/* contact: details + embedded map, side by side */
.contact-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (max-width: 820px) { .contact-split { grid-template-columns: 1fr; } }
.contact-map iframe { width: 100%; height: 100%; min-height: 480px; border: 0; display: block; }
@media (max-width: 820px) { .contact-map iframe { min-height: 360px; } }

/* ---------- Forms / lead capture ---------- */
.form-field { margin-bottom: 1.25rem; }
.form-field label { display: block; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.5rem; }
.section--navy .form-field label { color: rgba(255,255,255,0.85); }
.form-field .req { color: var(--gray); }
.form-field input {
  width: 100%; padding: 0.95rem 1.1rem; font: inherit; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--line); border-radius: 0;
  transition: border-color 0.2s var(--ease);
}
.form-field input:focus { outline: 0; border-color: var(--navy); }
.form-note { font-size: 0.85rem; color: var(--ink); }

/* ---------- Login cards ---------- */
.login-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.login-card { border: 1px solid var(--line); padding: 2rem; display: flex; flex-direction: column; gap: 1rem; transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease); }
.login-card:hover { box-shadow: 0 18px 40px rgba(35,31,32,0.12); transform: translateY(-3px); }
.login-card h2 { font-size: 1.3rem; margin: 0; }
.login-card__thumb { display: block; border: 1px solid var(--line); background: var(--paper-soft); overflow: hidden; }
.login-card__thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; display: block; transition: transform 0.4s var(--ease); }
.login-card__thumb img[src*="envestnet"] { object-position: top left; } /* keep the left-side nav in frame */
.login-card:hover .login-card__thumb img { transform: scale(1.03); }
.login-card__list { margin: -0.35rem 0 0.25rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.login-card__list li { position: relative; padding-left: 1.25rem; font-size: 0.95rem; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.login-card__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); }
.login-card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Disclosure / fine print ---------- */
/* small print tucked under the paragraph it annotates */
.footnote { font-size: 0.78rem; line-height: 1.6; color: var(--gray); max-width: 56ch; margin: 0.9rem 0 0; }
.prose > .footnote { margin-top: 0.9rem; max-width: 56ch; }  /* beat .prose > * + * / .prose p */
.disclosure { font-size: 0.82rem; line-height: 1.6; color: var(--ink); border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 2.5rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.85); padding-block: clamp(3rem, 5vw, 5rem) 2rem; }
.site-footer a { color: rgba(255,255,255,0.85); }
.site-footer a:hover { color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { height: 42px; margin-bottom: 1.25rem; }
.footer-col-title { color: var(--white); font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 1.1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.6rem; }
.footer-col a { font-size: 0.95rem; }
.footer-contact address { font-style: normal; line-height: 1.8; font-size: 0.95rem; }
.footer-social { display: flex; gap: 1rem; margin-top: 1.25rem; }
.footer-social a { display: inline-flex; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.3); align-items: center; justify-content: center; }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.18); margin-top: clamp(2rem,4vw,3.5rem); padding-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; align-items: center; font-size: 0.8rem; color: rgba(255,255,255,0.65); }
.footer-bottom__links { display: inline-flex; align-items: center; }
.btn-disclosures {
  display: inline-flex; align-items: center;
  padding: 0.45rem 1rem; border: 1px solid rgba(255,255,255,0.4);
  font-weight: 600; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.site-footer a.btn-disclosures:hover { background: var(--white); color: var(--navy); text-decoration: none; }

/* ---------- Reveal-on-scroll (only hides when JS is active) ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* staggered reveal of a block's direct children (homepage hero + tier panels) */
.js .reveal-group > * { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal-group.is-visible > * { opacity: 1; transform: none; }
.js .reveal-group.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.js .reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.16s; }
.js .reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.27s; }
.js .reveal-group.is-visible > *:nth-child(4) { transition-delay: 0.38s; }
@media (prefers-reduced-motion: reduce) { .js .reveal-group > * { opacity: 1; transform: none; } }

/* ---------- Estate-tax modal ---------- */
.modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 1.5rem; }
.modal.is-open { display: flex; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(35,31,32,0.6); }
.modal__dialog { position: relative; background: var(--white); max-width: 520px; width: 100%; padding: clamp(2rem, 4vw, 3rem); box-shadow: 0 30px 80px rgba(35,31,32,0.4); }
.modal__close { position: absolute; top: 1rem; right: 1rem; background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--navy); width: 40px; height: 40px; }
.modal__dialog .eyebrow { margin-bottom: 0.5rem; }
.modal__dialog h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }


/* ==========================================================================
   Our Story — Interactive Timeline Navigator (Option 3)
   ========================================================================== */

    /* ============================================================
       Concept: Interactive Timeline Navigator + Animated Story Panels
       Brand-locked: navy #003767, ink #231F20, gray #939598, white.
       ============================================================ */

    .os3 {
      --os-navy: var(--navy);
      --os-ink: var(--ink);
      --os-gray: var(--gray);
      --os-white: var(--white);
      --os-line: rgba(147, 149, 152, 0.32);
      --os-ease: cubic-bezier(0.33, 1, 0.68, 1);
      color: var(--os-ink);
    }

    /* ---------- Intro lede ---------- */
    .os3-intro { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
    .os3-intro .prose { max-width: var(--maxw-narrow); margin-inline: auto; }
    .os3-intro .lede {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
      line-height: 1.32;
      color: var(--os-navy);
      font-weight: 500;
      margin: 0 0 1.4rem;
    }
    .os3-intro p:not(.lede) {
      font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
      color: var(--os-ink);
      margin: 0 0 1rem;
    }
    .os3-intro .os3-cue {
      color: var(--os-ink);
      font-weight: 600;
      margin-top: 2rem;
    }

    /* ---------- Timeline Navigator ---------- */
    .os3-nav {
      position: sticky;
      top: 138px; /* sits just below the fixed site header (~139px) */
      z-index: 40;
      background: var(--os-navy);
      color: var(--os-white);
      border-block: 1px solid rgba(255, 255, 255, 0.12);
    }
    .os3-nav__inner {
      max-width: var(--maxw);
      margin-inline: auto;
      padding: clamp(0.85rem, 0.6rem + 1vw, 1.4rem) var(--gutter);
    }
    .os3-nav__label {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 0.72rem;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.7);
      text-align: center;
      margin: 0 0 1.6rem;
    }
    .os3-track {
      position: relative;
      display: flex;
      gap: 0;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .os3-track > li { flex: 1 1 0; min-width: 0; display: flex; }
    /* the drawn line — spans from the first dot center to the last */
    .os3-track::before {
      content: "";
      position: absolute;
      left: calc(100% / 14); right: calc(100% / 14); /* 1/(2n) for n=7 markers */
      top: 9px;
      height: 2px;
      background: rgba(255, 255, 255, 0.28);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 1.1s var(--os-ease);
    }
    .os3.is-ready .os3-track::before { transform: scaleX(1); }

    .os3-marker {
      width: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.65rem;
      padding: 0 0.4rem;
      background: transparent;
      border: 0;
      cursor: pointer;
      text-align: center;
      font-family: var(--font-body);
      color: rgba(255, 255, 255, 0.78);
      -webkit-tap-highlight-color: transparent;
    }
    .os3-marker__dot {
      width: 20px; height: 20px;
      border-radius: 999px;
      background: var(--os-navy);
      border: 2px solid rgba(255, 255, 255, 0.55);
      flex: none;
      position: relative;
      z-index: 1;
      transition: transform 0.35s var(--os-ease), border-color 0.35s var(--os-ease), background-color 0.35s var(--os-ease);
    }
    .os3-marker__dot::after {
      content: "";
      position: absolute;
      inset: 3px;
      border-radius: 999px;
      background: var(--os-white);
      transform: scale(0);
      transition: transform 0.35s var(--os-ease);
    }
    .os3-marker__year {
      font-weight: 700;
      font-size: 0.82rem;
      letter-spacing: 0.04em;
      line-height: 1.2;
      transition: color 0.3s var(--os-ease);
    }
    .os3-marker__tag {
      font-size: 0.72rem;
      line-height: 1.3;
      color: rgba(255, 255, 255, 0.55);
      max-width: 16ch;
      margin-inline: auto;
      transition: color 0.3s var(--os-ease);
    }
    .os3-marker:hover .os3-marker__dot,
    .os3-marker:focus-visible .os3-marker__dot {
      border-color: var(--os-white);
      transform: scale(1.12);
    }
    .os3-marker:hover .os3-marker__year,
    .os3-marker:focus-visible .os3-marker__year { color: var(--os-white); }
    .os3-marker:focus-visible {
      outline: 2px solid var(--os-white);
      outline-offset: 4px;
      border-radius: 4px;
    }
    .os3-marker[aria-current="true"] .os3-marker__dot {
      background: var(--os-white);
      border-color: var(--os-white);
      transform: scale(1.18);
    }
    .os3-marker[aria-current="true"] .os3-marker__dot::after { transform: scale(1); background: var(--os-navy); }
    .os3-marker[aria-current="true"] .os3-marker__year { color: var(--os-white); }
    .os3-marker[aria-current="true"] .os3-marker__tag { color: rgba(255, 255, 255, 0.85); }

    /* ---------- Milestone readout bands (one static band per section) ---------- */
    .os3-readout {
      background: var(--os-navy);
      color: var(--os-white);
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    .os3-band { scroll-margin-top: 310px; /* land below the sticky timeline */ }
    .os3-readout__inner {
      max-width: var(--maxw-narrow);
      margin-inline: auto;
      padding: clamp(2rem, 1.5rem + 2vw, 3rem) var(--gutter) clamp(2.4rem, 2rem + 2vw, 3.4rem);
      text-align: center;
    }
    .os3-readout__item { display: none; }
    .os3-readout__item.is-active { display: block; }
    .os3.is-ready .os3-readout__item.is-active { animation: os3FadeUp 0.55s var(--os-ease) both; }
    .os3-readout__year {
      font-family: var(--font-display);
      font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
      font-weight: 600;
      line-height: 1.1;
      color: var(--os-white);
      margin: 0 0 0.7rem;
    }
    .os3-readout__body {
      font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.92);
      max-width: 62ch;
      margin: 0 auto;
    }
    @keyframes os3FadeUp {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ---------- Chapter panels ---------- */
    .os3-chapters { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
    .os3-chapters__head {
      max-width: var(--maxw-narrow);
      margin: 0 auto clamp(2.5rem, 2rem + 2vw, 4rem);
      text-align: center;
      padding-inline: var(--gutter);
    }
    .os3-chapters__head .eyebrow {
      display: block;
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 0.74rem;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--os-navy);
      margin: 0 0 0.6rem;
    }
    .os3-chapters__head h2 { color: var(--os-navy); margin: 0; }

    .os3-chapter {
      position: relative;
      scroll-margin-top: 310px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 1rem + 4vw, 5rem);
      align-items: center;
      max-width: var(--maxw);
      margin: 0 auto;
      padding: clamp(2.5rem, 2rem + 3vw, 5rem) var(--gutter);
    }
    .os3-chapter + .os3-chapter { border-top: 1px solid var(--os-line); }
    .os3-chapter:nth-child(even) .os3-chapter__media { order: 2; }

    .os3-chapter__media {
      position: relative;
      overflow: hidden;
      border-radius: 2px;
      aspect-ratio: 4 / 3;
      background: var(--paper-soft);
    }
    /* layered navy offset behind the photo (outer side, away from text) */
    @media (min-width: 881px) {
      .os3-chapter:nth-child(even) .os3-chapter__media { box-shadow: 28px 28px 0 0 var(--os-navy); }
      .os3-chapter:nth-child(odd) .os3-chapter__media { box-shadow: -28px 28px 0 0 var(--os-navy); }
    }
    .os3-chapter__media img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      transform: scale(1.05);
      transition: transform 0.9s var(--os-ease);
    }
    .os3-chapter:hover .os3-chapter__media img { transform: scale(1.12); }
    /* big animated year/number watermark */
    .os3-chapter__num {
      position: absolute;
      left: 0.06em; bottom: 0.02em;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: clamp(5rem, 4rem + 8vw, 11rem);
      line-height: 0.8;
      color: var(--os-white);
      opacity: 0;
      pointer-events: none;
      letter-spacing: -0.01em;
      transform: translateY(20px);
      transition: opacity 0.8s var(--os-ease), transform 0.8s var(--os-ease);
      mix-blend-mode: normal;
      text-shadow: 0 2px 18px rgba(0, 55, 103, 0.45);
    }
    .os3-chapter.is-revealed .os3-chapter__num { opacity: 0.92; transform: translateY(0); }

    .os3-chapter__text .os3-chapter__kicker {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 0.72rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--os-navy);
      margin: 0 0 0.7rem;
    }
    .os3-chapter__text h2 {
      color: var(--os-navy);
      font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);
      margin: 0 0 1.1rem;
    }
    /* chapter subheadline / dek (added to match Our Story doc) */
    .os3-chapter__sub {
      font-family: var(--font-display);
      font-style: italic;
      font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
      line-height: 1.4;
      color: var(--os-gray);
      margin: -0.4rem 0 1.3rem;
    }
    /* the "|" divider — italic EB Garamond leans into the following letter,
       so pad it rather than relying on plain word spaces */
    .os3-sub-div {
      display: inline-block;
      padding-inline: 0.42em;
      font-style: normal;
      color: rgba(147, 149, 152, 0.75);
    }
    .os3-chapter__text p {
      color: var(--os-ink);
      margin: 0 0 1.1rem;
      max-width: 56ch;
    }
    .os3-chapter__text p:last-child { margin-bottom: 0; }
    /* .footnote variant for a chapter's closing small print — adds a rule
       to separate it from the body copy above */
    .os3-chapter__note {
      color: var(--os-gray);
      margin-top: 1.6rem;
      padding-top: 0.9rem;
      border-top: 1px solid var(--os-line);
    }

    /* scroll reveal */
    .os3-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--os-ease), transform 0.7s var(--os-ease); }
    .os3-reveal.is-revealed { opacity: 1; transform: translateY(0); }
    .os3-chapter__media.os3-reveal { transition-delay: 0.08s; }

    /* ---------- Pull quote ---------- */
    .os3-quote {
      position: relative;
      overflow: hidden;
      color: var(--os-white);
      padding-block: clamp(4rem, 3rem + 6vw, 8rem);
    }
    .os3-quote__bg {
      position: absolute; inset: 0;
      background-size: cover;
      background-position: center;
      transform: scale(1.08);
      transition: transform 1.4s var(--os-ease);
      z-index: 0;
    }
    .os3-quote.is-revealed .os3-quote__bg { transform: scale(1); }
    .os3-quote::after {
      content: "";
      position: absolute; inset: 0;
      background: rgba(0, 55, 103, 0.82);
      z-index: 1;
    }
    .os3-quote__inner {
      position: relative;
      z-index: 2;
      max-width: 1000px;
      margin-inline: auto;
      padding-inline: var(--gutter);
      text-align: center;
    }
    .os3-quote__mark {
      font-family: var(--font-display);
      font-size: clamp(4rem, 3rem + 6vw, 8rem);
      line-height: 0.6;
      color: rgba(255, 255, 255, 0.45);
      display: block;
      margin-bottom: 0.2rem;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.8s var(--os-ease), transform 0.8s var(--os-ease);
    }
    .os3-quote.is-revealed .os3-quote__mark { opacity: 1; transform: translateY(0); }
    .os3-quote blockquote {
      margin: 0;
      font-family: var(--font-display);
      font-weight: 500;
      font-style: italic;
      font-size: clamp(1.5rem, 1.2rem + 2vw, 2.6rem);
      line-height: 1.4;
      color: var(--os-white);
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.9s var(--os-ease) 0.15s, transform 0.9s var(--os-ease) 0.15s;
    }
    .os3-quote.is-revealed blockquote { opacity: 1; transform: translateY(0); }
    .os3-quote cite {
      display: block;
      margin-top: 1.6rem;
      font-family: var(--font-body);
      font-style: normal;
      font-weight: 700;
      font-size: 0.82rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.85);
    }

    /* ---------- Legacy closing ---------- */
    .os3-legacy { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
    .os3-legacy__row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 1rem + 4vw, 5rem);
      align-items: center;
      max-width: var(--maxw);
      margin: 0 auto;
      padding: clamp(2rem, 1.5rem + 2vw, 4rem) var(--gutter);
    }
    .os3-legacy__row + .os3-legacy__row { border-top: 1px solid var(--os-line); }
    .os3-legacy__row--reverse .os3-legacy__media { order: 2; }
    .os3-legacy__media {
      position: relative;
      overflow: hidden;
      border-radius: 2px;
      aspect-ratio: 4 / 3;
      background: var(--paper-soft);
    }
    .os3-legacy__media img {
      width: 100%; height: 100%;
      object-fit: cover;
      transform: scale(1.04);
      transition: transform 0.9s var(--os-ease);
    }
    .os3-legacy__row:hover .os3-legacy__media img { transform: scale(1.1); }
    .os3-legacy__text h2 { color: var(--os-navy); margin: 0 0 1.1rem; }
    .os3-legacy__text p { color: var(--os-ink); margin: 0 0 1.1rem; max-width: 58ch; }
    .os3-legacy__text p:last-child { margin-bottom: 0; }
    @media (min-width: 881px) { .os3-legacy__media { box-shadow: -28px 28px 0 0 var(--os-navy); } }

    /* ---------- Continuing the Legacy — centered finale ---------- */
    .os3-finale {
      background: var(--paper-soft);
      text-align: center;
      padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem);
      scroll-margin-top: 310px;
    }
    .os3-finale__inner { max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); }
    .os3-finale__inner::before {
      content: ""; display: block; width: 64px; height: 2px;
      background: var(--os-navy); margin: 0 auto 1.9rem;
    }
    .os3-finale h2 { color: var(--os-navy); margin: 0 0 1.5rem; font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); }
    .os3-finale__media { margin: 0 auto 2rem; }
    .os3-finale__media img { width: 100%; height: auto; display: block; box-shadow: 0 18px 40px rgba(35,31,32,0.16); }
    .os3-finale p { color: var(--os-ink); margin: 0 0 1.15rem; font-size: clamp(1.02rem, 1rem + 0.25vw, 1.18rem); line-height: 1.7; }
    .os3-finale p:last-child { margin-bottom: 0; }

    /* ---------- Responsive ---------- */
    @media (max-width: 880px) {
      .os3-chapter,
      .os3-legacy__row,
      .os3-legacy__row--reverse {
        grid-template-columns: 1fr;
      }
      .os3-chapter:nth-child(even) .os3-chapter__media,
      .os3-legacy__row--reverse .os3-legacy__media { order: 0; }
      .os3-chapter__num { font-size: clamp(4rem, 14vw, 7rem); }

      /* timeline becomes a horizontal scroller on small screens */
      .os3-track {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 0.5rem;
      }
      .os3-track::before { display: none; }
      /* the <li> is the flex item — size it here, not the button, or the
         markers stay squeezed to 1/n of the track and their labels collide */
      .os3-track > li {
        flex: 0 0 auto;
        min-width: 140px;
        scroll-snap-align: start;
      }
      .os3-marker {
        flex: 0 0 auto;
        scroll-snap-align: start;
        padding-right: 1.25rem;
      }
      .os3-marker__tag { max-width: none; }
      .os3-marker__dot { width: 16px; height: 16px; }
    }

    /* ---------- Reduced motion ---------- */
    @media (prefers-reduced-motion: reduce) {
      .os3-track::before { transform: scaleX(1); transition: none; }
      .os3-reveal,
      .os3-chapter__num,
      .os3-quote__mark,
      .os3-quote blockquote,
      .os3-quote__bg {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .os3-readout__item.is-active { animation: none; }
      .os3-chapter__media img,
      .os3-legacy__media img { transform: none; transition: none; }
      .os3-chapter:hover .os3-chapter__media img,
      .os3-legacy__row:hover .os3-legacy__media img { transform: none; }
    }

/* ==========================================================================
   Homepage — "Ledger" design (approved design-picker option C, 2026-07)
   Split hero: navy panel + photo column, hairline divider at the split.
   Tier panels: full-bleed photos with framed navy ledger cards (left-aligned).
   ========================================================================== */
.home .hero{background:var(--navy)}
.home .hero__slides{inset:0 0 0 46%;overflow:hidden}
.home .hero::after{left:46%;background:linear-gradient(180deg,rgba(35,31,32,.2),rgba(0,55,103,.42))}
.home .hero__inner{width:46%;max-width:none;margin:0;text-align:left;padding:calc(var(--header-h) + 2rem) clamp(2rem,4vw,4rem) 4rem clamp(1.5rem,5vw,6rem)}
.home .hero h1{margin-bottom:1.4rem}
@media screen and (min-width: 700px) and (max-width: 860px) {
 .home .hero h1 {font-size: 4rem;}
}
@media screen and (min-width: 860px) and (max-width: 1000px) {
 .home .hero h1 {font-size: 3.5rem;}
}
@media screen and (min-width: 1000px) and (max-width: 1250px) {
 .home .hero h1 {font-size: 4rem;}
}
@media screen and (min-width: 1250px) {
.home .hero h1 {font-size: 4.75rem;}
}

.home .hero__sub{margin:0;max-width:50ch}
.ledger-rule{position:absolute;left:0;top:0;bottom:0;width:46%;z-index:1;pointer-events:none}
.ledger-rule::after{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;background:rgba(255,255,255,.28)}
.home .hero>.ledger-mono{position:absolute;left:-4vw;bottom:-8vh;width:min(30vw,430px);color:#fff;opacity:.08;z-index:2;pointer-events:none}
.home .scroll-cue{left:23%}
.home .home-tier::after{background:linear-gradient(180deg,rgba(35,31,32,.3),rgba(35,31,32,.5))}
.home .home-tier__inner{max-width:var(--maxw);display:flex;text-align:left;padding-block:calc(var(--header-h) + 1rem)}
/* panel 3: full-width bg. The old right:-34% offset existed to push the
   previous photo's people clear of the ledger card; the current waterfront-park
   photo composes better unshifted (Ferris wheel balances the card on the
   right). Retune if this photo is swapped again. */
/* panel 1 (team group shot): keep the whole team in frame — the 2026 photo is
   a wide 1.8:1 with people at both margins, so the layer is flush (no taller-
   than-panel overscan; the default top:-12%/height:124% forces `cover` to
   scale on height and slice the outer two people off the sides). Top-anchored
   so any spare crop comes off the bottom, never the heads. js/home.js also
   gives this panel a gentler drift + zoom for the same reason. */
.home .hpanel:nth-child(1) .home-tier__bg{top:0;height:100%;background-position:center top}
/* panel 1 (team group shot): card is centered, wider, and text-centered */
.home .hpanel:nth-child(1) .home-tier__inner{justify-content:center}
.home .hpanel:nth-child(1) .ledger-card{max-width:780px;text-align:center}
.home .hpanel:nth-child(1) .ledger-card .num::before{content:"";flex:1;height:1px;background:rgba(255,255,255,.3)}
/* every panel's card stays hidden through that panel's pinned dwell so the
   photo reads uncovered first, then fades in from the bottom; js/home.js
   toggles .is-engaged per panel. Only where the pinned hscroll runs
   (JS + desktop + motion OK). */
@media (min-width:761px) and (prefers-reduced-motion:no-preference){
  .js .home [data-hscroll] .hpanel .ledger-card{opacity:0;transform:translateY(56px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .js .home [data-hscroll] .hpanel.is-engaged .ledger-card{opacity:1;transform:none}
}
.ledger-card{background:rgba(0,55,103,.9);border:1px solid rgba(255,255,255,.25);padding:clamp(2rem,4vw,3.25rem) clamp(2rem,4vw,3.75rem);max-width:600px;position:relative}
@media screen and (min-width: 40em) and (max-width: 64em) {
 .ledger-card {margin-left: 40px; max-width: 700px;}
}

.ledger-card .num{display:flex;align-items:center;gap:1.1rem;font-family:var(--font-body);font-style:normal;font-weight:700;font-size:.78rem;letter-spacing:.3em;color:rgba(255,255,255,.7);margin-bottom:1.4rem}
.ledger-card .num::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.3)}
.ledger-card h2{font-size:clamp(2rem,1.4rem+2vw,3rem);margin-bottom:1.1rem}
.ledger-card .home-tier__body{margin-left:0;font-size:clamp(1.02rem,1rem+.3vw,1.2rem);max-width:none}
@media (max-width:860px){
  .home .hero__slides{inset:0}
  .home .hero::after{left:0;background:linear-gradient(180deg,var(--ink-overlay),var(--navy-overlay))}
  .ledger-rule,.home .hero>.ledger-mono{display:none}
  .home .hero__inner{width:100%;}
  .home .scroll-cue{left:50%}
}
@media screen and (min-width: 760px) and (max-width: 900px) {
 .home .hero__inner {padding: 2em 2em 2em 4em;}
}

@media (max-width:760px){
  .home .home-tier__inner{justify-content:center}
}

/* ---------- Lenis smooth scrolling (js/lenis.min.js + js/smooth-scroll.js) ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; } /* v1.3 only sets .lenis, not .lenis-smooth */
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }