/*------------------------------------------------------------------*\
    COMPONENTS - Highlight Rotator
    Shared styles for .hero-highlight-text / .services-highlight-text
    Words stack in the same grid cell so only the active one is visible.
\*------------------------------------------------------------------*/

.hero-highlight-text,
.services-highlight-text {
    color: var(--color-accent);
    display: inline-grid;
    overflow: hidden;
    vertical-align: bottom;
}

.hero-highlight-text > *,
.services-highlight-text > * {
    grid-column: 1;
    grid-row: 1;
}

.hero-highlight-text > span,
.services-highlight-text > span {
    white-space: nowrap;
    will-change: opacity, transform;
    opacity: 0;
}