

.intro {
  margin-bottom: var(--space-12);
}

.intro__heading {
  
  max-width: 85rem;            
  margin-inline: auto;
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-loose);
  text-wrap: balance;
  text-align: center;
  
  overflow-wrap: break-word;     
  overflow-wrap: anywhere;       
}


.intro__seg {
  display: inline-block;
}

.intro__icon {
  display: inline-block;
  width: 1.35em;               
  height: 1.35em;
  vertical-align: -0.32em;     
  margin-right: 0.12em;
}



.intro__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  width: 0;
  height: clamp(34px, 4.5vw, 64px);
  border-radius: clamp(8px, 1.2vw, 18px);
  top: -0.08em;
  background-color: var(--chip);
  opacity: 0;
  transform: scale(0.72) translateY(6px);
  filter: blur(4px);
  transition:
    width 0.38s var(--intro-ease-spring),
    margin 0.38s var(--intro-ease-spring),
    transform 0.38s var(--intro-ease-spring),
    opacity 0.28s ease,
    filter 0.32s ease;
}

.intro__chip.is-open {
  width: clamp(34px, 4.5vw, 64px);
  margin: 0 5px 0 0;
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
}

.intro__icon,
.intro__chip > svg {
  position: absolute;
  inset: 0;
  width: 76%;
  height: 76%;
  margin: auto;
  object-fit: contain;
}

.intro__chip > svg { opacity: 0; transition: opacity 0.175s ease; }
.intro__chip.is-ready > svg { opacity: 1; }

.intro__word { transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1); }


.no-js .intro__chip {
  width: clamp(34px, 4.5vw, 64px);
  margin: 0 5px 0 0;
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .intro__chip {
    transition: none;
    width: clamp(34px, 4.5vw, 64px);
    margin: 0 5px 0 0;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .intro__word { transition: none; }
}



@media (max-width: 48rem) {
  .intro__heading {
    text-align: left;
    text-wrap: pretty;         
    font-weight: var(--fw-bold);
    font-size: var(--fs-h2);
  }
}
