/* ==========================================================================
   Preferred Capital Partners — Design System
   Palette sampled directly from the firm's mark: navy #011B34, forest #024234,
   gold #C69143. Type: Spectral for display (a screen-first transitional serif
   with the refinement of the logo's wordmark but stroke weight that survives
   small sizes) and Inter for interface, body, and tracked-caps labels.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --ink:        #011B34;
  --ink-700:    #0A2B49;
  --ink-500:    #24476B;
  --forest:     #024234;
  --forest-900: #01271F;
  --forest-700: #023A2E;
  --gold:       #C69143;
  --gold-300:   #DFB877;
  --gold-100:   #F0DFC2;
  --gold-ink:   #8A5F1E;   /* text/icon gold for light grounds — AA on cream */

  /* Ground */
  --paper:      #F5F3ED;
  --paper-2:    #EBE7DD;
  --paper-3:    #DFDACD;
  --white:      #FFFFFF;

  /* Text */
  --text:       #14241C;
  --text-muted: #5B6660;
  --text-onDark:#F1EFE8;
  --text-onDark-muted: rgba(241,239,232,.66);

  /* Lines */
  --line:       rgba(2,66,52,.16);
  --line-soft:  rgba(2,66,52,.09);
  --line-dark:  rgba(241,239,232,.18);

  /* Type */
  --display: "Spectral", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:    "Inter", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --label:   "Inter", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Scale */
  --fs-display-xl: clamp(2.9rem, 6.1vw, 5.4rem);
  --fs-display-l:  clamp(2.3rem, 4.4vw, 3.9rem);
  --fs-display-m:  clamp(1.9rem, 3.1vw, 2.85rem);
  --fs-display-s:  clamp(1.5rem, 2.1vw, 1.95rem);
  --fs-lead:       clamp(1.075rem, 1.25vw, 1.25rem);
  --fs-body:       1.0625rem;
  --fs-small:      0.9375rem;
  --fs-micro:      0.8125rem;
  --fs-eyebrow:    0.6875rem;

  /* Space */
  --gutter: clamp(1.25rem, 4.2vw, 4rem);
  --sp-section: clamp(4.5rem, 9vw, 8.5rem);
  --sp-section-sm: clamp(3.25rem, 6vw, 5.5rem);
  --maxw: 1300px;
  --maxw-narrow: 760px;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 140ms;
  --dur-hover: 200ms;
  --dur-reveal: 700ms;

  --radius: 2px;
  --shadow-lift: 0 24px 60px -32px rgba(1, 27, 52, .38);
  --z-nav: 100;
  --z-drawer: 200;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: rgba(198,145,67,.16);
}
img, svg, video { max-width: 100%; display: block; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 1px; }
::selection { background: var(--gold-100); color: var(--forest-900); }

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -110%);
  background: var(--forest); color: var(--white); padding: .75rem 1.25rem;
  z-index: 999; font: 600 var(--fs-small)/1 var(--sans);
  transition: transform var(--dur-hover) var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ---------- 3. Layout ---------- */
.wrap {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.wrap--narrow { max-width: var(--maxw-narrow); }
.wrap--wide { max-width: 1520px; }
.section { padding-block: var(--sp-section); position: relative; }
.section--tight { padding-block: var(--sp-section-sm); }
.section--flush-top { padding-top: 0; }
.section--ink { background: var(--ink); color: var(--text-onDark); }
.section--forest { background: var(--forest-900); color: var(--text-onDark); }
.section--paper2 { background: var(--paper-2); }
.section--white { background: var(--white); }
.section--ink h1, .section--ink h2, .section--ink h3,
.section--forest h1, .section--forest h2, .section--forest h3 { color: var(--text-onDark); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.grid--editorial { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 1000px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px) {
  .grid--2, .grid--3, .grid--split, .grid--editorial { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .grid--4 { grid-template-columns: 1fr; } }

/* ---------- 4. Type utilities ---------- */
.eyebrow {
  font-family: var(--label); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--forest);
  display: flex; align-items: center; gap: .75rem; margin: 0 0 1.35rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); flex: none; }
.eyebrow--onDark { color: var(--gold-300); }

.display-xl { font-size: var(--fs-display-xl); line-height: 1.02; letter-spacing: -0.025em; }
.display-l  { font-size: var(--fs-display-l); line-height: 1.06; letter-spacing: -0.02em; }
.display-m  { font-size: var(--fs-display-m); line-height: 1.12; }
.display-s  { font-size: var(--fs-display-s); line-height: 1.2; }
.h-sans { font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }

.lead { font-size: var(--fs-lead); line-height: 1.68; color: var(--text-muted); max-width: 62ch; }
.section--ink .lead, .section--forest .lead { color: var(--text-onDark-muted); }
.muted { color: var(--text-muted); }
.section--ink .muted, .section--forest .muted { color: var(--text-onDark-muted); }
.small { font-size: var(--fs-small); }
.micro { font-size: var(--fs-micro); line-height: 1.6; }
.label { font-family: var(--label); letter-spacing: .04em; }
.serif-em { font-family: var(--display); font-style: italic; font-weight: 300; }
.gold-text { color: var(--gold-ink); }
.section--ink .gold-text, .section--forest .gold-text, .cta-band .gold-text, .pagehead .gold-text { color: var(--gold-300); }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .lead { margin-inline: auto; }
.measure { max-width: 58ch; }

/* Section heading block */
.sec-head { max-width: 52ch; margin-bottom: clamp(2.5rem, 4.5vw, 4rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head p { margin-top: 1.4rem; }

/* Signature: the gold rule that draws itself */
.rule { display: block; height: 1px; background: var(--gold); border: 0; margin: 0; }
.rule--dim { background: var(--line); }

/* Placeholder marker — remove `.ph` styling at launch, see PLACEHOLDERS.md */
.ph { border-bottom: 1px dotted rgba(198,145,67,.75); cursor: help; }

/* ---------- 5. Buttons ---------- */
.btn {
  --btn-bg: var(--gold); --btn-fg: #1B1206; --btn-bd: var(--gold);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: 0 1.6rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--radius);
  position: relative; overflow: hidden; isolation: isolate;
  font-family: var(--sans); font-size: .9375rem; font-weight: 600;
  letter-spacing: .01em; text-decoration: none; text-align: center;
  transition: background var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  touch-action: manipulation;
}
.btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 34%, rgba(255,255,255,.30) 50%, transparent 66%);
  transition: transform 780ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn:hover::before { transform: translateX(120%); } }
.btn:active { transform: translateY(1px); }
.btn__arrow { transition: transform var(--dur-hover) var(--ease-out); flex: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { --btn-bg: var(--gold-300); --btn-bd: var(--gold-300); }
  .btn:hover .btn__arrow { transform: translateX(4px); }
}
.btn--outline { --btn-bg: transparent; --btn-fg: var(--forest); --btn-bd: rgba(2,66,52,.35); }
@media (hover: hover) and (pointer: fine) {
  .btn--outline:hover { --btn-bg: var(--forest); --btn-fg: var(--white); --btn-bd: var(--forest); }
}
.btn--onDark { --btn-bg: transparent; --btn-fg: var(--text-onDark); --btn-bd: rgba(241,239,232,.4); }
@media (hover: hover) and (pointer: fine) {
  .btn--onDark:hover { --btn-bg: rgba(241,239,232,.1); --btn-bd: rgba(241,239,232,.7); }
}
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--label); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--forest); padding-bottom: .3rem;
  border-bottom: 1px solid var(--gold);
  transition: color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.link-arrow svg { transition: transform var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { color: var(--gold-ink); }
  .link-arrow:hover svg { transform: translateX(4px); }
}
.link-arrow--onDark { color: var(--text-onDark); }
@media (hover: hover) and (pointer: fine) { .link-arrow--onDark:hover { color: var(--gold-300); } }

/* ---------- 6. Announcement bar ---------- */
.topbar {
  background: var(--forest-900); color: var(--text-onDark);
  font-family: var(--label); font-size: 0.75rem; letter-spacing: .08em;
  border-bottom: 1px solid rgba(198,145,67,.24);
  position: relative; z-index: calc(var(--z-nav) + 1);
}
.topbar__inner { display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 40px; padding: .4rem var(--gutter); text-align: center; flex-wrap: wrap; }
.topbar__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }
.topbar a { color: var(--gold-300); text-underline-offset: 3px; display: inline-block; padding-block: .3rem; }

/* ---------- 7. Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
.nav__inner { display: flex; align-items: center; gap: 2rem; min-height: 84px; }
.nav__logo { display: flex; align-items: center; gap: .75rem; text-decoration: none; flex: none; }
.nav__logo svg { flex: none; }
.nav__wordmark { display: flex; flex-direction: column; line-height: 1; }
.nav__wordmark b {
  font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink);
  transition: color 320ms var(--ease-out);
}
.nav__wordmark span {
  font-family: var(--label); font-weight: 500; font-size: .5625rem; letter-spacing: .34em;
  text-transform: uppercase; color: var(--gold-ink); margin-top: .4rem;
  display: flex; align-items: center; gap: .4rem;
}
/* Flanking hairlines under PARTNERS, as in the printed lockup. */
.nav__wordmark span::before, .nav__wordmark span::after {
  content: ""; height: 1px; flex: 1 0 10px; background: currentColor; opacity: .55;
}
.nav--over .nav__wordmark span, .footer .nav__wordmark span { color: var(--gold-300); }
.nav.is-stuck .nav__wordmark span { color: var(--gold-ink); }
.nav__mark-fill { transition: fill 320ms var(--ease-out); }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); margin-left: auto; }
.nav__links a {
  font-size: .9375rem; font-weight: 500; text-decoration: none; color: var(--ink);
  padding: .45rem 0; position: relative;
  transition: color 320ms var(--ease-out);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .nav__links a:hover::after { transform: scaleX(1); } }
.nav__links a[aria-current="page"] { color: var(--gold); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { margin-left: clamp(.5rem, 1.5vw, 1.25rem); min-height: 46px; font-size: .875rem; }

/* Over-hero (transparent) state */
.nav--over .nav__wordmark b { color: var(--text-onDark); }
.nav--over .nav__links a { color: var(--text-onDark); }
.nav--over .nav__mark-fill { fill: var(--text-onDark); }
.nav--over .nav-toggle span { background: var(--text-onDark); }
.nav.is-stuck {
  background: rgba(245,243,237,.94);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--line-soft);
}
.nav.is-stuck .nav__wordmark b { color: var(--ink); }
.nav.is-stuck .nav__links a { color: var(--ink); }
.nav.is-stuck .nav__links a[aria-current="page"] { color: var(--forest); }
.nav.is-stuck .nav__mark-fill { fill: var(--ink); }
.nav.is-stuck .nav-toggle span { background: var(--ink); }

.nav-toggle {
  display: none; margin-left: auto; width: 48px; height: 48px;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: transform 260ms var(--ease-out), opacity 160ms linear; }

@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav-toggle { display: flex; }
}

.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: var(--forest-900); color: var(--text-onDark);
  padding-top: max(5.5rem, calc(env(safe-area-inset-top) + 4.75rem));
  padding-inline: max(var(--gutter), env(safe-area-inset-left));
  padding-bottom: max(2.5rem, calc(env(safe-area-inset-bottom) + 1.5rem));
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 260ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s linear 300ms;
  overflow-y: auto;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.drawer__close { position: absolute; top: 1.25rem; right: calc(var(--gutter) - .5rem); width: 48px; height: 48px; color: var(--text-onDark); font-size: 1.75rem; line-height: 1; }
.drawer__links { display: flex; flex-direction: column; gap: .35rem; }
.drawer__links a {
  font-family: var(--display); font-size: clamp(1.65rem, 6.5vw, 2.35rem);
  text-decoration: none; color: var(--text-onDark); padding: .45rem 0;
  border-bottom: 1px solid var(--line-dark);
}
.drawer__links a[aria-current="page"] { color: var(--gold-300); }
.drawer__foot { margin-top: auto; padding-top: 2.5rem; display: grid; gap: 1rem; }

/* ---------- 8. Hero ---------- */
.hero {
  position: relative; min-height: min(84svh, 760px);
  display: flex; flex-direction: column; justify-content: flex-end;
  margin-top: -84px; padding-top: 84px; isolation: isolate; overflow: hidden;
  /* The ground is brand colour, not the photograph — so the hero is intact
     before (or without) the image, and the mark has something to sit on. */
  background: linear-gradient(158deg, #01271F 0%, #011B34 46%, #01271F 100%);
}

/* The footage is the hero background. It is bright daylight aerial, so it is
   graded down into the brand palette here and the scrim below does the rest of
   the work of keeping the headline legible. */
.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media img,
.hero__video {
  width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
  filter: saturate(.62) contrast(1.06) brightness(.72);
}

/* The mark: oversized, cropped by the hero, anchored to the lower right so it
   never collides with the headline column. */
.hero__mark {
  position: absolute; z-index: -2;
  right: -4%; bottom: -12%;
  height: 106%; width: auto; max-width: none;
  pointer-events: none;
  --mark-o: .34;          /* held in a variable so the entrance can restore it */
  opacity: var(--mark-o);
}

.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(1,39,31,.94) 0%, rgba(1,27,52,.82) 38%, rgba(1,27,52,.46) 72%, rgba(1,27,52,.62) 100%),
    linear-gradient(to top, rgba(1,39,31,.68) 0%, rgba(1,39,31,0) 52%),
    linear-gradient(rgba(1,27,52,.28), rgba(1,27,52,.28));
}

@media (max-width: 900px) {
  /* Anchored to the top on small screens so the arrow reads in the gap above
     the headline and the towers stay behind the copy, not through it. */
  .hero__mark { height: 62%; right: -16%; bottom: auto; top: 5%; --mark-o: .7; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(1,27,52,.62) 0%, rgba(1,27,52,.78) 45%, rgba(1,27,52,.92) 100%),
      linear-gradient(100deg, rgba(1,39,31,.62) 0%, rgba(1,27,52,.3) 100%);
  }
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: clamp(150px, 30vh, 320px); pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(1,39,31,0) 0%, rgba(1,39,31,.35) 38%, rgba(1,39,31,.78) 72%, #01271F 100%);
}
.hero__inner { padding-block: clamp(2.5rem, 6vw, 4.25rem) clamp(1.5rem, 2.5vw, 2.25rem); width: 100%; }
.hero h1 { color: var(--text-onDark); max-width: 17ch; margin-bottom: 1.5rem; }
.hero h1 em { font-style: italic; font-weight: 300; color: var(--gold-300); }
.hero__lead { color: var(--text-onDark-muted); font-size: var(--fs-lead); max-width: 54ch; margin-bottom: 2.25rem; }
.hero__cta { margin-bottom: 0; }
.hero__terms { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; font-family: var(--label); font-size: var(--fs-micro); color: var(--text-onDark-muted); letter-spacing: .06em; }
.hero__terms li { display: flex; align-items: center; gap: .5rem; }
.hero__terms svg { color: var(--gold); flex: none; }

/* Hero key stats rail */
.hero__disclaimer {
  font-size: .72rem; line-height: 1.6; color: rgba(241,239,232,.5);
  padding-top: .85rem; max-width: 96ch; margin: 0;
}
.hero__disclaimer a { color: rgba(241,239,232,.74); text-underline-offset: 3px; }
.hero__rail { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.hero__rail::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, rgba(241,239,232,.26), rgba(241,239,232,.05));
}
.hero__rail > * { padding: 1.15rem clamp(1rem, 2.2vw, 2rem); border-right: 1px solid var(--line-dark); }
.hero__rail > *:first-child { padding-left: 0; }
.hero__rail > *:last-child { border-right: 0; }
@media (max-width: 880px) {
  .hero__rail { grid-template-columns: repeat(2, 1fr); }
  .hero__rail > *:nth-child(2n) { border-right: 0; }
  .hero__rail > *:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
  .hero__rail > *:nth-child(3) { padding-left: 0; }
}

/* ---------- 9. Stat / data blocks ---------- */
.stat__value {
  font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  display: block; margin-bottom: .55rem;
}
.stat__label {
  font-family: var(--label); font-size: 0.6875rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-muted); display: block; line-height: 1.5;
}
.section--ink .stat__label, .section--forest .stat__label, .hero .stat__label { color: var(--text-onDark-muted); }
.hero .stat__value { color: var(--text-onDark); font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
.stat--gold .stat__value { color: var(--gold); }

.statband { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.statband > * { padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2rem); border-right: 1px solid var(--line); }
.statband > *:last-child { border-right: 0; }
@media (max-width: 880px) {
  .statband { grid-template-columns: repeat(2, 1fr); }
  .statband > *:nth-child(2n) { border-right: 0; }
  .statband > *:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ---------- 10. Signature: offering-memorandum card ---------- */
.om {
  background: var(--white); border: 1px solid var(--line-soft);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .om:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(198,145,67,.4); }
  .om:hover .om__media img { transform: scale(1.045); }
}
.om__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.om__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.om__tag {
  position: absolute; top: 1rem; left: 1rem;
  background: rgba(1,39,31,.9); color: var(--gold-300);
  font-family: var(--label); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .4rem .7rem;
}
.om__tag--exit { color: var(--paper); background: rgba(1,27,52,.9); }
.om__body { padding: clamp(1.35rem, 2.4vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }
.om__market { font-family: var(--label); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: .7rem; }
.om__name { font-family: var(--display); font-size: 1.5rem; line-height: 1.15; margin-bottom: 1.1rem; }
.om__specs { border-top: 1px solid var(--line-soft); margin-top: auto; padding-top: 1rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem 1rem; }
.om__specs dt { font-family: var(--label); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .3rem; }
.om__specs dd { margin: 0; font-weight: 600; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.om__specs dd a, .field__help a { display: inline-block; padding-block: .25rem; }

/* ---------- 10b. Investor profile rows ----------
   An editorial roster rather than a card grid: each row is one kind of
   investor, the serif name carries it, and a gold rule draws along the row on
   hover so it reads as selected rather than decorated. */
.profiles { border-top: 1px solid var(--line-dark); }
.profile {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 15rem);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.5rem, 2.6vw, 2.1rem) 0;
  border-bottom: 1px solid var(--line-dark);
  position: relative;
}
.profile::before {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left center;
  transition: transform 520ms var(--ease-out);
}
.profile__num {
  font-family: var(--label); font-weight: 500; font-size: .6875rem; letter-spacing: .2em;
  color: var(--gold); padding-top: .5rem;
}
.profile__who {
  font-family: var(--display); font-weight: 500; font-size: clamp(1.4rem, 2.3vw, 1.95rem);
  line-height: 1.15; color: var(--text-onDark); margin-bottom: .55rem;
  transition: color var(--dur-hover) var(--ease-out);
}
.profile__solve { font-size: var(--fs-small); color: var(--text-onDark-muted); margin: 0; max-width: 56ch; }
/* The problem, stated as a label, so the five problems stack into a scannable
   column of their own down the right edge of the roster. */
.profile__pain {
  font-family: var(--label); font-weight: 500; font-size: .6875rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-300); align-self: center;
  padding-left: 1.1rem; border-left: 1px solid var(--line-dark); line-height: 1.65;
}
@media (hover: hover) and (pointer: fine) {
  .profile:hover::before { transform: scaleX(1); }
  .profile:hover .profile__who { color: var(--gold-300); }
}
@media (max-width: 900px) {
  .profile { grid-template-columns: 3rem minmax(0, 1fr); gap: .75rem 1.25rem; }
  .profile__pain {
    grid-column: 2; padding-left: 0; border-left: 0; padding-top: .6rem; margin-top: .3rem;
    border-top: 1px solid var(--line-dark); align-self: start;
  }
}
@media (prefers-reduced-motion: reduce) { .profile::before { transition: none; } }

/* ---------- 11. Cards, pillars, steps ---------- */
.card {
  background: var(--white); border: 1px solid var(--line-soft);
  padding: clamp(1.6rem, 2.6vw, 2.25rem);
  display: flex; flex-direction: column; gap: .9rem;
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.card { position: relative; }
.card::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left center;
  transition: transform 520ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .card:hover::after { transform: scaleX(1); } }
.card--ondark { background: rgba(241,239,232,.045); border-color: var(--line-dark); }
@media (hover: hover) and (pointer: fine) { .card--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } }
.card__icon { width: 40px; height: 40px; color: var(--gold-ink); }
.section--ink .card__icon, .section--forest .card__icon, .card--ondark .card__icon { color: var(--gold); }
.card h3 { font-family: var(--sans); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.005em; line-height: 1.4; }
.card p { color: var(--text-muted); font-size: var(--fs-small); }
.card--ondark p { color: var(--text-onDark-muted); }
.card--ondark h3 { color: var(--text-onDark); }

.pillar { padding-top: 1.75rem; border-top: 1px solid var(--line); position: relative; }
.js .pillar::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left center;
  transition: transform 900ms var(--ease-out);
}
.js [data-stagger].is-in .pillar::before { transform: scaleX(1); }
.js [data-stagger].is-in .pillar:nth-child(2)::before { transition-delay: 140ms; }
.js [data-stagger].is-in .pillar:nth-child(3)::before { transition-delay: 280ms; }
.section--ink .pillar, .section--forest .pillar { border-top-color: var(--line-dark); }
.pillar__num { font-family: var(--label); font-size: .6875rem; letter-spacing: .2em; color: var(--gold-ink); display: block; margin-bottom: 1.25rem; }
.section--ink .pillar__num, .section--forest .pillar__num { color: var(--gold); }
.pillar h3 { font-family: var(--display); font-size: 1.6rem; margin-bottom: .85rem; line-height: 1.18; }
.pillar p { color: var(--text-muted); font-size: var(--fs-small); }
.section--ink .pillar p, .section--forest .pillar p { color: var(--text-onDark-muted); }

/* Numbered process — order is real information here */
.steps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: repeat(4, 1fr); }
.section--forest .steps, .section--ink .steps { background: var(--line-dark); border-color: var(--line-dark); }
.step { background: var(--paper); padding: clamp(1.5rem, 2.6vw, 2.25rem); display: flex; flex-direction: column; gap: .85rem; }
.section--forest .step { background: var(--forest-900); }
.section--ink .step { background: var(--ink); }
.section--white .step { background: var(--white); }
.step__num {
  font-family: var(--label); font-size: .75rem; letter-spacing: .12em; color: var(--gold-ink);
  display: flex; align-items: center; gap: .6rem;
}
.step__num::after { content: ""; height: 1px; flex: 1; background: currentColor; opacity: .35; }
.step h3 { font-family: var(--sans); font-weight: 700; font-size: 1.0625rem; line-height: 1.4; }
.section--forest .step h3, .section--ink .step h3 { color: var(--text-onDark); }
.step p { font-size: var(--fs-small); color: var(--text-muted); }
.section--forest .step p, .section--ink .step p { color: var(--text-onDark-muted); }
.step__meta { margin-top: auto; padding-top: 1rem; font-family: var(--label); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.section--ink .step__num, .section--forest .step__num, .section--ink .step__meta, .section--forest .step__meta { color: var(--gold); }
/* A sequence with an odd count leaves the last stage alone in its row. It
   spans the full width instead, and re-lays itself so the measure stays
   readable rather than running the paragraph across the whole page. */
.steps .step--full { grid-column: 1 / -1; }
@media (min-width: 1001px) {
  .steps .step--full {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.75fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    row-gap: .9rem;
    align-items: start;
  }
  .step--full .step__num { grid-column: 1 / -1; }
  .step--full h3 { grid-column: 1; grid-row: 2; }
  .step--full p { grid-column: 2; grid-row: 2; max-width: 72ch; margin: 0; }
  .step--full .step__meta { grid-column: 1 / -1; }
}

@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }

/* ---------- 12. Comparison table ---------- */
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
@media (max-width: 900px) {
  /* Fading the trailing edge is the affordance that the table continues. */
  .compare-scroll {
    -webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%);
    mask-image: linear-gradient(to right, #000 86%, transparent 100%);
  }
}
.compare { min-width: 820px; font-size: var(--fs-small); }
.compare th, .compare td { padding: 1.15rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-dark); }
.compare thead th {
  font-family: var(--label); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500; color: var(--text-onDark-muted); border-bottom-color: rgba(198,145,67,.5);
  padding-bottom: 1rem;
}
.compare thead th.is-us { color: var(--gold); }
.compare tbody th { font-weight: 600; color: var(--text-onDark); width: 24%; font-family: var(--sans); }
.compare td { color: var(--text-onDark-muted); }
.compare td.is-us { color: var(--text-onDark); background: rgba(198,145,67,.08); font-weight: 600; box-shadow: inset 1px 0 0 rgba(198,145,67,.4), inset -1px 0 0 rgba(198,145,67,.4); }
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: 0; }
.compare-note { font-family: var(--label); font-size: .6875rem; letter-spacing: .06em; color: var(--text-onDark-muted); margin-top: 1.25rem; line-height: 1.7; }

/* ---------- 13. Benefit list ---------- */
.benefits { display: grid; gap: 0; }
.benefit { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1.25rem; padding: 1.75rem 0; border-top: 1px solid var(--line); align-items: start; }
.benefit:last-child { border-bottom: 1px solid var(--line); }
.benefit__icon { color: var(--gold-ink); width: 32px; height: 32px; }
.section--ink .benefit__icon, .section--forest .benefit__icon { color: var(--gold); }
.benefit h3 { font-family: var(--sans); font-weight: 700; font-size: 1.0625rem; margin-bottom: .4rem; }
.benefit p { color: var(--text-muted); font-size: var(--fs-small); margin: 0; }

/* ---------- 14. Quotes / social proof ---------- */
.quote { background: var(--white); border: 1px solid var(--line-soft); padding: clamp(1.75rem, 2.8vw, 2.5rem); display: flex; flex-direction: column; }
.quote__mark { font-family: var(--display); font-size: 3.5rem; line-height: .6; color: var(--gold); margin-bottom: 1.25rem; }
.quote blockquote { margin: 0 0 1.75rem; font-family: var(--display); font-size: 1.26rem; line-height: 1.5; letter-spacing: -0.005em; }
.quote figcaption { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); }
.quote__who { font-weight: 700; font-size: .9375rem; display: block; }
.quote__meta { font-family: var(--label); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); display: block; margin-top: .3rem; }

.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 3.5rem); }
.logos li { font-family: var(--label); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }

/* ---------- 15. Principal / bio ---------- */
.principal__media { position: relative; }
.principal__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; filter: grayscale(.12) contrast(1.03); }
.principal__frame { position: absolute; right: -14px; bottom: -14px; width: 60%; height: 60%; border: 1px solid var(--gold); z-index: -1; }
.principal__sig { font-family: var(--display); font-style: italic; font-size: 1.5rem; color: var(--gold-ink); margin-top: 1.75rem; }
.credential-list { display: grid; gap: .9rem; margin-top: 2rem; }
.credential-list li { display: grid; grid-template-columns: 20px 1fr; gap: .85rem; font-size: var(--fs-small); align-items: start; }
.credential-list svg { color: var(--gold-ink); margin-top: .3rem; }

/* ---------- 16. Accordion ---------- */
.accordion { border-top: 1px solid var(--line); }
.acc { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0; text-align: left;
  font-family: var(--sans); font-weight: 600; font-size: 1.0625rem; line-height: 1.45;
  transition: color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .acc__btn:hover { color: var(--gold-ink); } }
.section--ink .acc__btn:hover { color: var(--gold-300); }
.acc__icon { flex: none; width: 18px; height: 18px; position: relative; }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; background: var(--gold-ink); transition: transform 260ms var(--ease-out); }
.section--ink .acc__icon::before, .section--ink .acc__icon::after { background: var(--gold); }
.acc__icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.acc__icon::after { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: translateX(-50%) scaleY(0); }
/* Height is animated here rather than a transform: an accordion has no
   transform equivalent, and the 0fr/1fr grid trick does not resolve
   reliably across engines. JS sets the pixel height; CSS owns the curve. */
.acc__panel { height: auto; overflow: hidden; transition: height 320ms var(--ease-out); }
.acc__panel > div { overflow: hidden; }
.acc__panel p { color: var(--text-muted); font-size: var(--fs-small); max-width: 70ch; padding-bottom: 1.65rem; }
.section--ink .accordion, .section--ink .acc { border-color: var(--line-dark); }
.section--ink .acc__btn { color: var(--text-onDark); }
.section--ink .acc__panel p { color: var(--text-onDark-muted); }

/* ---------- 16b. Interactive migration map ----------
   Real state geometry (us-atlas), Albers-projected and simplified. The base
   states are barely there; only the destination states and the flow lines
   carry colour, so the map reads as one claim rather than an atlas. City
   labels live in tooltips, not on the map, and the chips beneath drive the
   same state so the whole thing works by hover, keyboard and touch alike. */
.usmap-figure { margin: 0; }
.usmap { width: 100%; height: auto; display: block; overflow: visible; }

.usmap__state { fill: #DCD7CA; stroke: var(--paper-2); stroke-width: .9; }
.section--forest .usmap__state, .section--ink .usmap__state {
  fill: rgba(241,239,232,.09); stroke: var(--forest-900);
}
.usmap__state--target { fill: var(--forest); }
.section--forest .usmap__state--target, .section--ink .usmap__state--target { fill: rgba(198,145,67,.30); }

.usmap__flow {
  fill: none; stroke: var(--gold); stroke-linecap: round;
  stroke-width: calc(var(--w, 2) * 0.7); opacity: .6;
  stroke-dasharray: 1600; stroke-dashoffset: 1600;
}
.is-in .usmap__flow { animation: usmap-draw 2400ms var(--ease-out) forwards; }
.is-in .usmap__flow:nth-of-type(2) { animation-delay: 180ms; }
.is-in .usmap__flow:nth-of-type(3) { animation-delay: 360ms; }
.is-in .usmap__flow:nth-of-type(4) { animation-delay: 540ms; }
@keyframes usmap-draw { to { stroke-dashoffset: 0; } }

/* Travelling marker on each flow — the only continuously moving element. */
.usmap__comet { fill: var(--gold-300); opacity: 0; }
.is-in .usmap__comet { opacity: .95; }

.usmap__hit { fill: transparent; cursor: pointer; }
.usmap__dot { fill: var(--gold); transition: r 200ms var(--ease-out), fill 200ms var(--ease-out); }
.usmap__pulse { fill: var(--gold); transform-origin: center; transform-box: fill-box; opacity: 0; }
.is-in .usmap__pulse { animation: usmap-pulse 3s ease-out infinite; }
@keyframes usmap-pulse {
  0%   { opacity: .5; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(3.2); }
  100% { opacity: 0;  transform: scale(3.2); }
}

.usmap__market { outline: none; }
.usmap__tip { opacity: 0; transition: opacity 180ms var(--ease-out); pointer-events: none; }
.usmap__tip rect { fill: var(--forest-900); }
.usmap__tip text {
  font-family: var(--label); font-size: 15px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; fill: var(--paper);
}
.usmap__market.is-active .usmap__tip,
.usmap__market:hover .usmap__tip,
.usmap__market:focus-visible .usmap__tip { opacity: 1; }
.usmap__market.is-active .usmap__dot,
.usmap__market:hover .usmap__dot { r: 7; fill: var(--gold-300); }
.usmap__market:focus-visible .usmap__dot { r: 7; fill: var(--gold-300); }
.usmap__market:focus-visible .usmap__hit { stroke: var(--gold); stroke-width: 2; }

/* Chips: the same six markets as a keyboard-reachable list. */
.usmap-legend {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1.5rem; padding: 0; list-style: none;
}
.usmap-chip {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: 0 1rem;
  border: 1px solid var(--line); border-radius: 2px; background: transparent;
  font-family: var(--label); font-size: .8125rem; font-weight: 600;
  letter-spacing: .06em; color: var(--text);
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.usmap-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
.usmap-chip__st {
  font-size: .6875rem; letter-spacing: .14em; color: var(--text-muted); margin-left: .1rem;
}
.usmap-chip.is-active, .usmap-chip:hover, .usmap-chip:focus-visible {
  border-color: var(--gold); background: rgba(198,145,67,.1); color: var(--forest);
}
.section--forest .usmap-chip, .section--ink .usmap-chip { border-color: var(--line-dark); color: var(--text-onDark); }
.section--forest .usmap-chip__st, .section--ink .usmap-chip__st { color: var(--text-onDark-muted); }
.section--forest .usmap-chip.is-active, .section--ink .usmap-chip.is-active { color: var(--gold-300); }

@media (max-width: 640px) {
  .usmap__tip text { font-size: 20px; }
  .usmap-chip { font-size: .75rem; padding: 0 .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .usmap__flow, .is-in .usmap__flow { stroke-dashoffset: 0; animation: none; }
  .is-in .usmap__pulse { animation: none; opacity: 0; }
  .usmap__comet, .is-in .usmap__comet { display: none; }
}

/* ---------- 17. Media blocks ---------- */
.media-frame { position: relative; }
.media-frame img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.media-frame--tall img { aspect-ratio: 4 / 5; }
.media-caption {
  font-family: var(--label); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); margin-top: .9rem; display: flex; gap: .6rem; align-items: center;
}
.media-caption::before { content: ""; width: 18px; height: 1px; background: var(--gold); flex: none; }
.section--ink .media-caption, .section--forest .media-caption { color: var(--text-onDark-muted); }

.figure-stat {
  position: absolute; right: 0; bottom: 0;
  background: var(--forest-900); color: var(--text-onDark);
  padding: 1.35rem 1.5rem; max-width: 250px;
  border-left: 2px solid var(--gold);
}
.figure-stat .stat__value { color: var(--gold-300); font-size: 2rem; }
.figure-stat .stat__label { color: var(--text-onDark-muted); }

/* Angled transition — used exactly once, entering the thesis band */
.wedge { position: relative; }
.wedge::before {
  content: ""; position: absolute; top: 1px; left: 0; right: 0; height: clamp(40px, 6vw, 90px);
  background: inherit; clip-path: polygon(0 100%, 100% 0, 100% 100%);
  transform: translateY(-100%);
}

/* ---------- 18. CTA band ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; color: var(--text-onDark); }
.cta-band h2 { color: var(--text-onDark); max-width: 18ch; }
.cta-band__media { position: absolute; inset: 0; z-index: -2; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(1,39,31,.97) 12%, rgba(1,27,52,.9) 100%); }

/* ---------- 19. Forms ---------- */
.form { display: grid; gap: 1.35rem; }
.field { display: grid; gap: .5rem; }
.field label { font-family: var(--label); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.field .req { color: var(--gold-ink); }
.form-panel--ondark .field .req { color: var(--gold); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--text);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem 1rem; min-height: 52px; width: 100%;
  transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(198,145,67,.16);
}
.field__help { font-size: var(--fs-micro); color: var(--text-muted); }
.field__error { font-size: var(--fs-micro); color: #A32E12; display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #A32E12; }
.field.has-error .field__error { display: flex; align-items: center; gap: .4rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.checkline { display: grid; grid-template-columns: 26px 1fr; gap: .85rem; align-items: start; }
.checkline input { width: 24px; height: 24px; min-height: 0; margin-top: .15rem; accent-color: #024234; }
.checkline label { font-family: var(--sans); font-size: var(--fs-micro); letter-spacing: 0; text-transform: none; color: var(--text-muted); line-height: 1.65; }
.form-note { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.65; }
.form-success { display: none; border: 1px solid var(--gold); background: rgba(198,145,67,.1); padding: 1.5rem; }
.form-success.is-visible { display: block; }

.form-panel { background: var(--white); border: 1px solid var(--line-soft); padding: clamp(1.75rem, 3.2vw, 2.75rem); }
.form-panel--ondark { background: rgba(241,239,232,.05); border-color: var(--line-dark); }
.form-panel--ondark .field label { color: var(--text-onDark-muted); }
.form-panel--ondark .field input, .form-panel--ondark .field select, .form-panel--ondark .field textarea {
  background: rgba(1,27,52,.4); border-color: var(--line-dark); color: var(--text-onDark);
}
.form-panel--ondark .checkline label, .form-panel--ondark .form-note, .form-panel--ondark .field__help { color: var(--text-onDark-muted); }

/* ---------- 20. Page header (interior pages) ---------- */
.pagehead { background: var(--forest-900); color: var(--text-onDark); position: relative; margin-top: -84px; padding-top: 84px; overflow: hidden; isolation: isolate; }
.pagehead__inner { padding-block: clamp(4rem, 8vw, 6.5rem) clamp(3rem, 5vw, 4.5rem); position: relative; }
.pagehead h1 { color: var(--text-onDark); max-width: 20ch; }
.pagehead h1 em { font-style: italic; font-weight: 300; color: var(--gold-300); }
.pagehead .lead { color: var(--text-onDark-muted); margin-top: 1.5rem; }
.pagehead__media { position: absolute; inset: 0; z-index: -2; opacity: .3; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehead__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(1,39,31,.97) 30%, rgba(1,39,31,.78) 100%); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; font-family: var(--label); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-onDark-muted); margin-bottom: 1.75rem; }
.breadcrumb a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .breadcrumb a:hover { color: var(--gold-300); } }

/* ---------- 21. Article ---------- */
.article-body { font-size: 1.09rem; line-height: 1.8; }
.article-body h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 2.75rem 0 1rem; }
.article-body h3 { font-family: var(--sans); font-weight: 700; font-size: 1.2rem; margin: 2rem 0 .75rem; }
.article-body ul { margin: 0 0 1.5rem; display: grid; gap: .65rem; }
.article-body ul li { display: grid; grid-template-columns: 18px 1fr; gap: .75rem; }
.article-body ul li::before { content: ""; width: 6px; height: 6px; background: var(--gold); margin-top: .7rem; }
.article-body blockquote {
  margin: 2.25rem 0; padding-left: 1.75rem; border-left: 2px solid var(--gold);
  font-family: var(--display); font-size: 1.35rem; line-height: 1.5;
}

.insight-card { display: grid; gap: 1rem; text-decoration: none; align-content: start; }
.insight-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.insight-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .insight-card:hover .insight-card__media img { transform: scale(1.045); }
  .insight-card:hover h3 { color: var(--gold-ink); }
}
.insight-card h3 { font-family: var(--display); font-size: 1.42rem; line-height: 1.22; transition: color var(--dur-hover) var(--ease-out); }
.insight-card__kicker { font-family: var(--label); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.insight-card p { font-size: var(--fs-small); color: var(--text-muted); }

/* ---------- 22. Footer ---------- */
.footer {
  background: var(--ink); color: var(--text-onDark);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) max(2rem, calc(env(safe-area-inset-bottom) + 1rem));
}
.footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 3rem; border-bottom: 1px solid var(--line-dark); }
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } }
.footer h4 { font-family: var(--label); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: 1.25rem; }
.footer__nav { display: grid; gap: .7rem; }
.footer__nav a { text-decoration: none; font-size: var(--fs-small); color: var(--text-onDark-muted); padding-block: .12rem; transition: color var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .footer__nav a:hover { color: var(--gold-300); } }
.footer__brand p { color: var(--text-onDark-muted); font-size: var(--fs-small); max-width: 40ch; }
.footer__disclosure { padding-top: 2rem; }
.footer__disclosure p { font-size: .75rem; line-height: 1.75; color: rgba(241,239,232,.5); max-width: 96ch; }
.footer__base { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; padding-top: 2rem; margin-top: 1.5rem; border-top: 1px solid var(--line-dark); font-family: var(--label); font-size: .6875rem; letter-spacing: .1em; color: rgba(241,239,232,.5); }
.footer__base a { text-decoration: none; display: inline-block; padding-block: .35rem; }
.footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* ---------- 23. Motion: scroll reveal ----------
   Every rule that hides content before revealing it is scoped behind `.js`,
   which is set by an inline script in <head>. If the script never runs, the
   page renders fully visible instead of blank. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js [data-stagger] > * { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
.js [data-stagger].is-in > * { opacity: 1; transform: none; }
.js [data-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
.js [data-stagger].is-in > *:nth-child(2) { transition-delay: 70ms; }
.js [data-stagger].is-in > *:nth-child(3) { transition-delay: 140ms; }
.js [data-stagger].is-in > *:nth-child(4) { transition-delay: 210ms; }
.js [data-stagger].is-in > *:nth-child(5) { transition-delay: 280ms; }
.js [data-stagger].is-in > *:nth-child(6) { transition-delay: 350ms; }
.js .rule { transform: scaleX(0); transform-origin: left center; transition: transform 900ms var(--ease-out); }
.js .rule.is-in { transform: scaleX(1); }

/* Hero entrance — one orchestrated moment */
.js .hero__media img { transform: scale(1.07); transition: transform 1700ms var(--ease-out); }
.js .hero.is-ready .hero__media img { transform: scale(1); }
.js .hero__mark { opacity: 0; transform: translateY(18px); transition: opacity 1500ms var(--ease-out), transform 1700ms var(--ease-out); }
.js .hero.is-ready .hero__mark { opacity: var(--mark-o); transform: none; }
.js .hero [data-enter] { opacity: 0; transform: translateY(20px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.js .hero.is-ready [data-enter] { opacity: 1; transform: none; }
.js .hero.is-ready [data-enter="1"] { transition-delay: 120ms; }
.js .hero.is-ready [data-enter="2"] { transition-delay: 220ms; }
.js .hero.is-ready [data-enter="3"] { transition-delay: 320ms; }
.js .hero.is-ready [data-enter="4"] { transition-delay: 420ms; }
.js .hero.is-ready [data-enter="5"] { transition-delay: 540ms; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js [data-stagger] > *, .js .hero [data-enter] { transform: none !important; transition-duration: 300ms; }
  .js .hero__media img, .js .hero.is-ready .hero__media img { transform: none; transition: none; }
  .js .hero__mark { opacity: var(--mark-o); transform: none; transition: none; }
  .acc__panel { transition: none; }
  .om__media img, .insight-card__media img { transition: none; }
  .js .rule, .js .rule.is-in { transform: scaleX(1); transition: none; }
  .btn:active { transform: none; }
  .om:hover, .card--lift:hover { transform: none; }
}

/* ---------- 23b. Entrance system ----------
   Three motions, reused everywhere: headings resolve upward from behind a
   mask, media wipes open from one edge, hairlines draw left to right. Applied
   by script so the markup stays clean, and scoped behind `.js` so the page is
   fully visible if the script never runs. */

.js .rv-head {
  opacity: 0; transform: translateY(16px); clip-path: inset(0 0 105% 0);
  transition: opacity 820ms var(--ease-out),
              transform 900ms var(--ease-out),
              clip-path 1050ms var(--ease-out);
}
.js .rv-head.is-in { opacity: 1; transform: none; clip-path: inset(0 0 -30% 0); }

.js .rv-media { clip-path: inset(0 100% 0 0); transition: clip-path 1150ms var(--ease-out); }
.js .rv-media.is-in { clip-path: inset(0 0 0 0); }

/* The numbered rule beside each step extends as the sequence arrives. */
.js .step__num::after { transform: scaleX(0); transform-origin: left center; transition: transform 760ms var(--ease-out); }
.js .steps.is-in .step__num::after { transform: scaleX(1); }
.js .steps.is-in .step:nth-child(2) .step__num::after { transition-delay: 140ms; }
.js .steps.is-in .step:nth-child(3) .step__num::after { transition-delay: 280ms; }
.js .steps.is-in .step:nth-child(4) .step__num::after { transition-delay: 420ms; }
.js .steps.is-in .step:nth-child(5) .step__num::after { transition-delay: 560ms; }

/* Interior page headers open the way the hero does. */
.js .pagehead__media { opacity: 0; transform: scale(1.05); transition: opacity 1200ms var(--ease-out), transform 1700ms var(--ease-out); }
.js .pagehead.is-ready .pagehead__media { opacity: .3; transform: none; }
.js .pagehead__inner > * { opacity: 0; transform: translateY(16px); transition: opacity 760ms var(--ease-out), transform 760ms var(--ease-out); }
.js .pagehead.is-ready .pagehead__inner > * { opacity: 1; transform: none; }
.js .pagehead.is-ready .pagehead__inner > *:nth-child(1) { transition-delay: 100ms; }
.js .pagehead.is-ready .pagehead__inner > *:nth-child(2) { transition-delay: 200ms; }
.js .pagehead.is-ready .pagehead__inner > *:nth-child(3) { transition-delay: 300ms; }
.js .pagehead.is-ready .pagehead__inner > *:nth-child(4) { transition-delay: 400ms; }

/* Accordion rows respond before they are opened. */
.acc { position: relative; transition: background 260ms var(--ease-out); }
.acc::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left center;
  transition: transform 480ms var(--ease-out);
}
.acc:has(.acc__btn[aria-expanded="true"])::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .acc:hover::after { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .js .rv-head, .js .rv-head.is-in { clip-path: none; transform: none; transition: opacity 300ms linear; }
  .js .rv-media, .js .rv-media.is-in { clip-path: none; transition: none; }
  .js .step__num::after, .js .steps.is-in .step__num::after { transform: scaleX(1); transition: none; }
  .js .pagehead__media, .js .pagehead.is-ready .pagehead__media { opacity: .3; transform: none; transition: none; }
  .js .pagehead__inner > * { transform: none; transition: opacity 300ms linear; }
  .js .pillar::before, .js [data-stagger].is-in .pillar::before { transform: scaleX(1); transition: none; }
  .btn::before { display: none; }
  .card::after, .acc::after { transition: none; }
}

/* ---------- 23c. Mobile ----------
   Handset layout is not a scaled-down desktop here: the hero is recomposed so
   the return figures are reachable without a second scroll, calls to action go
   full width where the thumb is, and the map hands its labelling over to the
   chips because a tooltip inside a 335px-wide diagram renders at 7px. */
@media (max-width: 640px) {
  .hero { min-height: min(80svh, 660px); }
  .hero__inner { padding-block: 1.75rem 1.1rem; }
  .hero h1 { font-size: clamp(2.3rem, 10.4vw, 2.9rem); max-width: 15ch; margin-bottom: 1.1rem; }
  .hero__lead { font-size: 1rem; margin-bottom: 1.6rem; }

  /* Stacked, full-width actions: one thumb target per row. */
  .hero__cta { width: 100%; }
  .hero__cta .btn, .cta-band .btn-row .btn { width: 100%; }
  .btn-row { gap: .625rem; }

  .hero__rail > * { padding: .9rem .75rem; }
  .hero .stat__value { font-size: 1.4rem; margin-bottom: .35rem; }
  .hero .stat__label { font-size: .6875rem; letter-spacing: .1em; }
  .hero__mark { --mark-o: .28; }

  .statband > * { padding: 1.5rem 1rem; }
  .article-body { font-size: 1.06rem; }
  .article-body blockquote { padding-left: 1.1rem; font-size: 1.2rem; }
  .quote blockquote { font-size: 1.12rem; }
  .display-xl, .display-l { letter-spacing: -0.018em; }
}

@media (max-width: 700px) {
  /* The chips carry the market names on a handset; the in-map tooltip would
     render at about 7px, so it is withdrawn and the points simply grow. */
  .usmap__tip { display: none; }
  .usmap__dot { r: 8; }
  .usmap__pulse { r: 8; }
  .usmap__hit { r: 30; }
  .usmap-legend { gap: .45rem; margin-top: 1.15rem; }
  .usmap-chip { flex: 1 1 calc(50% - .45rem); justify-content: flex-start; }
}

@media (max-width: 460px) {
  .om__specs { grid-template-columns: 1fr 1fr; gap: .75rem .75rem; }
  .footer__base { gap: .75rem; }
  .form-row { gap: 1rem; }
  .form { gap: 1.1rem; }
}

/* Coarse pointers get the resting state of anything that depends on hover. */
@media (hover: none) {
  .card::after, .profile::before, .acc::after { transform: scaleX(0); }
  .acc:has(.acc__btn[aria-expanded="true"])::after { transform: scaleX(1); }
  .om:hover, .card--lift:hover { transform: none; box-shadow: none; }
}

/* ---------- 23d. Investor assistant ----------
   A docked panel rather than a floating bubble: it belongs to the page, uses
   the same paper, hairlines and label type as everything else, and goes
   full-height on a handset where a small floating card is unusable. */
/* The wrapper spans the viewport so the launcher is laid out against the
   window rather than against a shrink-to-fit box; it stays click-through and
   the children take pointer events back. */
.pcp-agent { position: fixed; inset: 0; z-index: 300; pointer-events: none; font-family: var(--sans); }
.pcp-agent > * { pointer-events: auto; }

.pcp-agent__launch {
  position: absolute; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  width: 64px; height: 64px; padding: 0;
  display: grid; place-items: center;
  background: var(--forest-900);
  border: 1px solid rgba(198,145,67,.5); border-radius: 2px;
  box-shadow: 0 18px 40px -18px rgba(1,27,52,.8);
  transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out),
              transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.pcp-agent__launch-mark { display: block; width: 30px; height: 31px; }
.pcp-agent__launch-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* The label is a hover affordance, not part of the shape. It is announced to
   assistive technology through aria-label on the button regardless. */
.pcp-agent__launch-hint {
  position: absolute; right: calc(100% + .55rem); top: 50%;
  transform: translateY(-50%) translateX(8px);
  white-space: nowrap; pointer-events: none;
  background: var(--forest-900); color: var(--paper);
  border: 1px solid rgba(198,145,67,.35);
  padding: .45rem .7rem; border-radius: 2px;
  font-family: var(--label); font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pcp-agent__launch:hover {
    background: var(--forest); border-color: var(--gold);
    transform: translateY(-3px); box-shadow: 0 24px 48px -18px rgba(1,27,52,.85);
  }
  .pcp-agent__launch:hover .pcp-agent__launch-hint,
  .pcp-agent__launch:focus-visible .pcp-agent__launch-hint {
    opacity: 1; transform: translateY(-50%) translateX(0);
  }
}
.pcp-agent__launch:focus-visible .pcp-agent__launch-hint { opacity: 1; transform: translateY(-50%) translateX(0); }

.pcp-agent.is-open .pcp-agent__launch { opacity: 0; pointer-events: none; transform: translateY(8px); }

.pcp-agent__panel {
  position: absolute; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  width: min(410px, calc(100vw - 2rem));
  height: min(600px, calc(100svh - 4rem));
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 40px 90px -40px rgba(1,27,52,.55);
  opacity: 0; transform: translateY(14px) scale(.985); transform-origin: bottom right;
  transition: opacity 240ms var(--ease-out), transform 280ms var(--ease-out);
}
.pcp-agent.is-open .pcp-agent__panel { opacity: 1; transform: none; }

.pcp-agent__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; background: var(--forest-900); color: var(--paper);
}
.pcp-agent__title { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.pcp-agent__sub {
  margin: .3rem 0 0; font-family: var(--label); font-size: .625rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-300);
}
.pcp-agent__close {
  color: var(--paper); width: 32px; height: 32px; flex: none;
  display: flex; align-items: center; justify-content: center; border-radius: 2px;
  transition: background 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .pcp-agent__close:hover { background: rgba(241,239,232,.14); } }

.pcp-agent__log {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.25rem; display: flex; flex-direction: column; gap: .85rem;
  scrollbar-width: thin;
}
.pcp-agent__msg { font-size: .9375rem; line-height: 1.62; max-width: 92%; }
.pcp-agent__msg--pcp {
  align-self: flex-start; background: var(--white); border: 1px solid var(--line-soft);
  border-left: 2px solid var(--gold); padding: .85rem 1rem; color: var(--text);
}
.pcp-agent__msg--you {
  align-self: flex-end; background: var(--forest); color: var(--paper);
  padding: .7rem .95rem; font-weight: 500;
}
.pcp-agent__msg a { color: var(--gold-ink); text-underline-offset: 3px; }
.pcp-agent__caveat {
  display: block; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line-soft);
  font-size: .75rem; line-height: 1.55; color: var(--text-muted);
}
.pcp-agent__src {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .8rem;
  font-family: var(--label); font-size: .6875rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; color: var(--gold-ink);
  border-bottom: 1px solid var(--gold); padding-bottom: .2rem;
}
.pcp-agent__src svg { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pcp-agent__src:hover svg { transform: translateX(3px); } }

.pcp-agent__dots { display: inline-flex; gap: 4px; padding: .15rem 0; }
.pcp-agent__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: .35; animation: pcp-dot 1.1s infinite; }
.pcp-agent__dots i:nth-child(2) { animation-delay: .16s; }
.pcp-agent__dots i:nth-child(3) { animation-delay: .32s; }
@keyframes pcp-dot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

.pcp-agent__prompts { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1.25rem 0; }
.pcp-agent__prompt {
  min-height: 34px; padding: 0 .7rem;
  border: 1px solid var(--line); border-radius: 2px; background: transparent;
  font-size: .75rem; font-weight: 500; color: var(--text-muted); text-align: left;
  transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out), background 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pcp-agent__prompt:hover { border-color: var(--gold); background: rgba(198,145,67,.1); color: var(--forest); }
}

.pcp-agent__form { display: flex; gap: .5rem; padding: 1rem 1.25rem .5rem; }
.pcp-agent__input {
  flex: 1; min-height: 46px; padding: 0 .85rem; font-size: 16px; font-family: var(--sans);
  color: var(--text); background: var(--white); border: 1px solid var(--line); border-radius: 2px;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.pcp-agent__input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(198,145,67,.16); }
.pcp-agent__send {
  width: 46px; min-height: 46px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--gold); color: #1B1206; border-radius: 2px;
  transition: background 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .pcp-agent__send:hover { background: var(--gold-300); } }

.pcp-agent__foot {
  margin: 0; padding: 0 1.25rem 1.1rem; font-size: .6875rem; line-height: 1.55; color: var(--text-muted);
}
.pcp-agent__foot a { color: var(--text-muted); text-underline-offset: 2px; }

@media (max-width: 640px) {
  /* Full sheet on a handset — a 410px card inside a 375px viewport is not a card. */
  .pcp-agent__panel {
    right: 0; bottom: 0; width: 100vw;
    height: 100svh; height: 100dvh;
    border: 0;
    padding-bottom: env(safe-area-inset-bottom);
    transform-origin: bottom center; transform: translateY(24px);
  }
  .pcp-agent__launch {
    right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom));
    width: 58px; height: 58px;
  }
  .pcp-agent__launch-mark { width: 27px; height: 28px; }
  .pcp-agent__launch-hint { display: none; }
  .pcp-agent__msg { max-width: 96%; }
}

@media (prefers-reduced-motion: reduce) {
  .pcp-agent__panel, .pcp-agent.is-open .pcp-agent__panel { transform: none; transition: opacity 200ms linear; }
  .pcp-agent__launch-hint { transition: opacity 160ms linear; transform: translateY(-50%); }
  .pcp-agent__launch { transition: none; }
  .pcp-agent__dots i { animation: none; opacity: .6; }
}

/* ---------- 24. Utilities ---------- */
.mt-1 { margin-top: .75rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; }
.mt-4 { margin-top: 3rem; }
.mb-2 { margin-bottom: 1.5rem; }
.mb-3 { margin-bottom: 2.25rem; }
.mb-4 { margin-bottom: 3rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.divider--dark { background: var(--line-dark); }