/* Mortgages by Channing — core design system.
   One stylesheet for the whole site. Change a token here, every page follows.
   Page-specific rules go in the page, never in here. */

/* ---- Self-hosted webfonts (SIL OFL, see assets/fonts/LICENSE-*.txt) ----
   These used to come from fonts.googleapis.com, which put two extra hosts on
   the critical path: the browser had to resolve, connect to and read the
   Google stylesheet before it could even discover the font files on a second
   host, and none of that could overlap with painting. Same-origin, they ride
   the connection the page already has.

   The filenames carry no hash and /assets/* is served immutable for a year,
   so replacing a face means renaming the file, not overwriting it.

   Barlow 700 is here because the stylesheet uses it. The old Google URL
   requested only 400, 500 and 600, so every bold Barlow on the site was
   being faux-bolded by the browser. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/anton-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/barlow-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/barlow-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/barlow-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/barlow-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/barlow-condensed-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --purple:#7549EA;--pdeep:#4C1EB8;--pmid:#34176D;--lilac:#997BF4;
  --bg:#000;--fg:#fff;--muted:#A3A3A3;--line:#1F1F1F;--card:#111;--headerbg:rgba(0,0,0,.94);
  --bg-i:#fff;--fg-i:#000;--muted-i:#6E6E6E;--line-i:#E5E5E5;--card-i:#F5F5F5;--accent-i:#7549EA;
  /* The accent as TEXT. #7549EA reaches 3.9:1 on black, which is fine for a
     44px number and short of AA for a 15px one, so accent-coloured copy uses
     the lighter purple on a dark ground and the darker one on a light ground.
     --ink follows the band's own surface, --ink-i the opposite one. */
  --ink:#997BF4;--ink-i:#7549EA;
  /* The card surface. A card is always light, so only its shade moves: white
     where it sits on a dark ground, off-white where the ground is already
     light. --blk follows the band, --blk-i the opposite one. */
  --blk:#fff;--blk-i:#F5F5F5;
  /* A verdict is the one place colour carries meaning rather than brand, so
     the calculator readouts get three status tokens and nothing else does. */
  /* Dark enough to clear 4.5:1 on the card surface the calculator sits on,
     which the brighter versions of these three did not. */
  --ok:#0E7A3C;--warn:#7A5200;--bad:#B3131E;
}
[data-theme="light"]{
  --bg:#fff;--fg:#000;--muted:#6E6E6E;--line:#E5E5E5;--card:#F5F5F5;--headerbg:rgba(255,255,255,.94);
  --bg-i:#000;--fg-i:#fff;--muted-i:#A3A3A3;--line-i:#1F1F1F;--card-i:#111;--accent-i:#997BF4;
  --ink:#7549EA;--ink-i:#997BF4;
  --blk:#F5F5F5;--blk-i:#fff;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:'Barlow',sans-serif;font-size:17px;line-height:1.7;transition:background .18s ease,color .18s ease}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-weight:400}
h1{font-family:'Anton',sans-serif;font-size:clamp(38px,5.6vw,72px);line-height:.98;letter-spacing:1px;text-transform:uppercase}
h2{font-family:'Anton',sans-serif;font-size:clamp(28px,4vw,46px);line-height:1.02;letter-spacing:1px;text-transform:uppercase}
h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;letter-spacing:.04em;text-transform:uppercase;line-height:1.2}
p{margin-bottom:16px;max-width:68ch}
a{color:inherit}
ul{list-style:none}
.rule{display:block;width:56px;height:3px;background:var(--purple);margin-bottom:16px}
.eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.light .eyebrow{color:var(--muted-i)}
.rule+.eyebrow+h2,.rule+.eyebrow+h1{margin-top:14px}
.slab{display:inline-block;transform:skewX(-10deg);background:var(--purple);color:#fff;font-family:'Anton',sans-serif;font-size:14px;letter-spacing:.16em;text-transform:uppercase;padding:9px 20px 7px;line-height:1;margin-left:3px}
.slab span{display:inline-block;transform:skewX(10deg)}
/* Logo */
.brandmark{display:block;height:58px;width:auto}
.brandmark--lg{height:74px}
@media(max-width:1020px){.brandmark{height:46px}}
@media(max-width:520px){.brandmark{height:38px}}
/* Two marks, one per background. Dark theme is the default, so the white mark
   shows by default and swaps when the light theme is active. */
.brandmark--onlight{display:none}
[data-theme="light"] .brandmark--ondark{display:none}
[data-theme="light"] .brandmark--onlight{display:block}
.logo{display:inline-block;transform:skewX(-10deg);text-align:center}
.logo .lw,.logo .lb{display:block}
.logo .lw{font-family:'Anton',sans-serif;font-size:26px;letter-spacing:1.2px;line-height:.9;white-space:nowrap;color:var(--fg)}
.logo .lb{font-family:'Anton',sans-serif;font-size:8px;letter-spacing:5.4px;text-indent:5.4px;padding:5px 0 4px;margin-top:5px;line-height:1;background:var(--purple);color:#fff}
.logo.lg .lw{font-size:40px;letter-spacing:2px}
.logo.lg .lb{font-size:12px;letter-spacing:8.6px;text-indent:8.6px;padding:7px 0 5px}
/* Header + nav */
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--headerbg);backdrop-filter:blur(6px);z-index:40}
.prog-bar{position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:var(--purple);transform:scaleX(0);transform-origin:left center;will-change:transform}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.nav ul{display:flex;gap:20px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.nav a{text-decoration:none}
.nav ul a:hover{text-decoration:underline;text-decoration-color:var(--purple);text-underline-offset:5px;text-decoration-thickness:2px}
.navright{display:flex;align-items:center;gap:10px}
.navright .btn{font-size:14px;padding:13px 24px 11px}
.themebtn,.menubtn{background:transparent;border:1px solid var(--line);color:var(--fg);width:40px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.themebtn:hover,.menubtn:hover{border-color:var(--purple)}
.menubtn{display:none}
.btn{display:inline-block;transform:skewX(-10deg);background:var(--purple);color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;letter-spacing:.14em;text-transform:uppercase;padding:18px 36px 16px;text-decoration:none;line-height:1;border:0;cursor:pointer;transition:background .15s ease-out,color .15s ease-out}
.btn span{display:inline-block;transform:skewX(10deg)}
.btn:hover{background:var(--pdeep)}
.btn--white{background:var(--fg);color:var(--bg)}
.btn--white:hover{background:var(--muted);color:var(--bg)}
.btn--ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 2px var(--fg)}
.btn--ghost:hover{background:var(--fg);color:var(--bg)}
.light .btn--ghost{color:var(--fg-i);box-shadow:inset 0 0 0 2px var(--fg-i)}
.light .btn--ghost:hover{background:var(--fg-i);color:var(--bg-i)}
.light .btn--white{background:var(--fg-i);color:var(--bg-i)}
/* Mobile drawer — the current mockup had no mobile nav at all */
.mobnav{display:none;border-top:1px solid var(--line);padding:8px 0 20px}
.mobnav.open{display:block}
.mobnav a{display:block;padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:16px;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:1320px){
  .nav ul{gap:12px;font-size:13px}
  .navright .btn{font-size:13px;padding:12px 16px 10px}
}
@media(max-width:1160px){
  .nav ul{display:none}
  .menubtn{display:flex}
  .nav .logo .lw{font-size:21px}
  .nav .logo .lb{font-size:7px;letter-spacing:4.4px;text-indent:4.4px}
  .btn{font-size:12px;padding:11px 16px 9px}
}
@media(max-width:1160px){.brandmark{height:46px}}
@media(max-width:520px){.navright .btn{display:none}}
@media(max-width:400px){.nav{gap:8px}.navright{gap:6px}.nav .logo .lw{font-size:18px}
  .nav .logo .lb{font-size:6px;letter-spacing:3.6px;text-indent:3.6px}}
/* Bands */
section{padding:84px 0;border-bottom:1px solid var(--line)}
.light{background:var(--bg-i);color:var(--fg-i);border-bottom:1px solid var(--line-i);
  --ink:var(--ink-i);--blk:var(--blk-i)}
.light h2,.light h3{color:var(--fg-i)}
.accent{color:var(--purple)}
.light .accent{color:var(--accent-i)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.cta-note{font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:14px;letter-spacing:.06em;
  color:var(--muted);margin-top:14px;margin-bottom:0}
.light .cta-note{color:var(--muted-i)}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:minmax(0,1fr);gap:36px}}
.stars{color:var(--ink);letter-spacing:2px;font-size:14px}
/* Flag block — replaces the shadowed floating card */
.flag{border:1px solid var(--line);border-left:3px solid var(--purple);background:var(--card);padding:20px 24px;max-width:420px}
.flag .k{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;letter-spacing:.05em;text-transform:uppercase}
.flag .v{font-size:15px;color:var(--muted);margin-top:4px}
.flag .big{font-family:'Anton',sans-serif;font-size:44px;line-height:1}
.light .flag{background:var(--card-i);border-color:var(--line-i);border-left-color:var(--purple)}
.light .flag .v{color:var(--muted-i)}
/* Block system: 1px border, 3px purple left rule, radius 0, no shadow */
.blocks{display:grid;gap:16px;margin-top:32px}
.b2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.b3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.b4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
/* A card is a light surface whatever the band behind it. On a dark ground the
   old #111 on #000 barely read as a card at all. Re-mapping the palette on the
   card means its heading, copy, rules and icons all come out dark without a
   single per-element override. */
.blk{--bg:#fff;--fg:#000;--muted:#6E6E6E;--line:#E5E5E5;--card:#F5F5F5;
  --bg-i:#fff;--fg-i:#000;--muted-i:#6E6E6E;--line-i:#E5E5E5;--card-i:#F5F5F5;
  --ink:#7549EA;--ink-i:#997BF4;
  border:1px solid var(--line);border-left:3px solid var(--purple);
  background:var(--blk);color:var(--fg);padding:24px;overflow-x:auto}
.blk h3{margin-bottom:10px}
.blk p{font-size:16px;color:var(--muted);margin:0;max-width:none}
.blk .meta{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
/* Two links at the foot of a card ran straight into each other:
   "View StateGet a Quote". */
.blk .more+.more{margin-left:20px}
.blk .more{display:inline-block;margin-top:12px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--purple);padding-bottom:2px}
[hidden]{display:none !important}
.ph{display:block;width:100%;height:auto;border:1px solid var(--line)}
.light .ph{border-color:var(--line-i)}
/* City grid */
.cities{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin-top:32px}
.city{display:block;border:1px solid var(--line-i);padding:13px 16px;text-decoration:none;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;transition:background .15s ease-out,color .15s ease-out}
.city:hover{background:var(--purple);color:#fff;border-color:var(--purple)}
/* End CTA + footer */
.endcta{text-align:center}
.endcta h2{margin:14px 0 16px}
.endcta .rule{margin:0 auto 16px}
.endcta p{color:var(--muted);margin:0 auto 26px;max-width:56ch}
.light.endcta p{color:var(--muted-i)}
.endcta .cta-row{justify-content:center}
footer{padding:56px 0 64px}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;margin-bottom:36px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
.fgrid a{display:block;text-decoration:none;color:var(--muted);font-size:16px;padding:3px 0}
.fgrid a:hover{color:var(--fg)}
.fcontact{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:16px;padding:4px 0}
.legal{font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:12px;letter-spacing:.06em;line-height:1.6;color:var(--muted);border-top:1px solid var(--line);padding-top:22px;max-width:none}
.inline-link{color:inherit;text-decoration:none;border-bottom:2px solid var(--purple);padding-bottom:1px}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.app-visual{position:relative}
/* Motion */
.js [data-rv]{opacity:0;transform:translate3d(0,16px,0);transition:opacity .22s ease-out,transform .22s ease-out}
.js [data-rv].is-in{opacity:1;transform:translate3d(0,0,0)}
.js .rule{transform:scaleX(0);transform-origin:left center;transition:transform .22s ease-out}
.js .rule.is-in{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  body{transition:none}
  .js [data-rv],.js [data-rv].is-in{transform:none;transition:opacity .22s ease-out}
  .js .rule,.js .rule.is-in{transform:scaleX(1);transition:none}
  .prog-bar{display:none}
}