/* A small transparent location tag, with an independently rotating globe. */
.architecture-hero__badges { right: var(--hero-gutter); z-index:4; }
.architecture-hero__location {
  position: relative;
  width: auto;
  height: 35px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid #ffffff65;
  border-radius: 999px;
  background: #10131b22;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: none;
  color: #fff;
}
.architecture-hero__location-label {
  position: static;
  inset: auto;
  translate: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: 500 10.5px / 1.4 'DM Sans', Arial, sans-serif;
  letter-spacing: -.01em;
  text-transform: none;
  white-space: nowrap;
}
.architecture-hero__location-dot { opacity: .65; }
.onform-location-globe {
  position: relative;
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 1px solid #ffffffe6;
  border-radius: 50%;
}
.onform-location-globe__orbit {
  position: absolute;
  inset: -1px;
  transform-style: preserve-3d;
  animation: onform-location-spin 30s linear infinite !important;
  animation-play-state: running !important;
  will-change: transform;
}
.onform-location-globe__orbit > i {
  position: absolute;
  inset: 0;
  border: 1px solid #ffffffb3;
  border-radius: 50%;
  transform: rotateY(var(--longitude));
}
.onform-location-globe__orbit > i:nth-child(1) { --longitude: 0deg; }
.onform-location-globe__orbit > i:nth-child(2) { --longitude: 60deg; }
.onform-location-globe__orbit > i:nth-child(3) { --longitude: 120deg; }
.onform-location-globe::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  top: 32%;
  height: 36%;
  border: 1px solid #ffffffb3;
  border-radius: 50%;
}
@keyframes onform-location-spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
@media(max-width:600px) {
  .architecture-hero__badges { right: 20px; }
  .architecture-hero__location { height: 33px; padding: 7px 11px; gap: 8px; }
  .architecture-hero__location-label { font-size: 10px; }
}
@media(prefers-reduced-motion:reduce) {
  .onform-location-globe__orbit { animation-duration: 60s !important; }
}

/* The little location label lifts into the studio's blue on hover. */
.architecture-hero__location {
  transform-origin:right center;
  transition:background-color .45s ease,border-color .45s ease,box-shadow .5s ease,transform .55s cubic-bezier(.22,1,.36,1);
}
.onform-location-globe {
  transition:transform .65s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover) and (pointer:fine) {
  .architecture-hero__location:is(:hover,.is-hovered) {
    background:#012bba;
    border-color:#ffffffb3;
    box-shadow:0 8px 26px #012bba40,inset 0 1px 0 #ffffff20;
    transform:translateY(-3px) scale(1.045);
  }
  .architecture-hero__location:is(:hover,.is-hovered) .onform-location-globe { transform:rotate(-12deg) scale(1.1); }
}
@media (prefers-reduced-motion:reduce) {
  .architecture-hero__location,.onform-location-globe { transition:none; }
  .architecture-hero__location:is(:hover,.is-hovered),.architecture-hero__location:is(:hover,.is-hovered) .onform-location-globe { transform:none; }
}
