:root{
  --navy: #142136;
  --navy-2: #1c2e4a;
  --brass: #c6952f;
  --brass-light: #e3b95a;
  --brick: #9c3f30;
  --teal: #3d6b78;
  --cream: #f6f3ec;
  --paper: #fbf9f4;
  --ink: #1b1b1b;
  --ink-soft: #4a4f58;
  --line: #e2ddd0;
  --radius: 2px;
  --maxw: 1240px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  margin:0;
}
.mono{ font-family:'IBM Plex Mono', monospace; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }

/* ---------- HEADER ---------- */
header.site{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; max-width:var(--maxw); margin:0 auto; gap:24px;
}
.brand{ display:flex; align-items:center; flex-shrink:0; width:174px; }
.brand-logo{ display:block; width:174px; height:auto; max-height:62px; object-fit:contain; object-position:left center; }
.brand-name small{
  display:block; font-family:'Inter'; font-weight:600; font-size:10px;
  letter-spacing:0.14em; color:var(--brass); text-transform:uppercase; margin-top:2px;
}
nav.primary{ display:flex; gap:30px; flex:1; justify-content:center; }
nav.primary a{
  font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--navy); padding:8px 0; border-bottom:2px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
nav.primary a:hover{ border-color:var(--brass); }
.header-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  padding:12px 22px; border-radius:var(--radius); border:1.5px solid transparent;
  transition:all .15s ease; white-space:nowrap;
}
.btn-outline{ border-color:var(--navy); color:var(--navy); background:transparent; }
.btn-outline:hover{ background:var(--navy); color:#fff; }
.btn-solid{ background:var(--brick); color:#fff; }
.btn-solid:hover{ background:#832f23; }
.btn-brass{ background:var(--brass); color:var(--navy); }
.btn-brass:hover{ background:var(--brass-light); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.icon-btn{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line); background:transparent; color:var(--navy); flex-shrink:0;
}
.menu-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:50%; width:38px; height:38px; align-items:center; justify-content:center; color:var(--navy); }

/* ---------- mobile dropdown nav ---------- */
.mobile-nav{
  display:none; flex-direction:column; background:var(--navy); color:#fff;
  position:absolute; left:0; right:0; top:100%; padding:8px 24px 20px; z-index:60;
}
.mobile-nav.open{ display:flex; }
.mobile-nav a{
  padding:14px 0; font-size:15px; font-weight:700; border-bottom:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:space-between;
}
.mobile-nav a:last-child{ border-bottom:none; }

/* ---------- FOOTER (shared across pages) ---------- */
footer{ background:var(--cream); padding-top:70px; }
.footer-top{ display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr; gap:40px; padding-bottom:56px; border-bottom:1px solid var(--line); }
.footer-col h5{
  font-size:11.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--brick); margin-bottom:18px;
}
.footer-col a{ display:block; font-size:14.5px; color:var(--navy); margin-bottom:13px; }
.footer-col a:hover{ text-decoration:underline; }
.service-block .big{ font-size:22px; font-weight:700; color:var(--navy); font-family:'Fraunces'; }
.service-block .label{ font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; display:block; }
.service-row{ display:flex; gap:48px; margin-bottom:30px; flex-wrap:wrap; }
.app-row{ display:flex; gap:12px; margin-bottom:28px; }
.app-btn{ display:flex; align-items:center; gap:8px; border:1px solid var(--navy); padding:9px 16px; border-radius:var(--radius); font-size:13px; font-weight:600; }

.footer-bottom{ padding:36px 32px 0; }
.tagline-row{ display:flex; align-items:center; justify-content:space-between; padding-bottom:24px; flex-wrap:wrap; gap:16px; }
.tagline{ font-family:'Fraunces'; font-weight:700; font-size:26px; color:var(--navy); text-transform:uppercase; letter-spacing:0.01em; }
.social-row{ display:flex; gap:12px; }
.social-row a{ width:36px;height:36px;border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; }
hr.rule{ border:none; border-top:3px solid var(--brick); margin:0 0 26px; }
.legal{ font-size:12.5px; color:var(--ink-soft); line-height:1.7; max-width:1100px; margin-bottom:26px; }
.badges-row{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding-bottom:34px; font-size:13px; color:var(--ink-soft); }
.badges-row a{ text-decoration:underline; color:var(--ink-soft); }
.ncua-badge{ border:1px solid var(--line); padding:4px 8px; font-size:9px; font-weight:700; color:var(--navy); }
.patriot{ padding-bottom:36px; font-size:13px; }
.patriot a{ text-decoration:underline; color:var(--ink-soft); }

/* ---------- shared form elements ---------- */
.field{
  width:100%; padding:14px 16px; margin-bottom:14px; border:1.5px solid var(--line);
  border-radius:var(--radius); font-size:14px; font-family:inherit; background:var(--cream);
  color:var(--ink);
}
.field:focus{ border-color:var(--brass); background:#fff; }
label.field-label{ display:block; font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
.field-group{ margin-bottom:18px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

@media (max-width: 980px){
  nav.primary{ display:none; }
  .menu-toggle{ display:flex; }
}
@media (max-width: 640px){
  .footer-top{ grid-template-columns:1fr 1fr; }
  .two-col{ grid-template-columns:1fr; }
}

/* Cooks Credit Union PNG logo */
@media (max-width: 640px){ .brand{ width:140px; } .brand-logo{ width:140px; max-height:52px; } .header-inner{ padding:12px 18px; } }