:root{
  --brand-teal:#159a8c;
  --brand-teal-bright:#24b4a5;
  --brand-yellow:#f2c94c;
  --cyan:#2ab5a7;
}
body:before{
  background-image:linear-gradient(rgba(21,154,140,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(21,154,140,.045) 1px,transparent 1px);
}
.topbar-inner{height:78px}
.brand{gap:13px;font-size:17px}
.brand-mark{
  width:42px;
  height:42px;
  border:0;
  border-radius:0;
  font-size:0;
  color:transparent;
  background:transparent url('./baranes-symbol-teal.svg') center/contain no-repeat;
  filter:drop-shadow(0 0 12px rgba(21,154,140,.18));
}
.brand>span:last-child{letter-spacing:.09em}
.brand:hover .brand-mark{filter:drop-shadow(0 0 15px rgba(36,180,165,.3))}
.nav a:hover,.nav a.active{background:#0d2927;color:#fff}
.btn.primary{
  background:var(--brand-teal);
  color:#f7fffd;
  border-color:#2aa99c;
  box-shadow:0 8px 28px rgba(21,154,140,.12);
}
.btn.primary:hover{background:var(--brand-teal-bright);border-color:#41c6b8}
.eyebrow,.kicker{color:var(--brand-teal-bright)}
.card a{color:var(--brand-teal-bright)}
.principle{border-left-color:var(--brand-teal)}

/* The topbar owns the brand mark. Keep page intros compact and content-first. */
.hero{padding-top:44px}
.page-hero{padding-top:40px}
.hero>div:first-child:before,
.page-hero:before,
.atlas-public-intro>div:first-child:before,
.atlas-toolbar>div:first-child:before{
  content:none!important;
  display:none!important;
}
.atlas-public-intro{padding-top:18px!important}
.atlas-toolbar>div:first-child{position:relative;padding-left:0!important}

/* Home: use the upper-right space for the headline, then let the evidence panel begin below it. */
@media(min-width:901px){
  .hero{
    padding-top:32px;
    grid-template-columns:minmax(0,1fr) minmax(180px,.52fr) minmax(300px,.48fr);
    grid-template-areas:
      "eyebrow eyebrow ."
      "title title ."
      "lede panel panel"
      "copy panel panel"
      "cta panel panel";
    column-gap:34px;
    row-gap:0;
    align-items:start;
  }
  .hero>div:first-child{display:contents}
  .hero .eyebrow{grid-area:eyebrow;margin-bottom:8px}
  .hero h1{
    grid-area:title;
    max-width:930px;
    margin:0 0 26px;
    font-size:clamp(52px,5.8vw,84px);
    line-height:.93;
  }
  .hero .lede{grid-area:lede}
  .hero .hero-copy{grid-area:copy}
  .hero .cta-row{grid-area:cta}
  .hero-panel{grid-area:panel;margin-top:34px}
}

.footer-inner>span:first-child{display:flex;align-items:center;gap:8px;color:#9eb0c2}
.footer-inner>span:first-child:before{
  content:"";
  width:22px;
  height:22px;
  flex:0 0 22px;
  background:url('./baranes-symbol-teal.svg') center/contain no-repeat;
}
.atlas-kicker{color:var(--brand-teal-bright)!important}
:focus-visible{outline:2px solid var(--brand-teal-bright);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media(max-width:900px){
  .topbar-inner{height:auto}
  .brand-mark{width:38px;height:38px}
  .hero{padding-top:32px}
  .page-hero{padding-top:30px}
  .atlas-public-intro{padding-top:16px!important}
}