.brand-logo { display:block; width:34px; height:34px; flex:0 0 auto; }
.brand-footer .brand-logo { width:31px; height:31px; }
.brand-name { color:#315f8d; font-size:13px; font-weight:700; letter-spacing:.045em; line-height:1; }
.brand-footer .brand-name { color:#9ec3e2; }

.site-header { transition:transform .28s ease, border-color .2s ease, background .2s ease; }
.site-header.is-hidden { transform:translateY(-100%); }

.desktop-nav a[href^="#"], .mobile-menu a[href^="#"] { position:relative; }
.desktop-nav a[href^="#"]::after, .mobile-menu a[href^="#"]::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;
  height:1px;
  background:var(--blue);
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .28s ease;
}
.desktop-nav a[href^="#"].is-active::after, .mobile-menu a[href^="#"].is-active::after {
  transform:scaleX(1);
  transform-origin:left center;
}
.desktop-nav a[href^="#"].is-active { color:var(--navy); }

@media (max-width: 980px) {
  .mobile-menu a[href^="#"]::after { bottom:5px; right:auto; width:72px; }
}

@media (max-width: 720px) {
  .brand-logo { width:32px; height:32px; }
  .brand-name { font-size:12px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .desktop-nav a[href^="#"]::after,
  .mobile-menu a[href^="#"]::after { transition:none; }
}