:root{
  --canvas:#ffffff; --tint:#f4f6f6; --ink:#222222; --muted:#555f66;
  --accent:#33628c; --rule:#d8dddf; --charcoal:#2e2e2e;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);
  font-family:Lato,"Segoe UI",Arial,Helvetica,sans-serif;font-size:17px;line-height:1.65}
h1,h2,h3,.wordmark,.navstrip a,.rail h2,.credit,.num,.utility{
  font-family:Oswald,"Arial Narrow",Arial,Helvetica,sans-serif;font-weight:500}
a{color:var(--accent)}
a:focus-visible,.skip:focus{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:8px 12px;z-index:20}
.skip:focus{left:8px;top:8px}
.shell{max-width:1020px;margin:0 auto;padding:0 20px}

/* 1. nav strip above the header */
.navstrip{background:var(--charcoal)}
.navstrip ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.navstrip a{display:block;color:#f2f4f5;text-decoration:none;
  font-size:13px;letter-spacing:.09em;text-transform:uppercase;padding:13px 18px 12px}
.navstrip a:hover,.navstrip a[aria-current="page"]{background:#1d1d1d;color:#fff}

/* 2. wordmark band */
.wordband{border-bottom:1px solid var(--rule);background:#fff}
.wordband .shell{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:8px;padding-top:22px;padding-bottom:20px}
.wordmark{font-size:30px;letter-spacing:.06em;text-transform:uppercase;margin:0}
.wordmark a{color:var(--ink);text-decoration:none}
.utility{font-size:13px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}

/* 3. proposition band */
.hometop{background:var(--tint);border-bottom:1px solid var(--rule);
  padding:44px 0 40px}
.hometop h1{margin:0 0 14px;font-size:40px;line-height:1.18;max-width:20em;font-weight:500}
.hometop p{margin:0 0 16px;max-width:44em;font-size:17px}
.brk{color:var(--accent)}
.textlink{font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  font-family:Oswald,"Arial Narrow",Arial,sans-serif}

/* grid */
.grid{display:flex;gap:40px;align-items:flex-start;padding:36px 0 8px}
.col{flex:1 1 640px;min-width:0;max-width:640px}
.rail{flex:0 0 300px;width:300px}
.col p{max-width:62ch}
.col h2{font-size:24px;margin:0 0 12px;font-weight:500}
.pagetitle{font-size:30px;margin:0 0 10px;font-weight:500;line-height:1.2}
.titlerule{border:0;border-top:1px solid var(--rule);margin:0 0 22px}

/* 5. numbered capability rows */
.caps{margin:34px 0 0;border-top:1px solid var(--rule)}
.cap{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--rule)}
.num{flex:0 0 auto;color:var(--accent);font-size:34px;line-height:1}
.cap h3{margin:0 0 6px;font-size:21px;font-weight:500;line-height:1.3}
.cap p{margin:0 0 8px;font-size:16px}

/* 6. rail widgets */
.rail section{border:1px solid var(--rule);padding:16px 18px;margin:0 0 20px;background:#fff}
.rail h2{font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--rule);color:var(--ink)}
.rail ul{margin:0;padding-left:18px;font-size:15px}
.rail li{margin-bottom:7px}
.rail p{margin:0 0 10px;font-size:15px}
.quoted{font-family:Georgia,"Times New Roman",serif;font-style:italic;color:var(--muted)}
.factlist{list-style:none;padding:0;margin:0;font-size:15px}
.factlist li{border-bottom:1px dotted var(--rule);padding:6px 0}
.factlist li:last-child{border-bottom:0}

/* 7. updates band */
.updates{background:var(--tint);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:30px 0 26px;margin-top:30px}
.updates h2{font-size:13px;letter-spacing:.09em;text-transform:uppercase;margin:0 0 14px}
.upd{display:flex;gap:20px;padding:14px 0;border-top:1px solid var(--rule)}
.upd .year{flex:0 0 74px;color:var(--accent);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;font-family:Oswald,"Arial Narrow",Arial,sans-serif;padding-top:4px}
.upd h3{margin:0 0 4px;font-size:19px;font-weight:500;line-height:1.32}
.upd p{margin:0;font-size:15px;color:var(--muted)}

/* 8. footer */
.sitefoot{background:#f0f2f2;border-top:1px solid var(--rule);padding:32px 0 8px;margin-top:34px}
.footcols{display:flex;flex-wrap:wrap;gap:40px}
.footcols section{flex:1 1 240px}
.footcols h2{font-size:13px;letter-spacing:.09em;text-transform:uppercase;margin:0 0 10px;
  font-family:Oswald,"Arial Narrow",Arial,sans-serif;font-weight:500}
.footcols ul{list-style:none;margin:0;padding:0;font-size:15px}
.footcols li{margin-bottom:7px}
.footcols p{margin:0;font-size:15px;color:var(--muted)}
.credit{text-align:center;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);border-top:1px solid var(--rule);margin-top:26px;padding:14px 0 18px}
.related{margin-top:26px;border-top:1px solid var(--rule);padding-top:16px}
.related h2{font-size:13px;letter-spacing:.09em;text-transform:uppercase;margin:0 0 8px}
.related ul{list-style:none;padding:0;margin:0;font-size:16px}
.related li{margin-bottom:6px}
.sub{color:var(--accent);font-size:16px;letter-spacing:.06em;text-transform:uppercase;
  font-family:Oswald,"Arial Narrow",Arial,sans-serif;margin:26px 0 6px}

@media (max-width:820px){
  .grid{display:block;padding-top:26px}
  .col,.rail{max-width:100%;width:auto;flex:none}
  .rail{margin-top:30px}
  .hometop{padding:30px 0 28px}
  .hometop h1{font-size:29px}
  .navstrip a{padding:12px 14px;font-size:13px}
  .navstrip li{flex:1 1 auto}
  .navstrip a{text-align:center;min-height:44px}
  .footcols{display:block}
  .footcols section{margin-bottom:24px}
  body{font-size:16px}
  .num{font-size:27px}
  .pagetitle{font-size:25px}
}