/*
 * hero-title.css — the big headline whose "o" is a looping Lottie eye.
 * Shared by About ("Ab[o]ut") and Connect ("C[o]nnect").
 *
 * The visible word is split into chunks around a fixed-size box holding the
 * animation. The negative margins pull the chunks back over that box's
 * padding so the eye optically occupies a normal letter slot; `top` drops it
 * onto the baseline. These numbers are tuned by eye, not derived — changing
 * the font or the Lottie means retuning them.
 */

.hero-title {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: var(--size-hero-title);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.hero-title__visual {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.hero-title__chunk {
  flex-shrink: 0;
}

.hero-title__chunk:first-child {
  margin-right: -0.05em;
}

.hero-title__chunk:last-child {
  margin-left: -0.05em;
}

.hero-title__o {
  position: relative;
  top: calc(0.32em - 3px);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.02em;
  height: 1.12em;
  margin: 0 calc(-0.14em - 1px);
  overflow: visible;
}

.hero-title__lottie {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: scale(1.04);
  transform-origin: 50% 58%;
}

/* lottie-web sizes its own SVG from the composition; force it to the box. */
.hero-title__lottie svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}