/* ==========================================================================
   INTERAIQ — brand lockups (shared by every page)
   Logo artwork lives in assets/brand/. Inline SVGs use currentColor for the
   symbol + wordmark and --blue for the electric cobalt dot.
   ========================================================================== */
@view-transition { navigation: auto; }

.brand-link { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
.brand-link:hover, .cs .brand-link:hover { color: var(--ink); }
.logo { display: block; height: 34px; width: auto; aspect-ratio: 3.571; overflow: visible; }
.logo-dot { fill: var(--blue, #4F6BFF); transform-box: fill-box; transform-origin: center; transition: transform .28s cubic-bezier(.2,.8,.2,1); }

/* Interactive detail: the dot drifts up and out a touch, then settles back */
.brand-link:hover .logo-dot,
.brand-link:focus-visible .logo-dot,
.foot-logo:hover .logo-dot { transform: translate(0, -10%) scale(1.08); }

/* Wordmark treatment for the name in running display type: INTER·AI·Q */
.wm { font-weight: 400; }
.wm b { font-weight: 800; }

/* Footer lockup (home page) */
.foot-logo { margin: 96px 0 0; color: #F7F7F8; }
.foot-logo .logo { width: 100%; height: auto; max-width: 1100px; }

@media (max-width: 860px) {
  .logo { height: 28px; }
  .foot-logo { margin-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .logo-dot { transition: none; }
  .brand-link:hover .logo-dot,
  .brand-link:focus-visible .logo-dot,
  .foot-logo:hover .logo-dot { transform: none; }
}