header {
  transition: box-shadow 180ms ease;
}
header.is-scrolled {
  box-shadow: 0 10px 28px rgba(16, 34, 24, 0.08);
}
.brand .mark,
.brand .symbol,
.brand .swatch {
  transition: transform 180ms var(--motion-ease);
}
.role-list summary b,
.faq summary b {
  display: inline-block;
  transition: transform 180ms cubic-bezier(0.65, 0.05, 0.35, 1);
}
.role-list details[open] summary b,
.faq details[open] summary b {
  transform: rotate(45deg);
}
@media (hover: hover) and (pointer: fine) {
  .brand:hover .mark,
  .brand:hover .symbol,
  .brand:hover .swatch {
    transform: rotate(-4deg) scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  header,
  .brand .mark,
  .brand .symbol,
  .brand .swatch,
  .role-list summary b,
  .faq summary b {
    transition: none;
  }
  .role-list details[open] summary b,
  .faq details[open] summary b,
  .brand:hover .mark,
  .brand:hover .symbol,
  .brand:hover .swatch {
    transform: none;
  }
}