.brand {
  display: flex;
  align-items: center;
  width: max-content;
  color: #fff;
  text-decoration: none;
}

.brand-art {
  position: relative;
  display: block;
  width: 164px;
  aspect-ratio: 754 / 210;
  isolation: isolate;
}

.brand-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  pointer-events: none;
}

.brand-art-mark {
  clip-path: inset(0 74% 0 0);
  transform-origin: 13% 58%;
  animation: ockie-smile-hello 7s cubic-bezier(.2,.8,.2,1) infinite;
}

.brand-art img.brand-art-wordmark {
  clip-path: inset(0 0 0 25%);
  filter: brightness(0) invert(1);
}

.brand:hover .brand-art-mark,
.brand:focus-visible .brand-art-mark {
  animation: ockie-smile-wave .7s cubic-bezier(.2,.8,.2,1);
}

@keyframes ockie-smile-hello {
  0%, 72%, 100% { transform: translateY(0) rotate(0) scale(1); }
  77% { transform: translateY(-1px) rotate(-7deg) scale(1.04); }
  83% { transform: translateY(0) rotate(5deg) scale(1.02); }
  89% { transform: translateY(0) rotate(0) scale(1); }
}

@keyframes ockie-smile-wave {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  35% { transform: translateY(-2px) rotate(-10deg) scale(1.07); }
  70% { transform: translateY(0) rotate(7deg) scale(1.03); }
}

.pilot footer .brand-art {
  width: 142px;
}

@media (max-width: 700px) {
  .brand-art { width: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-art-mark { animation: none; }
}