
  :root{
    --blue:#0064FF;
    --magenta:#CA05BE;
    --cyan:#00E5FF;
    --purple:#7B2FF7;
    --pink:#FF2E9F;
    --navy:#05060F;
    --navy-2:#0B0D1F;
    --card:#12142A;
    --card-2:#171A34;
    --white:#FFFFFF;
    --ink:#C9CCE6;
    --ink-dim:#8489B3;
    --line: rgba(255,255,255,0.08);
    --line-strong: rgba(255,255,255,0.18);
    --grad-1: linear-gradient(115deg, var(--blue) 0%, var(--purple) 45%, var(--magenta) 75%, var(--pink) 100%);
    --grad-2: linear-gradient(115deg, var(--cyan) 0%, var(--blue) 50%, var(--purple) 100%);
    --grad-text: linear-gradient(100deg, #6EE7FF 0%, #7B9CFF 30%, #C084FF 60%, #FF6BD6 100%);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter', sans-serif;
    color:var(--ink);
    background:var(--navy);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    position:relative;
  }
  /* ambient glow blobs */
  body::before, body::after{
    content:''; position:fixed; border-radius:50%; filter:blur(120px); z-index:0; pointer-events:none;
  }
  body::before{
    width:640px; height:640px; top:-220px; left:-180px;
    background:radial-gradient(circle, rgba(0,100,255,0.55), transparent 70%);
  }
  body::after{
    width:700px; height:700px; bottom:-260px; right:-220px;
    background:radial-gradient(circle, rgba(202,5,190,0.45), transparent 70%);
  }
  h1,h2,h3,h4{font-family:'Space Grotesk', sans-serif; color:var(--white); font-weight:700; letter-spacing:-0.02em; line-height:1.06;}
  a{color:inherit; text-decoration:none;}
  .mono{font-family:'IBM Plex Mono', monospace;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px; position:relative; z-index:1;}
  img{max-width:100%; display:block;}
  ::selection{background:var(--magenta); color:#fff;}
  .grad-text{
    background:var(--grad-text);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  a:focus-visible, button:focus-visible, input:focus-visible{
    outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }

  /* ---------- NAV ---------- */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(5,6,15,0.72);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 32px; max-width:1180px; margin:0 auto;
  }
  .brand{display:flex; align-items:center; gap:14px;}
  .brand-logo-img{height:30px; width:auto; display:block;}
  .brand-logo-img.lg{height:44px;}
  .brand-place{
    font-family:'IBM Plex Mono'; font-weight:500; font-size:10.5px;
    letter-spacing:0.09em; text-transform:uppercase; color:var(--ink);
    opacity:0.7; border-left:1px solid var(--line-strong); padding-left:12px; margin-left:2px;
  }
  .brand.lg .brand-place{font-size:11.5px; padding-left:16px; margin-left:6px;}
  .nav-links{display:flex; gap:34px; align-items:center; list-style:none; margin:0; padding:0;}
  .nav-links li{list-style:none; margin:0; padding:0; position:relative;}
  .nav-links a{font-size:14.5px; font-weight:500; color:var(--ink); opacity:0.75; transition:opacity .2s, color .2s; display:inline-flex; align-items:center; gap:5px; white-space:nowrap;}
  .nav-links a:hover{opacity:1; color:var(--cyan);}
  .mobile-menu, .mobile-menu ul{list-style:none; margin:0; padding:0;}
  .mobile-menu li{list-style:none;}

  /* Dropdown ("Loan Options ▾") */
  .nav-links li.menu-item-has-children > a::after{
    content:''; width:6px; height:6px; margin-left:2px;
    border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translateY(-2px); transition:transform .2s ease;
  }
  .nav-links li.menu-item-has-children:hover > a::after,
  .nav-links li.menu-item-has-children:focus-within > a::after{ transform:rotate(225deg) translateY(2px); }
  .nav-links .sub-menu{
    list-style:none; margin:0; padding:10px; position:absolute; top:calc(100% + 14px); left:50%;
    transform:translateX(-50%) translateY(6px); min-width:240px;
    background:linear-gradient(160deg, var(--card), var(--card-2));
    border:1px solid var(--line-strong); border-radius:14px;
    box-shadow:0 24px 50px rgba(0,0,0,0.5);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:200;
  }
  .nav-links li.menu-item-has-children:hover > .sub-menu,
  .nav-links li.menu-item-has-children:focus-within > .sub-menu{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
  }
  .nav-links .sub-menu li{width:100%;}
  .nav-links .sub-menu a{
    display:block; width:100%; padding:9px 12px; border-radius:8px; font-size:13.5px;
    opacity:0.85; white-space:nowrap;
  }
  .nav-links .sub-menu a:hover{ background:rgba(255,255,255,0.06); opacity:1; }
  .nav-cta{display:flex; align-items:center; gap:18px;}
  .phone-mini{font-size:13.5px; font-weight:600; opacity:0.75; display:none;}
  @media(min-width:900px){.phone-mini{display:block;}}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-weight:700; font-size:14.5px; padding:12px 24px; border-radius:100px;
    border:1px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  .btn-primary{
    background:var(--grad-1); background-size:220% 220%; color:#fff;
    box-shadow:0 8px 24px rgba(123,47,247,0.35);
  }
  .btn-primary:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 14px 34px rgba(255,46,159,0.4); background-position:100% 0;}
  .btn-ghost{background:rgba(255,255,255,0.04); color:var(--white); border:1px solid var(--line-strong);}
  .btn-ghost:hover{border-color:var(--cyan); color:var(--cyan); background:rgba(0,229,255,0.06);}
  .btn-light{background:#fff; color:var(--navy);}
  .burger{
    display:none; flex-direction:column; justify-content:center; gap:5px;
    width:38px; height:38px; border:1px solid var(--line-strong); border-radius:10px;
    background:transparent; cursor:pointer;
  }
  .burger span{width:16px; height:2px; background:var(--white); margin:0 auto; transition:transform .2s ease, opacity .2s ease;}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .burger.open span:nth-child(2){opacity:0;}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .mobile-menu{
    display:flex; flex-direction:column; gap:2px; padding:0 32px;
    max-height:0; overflow:hidden; transition:max-height .28s ease, padding .28s ease;
    border-top:1px solid transparent;
  }
  .mobile-menu.open{max-height:calc(100vh - 72px); overflow-y:auto; padding:18px 32px 26px; border-top:1px solid var(--line);}
  .mobile-menu a{padding:12px 2px; font-size:15.5px; font-weight:500; border-bottom:1px solid var(--line); color:var(--ink);}
  .mobile-menu a.btn{border-bottom:none; margin-top:10px; color:#fff; justify-content:center;}
  @media(min-width:900px){.burger, .mobile-menu{display:none;}}
  @media(max-width:899px){.nav-links{display:none;} .burger{display:flex;}}

  /* ---------- HERO ---------- */
  .hero{padding:80px 0 60px;}
  .hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:start;}
  @media(max-width:980px){.hero-grid{grid-template-columns:1fr;}}
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px; font-family:'IBM Plex Mono';
    font-size:12.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--cyan); margin-bottom:20px; padding:8px 16px; border-radius:100px;
    background:rgba(0,229,255,0.08); border:1px solid rgba(0,229,255,0.25);
  }
  .sq{width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan);}
  h1{font-size:clamp(38px,5.4vw,64px);}
  h1 em{font-style:normal;}
  .lede{font-size:18px; line-height:1.6; margin:22px 0 30px; max-width:520px; color:var(--ink);}
  .hero-actions{display:flex; gap:16px; flex-wrap:wrap;}
  .hero-note{font-size:13px; opacity:0.65; margin-top:16px;}
  .trust-inline{display:flex; flex-wrap:wrap; gap:26px; margin-top:44px;}
  .trust-item{display:flex; flex-direction:column; gap:2px;}
  .trust-item .score{font-size:16px; font-weight:700; color:var(--white);}
  .trust-item .src{font-size:12px; color:var(--ink-dim);}

  .calc-card{
    background:linear-gradient(160deg, var(--card), var(--card-2));
    border:1px solid var(--line-strong);
    border-radius:28px; padding:32px; position:relative; overflow:hidden;
    box-shadow:0 30px 60px rgba(0,0,0,0.5);
  }
  .calc-card::before{
    content:''; position:absolute; inset:0; padding:1px; border-radius:28px;
    background:var(--grad-1); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; opacity:0.5; pointer-events:none;
  }
  .calc-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:26px;}
  .calc-label{font-family:'Space Grotesk'; font-weight:700; font-size:17px; color:var(--white);}
  .calc-live{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--cyan); font-family:'IBM Plex Mono';}
  .pulse{width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:pulse 1.6s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
  .calc-row{margin-bottom:22px;}
  .calc-row-top{display:flex; justify-content:space-between; margin-bottom:10px; font-size:13.5px; color:var(--ink);}
  .calc-row-top label{font-weight:500;}
  .calc-row-top .val{color:var(--white); font-weight:700;}
  .calc-select{
    width:100%; padding:11px 13px; border-radius:9px; font-family:inherit; font-size:14px;
    background:rgba(255,255,255,0.04); border:1px solid var(--line-strong); color:#fff;
    appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238489B3' stroke-width='1.6' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center;
  }
  .calc-select:focus{ outline:none; border-color:var(--cyan); background-color:rgba(0,229,255,0.05); }
  /* Same fix as .contact-card select option: the native open-dropdown
     popup ignores this box's translucent background but still
     inherits color:#fff, which leaves options unreadable (white on
     white) unless given their own explicit colors. */
  .calc-select option{ color:#15161c; background:#fff; }
  input[type="range"]{
    -webkit-appearance:none; width:100%; height:6px; border-radius:100px;
    background:rgba(255,255,255,0.12); outline:none;
  }
  input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
    background:var(--grad-2); cursor:pointer; box-shadow:0 0 0 4px rgba(0,229,255,0.15), 0 4px 12px rgba(0,0,0,0.4);
    border:2px solid #fff;
  }
  input[type="range"]::-moz-range-thumb{
    width:20px; height:20px; border-radius:50%; background:var(--grad-2); cursor:pointer;
    border:2px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,0.4);
  }
  .calc-output{
    background:rgba(0,0,0,0.35); border-radius:18px; padding:22px; text-align:center; margin-top:8px;
    border:1px solid var(--line);
  }
  .out-label{font-size:12.5px; color:var(--ink-dim); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.06em;}
  .out-num{font-family:'Space Grotesk'; font-weight:800; font-size:40px;}
  .out-num span:first-child, .out-num span:last-child{font-size:20px; color:var(--ink-dim); font-weight:600;}
  .calc-disclaimer{font-size:11.5px; color:var(--ink-dim); margin-top:10px; line-height:1.5;}
  .calc-foot{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-dim); margin-top:16px;}
  .calc-cta{
    display:block; text-align:center; margin-top:20px; padding:14px; border-radius:100px;
    background:var(--grad-1); color:#fff; font-weight:700; font-size:14.5px;
    box-shadow:0 10px 26px rgba(123,47,247,0.35); transition:transform .2s ease;
  }
  .calc-cta:hover{transform:translateY(-2px);}

  /* ---------- SECTIONS ---------- */
  section{padding:96px 0;}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-head h2{font-size:clamp(28px,3.6vw,42px); margin-top:14px;}
  .section-head p{margin-top:18px; font-size:16px; line-height:1.7; color:var(--ink);}

  /* paths */
  .paths{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  @media(max-width:900px){.paths{grid-template-columns:1fr;}}
  .path-card{
    position:relative; background:linear-gradient(160deg, var(--card), var(--card-2));
    border:1px solid var(--line); border-radius:24px; padding:32px; overflow:hidden;
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .path-card:hover{transform:translateY(-6px); border-color:var(--line-strong); box-shadow:0 20px 50px rgba(0,0,0,0.45);}
  .path-card .bar{position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad-1);}
  .path-icon{width:44px; height:44px; margin-bottom:20px; filter:invert(1) brightness(1.6) drop-shadow(0 0 8px rgba(0,229,255,0.4));}
  .path-num{font-family:'IBM Plex Mono'; font-size:12px; color:var(--cyan); letter-spacing:0.08em; margin-bottom:10px;}
  .path-card h3{font-size:22px; margin-bottom:12px;}
  .path-card p{font-size:14.5px; line-height:1.65; color:var(--ink); margin-bottom:20px;}
  .path-link{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--white);}
  .path-link svg{transition:transform .2s ease;}
  .path-card:hover .path-link svg{transform:translateX(4px); color:var(--cyan);}
  .path-card:hover .path-link{color:var(--cyan);}

  /* local */
  .local{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
  @media(max-width:900px){.local{grid-template-columns:1fr;}}
  .local h2{font-size:clamp(28px,3.6vw,42px); margin-top:14px;}
  .local p{margin:20px 0 26px; font-size:16px; line-height:1.7; color:var(--ink); max-width:460px;}
  .local-stats{display:flex; gap:40px; margin-bottom:30px;}
  .local-stats .num{font-family:'Space Grotesk'; font-size:40px; font-weight:800;}
  .local-stats .lbl{font-size:13px; color:var(--ink-dim); margin-top:4px; max-width:150px;}
  .local-photo{
    border-radius:28px; overflow:hidden; aspect-ratio:1/1; background-size:cover; background-position:center;
    border:1px solid var(--line-strong); box-shadow:0 30px 60px rgba(0,0,0,0.5); position:relative;
  }
  .local-photo::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(5,6,15,0.7));}

  /* faq */
  .faq-item{border-bottom:1px solid var(--line); padding:22px 0;}
  .faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; gap:20px;}
  .faq-q h4{font-size:17px; font-weight:600;}
  .faq-q .plus{width:28px; height:28px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .3s ease, background .3s ease;}
  .faq-item.open .plus{transform:rotate(135deg); background:var(--grad-1); border-color:transparent;}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
  .faq-a p{padding-top:14px; font-size:14.5px; line-height:1.7; color:var(--ink);}

  /* footer */
  footer{padding:44px 0 22px; border-top:1px solid var(--line); position:relative; z-index:1;}
  .foot-grid{display:grid; grid-template-columns:1.3fr 0.85fr 0.85fr 0.85fr 0.85fr; gap:24px; margin-bottom:22px;}
  @media(max-width:1100px){.foot-grid{grid-template-columns:1.2fr 1fr 1fr;}}
  @media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:520px){.foot-grid{grid-template-columns:1fr;}}
  .foot-col h4{font-size:14px; color:var(--white); margin-bottom:16px;}
  .foot-col p, .foot-col a{display:block; font-size:13.5px; color:var(--ink-dim); margin-bottom:10px; line-height:1.6;}
  .foot-col a:hover{color:var(--cyan);}
  .foot-bottom{display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-dim); flex-wrap:wrap; gap:10px;}

  .reveal{transition:opacity .6s ease, transform .6s ease;}
  .reveal.reveal-armed{opacity:0; transform:translateY(24px);}

  /* process */
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  @media(max-width:900px){.steps{grid-template-columns:1fr 1fr;}}
  @media(max-width:560px){.steps{grid-template-columns:1fr;}}
  .step-card{
    background:linear-gradient(160deg, var(--card), var(--card-2));
    border:1px solid var(--line); border-radius:22px; padding:28px 24px;
  }
  .step-num{
    font-family:'Space Grotesk'; font-weight:800; font-size:15px; width:36px; height:36px;
    border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:18px;
    background:var(--grad-1); color:#fff;
  }
  .step-card h4{font-size:17px; margin-bottom:10px;}
  .step-card p{font-size:14px; line-height:1.6; color:var(--ink);}

  /* team */
  .team{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
  @media(max-width:900px){.team{grid-template-columns:1fr 1fr;}}
  @media(max-width:560px){.team{grid-template-columns:1fr;}}
  .team-card{
    background:linear-gradient(160deg, var(--card), var(--card-2));
    border:1px solid var(--line); border-radius:22px; padding:22px; text-align:center;
    transition:transform .25s ease, border-color .25s ease;
  }
  .team-card:hover{transform:translateY(-6px); border-color:var(--line-strong);}
  .team-photo{
    width:96px; height:96px; border-radius:50%; margin:0 auto 16px; background-size:cover; background-position:center;
    position:relative;
  }
  .team-photo::after{
    content:''; position:absolute; inset:-4px; border-radius:50%; z-index:-1;
    background:var(--grad-1);
  }
  .team-card h4{font-size:15.5px; margin-bottom:4px;}
  .team-role{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--cyan); margin-bottom:12px;}
  .team-email{font-size:12.5px; color:var(--ink-dim); word-break:break-all;}
  .team-email:hover{color:var(--cyan);}

  /* reviews */
  .reviews-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  @media(max-width:900px){.reviews-grid{grid-template-columns:1fr;}}
  .review-card{
    background:linear-gradient(160deg, var(--card), var(--card-2));
    border:1px solid var(--line); border-radius:22px; padding:28px;
  }
  .review-stars{color:var(--cyan); font-size:15px; letter-spacing:2px; margin-bottom:16px;}
  .review-card p{font-size:14.5px; line-height:1.7; color:var(--ink); margin-bottom:18px;}
  .review-who{display:flex; justify-content:space-between; align-items:center; font-size:13px;}
  .review-who strong{color:#fff; font-weight:700;}
  .review-who span{color:var(--ink-dim); font-family:'IBM Plex Mono'; font-size:11.5px;}

  /* ================================================================
     The blocks below are ported byte-for-byte from the original
     "modern" HTML source files (web rewamp / Version 2) — the extra
     per-page <style> blocks that shipped with the Lender, Home
     Purchase, Refinance, First-Time Buyer, Calculator, Exclusive
     Programs, and FAQ pages. They were dropped during the WordPress
     port, which is why those pages were rendering unstyled. Restored
     here verbatim so every page matches the original design exactly.
     ================================================================ */

  /* extra classes for FAQ/Programs pages (source: *-modern.html) */
  .final{
    background:linear-gradient(160deg, var(--card), var(--card-2));
    border:1px solid var(--line-strong);
    border-radius:28px; padding:52px 44px; text-align:center; position:relative; overflow:hidden;
  }
  .final::before{
    content:''; position:absolute; top:-160px; left:50%; transform:translateX(-50%);
    width:640px; height:320px; border-radius:50%;
    background:radial-gradient(ellipse, rgba(0,229,255,0.18), rgba(202,5,190,0.12) 60%, transparent 75%);
    /* Purely decorative — every other glow/gradient overlay in this
       file has pointer-events:none; this one was missed, so it sat on
       top of whatever content fell in its top ~160px (the .final h2/p/
       .final-actions rules already work around this with z-index:2,
       but the lead-capture forms on Home/Apply/FAQ never got that
       treatment, so their first field row was unclickable — the glow
       was physically intercepting the click). */
    pointer-events:none;
  }
  .final h2{font-size:clamp(28px,3.6vw,42px); position:relative; z-index:2; max-width:600px; margin:0 auto;}
  .final p{margin-top:14px; color:var(--ink); font-size:16px; position:relative; z-index:2; max-width:520px; margin-left:auto; margin-right:auto;}
  .final-actions{display:flex; gap:14px; justify-content:center; margin-top:26px; position:relative; z-index:2; flex-wrap:wrap;}

  .faq{display:flex; flex-direction:column;}
  .banner-img{border-radius:24px; overflow:hidden; aspect-ratio:16/6; box-shadow:0 24px 50px -20px rgba(0,0,0,0.6); border:1px solid var(--line-strong);}
  .banner-img img{width:100%; height:100%; object-fit:cover; display:block;}

  .step{
    background:linear-gradient(160deg, var(--card), var(--card-2));
    border:1px solid var(--line); border-radius:22px; padding:28px 24px;
  }
  .step-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
  .step-time{font-family:'IBM Plex Mono'; font-size:11px; color:var(--cyan);}
  .step h3{font-size:17px; margin-bottom:10px;}
  .step p{font-size:14px; line-height:1.6; color:var(--ink);}
  .process{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  @media(max-width:900px){.process{grid-template-columns:1fr 1fr;}}
  @media(max-width:560px){.process{grid-template-columns:1fr;}}

  /* step image (Exclusive Programs page) */
  .step-img{border-radius:14px; overflow:hidden; aspect-ratio:4/3; margin-bottom:18px; border:1px solid var(--line-strong); position:relative;}
  .step-img img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(0.9) brightness(0.85);}
  .step-img::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(5,6,15,0.55));}

  /* extra classes for Lender/Purchase-Loans/Refinance/First-Time-Buyer/Calculator pages */
  .stat-strip{display:flex; flex-wrap:wrap; gap:36px; margin-top:44px;}
  .stat-num{font-family:'Space Grotesk'; font-size:32px; font-weight:800; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .stat-lbl{font-size:12.5px; color:var(--ink-dim); margin-top:4px; max-width:140px;}

  .svc-tabs{display:flex; flex-wrap:wrap; gap:10px; margin-top:40px; border-top:1px solid var(--line); padding-top:24px;}
  .svc-tab{font-size:13.5px; font-weight:600; padding:9px 16px; border-radius:100px; border:1px solid var(--line-strong); color:var(--ink); opacity:0.8; transition:all .2s ease;}
  .svc-tab:hover{border-color:var(--cyan); color:var(--cyan); opacity:1;}
  .svc-tab.current{background:var(--grad-1); border-color:transparent; color:#fff; opacity:1;}

  .why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
  @media(max-width:900px){.why-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:560px){.why-grid{grid-template-columns:1fr;}}
  .why-card{
    background:linear-gradient(160deg, var(--card), var(--card-2));
    border:1px solid var(--line); border-radius:22px; padding:28px 24px;
  }
  .why-ico{font-size:28px; margin-bottom:16px;}
  .why-card h4{font-size:16.5px; margin-bottom:10px;}
  .why-card p{font-size:14px; line-height:1.6; color:var(--ink);}

  .check-list{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:16px 32px; max-width:900px;}
  @media(max-width:700px){.check-list{grid-template-columns:1fr;}}
  .check-list li{position:relative; padding-left:30px; font-size:15px; line-height:1.6; color:var(--ink);}
  .check-list li::before{
    content:''; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%;
    background:var(--grad-1);
  }
  .check-list li::after{
    content:''; position:absolute; left:6px; top:7px; width:6px; height:10px;
    border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg);
  }

  .reviews-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  @media(max-width:900px){.reviews-strip{grid-template-columns:1fr;}}
  .reviews-strip .review-card .stars{color:var(--cyan); font-size:15px; letter-spacing:2px; margin-bottom:16px;}
  .reviews-strip .review-card blockquote{font-size:14.5px; line-height:1.7; color:var(--ink); margin-bottom:18px; font-style:normal;}
  .reviews-strip .review-who{display:flex; flex-direction:column; font-size:13px;}
  .reviews-strip .review-who .name{color:#fff; font-weight:700;}
  .reviews-strip .review-who .loc{color:var(--ink-dim); font-family:'IBM Plex Mono'; font-size:11.5px; margin-top:2px;}

  .team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
  @media(max-width:900px){.team-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:560px){.team-grid{grid-template-columns:1fr;}}

  /* common mistakes list (First-Time Buyer/Refinance/Calculator pages) */
  .mistake-list{counter-reset:mistake; margin-top:8px;}
  .mistake-item{display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line);}
  .mistake-num{
    counter-increment:mistake; font-family:'IBM Plex Mono'; font-weight:700; font-size:13px; color:#fff;
    background:var(--grad-1); width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .mistake-num::before{content:counter(mistake);}
  .mistake-item h4{font-size:16px; margin-bottom:6px;}
  .mistake-item p{font-size:14px; color:var(--ink); line-height:1.6;}

  /* full-page mortgage calculator */
  .calc-page-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:start;}
  @media(max-width:900px){.calc-page-grid{grid-template-columns:1fr;}}
  .calc-full{
    background:linear-gradient(160deg, var(--card), var(--card-2));
    border:1px solid var(--line-strong); border-radius:22px; padding:30px;
    box-shadow:0 30px 70px rgba(0,0,0,0.5); position:relative;
  }
  .calc-full::before{
    content:""; position:absolute; inset:0; padding:1px; border-radius:22px;
    background:var(--grad-1); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; opacity:0.5; pointer-events:none;
  }
  .calc-toggle-row{display:flex; align-items:center; justify-content:space-between; margin-top:4px; margin-bottom:18px; padding-top:16px; border-top:1px solid var(--line);}
  .calc-toggle-row label{font-size:13.5px; font-weight:600; color:var(--ink);}
  .switch{position:relative; width:42px; height:24px; flex-shrink:0;}
  .switch input{opacity:0; width:0; height:0;}
  .switch-slider{position:absolute; inset:0; background:var(--line-strong); border-radius:100px; cursor:pointer; transition:.2s;}
  .switch-slider::before{content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,0.3);}
  .switch input:checked + .switch-slider{background:var(--grad-1);}
  .switch input:checked + .switch-slider::before{transform:translateX(18px);}
  .breakdown-row{display:flex; justify-content:space-between; padding:9px 0; font-size:13.5px; color:var(--ink); border-bottom:1px solid var(--line);}
  .breakdown-row.total{font-weight:700; font-size:15px; border-bottom:none; padding-top:14px; color:#fff;}
  .amort-summary{display:grid; grid-template-columns:1fr; max-width:220px; gap:16px; margin-top:20px;}
  .amort-box{background:rgba(0,0,0,0.35); border:1px solid var(--line); border-radius:14px; padding:16px; text-align:center;}
  .amort-box .n{font-family:'IBM Plex Mono'; font-weight:700; font-size:19px; color:#fff;}
  .amort-box .l{font-size:11.5px; color:var(--ink-dim); margin-top:4px;}
  .calc-side-card{background:linear-gradient(160deg, var(--card), var(--card-2)); border:1px solid var(--line); border-radius:22px; padding:26px; margin-bottom:20px;}
  .calc-side-card.dark{background:var(--grad-1); border:none;}
  .calc-side-card.dark h3, .calc-side-card.dark .eyebrow{color:#fff;}
  .calc-side-card.dark p{color:rgba(255,255,255,0.9);}

  /* ---------- CONTACT PAGE ----------
     Note: the original source HTML has this exact same gap (contact
     form markup with no matching CSS anywhere in its stylesheet), so
     this section is filled in here using the theme's own established
     "dark card" and form-field look (identical values to the .dark
     side-card above, and to the inline-styled quick-contact forms
     used elsewhere on Home/Apply/FAQ) rather than any new design. */
  .contact-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:32px; align-items:start;}
  @media(max-width:900px){.contact-grid{grid-template-columns:1fr;}}
  .contact-card{
    background:linear-gradient(160deg, var(--card), var(--card-2)); border:1px solid var(--line-strong);
    border-radius:22px; padding:30px; box-shadow:0 30px 70px rgba(0,0,0,0.5);
  }
  .contact-side-card{background:linear-gradient(160deg, var(--card), var(--card-2)); border:1px solid var(--line); border-radius:22px; padding:26px; margin-bottom:20px;}
  .contact-side-card:last-child{margin-bottom:0;}
  .contact-side-card.dark{background:var(--grad-1); border:none;}
  .contact-side-card.dark h3, .contact-side-card.dark .eyebrow{color:#fff;}
  .contact-side-card.dark p, .contact-side-card.dark a{color:rgba(255,255,255,0.9);}
  .contact-side-card.dark a:hover{color:#fff;}

  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  @media(max-width:480px){.field-row{grid-template-columns:1fr;}}
  .field{margin-bottom:16px;}
  .field label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:8px;}
  .contact-card input, .contact-card select, .contact-card textarea{
    width:100%; padding:11px 13px; border-radius:9px; font-family:inherit; font-size:14px;
    background:rgba(255,255,255,0.04); border:1px solid var(--line-strong); color:#fff;
    /* Forces these above anything that might be stacking over part of
       the form (same class of bug as .final::before, which silently
       intercepted clicks despite being visually harmless). Belt-and-
       suspenders: guarantees the field is clickable regardless of
       what's painting near it. */
    position:relative; z-index:5; pointer-events:auto;
  }
  .contact-card select{
    appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238489B3' stroke-width='1.6' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center;
  }
  /* The closed <select> box picks up the dark theme above via its own
     background/color, but the native open-dropdown popup is rendered
     by the OS/browser, not this stylesheet — it ignores the box's
     translucent background yet still inherits color:#fff from the
     select, which left every option as white text on a white popup.
     Options need their own explicit dark-on-light styling. */
  .contact-card select option{
    color:#15161c; background:#fff;
  }
  .contact-card textarea{resize:vertical; min-height:100px;}
  .contact-card input:focus, .contact-card select:focus, .contact-card textarea:focus{
    outline:none; border-color:var(--cyan); background:rgba(0,229,255,0.05);
  }
  .form-success{display:none;}
  .form-success h3{font-size:20px; margin-bottom:8px;}
  .form-success p{color:var(--ink); font-size:14.5px;}

  /* Honeypot field for the lead forms' anti-bot check (Lower Mortgage
     Core's REST endpoint rejects the submission if this is non-empty).
     Positioned off-screen rather than display:none/visibility:hidden —
     some bots skip inputs that are hidden that way but still fill in
     ones that are merely positioned outside the viewport. */
  .hp-field{
    position:absolute; left:-9999px; top:-9999px;
    width:1px; height:1px; overflow:hidden;
  }
