/*
 * Preserve the tagline's existing typography, width, line breaks and left text alignment.
 * Only rebalance its visual position on wider screens.
 */
@media (min-width: 801px) {
    .hba-balanced-tagline {
        position: relative;
        left: 6vw;
        top: 18px;
        text-align: left !important;
    }
}

/*
 * Phone/tablet: keep the existing horizontal position to avoid narrowing or
 * destabilizing the mobile composition.
 */
@media (max-width: 800px) {
    .hba-balanced-tagline {
        position: relative;
        left: 0;
        top: 6px;
        text-align: left !important;
    }
}