/* ============================================================
   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;
  /* darkened from the guideline's literal 45%-tint (#8C91A4, 3.1:1 on white -
     fails WCAG AA for the small caption text it's used on) to a value that
     clears 4.5:1 against both white and the lavender section background */
  --navy-45:   #656B8A;
  --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: 1440px;
  --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; }

/* Single-column section header: headline directly over its explainer
   paragraph. Used where the section has one plain message and nothing
   substantial (a widget, a button) to justify a right-hand column - Loans,
   Process, Calculator. head-row itself stays reserved for sections where the
   right side carries a real element (Reviews' rating widget, Learn's CTA). */
.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.section-head .lede { margin: 1.1rem 0 0; max-width: none; }

/* ---------- 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; } }

/* Switch to the drawer at 1200, not 1100. The full bar needs ~966px of content
   width; at 1100 that left almost zero slack, so any browser zoom or a larger
   default font tipped the nav into the brand lockup. */
@media (max-width: 1200px) {
  .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;
  /* Capped near the fixed header's own height (~80px) plus a little clearance,
     rather than the roomier padding a normal in-flow nav could afford - a tall
     top gap here just pushes the whole vertically-centered block further from
     a balanced position. */
  padding-top: clamp(6rem, 9vw, 7rem);
  padding-bottom: 0;   /* the house photo runs flush into the rate strip below */
  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;
}
/* Copy sits in the container; the scene runs full-bleed behind it. */
.hero__inner {
  position: relative; z-index: 2;
  min-height: clamp(28rem, 48vw, 40rem);
  display: flex; flex-direction: column; justify-content: center;
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
/* wide enough for a two-line headline, narrow enough to sit in the dissolve */
.hero__copy { max-width: min(35rem, 52%); }
.hero__copy .lede { max-width: 32ch; }

.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); flex: none; }
.pill__nmls { white-space: nowrap; }
@media (max-width: 420px) { .pill { font-size: .76rem; padding-right: .85rem; } }

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; }
/* This one can land on the photograph, so it carries its own surface rather
   than trusting whatever is behind it at a given window width. */
.hero__cta .btn--ghost {
  background: rgba(255, 255, 255, .94);
  box-shadow: inset 0 0 0 1.5px rgba(0, 10, 53, .12),
              0 8px 22px -12px rgba(0, 10, 53, .4);
}
.hero__cta .btn--ghost:hover {
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--purple),
              0 12px 28px -12px rgba(0, 10, 53, .45);
}

/* THE SCENE — full-bleed, anchored bottom-right so the house runs off the right
   edge of the window. Its sky is already transparent, so the hero's own gradient
   reads as the sky, and the photo's left edge dissolves behind the headline. */
.hero__scene {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  width: min(72%, 1150px);
  pointer-events: none; user-select: none;
}
.hero__scene img { width: 100%; height: auto; display: block; }


/* Narrow: the scene goes wide across the bottom and the copy sits above it,
   so nothing has to be read against the photograph. */
@media (max-width: 900px) {
  .hero__scene { width: 118%; right: -9%; }
  .hero__inner { min-height: 0; padding-bottom: 62vw; }
  .hero__copy { max-width: none; }
  .hero__copy .lede { max-width: 42ch; }
}
@media (max-width: 520px) {
}

/* ---------- 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; }

/* quiet social row — reuses the icon-chip language already used for .pillar
   .ico and the card icons, rather than introducing a new button style */
.follow { display: flex; align-items: center; gap: .9rem; margin-top: 1.9rem; }
.follow__label {
  font-family: var(--slab); font-weight: 600; font-size: .76rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy-45); margin-right: .1rem;
}
.follow__ico {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--purple-25); color: var(--purple);
  transition: background-color .3s, color .3s, transform .3s var(--ease);
}
.follow__ico svg { width: 19px; height: 19px; }
.follow__ico:hover { background: var(--purple); color: #fff; transform: translateY(-2px); }

@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); } }
/* below this, a 2-up tile is too narrow for the follow card's link rows
   (icon + handle + arrow) to fit without truncating */
@media (max-width: 560px) { .ig-grid { grid-template-columns: 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; }

/* The follow card holds two real destinations, so it's a plain div with two
   independent link rows rather than one card-wide <a> — no single corner
   arrow can represent "Instagram or TikTok" at once. */
.ig-tile__links { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; position: relative; z-index: 1; }
.ig-tile__links a {
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .75rem; border-radius: 12px;
  background: rgba(255, 255, 255, .14);
  color: #fff; font-size: .82rem; font-weight: 600; letter-spacing: -.005em;
  transition: background-color .3s;
}
.ig-tile__links a:hover { background: rgba(255, 255, 255, .26); }
.ig-tile__links .platform { width: 16px; height: 16px; flex: none; }
.ig-tile__links .go { width: 13px; height: 13px; margin-left: auto; flex: none; transition: transform .3s var(--ease); }
.ig-tile__links a:hover .go { transform: translateX(3px); }

/* ---------- 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; }
}