.hv {
    --hv-brand: var(--color_brand, #b0003a);
    --hv-soft: color-mix(in srgb, var(--hv-brand) 7%, #fff);
    --hv-soft2: color-mix(in srgb, var(--hv-brand) 16%, #fff);
    --hv-ink: #1b1d24;
    --hv-muted: #5f6472;
    --hv-line: #e6e8ee;
    --hv-dot: #c9cdd6;
    padding: clamp(48px, 6vw, 80px) 0;
    color: var(--hv-ink)
}

.hv__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 40px 64px;
    align-items: center
}

.hv__title {
    margin: 0 0 14px;
    font-size: clamp(24px, 2.8vw, 34px);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.01em
}

.hv__lead {
    margin: 0 0 22px;
    max-width: 520px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--hv-muted)
}

.hv__area {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    font-weight: 600
}

.hv__area svg {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--hv-brand)
}

.hv__track {
    position: relative;
    margin: 0;
    padding: 28px 24px 28px 28px;
    list-style: none;
    border-radius: 20px;
    background: var(--hv-soft)
}

.hv__stop {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: start;
    padding-bottom: 26px
}

.hv__stop:last-child {
    padding-bottom: 0
}

.hv__stop::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 20px;
    bottom: 0;
    width: 2px;
    background: var(--hv-brand);
    transform-origin: top
}

.hv__stop:last-child::before {
    display: none
}

.hv__dot {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    border: 2px solid var(--hv-brand);
    background: #fff
}

.hv__dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--hv-brand)
}

.hv__stop--final .hv__dot {
    width: 26px;
    height: 26px;
    margin: -2px 0 0 -3px;
    box-shadow: 0 0 0 6px var(--hv-soft2)
}

.hv__name {
    margin: 0 0 3px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35
}

.hv__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--hv-muted)
}

.hv__time {
    align-self: start;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--hv-ink)
}

.hv__stop--final .hv__time {
    background: var(--hv-brand);
    color: #fff
}

.hv__home {
    margin-top: clamp(40px, 5vw, 64px)
}

.hv__sub {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3
}

.hv__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 40px;
    margin: 0;
    padding: 0;
    list-style: none
}

.hv__item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 0;
    border-top: 1px solid var(--hv-line)
}

.hv__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--hv-soft);
    color: var(--hv-brand)
}

.hv__icon svg {
    width: 20px;
    height: 20px
}

.hv__item-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35
}

.hv__item-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--hv-muted)
}

@supports (animation-timeline:view()) {
    @media (prefers-reduced-motion:no-preference) {
        .hv__stop::before {
            animation: hv-line linear both;
            animation-timeline: view();
            animation-range: entry 90% cover 45%
        }

        .hv__dot {
            animation: hv-dot linear both;
            animation-timeline: view();
            animation-range: entry 90% cover 40%
        }

        .hv__stop--final .hv__time {
            animation: hv-final linear both;
            animation-timeline: view();
            animation-range: entry 100% cover 45%
        }
    }
}

@keyframes hv-line {
    from {
        transform: scaleY(0)
    }

    to {
        transform: scaleY(1)
    }
}

@keyframes hv-dot {
    from {
        border-color: var(--hv-dot)
    }

    to {
        border-color: var(--hv-brand)
    }
}

@keyframes hv-final {
    from {
        background: #fff;
        color: var(--hv-ink)
    }

    to {
        background: var(--hv-brand);
        color: #fff
    }
}

@media (max-width:1024px) {
    .hv__top {
        grid-template-columns: 1fr
    }

    .hv__lead {
        max-width: 640px
    }

    .hv__track {
        max-width: 640px
    }

    .hv__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 32px
    }
}

@media (max-width:600px) {
    .hv__track {
        padding: 22px 16px 22px 18px;
        border-radius: 16px
    }

    .hv__stop {
        grid-template-columns: 20px minmax(0, 1fr);
        column-gap: 14px
    }

    .hv__dot {
        grid-column: 1;
        grid-row: 1/3
    }

    .hv__stop>div {
        grid-column: 2;
        grid-row: 2
    }

    .hv__time {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
        margin-bottom: 6px
    }

    .hv__list {
        grid-template-columns: 1fr
    }

    .hv__item {
        padding: 18px 0
    }
}