/* ============================================================
   Fremont Developers — Obsidian & Gold Design System
   Style:        Glassmorphism + Bento Grid (per ui-ux-pro-max)
   Pattern:      Horizontal/Modular scroll journey
   Palette:      Dark luxury + gold accent
   Typography:   Playfair Display + Inter (Classic Elegant)
   ============================================================ */

:root {
  /* === PALETTE: Obsidian & Gold === */
  --obsidian:    #0C0A09;   /* deepest — body text on light surfaces */
  --obsidian-2:  #1C1917;   /* primary dark — hero, nav glass base */
  --obsidian-3:  #292524;   /* card dark */
  --obsidian-4:  #44403C;   /* muted dark */
  --stone-1:     #78716C;   /* stone gray */
  --stone-2:     #A8A29E;   /* soft stone */
  --bone:        #E7E5E4;   /* hairlines on light */
  --paper:       #FAFAF9;   /* page background light */
  --paper-2:     #F5F5F4;   /* subtle surface */
  --paper-3:     #FFFFFF;   /* pure white for cards */

  /* Gold accent family */
  --gold:        #CA8A04;   /* primary gold CTA */
  --gold-light:  #EAB308;   /* brighter gold for hover/highlight */
  --gold-deep:   #854D0E;   /* deeper gold for dark-bg hover */

  /* Status */
  --success:     #059669;
  --danger:      #B91C1C;

  /* === SPACING: 8pt grid === */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;

  /* Legacy alias — keeps existing HTML working */
  --space-1: var(--s-2);
  --space-2: var(--s-4);
  --space-3: var(--s-5);
  --space-4: var(--s-6);
  --space-5: var(--s-7);
  --space-6: var(--s-8);
  --space-7: var(--s-9);
  --space-8: var(--s-10);

  /* === LAYOUT === */
  --max: 1360px;
  --wide: 1480px;
  --reading: 720px;

  /* === TYPE === */
  --serif: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* === EFFECTS === */
  --shadow-xs:   0 1px 2px rgba(12,10,9,0.04);
  --shadow-sm:   0 2px 8px rgba(12,10,9,0.06), 0 1px 2px rgba(12,10,9,0.04);
  --shadow-md:   0 8px 24px rgba(12,10,9,0.08), 0 2px 6px rgba(12,10,9,0.06);
  --shadow-lg:   0 24px 64px rgba(12,10,9,0.14), 0 4px 12px rgba(12,10,9,0.08);
  --shadow-gold: 0 8px 32px rgba(202,138,4,0.24), 0 2px 6px rgba(202,138,4,0.12);
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* === MOTION === */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-swift:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  150ms;
  --dur-med:   280ms;
  --dur-slow:  540ms;

  /* === LEGACY aliases (keep old class colors working) === */
  --ink:        var(--obsidian);
  --ink-soft:   var(--obsidian-2);
  --cream:      var(--paper);
  --cream-deep: var(--paper-2);
  --brass:      var(--gold);
  --brass-light: var(--gold-light);
  --stone:      var(--stone-1);
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--obsidian);
  background: var(--paper);
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-swift); }
a:hover { color: var(--gold); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--obsidian-2); color: var(--paper);
  padding: 8px 16px; z-index: 9999;
  border-radius: 0 0 6px 0;
}
.skip-link:focus { top: 0; }

/* ============================================================
   Typography — Classic Elegant
   ============================================================ */
.display, .h1, .h2, .h3, .h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--obsidian);
  letter-spacing: -0.02em;
  margin: 0;
}
.display {
  font-size: clamp(40px, 5.5vw, 92px);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.h1 { font-size: clamp(36px, 4.6vw, 68px);  line-height: 1.08; letter-spacing: -0.025em; font-weight: 500; }
.h2 { font-size: clamp(28px, 3.2vw, 46px);  line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; }
.h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.22; letter-spacing: -0.015em; font-weight: 500; }
.h4 { font-size: 19px; line-height: 1.3; font-weight: 500; letter-spacing: -0.005em; }

/* Italic gold accent — brand signature (Playfair italic is gorgeous) */
.display em, .h1 em, .h2 em, .h3 em, .h4 em, em.accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}

.lead {
  font-family: var(--sans);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--obsidian-4);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.body { font-size: 16px; line-height: 1.65; }
.small { font-size: 13px; line-height: 1.5; color: var(--stone-1); }
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Dropcap — refined, bookish */
.dropcap::first-letter {
  font-family: var(--serif);
  float: left;
  font-size: 4.6em;
  line-height: 0.9;
  padding: 4px 10px 0 0;
  font-weight: 600;
  font-style: italic;
  color: var(--gold);
}

/* Roman numerals */
.roman {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}

/* ============================================================
   Layout
   ============================================================ */
.container       { max-width: var(--max);  margin: 0 auto; padding: 0 var(--s-5); }
.container-wide  { max-width: var(--wide); margin: 0 auto; padding: 0 var(--s-5); }
.container-narrow{ max-width: var(--reading); margin: 0 auto; padding: 0 var(--s-5); }

.section         { padding: var(--s-9) 0; }
.section-lg      { padding: var(--s-10) 0; }
.section-sm      { padding: var(--s-8) 0; }
.section-massive { padding: calc(var(--s-10) + var(--s-6)) 0; }

/* Surface themes */
.dark       { background: var(--obsidian-2); color: var(--paper); }
.dark .eyebrow { color: var(--gold-light); }
.dark a:hover { color: var(--gold-light); }
.darker     { background: var(--obsidian); color: var(--paper); }
.cream-deep { background: var(--paper-2); }
.paper      { background: var(--paper-3); }

/* Inline-styled dark panels (route-card variants, bento cells, etc.) — readable text */
.dark-panel, .dark-panel h1, .dark-panel h2, .dark-panel h3, .dark-panel h4, .dark-panel h5,
.dark-panel .h1, .dark-panel .h2, .dark-panel .h3, .dark-panel .h4 { color: var(--paper) !important; }
.dark-panel .eyebrow { color: var(--gold-light) !important; }
.dark-panel p, .dark-panel .small { color: rgba(250, 250, 249, 0.78) !important; }
.dark-panel .arrow { color: var(--gold-light) !important; }

/* Headings on dark surfaces — override default obsidian text color */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5,
.dark .display, .dark .h1, .dark .h2, .dark .h3, .dark .h4,
.darker h1, .darker h2, .darker h3, .darker h4, .darker h5,
.darker .display, .darker .h1, .darker .h2, .darker .h3, .darker .h4,
.hero-full h1, .hero-full h2, .hero-full h3, .hero-full h4,
.hero-full .display, .hero-full .h1, .hero-full .h2, .hero-full .h3, .hero-full .h4 {
  color: var(--paper);
}

/* Italic accent (em) on dark surfaces — brighter gold for better contrast */
.dark .display em, .dark .h1 em, .dark .h2 em, .dark .h3 em, .dark .h4 em,
.darker .display em, .darker .h1 em, .darker .h2 em, .darker .h3 em, .darker .h4 em,
.hero-full .display em, .hero-full .h1 em, .hero-full .h2 em, .hero-full .h3 em, .hero-full .h4 em {
  color: var(--gold-light);
}

/* Body and lead text on dark surfaces */
.dark p, .darker p, .hero-full p { color: rgba(250, 250, 249, 0.82); }
.dark .lead, .darker .lead, .hero-full .lead { color: rgba(250, 250, 249, 0.82); }
.dark .small, .darker .small, .hero-full .small { color: rgba(250, 250, 249, 0.7); }

/* Bento cells inherit correctly regardless of section theme */
.bento .cell.dark h1, .bento .cell.dark h2, .bento .cell.dark h3, .bento .cell.dark h4,
.bento .cell.dark .h3, .bento .cell.dark .h4 { color: var(--paper); }
.bento .cell.dark .h3 em, .bento .cell.dark .h4 em { color: var(--gold-light); }
.bento .cell.gold h1, .bento .cell.gold h2, .bento .cell.gold h3, .bento .cell.gold h4,
.bento .cell.gold .h3, .bento .cell.gold .h4 { color: var(--paper); }

/* Grids */
.grid { display: grid; gap: var(--s-5); }
.grid-2        { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); }
.grid-2-asym   { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-7); align-items: center; }
.grid-2-asym-r { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s-7); align-items: center; }
.grid-3        { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.grid-4        { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.grid-6        { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-5); }

@media (max-width: 960px) {
  .grid-2, .grid-2-asym, .grid-2-asym-r { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-6 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Bento Grid — Apple-style modular showcase
   ============================================================ */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: var(--s-4);
}
.bento .cell {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-3);
  border: 1px solid var(--bone);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-fast) var(--ease-swift);
  display: flex;
  flex-direction: column;
}
.bento a.cell { cursor: pointer; }
.bento .cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold); }
.bento .cell.dark { background: var(--obsidian-2); color: var(--paper); border-color: var(--obsidian-3); }
.bento .cell.gold { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); color: var(--paper); border-color: var(--gold); }
.bento .cell.gold .eyebrow { color: rgba(255,255,255,0.85); }

.bento .cell-body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); height: 100%; }
.bento .cell-img { position: relative; flex: 1; min-height: 200px; overflow: hidden; }
.bento .cell-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.bento .cell:hover .cell-img img { transform: scale(1.06); }
.bento .cell-overlay { position: absolute; inset: 0; padding: var(--s-6); display: flex; flex-direction: column; justify-content: flex-end; color: var(--paper); background: linear-gradient(180deg, rgba(12,10,9,0) 0%, rgba(12,10,9,0) 40%, rgba(12,10,9,0.85) 100%); }

/* Bento cell spans */
.bento .span-2 { grid-column: span 2; }
.bento .span-3 { grid-column: span 3; }
.bento .span-4 { grid-column: span 4; }
.bento .span-6 { grid-column: span 6; }
.bento .row-2  { grid-row: span 2; }

@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .span-2, .bento .span-3, .bento .span-4, .bento .span-6 { grid-column: span 2; }
  .bento .row-2 { grid-row: auto; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .bento .span-2, .bento .span-3, .bento .span-4, .bento .span-6 { grid-column: span 1; }
}

/* ============================================================
   Glass surfaces
   ============================================================ */
.glass {
  background: rgba(250,250,249,0.75);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(12,10,9,0.06);
}
.glass-dark {
  background: rgba(28,25,23,0.65);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(250,250,249,0.08);
  color: var(--paper);
}

/* ============================================================
   Notice bar
   ============================================================ */
.notice {
  background: var(--obsidian);
  color: var(--paper);
  padding: 10px var(--s-5);
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.notice a { color: var(--gold-light); margin-left: var(--s-4); text-decoration: none; border-bottom: 1px solid rgba(234,179,8,0.4); padding-bottom: 1px; }
.notice a:hover { color: var(--gold-light); border-bottom-color: var(--gold-light); }

/* ============================================================
   Header — Glass floating nav
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,250,249,0.7);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid rgba(12,10,9,0.06);
  transition: background var(--dur-med) var(--ease-swift), border-color var(--dur-med) var(--ease-swift);
}
.header-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 14px var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--obsidian);
  letter-spacing: -0.02em;
}
.brand:hover { color: var(--obsidian); }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--obsidian);
  color: var(--paper);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--obsidian-2);
  position: relative;
  padding: 6px 0;
  letter-spacing: -0.005em;
  transition: color var(--dur-fast) var(--ease-swift);
}
.nav a:hover { color: var(--gold); }
.nav a.active,
.nav a[aria-current="page"] { color: var(--gold); font-weight: 600; }
.nav a.active::after,
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.nav a.invest-link { color: var(--obsidian); font-weight: 600; }

/* Dropdown navigation */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Invisible bridge — extends the trigger's hover zone across the visual gap
   so cursor transit from trigger → dropdown doesn't drop :hover. */
.nav-item.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -40px;
  right: -40px;
  height: 16px;
  pointer-events: auto;
  background: transparent;
  z-index: 89;
}
.nav-item .chev {
  width: 10px;
  height: 6px;
  transition: transform var(--dur-fast) var(--ease-swift);
}
.nav-item:hover .chev,
.nav-item:focus-within .chev,
.nav-item.open .chev { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: -12px;
  min-width: 300px;
  padding: 10px;
  background: rgba(250, 250, 249, 0.96);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(12, 10, 9, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-fast) var(--ease-swift),
              transform var(--dur-fast) var(--ease-swift),
              visibility 0s linear var(--dur-fast);
  z-index: 90;
  pointer-events: none;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
  pointer-events: auto;
}
.nav-dropdown a {
  display: grid;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--obsidian);
  line-height: 1.2;
  letter-spacing: -0.005em;
  transition: background var(--dur-fast) var(--ease-swift), color var(--dur-fast) var(--ease-swift);
}
.nav-dropdown a:hover { background: var(--paper-2); color: var(--gold); }
.nav-dropdown a:hover::after,
.nav-dropdown a:focus-visible::after { display: none; }
.nav-dropdown a.dropdown-lead {
  border-bottom: 1px solid rgba(12, 10, 9, 0.08);
  margin-bottom: 4px;
  padding-bottom: 14px;
}
.nav-dropdown a .drop-sub {
  font-size: 11px;
  color: var(--stone-1);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-top: 4px;
  text-transform: none;
}
.nav-dropdown a:hover .drop-sub { color: var(--stone-1); }

/* Mega menu — wider, multi-column with featured card */
.nav-dropdown.mega {
  min-width: 720px;
  max-width: 820px;
  left: -60px;
  padding: 20px;
}
.mega-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
}
.mega-col { display: flex; flex-direction: column; gap: 2px; }
.mega-head {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 4px 14px 8px;
}
.nav-dropdown.mega a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
}
.nav-dropdown.mega a:hover { background: var(--paper-2); color: var(--obsidian); }
.nav-dropdown.mega a h4 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--obsidian);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.nav-dropdown.mega a:hover h4 { color: var(--gold); }
.nav-dropdown.mega a p {
  font-size: 12px;
  color: var(--stone-1);
  margin: 0;
  line-height: 1.45;
}
.nav-dropdown.mega .pill {
  background: var(--gold);
  color: var(--paper);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  line-height: 1;
}

.mega-feature { padding: 0; }
.mega-card {
  display: block !important;
  padding: 0 !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  background: var(--obsidian-2) !important;
  color: var(--paper);
  height: 100%;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
  border: 1px solid var(--obsidian-3);
}
.mega-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.mega-card img { width: 100%; height: 160px; object-fit: cover; display: block; }
.mega-card-body { padding: 16px 18px; }
.mega-card-body .eyebrow {
  color: var(--gold-light) !important;
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
}
.nav-dropdown.mega .mega-card-body h4 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--paper) !important;
  margin: 0 0 6px;
  letter-spacing: -0.015em;
}
.nav-dropdown.mega .mega-card:hover .mega-card-body h4 { color: var(--gold-light) !important; }
.nav-dropdown.mega .mega-card-body p {
  color: rgba(250,250,249,0.75) !important;
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 960px) {
  .nav-dropdown.mega {
    min-width: 0;
    max-width: none;
    left: 0;
    padding: 0 0 var(--s-3) var(--s-4);
  }
  .mega-grid { grid-template-columns: 1fr; gap: 0; }
  .mega-head { margin: 8px 0 6px; padding-left: 0; }
  .mega-feature { display: none; }
  .nav-dropdown.mega a { padding: 10px 0; }
  .nav-dropdown.mega a p { display: none; }
  .nav-dropdown.mega a h4 { font-size: 15px; }
}

/* Mobile: dropdown expands inline, not as a popover */
@media (max-width: 960px) {
  .nav-item { display: block; width: 100%; }
  .nav-item > a { justify-content: space-between; width: 100%; }
  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 0 0 var(--s-3) var(--s-4);
    pointer-events: auto;
    display: none;
  }
  .nav-item.open .nav-dropdown { display: flex; }
  .nav-dropdown a {
    padding: 12px 0;
    font-size: 15px;
    font-family: var(--sans);
    font-weight: 500;
  }
  .nav-dropdown a.dropdown-lead { border: none; padding-bottom: 12px; margin-bottom: 0; }
  .nav-dropdown a .drop-sub { display: none; }
}

.nav-toggle {
  display: none;
  color: var(--obsidian);
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  border-radius: var(--radius-sm);
}
.nav-toggle:hover { background: var(--paper-2); }

@media (max-width: 960px) {
  .header {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav {
    position: fixed;
    inset: 68px 0 0 0;
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--s-6) var(--s-5);
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease-out);
    overflow-y: auto;
    box-shadow: -20px 0 60px rgba(12, 10, 9, 0.14);
  }
  .nav.open { transform: translateX(0); }
  .nav a {
    display: block;
    width: 100%;
    padding: 18px 0;
    font-size: 22px;
    font-family: var(--serif);
    border-bottom: 1px solid var(--bone);
    background: var(--paper);
  }
  .nav-toggle { display: inline-flex; }
  .cta-btn { display: none; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-primary, .btn-ghost, .cta-btn, .btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-family: var(--sans);
  border: 1px solid;
  border-radius: var(--radius-sm);
  transition: all var(--dur-fast) var(--ease-swift);
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.btn-primary {
  padding: 15px 26px;
  background: var(--obsidian);
  color: var(--paper);
  font-size: 15px;
  border-color: var(--obsidian);
}
.btn-primary:hover { background: var(--obsidian-2); color: var(--paper); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.dark .btn-primary { background: var(--paper); color: var(--obsidian); border-color: var(--paper); }
.dark .btn-primary:hover { background: var(--gold); border-color: var(--gold); color: var(--paper); }

.btn-gold {
  padding: 15px 26px;
  background: var(--gold);
  color: var(--paper);
  font-size: 15px;
  border-color: var(--gold);
}
.btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--obsidian); transform: translateY(-1px); box-shadow: var(--shadow-gold); }

.btn-ghost {
  padding: 15px 26px;
  background: transparent;
  color: var(--obsidian);
  font-size: 15px;
  border-color: var(--obsidian-4);
}
.btn-ghost:hover { background: var(--obsidian); color: var(--paper); border-color: var(--obsidian); }
.dark .btn-ghost,
.darker .btn-ghost,
.hero-full .btn-ghost {
  color: var(--paper);
  border-color: rgba(250, 250, 249, 0.4);
}
.dark .btn-ghost:hover,
.darker .btn-ghost:hover,
.hero-full .btn-ghost:hover {
  background: var(--paper);
  color: var(--obsidian);
  border-color: var(--paper);
}

.cta-btn {
  padding: 10px 18px;
  background: var(--obsidian);
  color: var(--paper);
  font-size: 13px;
  letter-spacing: 0.02em;
  border-color: var(--obsidian);
  border-radius: var(--radius-sm);
}
.cta-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--paper); }
.cta-btn svg { width: 14px; height: 14px; }

/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb {
  padding: var(--s-5) 0;
  font-size: 13px;
  color: var(--stone-1);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.breadcrumb a { color: var(--stone-1); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep { color: var(--bone); }
.breadcrumb .current { color: var(--obsidian); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  min-height: 70vh;
  display: grid;
  align-items: center;
  padding: var(--s-10) 0 var(--s-9);
  position: relative;
}
.hero-full {
  min-height: 88vh;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0;
  color: var(--paper);
  background: var(--obsidian);
  overflow: hidden;
}
.hero-full::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,10,9,0.25) 0%, rgba(12,10,9,0.1) 45%, rgba(12,10,9,0.85) 100%);
  z-index: 1;
}
.hero-full > img, .hero-full > .hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9) contrast(1.06) brightness(0.95);
}
.hero-full .hero-content {
  position: relative;
  z-index: 2;
  padding: var(--s-10) 0;
  width: 100%;
}
/* Hero: stack columns vertically so the headline never collides with the lead/CTAs.
   Cap supporting copy width for readability; let headline flow naturally. */
.hero-full .grid-2-asym,
.hero-full .grid-2-asym-r,
.hero-full .grid-2,
.hero .grid-2-asym,
.hero .grid-2-asym-r,
.hero .grid-2 {
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: start !important;
}
.hero-full .display, .hero .display { max-width: 18ch; }
.hero-full .h1, .hero .h1 { max-width: 22ch; }
.hero-full .lead,
.hero .lead,
.hero-full .grid-2-asym > *:last-child,
.hero-full .grid-2-asym-r > *:last-child,
.hero-full .grid-2 > *:last-child,
.hero .grid-2-asym > *:last-child,
.hero .grid-2-asym-r > *:last-child,
.hero .grid-2 > *:last-child { max-width: 56ch; }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--paper-3);
  border: 1px solid var(--bone);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-fast) var(--ease-swift);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--obsidian-4); }
.card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.card-body { padding: var(--s-5); }

.card-editorial {
  display: block;
  background: var(--paper-3);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-fast) var(--ease-swift);
}
.card-editorial img {
  width: 100%;
  aspect-ratio: 5/4;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-med) var(--ease-out);
}
.card-editorial:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold);
}
.card-editorial:hover img { transform: scale(1.05); filter: saturate(1.05) contrast(1.02); }
.card-editorial:hover .h3,
.card-editorial:hover .h4 { color: var(--gold); }
.card-editorial .card-body { padding: var(--s-5); }

/* ============================================================
   Stat strip
   ============================================================ */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--bone);
  border-bottom: 1px solid var(--bone);
}
.stat-strip.six { grid-template-columns: repeat(6, 1fr); }
.stat {
  padding: var(--s-6) var(--s-5);
  border-right: 1px solid var(--bone);
  position: relative;
}
.stat:last-child { border-right: none; }
.stat-num {
  font-family: var(--serif);
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1;
  font-weight: 500;
  color: var(--obsidian);
  display: block;
  margin-bottom: var(--s-2);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
}
.stat-label {
  font-size: 12px;
  color: var(--stone-1);
  letter-spacing: 0.02em;
  font-weight: 500;
}
.dark .stat { border-color: rgba(250,250,249,0.1); }
.dark .stat-num { color: var(--paper); }
.dark .stat-label { color: rgba(250,250,249,0.6); }

@media (max-width: 960px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-strip.six { grid-template-columns: repeat(3, 1fr); }
  .stat { border-right: none; border-bottom: 1px solid var(--bone); }
  .stat:last-child { border-bottom: none; }
}
@media (max-width: 600px) {
  .stat-strip, .stat-strip.six { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Roman list
   ============================================================ */
.roman-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-5);
}
.roman-list .item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--bone);
}
.roman-list .item:last-child { border-bottom: 1px solid var(--bone); }
.dark .roman-list .item { border-color: rgba(250,250,249,0.1); }
.roman-num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}
.roman-list h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  margin: 0 0 var(--s-2);
  letter-spacing: -0.01em;
}

/* ============================================================
   Forms
   ============================================================ */
.form { display: grid; gap: var(--s-4); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 6px; }
.field label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--obsidian-2);
}
/* Form labels and helpers on dark surfaces — stay readable.
   Uses !important because the base .field label rule is sometimes
   evaluated at higher priority by browsers that cache the CSS module,
   and we need a hard override on dark sections. */
section.dark .field label,
section.darker .field label,
.section.dark .field label,
.hero-full .field label,
.dark .field label,
.darker .field label {
  color: rgba(250, 250, 249, 0.92) !important;
}
section.dark .field .help,
.section.dark .field .help,
.dark .field .help,
.darker .field .help,
.hero-full .field .help { color: rgba(250, 250, 249, 0.6) !important; }
section.dark .check,
.section.dark .check,
.dark .check,
.darker .check,
.hero-full .check { color: rgba(250, 250, 249, 0.85) !important; }
.field label.required::after { content: ' *'; color: var(--danger); font-weight: 700; }
.field input, .field textarea, .field select {
  border: 1px solid var(--bone);
  background: var(--paper-3);
  padding: 14px 16px;
  font-size: 15px;
  border-radius: var(--radius-sm);
  min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease-swift), box-shadow var(--dur-fast) var(--ease-swift);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(202,138,4,0.15);
}
.field textarea { min-height: 120px; resize: vertical; }
.field .help { font-size: 12px; color: var(--stone-1); }
.field .err { font-size: 12px; color: var(--danger); }
.check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px;
  color: var(--obsidian-2);
  line-height: 1.5;
}
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); }
.form-error-inline {
  margin-top: 6px;
  padding: 8px 12px;
  font-size: 12px;
  background: rgba(185,28,28,0.06);
  color: var(--danger);
  border-left: 2px solid var(--danger);
  border-radius: 2px;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(185,28,28,0.12);
}
.check input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; }
[aria-busy="true"] { opacity: 0.65; cursor: wait; }

.form-success {
  padding: var(--s-6);
  background: linear-gradient(135deg, var(--paper-2) 0%, var(--paper-3) 100%);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
}
.form-success h3 { font-family: var(--serif); font-weight: 500; margin: 0 0 var(--s-2); font-size: 24px; }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--obsidian);
  color: var(--paper);
  padding: var(--s-10) 0 var(--s-5);
  margin-top: var(--s-10);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: var(--s-6);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid rgba(250,250,249,0.1);
}
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { font-family: var(--serif); font-size: 24px; font-weight: 500; margin-bottom: var(--s-4); letter-spacing: -0.02em; }
.footer p { color: rgba(250,250,249,0.7); font-size: 14px; line-height: 1.55; }
.footer-contact { margin-top: var(--s-4); font-size: 13px; color: rgba(250,250,249,0.7); }
.footer-contact a { color: var(--gold-light); }
.footer h5 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin: 0 0 var(--s-4);
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 10px; }
.footer ul a { color: rgba(250,250,249,0.85); font-size: 14px; }
.footer ul a:hover { color: var(--gold-light); }
.footer-bottom {
  padding-top: var(--s-5);
  font-size: 11px;
  line-height: 1.6;
  color: rgba(250,250,249,0.45);
}
.footer-bottom .legal { max-width: 960px; }

/* Accredited Investors Only — SEC Rule 506(c) required notice */
.footer-accredited {
  margin-top: var(--s-5);
  padding: var(--s-5) 0;
  border-top: 1px solid rgba(202, 138, 4, 0.3);
  border-bottom: 1px solid rgba(202, 138, 4, 0.3);
}
.footer-accredited-inner {
  max-width: 1000px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  align-items: start;
}
.footer-accredited-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  background: rgba(202, 138, 4, 0.12);
  border: 1px solid rgba(202, 138, 4, 0.35);
  border-radius: var(--radius-sm);
  color: var(--gold-light);
  white-space: nowrap;
}
.footer-accredited-badge svg { color: var(--gold-light); flex-shrink: 0; }
.footer-accredited-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.footer-accredited p {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(250, 250, 249, 0.78);
  margin: 0;
}
@media (max-width: 720px) {
  .footer-accredited-inner { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* ============================================================
   Utilities
   ============================================================ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-1 { margin-top: var(--s-2); }  .mt-2 { margin-top: var(--s-4); }
.mt-3 { margin-top: var(--s-5); }  .mt-4 { margin-top: var(--s-6); }
.mt-5 { margin-top: var(--s-7); }  .mt-6 { margin-top: var(--s-8); }
.mb-1 { margin-bottom: var(--s-2); } .mb-2 { margin-bottom: var(--s-4); }
.mb-3 { margin-bottom: var(--s-5); } .mb-4 { margin-bottom: var(--s-6); }
.mb-5 { margin-bottom: var(--s-7); } .mb-6 { margin-bottom: var(--s-8); }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.gap-1 { gap: var(--s-2); } .gap-2 { gap: var(--s-4); }
.gap-3 { gap: var(--s-5); } .gap-4 { gap: var(--s-6); }
.w-full { width: 100%; }
.hidden { display: none; }
.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; }

.hr { height: 1px; background: var(--bone); border: 0; margin: var(--s-7) 0; }
.dark .hr { background: rgba(250,250,249,0.1); }

/* ============================================================
   Pull quote
   ============================================================ */
.pullquote {
  font-family: var(--serif);
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.3;
  font-weight: 500;
  padding: var(--s-5) 0 var(--s-5) var(--s-5);
  border-left: 3px solid var(--gold);
  font-style: italic;
  color: var(--obsidian);
  margin: var(--s-7) 0;
  letter-spacing: -0.015em;
}

/* ============================================================
   Tables
   ============================================================ */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.table th, .table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bone);
}
.table th {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stone-1);
  background: var(--paper-2);
}
.dark .table th { background: var(--obsidian-3); color: rgba(250,250,249,0.6); }
.dark .table th, .dark .table td { border-color: rgba(250,250,249,0.1); }

/* ============================================================
   Image treatments
   ============================================================ */
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.img-editorial { filter: saturate(0.9) contrast(1.05); border-radius: var(--radius-md); }
.img-ratio-4-3 { aspect-ratio: 4/3; }
.img-ratio-3-4 { aspect-ratio: 3/4; }
.img-ratio-16-9 { aspect-ratio: 16/9; }
.img-ratio-1-1 { aspect-ratio: 1/1; }
.img-ratio-21-9 { aspect-ratio: 21/9; }

/* ============================================================
   Pin map (concentric circles)
   ============================================================ */
.pin-map {
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--paper-2) 0%, var(--paper-3) 100%);
  border: 1px solid var(--bone);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.pin-map .pin {
  position: absolute;
  width: 14px; height: 14px;
  background: var(--gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(202,138,4,0.15);
}
.pin-map .pin::before, .pin-map .pin::after {
  content: "";
  position: absolute;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0.35;
}
.pin-map .pin::before { inset: -12px; }
.pin-map .pin::after  { inset: -26px; opacity: 0.18; }
.pin-map .pin-label {
  position: absolute;
  top: 16px; left: 16px;
  font-size: 11px;
  background: var(--paper-3);
  padding: 4px 10px;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.03em;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-xs);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq details {
  border-bottom: 1px solid var(--bone);
  padding: var(--s-4) 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-4) 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--obsidian);
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--serif);
  font-size: 28px;
  color: var(--gold);
  transition: transform var(--dur-fast) var(--ease-swift);
}
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 var(--s-4); color: var(--obsidian-2); font-size: 15px; line-height: 1.65; }

/* ============================================================
   Tags
   ============================================================ */
.tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--paper-2);
  color: var(--obsidian-2);
  border-radius: var(--radius-xs);
  font-weight: 600;
}
.tag-gold, .tag-brass { background: var(--gold); color: var(--paper); }

/* ============================================================
   Gallery / masonry
   ============================================================ */
.masonry {
  column-count: 3;
  column-gap: var(--s-4);
}
.masonry img { width: 100%; margin-bottom: var(--s-4); break-inside: avoid; border-radius: var(--radius-md); }
@media (max-width: 960px) { .masonry { column-count: 2; } }
@media (max-width: 600px) { .masonry { column-count: 1; } }

/* ============================================================
   Timeline
   ============================================================ */
.timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-5);
  position: relative;
  padding-top: var(--s-6);
}
.timeline::before {
  content: "";
  position: absolute;
  top: 68px;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 10%, var(--gold) 90%, transparent 100%);
  opacity: 0.5;
}
.timeline-item { text-align: center; position: relative; padding-top: var(--s-6); }
.timeline-item::before {
  content: "";
  position: absolute;
  top: 60px;
  left: 50%;
  width: 14px; height: 14px;
  background: var(--gold);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px rgba(202,138,4,0.18);
}
.timeline-year {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--gold);
  margin-bottom: var(--s-2);
  letter-spacing: -0.02em;
}
@media (max-width: 960px) {
  .timeline { grid-template-columns: 1fr; }
  .timeline::before { display: none; }
  .timeline-item { text-align: left; padding-left: var(--s-6); padding-top: 0; }
  .timeline-item::before { left: 0; top: 8px; }
}

/* ============================================================
   Prose (blog)
   ============================================================ */
.prose {
  max-width: var(--reading);
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
  color: var(--obsidian-2);
}
.prose h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--obsidian);
  margin: var(--s-7) 0 var(--s-4);
}
.prose h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: var(--s-6) 0 var(--s-2);
}
.prose p { margin: 0 0 var(--s-4); }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--gold-light); }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 var(--s-5); }
.prose li { margin-bottom: 6px; }
.prose img { margin: var(--s-6) 0; width: 100%; border-radius: var(--radius-md); }
.prose blockquote {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.3;
  font-style: italic;
  font-weight: 500;
  margin: var(--s-7) 0;
  padding-left: var(--s-5);
  border-left: 3px solid var(--gold);
  color: var(--obsidian);
  letter-spacing: -0.01em;
}

/* Article meta */
.article-meta {
  display: flex;
  gap: var(--s-4);
  font-size: 13px;
  color: var(--stone-1);
  align-items: center;
  flex-wrap: wrap;
}
.article-meta > *:not(:last-child)::after { content: "·"; margin-left: var(--s-3); color: var(--bone); }

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 960px) { .related-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Route cards
   ============================================================ */
.route-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  background: var(--paper-3);
  border: 1px solid var(--bone);
  border-radius: var(--radius-md);
  transition: all var(--dur-med) var(--ease-out);
  height: 100%;
  cursor: pointer;
}
.route-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.route-card > svg { flex-shrink: 0; margin-bottom: var(--s-2); color: var(--gold); }
.route-card .eyebrow { color: var(--gold); margin-bottom: var(--s-3); display: block; }
.route-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  margin: 0 0 var(--s-2);
  letter-spacing: -0.015em;
}
.route-card p { color: var(--obsidian-2); font-size: 14px; margin: 0; }
.route-card .arrow { margin-top: auto; padding-top: var(--s-4); color: var(--gold); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.route-card.dark-panel > svg { color: var(--gold-light); }
.route-card.dark-panel p { color: rgba(250,250,249,0.72); }

/* Self-contained route-card text colors — must beat .dark/.darker descendant cascades.
   Light route-cards (default, no .dark-panel) keep ink/obsidian text on paper background,
   regardless of parent section theme. Specificity is bumped via .section.dark scoping
   and :not(.dark-panel) so these rules win over the generic .dark h3 / .dark p rules. */
.section.dark .route-card:not(.dark-panel),
.section.darker .route-card:not(.dark-panel),
.dark .route-card:not(.dark-panel),
.darker .route-card:not(.dark-panel) { color: var(--ink); }

.section.dark .route-card:not(.dark-panel) h1,
.section.dark .route-card:not(.dark-panel) h2,
.section.dark .route-card:not(.dark-panel) h3,
.section.dark .route-card:not(.dark-panel) h4,
.section.dark .route-card:not(.dark-panel) .h1,
.section.dark .route-card:not(.dark-panel) .h2,
.section.dark .route-card:not(.dark-panel) .h3,
.section.dark .route-card:not(.dark-panel) .h4,
.section.darker .route-card:not(.dark-panel) h1,
.section.darker .route-card:not(.dark-panel) h2,
.section.darker .route-card:not(.dark-panel) h3,
.section.darker .route-card:not(.dark-panel) h4,
.section.darker .route-card:not(.dark-panel) .h1,
.section.darker .route-card:not(.dark-panel) .h2,
.section.darker .route-card:not(.dark-panel) .h3,
.section.darker .route-card:not(.dark-panel) .h4,
.dark .route-card:not(.dark-panel) h1,
.dark .route-card:not(.dark-panel) h2,
.dark .route-card:not(.dark-panel) h3,
.dark .route-card:not(.dark-panel) h4,
.dark .route-card:not(.dark-panel) .h1,
.dark .route-card:not(.dark-panel) .h2,
.dark .route-card:not(.dark-panel) .h3,
.dark .route-card:not(.dark-panel) .h4,
.darker .route-card:not(.dark-panel) h1,
.darker .route-card:not(.dark-panel) h2,
.darker .route-card:not(.dark-panel) h3,
.darker .route-card:not(.dark-panel) h4,
.darker .route-card:not(.dark-panel) .h1,
.darker .route-card:not(.dark-panel) .h2,
.darker .route-card:not(.dark-panel) .h3,
.darker .route-card:not(.dark-panel) .h4 { color: var(--ink); }

.section.dark .route-card:not(.dark-panel) .display em,
.section.dark .route-card:not(.dark-panel) .h1 em,
.section.dark .route-card:not(.dark-panel) .h2 em,
.section.dark .route-card:not(.dark-panel) .h3 em,
.section.dark .route-card:not(.dark-panel) .h4 em,
.section.dark .route-card:not(.dark-panel) h3 em,
.section.dark .route-card:not(.dark-panel) h4 em,
.section.darker .route-card:not(.dark-panel) .h1 em,
.section.darker .route-card:not(.dark-panel) .h2 em,
.section.darker .route-card:not(.dark-panel) .h3 em,
.section.darker .route-card:not(.dark-panel) .h4 em,
.section.darker .route-card:not(.dark-panel) h3 em,
.section.darker .route-card:not(.dark-panel) h4 em,
.dark .route-card:not(.dark-panel) .h3 em,
.dark .route-card:not(.dark-panel) .h4 em,
.dark .route-card:not(.dark-panel) h3 em,
.dark .route-card:not(.dark-panel) h4 em,
.darker .route-card:not(.dark-panel) .h3 em,
.darker .route-card:not(.dark-panel) .h4 em,
.darker .route-card:not(.dark-panel) h3 em,
.darker .route-card:not(.dark-panel) h4 em { color: var(--gold); }

.section.dark .route-card:not(.dark-panel) .eyebrow,
.section.darker .route-card:not(.dark-panel) .eyebrow,
.dark .route-card:not(.dark-panel) .eyebrow,
.darker .route-card:not(.dark-panel) .eyebrow { color: var(--gold); }

.section.dark .route-card:not(.dark-panel) p,
.section.darker .route-card:not(.dark-panel) p,
.dark .route-card:not(.dark-panel) p,
.darker .route-card:not(.dark-panel) p { color: var(--obsidian-2); }

.section.dark .route-card:not(.dark-panel) .small,
.section.dark .route-card:not(.dark-panel) .lead,
.section.darker .route-card:not(.dark-panel) .small,
.section.darker .route-card:not(.dark-panel) .lead,
.dark .route-card:not(.dark-panel) .small,
.dark .route-card:not(.dark-panel) .lead,
.darker .route-card:not(.dark-panel) .small,
.darker .route-card:not(.dark-panel) .lead { color: var(--obsidian-2); }

.section.dark .route-card:not(.dark-panel) .arrow,
.section.darker .route-card:not(.dark-panel) .arrow,
.dark .route-card:not(.dark-panel) .arrow,
.darker .route-card:not(.dark-panel) .arrow { color: var(--gold); }

/* Self-contained card-editorial text colors — must beat .dark/.darker descendant cascades.
   .card-editorial has its own light/cream background, so its text must always render in
   ink/obsidian/gold regardless of the parent .dark or .darker section theme. Specificity is
   bumped via .section.dark / .section.darker scoping (0,2,1) so these rules win over the
   generic .dark h3 (0,1,1) and .dark p (0,1,1) rules. */
.section.dark .card-editorial,
.section.darker .card-editorial,
.dark .card-editorial,
.darker .card-editorial { color: var(--ink); }

.section.dark .card-editorial h1,
.section.dark .card-editorial h2,
.section.dark .card-editorial h3,
.section.dark .card-editorial h4,
.section.dark .card-editorial .h1,
.section.dark .card-editorial .h2,
.section.dark .card-editorial .h3,
.section.dark .card-editorial .h4,
.section.darker .card-editorial h1,
.section.darker .card-editorial h2,
.section.darker .card-editorial h3,
.section.darker .card-editorial h4,
.section.darker .card-editorial .h1,
.section.darker .card-editorial .h2,
.section.darker .card-editorial .h3,
.section.darker .card-editorial .h4,
.dark .card-editorial h1,
.dark .card-editorial h2,
.dark .card-editorial h3,
.dark .card-editorial h4,
.dark .card-editorial .h1,
.dark .card-editorial .h2,
.dark .card-editorial .h3,
.dark .card-editorial .h4,
.darker .card-editorial h1,
.darker .card-editorial h2,
.darker .card-editorial h3,
.darker .card-editorial h4,
.darker .card-editorial .h1,
.darker .card-editorial .h2,
.darker .card-editorial .h3,
.darker .card-editorial .h4 { color: var(--ink); }

.section.dark .card-editorial h1 em,
.section.dark .card-editorial h2 em,
.section.dark .card-editorial h3 em,
.section.dark .card-editorial h4 em,
.section.dark .card-editorial .h1 em,
.section.dark .card-editorial .h2 em,
.section.dark .card-editorial .h3 em,
.section.dark .card-editorial .h4 em,
.section.darker .card-editorial h1 em,
.section.darker .card-editorial h2 em,
.section.darker .card-editorial h3 em,
.section.darker .card-editorial h4 em,
.section.darker .card-editorial .h1 em,
.section.darker .card-editorial .h2 em,
.section.darker .card-editorial .h3 em,
.section.darker .card-editorial .h4 em,
.dark .card-editorial h3 em,
.dark .card-editorial h4 em,
.dark .card-editorial .h3 em,
.dark .card-editorial .h4 em,
.darker .card-editorial h3 em,
.darker .card-editorial h4 em,
.darker .card-editorial .h3 em,
.darker .card-editorial .h4 em { color: var(--gold); }

.section.dark .card-editorial p,
.section.darker .card-editorial p,
.dark .card-editorial p,
.darker .card-editorial p { color: var(--obsidian-2); }

.section.dark .card-editorial .small,
.section.dark .card-editorial .lead,
.section.darker .card-editorial .small,
.section.darker .card-editorial .lead,
.dark .card-editorial .small,
.dark .card-editorial .lead,
.darker .card-editorial .small,
.darker .card-editorial .lead { color: var(--stone); }

.section.dark .card-editorial .eyebrow,
.section.darker .card-editorial .eyebrow,
.dark .card-editorial .eyebrow,
.darker .card-editorial .eyebrow { color: var(--gold); }

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Staggered reveal children (bento cells, grid items) */
.stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
}
.stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.stagger.is-visible > *:nth-child(1) { transition-delay: 60ms; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 120ms; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.stagger.is-visible > *:nth-child(5) { transition-delay: 300ms; }
.stagger.is-visible > *:nth-child(6) { transition-delay: 360ms; }

/* ============================================================
   404 page — Page not found
   ============================================================ */
.not-found .not-found-grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr;
  gap: var(--s-8);
  align-items: center;
}
.not-found-glyph {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.not-found-num {
  font-family: var(--serif);
  font-size: clamp(96px, 16vw, 220px);
  line-height: 0.85;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: -0.05em;
  font-variant-numeric: lining-nums tabular-nums;
}
.not-found-rule {
  display: block;
  width: 80px;
  height: 2px;
  background: var(--gold);
  opacity: 0.5;
}
.not-found-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.not-found-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--s-5);
  padding: 4px 4px 4px 16px;
  background: rgba(250, 250, 249, 0.06);
  border: 1px solid rgba(250, 250, 249, 0.18);
  border-radius: var(--radius-sm);
  max-width: 480px;
}
.not-found-search input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 12px 0;
  color: var(--paper);
  font-size: 15px;
  outline: none;
}
.not-found-search input::placeholder { color: rgba(250, 250, 249, 0.5); }
.not-found-search button {
  background: var(--gold);
  color: var(--paper);
  border: 0;
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-swift);
}
.not-found-search button:hover { background: var(--gold-light); color: var(--obsidian); }
@media (max-width: 720px) {
  .not-found .not-found-grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* ============================================================
   Native-language counsel trust badge
   ============================================================ */
.counsel-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(202, 138, 4, 0.1);
  border: 1px solid rgba(202, 138, 4, 0.35);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-decoration: none;
}
.counsel-badge svg {
  flex-shrink: 0;
  color: var(--gold);
}
.dark .counsel-badge,
.darker .counsel-badge,
.hero-full .counsel-badge,
[class*="section-lg dark"] .counsel-badge {
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.45);
  color: var(--gold-light);
}
.dark .counsel-badge svg,
.darker .counsel-badge svg,
.hero-full .counsel-badge svg { color: var(--gold-light); }
/* On RTL pages, swap badge icon side */
html[dir="rtl"] .counsel-badge, body.lang-ar .counsel-badge { flex-direction: row-reverse; }

/* ============================================================
   Translated EB-5 landing pages — typography stacks per locale
   ============================================================ */
body.lang-zh, html[lang="zh-CN"] body {
  font-family: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', -apple-system, system-ui, sans-serif;
}
body.lang-zh h1, body.lang-zh h2, body.lang-zh h3, body.lang-zh h4,
body.lang-zh .display, body.lang-zh .h1, body.lang-zh .h2, body.lang-zh .h3, body.lang-zh .h4 {
  font-family: 'Playfair Display', 'Noto Sans SC', 'PingFang SC', serif;
}

/* Traditional Chinese (HK / TW) */
body.lang-zh-tw, html[lang="zh-TW"] body {
  font-family: 'Inter', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', -apple-system, system-ui, sans-serif;
}
body.lang-zh-tw h1, body.lang-zh-tw h2, body.lang-zh-tw h3, body.lang-zh-tw h4,
body.lang-zh-tw .display, body.lang-zh-tw .h1, body.lang-zh-tw .h2, body.lang-zh-tw .h3, body.lang-zh-tw .h4 {
  font-family: 'Playfair Display', 'Noto Sans TC', 'PingFang TC', serif;
}

/* Arabic RTL */
html[dir="rtl"] body, body.lang-ar {
  font-family: 'Noto Naskh Arabic', 'Inter', -apple-system, system-ui, sans-serif;
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4,
html[dir="rtl"] .display, html[dir="rtl"] .h1, html[dir="rtl"] .h2, html[dir="rtl"] .h3, html[dir="rtl"] .h4,
body.lang-ar h1, body.lang-ar h2, body.lang-ar h3, body.lang-ar h4,
body.lang-ar .display, body.lang-ar .h1, body.lang-ar .h2, body.lang-ar .h3, body.lang-ar .h4 {
  font-family: 'Noto Naskh Arabic', 'Playfair Display', serif;
  letter-spacing: 0;
}
html[dir="rtl"] .display em, html[dir="rtl"] .h1 em, html[dir="rtl"] .h2 em,
body.lang-ar .display em, body.lang-ar .h1 em, body.lang-ar .h2 em {
  font-family: 'Noto Naskh Arabic', 'Playfair Display', serif;
}
/* Header / footer / language bar / nav stay LTR for navigation consistency
   (English brand + nav labels read left-to-right inside the RTL page). */
html[dir="rtl"] header.header, html[dir="rtl"] footer.footer,
html[dir="rtl"] .notice, html[dir="rtl"] .lang-bar,
body.lang-ar header.header, body.lang-ar footer.footer,
body.lang-ar .notice, body.lang-ar .lang-bar { direction: ltr; }

/* Roman list reflow for RTL content */
html[dir="rtl"] .roman-list .item, body.lang-ar .roman-list .item {
  grid-template-columns: 1fr 60px;
  direction: rtl;
}
html[dir="rtl"] .roman-num, body.lang-ar .roman-num {
  text-align: left;
  direction: ltr;
}

/* Breadcrumb separator visual flip in RTL */
html[dir="rtl"] .breadcrumb .sep, body.lang-ar .breadcrumb .sep {
  display: inline-block;
  transform: scaleX(-1);
}

/* CTA buttons — keep arrow icon flowing with reading direction */
html[dir="rtl"] .btn-primary svg, html[dir="rtl"] .btn-gold svg,
body.lang-ar .btn-primary svg, body.lang-ar .btn-gold svg {
  transform: scaleX(-1);
}

/* ============================================================
   Language bar (eb5 page) — investor consultation in 5 languages
   ============================================================ */
.lang-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--bone);
  border-bottom: 1px solid var(--bone);
  font-size: 13px;
}
.lang-bar-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone-1);
  font-weight: 600;
  margin-right: var(--s-2);
}
.lang-bar-link {
  color: var(--obsidian-2);
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  transition: background var(--dur-fast) var(--ease-swift), color var(--dur-fast) var(--ease-swift);
}
.lang-bar-link:hover { color: var(--gold); background: var(--paper-2); }
.lang-bar-link.is-active {
  color: var(--obsidian);
  background: var(--paper-2);
  font-weight: 600;
}
.lang-bar-sep { color: var(--bone); }

/* ============================================================
   Editorial Timeline (about page) — massive year + milestone
   ============================================================ */
.timeline-block {
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline-block li {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: var(--s-7);
  padding: var(--s-7) 0;
  border-top: 1px solid rgba(250, 250, 249, 0.12);
  align-items: baseline;
}
.timeline-block li:last-child {
  border-bottom: 1px solid rgba(250, 250, 249, 0.12);
}
.tb-year {
  font-family: var(--serif);
  font-size: clamp(64px, 9vw, 156px);
  line-height: 0.9;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums tabular-nums;
}
.tb-year em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-light);
}
.tb-content { padding-top: var(--s-3); }
.tb-title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.18;
  font-weight: 500;
  color: var(--paper);
  margin: 0;
  letter-spacing: -0.018em;
}
.tb-body {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(250, 250, 249, 0.7);
  margin: var(--s-3) 0 0;
  max-width: 56ch;
}
@media (max-width: 720px) {
  .timeline-block li {
    grid-template-columns: 1fr;
    gap: var(--s-3);
    padding: var(--s-6) 0;
  }
  .tb-year { font-size: clamp(48px, 16vw, 88px); }
}

/* ============================================================
   Team Portrait — photo OR elegant initial-disc placeholder
   ============================================================ */
.team-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--bone);
}
.team-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
}
.team-portrait--placeholder {
  background:
    radial-gradient(ellipse at top left, rgba(202, 138, 4, 0.18) 0%, transparent 55%),
    linear-gradient(135deg, var(--obsidian) 0%, var(--obsidian-3) 100%);
  border: 1px solid var(--obsidian-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-initials {
  font-family: var(--serif);
  font-size: clamp(64px, 7vw, 110px);
  font-weight: 500;
  color: var(--gold);
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.team-card { display: flex; flex-direction: column; }
.team-card .card-body { padding: var(--s-4) 0 var(--s-5); }
.team-card .card-body h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: var(--s-1) 0 0;
}

/* ============================================================
   Investor Metrics Panel — pro-forma display
   Scoped under .proforma. Designed to sit INSIDE .section.dark
   without a jarring panel flip. Tombstone / memo aesthetic.
   ============================================================ */
.proforma {
  margin: 0;
  padding: var(--s-7) 0 var(--s-6);
  border-top: 1px solid rgba(234, 179, 8, 0.28);
  border-bottom: 1px solid rgba(234, 179, 8, 0.14);
  color: var(--paper);
}

/* ----- Head ----- */
.proforma__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}
.proforma__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}
.proforma__mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(234, 179, 8, 0.5);
  color: var(--gold-light);
  letter-spacing: 0.22em;
}
.proforma__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(234,179,8,0.35) 0%, rgba(234,179,8,0) 100%);
  max-width: 120px;
}
.proforma__kicker { color: rgba(250, 250, 249, 0.7); letter-spacing: 0.22em; }
.proforma__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.3vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0;
  max-width: 720px;
}
.proforma__title em {
  font-style: italic;
  color: var(--gold-light);
  font-weight: 400;
}

/* ----- Body: anchor + divider + ledger ----- */
.proforma__body {
  display: grid;
  grid-template-columns: 1.05fr 1px 1fr;
  gap: var(--s-7);
  align-items: start;
}

/* ----- Left: the anchor (8%) ----- */
.proforma__anchor {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-right: var(--s-4);
}
.proforma__anchor-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.proforma__anchor-num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(120px, 18vw, 220px);
  line-height: 0.82;
  letter-spacing: -0.055em;
  color: var(--paper);
  font-variant-numeric: tabular-nums lining-nums;
  display: inline-flex;
  align-items: flex-start;
  font-feature-settings: "lnum" 1, "tnum" 1, "kern" 1;
}
.proforma__pct {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 0.32em;
  letter-spacing: 0;
  line-height: 1;
  margin-top: 0.28em;
  margin-left: 0.04em;
  color: var(--gold-light);
}
.proforma__anchor-foot {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(250, 250, 249, 0.7);
  max-width: 28ch;
}

/* ----- Middle: vertical hairline ----- */
.proforma__divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg,
    rgba(234,179,8,0.35) 0%,
    rgba(250,250,249,0.18) 30%,
    rgba(250,250,249,0.06) 100%);
  min-height: 260px;
}

/* ----- Right: ledger ----- */
.proforma__ledger {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.proforma__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid rgba(250, 250, 249, 0.08);
}
.proforma__row:first-child { padding-top: 0; }
.proforma__row:last-child { border-bottom: none; padding-bottom: 0; }

.proforma__row dt {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 250, 249, 0.88);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.proforma__meta {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 250, 249, 0.45);
}
.proforma__row dd {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--paper);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.proforma__row--lead dd { color: var(--gold-light); }
.proforma__row--lead {
  border-bottom: 1px solid rgba(234, 179, 8, 0.28);
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-2);
}
.proforma__row--lead dt { color: var(--gold-light); }
.proforma__row--lead .proforma__meta { color: rgba(234, 179, 8, 0.55); }

.proforma__cur {
  font-size: 0.62em;
  color: rgba(250, 250, 249, 0.55);
  margin-right: 0.06em;
  vertical-align: 0.18em;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0;
}
.proforma__unit {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.42em;
  letter-spacing: 0.06em;
  color: rgba(250, 250, 249, 0.55);
  margin-left: 0.12em;
  vertical-align: 0.32em;
}
.proforma__row--lead .proforma__unit,
.proforma__row--lead .proforma__cur { color: rgba(234, 179, 8, 0.75); }
.proforma__en {
  font-family: var(--serif);
  margin: 0 0.04em;
  color: inherit;
  opacity: 0.7;
}

/* ----- Foot ----- */
.proforma__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(250, 250, 249, 0.08);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(250, 250, 249, 0.5);
  line-height: 1.55;
}
.proforma__foot span:first-child {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(250, 250, 249, 0.6);
}

/* ----- Responsive ----- */
@media (max-width: 960px) {
  .proforma__body {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .proforma__anchor { padding-right: 0; }
  .proforma__divider {
    width: 100%;
    height: 1px;
    min-height: 0;
    background: linear-gradient(90deg,
      rgba(234,179,8,0.35) 0%,
      rgba(250,250,249,0.06) 100%);
  }
  .proforma__anchor-num { font-size: clamp(104px, 22vw, 180px); }
}
@media (max-width: 720px) {
  .proforma { padding: var(--s-6) 0 var(--s-5); }
  .proforma__head { margin-bottom: var(--s-6); }
  .proforma__rule { display: none; }
  .proforma__eyebrow { flex-wrap: wrap; gap: var(--s-2); }
  .proforma__row dd { font-size: clamp(26px, 7vw, 36px); }
  .proforma__foot {
    flex-direction: column;
    gap: var(--s-2);
  }
}
@media (max-width: 480px) {
  .proforma__anchor-num { font-size: clamp(96px, 30vw, 140px); }
  .proforma__title { font-size: clamp(24px, 7vw, 30px); }
  .proforma__row {
    grid-template-columns: 1fr;
    gap: var(--s-1);
  }
  .proforma__row dd { font-size: 30px; }
}

/* ============================================================
   Print
   ============================================================ */
@media print {
  .header, .footer, .cta-btn, .btn-primary, .btn-ghost, .btn-gold { display: none; }
  body { background: white; color: black; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .stagger > * { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Contrast Safety Nets — defensive overrides for inline color
   styles authored against the wrong context (dark text on dark,
   light text on light). These rules use attribute selectors so
   they can win over inline styles via !important.
   Applied in two directions:
     A) Anything inside a dark surface that was authored with a
        DARK token (--ink, --obsidian, --obsidian-2/3/4) gets
        forced back to a readable light color.
     B) Anything inside a clearly-light surface that was authored
        with a LIGHT token (--cream, --paper, --paper-2/3) gets
        forced back to a readable dark color.
   These match the legacy 245,240,230 (cream) and 26,26,23 (ink)
   rgba patterns too.
   ============================================================ */

/* A) Dark sections — kill stray dark-text inline styles.
      We need to match elements whose inline `color:` declaration
      uses a dark token. CSS attribute selectors can't isolate
      one CSS declaration from the inline-style string, so we
      enumerate the specific patterns that occur in this codebase:
      `color: var(--ink)`, `color: var(--obsidian)`, etc.
      Note: this means an element with both
      `background: var(--obsidian-2); color: var(--gold)` will NOT
      match — the substring "color: var(--obsidian" is absent. */
.dark [style*="color: var(--ink)"],
.dark [style*="color:var(--ink)"],
.dark [style*="color: var(--ink-soft)"],
.dark [style*="color:var(--ink-soft)"],
.dark [style*="color: var(--obsidian)"],
.dark [style*="color:var(--obsidian)"],
.dark [style*="color: var(--obsidian-2)"],
.dark [style*="color: var(--obsidian-3)"],
.dark [style*="color: var(--obsidian-4)"],
.dark [style*="color: rgba(26,26,23"],
.dark [style*="color: rgba(26, 26, 23"],
.dark [style*="color: rgba(12,10,9"],
.dark [style*="color: rgba(12, 10, 9"],
.darker [style*="color: var(--ink)"],
.darker [style*="color:var(--ink)"],
.darker [style*="color: var(--ink-soft)"],
.darker [style*="color:var(--ink-soft)"],
.darker [style*="color: var(--obsidian)"],
.darker [style*="color:var(--obsidian)"],
.darker [style*="color: var(--obsidian-2)"],
.darker [style*="color: var(--obsidian-3)"],
.darker [style*="color: var(--obsidian-4)"],
.darker [style*="color: rgba(26,26,23"],
.darker [style*="color: rgba(26, 26, 23"],
.darker [style*="color: rgba(12,10,9"],
.darker [style*="color: rgba(12, 10, 9"],
.hero-full [style*="color: var(--ink)"],
.hero-full [style*="color:var(--ink)"],
.hero-full [style*="color: var(--ink-soft)"],
.hero-full [style*="color:var(--ink-soft)"],
.hero-full [style*="color: var(--obsidian)"],
.hero-full [style*="color:var(--obsidian)"],
.hero-full [style*="color: var(--obsidian-2)"],
.hero-full [style*="color: var(--obsidian-3)"],
.hero-full [style*="color: var(--obsidian-4)"],
.hero-full [style*="color: rgba(26,26,23"],
.hero-full [style*="color: rgba(26, 26, 23"],
.hero-full [style*="color: rgba(12,10,9"],
.hero-full [style*="color: rgba(12, 10, 9"] {
  color: rgba(250, 250, 249, 0.88) !important;
}

/* A2) Stone-1 (mid-gray #78716C) used as inline `color:` on dark
       surfaces would render as a 4.6:1 dim gray. Lift to readable. */
.dark [style*="color: var(--stone)"],
.dark [style*="color:var(--stone)"],
.dark [style*="color: var(--stone-1)"],
.darker [style*="color: var(--stone)"],
.darker [style*="color:var(--stone)"],
.darker [style*="color: var(--stone-1)"],
.hero-full [style*="color: var(--stone)"],
.hero-full [style*="color:var(--stone)"],
.hero-full [style*="color: var(--stone-1)"] {
  color: rgba(250, 250, 249, 0.7) !important;
}

/* B) Light surfaces — flag inline light-on-light text via
      an explicit .light-panel container. Authors who want a
      light panel inside a dark section wrap with .light-panel. */
.light-panel { background: var(--paper-2); color: var(--obsidian); }
.light-panel [style*="color: var(--cream)"],
.light-panel [style*="color:var(--cream)"],
.light-panel [style*="color: var(--paper)"],
.light-panel [style*="color:var(--paper)"],
.light-panel [style*="color: rgba(245,240,230"],
.light-panel [style*="color: rgba(245, 240, 230"],
.light-panel [style*="color: rgba(250,250,249"],
.light-panel [style*="color: rgba(250, 250, 249"] {
  color: var(--obsidian) !important;
}

/* B2) Inside a self-contained dark inline panel that lives
       inside an otherwise light section, mark with .dark-panel
       for explicit opt-in to dark-section text behavior. */
.dark-panel { color: var(--paper); }
.dark-panel [style*="color: var(--ink)"],
.dark-panel [style*="color:var(--ink)"],
.dark-panel [style*="color: var(--obsidian)"],
.dark-panel [style*="color:var(--obsidian)"],
.dark-panel [style*="color: rgba(26,26,23"],
.dark-panel [style*="color: rgba(26, 26, 23"],
.dark-panel [style*="color: rgba(12,10,9"],
.dark-panel [style*="color: rgba(12, 10, 9"] {
  color: rgba(250, 250, 249, 0.88) !important;
}

/* C) Eyebrows on light surfaces — if accidentally set to
      a light color, fall back to gold. */
.section:not(.dark):not(.darker) .eyebrow[style*="color: var(--cream)"],
.section:not(.dark):not(.darker) .eyebrow[style*="color: var(--paper)"] {
  color: var(--gold) !important;
}