.home-body .journey--premium {
    position: relative;
    padding: clamp(48px, 4.4vw, 80px) 0 clamp(58px, 5vw, 96px);
    overflow: hidden;
    background: #fcf9fc url('../img/home/milk-journey-backdrop.webp') center / cover no-repeat;
    color: #2d2431;
}
.milk-journey-shell { width: min(1800px, calc(100% - 112px)); margin-inline: auto; }
.milk-journey-heading { position: relative; max-width: 800px; margin: 0 0 66px; padding-left: 20px; text-align: left; }
.milk-journey-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 21px; color: #9a91a0; font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.milk-journey-eyebrow::before { content: ''; width: 38px; height: 2px; background: #cdb5e8; }
.home-body .journey--premium h2 { margin: 0 0 18px; font-family: var(--serif); font-size: clamp(2.75rem, 4.4vw, 5rem); font-weight: 600; line-height: 1.13; letter-spacing: -.04em; }
.milk-journey-highlight { position: relative; display: inline-block; color: #9b60bd; }
.milk-journey-highlight > svg { position: absolute; top: -.05em; left: calc(100% + 4px); width: .53em; height: .5em; fill: #c8a9df; }
.milk-journey-intro { max-width: 735px; margin: 0; color: #8b8392; font-size: clamp(.92rem, 1.12vw, 1.15rem); line-height: 1.65; }
.milk-journey-timeline { --journey-gap: clamp(28px, 4.4vw, 90px); position: relative; }
.milk-journey-path { position: absolute; z-index: 1; left: calc((100% - 4 * var(--journey-gap)) / 10); top: -19px; width: calc((100% + var(--journey-gap)) * .8); height: 83px; overflow: visible; pointer-events: none; }
.milk-journey-path path { fill: none; stroke: #d6c2e9; stroke-width: 1.7; vector-effect: non-scaling-stroke; }
.milk-journey-path circle { fill: #8f85c9; }
.milk-journey-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--journey-gap); margin: 0; padding: 0; list-style: none; }
.milk-journey-card { position: relative; display: flex; align-items: center; flex-direction: column; min-width: 0; padding: 42px 23px 26px; border: 1px solid #ffffffb3; border-radius: 48% 48% 28px 28px / 52px 52px 28px 28px; background: linear-gradient(160deg, #fffffff0, #ffffffbc); box-shadow: 0 20px 45px #58316e09; text-align: center; }
.milk-journey-number { position: absolute; z-index: 2; top: -33px; left: 50%; display: grid; place-items: center; width: 64px; height: 64px; border: 1.5px solid #dfcbef; border-radius: 50%; background: #fcf8ff; color: #7b369f; font-size: 1.2rem; font-weight: 700; transform: translateX(-50%); }
.milk-journey-icon { display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 3px; border-radius: 50%; background: radial-gradient(circle at 30% 20%, #f9effd, #efe2f9); color: #7e3aa1; }
.milk-journey-icon > svg { display: block; width: 55px; height: 55px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.home-body .journey--premium h3 { position: relative; width: 100%; margin: 0; padding-bottom: 17px; font-family: var(--serif); font-size: clamp(1.1rem, 1.35vw, 1.48rem); font-weight: 600; line-height: 1.3; letter-spacing: -.035em; }
.journey--premium h3::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 34px; height: 2px; border-radius: 2px; background: #eee2f6; transform: translateX(-50%); }
.milk-journey-card > p { max-width: 225px; margin: 14px 0 0; color: #8a8291; font-size: .84rem; line-height: 1.65; }
@media (max-width: 1350px) and (min-width: 1001px) {
    .milk-journey-shell { width: calc(100% - 72px); }
    .milk-journey-timeline { --journey-gap: 28px; }
    .milk-journey-card { padding-inline: 15px; }
    .milk-journey-card > p { font-size: .76rem; }
    .milk-journey-number { width: 56px; height: 56px; top: -29px; font-size: 1.05rem; }
    .milk-journey-icon { width: 76px; height: 76px; }
    .milk-journey-path { top: -19px; }
}
@media (max-width: 1000px) {
    .milk-journey-shell { width: calc(100% - 64px); }
    .milk-journey-heading { max-width: 650px; padding: 0; }
    .milk-journey-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 58px 24px; }
    .milk-journey-card { grid-column: span 2; padding-inline: 22px; }
    .milk-journey-card:nth-child(4) { grid-column: 2 / span 2; }
    .milk-journey-path { display: none; }
    .milk-journey-card > p { max-width: 210px; }
    .home-body .journey--premium { background-size: auto 100%; background-position: 66% center; }
}
@media (max-width: 640px) {
    .milk-journey-shell { width: calc(100% - 40px); }
    .milk-journey-heading { margin-bottom: 58px; }
    .home-body .journey--premium h2 { font-size: clamp(2.1rem, 6.8vw, 2.8rem); letter-spacing: -.045em; }
    .milk-journey-eyebrow { font-size: .65rem; margin-bottom: 16px; }
    .milk-journey-intro { font-size: .84rem; line-height: 1.7; }
    .milk-journey-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 16px; }
    .milk-journey-card { grid-column: auto; padding: 32px 12px 22px; border-radius: 48% 48% 22px 22px / 40px 40px 22px 22px; }
    .milk-journey-card:nth-child(4) { grid-column: auto; }
    .milk-journey-card:last-child { grid-column: 1 / -1; width: calc((100% - 16px) / 2); justify-self: center; }
    .milk-journey-number { width: 48px; height: 48px; top: -25px; font-size: .95rem; }
    .milk-journey-icon { width: 65px; height: 65px; margin-bottom: 10px; }
    .milk-journey-icon > svg { width: 44px; height: 44px; }
    .home-body .journey--premium h3 { font-size: 1.06rem; min-height: 45px; }
    .milk-journey-card > p { margin-top: 12px; font-size: .73rem; }
    .home-body .journey--premium { background-position: 45% center; }
}
@media (max-width: 380px) {
    .milk-journey-steps { grid-template-columns: 1fr; gap: 47px; }
    .milk-journey-card, .milk-journey-card:last-child { grid-column: auto; width: 100%; padding: 34px 28px 26px; }
    .milk-journey-card > p { max-width: 230px; font-size: .8rem; }
    .home-body .journey--premium h3 { min-height: 0; font-size: 1.24rem; }
}
