/* one header for every page: the boxed bar from the home page on desktop, logo fitted inside it */
@media (min-width:821px){
  header.nav,header.nav.plain{position:sticky;top:14px;left:auto;right:auto;margin-top:14px}
  header.nav.plain .nav-in{background:var(--paper);border:1.5px solid var(--ink);border-radius:4px;height:76px}
  header.nav .brand,header.nav.plain .brand{height:auto;overflow:visible;background:transparent}
  header.nav .brand img,header.nav.plain .brand img:not(.logo-light){height:64px;width:auto;display:block;mix-blend-mode:normal;background:transparent}
  header.nav.plain .brand img{mix-blend-mode:normal}
  header.nav .brand img.logo-light,header.nav.plain .brand img.logo-light{display:none!important}
  header.nav .brand{margin-left:-14px}
  .assess,.contact,.legal,.pt{padding-top:56px}
}
/* phones: logo sits on the page with no bar, sized so the new logo is not cropped */
@media (max-width:820px){
  header.nav .brand,header.nav.plain .brand,header.nav.logo-chip .brand{height:auto;overflow:visible}
  header.nav .brand img,header.nav .brand img.logo-light,header.nav.plain .brand img:not(.logo-light),header.nav.logo-chip .brand img{height:56px;width:auto}
  header.nav .nav-in{height:64px}
}
/* phone home page: same header logo as the other pages */
@media (max-width:820px){
  header.nav:not(.plain) .brand{background:transparent;border-radius:0;padding:0}
  header.nav:not(.plain) .brand img,header.nav:not(.plain).logo-ready .brand img{display:none}
  header.nav:not(.plain) .brand img.logo-hero,header.nav:not(.plain).logo-ready .brand img.logo-hero{display:block;height:50px;width:auto;filter:none}
  /* the green gradient headline was clipping the tail of the g in Knowing: give the line room below */
  .hero h1 .em{padding-bottom:.18em;margin-bottom:-.18em}
}


@media (min-width:821px){.brand img.logo-hero{display:none!important}}