.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  position: static;
  font-family: Questrial, Arial, sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -1.4px;
  text-transform: uppercase;
}
.brand .brand-mark {
  position: static;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
}
.brand-name { font: inherit; letter-spacing: inherit; }
@media (max-width: 1280px) {
  .brand { font-size: 33px; letter-spacing: -1.15px; gap: 13px; }
  .brand .brand-mark { flex-basis: 44px; width: 44px; height: 44px; }
  .header-inner { gap: 24px; padding: 25px 32px; }
  .navigation { font-size: 15px; gap: 18px; }
}
@media (max-width: 1100px) {
  .header-inner { flex-wrap: wrap; }
  .menu-toggle { display: block; margin-left: auto; border: 0; background: none; color: white; }
  .navigation { display: none; width: 100%; margin: 0; }
  .navigation.open { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 10px 0; }
}
@media (max-width: 900px) {
  .brand { font-size: 31px; letter-spacing: -1.08px; }
}
@media (max-width: 600px) {
  .header-inner { padding: 24px 20px; gap: 12px; }
  .brand { font-size: 23px; letter-spacing: -.8px; gap: 10px; }
  .brand .brand-mark { flex-basis: 34px; width: 34px; height: 34px; }
  .menu-toggle { padding: 0; font-size: 12px; }
  .menu-toggle span { margin-left: 4px; }
}
@media (max-width: 380px) {
  .brand { font-size: 20px; letter-spacing: -.7px; gap: 8px; }
}