/* Get The FOG Out: new header, footer and phone call bar for the older page designs.
   Everything is scoped to header.site, footer.site and .callbar so it cannot restyle the page content. */
header.site,footer.site,.callbar{
  --blue:#0060A8;--navy:#05203A;--yellow:#F6C400;--yellow-hi:#FFD400;--surface:#FFFFFF;
  --ink:#0B1A25;--ink-2:#20384A;--muted:#56728A;--line:#D5E1EA;--line-strong:#B6C9D7;
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Source Sans 3","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-family:var(--body);line-height:1.6;box-sizing:border-box
}
header.site *,footer.site *,.callbar *{box-sizing:border-box}
header.site .wrap,footer.site .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .bar{display:flex;align-items:center;gap:28px;padding:14px 24px;position:relative}
header.site .logo-link{display:inline-flex;line-height:0;text-decoration:none;flex:none}
header.site .logo-plate{display:inline-block;background:#fff;padding:5px 9px;border-radius:2px;line-height:0}
header.site .logo{height:38px;width:auto;flex:none;margin:0}
header.site nav.main{display:flex;gap:24px;margin-left:auto;align-items:center}
header.site nav.main a{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink-2);text-decoration:none;white-space:nowrap}
header.site nav.main a:hover{color:var(--blue)}
header.site .tel{font-family:var(--display);font-weight:800;font-size:17px;color:var(--ink);text-decoration:none;white-space:nowrap;line-height:1.25}
header.site .tel span{display:block;font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.13em;color:var(--muted);text-transform:uppercase}
header.site .btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;letter-spacing:-.01em;border:2px solid transparent;border-radius:2px;cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1.2}
header.site .btn-primary{background:var(--yellow);color:#0B1A25;border-color:var(--yellow)}
header.site .btn-primary:hover{background:var(--yellow-hi);border-color:var(--yellow-hi)}
header.site .hdr-cta{padding:12px 20px;font-size:15px}
header.site .menu-btn{display:none;flex:none;width:44px;height:44px;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:transparent;border:2px solid var(--line-strong);border-radius:2px;cursor:pointer}
header.site .menu-btn i{display:block;width:20px;height:2px;background:var(--ink)}
footer.site{background:var(--navy);color:#A9C6DA;padding:60px 0 0;font-size:15px}
footer.site .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr 1.2fr;gap:32px;padding-bottom:44px}
footer.site h4{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7C9BB2;margin:0 0 16px;line-height:1.4}
footer.site p{margin:0;font-size:15px;line-height:1.6}
footer.site a{color:#DCEBF5;text-decoration:none;display:block;padding:5px 0;font-size:15px;line-height:1.5}
footer.site a:hover{color:var(--yellow)}
footer.site .logo-link{display:inline-block;padding:0}
footer.site .logo-plate{display:inline-block;background:#fff;padding:10px 14px;border-radius:2px;line-height:0;margin-bottom:20px}
footer.site .flogo{width:150px;height:auto;max-width:100%;margin:0}
footer.site .ft-note{display:block;padding:5px 0;color:#A9C6DA}
footer.site .foot-bottom{border-top:1px solid rgba(255,255,255,.15);padding:20px 0 30px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:#7C9BB2;display:flex;flex-wrap:wrap;gap:8px 26px}
footer.site .foot-bottom a{display:inline;padding:0;font-size:inherit}
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;grid-template-columns:1fr 1fr;border-top:1px solid rgba(0,0,0,.18)}
.callbar a{padding:15px 10px;text-align:center;font-family:var(--display);font-weight:700;font-size:16px;text-decoration:none}
.callbar .c1{background:var(--navy);color:#fff}
.callbar .c2{background:var(--yellow);color:#0B1A25}
@media (max-width:1000px){
  header.site .menu-btn{display:inline-flex}
  header.site .tel{margin-left:auto}
  header.site nav.main{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;margin:0;background:var(--surface);border-bottom:1px solid var(--line);padding:4px 24px 10px}
  header.site.open nav.main{display:flex}
  header.site nav.main a{padding:14px 0;border-top:1px solid var(--line);font-size:16px}
  header.site nav.main a:first-child{border-top:0}
  footer.site .foot-grid{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:620px){
  header.site .bar{gap:12px;padding-top:10px;padding-bottom:10px}
  header.site .tel{display:none}
  header.site .hdr-cta{margin-left:auto;padding:10px 14px;font-size:14px}
  header.site .logo{height:32px}
  header.site .menu-btn{width:42px;height:42px}
  footer.site .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .callbar{display:grid}
  body{padding-bottom:56px}
}
@media (max-width:400px){
  header.site .bar{padding-left:16px;padding-right:16px;gap:10px}
  header.site .logo{height:28px}
  header.site .hdr-cta{padding:9px 10px;font-size:13px}
}

/* Oct 20: navy header with a yellow line, tagline beside the logo, How it works back in the menu */
header.site{background:#05203A;border-bottom:3px solid #F6C400;backdrop-filter:none;-webkit-backdrop-filter:none}
header.site .hdr-plate{background:#fff}
header.site .hdr-tag{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#F6C400;white-space:nowrap;margin-left:-6px;line-height:1.3}
header.site nav.main a{color:#fff}
header.site nav.main a:hover,header.site nav.main a[aria-current="page"]{color:#F6C400}
header.site .tel{color:#fff}
header.site .tel span{color:#A9C6DA}
header.site .menu-btn{border-color:rgba(255,255,255,.45)}
header.site .menu-btn i{background:#fff}
@media (min-width:1001px) and (max-width:1120px){header.site nav.main a[href$="#how"]{display:inline}}
@media (max-width:1000px){header.site nav.main{background:#05203A;border-bottom:3px solid #F6C400}header.site nav.main a{color:#fff;border-top-color:rgba(255,255,255,.15)}}
@media (max-width:820px){header.site .hdr-tag{display:none}}
