/* ============================================================
   Angie Clayson | UMortgage
   Built to the UMortgage Brand Guidelines (2024)
   - Fonts:  HK Nova      -> Hanken Grotesk (same foundry, Hanken Design Co.)
             Hepta Slab   -> Hepta Slab (exact)
   - Colour: primary navy/purple, secondary mint/grey (max 2 at once)
   - Gradients: max one gradient per graphic
   - Strokes: thin, <= 4pt @1920
   - B2C audience => lighter palette
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Primary */
  --navy:      #000A35;
  --purple:    #7549EA;
  /* Secondary (never more than two in play at once: mint + grey) */
  --mint:      #71ECCA;
  --grey:      #9E9E9E;
  --magenta:   #AB57ED;   /* gradient partner only */

  /* Brand tints (from guidelines p.10) */
  --navy-75:   #404767;
  --navy-65:   #59607C;
  --navy-45:   #8C91A4;
  --navy-25:   #BFC2CC;
  --purple-75: #9776EF;
  --purple-45: #C1ADF6;
  --purple-25: #E3DBFB;
  --mint-45:   #BFF6E7;
  --mint-25:   #DBFAF2;
  --grey-25:   #E7E7E7;

  /* Surfaces */
  --paper:     #FFFFFF;
  --lav:       #F7F5FF;
  --lav-deep:  #EFEBFE;

  /* Type */
  --sans: 'Hanken Grotesk', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --slab: 'Hepta Slab', 'Rockwell', Georgia, serif;

  /* Rhythm */
  --pad: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1200px;
  --r-sm: 10px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --shadow-sm: 0 2px 8px rgba(0, 10, 53, .06);
  --shadow:    0 14px 40px -18px rgba(0, 10, 53, .28);
  --shadow-lg: 0 40px 90px -40px rgba(0, 10, 53, .45);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* clip (not hidden) so nothing widens the document — and so the fixed header
     keeps sizing to the viewport — without turning html into a scroll container
     that would break the sticky/fixed behaviour. */
  overflow-x: clip;
}
body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--navy);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.06; letter-spacing: -.025em; font-weight: 800; }
p  { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: .9rem 1.4rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* ---------- 3. Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { position: relative; padding-block: clamp(4.5rem, 9vw, 8.5rem); }
.section--tight { padding-block: clamp(3.5rem, 6vw, 5.5rem); }

.eyebrow {
  font-family: var(--slab);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--purple);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px;
}
.on-dark .eyebrow { color: var(--mint); }

h2.h {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.65rem);
  max-width: 20ch;
}
h3.h3 { font-size: clamp(1.2rem, 1.05rem + .55vw, 1.45rem); letter-spacing: -.015em; }
.lede {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem);
  color: var(--navy-65);
  max-width: 58ch;
  margin-top: 1.35rem;
  font-weight: 400;
}
.on-dark .lede { color: rgba(255,255,255,.72); }

/* Hepta Slab accent inside headlines — per guidelines, accents only, never the whole headline */
/* Emphasis by FORM, not colour — which is exactly what the brand guidelines say
   Hepta Slab is for ("highlight certain words within a headline"). Colour stays
   reserved for actions and the arch. Mint is kept on the two dark sections,
   where it's the only colour and carries real hierarchy. */
.accent { font-family: var(--slab); font-weight: 800; font-style: normal; }
.accent--mint { color: var(--mint); }

.head-row {
  display: flex; flex-wrap: wrap; gap: 2rem 3rem;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
/* headline column takes the slack; the trailing note holds a fixed measure so
   the two sit side by side instead of stacking at every width */
.head-row > :first-child { flex: 1 1 28rem; min-width: 0; }
.head-row > :last-child:not(:first-child) { flex: 0 1 22rem; }
/* self-sizing trailing elements keep their natural width (needs :last-child to
   out-specify the rule above) */
.head-row > .btn:last-child,
.head-row > .gbadge:last-child { flex: 0 0 auto; }

/* ---------- 4. Buttons ---------- */
.btn {
  --bg: var(--purple); --fg: #fff;
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--slab); font-weight: 600; font-size: .9375rem; letter-spacing: .01em;
  padding: .95rem 1.6rem; border: 0; border-radius: 999px;
  background: var(--bg); color: var(--fg);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s;
  box-shadow: 0 10px 26px -12px rgba(117, 73, 234, .8);
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; flex: none; transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(117, 73, 234, .85); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0); }

/* the single approved gradient, used only on the primary CTA */
.btn--grad { background: linear-gradient(105deg, var(--purple) 0%, var(--magenta) 100%); }

.btn--ghost {
  background: transparent; color: var(--navy);
  box-shadow: inset 0 0 0 1.5px var(--navy-25);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--purple); background: var(--purple-25); }
.on-dark .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.on-dark .btn--ghost:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px var(--mint); }

.btn--mint { background: var(--mint); color: var(--navy); box-shadow: 0 10px 26px -12px rgba(113,236,202,.9); }
.btn--mint:hover { box-shadow: 0 18px 34px -14px rgba(113,236,202,.95); }
.btn--lg { padding: 1.1rem 2rem; font-size: 1rem; }

/* ---------- 5. Brand background elements ----------
   Guidelines allow max TWO background elements at once:
   thin organic lines + floating circles.                    */
.bg-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bg-art > * { position: absolute; }
.bg-line { stroke: var(--purple); stroke-width: 1.5; fill: none; opacity: .3; }
.on-dark .bg-line { stroke: var(--mint); opacity: .28; }
.dot {
  border-radius: 50%;
  border: 1.5px solid var(--purple);
  opacity: .45;
}
.dot--mint  { border-color: var(--mint); }
.dot--fill  { background: var(--purple); border: 0; opacity: .3; }
.on-dark .dot { opacity: .5; }

/* grain — "grain can be applied to background to create texture and authenticity" */
.grain::after {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  opacity: .38; pointer-events: none; z-index: 1;
  mix-blend-mode: multiply;
}
.on-dark.grain::after { mix-blend-mode: overlay; opacity: .2; }

/* ---------- 6. Header / nav ---------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
  padding-block: .85rem;
}
.hdr.is-stuck {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(1.7) blur(16px);
  -webkit-backdrop-filter: saturate(1.7) blur(16px);
  box-shadow: 0 1px 0 rgba(0, 10, 53, .07), 0 10px 30px -22px rgba(0, 10, 53, .5);
}
.hdr__in { display: flex; align-items: center; gap: 1.25rem; }

.brand { display: flex; align-items: center; gap: .85rem; flex: 0 1 auto; min-width: 0; }
.brand__name {
  display: block;
  font-size: 1.075rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
  white-space: nowrap;
}
.brand__sub {
  display: block;
  font-family: var(--slab); font-size: .625rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--navy-45); font-weight: 600; line-height: 1.3;
  white-space: nowrap;
}
@media (max-width: 380px) { .brand__sub { letter-spacing: .08em; font-size: .58rem; } }
.brand__mark { width: 38px; height: 38px; flex: none; }

.nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
/* :not(.btn) so the drawer's CTA buttons keep their own colours */
.nav a:not(.btn) {
  position: relative; padding: .55rem .8rem; border-radius: 999px;
  font-size: .9rem; font-weight: 500; color: var(--navy-65);
  white-space: nowrap;
  transition: color .25s, background-color .25s;
}
.nav a:not(.btn):hover { color: var(--navy); background: var(--purple-25); }
.nav a.is-active { color: var(--purple); font-weight: 600; }
.nav a.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: .24rem; translate: -50% 0;
  width: 16px; height: 2px; border-radius: 2px; background: var(--purple);
}

.hdr__cta { display: flex; align-items: center; gap: .6rem; flex: none; }
.hdr__tel {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .9rem; padding: .5rem .5rem;
}
.hdr__tel svg { width: 15px; height: 15px; color: var(--purple); }
.hdr__tel:hover { color: var(--purple); }

.burger {
  display: none; width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: var(--purple-25); flex: none;
  /* place-content (not place-items) so the three rows pack tight and the
     ±6px arm translations actually converge into an X */
  place-content: center; justify-items: center;
}
.burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--navy);
  transition: transform .35s var(--ease), opacity .2s;
}
.burger span + span { margin-top: 4px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* the phone number is the first thing to go when the bar gets tight */
@media (max-width: 1340px) { .hdr__tel { display: none; } }

@media (max-width: 1100px) {
  .burger { display: grid; margin-left: auto; }
  .hdr__cta { display: none; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(360px, 86vw);
    background: var(--paper); flex-direction: column; align-items: stretch;
    justify-content: center; gap: .25rem; padding: 5rem 2rem 2rem; margin: 0;
    transform: translateX(102%); transition: transform .5s var(--ease);
    box-shadow: var(--shadow-lg); overflow-y: auto;
  }
  body.menu-open .nav { transform: none; }
  .nav a:not(.btn) { padding: .9rem 1rem; font-size: 1.1rem; font-weight: 600; color: var(--navy); }
  .nav a.is-active::after { display: none; }
  .nav__mob { display: flex !important; flex-direction: column; gap: .7rem; margin-top: 1.5rem; }
  .nav__mob .btn { width: 100%; }
}
.nav__mob { display: none; }

.scrim {
  position: fixed; inset: 0; z-index: 99; background: rgba(0, 10, 53, .45);
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
  backdrop-filter: blur(2px);
}
body.menu-open .scrim { opacity: 1; visibility: visible; }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  padding-top: clamp(7.5rem, 13vw, 10.5rem);
  padding-bottom: 0;   /* the portrait fades out flush against the marquee */
  background:
    radial-gradient(1100px 620px at 88% 6%, var(--purple-25) 0%, rgba(227,219,251,0) 62%),
    radial-gradient(760px 520px at 4% 92%, var(--mint-25) 0%, rgba(219,250,242,0) 60%),
    linear-gradient(180deg, var(--lav) 0%, #FFFFFF 88%);
  overflow: hidden;
}
.hero__grid {
  display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(2rem, 4vw, 4rem);
  align-items: end; position: relative; z-index: 2;
}
.hero__copy { padding-bottom: clamp(3rem, 6vw, 5.5rem); }
/* narrower measure keeps the paragraph clear of the evidence card */
.hero__copy .lede { max-width: 46ch; }

.pill {
  display: inline-flex; align-items: center; gap: .6rem;
  background: rgba(255, 255, 255, .8);
  box-shadow: inset 0 0 0 1px rgba(117, 73, 234, .22), var(--shadow-sm);
  backdrop-filter: blur(8px);
  border-radius: 999px; padding: .45rem 1rem .45rem .5rem;
  font-size: .82rem; font-weight: 600; color: var(--navy-65);
  margin-bottom: 1.6rem;
}
.pill__stars { display: inline-flex; gap: 1px; color: #F5A623; }
.pill__stars svg { width: 13px; height: 13px; }
.pill b { color: var(--navy); font-weight: 800; }
.pill__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--navy-25); }

h1.hero__h {
  font-size: clamp(2.65rem, 1.1rem + 6.4vw, 5.1rem);
  letter-spacing: -.04em; line-height: .98;
}
h1.hero__h .l { display: block; overflow: hidden; }
h1.hero__h .l > span { display: block; }

.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }

/* portrait */
.hero__figure { position: relative; align-self: end; }
/* The stage holds blob + ring + cutout and fades them into the page, so the
   photo's straight bottom crop never reads as a hard rectangle edge. */
.hero__stage {
  position: relative;
  /* soft at the top too: the source photo crops her hair flat, and the
     drop-shadow would otherwise draw a band along that straight edge */
  /* Only the top needs softening now (the photo crops her hair flat). The rate
     strip sits flush under the hero and covers the bottom crop, so she can stay
     solid all the way down instead of dissolving inside the arch. */
  --fade: linear-gradient(to bottom,
            rgba(0,0,0,.25) 0%, rgba(0,0,0,.8) 2%, #000 5%,
            #000 94%, rgba(0,0,0,.55) 99%, transparent 100%);
  -webkit-mask-image: var(--fade);
          mask-image: var(--fade);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
}
/* THE ARCH — the page's signature form.
   A doorway: the threshold you cross when you buy a house. Flat, not gradient;
   a shape that means something rather than an amorphous blob that doesn't. */
.hero__arch {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  width: 116%; height: 88%; z-index: -1;
  background: var(--purple);
  border-radius: 999px 999px 0 0;
}
/* echoed once as a thin stroke — the brand's hairline language */
.hero__arch--line {
  width: 138%; height: 99%;
  background: none;
  border: 1.5px solid var(--purple-45);
  border-bottom: 0;
}
.hero__img {
  position: relative; width: 100%; max-width: 520px; margin-inline: auto;
  display: block; filter: drop-shadow(0 26px 38px rgba(0, 10, 53, .22));
}

/* One piece of evidence, not two pieces of decoration. Solid stock, hairline
   rule, no blur and no bobbing — it should read as something clipped to a file,
   not as a floating UI chip. */
.filecard {
  position: absolute; z-index: 3; left: -11%; bottom: 15%;
  width: min(262px, 64%); margin: 0;
  background: var(--paper);
  border-radius: var(--r-sm);
  box-shadow: 0 18px 44px -22px rgba(0, 10, 53, .5);
  padding: 1.15rem 1.25rem 1rem;
}
.filecard blockquote {
  margin: 0; font-size: .9rem; line-height: 1.52; font-weight: 500; letter-spacing: -.005em;
  text-wrap: pretty;
}
.filecard figcaption {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin-top: .85rem; padding-top: .8rem;
  border-top: 1px solid rgba(0, 10, 53, .12);
}
.filecard__who { font-size: .8rem; font-weight: 700; }
.filecard__meta {
  font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy-45); margin-left: auto;
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__figure { max-width: 440px; margin-inline: auto; width: 100%; }
  .filecard { left: -4%; bottom: 12%; }
  /* the doorway narrows with the column instead of running off the page */
  .hero__arch      { width: 106%; height: 86%; }
  .hero__arch--line{ width: 122%; height: 96%; }
}
@media (max-width: 520px) {
  .filecard { padding: .85rem .95rem .8rem; width: min(210px, 64%); }
  .filecard blockquote { font-size: .8rem; }
}

/* ---------- 8. Rate strip ----------
   Was a scrolling band of loan-type keywords, which encoded nothing the Loans
   section doesn't say better 400px later. Now it carries the five figures a
   buyer is actually trying to find out. */
.ratestrip { background: var(--navy); color: #fff; padding-block: 2.1rem; }
.ratestrip ul {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: rgba(255, 255, 255, .14);
}
.ratestrip li {
  background: var(--navy); padding: .1rem 1.4rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.ratestrip li:first-child { padding-left: 0; }
.ratestrip b {
  font-family: var(--slab); font-weight: 800;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.ratestrip span {
  font-size: .78rem; line-height: 1.4; color: rgba(255, 255, 255, .62);
  font-weight: 500; text-wrap: pretty;
}
.ratestrip .u { color: var(--mint); }
@media (max-width: 900px) {
  .ratestrip ul { grid-template-columns: repeat(2, 1fr); }
  .ratestrip li { padding: 1rem 1.2rem; }
  .ratestrip li:first-child { padding-left: 1.2rem; }
}
@media (max-width: 460px) { .ratestrip ul { grid-template-columns: 1fr; } }

/* marquee keyframe is still used by the review wall */
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- 9. About ---------- */
.about__grid {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.about__figure { position: relative; }
.about__photo {
  /* same doorway as the hero, so the arch reads as the page's form, not a one-off */
  border-radius: 999px 999px var(--r-sm) var(--r-sm);
  overflow: hidden; position: relative; z-index: 2;
  box-shadow: var(--shadow-lg);
  background: var(--lav-deep);
}
.about__photo img { width: 100%; height: auto; }
.about__figure::before {
  content: ""; position: absolute; z-index: 1;
  inset: -18px -18px 42px -18px;
  border: 1.5px solid var(--purple-45);
  border-radius: 999px 999px var(--r) var(--r);
  opacity: .7;
}
.about__stamp {
  position: absolute; z-index: 3; right: -14px; bottom: 26px;
  background: var(--navy); color: #fff; border-radius: var(--r);
  padding: 1rem 1.2rem; box-shadow: var(--shadow);
  max-width: 200px;
}
.about__stamp b { font-family: var(--slab); font-size: 1.5rem; display: block; color: var(--mint); line-height: 1; }
.about__stamp span { font-size: .74rem; color: rgba(255,255,255,.7); font-weight: 600; letter-spacing: .04em; }

.pillars { display: grid; gap: 1px; margin-top: 2.5rem; background: rgba(0,10,53,.1); border-radius: var(--r); overflow: hidden; }
.pillar { background: var(--paper); padding: 1.4rem 1.5rem; display: flex; gap: 1.1rem; align-items: flex-start; }
.pillar .ico {
  width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: var(--purple-25); color: var(--purple);
}
.pillar .ico svg { width: 21px; height: 21px; }
.pillar h3 { font-size: 1.02rem; margin-bottom: .25rem; font-weight: 800; }
.pillar p { margin: 0; font-size: .92rem; color: var(--navy-65); line-height: 1.55; }

.sig {
  font-family: var(--slab); font-weight: 400; font-style: italic;
  font-size: 1.15rem; color: var(--navy-65); margin-top: 2rem;
}
.sig b { display: block; font-style: normal; font-weight: 800; color: var(--navy); font-size: .95rem; letter-spacing: .02em; margin-top: .3rem; }

@media (max-width: 880px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__figure { max-width: 400px; margin-inline: auto; }
}

/* ---------- 10. Loan options ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

.card {
  position: relative; overflow: hidden;
  background: var(--paper); border-radius: var(--r-lg);
  padding: 2rem 1.9rem 1.9rem;
  box-shadow: inset 0 0 0 1px rgba(0, 10, 53, .09);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  display: flex; flex-direction: column;
}
.card::before {
  content: ""; position: absolute; inset: auto -30% -60% auto;
  width: 220px; height: 220px; border-radius: 50%;
  background: var(--purple-25);
  opacity: 0; transition: opacity .45s var(--ease), transform .6s var(--ease);
  transform: scale(.6);
}
.card:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(117,73,234,.3), var(--shadow); }
.card:hover::before { opacity: .55; transform: scale(1); }
.card > * { position: relative; z-index: 1; }
.card .ico {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: var(--navy); color: var(--mint); margin-bottom: 1.4rem;
  transition: background-color .4s, color .4s;
}
.card:hover .ico { background: var(--purple); color: #fff; }
.card .ico svg { width: 25px; height: 25px; }
.card h3 { margin-bottom: .6rem; }
.card p { font-size: .93rem; color: var(--navy-65); line-height: 1.6; margin-bottom: 1.3rem; }
.card .tag {
  margin-top: auto; font-family: var(--slab); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--purple);
  display: inline-flex; align-items: center; gap: .45rem;
}
.card .tag svg { width: 13px; height: 13px; transition: transform .35s var(--ease); }
.card:hover .tag svg { transform: translateX(4px); }

/* ---------- 11. Process ---------- */
.process { background: var(--navy); color: #fff; overflow: hidden; }
.on-dark { color: #fff; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; position: relative; z-index: 2; }
.steps::before {
  content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 1.5px;
  background: linear-gradient(90deg, var(--purple), var(--mint));
  transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 1.4s var(--ease);
}
.step__n {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28);
  color: var(--mint); position: relative; z-index: 2;
  margin-bottom: 1.4rem; transition: background-color .4s, box-shadow .4s, color .4s;
}
.step__n svg { width: 24px; height: 24px; }
.step.is-in .step__n { background: var(--purple); color: #fff; box-shadow: 0 0 0 6px rgba(117,73,234,.18); }
.step h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.step p { font-size: .92rem; color: rgba(255,255,255,.68); line-height: 1.6; margin: 0; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr 1fr; gap: 2.2rem 1.5rem; }
  .steps::before { display: none; }
}
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- 12. Calculator ---------- */
.calc { background: var(--lav); }
.calc__shell {
  display: grid; grid-template-columns: 1.15fr .85fr;
  background: var(--paper); border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.calc__inputs { padding: clamp(1.75rem, 3.5vw, 3rem); }
.calc__out {
  background: var(--navy); color: #fff; padding: clamp(1.75rem, 3.5vw, 3rem);
  display: flex; flex-direction: column; position: relative; overflow: hidden;
}
@media (max-width: 900px) { .calc__shell { grid-template-columns: 1fr; } }

.field { margin-bottom: 1.6rem; }
.field:last-child { margin-bottom: 0; }
.field__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .6rem; }
.field label { font-weight: 600; font-size: .9rem; }
.field__val {
  font-family: var(--slab); font-weight: 800; font-size: 1.05rem; color: var(--purple);
  font-variant-numeric: tabular-nums;
}
.field__hint { font-size: .75rem; color: var(--navy-45); font-weight: 600; }

input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px;
  background: transparent; cursor: grab; margin: 0; display: block;
}
input[type="range"]:active { cursor: grabbing; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--purple) var(--fill, 50%), var(--grey-25) var(--fill, 50%));
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--grey-25); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--purple); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; margin-top: -8px;
  background: #fff; box-shadow: 0 0 0 2px var(--purple), 0 4px 10px rgba(0,10,53,.22);
  transition: transform .2s var(--ease);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.14); }
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 2px var(--purple), 0 4px 10px rgba(0,10,53,.22);
}

.seg { display: flex; gap: .4rem; background: var(--grey-25); padding: .28rem; border-radius: 999px; }
.seg button {
  flex: 1; border: 0; background: transparent; border-radius: 999px; padding: .5rem .4rem;
  font-family: var(--slab); font-weight: 600; font-size: .82rem; color: var(--navy-65);
  transition: background-color .3s, color .3s, box-shadow .3s;
}
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--navy); box-shadow: var(--shadow-sm); }

.calc__total { position: relative; z-index: 2; }
.calc__total .lbl {
  font-family: var(--slab); font-size: .78rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mint); font-weight: 600;
}
.calc__total .amt {
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4rem); font-weight: 800; letter-spacing: -.04em;
  line-height: 1.05; font-variant-numeric: tabular-nums; margin-top: .35rem;
}
.calc__total .amt small { font-size: .3em; font-weight: 600; color: rgba(255,255,255,.55); letter-spacing: 0; }

.bd { margin-top: 2rem; position: relative; z-index: 2; }
.bd__row {
  display: flex; align-items: center; gap: .8rem; padding: .62rem 0;
  border-bottom: 1px solid rgba(255,255,255,.1); font-size: .9rem;
}
.bd__row:last-child { border-bottom: 0; }
.bd__sw { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.bd__row span { color: rgba(255,255,255,.72); }
.bd__row b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }

/* Stacked share bar. Each segment is a full-width layer positioned and sized
   purely with transforms (translateX + scaleX) so dragging a slider never
   triggers layout — only compositing. */
.calc__bar {
  position: relative; z-index: 2; height: 10px; border-radius: 999px;
  overflow: hidden; margin-top: 1.5rem; background: rgba(255, 255, 255, .12);
}
.calc__bar i {
  position: absolute; inset: 0; display: block; transform-origin: left center;
  transform: translateX(calc(var(--x, 0) * 100%)) scaleX(var(--w, 0));
  transition: transform .5s var(--ease);
  will-change: transform;
}

.calc__note {
  margin-top: auto; padding-top: 1.8rem; font-size: .72rem; line-height: 1.55;
  color: rgba(255,255,255,.62); position: relative; z-index: 2;
}
.calc__out .btn { margin-top: 1.6rem; position: relative; z-index: 2; align-self: flex-start; }

/* ---------- 13. Reviews ---------- */
.rev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; }
.gbadge {
  display: flex; align-items: center; gap: .9rem;
  background: var(--paper); border-radius: var(--r); padding: .9rem 1.3rem;
  box-shadow: inset 0 0 0 1px rgba(0,10,53,.1), var(--shadow-sm);
}
.gbadge__score { font-family: var(--slab); font-size: 2rem; font-weight: 800; line-height: 1; }
.gbadge__meta { font-size: .78rem; color: var(--navy-45); font-weight: 600; }
.gbadge .pill__stars svg { width: 15px; height: 15px; }

.rev-rows { display: grid; gap: 1.25rem; overflow: hidden; margin-top: 1rem; }
.rev-row { display: flex; gap: 1.25rem; width: max-content; }
.rev-row--a { animation: slide 66s linear infinite; }
.rev-row--b { animation: slide 66s linear infinite reverse; }
.rev-rows:hover .rev-row { animation-play-state: paused; }

.rev {
  width: 370px; flex: none; background: var(--paper); border-radius: var(--r-lg);
  padding: 1.6rem 1.7rem; box-shadow: inset 0 0 0 1px rgba(0,10,53,.09);
  display: flex; flex-direction: column;
}
.rev__stars { color: #F5A623; display: flex; gap: 2px; margin-bottom: .85rem; }
.rev__stars svg { width: 15px; height: 15px; }
.rev p { font-size: .935rem; line-height: 1.62; margin-bottom: 1.1rem; }
.rev__who { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.rev__av {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--purple-25); color: var(--purple); font-weight: 800; font-size: .85rem;
}
.rev__who b { font-size: .88rem; display: block; line-height: 1.3; }
.rev__who span { font-size: .74rem; color: var(--navy-45); font-weight: 600; }
.rev__reply {
  margin-top: 1.1rem; padding: .9rem 1rem; border-radius: 14px;
  background: var(--lav); font-size: .84rem; line-height: 1.55; color: var(--navy-65);
}
.rev__reply b {
  display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem;
  color: var(--purple); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  font-family: var(--slab); font-weight: 600;
}
.rev__reply b svg { width: 12px; height: 12px; flex: none; }

.fade-x { position: relative; }
.fade-x::before, .fade-x::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(48px, 11vw, 170px); z-index: 3; pointer-events: none;
}
.fade-x::before { left: 0;  background: linear-gradient(90deg, var(--lav), rgba(247,245,255,0)); }
.fade-x::after  { right: 0; background: linear-gradient(270deg, var(--lav), rgba(247,245,255,0)); }

/* ---------- 14. Instagram / learn ---------- */
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
@media (max-width: 950px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }
.ig-tile {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.4rem; color: #fff; isolation: isolate;
  background: var(--navy);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.ig-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.ig-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--purple);
  opacity: 0; transition: opacity .45s var(--ease);
}
.ig-tile:hover::before { opacity: 1; }
/* the follow card isn't an article — purple marks it as an action, like the CTAs */
.ig-tile--ig { background: var(--purple); }
.ig-tile--ig .ig-tile__k { color: rgba(255, 255, 255, .78); }
.ig-tile--ig::before { background: #6438DD; }
.ig-tile__k {
  font-family: var(--slab); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mint); font-weight: 600; margin-bottom: auto;
}
.ig-tile:hover .ig-tile__k { color: #fff; }
.ig-tile h3 { font-size: 1.18rem; line-height: 1.2; margin-bottom: .45rem; }
.ig-tile p { font-size: .84rem; color: rgba(255,255,255,.68); margin: 0; line-height: 1.5; }
.ig-tile:hover p { color: rgba(255,255,255,.85); }
.ig-tile__go {
  position: absolute; top: 1.3rem; right: 1.3rem; width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.1); transition: background-color .4s, transform .4s var(--ease);
}
.ig-tile:hover .ig-tile__go { background: rgba(255,255,255,.22); transform: rotate(45deg); }
.ig-tile__go svg { width: 15px; height: 15px; }

/* ---------- 15. FAQ ---------- */
.faq { display: grid; gap: .8rem; max-width: 860px; }
.q {
  background: var(--paper); border-radius: var(--r);
  box-shadow: inset 0 0 0 1px rgba(0,10,53,.1);
  overflow: hidden; transition: box-shadow .35s;
}
.q[open] { box-shadow: inset 0 0 0 1.5px var(--purple-45), var(--shadow-sm); }
.q summary {
  list-style: none; cursor: pointer; padding: 1.25rem 1.5rem;
  display: flex; align-items: center; gap: 1.2rem;
  font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em;
}
.q summary::-webkit-details-marker { display: none; }
.q summary::after {
  content: ""; margin-left: auto; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--purple); border-bottom: 2px solid var(--purple);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform .35s var(--ease);
}
.q[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.q__body { padding: 0 1.5rem 1.4rem; }
.q__body p { font-size: .95rem; color: var(--navy-65); line-height: 1.65; margin: 0; }
.q__body p + p { margin-top: .8rem; }

/* ---------- 16. CTA ---------- */
.cta { position: relative; overflow: hidden; background: var(--navy); color: #fff; }
.cta__in { position: relative; z-index: 2; text-align: center; display: grid; justify-items: center; }
.cta h2 { font-size: clamp(2.2rem, 1.2rem + 4vw, 4.2rem); max-width: 16ch; }
.cta .lede { margin-inline: auto; text-align: center; }
.cta__btns { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2.3rem; }
.cta__ways {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  margin-top: 3.5rem; width: 100%; max-width: 840px;
  background: rgba(255,255,255,.14); border-radius: var(--r-lg); overflow: hidden;
}
.way {
  background: var(--navy); padding: 1.6rem 1.4rem; text-align: left;
  display: flex; flex-direction: column; gap: .35rem;
  transition: background-color .35s;
}
.way:hover { background: #04123f; }
.way .k { font-family: var(--slab); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); font-weight: 600; }
.way b { font-size: 1.02rem; letter-spacing: -.01em; word-break: break-word; }
.way span { font-size: .8rem; color: rgba(255,255,255,.55); }
@media (max-width: 700px) { .cta__ways { grid-template-columns: 1fr; } }

/* ---------- 17. Footer ---------- */
.ftr { background: #00071F; color: rgba(255,255,255,.62); font-size: .855rem; padding-block: 3.5rem 2.5rem; }
.ftr__top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem;
  padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 800px) { .ftr__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ftr__top { grid-template-columns: 1fr; } }
.ftr__logo { width: 168px; margin-bottom: 1.2rem; }
.ftr h4 {
  color: #fff; font-family: var(--slab); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 1rem; font-weight: 600;
}
.ftr li + li { margin-top: .5rem; }
.ftr a:hover { color: var(--mint); }
.ftr__legal {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: flex-start;
  padding-top: 2rem; font-size: .74rem; line-height: 1.6; color: rgba(255,255,255,.45);
}
.ftr__legal p { margin: 0; max-width: 62ch; }
.eho { display: flex; align-items: center; gap: .7rem; flex: none; }
.eho svg { width: 30px; height: 30px; color: rgba(255,255,255,.8); flex: none; }
.eho span { font-size: .62rem; line-height: 1.25; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; max-width: 88px; }
.nmls-row {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin-top: 1rem;
  font-size: .8rem; color: rgba(255,255,255,.75); font-weight: 600;
}
.nmls-row b { color: #fff; }

/* ---------- 18. Reveal animation ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; }
.rv-d3 { transition-delay: .24s; } .rv-d4 { transition-delay: .32s; }
.rv-d5 { transition-delay: .40s; } .rv-d6 { transition-delay: .48s; }

.line-in > span { display: block; transform: translateY(105%); transition: transform 1s var(--ease); }
.line-in.is-in > span { transform: none; }
.line-in.d1 > span { transition-delay: .09s; }
.line-in.d2 > span { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .line-in > span { transform: none; }
}

/* ---------- 19. Figures ----------
   THE TYPE SIGNATURE. A mortgage is a numbers document, so every figure on the
   page is set in the brand's slab with tabular lining numerals: rates, payments,
   percentages, NMLS IDs. Columns of numbers line up the way they do on a rate
   sheet. Declared last so it wins ties with the component rules above. */
.fig,
.pill b,
.pill__nmls,
.ratestrip b,
.field__val,
.calc__total .amt,
.bd__row b,
.gbadge__score,
.about__stamp b,
.nmls-row b {
  font-family: var(--slab);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.calc__total .amt { font-weight: 800; letter-spacing: -.035em; }
.bd__row b { font-weight: 600; }
.nmls-row b { font-weight: 700; letter-spacing: .01em; }

/* ---------- 20. Print ---------- */
@media print {
  .hdr, .bg-art, .scrim, .cta__btns, .hero__cta { display: none !important; }
  body { color: #000; }
  .section { padding-block: 1.5rem; break-inside: avoid; }
}