/* Small refinements to the existing hero; retain its layout, artwork and copy. */
.hero h1.display { line-height: 1.08; }
.hero .reel-caption {
  grid-template-columns: 36px minmax(0, 16rem) 36px;
  gap: 16px;
}
.hero .reel-caption strong { font-size: 16px; line-height: 1.35; }
.hero .reel-nav { width: 36px; height: 36px; }
@media (min-width: 641px) {
  .hero .hero-lead { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; }
}
@media (max-width: 640px) {
  .hero .reel-caption { grid-template-columns: 36px minmax(0, 12rem) 36px; gap: 12px; }
}

/* The original mark, with independent dots that lift toward the pointer. */
.hero-intro-brand {
  appearance: none; padding: 0; border: 0; background: transparent;
  cursor: default; -webkit-tap-highlight-color: transparent;
}
.hero-intro-brand:active { cursor: default; }
.hero-intro-brand:focus-visible { outline: 1.5px solid var(--ink-3); outline-offset: 9px; border-radius: 3px; }
.hero-intro-symbol { overflow: visible; }
.hero-logo-dot {
  transform-box: fill-box; transform-origin: center;
  transform: translateY(calc(var(--lift, 0) * -8px)) scale(calc(1 + var(--lift, 0) * .055));
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo-dot { transform: none; }
}