/* =============================================================
 * G. LENDING — Bold Direction (Movement + Fairway energy)
 * Tokens: palette, type, spacing, motion
 *
 * RED + BLACK + WHITE primary, mustard gold accent, warm cream
 * secondary surface. Condensed bold display + clean humanist body.
 * Family-forward photography. Sharp corners. Big confident scale.
 * ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ── BRAND ─────────────────────────────────────────────── */
  --red:           #D72332;       /* SPARING accent — primary CTAs + small highlights only */
  --red-deep:      #A41B27;       /* hover, depth */
  --red-soft:      #FBE6E8;       /* faint wash backgrounds */
  /* "gold" repointed to neutral graphite so all legacy gold accents read monochrome */
  --gold:          #8C8C95;
  --gold-deep:     #6E6E76;
  --gold-soft:     #EDEDF0;

  /* ── CORE NEUTRALS ─────────────────────────────────────── */
  --black:         #0A0A0A;
  --ink:           #1A1A1C;       /* primary body text */
  --graphite:      #3A3A3F;
  --slate:         #6E6E76;
  --mist:          #BCBCC2;
  --paper:         #FFFFFF;
  --cream:         #F5F5F7;       /* cool light-grey secondary surface (was warm cream) */
  --cream-warm:    #ECECEF;
  --grey-50:       #FAFAF7;
  --grey-100:      #F2F1ED;
  --grey-200:      #E5E3DD;
  --grey-300:      #C8C6BE;
  --hairline:      rgba(10,10,10,0.10);
  --hairline-strong: rgba(10,10,10,0.20);

  /* ── SEMANTIC TEXT — DARK THEME (premium, lead-with-dark) ── */
  --fg-1:          #F4F4F6;       /* primary text on dark */
  --fg-2:          #C0C0C8;       /* secondary */
  --fg-3:          #8C8C96;       /* tertiary / captions */
  --fg-4:          #5E5E68;       /* faint */
  --fg-inverse:    var(--ink);    /* dark text on light chips/buttons */

  --bg-page:       #0C0C10;       /* near-black page */
  --bg-card:       #17171D;       /* raised card surface */
  --bg-elev:       #20202A;       /* higher elevation */
  --bg-warm:       #121218;       /* alt section (was cream) */
  --bg-deep:       #08080B;
  --bg-deepest:    #000000;
  --hairline-dark: rgba(255,255,255,0.09);
  --hairline-dark-strong: rgba(255,255,255,0.18);

  /* ── TYPE FAMILIES ─────────────────────────────────────── */
  --font-display:  "Antonio", "Oswald", "Archivo Black", system-ui, sans-serif;
  --font-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── TYPE SIZES — poster scale ─────────────────────────── */
  --t-poster:      clamp(80px, 12vw, 220px);   /* hero monoliths */
  --t-monumental:  clamp(64px, 8vw, 152px);
  --t-display:     clamp(48px, 5.5vw, 96px);
  --t-h1:          clamp(40px, 4.2vw, 72px);
  --t-h2:          clamp(32px, 3.2vw, 52px);
  --t-h3:          28px;
  --t-h4:          22px;
  --t-eyebrow:     11px;
  --t-body-lg:     18px;
  --t-body:        16px;
  --t-body-sm:     14px;
  --t-caption:     13px;
  --t-micro:       11px;

  /* ── SPACING ──────────────────────────────────────────── */
  --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;

  --section-y:       clamp(80px, 9vw, 140px);
  --section-y-tight: clamp(56px, 6vw, 88px);

  /* ── RADII — ROUNDED / PREMIUM ─────────────────────────── */
  --r-none:  0;
  --r-xs:    8px;
  --r-sm:    12px;
  --r-md:    16px;
  --r-lg:    22px;
  --r-xl:    30px;
  --r-2xl:   40px;
  --r-btn:   14px;
  --r-card:  24px;
  --r-pill:  999px;

  /* ── SHADOWS ──────────────────────────────────────────── */
  --shadow-1:      0 1px 3px rgba(16,16,20,0.04);
  --shadow-2:      0 8px 24px -8px rgba(16,16,20,0.10), 0 2px 6px rgba(16,16,20,0.04);
  --shadow-3:      0 24px 48px -16px rgba(16,16,20,0.13);
  --shadow-card-hover: 0 22px 44px -16px rgba(16,16,20,0.17);

  /* ── MOTION ───────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:      160ms;
  --dur-base:      280ms;
  --dur-slow:      520ms;

  /* ── LAYOUT ───────────────────────────────────────────── */
  --max-w:         1440px;
  --max-w-prose:   720px;
  --max-w-narrow:  960px;
  --gutter:        56px;
}

/* ── BASE ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
::selection { background: var(--red); color: var(--paper); }

/* ── SEMANTIC TYPE CLASSES ─────────────────────────────── */

.t-poster {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-poster);
  line-height: 0.86;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-monumental {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-monumental);
  line-height: 0.9;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: 0.96;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: -0.003em;
  color: var(--fg-1);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-h4);
  line-height: 1.3;
  color: var(--fg-1);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--red);
}

.t-body-lg { font-size: var(--t-body-lg); line-height: 1.6; color: var(--fg-2); }
.t-body { font-size: var(--t-body); line-height: 1.6; color: var(--fg-2); }
.t-caption { font-size: var(--t-caption); line-height: 1.5; color: var(--fg-3); }

.t-micro {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  font-feature-settings: "tnum";
  color: var(--fg-1);
}