/* =========================================================
   LendingGates — Design tokens
   Concept: the "gate" as a threshold you pass through to
   reach funds. Wrought-iron/brass hardware + dusk-navy sky.
   ========================================================= */
:root{
  --ink:        #141F30;   /* primary dusk navy (bg) */
  --ink-2:      #1D2E48;   /* panel navy */
  --ink-3:      #28405F;   /* border/hairline on navy */
  --paper:      #F1EDE3;   /* bone paper (light bg) */
  --paper-2:    #E7E1D2;   /* deeper paper panel */
  --line:       #D8D0BC;   /* hairline on paper */
  --ink-text:   #1B2A3F;   /* body text on paper */
  --muted:      #5B6B7E;   /* secondary text on paper */
  --muted-on-ink: #A9B7C9; /* secondary text on navy */
  --brass:      #B4823C;   /* gate hardware accent */
  --brass-lt:   #D5A75E;   /* brass hover/light */
  --brass-dk:   #8C6529;   /* brass pressed */
  --sage:       #4F6F5A;   /* success / trust green, used sparingly */
  --rust:       #A2432C;   /* error, used sparingly */

  --serif: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --radius: 3px;
  --radius-lg: 6px;
  --shadow-soft: 0 12px 32px -16px rgba(20,31,48,.35);
  --shadow-lift: 0 20px 48px -20px rgba(20,31,48,.45);
  --maxw: 1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-.01em;
  color:var(--ink);
}
h1{font-size:clamp(2.1rem,4.4vw,3.6rem); font-weight:560;}
h2{font-size:clamp(1.6rem,3vw,2.35rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.section{padding:88px 0;}
.section--tight{padding:56px 0;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass-dk);
  margin-bottom:14px;
}
.eyebrow::before{
  content:""; width:16px; height:1px; background:var(--brass);
}
.lede{font-size:1.13rem; color:var(--muted); max-width:56ch;}

/* Visible keyboard focus everywhere */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
  border-radius:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

/* =========================================================
   Signature motif: the Gate — two slatted bars that frame
   content and swing open. Reused as section dividers,
   loading state, and hero graphic.
   ========================================================= */
.gate{
  --bar-w: 6px;
  display:flex; justify-content:space-between; align-items:stretch;
  width:100%; height:100%; position:absolute; inset:0;
  pointer-events:none; overflow:hidden;
}
.gate__leaf{
  width:46%; height:100%;
  background:repeating-linear-gradient(
    90deg, var(--ink-3) 0, var(--ink-3) var(--bar-w),
    transparent var(--bar-w), transparent calc(var(--bar-w) * 4)
  );
  opacity:.5;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1), opacity 1.1s ease;
}
.gate__leaf--l{transform-origin:left center;}
.gate__leaf--r{transform-origin:right center;}
.gate.is-open .gate__leaf--l{transform:translateX(-14%) rotateY(18deg); opacity:.22;}
.gate.is-open .gate__leaf--r{transform:translateX(14%) rotateY(-18deg); opacity:.22;}

.divider{
  height:34px; margin:0 auto; width:100%;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.divider span{width:1px; height:100%; background:var(--line);}
.divider span:nth-child(2){height:60%; background:var(--brass);}

/* =========================================================
   Header / Nav
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(20,31,48,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--serif); font-weight:600; font-size:1.28rem;
  color:#fff; text-decoration:none; letter-spacing:-.01em;
}
.brand__mark{
  width:26px; height:26px; position:relative; flex:none;
}
.brand__mark svg{width:100%; height:100%;}
.nav__links{
  display:flex; align-items:center; gap:28px; list-style:none;
  margin:0; padding:0;
}
.nav__links a{
  color:var(--muted-on-ink); text-decoration:none; font-size:.92rem;
  font-weight:500; transition:color .2s ease; position:relative;
}
.nav__links a:hover{color:#fff;}
.nav__links a.is-active{color:#fff;}
.nav__cta{
  display:inline-flex; align-items:center; gap:8px;
}
.nav__phone{
  color:var(--muted-on-ink); font-size:.85rem; text-decoration:none; font-family:var(--mono);
  display:none;
}
.nav__toggle{
  display:none; background:none; border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius); padding:8px 10px; color:#fff; cursor:pointer;
}
@media (max-width: 880px){
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--ink); border-bottom:1px solid rgba(255,255,255,.08);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav__links.is-open{max-height:420px;}
  .nav__links li{width:100%;}
  .nav__links a{display:block; padding:14px 24px; width:100%; border-top:1px solid rgba(255,255,255,.06);}
  .nav__toggle{display:inline-flex;}
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-weight:600; font-size:.94rem;
  padding:13px 24px; border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  line-height:1;
}
.btn:active{transform:translateY(1px);}
.btn--brass{
  background:var(--brass); color:#1A1204; border-color:var(--brass);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset;
}
.btn--brass:hover{background:var(--brass-lt); border-color:var(--brass-lt);}
.btn--ghost-ink{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.35);
}
.btn--ghost-ink:hover{border-color:#fff;}
.btn--outline{
  background:transparent; color:var(--ink); border-color:var(--ink-3);
}
.btn--outline:hover{border-color:var(--brass); color:var(--brass-dk);}
.btn--block{width:100%;}
.btn--lg{padding:16px 28px; font-size:1.02rem;}
.btn[disabled]{opacity:.6; cursor:not-allowed;}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative; background:var(--ink); color:#fff; overflow:hidden;
  padding:96px 0 120px;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 60% at 82% 10%, rgba(180,130,60,.16), transparent 70%),
             radial-gradient(50% 50% at 10% 90%, rgba(79,111,90,.14), transparent 70%);
  pointer-events:none;
}
.hero__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
@media (max-width:940px){ .hero__grid{grid-template-columns:1fr;} }
.hero__eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass-lt); display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.hero h1{color:#fff; margin-bottom:20px;}
.hero .lede{color:var(--muted-on-ink); font-size:1.15rem; margin-bottom:32px;}
.hero__trust{
  display:flex; flex-wrap:wrap; gap:22px; margin-top:36px;
}
.hero__trust div{
  font-family:var(--mono); font-size:.78rem; color:var(--muted-on-ink);
  border-left:1px solid rgba(255,255,255,.18); padding-left:12px;
}
.hero__trust strong{display:block; color:#fff; font-family:var(--serif); font-size:1.3rem; font-weight:600;}

/* =========================================================
   Lead form (the one-step CTA, reused everywhere)
   ========================================================= */
.lead-card{
  position:relative; background:var(--ink-2);
  border:1px solid var(--ink-3); border-radius:var(--radius-lg);
  padding:30px 28px 26px; box-shadow:var(--shadow-lift);
  overflow:hidden;
}
.lead-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--brass),var(--brass-lt),var(--brass));
}
.lead-card__amount{
  font-family:var(--mono); color:var(--brass-lt); font-size:.78rem;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px;
}
.lead-card h3{color:#fff; margin-bottom:4px; font-size:1.35rem;}
.lead-card p.sub{color:var(--muted-on-ink); font-size:.88rem; margin-bottom:20px;}
.lead-form{display:flex; flex-direction:column; gap:12px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{
  font-size:.76rem; color:var(--muted-on-ink); font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
}
.field input[type="email"]{
  width:100%; padding:13px 14px; border-radius:var(--radius);
  border:1px solid var(--ink-3); background:#0F1826; color:#fff;
  font-size:1rem; font-family:var(--sans);
}
.field input[type="email"]::placeholder{color:#5c6c81;}
.field input[type="email"]:focus{border-color:var(--brass);}
.field-error{color:#E7A08F; font-size:.8rem; min-height:1.1em;}
.consent-line{font-size:.72rem; color:#8194A9; line-height:1.5;}
.consent-line a{color:var(--brass-lt); text-decoration:underline;}
.lead-form__status{font-size:.85rem; min-height:1.2em; color:var(--muted-on-ink);}
.lead-form__status.is-error{color:#E7A08F;}
.lead-form__status.is-ok{color:#9DC3AC;}

/* Inline (in-page, on paper background) variant of the same form */
.lead-card--inline{
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-soft);
}
.lead-card--inline h3{color:var(--ink);}
.lead-card--inline p.sub{color:var(--muted);}
.lead-card--inline .field label{color:var(--muted);}
.lead-card--inline .field input[type="email"]{
  background:var(--paper); border:1px solid var(--line); color:var(--ink-text);
}
.lead-card--inline .field input[type="email"]::placeholder{color:#9AA3AC;}
.lead-card--inline .consent-line{color:var(--muted);}
.lead-card--inline .lead-form__status{color:var(--muted);}
.lead-card--inline .lead-card__amount{color:var(--brass-dk);}

/* =========================================================
   Sticky mobile CTA bar (same one-step ask, condensed)
   ========================================================= */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--ink); border-top:1px solid var(--ink-3);
  padding:10px 16px; display:none;
  box-shadow:0 -8px 24px rgba(0,0,0,.25);
}
.mobile-cta a{
  display:flex; align-items:center; justify-content:center;
  background:var(--brass); color:#1A1204; font-weight:700;
  padding:13px; border-radius:var(--radius); text-decoration:none;
}
@media (max-width:640px){ .mobile-cta{display:block;} body{padding-bottom:66px;} }

/* =========================================================
   Cards / grids
   ========================================================= */
.grid{display:grid; gap:24px;}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
.grid--2{grid-template-columns:repeat(2,1fr);}
@media (max-width:880px){ .grid--3,.grid--4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .grid--3,.grid--4,.grid--2{grid-template-columns:1fr;} }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px 24px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-soft); border-color:var(--brass);}
.card__num{
  font-family:var(--mono); color:var(--brass-dk); font-size:.78rem; margin-bottom:10px;
  letter-spacing:.06em;
}
.card h3{margin-bottom:8px;}
.card p{color:var(--muted); font-size:.94rem; margin-bottom:0;}

.step{
  display:flex; gap:18px; align-items:flex-start; padding:22px 0;
  border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line);}
.step__num{
  font-family:var(--serif); font-size:1.6rem; color:var(--brass); flex:none; width:52px;
}
.step h3{margin-bottom:6px;}
.step p{color:var(--muted); margin-bottom:0;}

/* Loan type cards */
.loan-type{
  background:var(--ink-2); color:#fff; border-radius:var(--radius-lg);
  padding:26px 24px; border:1px solid var(--ink-3);
  transition:transform .18s ease, border-color .18s ease;
}
.loan-type:hover{transform:translateY(-3px); border-color:var(--brass);}
.loan-type .amt{font-family:var(--mono); color:var(--brass-lt); font-size:.82rem; margin-bottom:10px;}
.loan-type h3{color:#fff;}
.loan-type p{color:var(--muted-on-ink); font-size:.92rem; margin-bottom:14px;}
.loan-type a{color:var(--brass-lt); font-size:.88rem; font-weight:600; text-decoration:none;}
.loan-type a:hover{text-decoration:underline;}

/* Table (rates & fees) */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg);}
table{width:100%; border-collapse:collapse; background:#fff; min-width:560px;}
th,td{text-align:left; padding:14px 16px; font-size:.92rem; border-bottom:1px solid var(--line);}
th{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); background:var(--paper-2);}
tr:last-child td{border-bottom:none;}

/* Panel on paper bg (dark inset panel used for callouts) */
.panel-ink{
  background:var(--ink); color:#fff; border-radius:var(--radius-lg);
  padding:40px; position:relative; overflow:hidden;
}
.panel-ink h2, .panel-ink h3{color:#fff;}
.panel-ink p{color:var(--muted-on-ink);}

/* FAQ */
details.faq{
  border-top:1px solid var(--line); padding:18px 0;
}
details.faq:last-child{border-bottom:1px solid var(--line);}
details.faq summary{
  cursor:pointer; font-family:var(--serif); font-size:1.05rem; color:var(--ink);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{
  content:"+"; font-family:var(--mono); font-size:1.3rem; color:var(--brass); flex:none;
  transition:transform .2s ease;
}
details.faq[open] summary::after{transform:rotate(45deg);}
details.faq p{color:var(--muted); margin-top:12px; margin-bottom:0; font-size:.95rem;}

/* Blog */
.post-card{
  display:flex; flex-direction:column; gap:10px; padding-bottom:0;
}
.post-card__meta{font-family:var(--mono); font-size:.72rem; color:var(--brass-dk); text-transform:uppercase; letter-spacing:.06em;}
.post-card h3{margin-bottom:4px;}
.post-card p{color:var(--muted); font-size:.92rem;}
.empty-state{
  border:1px dashed var(--line); border-radius:var(--radius-lg);
  padding:56px 32px; text-align:center; color:var(--muted);
}
.empty-state h3{color:var(--ink);}

/* Footer */
.site-footer{
  background:var(--ink); color:var(--muted-on-ink); padding:64px 0 28px; margin-top:0;
  border-top:1px solid var(--ink-3);
}
.footer__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px;
  padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.08);
}
@media (max-width:820px){ .footer__grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .footer__grid{grid-template-columns:1fr;} }
.footer__brand{color:#fff; font-family:var(--serif); font-size:1.2rem; margin-bottom:10px; display:flex; align-items:center; gap:9px;}
.site-footer h4{
  color:#fff; font-family:var(--mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.08em; margin-bottom:14px;
}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.site-footer a{color:var(--muted-on-ink); text-decoration:none; font-size:.9rem;}
.site-footer a:hover{color:#fff;}
.footer__legal{
  padding-top:24px; font-size:.78rem; color:#7488A0; line-height:1.7;
}
.footer__legal p{margin-bottom:12px;}
.footer__bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:20px; font-size:.78rem; color:#66788F;
}
.footer__social{ margin-top:18px; display:flex; gap:10px; }
.footer__social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--ink-3); color:var(--muted-on-ink);
  transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
.footer__social-link:hover{
  border-color:var(--brass); color:var(--brass-lt); transform:translateY(-2px);
}
/* Utility */
.text-center{text-align:center;}
.mx-auto{margin-left:auto; margin-right:auto;}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  background:var(--paper-2); color:var(--muted); padding:6px 10px; border-radius:20px;
  border:1px solid var(--line);
}
.legal-doc h2{margin-top:2em;}
.legal-doc h3{margin-top:1.6em;}
.legal-doc p, .legal-doc li{color:var(--ink-text); font-size:.98rem;}
.legal-doc ul{padding-left:1.2em;}
.legal-doc .updated{color:var(--muted); font-family:var(--mono); font-size:.82rem;}