/* Nav V3 · static copy of the Framer header "New/Nav V3 (bar)" with its three full-width sheets and the phone drawer.
   Markup: partials/header.html · behaviour: nav/nav.js · previews: nav/films/*.
   Measurements are read from the Framer nodes (bar 22/48 padding and 94 px tall, sheet at top 85 px, sheet padding 20/32/28,
   inner 1344 px, index 24 % (200–300 px), items 11/16 radius 12, cards radius 16 …). Breakpoints are Framer's:
   desktop ≥ 1200, tablet 810–1199, phone ≤ 809 (hamburger + drawer).
   Every rule is prefixed header.nav.nav3 so the pages' older .nav rules (.nav .wrap, .nav .links, .nav ul …) cannot reach it,
   and the header keeps class "nav" so site.css / motion.js still hide it on scroll down (.nav-hide). */

header.nav.nav3{
  --n3-ground:#FFFFFF; --n3-panel:#F4F4F2; --n3-hair:rgba(17,17,17,.10);
  --n3-ink:#111111; --n3-ink2:#55555A; --n3-ink3:#6F6F74;
  --n3-bar-ink:#14181B; --n3-muted:#68757B; --n3-hover:rgba(20,24,27,.05);
  --n3-brand:#0084B7; --n3-wash:#E8F4F9; --n3-btn-panel:#ECECE8; --n3-btn-hair:rgba(20,24,27,.08);
  --n3-display:"Inter","Inter Display",system-ui,sans-serif;
  --n3-body:"Instrument Sans",system-ui,sans-serif;
  --n3-ease:cubic-bezier(.23,1,.32,1);
  --n3-h:94px;          /* bar height */
  --n3-sheet-top:85px;  /* where the sheets start (Framer: top 85) */
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  display:block; height:var(--n3-h); margin:0; padding:0;
  background:var(--n3-ground); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
  color:var(--n3-ink); font:400 15px/1.5 var(--n3-body); -webkit-font-smoothing:antialiased;
}
header.nav.nav3 *,header.nav.nav3 *::before,header.nav.nav3 *::after{box-sizing:border-box}
header.nav.nav3 [hidden]{display:none!important}
header.nav.nav3 a{color:inherit;text-decoration:none}
header.nav.nav3 button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
header.nav.nav3 p{margin:0}
header.nav.nav3 .n3-sprite{position:absolute;width:0;height:0;overflow:hidden}
header.nav.nav3 .n3-ic{display:block;flex:none;width:16px;height:16px;color:inherit}
header.nav.nav3 :focus-visible{outline:2px solid var(--n3-brand);outline-offset:2px}

/* ---------- bar ---------- */
header.nav.nav3 .n3-nav{display:block;height:100%}
header.nav.nav3 .n3-bar{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  height:var(--n3-h);padding:0 48px;background:var(--n3-ground)}
header.nav.nav3 .n3-logo{display:inline-flex;align-items:center;justify-self:start;border-radius:6px}
header.nav.nav3 .n3-lockup{display:flex;align-items:flex-start;gap:4.9px}
/* Framer: the mark sits "fit" inside a 29.5 × 25.3 frame; img/tree-mark.png is cropped tight, so the frame's margin is added here */
header.nav.nav3 .n3-mark{display:block;width:26px;height:22.3px;margin:1.5px 1.75px 0;max-width:none}
header.nav.nav3 .n3-word{position:relative;display:block;padding:5.2px 0 6.1px;font-family:var(--n3-display);font-variation-settings:"opsz" 32;
  font-weight:600;font-size:22.95px;line-height:1;letter-spacing:-.03em;color:#0083B7;white-space:nowrap}
header.nav.nav3 .n3-tag{position:absolute;left:22.5px;top:26.2px;font-size:5.5px;line-height:1;letter-spacing:.29em;text-transform:uppercase;color:#555555;white-space:nowrap}
header.nav.nav3 .n3-logo-img{display:none;width:118px;height:25px;max-width:none}

header.nav.nav3 .n3-links{display:flex;align-items:center;justify-content:center;gap:2px}
header.nav.nav3 .n3-trigger{display:inline-flex;align-items:center;gap:6px;padding:11px 14px;border-radius:999px;
  font:500 15px/1.2 var(--n3-body);letter-spacing:-.002em;color:var(--n3-bar-ink);white-space:nowrap;user-select:none;
  transition:background-color .15s ease}
header.nav.nav3 .n3-trigger .n3-chev{color:var(--n3-muted);transition:transform .25s var(--n3-ease)}
header.nav.nav3 .n3-trigger[aria-expanded="true"]{background:var(--n3-hover)}
header.nav.nav3 .n3-trigger[aria-expanded="true"] .n3-chev{transform:rotate(180deg)}
@media (hover:hover){header.nav.nav3 .n3-trigger:hover{background:var(--n3-hover)}}

header.nav.nav3 .n3-right{display:flex;align-items:center;justify-content:flex-end;gap:8px}
header.nav.nav3 .n3-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;background:var(--n3-bar-ink);color:#fff;
  font:600 16px/26px var(--n3-body);letter-spacing:-.01em;white-space:nowrap;user-select:none;transition:background-color .2s ease,transform .12s ease}
header.nav.nav3 .n3-cta:active{transform:scale(.98)}
@media (hover:hover){header.nav.nav3 .n3-cta:hover{background:#2a2e31}}
header.nav.nav3 .n3-burger{display:none;place-items:center;width:40px;height:40px;border-radius:999px;background:var(--n3-btn-panel);border:1px solid var(--n3-btn-hair);color:var(--n3-bar-ink)}
header.nav.nav3 .n3-burger .n3-ic{width:22px;height:22px}

/* ---------- sheets (full width, under the bar) ---------- */
header.nav.nav3 .n3-sheet{position:absolute;left:0;right:0;top:var(--n3-sheet-top);z-index:3;
  max-height:calc(100vh - var(--n3-sheet-top));max-height:calc(100dvh - var(--n3-sheet-top));overflow-x:clip;overflow-y:auto;overscroll-behavior:contain;
  padding:19px 32px 27px;background:var(--n3-ground);   /* Framer 20/32/28 with its 1 px borders drawn inside */
  border-top:1px solid var(--n3-hair);border-bottom:1px solid var(--n3-hair);box-shadow:0 24px 40px -16px rgba(17,17,17,.12);
  opacity:0;transition:opacity .2s var(--n3-ease)}
header.nav.nav3 .n3-sheet.is-open{opacity:1}
header.nav.nav3 .n3-inner{width:100%;max-width:1344px;margin:0 auto}

header.nav.nav3 .n3-menu{display:flex;align-items:flex-start;gap:40px}
header.nav.nav3 .n3-index{flex:none;display:flex;flex-direction:column;gap:2px;width:24%;min-width:200px;max-width:300px;padding-right:28px;border-right:1px solid var(--n3-hair)}
header.nav.nav3 .n3-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;border-radius:12px;
  font-family:var(--n3-display);font-variation-settings:"opsz" 32;font-weight:500;font-size:20px;line-height:1.35;letter-spacing:-.01em;
  color:var(--n3-ink3);transition:background-color .2s var(--n3-ease),color .2s var(--n3-ease)}
header.nav.nav3 .n3-item .n3-arrow{width:18px;height:18px;color:var(--n3-ink);opacity:0;transition:opacity .2s var(--n3-ease)}
header.nav.nav3 .n3-item.is-active{background:var(--n3-panel);color:var(--n3-ink)}
header.nav.nav3 .n3-item.is-active .n3-arrow{opacity:1}

header.nav.nav3 .n3-detail{flex:1 1 0;min-width:0}
header.nav.nav3 .n3-panel{display:flex;flex-direction:column;gap:20px}
header.nav.nav3 .n3-head{display:flex;align-items:flex-start;justify-content:space-between}
header.nav.nav3 .n3-line{flex:1 1 0;max-width:640px;font-family:var(--n3-display);font-variation-settings:"opsz" 32;font-weight:500;font-size:20px;line-height:1.35;letter-spacing:-.01em;color:var(--n3-ink)}
header.nav.nav3 .n3-more{flex:none;display:inline-flex;align-items:center;gap:8px;padding:4px 0 0 24px;font:400 15px/1.5 var(--n3-body);color:var(--n3-ink);white-space:nowrap}
@media (hover:hover){header.nav.nav3 .n3-more:hover span{text-decoration:underline;text-underline-offset:3px}}

/* previews: the 16:9 film box (hero film and the six mini-films) and the product pictures */
header.nav.nav3 .n3-film{position:relative;width:100%;aspect-ratio:16/9;border-radius:32px;overflow:hidden;background:#F4F4F2}
header.nav.nav3 .n3-film>div{position:absolute;left:0;top:0;transform-origin:0 0}
header.nav.nav3 .n3-pic{width:100%;min-height:418px}
header.nav.nav3 .n3-pic[data-n3-phone]{min-height:0}

/* Why Dynamatix cards */
header.nav.nav3 .n3-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
header.nav.nav3 .n3-card{display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-height:168px;padding:22px 24px 20px;border-radius:18px;
  background:var(--n3-panel);border:1.5px solid transparent;transition:background-color .2s var(--n3-ease),border-color .2s var(--n3-ease)}
header.nav.nav3 .n3-card-top{display:flex;flex-direction:column;gap:10px}
header.nav.nav3 .n3-card-title{font-family:var(--n3-display);font-variation-settings:"opsz" 32;font-weight:500;font-size:20px;line-height:1.35;letter-spacing:-.01em;color:var(--n3-ink)}
header.nav.nav3 .n3-card-line{font:400 15px/1.5 var(--n3-body);color:var(--n3-ink2)}
header.nav.nav3 .n3-card-foot{display:flex;justify-content:flex-end;color:var(--n3-ink3);transition:color .2s var(--n3-ease)}
header.nav.nav3 .n3-card-foot .n3-ic{width:18px;height:18px}
/* every card carries an icon above its title.
   The Mortgage Rail and Our solutions sheets: one lead card down the left (Overview, the whole product / Mortgage Rail, this
   site), filled in the brand colour, and six equal cards beside it. Nothing is merely outlined: the page you are on says so
   in words, "You are here", where its arrow would be. */
header.nav.nav3 .n3-card-ic{width:24px;height:24px;color:var(--n3-brand);margin-bottom:10px}
header.nav.nav3 .n3-cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
header.nav.nav3 .n3-cards-4 .n3-card-lead{grid-column:1;grid-row:1 / span 2;background:var(--n3-brand);border-color:var(--n3-brand)}
header.nav.nav3 .n3-card-lead .n3-card-title{color:#fff;font-size:24px;line-height:1.25}
header.nav.nav3 .n3-card-lead .n3-card-line{color:rgba(255,255,255,.9);font-size:16px}
header.nav.nav3 .n3-card-lead .n3-card-ic{color:#fff;width:30px;height:30px;margin-bottom:10px}
header.nav.nav3 .n3-card-lead .n3-card-foot{color:#fff}
header.nav.nav3 .n3-here{display:none;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:var(--n3-brand);color:#fff;font:600 12.5px/1 var(--n3-body);white-space:nowrap}
header.nav.nav3 .n3-card[aria-current="page"] .n3-here,header.nav.nav3 .n3-card-here .n3-here{display:inline-flex}
header.nav.nav3 .n3-card[aria-current="page"] .n3-card-foot .n3-ic,header.nav.nav3 .n3-card-here .n3-card-foot .n3-ic{display:none}
header.nav.nav3 .n3-card-lead .n3-here{background:#fff;color:var(--n3-brand)}
@media (max-width:1100px){header.nav.nav3 .n3-cards-4{grid-template-columns:repeat(3,minmax(0,1fr))}header.nav.nav3 .n3-cards-4 .n3-card-lead{grid-column:1 / -1;grid-row:auto;min-height:0;flex-direction:row;align-items:center;padding-block:18px}header.nav.nav3 .n3-cards-4 .n3-card-lead .n3-card-ic{margin-bottom:4px}header.nav.nav3 .n3-cards-4 .n3-card{min-height:0}}
@media (max-width:760px){header.nav.nav3 .n3-cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (hover:hover){
  header.nav.nav3 .n3-card:hover{background:var(--n3-wash);border-color:var(--n3-brand)}
  header.nav.nav3 .n3-card:hover .n3-card-foot{color:var(--n3-brand)}
}
header.nav.nav3 .n3-card:focus-visible{background:var(--n3-wash);border-color:var(--n3-brand)}
@media (hover:hover){header.nav.nav3 .n3-card-lead:hover{background:#00709C;border-color:#00709C}header.nav.nav3 .n3-card-lead:hover .n3-card-foot{color:#fff}}
header.nav.nav3 .n3-card-lead:focus-visible{background:#00709C;border-color:#fff}

/* the drawer exists only on the phone */
header.nav.nav3 .n3-drawer{display:none}

/* ---------- tablet 810–1199 (Framer "Tablet": bar 12/20, logo image, tighter triggers, sheet at 65) ---------- */
@media (max-width:1199px){
  header.nav.nav3{--n3-h:72px;--n3-sheet-top:65px}
  header.nav.nav3 .n3-bar{padding:0 20px}
  header.nav.nav3 .n3-lockup{display:none}
  header.nav.nav3 .n3-logo-img{display:block}
  header.nav.nav3 .n3-links{gap:0}
  header.nav.nav3 .n3-trigger{padding:10px}
  header.nav.nav3 .n3-cta{padding:11px 16px}
  header.nav.nav3 .n3-sheet{padding:15px 20px 19px}
  header.nav.nav3 .n3-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  header.nav.nav3 .n3-item,header.nav.nav3 .n3-line,header.nav.nav3 .n3-card-title{font-size:19px;line-height:1.36}
  header.nav.nav3 .n3-more,header.nav.nav3 .n3-card-line{font-size:14px;line-height:1.52}
  header.nav.nav3 .n3-menu{gap:28px}
  header.nav.nav3 .n3-index{padding-right:20px}
  header.nav.nav3 .n3-film{border-radius:24px}
}

/* ---------- phone ≤ 809 (Framer "Phone" / "Phone Open": bar 12/16, hamburger, drawer) ---------- */
@media (max-width:809px){
  header.nav.nav3{--n3-h:64px}
  header.nav.nav3 .n3-bar{grid-template-columns:auto 1fr;padding:0 16px}
  header.nav.nav3 .n3-logo-img{width:112px;height:24px}
  header.nav.nav3 .n3-links,header.nav.nav3 .n3-cta,header.nav.nav3 .n3-sheet{display:none!important}
  header.nav.nav3 .n3-burger{display:grid}

  header.nav.nav3 .n3-drawer{display:block;position:absolute;left:0;right:0;top:var(--n3-h);z-index:1;
    max-height:calc(100vh - var(--n3-h));max-height:calc(100dvh - var(--n3-h));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding:4px 28px calc(24px + env(safe-area-inset-bottom,0px));background:var(--n3-ground);
    border-bottom:1px solid var(--n3-hair);box-shadow:0 24px 40px -16px rgba(17,17,17,.12);
    opacity:0;transform:translateY(-6px);transition:opacity .2s var(--n3-ease),transform .25s var(--n3-ease)}
  header.nav.nav3 .n3-drawer.is-open{opacity:1;transform:none}
  header.nav.nav3 .n3-view{display:flex;flex-direction:column;padding:4px 4px 12px}
  header.nav.nav3 .n3-row-menu{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:16px 0;border-bottom:1px solid var(--n3-hair);
    font-family:var(--n3-display);font-variation-settings:"opsz" 32;font-weight:500;font-size:21px;line-height:1.3;letter-spacing:-.012em;color:var(--n3-ink)}
  header.nav.nav3 .n3-row-menu .n3-ic{width:22px;height:22px}
  header.nav.nav3 .n3-view:not([data-n3-view="menus"]){padding:0 0 12px}
  header.nav.nav3 .n3-back{display:inline-flex;align-items:center;align-self:flex-start;gap:6px;padding:8px 4px 4px;font:400 14px/1.55 var(--n3-body);color:var(--n3-ink3)}
  header.nav.nav3 .n3-view-title{padding:8px 4px;font-family:var(--n3-display);font-variation-settings:"opsz" 32;font-weight:500;font-size:26px;line-height:1.2;letter-spacing:-.015em;color:var(--n3-ink)}
  header.nav.nav3 .n3-row{display:flex;flex-direction:column;gap:4px;padding:14px 4px;border-bottom:1px solid var(--n3-hair)}
  header.nav.nav3 .n3-row-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
  header.nav.nav3 .n3-row-top .n3-ic{width:20px;height:20px;color:var(--n3-ink)}
  header.nav.nav3 .n3-row-name{font-family:var(--n3-display);font-variation-settings:"opsz" 32;font-weight:500;font-size:18px;line-height:1.4;letter-spacing:-.008em;color:var(--n3-ink)}
  header.nav.nav3 .n3-row-line{display:block;padding-right:32px;font:400 14px/1.55 var(--n3-body);color:var(--n3-ink2)}
  header.nav.nav3 .n3-acc{border-bottom:1px solid var(--n3-hair)}
  header.nav.nav3 .n3-acc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 4px}
  header.nav.nav3 .n3-acc-head .n3-ic{width:20px;height:20px;color:var(--n3-ink)}
  header.nav.nav3 .n3-acc-head .n3-minus{display:none}
  header.nav.nav3 .n3-acc-head[aria-expanded="true"] .n3-plus{display:none}
  header.nav.nav3 .n3-acc-head[aria-expanded="true"] .n3-minus{display:block}
  header.nav.nav3 .n3-acc-body{display:flex;flex-direction:column;gap:16px;padding:0 0 16px}
  header.nav.nav3 .n3-acc-text{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:0 4px}
  header.nav.nav3 .n3-acc-text .n3-row-line{padding-right:0}
  header.nav.nav3 .n3-more{padding:0;font-size:14px;line-height:1.55}
  header.nav.nav3 .n3-drawer-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px 20px;border-radius:14px;background:var(--n3-ink);color:var(--n3-ground);
    font:400 14px/1.55 var(--n3-body)}
}

/* scroll lock while the phone drawer is open */
html.n3-lock,html.n3-lock body{overflow:hidden!important;overscroll-behavior:none}

@media (prefers-reduced-motion:reduce){
  header.nav.nav3 .n3-sheet,header.nav.nav3 .n3-drawer,header.nav.nav3 .n3-item,header.nav.nav3 .n3-item .n3-arrow,
  header.nav.nav3 .n3-trigger,header.nav.nav3 .n3-trigger .n3-chev,header.nav.nav3 .n3-card,header.nav.nav3 .n3-cta{transition:none}
  header.nav.nav3 .n3-drawer{transform:none}
}

/* ---------- floating bar (owner, 7 Oct 2026): the bar is a rounded card that does not run the full width ----------
   Fully round ends since 7 Oct, later the same day (owner: "make it full round"); it was 18 px like the menu cards.
   It sits 12 px down from the top, at most 1200 px wide, centred, with the page
   showing either side of it. The header itself is see-through. The dropdown sheets and the phone drawer take the
   bar's width and hang 8 px under it as rounded panels. */
header.nav.nav3{--n3-gap:12px;--n3-barh:68px;--n3-w:min(1200px,calc(100% - 32px));
  --n3-h:calc(var(--n3-barh) + var(--n3-gap) + 8px);--n3-sheet-top:var(--n3-h);background:transparent}
header.nav.nav3 .n3-bar{width:var(--n3-w);height:var(--n3-barh);margin:var(--n3-gap) auto 0;padding:0 9px 0 26px;border-radius:999px;
  border:1px solid var(--n3-hair);box-shadow:0 1px 2px rgba(17,17,17,.04),0 14px 30px -18px rgba(17,17,17,.28)}
header.nav.nav3 .n3-sheet{left:50%;right:auto;width:var(--n3-w);transform:translateX(-50%);padding:16px;border:1px solid var(--n3-hair);border-radius:26px;
  max-height:calc(100vh - var(--n3-sheet-top) - 12px);max-height:calc(100dvh - var(--n3-sheet-top) - 12px);box-shadow:0 28px 48px -20px rgba(17,17,17,.22)}
header.nav.nav3 .n3-inner{max-width:none}
@media (max-width:1199px){
  header.nav.nav3{--n3-barh:62px;--n3-h:calc(var(--n3-barh) + var(--n3-gap) + 8px);--n3-sheet-top:var(--n3-h)}
  header.nav.nav3 .n3-bar{padding:0 8px 0 22px}
  header.nav.nav3 .n3-sheet{padding:14px}
}
@media (max-width:809px){
  header.nav.nav3{--n3-gap:8px;--n3-barh:56px;--n3-w:calc(100% - 20px);--n3-h:calc(var(--n3-barh) + var(--n3-gap) + 8px)}
  header.nav.nav3 .n3-bar{padding:0 8px 0 18px;border-radius:999px}
  header.nav.nav3 .n3-drawer{left:10px;right:10px;border:1px solid var(--n3-hair);border-radius:18px;padding:4px 18px calc(18px + env(safe-area-inset-bottom,0px));
    max-height:calc(100vh - var(--n3-h) - 10px);max-height:calc(100dvh - var(--n3-h) - 10px)}
}

/* ---------- dropdowns as plain rows (owner, 7 Oct 2026): "a simple icon plus the title, no description, and arrows
   to click on those, and hover effect" ----------
   Same markup as before (.n3-card). Each item is one row: icon, title, arrow. The description line is not shown.
   The panel is a compact rounded card centred under the bar, two columns of rows, instead of a sheet as wide as the bar.
   Hover and keyboard focus: a light blue wash and the arrow moves 3 px; nothing grows. The page you are on says
   "You are here" in place of its arrow. The phone drawer's rows lose their description line too. */
header.nav.nav3 .n3-sheet{width:min(660px,calc(100% - 32px));padding:10px;border-radius:24px}
header.nav.nav3 .n3-cards,header.nav.nav3 .n3-cards-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 6px}
header.nav.nav3 .n3-card,header.nav.nav3 .n3-cards-4 .n3-card-lead{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:14px;
  grid-column:auto;grid-row:auto;min-height:52px;padding:10px 14px;border:0;border-radius:14px;background:transparent;box-shadow:none;
  transition:background-color .2s ease-out}
header.nav.nav3 .n3-card-top{display:contents}
header.nav.nav3 .n3-card-line{display:none}
header.nav.nav3 .n3-card-ic,header.nav.nav3 .n3-card-lead .n3-card-ic{width:22px;height:22px;margin:0;color:var(--n3-brand)}
header.nav.nav3 .n3-card-title,header.nav.nav3 .n3-card-lead .n3-card-title{font-size:16px;line-height:1.3;font-weight:500;letter-spacing:-.008em;color:var(--n3-ink)}
header.nav.nav3 .n3-card-foot,header.nav.nav3 .n3-card-lead .n3-card-foot{display:flex;align-items:center;justify-content:flex-end;color:var(--n3-ink3)}
header.nav.nav3 .n3-card-foot .n3-ic{width:18px;height:18px;transition:transform .2s ease-out,color .2s ease-out}
header.nav.nav3 .n3-here,header.nav.nav3 .n3-card-lead .n3-here{height:24px;padding:0 10px;background:var(--n3-wash);color:#00709C;font-size:12px}
@media (hover:hover){
  header.nav.nav3 .n3-card:hover,header.nav.nav3 .n3-card-lead:hover{background:var(--n3-wash)}
  header.nav.nav3 .n3-card:hover .n3-card-foot,header.nav.nav3 .n3-card-lead:hover .n3-card-foot{color:#00709C}
  header.nav.nav3 .n3-card:hover .n3-card-foot .n3-ic{transform:translateX(3px)}
  header.nav.nav3 .n3-card:hover .n3-here{background:#fff}
}
header.nav.nav3 .n3-card:focus-visible,header.nav.nav3 .n3-card-lead:focus-visible{background:var(--n3-wash);outline:2px solid var(--n3-brand);outline-offset:-2px}
header.nav.nav3 .n3-card:active{background:#DCEEF6}
@media (max-width:1100px){header.nav.nav3 .n3-cards-4 .n3-card-lead{flex-direction:initial;min-height:52px}}
/* phone drawer: title and arrow only */
header.nav.nav3 .n3-row-line{display:none}
@media (prefers-reduced-motion:reduce){header.nav.nav3 .n3-card-foot .n3-ic{transition:none}}
header.nav.nav3 .n3-cards .n3-card,header.nav.nav3 .n3-cards .n3-card-lead{min-height:52px}
/* the phone accordions under "Our solutions" keep their one line: it is the content the row opens */
header.nav.nav3 .n3-acc-text .n3-row-line{display:block}

/* 8 Oct (owner supplied the real logo): the bar always shows the real logo image; the lockup rebuilt from the mark and type is no longer used. */
header.nav.nav3 .n3-lockup{display:none!important}
header.nav.nav3 .n3-logo-img{display:block!important;width:137px;height:24px}
@media (max-width:809px){header.nav.nav3 .n3-logo-img{width:126px;height:22px}}

/* ---------- dropdowns, option A (owner, 8 Oct 2026, chosen from the wireframes; replaces the 7 Oct plain rows) ----------
   A sheet as wide as the bar, hanging under it. Left third: one lead tile (the overview, in blue, for Mortgage Rail).
   Right two thirds: two columns of rows read downwards, each row icon + name + one line; group labels where the links differ in kind.
   The page you are on is a filled row marked "This page". No arrows on rows. */
@media (min-width:810px){
header.nav.nav3 .n3-sheet{width:var(--n3-w);padding:16px;border-radius:24px}
header.nav.nav3 .n3-cards.n3-a{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px;align-items:start}
header.nav.nav3 .n3-a .n3-lead,header.nav.nav3 .n3-a .n3-card-lead{grid-column:1;grid-row:auto;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:208px;padding:20px 22px;border:0;border-radius:16px;background:var(--n3-panel);color:var(--n3-ink);text-decoration:none;box-shadow:none}
header.nav.nav3 .n3-a .n3-lead .n3-card-top,header.nav.nav3 .n3-a .n3-card-lead .n3-card-top{display:flex;flex-direction:column;gap:6px}
header.nav.nav3 .n3-a .n3-card-lead .n3-card-ic{display:none}
header.nav.nav3 .n3-lead-k{font:500 11px/1.3 var(--n3-body);letter-spacing:.12em;text-transform:uppercase;color:var(--n3-ink2);margin-bottom:6px}
header.nav.nav3 .n3-a .n3-lead .n3-card-title,header.nav.nav3 .n3-a .n3-card-lead .n3-card-title{font-size:22px;line-height:1.2;letter-spacing:-.02em;font-weight:500;color:inherit}
header.nav.nav3 .n3-a .n3-lead .n3-card-line,header.nav.nav3 .n3-a .n3-card-lead .n3-card-line{display:block;font-size:15px;line-height:1.45;color:var(--n3-ink2);max-width:24em}
header.nav.nav3 .n3-a .n3-lead .n3-card-foot,header.nav.nav3 .n3-a .n3-card-lead .n3-card-foot{display:flex;align-items:center;justify-content:flex-start;gap:8px;color:inherit;font:500 15px/1.3 var(--n3-body)}
header.nav.nav3 .n3-a .n3-card-lead .n3-card-foot .n3-ic{display:block;width:16px;height:16px;color:inherit}
header.nav.nav3 .n3-a .n3-card-lead .n3-here{order:2;margin-left:auto;background:#fff;color:#1F6FB8}
header.nav.nav3 .n3-a a.n3-card-lead{background:#1F6FB8;color:#fff}
header.nav.nav3 .n3-a a.n3-card-lead .n3-lead-k,header.nav.nav3 .n3-a a.n3-card-lead .n3-card-line{color:rgba(255,255,255,.9)}
header.nav.nav3 .n3-col{display:flex;flex-direction:column;gap:2px;min-width:0}
header.nav.nav3 .n3-gl{margin:8px 12px 6px;font:500 13px/1.3 var(--n3-body);color:var(--n3-ink2)}
header.nav.nav3 .n3-a .n3-col .n3-card{display:grid;grid-template-columns:36px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:1px;align-items:center;min-height:0;padding:9px 12px;border:0;border-radius:12px;background:transparent}
header.nav.nav3 .n3-a .n3-col .n3-card-top{display:contents}
header.nav.nav3 .n3-a .n3-col .n3-card-ic{grid-column:1;grid-row:1/span 2;width:36px;height:36px;padding:8px;margin:0;border-radius:10px;background:var(--n3-panel);color:var(--n3-brand)}
header.nav.nav3 .n3-a .n3-col .n3-card-title{grid-column:2;grid-row:1;align-self:end;font-size:15.5px;line-height:1.3;font-weight:500;color:var(--n3-ink)}
header.nav.nav3 .n3-a .n3-col .n3-card-line{display:block;grid-column:2;grid-row:2;align-self:start;font-size:13px;line-height:1.4;color:var(--n3-ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
header.nav.nav3 .n3-a .n3-col .n3-card-foot{grid-column:3;grid-row:1/span 2}
header.nav.nav3 .n3-a .n3-col .n3-card-foot .n3-ic{display:none}
header.nav.nav3 .n3-a .n3-col .n3-card[aria-current="page"],header.nav.nav3 .n3-a .n3-col .n3-card-here{background:var(--n3-panel)}
header.nav.nav3 .n3-a .n3-col .n3-card[aria-current="page"] .n3-card-ic,header.nav.nav3 .n3-a .n3-col .n3-card-here .n3-card-ic{background:#fff}
}
@media (min-width:810px) and (hover:hover){
header.nav.nav3 .n3-a .n3-col .n3-card:hover{background:var(--n3-wash);transform:none}
header.nav.nav3 .n3-a a.n3-lead:hover{background:#ECECE8}
header.nav.nav3 .n3-a a.n3-card-lead:hover{background:#1A63A6}
}
header.nav.nav3 .n3-a .n3-col .n3-card:focus-visible,header.nav.nav3 .n3-a a.n3-lead:focus-visible,header.nav.nav3 .n3-a a.n3-card-lead:focus-visible{outline:2px solid var(--n3-ink);outline-offset:2px}
@media (max-width:999px) and (min-width:810px){header.nav.nav3 .n3-a .n3-col .n3-card-line{display:none}header.nav.nav3 .n3-a .n3-col .n3-card-title{grid-row:1/span 2;align-self:center}}
@media (min-width:810px){
header.nav.nav3 .n3-a .n3-lead .n3-card-foot,header.nav.nav3 .n3-a .n3-card-lead .n3-card-foot{margin:0;align-self:stretch;justify-content:flex-start;width:100%}
header.nav.nav3 .n3-lead-go{white-space:nowrap}
header.nav.nav3 .n3-a a.n3-lead .n3-card-foot::after{content:"→";font-weight:400}
}

/* 8 Oct (owner): "Book a demo" in the bar is a blue button on every page */
header.nav.nav3 .n3-cta{background:#1F6FB8;color:#fff}
@media (hover:hover){header.nav.nav3 .n3-cta:hover{background:#1A63A6}}

/* 8 Oct (owner): the bar follows the page's columns. Its outer edges are the page margins (the same edges as every tile and
   the hero panel), at every width, instead of a centred bar capped at 1200 px. The dropdown sheets take the same width.
   At the top of a page, where the bar has no pill, the logo and "Book a demo" sit exactly on those edges. */
header.nav.nav3{--n3-w:calc(100% - 2 * var(--gut,16px))}
header.nav.nav3:not(.nav-solid):not(.n3-has-open) .n3-bar{padding-inline:0}
header.nav.nav3 .n3-bar{transition:background-color .25s ease-out,border-color .25s ease-out,box-shadow .25s ease-out,padding .3s cubic-bezier(.2,0,0,1)}
@media (prefers-reduced-motion:reduce){header.nav.nav3 .n3-bar{transition:none}}

/* page tone (8 Oct, owner): "See the overview" on the menu's blue tile is a tinted, see-through button */
@media (min-width:810px){
header.nav.nav3 .n3-a a.n3-card-lead:not([aria-current="page"]) .n3-card-foot{align-self:flex-start;width:auto;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
}
@media (min-width:810px){header.nav.nav3 .n3-a a.n3-card-lead:not([aria-current="page"]) .n3-card-foot{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}}