/* ============================================================
   Matt Walsh Mortgage — design tokens
   Concept: a nautical survey chart, not a finance-app template.
   Ink navy + brass + hairline rules, horizon-line motifs.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:        #10263B;
  --ink-2:      #1B3A56;
  --paper:      #F6F4EC;
  --white:      #FFFFFF;
  --brass:      #A6762C;
  --brass-dim:  #C8A870;
  --teal:       #2F6F6B;
  --line:       #D9D2C1;
  --line-dark:  rgba(246,244,236,0.22);
  --ink-soft:   rgba(16,38,59,0.68);

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --max: 1120px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3{ font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0; }
p{ margin: 0; }
:focus-visible{ outline: 2px solid var(--brass); outline-offset: 3px; }

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 28px; }

/* ---------- Nav ---------- */
.site-nav{
  position: sticky; top:0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 78px;
}
.wordmark{
  font-family: var(--serif); font-size: 1.28rem; font-weight: 600;
  letter-spacing: -0.01em;
}
.wordmark span{ color: var(--brass); }
.wordmark small{
  display:block; font-family: var(--sans); font-weight:500; font-size:0.62rem;
  letter-spacing:0.08em; color: var(--ink-soft); margin-top:2px;
}
.nav-links{ display:flex; align-items:center; gap: 34px; }
.nav-links a{
  font-size:0.94rem; font-weight:500; color: var(--ink-soft);
  transition: color .15s ease;
}
.nav-links a:hover{ color: var(--ink); }
.nav-links a.current{ color: var(--ink); }
.nav-cta{
  background: var(--ink); color: var(--paper) !important;
  padding: 10px 20px; border-radius: 3px; font-weight:600 !important;
}
.nav-cta:hover{ background: var(--ink-2); }
.nav-toggle{ display:none; }

@media (max-width: 820px){
  .nav-links{
    position: fixed; inset: 78px 0 0 0; background: var(--paper);
    flex-direction:column; align-items:flex-start; gap:0;
    padding: 8px 28px 28px; border-top:1px solid var(--line);
    transform: translateY(-8px); opacity:0; pointer-events:none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .nav-links.open{ opacity:1; pointer-events:auto; transform:none; }
  .nav-links a{ width:100%; padding:14px 0; border-bottom:1px solid var(--line); }
  .nav-cta{ margin-top:14px; text-align:center; }
  .nav-toggle{
    display:block; background:none; border:1px solid var(--line); border-radius:3px;
    width:40px; height:36px; position:relative; cursor:pointer;
  }
  .nav-toggle span, .nav-toggle::before, .nav-toggle::after{
    content:''; position:absolute; left:9px; right:9px; height:1.5px; background:var(--ink);
  }
  .nav-toggle::before{ top:12px; } .nav-toggle span{ top:17.5px; } .nav-toggle::after{ top:23px; }
}

/* ---------- Horizon rule (recurring motif) ---------- */
.horizon{
  position:relative; height:1px; background: var(--line); margin: 0;
}
.horizon::after{
  content:''; position:absolute; top:-4px; left:0; width:9px; height:9px;
  border-radius:50%; background: var(--brass);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:0.95rem; padding: 13px 26px;
  border-radius: 3px; border:1px solid transparent; cursor:pointer;
}
.btn-primary{ background: var(--ink); color: var(--paper); }
.btn-primary:hover{ background: var(--ink-2); }
.btn-ghost{ border-color: var(--ink); color: var(--ink); background:transparent; }
.btn-ghost:hover{ background: var(--ink); color: var(--paper); }
.btn-on-dark{ border-color: var(--line-dark); color: var(--paper); }
.btn-on-dark:hover{ background: var(--line-dark); }

/* ---------- Hero ---------- */
.hero{ padding: 74px 0 56px; }
.hero-grid{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items:end; }
.eyebrow{
  font-size: 0.82rem; color: var(--teal); font-weight:600; margin-bottom: 18px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:26px; height:1px; background: var(--teal); }
.hero h1{ font-size: clamp(2.3rem, 4.2vw, 3.6rem); max-width: 15ch; }
.hero-sub{ margin-top:22px; font-size:1.12rem; color: var(--ink-soft); max-width:46ch; }
.hero-actions{ margin-top: 34px; display:flex; gap:14px; flex-wrap:wrap; }
.hero-card{
  background: var(--ink); color: var(--paper); border-radius: 4px; padding: 30px;
}
.hero-card .figure{ font-family: var(--serif); font-size: 2.6rem; }
.hero-card .cap{ color: var(--brass-dim); font-size:0.85rem; margin-top:4px; }
.hero-stat-row{ display:grid; grid-template-columns: 1fr 1fr; gap:22px; margin-top:22px; padding-top:22px; border-top:1px solid var(--line-dark); }
.hero-stat-row .num{ font-family: var(--serif); font-size:1.5rem; }
.hero-stat-row .lbl{ font-size:0.8rem; color: rgba(246,244,236,0.6); margin-top:2px; }

@media (max-width: 860px){ .hero-grid{ grid-template-columns:1fr; } }

/* ---------- Sections ---------- */
section{ padding: 64px 0; }
.section-head{ max-width: 62ch; margin-bottom: 40px; }
.section-head h2{ font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.section-head p{ margin-top:14px; color: var(--ink-soft); font-size:1.03rem; }
.dark{ background: var(--ink); color: var(--paper); }
.dark .ink-soft, .dark p{ color: rgba(246,244,236,0.72); }
.dark .section-head h2{ color: var(--paper); }

/* ---------- Loan steps (legitimate sequence) ---------- */
.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
.step{ padding: 28px 26px 28px 0; border-right:1px solid var(--line); }
.step:last-child{ border-right:none; }
.step .mark{ font-family: var(--serif); font-size:1.7rem; color: var(--brass); }
.step h3{ font-size:1.1rem; margin-top:14px; }
.step p{ margin-top:10px; color: var(--ink-soft); font-size:0.95rem; }
@media (max-width:760px){
  .steps{ grid-template-columns:1fr; }
  .step{ border-right:none; border-bottom:1px solid var(--line); padding:26px 0; }
}

/* ---------- Cards / grid ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
@media (max-width:820px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

.tile{
  border:1px solid var(--line); border-radius:4px; padding:28px; background: var(--white);
}
.tile h3{ font-size:1.08rem; }
.tile p{ margin-top:10px; color: var(--ink-soft); font-size:0.95rem; }

/* ---------- Program list ---------- */
.program{
  display:flex; justify-content:space-between; align-items:baseline;
  padding: 22px 0; border-bottom: 1px solid var(--line); gap: 20px;
}
.program h3{ font-size:1.15rem; }
.program p{ color: var(--ink-soft); font-size:0.92rem; margin-top:6px; max-width:52ch; }
.program .rate-tag{ font-family:var(--serif); font-size:1.2rem; color: var(--brass); white-space:nowrap; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding: 20px 0; display:flex; justify-content:space-between; align-items:center;
  font-family: var(--sans); font-weight:600; font-size:1rem; color: var(--ink);
}
.faq-q::after{ content:'+'; font-family: var(--serif); font-size:1.4rem; color: var(--brass); }
.faq-item.open .faq-q::after{ content:'\2212'; }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .22s ease; }
.faq-item.open .faq-a{ max-height: 260px; }
.faq-a p{ padding: 0 0 22px; color: var(--ink-soft); max-width:64ch; }

/* ---------- Video embed strip ---------- */
.video-strip{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.video-card{ border:1px solid var(--line-dark); border-radius:4px; overflow:hidden; }
.video-card .thumb{
  aspect-ratio: 16/9; background: var(--ink-2);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.video-card .thumb::after{
  content:''; width:0; height:0; border-style:solid;
  border-width:9px 0 9px 15px; border-color:transparent transparent transparent var(--brass);
}
.video-card .cap{ padding: 14px 16px; font-size:0.88rem; color: rgba(246,244,236,0.75); }
@media (max-width:820px){ .video-strip{ grid-template-columns:1fr; } }

/* ---------- Forms ---------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:0.86rem; font-weight:600; margin-bottom:7px; }
.field input, .field select, .field textarea{
  width:100%; font-family: var(--sans); font-size:0.98rem; padding:12px 14px;
  border:1px solid var(--line); border-radius:3px; background: var(--white); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--brass); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; } }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:0.82rem; color: var(--ink-soft); }
.consent input{ margin-top:4px; }

/* ---------- Calculator ---------- */
.calc-wrap{ display:grid; grid-template-columns: 1fr 1fr; gap:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.calc-inputs{ padding:34px; background: var(--white); }
.calc-result{ padding:34px; background: var(--ink); color: var(--paper); }
.range-out{ font-family: var(--serif); font-size:0.95rem; color: var(--brass); }
.calc-result .big{ font-family: var(--serif); font-size: 2.7rem; }
.calc-result .cap{ color: rgba(246,244,236,0.6); font-size:0.86rem; margin-top:2px; }
.breakdown-row{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line-dark); font-size:0.92rem; }
.breakdown-row:last-child{ border-bottom:none; }
@media (max-width:820px){ .calc-wrap{ grid-template-columns:1fr; } }

/* ---------- Table (rates) ---------- */
.rate-table{ width:100%; border-collapse:collapse; }
.rate-table th, .rate-table td{ text-align:left; padding:16px 12px; border-bottom:1px solid var(--line); }
.rate-table th{ font-size:0.78rem; letter-spacing:0.03em; color: var(--ink-soft); font-weight:600; }
.rate-table td.rate{ font-family: var(--serif); font-size:1.15rem; color: var(--brass); }
.rate-table tr:first-child th{ border-top:1px solid var(--line); }
.table-scroll{ overflow-x:auto; }

.notice{
  border-left:3px solid var(--brass); background: rgba(166,118,44,0.07);
  padding: 16px 20px; font-size:0.92rem; color: var(--ink-soft); border-radius:0 3px 3px 0;
}

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: rgba(246,244,236,0.75); padding: 54px 0 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 40px; }
.footer-grid h4{ color: var(--paper); font-size:0.85rem; letter-spacing:0.03em; margin-bottom:16px; }
.footer-grid a{ display:block; font-size:0.9rem; padding: 6px 0; color: rgba(246,244,236,0.75); }
.footer-grid a:hover{ color: var(--paper); }
.footer-legal{
  margin-top:46px; padding-top:26px; border-top:1px solid var(--line-dark);
  font-size:0.78rem; line-height:1.7; color: rgba(246,244,236,0.55);
}
.footer-legal p{ margin-bottom:10px; }
.footer-bottom{
  display:flex; justify-content:space-between; margin-top:20px; font-size:0.78rem;
  color: rgba(246,244,236,0.45); flex-wrap:wrap; gap:10px;
}
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{ padding: 56px 0 44px; }
.page-hero h1{ font-size: clamp(2rem, 3.6vw, 2.8rem); max-width:22ch; }
.page-hero p{ margin-top:16px; color: var(--ink-soft); font-size:1.05rem; max-width:56ch; }

/* ---------- About page specifics ---------- */
.credential-list{ margin-top:22px; }
.credential-row{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:0.94rem; }
.credential-row .k{ min-width:180px; color: var(--ink-soft); }
.credential-row .v{ font-weight:600; }
.portrait-slot{
  aspect-ratio: 4/5; background: var(--ink-2); border-radius:4px;
  display:flex; align-items:center; justify-content:center; color: var(--brass-dim);
  font-family: var(--serif); font-size:3.4rem;
}