:root{
  /* Brand — Navy Blue + Gold + Beige */
  --navy-950:#0a0f1e;
  --navy-900:#0d1628;
  --navy-800:#152240;
  --navy-700:#1a2b50;
  --navy-600:#1e3460;
  --gold:#d4973a;
  --gold-light:#e8b85a;
  --gold-pale:#f5e6c8;

  /* Canvas */
  --paper:#f5f0e8;
  --tint:#ede7d9;
  --beige:#e8dfc9;
  --white:#ffffff;

  /* Text */
  --text:#0d1628;
  --muted: rgba(13,22,40,.75);
  --muted2: rgba(13,22,40,.58);

  /* On dark */
  --onDark:#f0eadc;
  --onDarkMuted: rgba(240,234,220,.78);

  /* Lines & shadows */
  --border: rgba(13,22,40,.14);
  --borderSoft: rgba(13,22,40,.09);
  --shadow: 0 18px 45px rgba(13,22,40,.12);
  --shadowStrong: 0 26px 70px rgba(0,0,0,.24);

  --radius: 18px;
  --radius-sm: 14px;
  --container: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text);
  line-height: 1.55;
  background:
    radial-gradient(1100px 520px at 18% 0%, rgba(212,151,58,.16), transparent 55%),
    radial-gradient(900px 520px at 85% 0%, rgba(21,34,64,.10), transparent 60%),
    linear-gradient(180deg, var(--paper), #ede7d9 88%);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

.container{
  width:min(var(--container), calc(100% - 2rem));
  margin:0 auto;
}

.skip{
  position:absolute; left:-999px; top:0;
  background: var(--gold); color:#fff;
  padding:.6rem .9rem; border-radius:10px; z-index:9999;
}
.skip:focus{ left:1rem; top:1rem; }

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); border:0;
}

/* ── Typography ── */
.eyebrow{
  letter-spacing:.14em; text-transform:uppercase;
  font-size:.78rem; color:rgba(26,43,80,.80); margin:0 0 .6rem;
}
.section-dark .eyebrow{ color:rgba(212,151,58,.92); }

h1,h2{
  font-family: Fraunces, ui-serif, Georgia, serif;
  letter-spacing:-0.02em; margin:0; color:var(--text);
}
.section-dark h1,.section-dark h2{ color:var(--onDark); }

h1{ font-size:clamp(2.2rem, 4vw, 3.15rem); line-height:1.08; margin:0 0 .9rem; }
h2{ font-size:clamp(1.55rem, 2.6vw, 2.1rem); line-height:1.15; margin:0 0 .55rem; }
h3{ margin:0 0 .4rem; font-weight:900; letter-spacing:-0.01em; color:var(--text); }
.section-dark h3{ color:var(--onDark); }

.lead{ font-size:1.12rem; line-height:1.65; color:var(--muted); margin:0 0 1.2rem; }
.section-dark .lead{ color:var(--onDarkMuted); }

p{ margin:.55rem 0 0; color:var(--muted); }
.section-dark p{ color:var(--onDarkMuted); }

.micro,.fineprint{ color:var(--muted2); font-size:.92rem; }
.section-dark .micro,.section-dark .fineprint{ color:var(--onDarkMuted); }

/* ── Header / Nav ── */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(13,22,40,.95);
  border-bottom:1px solid rgba(212,151,58,.20);
  backdrop-filter:blur(10px);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.85rem 0;
}
.brand{ display:flex; align-items:center; gap:.55rem; }
.brand-logo-wrap{
  width:80px; height:80px;
  border-radius:14px;
  background: var(--paper);
  border: 1px solid rgba(212,151,58,.22);
  padding:5px;
  flex-shrink:0;
}
.brand-logo{ width:78px; height:78px; object-fit:contain; }
.brand-sub{ font-size:.75rem; line-height:1.5; color:rgba(240,234,220,.70); }

.nav{ display:flex; align-items:center; gap:1.05rem; }
.nav a{ font-size:.95rem; color:rgba(240,234,220,.88); padding:.35rem .2rem; }
.nav a:hover{ color:rgba(212,151,58,.96); }
.nav a[aria-current="page"]{
  color:rgba(212,151,58,.96);
  border-bottom:2px solid rgba(212,151,58,.75);
}

.nav-toggle{
  display:none; background:transparent;
  border:1px solid rgba(240,234,220,.18);
  border-radius:12px; padding:.6rem;
  color:rgba(240,234,220,.92);
}
.burger{
  display:block; width:20px; height:2px;
  background:rgba(240,234,220,.92); position:relative;
}
.burger::before,.burger::after{
  content:""; position:absolute; left:0;
  width:20px; height:2px; background:rgba(240,234,220,.92);
}
.burger::before{ top:-6px; }
.burger::after{ top:6px; }

/* ── Buttons ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; border-radius:14px; padding:.9rem 1.05rem;
  font-weight:900; border:1px solid rgba(212,151,58,.80);
  background:var(--gold); color:#fff;
  box-shadow:0 12px 24px rgba(13,22,40,.20);
  transition:transform 160ms ease, filter 160ms ease;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.btn:active{ transform:translateY(0); }

.btn-small{ padding:.62rem .86rem; border-radius:999px; font-size:.92rem; }
.btn-wide{ width:100%; margin-top:.35rem; }

.btn-ghost{
  border:1px solid rgba(13,22,40,.18);
  background:rgba(255,255,255,.85);
  color:var(--text); box-shadow:none;
}
.btn-ghost:hover{ background:rgba(255,255,255,1); }
.site-header .nav .btn.btn-small{ color:#fff; }

/* ── Section shells ── */
.section{ padding:3.4rem 0; }
.section-alt{
  background:linear-gradient(180deg, var(--tint), #e8dfc9);
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.section-dark{
  background:
    radial-gradient(1100px 520px at 18% 0%, rgba(212,151,58,.22), transparent 55%),
    radial-gradient(900px 520px at 85% 10%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, #1e3460, #0d1628);
  color:var(--onDark);
}

/* Mission section — warm cream with gold accent border */
.section-mission{
  background:
    radial-gradient(900px 400px at 90% 30%, rgba(212,151,58,.14), transparent 60%),
    linear-gradient(180deg, #faf6ee, var(--tint));
  border-top:4px solid rgba(212,151,58,.40);
  border-bottom:1px solid rgba(13,22,40,.08);
  padding:3.4rem 0;
}

.section-head{ margin-bottom:1.15rem; }
.section-head p{ max-width:72ch; }

.grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.1rem; }
.grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.1rem; }
.center{ display:grid; place-items:center; margin-top:1rem; }

.divider{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(13,22,40,.16), transparent);
  margin:1rem 0;
}
.section-dark .divider{
  background:linear-gradient(90deg, transparent, rgba(240,234,220,.18), transparent);
}

/* ── Hero ── */
.hero{
  padding:3.2rem 0 2.6rem;
  background:
    radial-gradient(1100px 520px at 18% 0%, rgba(212,151,58,.18), transparent 55%),
    radial-gradient(900px 520px at 85% 0%, rgba(21,34,64,.12), transparent 60%),
    linear-gradient(180deg, #f5f0e8, var(--paper));
}
.hero-grid{
  display:grid; grid-template-columns:1.25fr .75fr;
  gap:1.3rem; align-items:start;
}
.hero-cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin:.8rem 0 0; }

.trust-badges{
  list-style:none; padding:0; margin:.7rem 0 .9rem;
  display:flex; flex-wrap:wrap; gap:.55rem;
}
.trust-badges li{
  padding:.45rem .65rem; border-radius:999px;
  font-size:.92rem; font-weight:900;
  border:1px solid rgba(13,22,40,.18);
  background:rgba(212,151,58,.14); color:var(--text);
}

/* ── Cards ── */
.card{
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.15rem;
  box-shadow:var(--shadow);
  transition:transform 160ms ease, box-shadow 160ms ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 26px 60px rgba(13,22,40,.16); }
.card p,.card li{ color:var(--muted); }

.section-dark .card{
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(240,234,220,0.22);
  box-shadow:0 22px 60px rgba(0,0,0,.24);
}
.section-dark .card *{ color:rgba(240,234,220,.92); }
.section-dark .card p,
.section-dark .card li{ color:rgba(240,234,220,.78); }

.stats{ margin:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.9rem; }
.stats dt{ color:var(--muted); font-size:.9rem; }
.stats dd{ margin:.15rem 0 0; font-weight:900; font-size:1.05rem; }

/* ── Icon cards ── */
.icon-card{ display:grid; grid-template-columns:44px 1fr; gap:.85rem; align-items:start; }
.icon{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background:rgba(212,151,58,.18);
  border:1px solid rgba(212,151,58,.32);
  box-shadow:0 10px 18px rgba(13,22,40,.10);
  font-size:20px; line-height:1;
}

/* ── Steps ── */
.steps{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:.8rem;
}
.steps li{
  border:1px solid var(--border); background:var(--white);
  border-radius:var(--radius-sm); padding:1rem; box-shadow:var(--shadow);
}
.section-dark .steps li{
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(240,234,220,0.22);
  box-shadow:0 22px 60px rgba(0,0,0,.22);
}
.step-num{
  display:inline-flex;
  border:1px solid rgba(212,151,58,.35);
  background:rgba(212,151,58,.18);
  border-radius:999px; padding:.25rem .55rem;
  font-size:.85rem; font-weight:900; margin-bottom:.55rem;
}

/* ── FAQ ── */
.faq{ display:grid; gap:.6rem; }
.faq-q{
  width:100%; text-align:left;
  border:1px solid var(--border); background:#fff; color:var(--text);
  padding:.95rem 1rem; border-radius:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  gap:.8rem; font-weight:900; box-shadow:var(--shadow);
}
.faq-q:hover{ background:rgba(13,22,40,.02); }
.faq-a{
  border:1px solid var(--border); background:#fff;
  border-radius:14px; padding:.95rem 1rem;
  color:var(--muted); box-shadow:var(--shadow);
}
.chev{
  width:10px; height:10px;
  border-right:2px solid rgba(13,22,40,.55);
  border-bottom:2px solid rgba(13,22,40,.55);
  transform:rotate(45deg); transition:transform .15s ease;
}
.faq-q[aria-expanded="true"] .chev{ transform:rotate(-135deg); }

/* ── Amortization ── */
.amort-grid{ align-items:start; gap:1.4rem; }
.amort-checks{
  list-style:none; padding:0; margin:1.15rem 0 1.05rem;
  display:grid; gap:.7rem;
}
.amort-checks li{
  display:flex; gap:.75rem; align-items:center;
  font-weight:900; color:var(--onDark);
}
.checkdot{
  width:30px; height:30px; border-radius:999px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(212,151,58,.40);
  font-weight:900; color:var(--gold-light);
}
.amort-stats{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.9rem; margin-top:1rem; max-width:520px;
}
.amort-stat{
  border-radius:16px; padding:1rem;
  border:1px solid rgba(240,234,220,.22);
  background:rgba(255,255,255,.10); box-shadow:var(--shadow);
}
.amort-stat .label{ color:var(--onDarkMuted); font-size:.95rem; margin-bottom:.35rem; }
.amort-stat .value{ font-size:1.85rem; font-weight:900; letter-spacing:-.02em; color:var(--gold-light); }

.amort-card{ background:#fff; }
.amort-card-head{
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
.amort-legend{
  display:flex; gap:1rem; flex-wrap:wrap;
  color:var(--muted); font-weight:900; font-size:.95rem;
}
.dot{
  display:inline-block; width:10px; height:10px;
  border-radius:999px; margin-right:.45rem; transform:translateY(1px);
}
.dot-interest{ background:rgba(212,151,58,.95); }
.dot-principal{ background:rgba(21,34,64,.90); }

.amort-bars{ display:grid; gap:.85rem; margin-top:.65rem; }
.amort-row{ display:grid; grid-template-columns:80px 1fr; align-items:center; gap:.9rem; }
.amort-year{ color:var(--muted); font-weight:900; }

.bar{
  height:14px; border-radius:999px;
  background:rgba(13,22,40,.10); overflow:hidden; display:flex;
}
.seg{ height:100%; display:block; }
.seg.interest{ background:rgba(212,151,58,.95); }
.seg.principal{ background:rgba(21,34,64,.90); }
.amort-note{ margin-top:.95rem; color:var(--muted); font-size:.95rem; }

/* ── Mission flow diagram ── */
.mission-flow{
  display:grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items:start;
  gap:.6rem;
  margin:2rem 0 1.8rem;
}
.mission-step{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.1rem;
  box-shadow:var(--shadow);
  text-align:center;
}
.mission-icon{
  font-size:2rem; line-height:1;
  margin-bottom:.5rem;
}
.mission-step-label{
  font-weight:900; font-size:.95rem;
  color:var(--navy-700); margin-bottom:.35rem;
}
.mission-step p{
  font-size:.9rem; color:var(--muted); margin:0;
}
.mission-arrow{
  font-size:1.6rem; color:rgba(212,151,58,.70);
  font-weight:900; align-self:center; padding-top:0;
  text-align:center;
}

.mission-quote{
  background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
  border-radius:var(--radius);
  padding:1.6rem 1.8rem;
  border-left:5px solid var(--gold);
  margin:0 0 .4rem;
}
.mission-quote p{
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-size:1.18rem; line-height:1.6;
  color:var(--onDark); margin:0; font-style:italic;
}
.mission-quote-attr{
  display:block; margin-top:.8rem;
  font-weight:900; font-size:.92rem;
  color:rgba(212,151,58,.90);
}

/* ── About / Story ── */
.story-photo{
  border-radius:var(--radius); overflow:hidden;
  border:3px solid rgba(212,151,58,.35);
  box-shadow:var(--shadowStrong); position:relative;
}
.story-photo img{ width:100%; height:100%; object-fit:cover; }
.photo-caption{
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent, rgba(13,22,40,.82));
  color:rgba(240,234,220,.92); font-weight:900;
  padding:.8rem 1rem; font-size:.95rem;
}

.faith-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(212,151,58,.14);
  border:1px solid rgba(212,151,58,.35);
  border-radius:999px; padding:.4rem .9rem;
  font-size:.9rem; font-weight:900;
  color:var(--navy-700); margin-bottom:.9rem;
}

/* ── Bullets ── */
.bullets{ padding:0 0 0 1.1rem; margin:.5rem 0 0; }
.bullets li{ color:var(--muted); margin-bottom:.35rem; }

/* ── Footer ── */
.footer{
  background:rgba(13,22,40,.98);
  color:rgba(240,234,220,.80);
  padding:1.35rem 0; margin-top:2rem;
}
.footer-inner{
  display:flex; align-items:center;
  justify-content:space-between; gap:1rem;
  border-top:1px solid rgba(212,151,58,.18);
  padding-top:1.1rem;
}
.footer-links{ display:flex; gap:.9rem; flex-wrap:wrap; }
.footer-links a{ color:rgba(240,234,220,.82); }
.footer-links a:hover{ color:rgba(212,151,58,.95); }

/* ── Sticky CTA ── */
.sticky-cta{
  position:sticky; bottom:0; z-index:40;
  background:rgba(13,22,40,.95);
  border-top:1px solid rgba(212,151,58,.22);
  backdrop-filter:blur(10px);
}
.sticky-inner{
  display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:.75rem 0;
}
.sticky-text{ color:rgba(240,234,220,.88); font-weight:800; }
.sticky-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }

/* ── Responsive ── */
@media (max-width: 980px){
  .container{ width:min(var(--container), calc(100% - 1.25rem)); }

  .hero-grid{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .amort-stats{ grid-template-columns:1fr; }
  .amort-row{ grid-template-columns:70px 1fr; }

  /* Header */
  .header-inner{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    column-gap:.75rem;
    padding:.75rem 0;
  }

  .brand{
    min-width:0;
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    align-items:center;
    gap:.55rem;
  }

  .brand-logo-wrap{
    width:64px;
    height:64px;
  }

  .brand-logo{
    width:54px;
    height:54px;
  }

  .brand-sub{
    display:block;
    font-size:.68rem;
    line-height:1.15;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    grid-column:2;
    grid-row:1;
    position:relative;
    z-index:80;
    min-width:44px;
    min-height:44px;
    cursor:pointer;
  }

  .nav{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 8px);
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:.25rem;
    border:1px solid rgba(212,151,58,.18);
    background:rgba(13,22,40,.98);
    border-radius:16px;
    padding:.75rem;
    box-shadow:var(--shadowStrong);
    z-index:70;
  }

  .nav.open{
    display:flex;
  }

  .nav a{
    display:block;
    width:100%;
    padding:.8rem .55rem;
    border-radius:12px;
  }

  .nav a:hover,
  .nav a:focus-visible{
    background:rgba(255,255,255,.06);
  }

  .nav .btn.btn-small{
    width:100%;
    margin-top:.35rem;
  }

  /* About section */
  .about-grid,
  #about .grid-2{
    grid-template-columns:1fr !important;
    gap:1.25rem;
  }

  .about-grid .story-photo,
  #about .story-photo{
    width:100%;
    max-width:360px;
    min-height:0 !important;
    margin:0 auto 1rem;
  }

  .about-grid .story-photo img,
  #about .story-photo img{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:4 / 5;
    display:block;
  }

  .mission-flow{
    grid-template-columns:1fr;
  }

  .mission-arrow{
    transform:rotate(90deg);
    justify-self:center;
    margin:-.4rem 0;
  }

  .sticky-inner{
    flex-direction:column;
    align-items:stretch;
  }

  .sticky-actions{
    width:100%;
  }

  .sticky-actions .btn{
    flex:1 1 100%;
  }
}