header .brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 0;
}
header .brand-logo {
  display: block;
  position: relative;
  width: 210px;
  max-width: 100%;
  aspect-ratio: 210 / 54;
  overflow: hidden;
  background: transparent;
}
header .brand-logo img {
  position: absolute;
  top: -30%;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
}
/* Reuse the approved bitmap's exact letter shapes as a white wordmark.
   The emblem keeps its original colors, without a surrounding panel. */
header .brand-logo::after {
  content: '';
  position: absolute;
  top: -30%;
  left: 0;
  width: 100%;
  aspect-ratio: 1983 / 793;
  background: #fff;
  -webkit-mask: url('/mypekin-logo.webp') center / 100% 100% no-repeat;
  mask: url('/mypekin-logo.webp') center / 100% 100% no-repeat;
  clip-path: inset(0 0 0 29%);
  pointer-events: none;
}
header .brand small {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #c4dde0;
}
@media (max-width: 1000px) {
  header .brand { flex: 1; min-width: 0; padding: 0; }
  header .brand-logo { width: min(210px, 100%); }
  header .brand small { max-width: 240px; }
}