/* CSS Reset – modern, minimal */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[role='list'],ol[role='list']{list-style:none;margin:0;padding:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Theme Tokens */
:root{
  /* Brand palette */
  --navy-900:#0A192F; /* primary */
  --navy-850:#0E1E38;
  --navy-800:#12263F; /* hover/bg dark */
  --navy-700:#172A46; /* alt */
  --navy-600:#1D3456;
  --silver-600:#A8B0BD;
  --silver-500:#C0C0C0; /* primary silver */
  --silver-300:#D9DEE6;
  --silver-200:#E6E9EE; /* subtle borders */
  --silver-150:#EEF1F6;
  --silver-100:#F7F9FC; /* soft backgrounds */
  --white:#FFFFFF;
  --black:#0B1020;

  /* Text */
  --text-900:#0F172A; /* deep slate */
  --text-800:#1F2937;
  --text-700:#334155;
  --text-600:#475569;
  --text-500:#6B7280;

  /* Accents */
  --accent:#3B82F6;         /* refined blue for focus rings */
  --accent-2:#60A5FA;
  --success:#10B981;
  --warning:#F59E0B;
  --danger:#EF4444;

  /* Effects */
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-xl:22px;
  --shadow-xs:0 1px 2px rgba(16,24,40,.06),0 1px 1px rgba(16,24,40,.04);
  --shadow-sm:0 4px 10px rgba(2,8,23,.06);
  --shadow-md:0 10px 24px rgba(2,8,23,.10);
  --shadow-lg:0 24px 48px rgba(2,8,23,.16);

  /* Layout */
  --container:1120px;
  --space-1:.25rem; /* 4px */
  --space-2:.5rem;  /* 8px */
  --space-3:.75rem; /* 12px */
  --space-4:1rem;   /* 16px */
  --space-5:1.25rem;/* 20px */
  --space-6:1.5rem; /* 24px */
  --space-7:1.75rem;/* 28px */
  --space-8:2rem;   /* 32px */
  --space-10:2.5rem;/* 40px */
  --space-12:3rem;  /* 48px */
  --space-16:4rem;  /* 64px */

  /* Motion */
  --easing: cubic-bezier(.2,.7,.2,1);
  --speed-1: 120ms;
  --speed-2: 180ms;
  --speed-3: 260ms;
}

h1,h2,h3 { letter-spacing:-.02em; }
h1 { font-weight:800; font-size:clamp(2.25rem, 3.6vw, 3.25rem); line-height:1.15; }
h2 { font-weight:800; font-size:clamp(1.5rem, 2.5vw, 2.25rem); line-height:1.2; }
h3 { font-weight:700; font-size:1.25rem; }
p.lead { font-size:1.125rem; color:var(--text-700); }

body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65;
  color:var(--text-900);
  background:
    radial-gradient(1000px 600px at 10% -10%, rgba(10,25,47,.035), transparent 60%),
    radial-gradient(800px 600px at 90% -20%, rgba(10,25,47,.03), transparent 65%),
    var(--white);
}

.theme-navy{
  --brand:var(--navy-900);
  --brand-2:var(--navy-800);
  --brand-3:var(--navy-700);
  --brand-fg:var(--white);
  --silver:var(--silver-500);
}

.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--space-4)}

/* Accessibility */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:var(--space-4);top:var(--space-4);width:auto;height:auto;background:var(--brand);color:var(--white);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);z-index:9999}
.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}

/* ===================== NAVIGATION ===================== */
.nav{
  position:sticky;top:0;z-index:100;
  /* glass */
  background:rgba(255,255,255,.8);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(16,24,40,.06);
  transition: transform var(--speed-2) var(--easing), box-shadow var(--speed-2) var(--easing), background var(--speed-3) var(--easing);
}
.nav.scrolled{
  background:rgba(255,255,255,.9);
  box-shadow:0 6px 30px rgba(2,8,23,.08);
  border-bottom-color:rgba(16,24,40,.08);
}
.nav.hide{ transform: translateY(-100%); }
.nav.show{ transform: translateY(0); }

.nav-inner{display:flex;align-items:center;gap:var(--space-4);justify-content:space-between;padding-block:var(--space-3)}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none}
.logo{height:75px;width:auto;filter: drop-shadow(0 4px 8px rgba(2,8,23,.08))}
.brand-name{font-weight:800;color:var(--brand);letter-spacing:-.02em}

.nav-tag{color:var(--text-500);font-size:.9rem}
.menu{display:flex;align-items:center;gap:var(--space-5)}
.menu-toggle{display:none;inline-size:42px;block-size:42px;border:1px solid var(--silver-200);border-radius:var(--radius-sm);background:var(--white);transition:box-shadow var(--speed-1)}
.menu-toggle:hover{box-shadow:var(--shadow-sm)}
.menu-bars{display:inline-block;inline-size:20px;block-size:2px;background:var(--text-900);position:relative}
.menu-bars::before,.menu-bars::after{content:"";position:absolute;left:0;inline-size:20px;block-size:2px;background:var(--text-900)}
.menu-bars::before{top:-6px}.menu-bars::after{top:6px}
.menu-list{display:flex;align-items:center;gap:var(--space-5);margin:0;padding:0;list-style:none}
.menu-list.open{display:flex}

.nav-link{
  color:var(--text-700);position:relative;display:inline-flex;align-items:center;
  padding:.25rem .1rem; font-weight:600;
}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:linear-gradient(90deg,var(--brand),var(--navy-700));
  transform:scaleX(0); transform-origin:left; transition:transform var(--speed-2) var(--easing);
}
.nav-link:hover{color:var(--brand)}
.nav-link:hover::after{transform:scaleX(1)}

@media (max-width: 900px){
  .menu-toggle{display:inline-grid;place-items:center}
  .menu-list{
    display:none;position:absolute;right:var(--space-4);top:64px;background:var(--white);
    border:1px solid var(--silver-200);border-radius:var(--radius-lg);padding:var(--space-4);
    box-shadow:var(--shadow-md);flex-direction:column;gap:var(--space-3);min-width:220px
  }
  .menu-list.open{display:flex;animation:menuIn var(--speed-3) var(--easing)}
  @keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
}

/* ===================== HERO ===================== */
.hero{
  background: radial-gradient(1200px 600px at 20% -10%, rgba(59,130,246,.18), transparent 58%),
              linear-gradient(160deg, var(--brand) 0%, var(--navy-700) 55%, var(--navy-900) 100%);
  color:var(--white);
  position:relative; overflow:hidden;
  padding-block:clamp(3rem,5vw,6rem)
}
.hero::after{
  content:""; position:absolute; inset:-40% -20% auto auto;
  width:70vmax; height:70vmax; border-radius:50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.06), transparent 60%);
  filter: blur(6px); pointer-events:none;
}
.hero .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-10);align-items:center}
.hero .hero-copy h1{font-size:clamp(2rem,3.5vw,3rem);line-height:1.15;margin-bottom:var(--space-3)}
.hero .hero-copy p{color:#E6EEF9;margin-bottom:var(--space-4)}
.hero .checklist{margin:0;padding-left:1.1rem}
.hero .checklist li{margin:.35rem 0}
.hero .card{background:rgba(255,255,255,.98);color:var(--text-900);border:1px solid var(--silver-200);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--space-6)}

@media (max-width: 1000px){
  .hero .hero-grid{grid-template-columns:1fr;gap:var(--space-6)}
}

/* ===================== BUTTONS ===================== */
.btn{
  --_bg:var(--brand);--_fg:var(--white);--_bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1rem;border:1px solid var(--_bd);border-radius:calc(var(--radius-md) - 2px);
  background:linear-gradient(180deg, var(--_bg), color-mix(in oklab, var(--_bg) 86%, black));
  color:var(--_fg);text-decoration:none;font-weight:700;letter-spacing:.01em;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset, var(--shadow-sm);
  transition:transform var(--speed-1), box-shadow var(--speed-2), background var(--speed-2);
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid color-mix(in oklab, var(--accent) 50%, transparent);outline-offset:2px;border-radius:calc(var(--radius-md) - 2px)}
.btn-primary{--_bg:var(--brand);--_fg:var(--white)}
.btn-secondary{--_bg:var(--white);--_fg:var(--brand);--_bd:var(--navy-700)}
.btn-ghost{--_bg:transparent;--_fg:var(--white);--_bd:rgba(255,255,255,.4)}
.btn-soft{--_bg:var(--silver-100);--_fg:var(--text-800);--_bd:var(--silver-300)}
.btn-sm{padding:.5rem .75rem;font-size:.925rem;border-radius:var(--radius-sm)}

/* ===================== CARDS ===================== */
.card{
  background:var(--white);
  border:1px solid color-mix(in oklab, var(--silver-200) 86%, white);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md);
  padding:var(--space-6)
}
.card + .card{margin-top:var(--space-6)}
.card-strong{border:1px solid var(--silver-200);box-shadow:var(--shadow-lg);border-radius:var(--radius-xl)}

/* ===================== FORMS ===================== */
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:var(--space-4)}
.field-group{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.field.small{max-width:260px}
.label, label{font-weight:600;color:var(--text-700)}

.input,
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],select,textarea{
  appearance:none;border:1px solid var(--silver-200);border-radius:var(--radius-md);
  padding:.8rem 1rem;background:var(--white);color:var(--text-900);
  box-shadow:0 1px 0 rgba(2,8,23,.02) inset;
  transition:border-color var(--speed-2) var(--easing), box-shadow var(--speed-2) var(--easing), transform var(--speed-3) var(--easing);
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:color-mix(in oklab, var(--brand) 85%, white);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent);
}
.input:hover{transform:translateZ(0) scale(1.005)}
select{background-image:none}
.input::placeholder{color:var(--text-500)}
.error{color:#b91c1c;font-size:.95rem}
.tiny{font-size:.9rem;color:var(--text-500)}

/* Radio/checkbox polish (works with your HELOC radio UL) */
#id_purpose_of_funds{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin:0;padding:0}
#id_purpose_of_funds li{list-style:none}
#id_purpose_of_funds li label{
  display:flex;align-items:center;gap:.6rem;border:1.5px solid var(--silver-200);
  border-radius:var(--radius-md);padding:.85rem 1rem;cursor:pointer;transition:border-color var(--speed-1), box-shadow var(--speed-1), background var(--speed-1)
}
#id_purpose_of_funds li input[type="radio"]{
  width:1.1rem;height:1.1rem;border:2px solid var(--silver-600);border-radius:9999px;appearance:none;display:inline-block;position:relative;background:var(--white)
}
#id_purpose_of_funds li input[type="radio"]:checked{background:var(--brand);border-color:var(--brand)}
#id_purpose_of_funds li input[type="radio"]:checked::after{content:"";position:absolute;inset:3px;border-radius:9999px;background:#fff}
#id_purpose_of_funds li:hover label{border-color:var(--silver-300);box-shadow:var(--shadow-xs)}

/* ===================== PROGRESS ===================== */
.progress{background:var(--silver-100);border-radius:999px;overflow:hidden;height:8px}
.progress-bar{height:8px;background:linear-gradient(90deg,var(--brand),var(--navy-700));width:0}
.steps-meta{color:var(--text-500);font-weight:600}
.control-row{display:flex;align-items:center;gap:var(--space-3)}

/* ===================== FOOTER ===================== */
.footer{
  background:linear-gradient(180deg, var(--navy-900), color-mix(in oklab, var(--navy-900) 88%, black));
  color:#E6EEF9;margin-top:clamp(2rem,4vw,4rem);
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-grid{display:grid;gap:var(--space-6);grid-template-columns:2fr 1.25fr 1.25fr 1fr;padding-block:var(--space-8)}
.footer a{color:#DCE7F7}
.footer a:hover{color:#fff}
.footer-heading{color:#fff}
.align-end{display:flex;align-items:flex-end;justify-content:flex-end}
@media(max-width: 900px){.footer-grid{grid-template-columns:1fr}}

/* ===================== UTILITIES ===================== */
.mt-4{margin-top:var(--space-4)} .mb-4{margin-bottom:var(--space-4)}
.text-center{text-align:center}
.bg-silver{background:var(--silver-100)} .text-silver{color:var(--silver-500)}

.container-narrow { max-width: 900px; margin-inline:auto; }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 1000px) { .grid-3 { grid-template-columns: 1fr; } }

/* Optional quote styling */
blockquote { font-size: 1.125rem; color: var(--text-700); }
.quote-card { position: relative; overflow: hidden; }
.quote-card::before {
  content: "“"; position: absolute; top: -24px; left: 16px;
  font-size: 7rem; line-height: 1; color: rgba(10,25,47,.08); font-weight: 900;
}

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

/*Styling For the EHO Image*/

/* Make the badge small and crisp */
.nav-tag {
  display: flex;
  align-items: center;
  gap: 0.35rem;         /* tighter spacing next to text/logo */
  font-size: 0.85rem;   /* optional: smaller label text if any */
}

.ehl-badge {
  height: 75px;         /* <- make smaller here (try 12–16px) */
  width: auto;
  display: block;
}

/* Even smaller on mobile if you like */
@media (max-width: 900px) {
  .ehl-badge { height: 50px; }
}

/* ===================== LOGO BOTTOM ===================== */

.footer-col--upline {
  display: flex;
  flex-direction: column;
  align-items: flex-end;       /* right-align on desktop */
}

.upline {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  margin: 0 0 var(--space-2) 0; /* space above the copyright */
  text-align: right;
}

.upline-logo {
  max-width: 180px;            /* tweak as needed */
  height: auto;
  display: block;
  opacity: 0.98;
}

/* Push the © line a bit further down for visual separation */
.copyright {
  margin-top: var(--space-1);
}

/* On small screens, left-align so it flows naturally in a single column */
@media (max-width: 640px) {
  .footer-col--upline,
  .upline {
    align-items: flex-start;
    text-align: left;
  }
}