/* ============================================================
   Your Lender Connections — stylesheet
   Palette: warm sand + soft sea + gold on near-black.
   Mobile-first; desktop rules live in the media queries at the
   bottom of each section.
   ============================================================ */

/* ---------- 1. Design tokens ------------------------------- */
:root {
  --gold:        #c6a15b;
  --gold-lt:     #e6cb82;
  --gold-dk:     #8f6f27;

  /* Metallic gold. A flat colour reads matte no matter which gold you
     pick; what makes leaf or foil look like metal is the banding — dark
     shadow, bright specular highlight, back to shadow. These stops mimic
     that, angled 135deg so the highlight falls across the shape. */
  --gold-metal: linear-gradient(135deg,
    #7d5f22  0%,
    #b8912f 11%,
    #e6cb82 25%,
    #fbf1c9 38%,   /* specular highlight */
    #dcbb63 50%,
    #b8912f 64%,
    #8a6a25 78%,
    #d9bd6d 92%,
    #a9862c 100%);

  /* Softer version for large fills, so buttons don't look striped */
  --gold-metal-soft: linear-gradient(160deg,
    #d8b968  0%,
    #f1e0a8 26%,
    #c9a227 58%,
    #a9862c 100%);

  /* Deep navy-black — reads as black beside NEXA's gold-on-black, but
     sits naturally with the navy in the Your Lender Connections logo. */
  --ink:         #131b2a;
  --ink-soft:    #26303f;
  --body:        #4d545c;
  --muted:       #7b838c;

  --sand:        #f7f3ec;
  --sand-deep:   #ece4d7;
  --sea:         #6f9a98;
  --sea-lt:      #dfeae9;
  --white:       #ffffff;
  --line:        #e3dccf;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  --wrap: 1240px;
  --radius: 4px;
  --shadow-sm: 0 1px 3px rgba(20, 23, 26, .07);
  --shadow-md: 0 6px 24px rgba(20, 23, 26, .10);
  --shadow-lg: 0 18px 50px rgba(20, 23, 26, .16);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Reset / base -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute must win over the display values set below
   (.btn is inline-flex, .calc-lines li is flex) — without this,
   hidden elements still render. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.18;
  margin: 0 0 .5em;
  letter-spacing: .01em;
}
h1 { font-size: clamp(2.2rem, 6vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h3 { font-size: 1.28rem; }
h4 { font-size: 1.05rem; font-family: var(--sans); font-weight: 600;
     letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }

p { margin: 0 0 1.1em; }
a { color: var(--gold-dk); }
ul { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .45em; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }

.eyebrow {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-dk);
  font-weight: 600;
  margin: 0 0 .9em;
}

.rule { width: 46px; height: 2px; background: var(--gold-metal); border: 0; margin: 0 0 1.2em; }
.rule.center { margin-inline: auto; }

.center { text-align: center; }
.muted  { color: var(--muted); }
.small  { font-size: .86rem; line-height: 1.6; }

/* Visually hidden but read by screen readers */
.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;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--white);
  padding: 10px 16px; border-radius: var(--radius);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 3px; }

/* ---------- 3. Buttons ------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55em;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 26px;
  min-height: 50px;              /* comfortable tap target on phones */
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-gold {
  background: var(--gold-metal-soft);
  color: #2a2103;                       /* deep bronze reads better than black on gold */
  border-color: #a9862c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5),
              inset 0 -1px 0 rgba(0,0,0,.12),
              var(--shadow-sm);
}
.btn-gold:hover { filter: brightness(1.06) saturate(1.05); }

.btn-dark  { background: var(--ink); color: var(--sand); border-color: var(--ink); }
.btn-dark:hover  { background: var(--ink-soft); border-color: var(--ink-soft); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--gold); background: rgba(198,161,91,.08); }

/* Navy type on white, edged in gold — the fourth beat of the
   gold / navy / gold / navy rhythm in the action bar. Reads as navy
   without putting two solid gold fills side by side. */
.btn-light { background: var(--white); color: var(--ink); border-color: var(--gold); }
.btn-light:hover { background: var(--sand); border-color: var(--gold-dk); }

.btn-ghost-lt { background: transparent; color: var(--sand);
                border-color: rgba(247,243,236,.4); }
.btn-ghost-lt:hover { border-color: var(--gold); color: var(--gold-lt); }

.btn-sm { padding: 11px 24px; min-height: 42px; font-size: .74rem; }
.btn-full { width: 100%; }

.btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* ---------- 4. Header / nav -------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,243,236,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 68px;
}

.brand { display: flex; align-items: baseline; gap: .45em; text-decoration: none;
         flex: 0 0 auto; }
.brand-mark {
  font-family: var(--serif); font-size: 1.45rem; color: var(--ink);
  font-weight: 500; letter-spacing: .01em; white-space: nowrap;
}
.brand-nmls { white-space: nowrap; }
.brand-mark em { font-style: italic; color: var(--gold-dk); }
.brand-nmls { font-size: .66rem; letter-spacing: .1em; color: var(--muted); }

/* Narrow phones: keep the wordmark on one line. The NMLS number is
   disclosed in the footer of every page, so dropping the header copy
   here costs nothing. */
@media (max-width: 599px) {
  .brand-mark { font-size: 1.12rem; }
  .brand-nmls { display: none; }
}

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle span {
  display: block; height: 1.5px; background: var(--ink);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.site-nav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--sand); border-bottom: 1px solid var(--line);
  padding: 8px 20px 22px;
  box-shadow: var(--shadow-md);
}
.site-nav.open { display: block; }
.site-nav ul { list-style: none; margin: 0 0 14px; padding: 0; }
/* Scoped to the link list on purpose: the "Start Your Application"
   button is also an <a> inside .site-nav, and a bare `.site-nav a`
   rule outranks .btn and strips its padding, border and colour. */
.site-nav ul a {
  display: block; padding: 12px 0;
  color: var(--ink-soft); text-decoration: none;
  font-size: .84rem; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.site-nav ul a[aria-current="page"] { color: var(--gold-dk); }

/* The horizontal nav needs roughly 1080px before brand + four links +
   button fit on one line. Below that the hamburger is genuinely better
   than a cramped, wrapping row. */
@media (min-width: 1080px) {
  .nav-toggle { display: none; }
  .site-nav {
    display: flex; align-items: center; gap: 28px;
    position: static; background: none; border: 0; padding: 0; box-shadow: none;
  }
  .site-nav ul { display: flex; gap: 28px; margin: 0; flex: 0 0 auto; }
  /* The header button must never shrink or wrap; full-width buttons
     elsewhere still need to wrap on narrow screens, so nowrap is scoped
     here rather than set on .btn globally. */
  .site-nav .btn { flex: 0 0 auto; white-space: nowrap; }
  .site-nav ul a { padding: 0; border: 0; font-size: .76rem; white-space: nowrap; }
  .site-nav ul a:hover { color: var(--gold-dk); }
}

/* ---------- 5. Hero (3-column: info | photo | bio) --------- */
.hero { padding: 34px 0 10px; }

.hero-grid { display: grid; gap: 30px; }

/* On phones the photograph leads — it's the emotional anchor of the page.
   The columns follow it. On desktop (below) source order takes over and
   they sit left / centre / right as designed. */
.hero-stage { order: -1; }

/* Centre stage — photograph above, gold wordmark plate below.
   The wordmark used to sit on the photo, but the furniture in this shot
   lives in the bottom of the frame and the scrim buried it. Splitting
   them keeps the room readable and the long company name crisp. */
.hero-stage {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--ink);
  display: flex; flex-direction: column;
}
.hero-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  /* Grows into whatever height the plate doesn't need, so the photograph
     — not the navy band — is what fills the stage. */
  flex: 1 1 auto;
  /* Fallback gradient if the photo hasn't been added yet */
  background: linear-gradient(170deg, #2e3f4c 0%, #4a6572 42%, #86a3a6 100%);
}
.hero-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* A slim band, only as tall as the two lines of type need. It sizes the
   wordmark from its OWN width (cqw), not the viewport, so the name spans
   the plate on one line whether the stage is a narrow centre column on
   desktop or the full screen on a phone. */
.hero-plate {
  flex: 0 0 auto;
  container-type: inline-size;
  display: flex; flex-direction: column; justify-content: center;
  padding: 11px 16px 13px;
  text-align: center;
}
.hero-script {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  /* Viewport-based fallback for browsers without container queries */
  font-size: clamp(1.05rem, 5.6vw, 2.5rem);
  line-height: 1.06;
  /* One line, always — the whole point of the band */
  white-space: nowrap;
  margin: 0;
  /* Metallic gold — see the --gold-metal token */
  color: var(--gold-lt);
  background: var(--gold-metal);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero-script { background: none; -webkit-text-fill-color: var(--gold-lt); }
}
/* Tuned by measurement: fills ~95% of the plate at every stage width,
   leaving a little headroom in case the serif falls back to a wider face. */
@supports (container-type: inline-size) {
  .hero-script { font-size: 8.4cqw; }
}
.hero-sub {
  margin: .5em 0 0; color: rgba(247,243,236,.78);
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap;
}

.hero-col h2 { font-size: 1.5rem; }
.hero-col .card { height: 100%; }

/* The hero columns set the height of the centre photograph, so they have
   to stay compact — otherwise the whole first screen is hero and the
   action buttons fall below the fold. Two-column list, tighter spacing. */
@media (min-width: 980px) {
  .hero-col .card { padding: 20px 22px; }
  .hero-col h2 { font-size: 1.38rem; margin-bottom: .4em; }
  .hero-col .rule { margin-bottom: .9em; }
  .hero-col p { margin-bottom: .85em; }
  .hero-col h4 { margin-bottom: .5em; }
  .hero-col .checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
    margin-bottom: .9em;
  }
  .hero-col .checklist li { margin-bottom: .3em; font-size: .93rem; }
}

/* Small portrait, sits at the bottom of the bio column */
.portrait {
  display: flex; align-items: center; gap: 16px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
}
.portrait img {
  width: 84px; height: 84px; flex: 0 0 84px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gold); background: var(--sand-deep);
}
.portrait-name { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); }
.portrait-meta { font-size: .78rem; color: var(--muted); line-height: 1.5; }

@media (min-width: 980px) {
  .hero { padding: 34px 0 16px; }
  .hero-grid {
    grid-template-columns: 1fr 1.55fr 1fr;
    gap: 34px;
    align-items: stretch;
  }
  .hero-stage { min-height: 520px; order: 0; }
  .hero-caption { padding: 44px 40px 40px; }
  .hero-col { display: flex; flex-direction: column; }
}

/* ---------- 6. Action bar (the four main buttons) ---------- */
.actions { padding: 26px 0 6px; }

/* auto-fit rather than fixed column counts: this grid is used both full
   width on the home page and nested inside a half-width column on the
   Contact page, so it has to respond to its container, not the viewport. */
.actions-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* ---------- 7. Cards & sections ---------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
}
.card-tinted { background: var(--sea-lt); border-color: #cfe0df; }

.section { padding: 56px 0; }
.section-dark { background: var(--ink); color: #b9c0c8; }
.section-dark h2, .section-dark h3 { color: var(--sand); }
.section-dark .eyebrow { color: var(--gold-lt); }
.section-sand { background: var(--sand-deep); }

.section-head { max-width: 620px; margin-bottom: 34px; }
.section-head.center { margin-inline: auto; }

.grid-3 { display: grid; gap: 18px; }
@media (min-width: 760px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-2 { display: grid; gap: 26px; }
@media (min-width: 860px)  { .grid-2 { grid-template-columns: 1fr 1fr; align-items: center; } }

.checklist { list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: 26px; }
.checklist li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
}

/* ---------- 8. Calculator ---------------------------------- */
.calc {
  display: grid; gap: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.calc-inputs { padding: 30px 24px; }
.calc-result {
  padding: 30px 24px;
  background: var(--ink);
  color: #aab2bb;
  display: flex; flex-direction: column; justify-content: center;
}

.field { margin-bottom: 22px; }
.field:last-of-type { margin-bottom: 8px; }
.field-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
.field label {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-soft);
}
.field-value {
  font-family: var(--serif); font-size: 1.3rem; color: var(--ink);
}
.field input[type="number"] {
  width: 118px; padding: 7px 10px; text-align: right;
  font-family: var(--serif); font-size: 1.15rem; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--sand);
}
.field input[type="number"]:focus { border-color: var(--gold); background: var(--white); }

/* Range slider — styled for both engines */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; background: none; cursor: pointer; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 3px; background: var(--sand-deep);
}
input[type="range"]::-moz-range-track {
  height: 3px; border-radius: 3px; background: var(--sand-deep);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -9.5px;
  border-radius: 50%; background: var(--gold);
  border: 3px solid var(--white); box-shadow: var(--shadow-sm);
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--white); box-shadow: var(--shadow-sm);
}

.calc-payment { font-family: var(--serif); font-size: clamp(2.6rem, 9vw, 3.6rem);
                color: var(--gold-lt); line-height: 1; margin: 4px 0 2px; }
.calc-payment-label { font-size: .72rem; letter-spacing: .2em;
                      text-transform: uppercase; color: #8b939c; }

.calc-lines { list-style: none; margin: 24px 0 0; padding: 22px 0 0;
              border-top: 1px solid rgba(247,243,236,.14); }
.calc-lines li { display: flex; justify-content: space-between; gap: 14px;
                 font-size: .9rem; margin-bottom: .6em; }
.calc-lines dt, .calc-lines .k { color: #8b939c; }
.calc-lines .v { color: var(--sand); font-variant-numeric: tabular-nums; }

.calc-extras { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }
.calc-extras summary {
  cursor: pointer; font-size: .76rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600; color: var(--gold-dk);
  list-style: none;
}
.calc-extras summary::-webkit-details-marker { display: none; }
.calc-extras summary::before { content: "+ "; }
.calc-extras[open] summary::before { content: "\2212 "; }
.calc-extras .field { margin-top: 20px; }

@media (min-width: 900px) {
  .calc { grid-template-columns: 1.25fr 1fr; }
  .calc-inputs { padding: 38px 36px; }
  .calc-result { padding: 38px 36px; }
}

/* ---------- 9. Music toggle -------------------------------- */
.music-btn {
  position: fixed; left: 16px; bottom: 16px; z-index: 90;
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--gold-lt);
  border: 1px solid rgba(198,161,91,.5);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: background .2s var(--ease), transform .15s var(--ease);
}
.music-btn:hover { background: var(--ink-soft); transform: translateY(-1px); }
.music-btn svg { width: 20px; height: 20px; }
.music-btn .bars { display: none; }
.music-btn[aria-pressed="true"] { background: var(--gold); color: var(--ink);
                                  border-color: var(--gold); }
.music-btn[aria-pressed="true"] .note { display: none; }
.music-btn[aria-pressed="true"] .bars { display: block; }
.music-btn .bars rect { animation: eq .9s ease-in-out infinite; transform-origin: bottom; }
.music-btn .bars rect:nth-child(2) { animation-delay: .18s; }
.music-btn .bars rect:nth-child(3) { animation-delay: .36s; }
@keyframes eq { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

@media (min-width: 900px) { .music-btn { left: 24px; bottom: 24px; } }

/* ---------- 10. Modal -------------------------------------- */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(20,23,26,.62);
  backdrop-filter: blur(3px);
}
.modal-box {
  background: var(--white); border-radius: var(--radius);
  max-width: 480px; width: 100%; padding: 32px 26px;
  box-shadow: var(--shadow-lg);
  max-height: 90vh; overflow-y: auto;
  position: relative;
}
.modal-close {
  position: absolute; right: 8px; top: 8px;
  width: 40px; height: 40px; border: 0; background: none;
  font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer;
}

/* ---------- 11. Footer ------------------------------------- */
.site-footer { background: var(--ink); color: #939ba4; padding: 48px 0 28px; }
.site-footer h4 { color: var(--sand); }
.site-footer a { color: var(--gold-lt); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.footer-grid { display: grid; gap: 30px; }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }

.footer-legal {
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid rgba(247,243,236,.12);
  font-size: .78rem; line-height: 1.7; color: #99a1ab;   /* 6.6:1 on --ink */
}

/* Equal Housing Lender mark */
.ehl { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ehl svg { width: 34px; height: 34px; flex: 0 0 34px; color: var(--sand); }
.ehl span { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
            line-height: 1.35; color: #939ba4; }

/* ---------- 12. Page banner (inner pages) ------------------ */
.banner {
  position: relative; min-height: 300px;
  display: flex; align-items: flex-end;
  background: linear-gradient(160deg, #22303a 0%, #3d5460 55%, #6f8b8f 100%);
  overflow: hidden;
}
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner::after { content: ""; position: absolute; inset: 0;
                 background: linear-gradient(to bottom, rgba(10,14,18,.15), rgba(10,14,18,.68)); }
.banner .wrap { position: relative; z-index: 2; padding-block: 40px; }
.banner h1 { color: var(--sand); margin-bottom: .2em; }
.banner p { color: rgba(247,243,236,.86); margin: 0; max-width: 46ch; }
@media (min-width: 900px) { .banner { min-height: 400px; } }

/* ---------- 13. Motion preferences ------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}