@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/host-grotesk-latin.woff2') format('woff2')}
@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/host-grotesk-latin.woff2') format('woff2')}
@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/host-grotesk-latin.woff2') format('woff2')}
@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/host-grotesk-latin.woff2') format('woff2')}
@font-face{font-family:'Host Grotesk';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/host-grotesk-italic-latin.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/space-grotesk-latin.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/space-grotesk-latin.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/space-grotesk-latin.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-grotesk-latin.woff2') format('woff2')}
/* === CSS PRESERVATION MAP ===
   1. Global tokens, base elements, navigation, buttons, forms, and footer
   2. Marketing sections, case studies, architecture, team, and contact pages
   3. Lender dashboard shell, chart primitives, tab systems, and mobile cards

   Preservation rule: the current rendered site is the source of truth. Cleanup
   should consolidate winning declarations without changing computed styles. */
:root {
  --ink: #0A1628;
  --ink-2: #1A2942;
  --bone: #FFFFFF;
  --paper: #FFFFFF;
  --line: #E8E4DA;
  --line-2: #D4CFC0;
  --muted: #5A6472;
  --muted-soft: #6B7280;
  --muted-2: #7A8190;
  --accent: #FF5B2E;
  --accent-soft: #FFE8DF;
  --green: #2D7A4F;
  --green-soft: #DCEFE2;
  --amber: #B8862B;
  --amber-soft: #FBEFD5;
  --font-main: 'Host Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-secondary: 'Space Grotesk', 'Host Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --shadow: 0 34px 90px -44px rgba(10, 22, 40, .52), 0 14px 38px -32px rgba(10, 22, 40, .28);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  font-family: var(--font-main);
  color: var(--ink);
  background: var(--bone);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--ink); color: var(--bone); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--bone);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

/* === NAVIGATION === */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
nav.scrolled { border-bottom-color: var(--line); }
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.logo-img {
  display: block;
  height: 26px;
  width: auto;
}
.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
}
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: color 0.2s;
  position: relative;
}
.nav-links a:hover { color: var(--accent); }
.nav-links a:not(.nav-cta).active {
  color: var(--accent);
}
.nav-links a:not(.nav-cta).active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: currentColor;
}
.nav-cta {
  background: var(--ink);
  color: var(--bone) !important;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background 0.2s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.nav-cta:hover { background: var(--accent) !important; color: var(--bone) !important; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 0;
  z-index: 110;
}
.nav-toggle span {
  display: block;
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 105;
  background: var(--bone);
  padding: 100px 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  visibility: hidden;
}
.mobile-menu.open {
  transform: translateY(0);
  visibility: visible;
}
.mobile-menu a {
  font-family: var(--font-main);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  text-decoration: none;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:hover { color: var(--accent); }
.mobile-menu a.active { color: var(--accent); }
.mobile-menu .mobile-cta {
  margin-top: 24px;
  background: var(--ink);
  color: var(--bone);
  border-radius: 100px;
  padding: 18px 28px;
  text-align: center;
  border: none;
  font-size: 16px;
}
.mobile-menu .mobile-cta:hover { background: var(--accent); color: var(--bone); }
body.menu-open { overflow: hidden; }

/* === DOT FIELD BACKGROUND === */

/* === HERO === */
.hero {
  padding: 180px 0 96px;
  max-width: none;
  margin: 0;
  position: relative;
}
.hero h1 {
  font-family: var(--font-main);
  font-size: clamp(40px, 7vw, 92px);
  line-height: 0.98;
  letter-spacing: 0;
  font-weight: 500;
  max-width: 1100px;
  margin-bottom: 40px;
}
.hero h1 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}
.arrow {
  width: 14px; height: 14px;
  transition: transform 0.2s;
}

/* === HERO DASHBOARD PREVIEW === */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.panel {
  padding: 16px;
  background: var(--paper);
  border-radius: 10px;
  overflow: hidden;
}

/* === SECTION SHARED === */
section {
  padding: 96px 48px;
  max-width: 1400px;
  margin: 0 auto;
}
.section-label {
  font-family: var(--font-secondary);
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--ink);
}
.section-h {
  font-family: var(--font-main);
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.02;
  letter-spacing: 0;
  font-weight: 500;
  max-width: 900px;
  margin-bottom: 24px;
}
.section-h em { font-style: italic; color: var(--accent); font-weight: 500; }
.section-sub {
  font-size: 18px;
  color: var(--ink-2);
  max-width: 640px;
  line-height: 1.5;
}

/* === MARQUEE / SOCIAL PROOF === */

/* === WHO WE WORK WITH === */

/* === SERVICES === */

/* === SHOWCASE / DASHBOARD GALLERY === */

/* === CASE STUDIES === */

/* === ASSET CLASSES === */

/* === ARCHITECTURE DIAGRAM === */

/* icon inside node */
@keyframes flowdash{to{stroke-dashoffset:-20}}
@keyframes rfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* === TEAM === */

/* === CTA === */

/* === CONTACT FORM === */
.contact-section {
  background: var(--paper);
  padding: 96px 48px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  max-width: none;
  width: 100%;
}
.contact-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.contact-intro .section-h { font-size: clamp(32px, 4vw, 48px); }
.contact-meta {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-secondary);
  font-size: 12px;
  color: var(--muted);
  line-height: 2;
  letter-spacing: 0.02em;
}
.contact-meta a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.contact-meta a:hover { color: var(--accent); border-color: var(--accent); }

.contact-form {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 36px;
  display: grid;
  gap: 20px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.field label {
  font-family: var(--font-secondary);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.field input,
.field select,
.field textarea {
  font-family: var(--font-main);
  font-size: 15px;
  color: var(--ink);
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10, 22, 40, 0.08);
}
.field textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--font-main);
}
.field-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-submit {
  background: var(--ink);
  color: var(--bone);
  padding: 16px 28px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.2s, transform 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  min-height: 48px;
  width: 100%;
}
.form-submit:hover { background: var(--accent); }
.form-note {
  font-family: var(--font-secondary);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* === FOOTER === */
footer {
  background: var(--ink);
  color: var(--bone);
  padding: 60px 48px 32px;
  border-top: 1px solid rgba(255,255,255, 0.08);
}
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 64px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255, 0.08);
}
.footer-brand {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}
.footer-logo-img {
  display: block;
  height: 24px;
  width: auto;
  filter: brightness(0) invert(1);
}
.footer-addr {
  font-size: 13px;
  color: rgba(255,255,255, 0.7);
  line-height: 1.6;
}
.footer-addr a { color: inherit; text-decoration: none; }
.footer-addr a:hover { color: var(--accent); }
.footer-col h2 {
  font-family: var(--font-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255, 0.6);
  margin-bottom: 16px;
  font-weight: 400;
}
.footer-col a {
  display: block;
  color: rgba(255,255,255, 0.9);
  text-decoration: none;
  font-size: 14px;
  line-height: 2;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  max-width: 1400px;
  margin: 32px auto 0;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255, 0.5);
  font-family: var(--font-secondary);
  gap: 16px;
  flex-wrap: wrap;
}

/* === SIMPLE PAGE (success, privacy) === */
.simple-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 200px 48px 120px;
}
.simple-page h1 {
  font-family: var(--font-main);
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.02;
  letter-spacing: 0;
  font-weight: 500;
  margin-bottom: 24px;
}
.simple-page h1 em { font-style: italic; color: var(--accent); font-weight: 500; }
.simple-page h2 {
  font-family: var(--font-main);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 32px;
  margin-bottom: 12px;
}
.simple-page p {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 16px;
}
.simple-page ul {
  margin: 12px 0 16px 20px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.7;
}
.simple-page .back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  font-family: var(--font-secondary);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}
.simple-page .back-link:hover { color: var(--accent); border-color: var(--accent); }

/* === RESPONSIVE === */
@media (max-width: 1100px) {
  .contact-inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 968px) {
  html { scroll-padding-top: 76px; }
  nav { padding: 14px 20px; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  section, .contact-section { padding: 72px 24px; }
  .hero { padding: 130px 0 72px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .contact-form { padding: 24px; }
  .field-row { grid-template-columns: 1fr; }
  .simple-page { padding: 140px 24px 80px; }
}

@media (max-width: 560px) {
  nav { padding: 12px 16px; }
  section, .contact-section { padding: 56px 20px; }
  .hero { padding: 110px 0 54px; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
  footer { padding: 48px 20px 24px; }
  .footer-bottom { padding: 0 20px; }
}



/* === CONTACT PAGE === */
.contact-page-main .contact-section {
  padding-top: 160px;
}

@media (max-width: 680px) {
  .contact-page-main .contact-section {
    padding-top: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === DASHBOARD PRESERVATION BOUNDARY ===
   Dashboard CSS below is the highest-risk area. Shared primitives come first;
   later tab-specific final systems intentionally own their exceptions. */
/* === LENDER-GRADE DASHBOARD SHOWCASE === */

@keyframes ldFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === LENDER DASHBOARD VISUAL REFINEMENT V2 === */


/* === LENDER DASHBOARD CONTENT DEPTH PASS === */


/* === LENDER DASHBOARD UI REDESIGN V3 === */

/* Lender-grade tables */

/* Portfolio tie-out */

/* Covenant tab */

/* Borrowing base redesign */

/* Legacy cohort card styles */

/* === LENDER DASHBOARD TARGETED FIXES: source detail footer, bridge clarity, cash alignment, risk trend === */
/* Cash Reconciliation bridge: align dots to the same baseline and make the reconciliation flow explicit. */

/* Final lender tie-out refinements: distinguish eligible collateral in the bridge, support the six-step cash tie-out, and style static-pool notes. */
/* === DASHBOARD HEIGHT / VIEWPORT FIT PASS ===
   Keeps the full dashboard frame visible on normal laptop screens while preserving
   all lender-detail content inside the active tab pane. */

/* === DASHBOARD READABILITY PASS ===
   Removed redundant source-file rows and returned the dashboard type scale to a more comfortable size
   while keeping the viewport-fit dashboard behavior. */

/* === DASHBOARD READABILITY REFINEMENT PASS ===
   Lifted remaining microcopy/subtext sizes so the dashboard stays legible after the height-fit pass.
   The dashboard frame still fits the viewport; dense tab contents scroll internally when needed. */

/* === DASHBOARD CARD BALANCE PASS ===
   Final pass focused on card sizing, column balance, and visual spacing across all five dashboard views. */
@media (min-width: 1024px) {
  /* Borrowing Base: waterfall gets the visual weight, while right-side cards are sized as a clean column. */

}


/* === DASHBOARD LINE CHART CONSISTENCY PASS ===
   Removes the leftover package-detail strip and standardizes line-chart weight across dashboard tabs. */

/* Collateral support trend interactivity upgrade */

/* === SHARED DASHBOARD TOOLTIP NORMALIZATION ===
   Keeps dynamically rendered Covenant trend tooltips on the same shared tooltip system as the other charts. */

/* === DASHBOARD CHART AXIS SYSTEM ===
   Keep shared SVG chart axes consistent across static and generated dashboard charts. */

/* === DASHBOARD SHARED RESPONSIVE FINAL SYSTEM ===
   Source of truth for shared dashboard shell, readability, and responsive sizing.
   Tab final systems remain later in the cascade and own tab-specific exceptions. */

/* === DASHBOARD SHARED DETAIL FINAL SYSTEM ===
   Source of truth for shared dashboard detail/readout/table microcopy values.
   Tab final systems remain later in the cascade and own tab-specific exceptions. */

/* === PORTFOLIO DASHBOARD FINAL SYSTEM ===
   Source of truth for Credit Tie Out layout, readout, and cash reconciliation values. */

/* === ORIGINATION DASHBOARD FINAL SYSTEM ===
   Source of truth for Origination layout, scatter map, and risk-card values. */

/* === VINTAGE DASHBOARD FINAL SYSTEM ===
   Source of truth for Vintage layout, loss-curve chart, and watch-card values. */

/* === BORROWING BASE DASHBOARD FINAL SYSTEM ===
   Source of truth for Borrowing Base bridge, layout, and availability chart values. */


/* === COVENANT DASHBOARD FINAL SYSTEM ===
   Source of truth for Covenant chart/layout values after stabilization. */

/* === MOBILE DASHBOARD FINAL SYSTEM ===
   Source of truth for dashboard mobile selector, disclosure shell, and cardified tables. */
/* === HERO DASHBOARD PLACEMENT === */