/* ───────────────────────────────────────────────────────────
   GLOBAL CSS (TYPOGRAPHY, LAYOUT, BUTTONS, UTILS)
   ─────────────────────────────────────────────────────────── */

body {
  font-family: var(--font-primary);
  color: var(--color-ink);
  line-height: 1.6;
  background: var(--color-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ───────────────────────────────────────────────────────────
   TYPOGRAPHY
   ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-extrabold);
  line-height: 1.1;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  margin-top: 0;
}

/* Global Text Contrast Utilities */
.text-on-dark {
  color: var(--color-white);
}

.text-on-dark h1,
.text-on-dark h2,
.text-on-dark h3,
.text-on-dark h4,
.text-on-dark h5,
.text-on-dark h6 {
  color: var(--color-white) !important;
}

.text-on-light {
  color: var(--color-ink);
}

.text-on-light h1,
.text-on-light h2,
.text-on-light h3,
.text-on-light h4,
.text-on-light h5,
.text-on-light h6 {
  color: var(--color-ink) !important;
}

.text-display { font-size: var(--display-xl); text-transform: uppercase; line-height: 0.95; letter-spacing: -0.01em; }
.text-h1 { font-size: var(--display-lg); text-transform: uppercase; }
.text-h2 { font-size: var(--display-md); }
.text-h3 { font-size: var(--heading-lg); font-weight: var(--font-bold); letter-spacing: -0.01em; }
.text-h4 { font-size: var(--heading-md); font-weight: var(--font-bold); }
.text-body { font-size: var(--body-md); line-height: 1.6; }
.text-small { font-size: var(--body-sm); }
.text-meta { font-size: var(--caption); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.1em; }

/* ── HERO TYPOGRAPHY STANDARDIZATION ── */
.hero__headline,
.about-hero__headline,
.companies-hero__headline,
.cre-hero__headline,
.insights-hero__headline,
.contact-hero__headline,
.bdf-hero__headline,
.bdre-hero__headline,
.clc-hero__headline,
.reo-hero__headline,
.investing-hero__headline,
.lending-hero__headline {
  font-family: var(--font-display);
  font-weight: var(--font-black);
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-size: clamp(3rem, 6vw, 6rem);
}

.hero__subtext,
.about-hero__lead,
.companies-hero__desc,
.bor-hero__desc,
.pc-hero__desc,
.cre-hero__subtext,
.insights-hero__desc,
.contact-hero__desc,
.bdf-hero__desc,
.bdre-hero__desc,
.clc-hero__desc,
.reo-hero__desc,
.investing-hero__desc,
.lending-hero__subtext {
  font-family: var(--font-primary);
  font-size: var(--body-lg);
  line-height: 1.6;
  max-width: 650px;
}

.eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: var(--caption);
  font-weight: var(--font-bold);
  color: var(--color-electric-blue);
  margin-bottom: var(--space-6);
}
.eyebrow--light, .text-on-dark .eyebrow { 
  color: rgba(255,255,255,0.7); 
}

/* ───────────────────────────────────────────────────────────
   LAYOUT / GRID SYSTEM
   ─────────────────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  width: 100%;
}
.container--wide { 
  max-width: var(--container-wide); 
}
.section { 
  padding: var(--section-padding) 0; 
}
.section--lg { 
  padding: var(--section-padding-lg) 0; 
}
.section--dark { 
  background: var(--color-navy); 
  color: var(--color-white); 
}
.section--light { 
  background: var(--color-paper); 
}

/* ───────────────────────────────────────────────────────────
   BUTTONS
   ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 2.25rem;
  min-height: 52px;
  font-family: var(--font-primary);
  font-size: var(--body-sm);
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.btn--primary {
  background: var(--color-electric-blue);
  color: var(--color-white);
  border-color: var(--color-electric-blue);
}

.btn--primary:hover {
  background: #3A58EF;
  border-color: #3A58EF;
  transform: translateY(-2px);
  color: var(--color-white);
}

.btn--outline {
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-border-light);
}

.btn--outline:hover {
  border-color: var(--color-white);
  background: rgba(255,255,255,0.05);
  transform: translateY(-2px);
  color: var(--color-white);
}

.btn--text {
  background: transparent;
  color: var(--color-white);
  padding: 1rem 0;
  border: none;
  min-height: auto;
}

.btn--text::after {
  content: '';
  position: absolute;
  bottom: 0.5rem;
  left: 0;
  width: 0%;
  height: 1px;
  background: var(--color-white);
  transition: width var(--transition-medium);
}

.btn--text:hover::after {
  width: 100%;
}

.text-on-light .btn--outline {
  color: var(--color-ink);
  border-color: var(--color-border);
}

.text-on-light .btn--outline:hover {
  border-color: var(--color-ink);
  background: rgba(0,0,0,0.02);
  color: var(--color-ink);
}

.text-on-light .btn--text {
  color: var(--color-ink);
}
.text-on-light .btn--text::after {
  background: var(--color-ink);
}

/* ── PAIRED BUTTONS EQUAL WIDTH STANDARDIZATION ── */
.hero__cta-group,
.connect__actions,
.final-cta__buttons,
.about-cta__actions,
.bor-cta__actions,
.companies-cta__actions,
.pc-cta__actions,
.bdf-cta__actions,
.bdre-cta__actions,
.nbor-hero__actions,
.nbor-cta__actions,
.pp-hero__actions,
.cta-button-group,
.insights-hero__cta-group,
.cre-cta__links,
.btn-group {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: stretch;
}

.hero__cta-group > .btn,
.connect__actions > .btn,
.final-cta__buttons > .btn,
.about-cta__actions > .btn,
.bor-cta__actions > .btn,
.companies-cta__actions > .btn,
.pc-cta__actions > .btn,
.bdf-cta__actions > .btn,
.bdre-cta__actions > .btn,
.nbor-hero__actions > .btn,
.nbor-cta__actions > .btn,
.pp-hero__actions > .btn,
.cta-button-group > .btn,
.insights-hero__cta-group > .btn,
.cre-cta__links > .btn,
.btn-group > .btn {
  flex: 1 1 240px;
  max-width: 320px;
  text-align: center;
  min-height: 52px;
}

@media (max-width: 768px) {
  .hero__cta-group > .btn,
  .connect__actions > .btn,
  .final-cta__buttons > .btn,
  .about-cta__actions > .btn,
  .bor-cta__actions > .btn,
  .companies-cta__actions > .btn,
  .pc-cta__actions > .btn,
  .bdf-cta__actions > .btn,
  .bdre-cta__actions > .btn,
  .nbor-hero__actions > .btn,
  .nbor-cta__actions > .btn,
  .pp-hero__actions > .btn,
  .cta-button-group > .btn,
  .insights-hero__cta-group > .btn,
  .cre-cta__links > .btn,
  .btn-group > .btn {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* ───────────────────────────────────────────────────────────
   ACCESSIBILITY
   ─────────────────────────────────────────────────────────── */
.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;
}

*:focus-visible {
  outline: 2px solid var(--color-electric-blue);
  outline-offset: 2px;
}

::selection {
  background: var(--color-electric-blue);
  color: var(--color-white);
}

/* -- COMPANY TAGLINE -- */
.company-tagline {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-enterprise-blue);
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
  margin-bottom: 1rem;
  line-height: 1.4;
  opacity: 0.9;
}

.company-tagline--light {
  color: var(--color-white);
}

/* -- COMPANY LOGOS -- */
.company-logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0.5rem;
  transform: translateZ(0);
}
.company-logo-wrapper--large { width: 180px; height: 90px; }
.company-logo-wrapper--medium { width: 140px; height: 80px; }
.company-logo-wrapper--small { width: 110px; height: 65px; }
.company-logo-wrapper--center { justify-content: center; margin: 0 auto 0.5rem auto; }

.company-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  display: block;
}
.company-logo:hover {
  transform: scale(1.025);
  transition: transform 0.3s ease;
}