.brand { gap: 14px; flex-shrink: 0; }
.monogram {
  display: block;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border: 0;
  border-radius: 0;
}
.brand-name { font-size: 18px; letter-spacing: -.35px; }
.brand-sub {
  font-size: 9px;
  letter-spacing: 1.15px;
  line-height: 1.5;
  margin-top: 7px;
}
@media (max-width: 1100px) and (min-width: 721px) {
  .header-inner { gap: 20px; }
  .brand { gap: 10px; }
  .brand-sub { max-width: 190px; font-size: 8px; letter-spacing: .8px; }
  .navigation { gap: 16px; }
  .lang { padding-left: 15px; }
}
@media (max-width: 720px) {
  .hero h1 { font-size: clamp(40px, 12vw, 62px); }
  .header-inner { gap: 12px; }
  .brand { gap: 10px; flex-shrink: 1; min-width: 0; }
  .brand > span { min-width: 0; }
  .monogram { width: 44px; height: 44px; }
  .brand-name { font-size: 14px; white-space: nowrap; }
  .brand-sub { max-width: 178px; font-size: 7.5px; letter-spacing: .7px; margin-top: 5px; }
  .lang { gap: 7px; padding-left: 0; flex-shrink: 0; }
  .menu-toggle { flex-shrink: 0; padding: 7px; }
}