:root{
  --pb-navy:#142A36;
  --pb-umber:#3B2F2B;
  --pb-gold:#E0A85A;
  --pb-apricot:#E9C7A3;
  --pb-clay:#B5A89A;
  --pb-rust:#C1573A;

  --bg:#FFFFFF;
  --text:var(--pb-umber);
  --heading:var(--pb-navy);
  --link:var(--pb-navy);
  --link-hover:var(--pb-rust);
  --border: color-mix(in srgb, var(--pb-clay) 28%, transparent);
  --tint: color-mix(in srgb, var(--pb-apricot) 10%, transparent);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  --measure: 68ch;
}

*{ box-sizing:border-box; }
html{ font-family:var(--font); font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{ margin:0; background:var(--bg); color:var(--text); line-height:1.55; }

.skip{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{ left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:#fff; border:1px solid var(--border); border-radius:.5rem; z-index:999; }

.container{
  max-width:72rem;
  margin:0 auto;
  padding:0 1.25rem;
}

.topbar{
  border-bottom:1px solid var(--border);
  background:#fff;
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 0;
  gap:1rem;
}

.brand{ display:flex; align-items:center; gap:.75rem; }
.brand__mark{ width:34px; height:34px; object-fit:contain; }
.brand__name{ font-weight:600; color:var(--heading); letter-spacing:-.01em; }

.topbar__links{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.toplink{
  color:var(--link);
  text-decoration:none;
  font-size:.95rem;
}
.toplink:hover{ color:var(--link-hover); text-decoration:underline; text-underline-offset:.18em; }

.masthead{
  height:180px;
  background-image:url("/img/bridge.png");
  background-size:cover;
  background-position:center 55%;
  border-bottom:1px solid var(--border);
}

.hero{ padding:2.5rem 0 1.25rem; }
h1,h2{ color:var(--heading); margin:0; letter-spacing:-.02em; }
h1{ font-size:2.25rem; line-height:1.15; margin-bottom:1rem; max-width:22ch; }
h2{ font-size:1.5rem; line-height:1.3; margin-bottom:.75rem; }

.lede{ font-size:1.125rem; max-width:var(--measure); margin:0 0 .75rem; }
.meta{ margin:0; color:color-mix(in srgb, var(--text) 75%, transparent); }

.section{ padding:2rem 0; }
.section--tint{ background:var(--tint); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.bullets{
  margin:.5rem 0 0;
  padding-left:1.25rem;
  max-width:var(--measure);
}
.bullets li{ margin:.35rem 0; }
.bullets li::marker{ color:var(--pb-gold); }

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1.25rem;
}

.card{
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.25rem;
  background:#fff;
}

.founder__name{ font-weight:600; margin:.25rem 0 0; }
.founder__role{ margin:.25rem 0 .75rem; color:color-mix(in srgb, var(--text) 75%, transparent); }

.link{
  color:var(--link);
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
}
.link:hover{ color:var(--link-hover); }

.footer{
  border-top:1px solid var(--border);
  padding:1.25rem 0;
}
.footer__inner{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
  font-size:.95rem;
  color:color-mix(in srgb, var(--text) 75%, transparent);
}
.footer__sep{ opacity:.6; }

@media (max-width: 800px){
  .grid{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .masthead{ height:140px; background-position:center; }
  h1{ font-size:1.875rem; }
}