/* The app's clay and teal people, in paper when placed over photography. */
header .brand {
  --brand-left:#b0795b;
  --brand-right:#5f8a8b;
  --brand-right-opacity:1;
  color:var(--pine);
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  white-space:nowrap;
}

.brand-symbol {
  display:block;
  width:42px;
  height:24px;
  flex:none;
}

.brand-symbol circle:first-child {
  fill:var(--brand-right);
  opacity:var(--brand-right-opacity);
}
.brand-symbol circle:last-child { fill:var(--brand-left); }

body:is(.home-page,.schools-page) .site-header:not(.has-surface):not(.menu-open) .brand {
  --brand-left:currentColor;
  --brand-right:currentColor;
  --brand-right-opacity:.45;
  color:inherit;
}

header .nav .btn { white-space:nowrap; }

@media (max-width:760px) {
  header .brand { gap:7px; font-size:24px; }
  .brand-symbol { width:31.5px; height:18px; }
}

@media (max-width:620px) {
  body:not(.home-page):not(.schools-page):not(.faq-page) header .nav .btn {
    padding:10px 14px;
    font-size:11px;
  }
}

@media (max-width:380px) {
  header .brand { gap:6px; font-size:22px; }
  .brand-symbol { width:28px; height:16px; }
}

@media (max-width:350px) {
  header .brand { gap:5px; font-size:19px; }
  .brand-symbol { width:24.5px; height:14px; }
  header .nav { gap:12px; }
  header .nav-links { gap:8px; }
}