/* Locked RJ Financial brand system: deep navy, antique gold, warm ivory, quiet sage. */
:root {
  --ink: #132B3C;
  --navy: #132B3C;
  --cream: #F5F2EA;
  --paper: #FBFAF6;
  --gold: #C9943E;
  --gold-light: #E2B75A;
  --sage: #C4D0BB;
  --mist: #E9EDE6;
  --muted: #6B767C;
  --orange: var(--gold);
  --line: rgba(19, 43, 60, .16);
}

.brand-mark {
  background: transparent;
  width: 48px;
  height: 58px;
  border-radius: 0;
  overflow: visible;
  flex: none;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-light .brand-mark { background: transparent; }

/* Header cards now sit below the image so the quote never obscures the hero. */
.hero-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-content: start;
  min-height: 0;
}

.hero-image-frame { grid-column: 1 / -1; }

.floating-card {
  position: relative;
  inset: auto;
  width: auto;
  box-shadow: none;
  border: 1px solid var(--line);
}

.rate-card,
.quote-card {
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  padding: 18px;
}

@media (max-width: 700px) {
  .brand-mark { width: 42px; height: 52px; }
  .hero-visual { grid-template-columns: 1fr; }
  .hero-image-frame { grid-column: auto; }
  .floating-card { transform: none; }
}

.loan-library { padding-top: 115px; padding-bottom: 125px; background: var(--mist); }
.library-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; margin-top: 28px; align-items: start; }
.loan-library h2 { font-size: clamp(40px, 5vw, 66px); }
.loan-library p { max-width: 390px; color: var(--muted); font-size: 14px; }
.library-links { border-top: 1px solid var(--line); margin-top: 35px; }
.library-links a { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); padding: 14px 0; font-size: 12px; font-weight: 700; }
.library-links span { color: var(--gold); font-size: 9px; letter-spacing: .12em; }
.library-links b { color: var(--gold); font-size: 16px; }
.newsletter-card { background: var(--navy); color: #fff; padding: 32px; }
.newsletter-card h3 { font-size: 38px; line-height: .95; letter-spacing: -.06em; margin: 25px 0 15px; }
.newsletter-card p { color: #b7c6bf; }
.newsletter-card form { display: flex; gap: 8px; margin: 27px 0 20px; }
.newsletter-card input { min-width: 0; flex: 1; border: 0; border-bottom: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; padding: 11px 0; outline: 0; }
.newsletter-card input::placeholder { color: #9aa9a3; }
.newsletter-card .button { white-space: nowrap; padding: 12px 16px; }
.newsletter-links { border-top: 1px solid rgba(255,255,255,.2); }
.newsletter-links a { display: flex; justify-content: space-between; gap: 15px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.2); color: #dce6de; font-size: 11px; }
.newsletter-links b { color: var(--gold-light); font-weight: 500; }

@media (max-width: 700px) {
  .library-grid { grid-template-columns: 1fr; gap: 45px; }
  .newsletter-card form { flex-direction: column; }
  .newsletter-card .button { align-self: flex-start; }
}