/* A quiet order desk: three connected stages, with a little movement in each. */
body.immersive-theme .order-journey {
  --order-ink: #253223;
  --order-muted: #5b6852;
  --order-line: #ced5c4;
  --order-accent: #f5d21b;
  padding: 76px 6vw 70px;
  background: #f1f2e9;
  color: var(--order-ink);
  font-family: var(--font-body, Arial, sans-serif);
  scroll-margin-top: 0;
}
.order-journey-inner { max-width: 1280px; margin-inline: auto; }
.order-journey-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 38px; margin-bottom: 34px; }
.order-journey-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .09em; }
.order-journey-eyebrow > span { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #788551; }
body.immersive-theme .order-journey .order-journey-title { font-family: var(--font-display, sans-serif); font-size: clamp(38px, 4.25vw, 61px); font-weight: 600; line-height: 1.1; letter-spacing: -.035em; margin: 19px 0 0; }
.order-journey-title > span { color: #6c7a59; }
.order-journey-welcome { flex-shrink: 0; width: 280px; padding-bottom: 3px; }
.order-journey-welcome > p { font-size: 17px; line-height: 1.55; color: var(--order-muted); }
.order-journey-help { display: inline-flex; align-items: center; min-height: 44px; gap: 22px; margin-top: 9px; font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-color: #a5b197; text-underline-offset: 5px; }
.order-journey-help > span { font-size: 21px; }
.order-journey-stages { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; margin: 0; border: 1px solid var(--order-line); border-radius: 12px; background: #fffef7; overflow: hidden; }
.order-journey-stage { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 25px 29px 22px; position: relative; }
.order-journey-stage + .order-journey-stage { border-left: 1px solid var(--order-line); }
.order-stage-top { display: flex; align-items: center; gap: 11px; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .045em; color: #66745b; }
.order-stage-index { display: grid; place-items: center; flex-shrink: 0; width: 29px; height: 29px; border: 1px solid #bec8b1; border-radius: 50%; font-family: var(--font-body, sans-serif); font-size: 12px; font-weight: 600; font-style: normal; letter-spacing: 0; color: #34442c; }
.order-stage-next { margin-left: auto; font-size: 22px; font-weight: 400; color: #849574; }
.order-stage-art { margin: 19px 0 17px; height: 137px; display: flex; align-items: center; justify-content: center; }
.order-stage-art .order-art { display: block; width: 208px; height: 137px; overflow: visible; }
body.immersive-theme .order-journey .order-journey-stage h3 { margin: 0 0 13px; font-family: var(--font-display, sans-serif); font-size: clamp(23px, 2.1vw, 29px); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.order-journey-stage > p { font-size: 16px; line-height: 1.65; color: var(--order-muted); margin: 0 0 21px; max-width: 345px; }
.order-stage-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-top: auto; padding: 12px 0 0; border-top: 1px solid #dce2d3; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--order-ink); }
.order-stage-link > span { font-size: 23px; font-weight: 400; transition: transform 220ms ease; }
.order-delivery-desk { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 19px; margin-top: 22px; padding: 25px 29px; border: 1px solid var(--order-line); border-radius: 10px; background: #e6ebdb; }
.order-delivery-symbol { display: grid; place-items: center; width: 46px; height: 55px; color: #566847; }
.order-delivery-symbol svg { width: 35px; height: 35px; }
.order-delivery-label { font-size: 12px; font-weight: 600; letter-spacing: .055em; line-height: 1.5; color: #657555; margin-bottom: 6px; }
body.immersive-theme .order-journey .order-delivery-desk h3 { font-family: var(--font-display, sans-serif); font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; margin: 0 0 7px; }
.order-delivery-desk > div > p:last-child { font-size: 15px; line-height: 1.65; color: #56664b; max-width: 715px; }
.order-delivery-link { display: flex; align-items: center; justify-content: center; gap: 22px; min-height: 48px; padding: 12px 19px; font-size: 15px; font-weight: 600; line-height: 1.45; white-space: nowrap; color: #fffef4; background: #2c4025; border-radius: 6px; }
.order-delivery-link > span { font-size: 21px; font-weight: 400; }
.order-journey :is(a, button):focus-visible { outline: 3px solid #647c3c; outline-offset: 5px; border-radius: 3px; }

/* The illustrations are decorative; links provide the actual actions. */
.order-bottle-cap, .order-bottle-body, .order-chat, .order-parcel, .order-formula-tab { transform-box: fill-box; transform-origin: center; transition: transform 420ms cubic-bezier(.22,1,.36,1); }
.order-paper-line { stroke-dasharray: 34; stroke-dashoffset: 0; }
.order-chat-dot { transform-box: fill-box; transform-origin: center; }
.order-art-ground { transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .order-journey-stage.is-visible .order-bottle-cap { animation: order-cap-hello 1.15s .08s cubic-bezier(.22,1,.36,1) backwards; }
  .order-journey-stage.is-visible .order-formula-tab { animation: order-note-hello .9s .2s cubic-bezier(.22,1,.36,1) backwards; }
  .order-journey-stage.is-visible .order-paper-line { animation: order-write .8s .18s ease backwards; }
  .order-journey-stage.is-visible .order-paper-line.line-two { animation-delay: .3s; }
  .order-journey-stage.is-visible .order-paper-line.line-three { animation-delay: .42s; }
  .order-journey-stage.is-visible .order-chat { animation: order-chat-hello 1s .12s cubic-bezier(.22,1,.36,1) backwards; }
  .order-journey-stage.is-visible .order-parcel { animation: order-parcel-hello 1s .16s cubic-bezier(.22,1,.36,1) backwards; }
  .order-journey-stage.is-visible .order-art-ground { animation: order-ground-hello 1s .1s ease backwards; }
  .order-journey-stage:focus-within .order-bottle-cap { transform: translateY(-9px) rotate(-4deg); }
  .order-journey-stage:focus-within .order-chat { transform: translateY(-5px) rotate(3deg); }
  .order-journey-stage:focus-within .order-parcel { transform: translateY(-5px) rotate(-2deg); }
  .order-journey-stage:focus-within .order-chat-dot { animation: order-chat-dot .8s ease 2; }
  .order-journey-stage:focus-within .dot-two { animation-delay: .1s; }
  .order-journey-stage:focus-within .dot-three { animation-delay: .2s; }
  .order-stage-link:focus-visible > span { transform: translate(3px,-3px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .order-journey-stage:hover .order-bottle-cap { transform: translateY(-9px) rotate(-4deg); }
  .order-journey-stage:hover .order-chat { transform: translateY(-5px) rotate(3deg); }
  .order-journey-stage:hover .order-parcel { transform: translateY(-5px) rotate(-2deg); }
  .order-journey-stage:hover .order-chat-dot { animation: order-chat-dot .8s ease 2; }
  .order-journey-stage:hover .dot-two { animation-delay: .1s; }
  .order-journey-stage:hover .dot-three { animation-delay: .2s; }
  .order-stage-link:hover > span { transform: translate(3px,-3px); }
}
@keyframes order-cap-hello { 0% { transform: translateY(-10px) rotate(-7deg); } 55% { transform: translateY(-10px) rotate(0); } 100% { transform: none; } }
@keyframes order-note-hello { from { opacity: 0; translate: 7px 7px; } to { opacity: 1; translate: 0 0; } }
@keyframes order-write { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }
@keyframes order-chat-hello { from { opacity: 0; transform: translate(8px,6px) rotate(7deg); } to { opacity: 1; transform: none; } }
@keyframes order-parcel-hello { from { opacity: 0; transform: translateY(-13px) rotate(-5deg); } to { opacity: 1; transform: none; } }
@keyframes order-ground-hello { from { opacity: .2; transform: scaleX(.65); } to { opacity: 1; transform: none; } }
@keyframes order-chat-dot { 0%, 70%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }

@media (max-width: 1050px) {
  body.immersive-theme .order-journey { padding: 64px 5vw; }
  .order-journey-heading { gap: 30px; }
  .order-journey-welcome { width: 240px; }
  .order-journey-stage { padding: 23px 22px 20px; }
  .order-stage-top { font-size: 12px; gap: 8px; letter-spacing: .015em; }
  .order-stage-index { width: 26px; height: 26px; font-size: 12px; }
  .order-stage-next { font-size: 20px; }
  .order-stage-art { height: 120px; margin-block: 18px; }
  .order-stage-art .order-art { width: 180px; height: 119px; }
  body.immersive-theme .order-journey .order-journey-stage h3 { font-size: 24px; }
  .order-stage-link { font-size: 14px; }
  .order-delivery-desk { grid-template-columns: 40px minmax(0,1fr); padding: 23px; }
  .order-delivery-link { grid-column: 2; justify-self: start; }
}
@media (max-width: 760px) {
  body.immersive-theme .order-journey { padding: 50px 6vw; }
  .order-journey-heading { align-items: flex-start; flex-direction: column; gap: 24px; margin-bottom: 28px; }
  body.immersive-theme .order-journey .order-journey-title { font-size: clamp(35px,8vw,49px); line-height: 1.12; letter-spacing: -.03em; margin-top: 16px; }
  .order-journey-eyebrow { font-size: 12px; letter-spacing: .04em; }
  .order-journey-welcome { width: 100%; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
  .order-journey-welcome > p { font-size: 16px; line-height: 1.5; }
  .order-journey-help { font-size: 15px; margin: 0; gap: 15px; flex-shrink: 0; }
  .order-journey-stages { grid-template-columns: 1fr; border-radius: 10px; }
  .order-journey-stage { display: grid; grid-template-columns: minmax(0,1fr) 145px; column-gap: 24px; padding: 25px; }
  .order-journey-stage + .order-journey-stage { border-left: 0; border-top: 1px solid var(--order-line); }
  .order-stage-top { grid-column: 1 / -1; font-size: 12px; gap: 10px; letter-spacing: .03em; margin-bottom: 20px; }
  .order-stage-index { width: 28px; height: 28px; font-size: 12px; }
  .order-stage-next { font-size: 22px; }
  .order-stage-art { grid-column: 2; grid-row: 2 / span 2; margin: 0; height: 116px; align-self: center; }
  .order-stage-art .order-art { width: 155px; height: 103px; }
  body.immersive-theme .order-journey .order-journey-stage h3 { font-size: 27px; grid-column: 1; margin-bottom: 11px; }
  .order-journey-stage > p { grid-column: 1; font-size: 16px; line-height: 1.65; max-width: 420px; margin-bottom: 20px; }
  .order-stage-link { grid-column: 1 / -1; font-size: 15px; min-height: 48px; }
  .order-delivery-desk { padding: 23px; gap: 14px; grid-template-columns: 34px minmax(0,1fr); }
  .order-delivery-symbol { width: 34px; height: 45px; align-self: start; }
  .order-delivery-symbol svg { width: 31px; height: 31px; }
  body.immersive-theme .order-journey .order-delivery-desk h3 { font-size: 23px; }
  .order-delivery-desk > div > p:last-child { font-size: 15px; }
  .order-delivery-link { margin-top: 3px; font-size: 15px; }
}
@media (max-width: 540px) {
  .order-journey-welcome { display: block; }
  .order-journey-welcome > p { max-width: 340px; }
  .order-journey-welcome > p br { display: none; }
  .order-journey-help { margin-top: 11px; }
  .order-journey-stage { padding: 23px; column-gap: 14px; grid-template-columns: minmax(0,1fr) 88px; }
  .order-stage-top { margin-bottom: 14px; }
  .order-stage-art { grid-row: 2; height: 82px; }
  .order-stage-art .order-art { width: 104px; height: 69px; }
  body.immersive-theme .order-journey .order-journey-stage h3 { font-size: 26px; margin-bottom: 15px; align-self: center; }
  .order-journey-stage > p { grid-column: 1 / -1; font-size: 16px; }
  .order-stage-link { margin-top: 0; }
  .order-delivery-desk { padding: 22px 20px; }
  .order-delivery-link { grid-column: 1 / -1; justify-self: stretch; margin-top: 2px; justify-content: space-between; }
}
@media (max-width: 360px) {
  body.immersive-theme .order-journey { padding-inline: 5vw; }
  .order-journey-eyebrow { font-size: 12px; letter-spacing: .01em; }
  body.immersive-theme .order-journey .order-journey-title { font-size: 34px; }
  .order-journey-stage { padding: 21px; grid-template-columns: minmax(0,1fr) 73px; column-gap: 10px; }
  .order-stage-art .order-art { width: 90px; height: 60px; }
  body.immersive-theme .order-journey .order-journey-stage h3 { font-size: 24px; }
  .order-stage-top { gap: 8px; font-size: 12px; letter-spacing: 0; }
  .order-journey-stage > p { font-size: 15px; }
  .order-delivery-desk { padding: 20px 17px; gap: 11px; }
  body.immersive-theme .order-journey .order-delivery-desk h3 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .order-journey :is(.order-bottle-cap, .order-bottle-body, .order-chat, .order-parcel, .order-formula-tab, .order-chat-dot, .order-paper-line, .order-art-ground, .order-stage-link > span) { animation: none !important; transition: none !important; }
}