.logo-brand {
  display: inline-flex;
  align-items: center;
  padding: 2px 0;
}

.animated-logo {
  position: relative;
  display: block;
  width: 148px;
  aspect-ratio: 4 / 3;
}

.logo-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rotating-globe {
  position: absolute;
  z-index: 2;
  left: 36%;
  top: 21.5%;
  width: 27%;
  height: auto;
  border-radius: 50%;
  animation: globeRotate 14s linear infinite;
  transform-origin: center;
}

@keyframes globeRotate {
  to { transform: rotate(360deg); }
}

footer .logo-brand {
  width: max-content;
  padding: 8px 12px;
  background: #f7f3e9;
}

footer .animated-logo { width: 170px; }

@media (max-width: 600px) {
  .animated-logo { width: 125px; }
  footer .animated-logo { width: 155px; }
}

@media (prefers-reduced-motion: reduce) {
  .rotating-globe { animation: none; }
}