/* =========================================================================
   Investa marketing site — shared styles
   Builds on /design-system/colors_and_type.css
   ========================================================================= */

/* Reset & base ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-app);
  color: var(--fg-1);
  font-family: var(--font-serif);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; }
a { color: inherit; }

/* Layout primitives ------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--sp-9);
}
.container-wide {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--sp-9);
}
@media (max-width: 720px) {
  .container, .container-wide { padding: 0 var(--sp-7); }
}

.section {
  padding: var(--sp-14) 0;
}
.section-sm { padding: var(--sp-12) 0; }
.section-tight { padding: var(--sp-11) 0; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--gold-600);
}
.eyebrow-plain { display: inline-flex; align-items: center; gap: 8px; }
.eyebrow-plain::before { display: none; }

/* Display type ------------------------------------------------------------ */
.display-1 {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 400;
  color: var(--fg-1);
  margin: 0;
}
.display-2 {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 400;
  color: var(--fg-1);
  margin: 0;
}
.display-3 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  font-weight: 400;
  color: var(--fg-1);
  margin: 0;
}
.lede {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
  max-width: 60ch;
}

em.gold {
  color: var(--gold-700);
  font-style: italic;
}
em.forest {
  color: var(--forest-700);
  font-style: italic;
}

/* Buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-1);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand);
  color: var(--fg-on-brand);
  border-color: var(--brand);
}
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.btn-secondary {
  background: var(--bg-surface);
  color: var(--fg-1);
  border-color: var(--border-1);
  box-shadow: var(--shadow-1);
}
.btn-secondary:hover { background: var(--slate-50); border-color: var(--border-strong); }
.btn-ghost { color: var(--fg-2); }
.btn-ghost:hover { color: var(--fg-1); background: var(--slate-50); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-lg { padding: 14px 22px; font-size: 15px; }

.link {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-link);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--dur-fast) var(--ease-out);
}
.link:hover { color: var(--fg-link-hover); gap: 10px; }
.link-arrow::after {
  content: "→";
  font-family: var(--font-serif);
  font-size: 14px;
}

/* Topbar ------------------------------------------------------------------ */
.site-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(251, 249, 244, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border-2);
}
.site-topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  height: 64px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--sp-9);
}
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--forest-800);
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.brand-logo svg { width: 28px; height: 28px; }
.brand-wordmark {
  display: block;
  height: 26px;
  width: auto;
  object-fit: contain;
}
.brand-wordmark-light { height: 22px; }
.site-nav {
  display: flex;
  gap: var(--sp-7);
  flex: 1;
}
.site-nav a {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.site-nav a:hover { color: var(--fg-1); }
.site-nav a.active { color: var(--forest-800); border-bottom-color: var(--gold-600); }
.topbar-actions { display: flex; gap: 12px; align-items: center; }
@media (max-width: 920px) {
  .site-nav { display: none; }
}

/* Footer ------------------------------------------------------------------ */
.site-footer {
  background: var(--forest-900);
  color: var(--parchment-100);
  padding: var(--sp-13) 0 var(--sp-9);
  margin-top: var(--sp-14);
}
.site-footer h5 {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-300);
  margin: 0 0 var(--sp-7);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: var(--sp-10);
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid rgba(214, 229, 218, 0.12);
  margin-bottom: var(--sp-7);
}
@media (max-width: 920px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--parchment-100);
  text-decoration: none;
  opacity: 0.85;
}
.footer-col a:hover { opacity: 1; color: #fff; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 12px;
  color: rgba(245, 241, 232, 0.5);
}
.footer-bottom a { color: rgba(245, 241, 232, 0.65); text-decoration: none; }
.footer-brand-blurb {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(245, 241, 232, 0.7);
  margin: 16px 0 24px;
  max-width: 36ch;
}
.footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: 22px;
  color: #fff;
  letter-spacing: -0.02em;
}
.footer-mark svg path[stroke="#0F3D2E"], .footer-mark svg circle[stroke="#0F3D2E"] { stroke: var(--parchment-100); }
.footer-mark svg path[fill="#0F3D2E"] { fill: var(--parchment-100); }

/* Cards & surfaces -------------------------------------------------------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.card-pad { padding: var(--sp-9); }

/* Status badges (mirror DS) ---------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}
.badge-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: 0.65; }
.badge.pending  { background: var(--status-pending-bg);  color: var(--status-pending-fg); }
.badge.review   { background: var(--status-review-bg);   color: var(--status-review-fg); }
.badge.approved { background: var(--status-approved-bg); color: var(--status-approved-fg); }
.badge.rejected { background: var(--status-rejected-bg); color: var(--status-rejected-fg); }
.badge.posted   { background: var(--status-posted-bg);   color: var(--status-posted-fg); }
.badge.draft    { background: var(--status-draft-bg);    color: var(--status-draft-fg); }

/* Numeric ----------------------------------------------------------------- */
.num {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.num.pos { color: var(--pos); }
.num.neg { color: var(--neg); }

/* Hairline rule ----------------------------------------------------------- */
.hr-thin { border: 0; border-top: 1px solid var(--border-2); margin: 0; }

/* Meta strip (used under headings) --------------------------------------- */
.meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-7);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.meta-strip > span { display: inline-flex; align-items: center; gap: 6px; }
.meta-strip > span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--gold-600);
}
.meta-strip > span:first-child::before { display: none; }

/* Logo wall --------------------------------------------------------------- */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.logo-wall > div {
  background: var(--bg-app);
  padding: 28px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--slate-500);
  font-style: italic;
}
@media (max-width: 720px) {
  .logo-wall { grid-template-columns: repeat(3, 1fr); }
}

/* Two-column splits ------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-11);
  align-items: center;
}
.split-narrow { grid-template-columns: 5fr 7fr; }
.split-wide   { grid-template-columns: 7fr 5fr; }
@media (max-width: 920px) {
  .split, .split-narrow, .split-wide { grid-template-columns: 1fr; gap: var(--sp-9); }
}

/* Stat block -------------------------------------------------------------- */
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat .stat-num {
  font-family: var(--font-serif);
  font-size: 40px;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}
.stat .stat-label {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: 500;
}

/* Quote block ------------------------------------------------------------- */
.pull-quote {
  border-left: 2px solid var(--gold-600);
  padding-left: var(--sp-8);
}
.pull-quote blockquote {
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.012em;
  font-style: italic;
  color: var(--fg-1);
  margin: 0 0 var(--sp-7);
}
.pull-quote cite {
  font-family: var(--font-sans);
  font-size: 13px;
  font-style: normal;
  color: var(--fg-3);
  display: block;
}
.pull-quote cite strong { color: var(--fg-1); font-weight: 600; }

/* Utility ----------------------------------------------------------------- */
.muted { color: var(--fg-3); }
.text-center { text-align: center; }
.mb-3 { margin-bottom: var(--sp-7); }
.mb-4 { margin-bottom: var(--sp-9); }
.mb-5 { margin-bottom: var(--sp-11); }
.mt-3 { margin-top: var(--sp-7); }
.mt-4 { margin-top: var(--sp-9); }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* Tag chips --------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-2);
  font-weight: 500;
}

/* Section divider with label -------------------------------------------- */
.section-rule {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  margin-bottom: var(--sp-10);
}
.section-rule::before, .section-rule::after {
  content: "";
  height: 1px;
  background: var(--border-2);
  flex: 1;
}
.section-rule .label-caps {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 600;
}