.hero {
    --divider-h: clamp(48px, 5.2vw, 100px);
    background-color: var(--color-primary);
    color: var(--color-contrast);
    padding-block: var(--space-xl) 0;
    position: relative;
    z-index: 1;
}

.hero + * {
    --section-offset: var(--divider-h);
}

.hero__wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
}

.hero__wrapper .col:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    z-index: 1;
    margin-bottom: calc(var(--divider-h) * -1);
}

.hero__wrapper .col:nth-child(2) .hero-art {
    display: block;
    max-width: 100%;
    height: auto;
}

.hero__content {
    max-width: 54rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.hero__text p {
    margin-block-start: 0;
    font-size: var(--text-1);
}

.hero-highlights {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--space-md);
}

.hero-highlights li {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    position: relative;
    flex: 1;
    border-right: 2px solid var(--color-secondary);
}

.hero-highlights li:last-child {
    border: 0;
}

.hero-highlights img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    flex-shrink: 0;
}

.hero-highlights__title {
    font-size: var(--text-1);
    font-weight: var(--font-heavy);
    margin: 0;
}

/* Digits stay the same width while js/main-hero.js counts up, so the text doesn't wobble. */
.hero-highlights__value {
    font-variant-numeric: tabular-nums;
}

/* Finished number for assistive tech, added by the script while the visible one is counting. */
.hero-highlights__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.hero-highlights__description {
    font-size: var(--text-0);
    font-weight: var(--font-light);
    margin: 0;
}

.hero-divider {
    display: block;
    width: 100%;
    height: var(--divider-h);
    position: absolute;
    top: 100%;
    left: 0;
    color: var(--color-primary);
}

@media screen and (max-width: 1024px) {
    .hero__wrapper {
        grid-template-columns: 1fr;
    }

    .hero-highlights {
        flex-direction: column;
    }

    .hero-highlights li {
        border: 0;
    }
}

/* ----------------------------------------------------------------------
 * Growing flowers
 *
 * js/main-hero.js inlines nothing itself: the SVG is inlined by the template.
 * The script tags each path as a stem or head, sets its transform-origin and
 * --grow-delay / --grow-duration, then adds .is-grown to start the show.
 * Until then the paths are hidden, but only when JavaScript is running
 * (html.js), so a no-JS visitor sees the flowers straight away.
 * ------------------------------------------------------------------- */

.js svg.hero-art:not(.is-grown) path {
    opacity: 0;
}

svg.hero-art.is-grown .hero-art__stem {
    animation: hero-stem-grow var(--grow-duration, 700ms) cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--grow-delay, 0ms);
}

svg.hero-art.is-grown .hero-art__head {
    animation: hero-head-bloom var(--grow-duration, 650ms) cubic-bezier(0.34, 1.4, 0.64, 1) both;
    animation-delay: var(--grow-delay, 0ms);
}

@keyframes hero-stem-grow {
    from {
        opacity: 1;
        transform: scale(1, 0);
    }
    to {
        opacity: 1;
        transform: scale(1, 1);
    }
}

@keyframes hero-head-bloom {
    from {
        opacity: 0;
        transform: scale(0) rotate(-12deg);
    }
    40% {
        opacity: 1;
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .js svg.hero-art:not(.is-grown) path {
        opacity: 1;
    }

    svg.hero-art.is-grown .hero-art__stem,
    svg.hero-art.is-grown .hero-art__head {
        animation: none;
    }
}