/* ═══════════════════════════════════════════════════════
   STRIVEPOINT CAPITAL — SHARED DESIGN SYSTEM
   styles.css · Single source of truth
   ═══════════════════════════════════════════════════════

   TYPE SCALE — 7 values only. No other font-size values
   anywhere on the site. Every value below is intentional.

   GARAMOND (prose + display):
   --Display  clamp(40px, 5.5vw, 76px)  Homepage hero H1 only
   --Page     clamp(30px, 4vw, 52px)    Inner page hero H1s
   --Title    clamp(22px, 2.8vw, 36px)  All section H2s
   --Body     18px                       All prose text
   --Support  15px                       Secondary / card body

   DM MONO (labels + data):
   --Label    11px                       Nav, data values
   --Micro    9px                        Eyebrows, chips, badges

   COLORS — hardcoded hex, no CSS variables:
   Teal       #244F4D   headers, accents
   Cream      #FFFFF2   background
   Navy       #0E0136   body text
   Grey       #414C55   secondary text
   Green      #3AE393   accent on dark
   ═══════════════════════════════════════════════════════ */

/* ── RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body {
  font-family: 'EB Garamond', Georgia, serif;
  background: #FFFFF2;
  color: #0E0136;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-size: 18px;          /* --Body: base size */
  line-height: 1.72;
}

/* ── TYPE SCALE ──────────────────────────────────────── */

/* Display — homepage hero only */
.t-display {
  font-size: clamp(48px, 6.5vw, 96px);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -2px;
  font-family: 'EB Garamond', Georgia, serif;
}
/* Page hero — inner page H1s */
.t-page {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.5px;
  font-family: 'EB Garamond', Georgia, serif;
}
/* Title — all section H2s */
.t-title {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.3px;
  font-family: 'EB Garamond', Georgia, serif;
}
/* Body — all prose (default size = 18px on body) */
.t-body { font-size: 18px; line-height: 1.75; }
/* Support — secondary / card text */
.t-support { font-size: 15px; line-height: 1.72; }

/* Label — mono 13px */
.t-label {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.5px;
}
/* Micro — eyebrows, chips, badges */
.t-micro {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ── EYEBROW VARIANTS ────────────────────────────────── */
/* Eyebrow on cream bg → teal text */
.eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #244F4D;
  display: block;
  margin-bottom: 18px;
}
/* Eyebrow on teal bg → green text */
.eyebrow-inv {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #3AE393;
  display: block;
  margin-bottom: 18px;
}

/* ── NAVIGATION ──────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  /* Glass nav: sits over both the canvas hero and page body sections.
     backdrop-filter blurs whatever is beneath — particles when over hero,
     body content when scrolled. Matches hero glass language. */
  background: rgba(36,79,77,0.60);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 52px;
  height: 64px;
  border-bottom: 1px solid rgba(255,255,242,0.07);
  transition: background 0.3s, border-bottom-color 0.3s;
}
nav.scrolled {
  background: rgba(36,79,77,0.82);
  border-bottom-color: rgba(255,255,242,0.10);
}
.nav-logo img { height: 34px; display: block; max-width: 160px; width: auto; }
.nav-links { display: flex; gap: 36px; align-items: center; }
.nav-links a {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,242,0.62);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: #FFFFF2; }
.nav-links a.active { color: #3AE393; }
.nav-cta {
  color: #0E0136 !important;
  background: #3AE393;
  padding: 7px 18px;
  border-radius: 2px;
  transition: opacity 0.2s;
}
.nav-cta:hover { opacity: 0.85; }
.nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-hamburger span { display: block; width: 22px; height: 1px; background: #FFFFF2; margin: 5px 0; }

/* Mobile nav overlay */
.mobile-nav {
  display: none; position: fixed; inset: 0; z-index: 290;
  background: #244F4D;
  padding: 80px 24px 40px;
  flex-direction: column; gap: 28px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,242,0.82);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,242,0.07);
}

/* ── PAGE HERO (inner pages) ─────────────────────────── */
.page-hero {
  background: #244F4D;
  padding: 140px 52px 80px;
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.page-hero .eyebrow-inv { margin-bottom: 20px; }
.page-hero h1 { color: #FFFFF2; max-width: 680px; }
.page-hero .hero-sub {
  font-size: 18px;
  font-style: italic;
  color: rgba(255,255,242,0.5);
  margin-top: 20px;
  max-width: 520px;
  line-height: 1.65;
}

/* ── SECTION SCAFFOLDING ─────────────────────────────── */
section { padding: 96px 52px; }
.inner { max-width: 960px; margin: 0 auto; }
.prose-col { max-width: 680px; }

/* ── SECTION BACKGROUNDS ─────────────────────────────── */
.bg-cream  { background: #FFFFF2; }
.bg-teal   { background: #244F4D; }
.bg-navy   { background: #0E0136; }

/* ── SCROLL REVEAL ───────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.72s ease, transform 0.72s ease; }
.reveal.on { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.22s; }
.d3 { transition-delay: 0.36s; }
.d4 { transition-delay: 0.50s; }

/* ── TEXT COLORS ─────────────────────────────────────── */
.tc-cream  { color: #FFFFF2; }
.tc-cream-dim { color: rgba(255,255,242,0.55); }
.tc-navy   { color: #0E0136; }
.tc-grey   { color: #414C55; }
.tc-teal   { color: #244F4D; }
.tc-green  { color: #3AE393; }
.tc-green-dim { color: rgba(58,227,147,0.6); }

/* ── DIVIDERS ────────────────────────────────────────── */
.divider-light { border: none; border-top: 1px solid rgba(14,1,54,0.07); }
.divider-dark  { border: none; border-top: 1px solid rgba(255,255,242,0.07); }

/* ── CARDS ───────────────────────────────────────────── */
.card {
  border: 1px solid rgba(14,1,54,0.1);
  border-radius: 2px;
  padding: 32px;
  transition: border-color 0.2s;
}
.card:hover { border-color: #244F4D; }
.card-teal {
  background: #244F4D;
  border-radius: 2px;
  padding: 36px;
}
.card-inv {
  background: rgba(255,255,242,0.04);
  border: 1px solid rgba(255,255,242,0.08);
  border-radius: 2px;
  padding: 36px;
}

/* ── CHIPS / BADGES ──────────────────────────────────── */
.chip {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 1px;
  background: rgba(36,79,77,0.08);
  color: #244F4D;
  border: 1px solid rgba(36,79,77,0.15);
}
.chip-buy {
  background: rgba(58,227,147,0.1);
  color: #0a5e3a;
  border-color: rgba(58,227,147,0.22);
}
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── FOOTER ──────────────────────────────────────────── */
footer {
  background: #244F4D;
  padding: 36px 52px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,242,0.07);
}
.footer-logo img { height: 28px; opacity: 0.8; }
.footer-links { display: flex; gap: 28px; }
.footer-links a {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(155,204,192,0.6);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: rgba(255,255,242,0.85); }
.footer-disc {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: rgba(155,204,192,0.4);
  line-height: 1.6;
  max-width: 380px;
  text-align: right;
}

/* ── LINK UTILITIES ──────────────────────────────────── */
.text-link {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #244F4D;
  text-decoration: none;
  border-bottom: 1px solid rgba(36,79,77,0.28);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.text-link:hover { border-color: #244F4D; }
.text-link-inv {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(58,227,147,0.6);
  text-decoration: none;
  border-bottom: 1px solid rgba(58,227,147,0.22);
  padding-bottom: 2px;
}

/* ── PERSPECTIVES CARDS (shared) ─────────────────────── */
.p-card {
  border: 1px solid rgba(14,1,54,0.1);
  border-radius: 2px;
  padding: 28px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s;
}
.p-card:hover { border-color: #244F4D; }
.p-inflect {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #244F4D;
  display: block;
  margin-bottom: 10px;
}
.p-ticker {
  font-family: 'DM Mono', monospace;
  font-size: 18px;
  font-weight: 500;
  color: #244F4D;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 2px;
}
.p-co { font-size: 15px; color: #414C55; display: block; margin-bottom: 14px; }
.p-card h3 { font-size: 18px; font-weight: 500; color: #0E0136; line-height: 1.35; margin-bottom: 10px; flex-grow: 1; }
.p-card p { font-size: 15px; color: #414C55; line-height: 1.65; }
.p-arrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 1px; color: #244F4D; display: block; margin-top: 20px; }

/* ── RESPONSIVE BASE ─────────────────────────────────── */
@media (max-width: 960px) {
  nav { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-hamburger { display: block; }
  section { padding: 64px 20px; }
  .page-hero { padding: 120px 20px 60px; }
  footer { padding: 28px 20px; flex-direction: column; align-items: flex-start; }
  .footer-disc { text-align: left; max-width: 100%; }
}

/* ── NAV SCROLL JS HOOK ──────────────────────────────── */
/* Applied via JS: document.querySelector('nav').classList.toggle('scrolled') */