body { position: relative; }

#cocoa-page-flow {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 8;
    overflow: hidden;
    contain: layout paint;
}

.cocoa-bean-stage,
.cocoa-dust-cloud {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    will-change: left, top, transform, opacity;
}

.cocoa-bean-stage {
    width: clamp(245px, 21vw, 345px);
    height: clamp(345px, 29.5vw, 485px);
    filter: drop-shadow(0 26px 30px rgba(52, 24, 10, .20));
    opacity: 1;
}


.cocoa-bean-stage::before,
.cocoa-bean-stage::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.cocoa-bean-stage::before {
    inset: 10% 8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 214, 120, .24) 0%, rgba(236, 206, 104, .14) 28%, rgba(196, 145, 63, .08) 48%, rgba(196, 145, 63, 0) 72%);
    filter: blur(22px);
    opacity: var(--halo-opacity, .58);
    transform: scale(var(--halo-scale, 1.06));
    z-index: -2;
}

.cocoa-bean-stage::after {
    width: 70%;
    height: 26%;
    left: 50%;
    top: 71%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center, rgba(134, 80, 43, .20) 0%, rgba(134, 80, 43, .11) 38%, rgba(134, 80, 43, .04) 58%, rgba(134, 80, 43, 0) 76%),
        radial-gradient(ellipse at center, rgba(108, 59, 29, .18) 0%, rgba(108, 59, 29, 0) 72%);
    filter: blur(13px);
    opacity: var(--trail-opacity, .12);
    transform: translateX(-50%) scale(var(--trail-scale, 1));
    z-index: -1;
}

#cocoa-bean-canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
}

.cocoa-bean-fallback {
    display: none;
    position: absolute;
    inset: 7% 15%;
    border-radius: 48% 52% 47% 53% / 55% 50% 50% 45%;
    background:
        linear-gradient(92deg, transparent 47%, rgba(35, 11, 3, .74) 49%, rgba(102, 43, 17, .55) 51%, transparent 53%),
        radial-gradient(circle at 28% 22%, #c57a48 0%, #7d4525 29%, #482516 65%, #24110c 100%);
    box-shadow: inset 22px 10px 42px rgba(255, 194, 126, .18), inset -28px -25px 48px rgba(17, 6, 2, .52);
}

.cocoa-dust-cloud {
    width: min(48vw, 620px);
    height: min(48vw, 620px);
    opacity: 0;
    filter: saturate(1.04) contrast(1.03);
}

.cocoa-dust-cloud::before,
.cocoa-dust-cloud::after,
.dust-haze {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    pointer-events: none;
}

.cocoa-dust-cloud::before {
    width: 58%;
    height: 46%;
    transform: translate(-50%, -44%);
    background: radial-gradient(ellipse, rgba(112, 61, 31, .34) 0%, rgba(95, 49, 24, .19) 35%, rgba(79, 40, 20, 0) 73%);
    filter: blur(16px);
}

.cocoa-dust-cloud::after {
    width: 78%;
    height: 64%;
    transform: translate(-48%, -34%);
    background: radial-gradient(ellipse, rgba(86, 43, 21, .16) 0%, rgba(86, 43, 21, .07) 46%, rgba(86, 43, 21, 0) 76%);
    filter: blur(28px);
}

.dust-haze { display: block; }
.haze-a {
    width: 40%; height: 30%;
    transform: translate(-72%, -64%) rotate(-15deg);
    background: radial-gradient(ellipse, rgba(154, 91, 49, .28), rgba(110, 58, 29, 0) 70%);
    filter: blur(18px);
}
.haze-b {
    width: 48%; height: 34%;
    transform: translate(-12%, -28%) rotate(21deg);
    background: radial-gradient(ellipse, rgba(103, 51, 25, .25), rgba(93, 44, 20, 0) 72%);
    filter: blur(22px);
}
.haze-c {
    width: 36%; height: 42%;
    transform: translate(-58%, 2%) rotate(9deg);
    background: radial-gradient(ellipse, rgba(127, 68, 34, .22), rgba(91, 45, 22, 0) 73%);
    filter: blur(24px);
}

.cocoa-dust-cloud .dust {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 32%, rgba(190, 125, 76, .98) 0%, rgba(119, 66, 35, .94) 36%, rgba(65, 30, 15, .74) 72%, rgba(53, 24, 12, 0) 100%);
    box-shadow: 0 0 5px rgba(73, 34, 17, .22);
    will-change: transform, opacity;
}

.cocoa-dust-cloud .dust.is-fine {
    background: rgba(99, 52, 27, .82);
    box-shadow: none;
}

.cocoa-animation-origin {
    overflow: hidden;
}

.cocoa-animation-origin::before,
.cocoa-animation-origin::after {
    content: none !important;
}

.cocoa-journey-band {
    background: linear-gradient(180deg, rgba(248,245,236,1) 0%, rgba(255,255,255,1) 100%);
}
.journey-card {
    background: #fff;
    border-radius: 18px;
    padding: 34px 28px;
    box-shadow: 0 16px 50px rgba(33, 30, 24, .07);
    border: 1px solid rgba(96, 56, 30, .08);
}
.journey-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: #f3ebd8; color: #7f4a27; font-weight: 700; margin-bottom: 18px;
}
.journey-card h4 { margin-bottom: 14px; }
.journey-card p { margin-bottom: 0; line-height: 1.72; }


.journey-scroll-shell {
    margin-top: 34px;
    display: grid;
    grid-template-columns: minmax(300px, 520px) minmax(280px, 1fr);
    gap: 36px;
    align-items: start;
}

.journey-sticky-side {
    position: relative;
}

.journey-sticky-inner {
    position: sticky;
    top: 118px;
}

.journey-visual-frame {
    position: relative;
    width: 100%;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.journey-bean-scene {
    width: 100%;
    height: 100%;
    min-height: 360px;
    overflow: visible;
}

.journey-bean-scene::before {
    inset: 14% 18%;
}

.journey-bean-core {
    filter: drop-shadow(0 20px 26px rgba(61, 28, 12, .16));
}

.journey-cocoa-bean {
    max-width: 88%;
    max-height: 88%;
}

.journey-copy-panel {
    margin-top: -8px;
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(96, 56, 30, .08);
    border-radius: 22px;
    box-shadow: 0 16px 48px rgba(33, 30, 24, .08);
    padding: 24px 24px 22px;
    backdrop-filter: blur(10px);
}

.journey-copy-kicker {
    display: inline-block;
    margin-bottom: 10px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #2A5D52;
}

.journey-copy-panel h3 {
    margin-bottom: 12px;
    font-size: clamp(1.65rem, 2.2vw, 2.25rem);
}

.journey-copy-panel p {
    margin-bottom: 0;
    line-height: 1.8;
}

.journey-steps-side {
    position: relative;
}

.journey-step {
    min-height: 74vh;
    display: flex;
    align-items: center;
}

.journey-step-card {
    width: 100%;
    background: rgba(255,255,255,.82);
    border-radius: 22px;
    padding: 36px 30px;
    box-shadow: 0 16px 50px rgba(33, 30, 24, .07);
    border: 1px solid rgba(96, 56, 30, .08);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background-color .35s ease;
}

.journey-step.is-active .journey-step-card {
    transform: translateY(-4px);
    box-shadow: 0 22px 60px rgba(42, 93, 82, .13);
    border-color: rgba(42, 93, 82, .22);
    background: rgba(255,255,255,.95);
}

.journey-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: #f3ebd8; color: #7f4a27; font-weight: 700; margin-bottom: 18px;
}

.journey-step-card h4 { margin-bottom: 14px; font-size: clamp(1.8rem, 2.4vw, 2.45rem); }
.journey-step-card p { margin-bottom: 0; line-height: 1.9; font-size: 1.08rem; }

@media (max-width: 1199.98px) {
    .journey-scroll-shell {
        grid-template-columns: minmax(280px, 430px) minmax(260px, 1fr);
        gap: 28px;
    }
}

@media (max-width: 991.98px) {
    .journey-scroll-shell {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .journey-sticky-inner {
        position: relative;
        top: auto;
    }
    .journey-visual-frame,
    .journey-bean-scene {
        min-height: 280px;
    }
    .journey-step {
        min-height: auto;
        display: block;
        margin-bottom: 18px;
    }
}

@media (max-width: 767.98px) {
    .journey-visual-frame,
    .journey-bean-scene {
        min-height: 240px;
    }
    .journey-cocoa-bean {
        max-width: 86%;
        max-height: 86%;
    }
    .journey-copy-panel {
        padding: 20px 18px;
        border-radius: 18px;
    }
    .journey-step-card {
        padding: 24px 20px;
        border-radius: 18px;
    }
    .journey-step-card h4 {
        font-size: 1.7rem;
    }
    .journey-step-card p {
        font-size: 1rem;
        line-height: 1.75;
    }
}

@media (max-width: 991.98px) {
    .cocoa-bean-stage, .cocoa-dust-cloud { left: 50%; }
    .cocoa-bean-stage { width: clamp(210px, 25vw, 285px); height: clamp(295px, 35vw, 400px); }
}

@media (max-width: 767.98px) {
    #cocoa-page-flow { z-index: 4; }
    .cocoa-bean-stage, .cocoa-dust-cloud { left: 50%; }
    .cocoa-bean-stage { width: 155px; height: 220px; }
    .cocoa-dust-cloud { width: 330px; height: 330px; }
}

@media (prefers-reduced-motion: reduce) {
    #cocoa-page-flow { display: none; }
}

.cocoa-animation-origin {
    background: transparent !important;
    box-shadow: none !important;
}


/* Animated cocoa bean placement: fixed inside the white About tile with realistic outward particle scattering. */
#cocoa-page-flow { display: none !important; }

.cocoa-animation-origin {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    right: auto !important;
    bottom: auto !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    isolation: isolate;
}

.hero-bean-scene {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
}

.hero-bean-scene::before {
    content: "";
    position: absolute;
    inset: 8% 10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(92, 144, 110, .16) 0%, rgba(127, 164, 110, .08) 20%, rgba(164, 96, 53, .06) 42%, rgba(164, 96, 53, 0) 68%);
    filter: blur(24px);
    z-index: 0;
    animation: beanGlowBreath 5.5s ease-in-out infinite;
}

.bean-atmosphere,
.bean-particle-layer,
.bean-core,
.bean-powder {
    position: absolute;
    inset: 0;
}

.bean-atmosphere {
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 24% 22%, rgba(109, 156, 122, .26), rgba(109, 156, 122, 0) 24%),
        radial-gradient(circle at 72% 68%, rgba(146, 186, 153, .22), rgba(146, 186, 153, 0) 26%),
        radial-gradient(circle at 38% 36%, rgba(131, 69, 32, .10), rgba(131, 69, 32, 0) 20%),
        radial-gradient(circle at 64% 58%, rgba(170, 96, 49, .09), rgba(170, 96, 49, 0) 22%);
    filter: blur(12px);
    animation: beanAtmosphereShift 8s ease-in-out infinite alternate;
}

.bean-core {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    animation: beanCoreFloat 7s ease-in-out infinite;
    filter: drop-shadow(0 20px 24px rgba(61, 28, 12, .18));
}

.cocoa-static-bean {
    display: block;
    width: auto;
    height: auto;
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
    object-position: center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
    animation: beanCoreTilt 7s ease-in-out infinite;
    transform-origin: 50% 50%;
}

.bean-particle-layer {
    z-index: 3;
    pointer-events: none;
    overflow: visible;
    mix-blend-mode: multiply;
}

.bean-particle {
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    will-change: transform, opacity;
    animation-name: beanBurst;
    animation-timing-function: cubic-bezier(.16,.72,.19,.99);
    animation-iteration-count: infinite;
}

.bean-particle.p-dust {
    width: var(--size, 7px);
    height: var(--size, 7px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 35%, rgba(173, 109, 66, .95) 0%, rgba(132, 76, 43, .86) 35%, rgba(97, 53, 29, .54) 62%, rgba(97, 53, 29, 0) 78%);
    filter: blur(var(--blur, .8px));
}

.bean-particle.p-speck {
    width: var(--size, 3px);
    height: var(--size, 3px);
    border-radius: 50%;
    background: rgba(108, 60, 34, .52);
    filter: blur(.25px);
}

.bean-particle.p-crumb {
    width: var(--size, 10px);
    height: calc(var(--size, 10px) * 0.82);
    border-radius: 48% 52% 42% 58% / 46% 42% 58% 54%;
    background:
        radial-gradient(circle at 34% 28%, rgba(194, 132, 88, .44), rgba(194, 132, 88, 0) 28%),
        linear-gradient(135deg, #8d4e2c 0%, #6f3b21 52%, #472414 100%);
    filter: blur(var(--blur, .35px));
    opacity: .98;
}

.bean-powder {

    z-index: 1;
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: .88;
}

.bean-powder::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 56%;
    height: 40%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(155, 86, 47, .42) 0%, rgba(137, 74, 39, .24) 34%, rgba(137, 74, 39, 0) 78%);
    filter: blur(18px);
}

.bean-powder-a::before { transform: translate(-76%, -42%) rotate(-20deg); animation: powderDriftA 6.3s ease-in-out infinite; }
.bean-powder-b::before { width: 44%; height: 32%; transform: translate(-4%, -12%) rotate(18deg); animation: powderDriftB 5.8s ease-in-out infinite; }
.bean-powder-c::before { width: 38%; height: 30%; transform: translate(-60%, 20%) rotate(10deg); animation: powderDriftC 7.2s ease-in-out infinite; }

@keyframes beanBurst {
    0% {
        opacity: 0;
        transform: translate(calc(var(--sx) * 1px), calc(var(--sy) * 1px)) scale(var(--scale-start, .6)) rotate(calc(var(--rot-start) * 1deg));
    }
    8% { opacity: var(--alpha, .95); }
    62% { opacity: var(--alpha, .95); }
    100% {
        opacity: 0;
        transform: translate(calc(var(--ex) * 1px), calc(var(--ey) * 1px)) scale(var(--scale-end, 1)) rotate(calc(var(--rot-end) * 1deg));
    }
}

@keyframes beanCoreFloat {
    0%,100% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(0, -3px, 0); }
    50% { transform: translate3d(2px, -6px, 0); }
    75% { transform: translate3d(-1px, -2px, 0); }
}

@keyframes beanCoreTilt {
    0%,100% { transform: rotate(-2deg) scale(1); }
    50% { transform: rotate(2deg) scale(1.03); }
}

@keyframes beanGlowBreath {
    0%,100% { transform: scale(.98); opacity: .7; }
    50% { transform: scale(1.07); opacity: 1; }
}

@keyframes beanAtmosphereShift {
    0% { transform: translate3d(-1.5%, -1%, 0) scale(1); opacity: .85; }
    100% { transform: translate3d(1.5%, 1%, 0) scale(1.05); opacity: 1; }
}

@keyframes powderDriftA {
    0%,100% { transform: translate(-74%, -40%) rotate(-20deg) scale(1); opacity: .58; }
    50% { transform: translate(-79%, -45%) rotate(-26deg) scale(1.12); opacity: .78; }
}

@keyframes powderDriftB {
    0%,100% { transform: translate(-8%, -14%) rotate(18deg) scale(1); opacity: .56; }
    50% { transform: translate(-2%, -18%) rotate(26deg) scale(1.1); opacity: .88; }
}

@keyframes powderDriftC {
    0%,100% { transform: translate(-58%, 18%) rotate(10deg) scale(1); opacity: .48; }
    50% { transform: translate(-62%, 10%) rotate(3deg) scale(1.09); opacity: .72; }
}

@media (max-width: 991.98px) {
    .cocoa-animation-origin { padding: 0 !important; }
    .cocoa-static-bean { max-width: 94%; max-height: 94%; }
}

@media (max-width: 767.98px) {
    .cocoa-animation-origin { padding: 0 !important; }
    .cocoa-static-bean { max-width: 97%; max-height: 97%; }
    .bean-powder::before { filter: blur(14px); }
}

@media (prefers-reduced-motion: reduce) {
    .bean-particle,
    .bean-core,
    .cocoa-static-bean,
    .hero-bean-scene::before,
    .bean-atmosphere,
    .bean-powder::before {
        animation: none !important;
    }
}


/* Premium scroll-driven cocoa journey */
.journey-experience {
    position: relative;
    width: 100%;
    max-width: none;
    padding: 76px 0 0;
    overflow: clip;
    background:
        radial-gradient(circle at 50% 14%, rgba(220, 232, 216, .78), rgba(220, 232, 216, 0) 30%),
        linear-gradient(180deg, #fbf9f3 0%, #f5f4ed 52%, #eef3ed 100%);
}

.journey-experience-intro {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
    padding-bottom: 10px;
}

.journey-intro-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(42,93,82,.10);
    color: #2A5D52;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.journey-intro-mark::before {
    content: "";
    width: 24px;
    height: 1px;
    background: currentColor;
    opacity: .55;
}

.journey-experience-intro h1 {
    margin: 0 0 14px;
    font-size: clamp(2.25rem, 4.1vw, 4.7rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    color: #354435;
}

.journey-experience-intro p {
    max-width: 660px;
    margin: 0 auto;
    color: #6f746d;
    font-size: 1.08rem;
}

.journey-story-track {
    position: relative;
    height: 285vh;
    min-height: 2100px;
    --journey-accent: #4f775d;
    --journey-soft: rgba(102, 145, 112, .16);
}

.journey-sticky-canvas {
    position: sticky;
    top: 88px;
    height: calc(100vh - 88px);
    min-height: 640px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.journey-sticky-canvas::before,
.journey-sticky-canvas::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transition: background-color .7s ease, opacity .7s ease, transform .8s ease;
}

.journey-sticky-canvas::before {
    width: 620px;
    height: 620px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--journey-soft) 0%, rgba(255,255,255,0) 68%);
    filter: blur(8px);
}

.journey-sticky-canvas::after {
    width: 440px;
    height: 440px;
    right: -190px;
    bottom: -170px;
    background: radial-gradient(circle, rgba(42,93,82,.09), rgba(42,93,82,0) 70%);
}

.journey-stage-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(360px, 520px) minmax(200px, .7fr);
    align-items: center;
    gap: clamp(24px, 4vw, 72px);
    width: 100%;
}

.journey-story-copy {
    align-self: center;
    max-width: 455px;
    padding-left: clamp(0px, 1.5vw, 24px);
}

.journey-story-number {
    font-family: "Libre Baskerville", serif;
    font-size: clamp(4.8rem, 9vw, 9.5rem);
    font-weight: 700;
    line-height: .82;
    letter-spacing: -.08em;
    color: rgba(53,68,53,.075);
    margin-bottom: -20px;
    transition: opacity .34s ease, transform .34s ease;
}

.journey-story-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
    color: var(--journey-accent);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .15em;
    transition: color .5s ease, opacity .34s ease, transform .34s ease;
}

.journey-story-eyebrow::before {
    content: "";
    width: 36px;
    height: 2px;
    background: currentColor;
}

.journey-story-copy h2 {
    margin: 0 0 18px;
    font-size: clamp(2.15rem, 3.5vw, 4rem);
    line-height: 1.04;
    letter-spacing: -.035em;
    color: #354435;
    transition: opacity .34s ease, transform .34s ease;
}

.journey-story-copy > p {
    margin: 0 0 22px;
    color: #6f746d;
    font-size: 1.08rem;
    line-height: 1.85;
    transition: opacity .34s ease, transform .34s ease;
}

.journey-story-meta {
    display: inline-flex;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(42,93,82,.10);
    color: #657269;
    font-size: .82rem;
    letter-spacing: .035em;
    transition: opacity .34s ease, transform .34s ease;
}

.journey-story-copy.is-changing .journey-story-number,
.journey-story-copy.is-changing .journey-story-eyebrow,
.journey-story-copy.is-changing h2,
.journey-story-copy.is-changing > p,
.journey-story-copy.is-changing .journey-story-meta {
    opacity: 0;
    transform: translateY(12px);
}

.journey-centerpiece {
    position: relative;
    height: min(62vh, 610px);
    min-height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.journey-premium-bean {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.journey-premium-bean::before {
    inset: 15% 12%;
    background: radial-gradient(circle, rgba(96,144,107,.18) 0%, rgba(151,107,63,.09) 36%, rgba(151,107,63,0) 70%);
}

.journey-premium-core {
    filter: drop-shadow(0 28px 34px rgba(63,33,15,.19));
    transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .7s ease;
}

.journey-premium-image {
    max-width: 96%;
    max-height: 96%;
    animation-duration: 9s;
    transition: filter .7s ease;
}

.journey-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(42,93,82,.10);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    transition: border-color .7s ease, transform .9s ease;
}

.journey-orbit-one {
    width: 78%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) rotate(14deg) scaleY(.72);
}

.journey-orbit-two {
    width: 62%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) rotate(-26deg) scaleY(.62);
    border-style: dashed;
    opacity: .65;
}

.journey-bean-shadow {
    position: absolute;
    left: 50%;
    bottom: 8%;
    width: 54%;
    height: 9%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(65,34,18,.18) 0%, rgba(65,34,18,0) 72%);
    filter: blur(13px);
    z-index: 0;
    transition: transform .8s ease, opacity .8s ease;
}

.journey-stage-nav {
    display: flex;
    flex-direction: column;
    justify-self: end;
    gap: 28px;
    min-width: 170px;
}

.journey-stage-dot {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    color: #8b9088;
    cursor: pointer;
    transition: color .4s ease, transform .4s ease;
}

.journey-stage-dot::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 44px;
    width: 1px;
    height: 23px;
    background: rgba(42,93,82,.15);
}

.journey-stage-dot:last-child::before { display: none; }

.journey-stage-dot span {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(42,93,82,.16);
    background: rgba(255,255,255,.6);
    font-size: .76rem;
    font-weight: 800;
    transition: background-color .4s ease, color .4s ease, border-color .4s ease, transform .4s ease;
}

.journey-stage-dot em {
    font-style: normal;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.journey-stage-dot.is-active {
    color: #354435;
    transform: translateX(-6px);
}

.journey-stage-dot.is-active span {
    color: #fff;
    background: var(--journey-accent);
    border-color: var(--journey-accent);
    transform: scale(1.08);
}

.journey-progress-line {
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: min(460px, 38vw);
    height: 2px;
    transform: translateX(-50%);
    background: rgba(42,93,82,.10);
    border-radius: 999px;
    overflow: hidden;
}

.journey-progress-line span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: var(--journey-accent);
    transition: background-color .5s ease;
}

.journey-scroll-cue {
    position: absolute;
    left: clamp(24px, 4vw, 64px);
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8b9088;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.journey-scroll-cue span {
    width: 8px;
    height: 22px;
    border: 1px solid rgba(42,93,82,.28);
    border-radius: 999px;
    position: relative;
}

.journey-scroll-cue span::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 4px;
    width: 2px;
    height: 5px;
    border-radius: 999px;
    background: #2A5D52;
    transform: translateX(-50%);
    animation: journeyScrollDot 1.7s ease-in-out infinite;
}

@keyframes journeyScrollDot {
    0%,100% { transform: translate(-50%,0); opacity: .35; }
    50% { transform: translate(-50%,7px); opacity: 1; }
}

.journey-story-track[data-stage="1"] {
    --journey-accent: #9a5a35;
    --journey-soft: rgba(154,90,53,.13);
}

.journey-story-track[data-stage="1"] .journey-premium-core {
    transform: rotate(4deg) scale(1.035);
}

.journey-story-track[data-stage="1"] .journey-orbit-one {
    transform: translate(-50%, -50%) rotate(24deg) scaleY(.69) scale(1.035);
    border-color: rgba(154,90,53,.14);
}

.journey-story-track[data-stage="1"] .journey-orbit-two {
    transform: translate(-50%, -50%) rotate(-36deg) scaleY(.60) scale(1.04);
    border-color: rgba(154,90,53,.12);
}

.journey-story-track[data-stage="2"] {
    --journey-accent: #2A5D52;
    --journey-soft: rgba(42,93,82,.14);
}

.journey-story-track[data-stage="2"] .journey-premium-core {
    transform: rotate(-3deg) scale(.985) translateY(-5px);
}

.journey-story-track[data-stage="2"] .journey-orbit-one {
    transform: translate(-50%, -50%) rotate(8deg) scaleY(.74) scale(.96);
}

.journey-story-track[data-stage="2"] .journey-orbit-two {
    transform: translate(-50%, -50%) rotate(-18deg) scaleY(.66) scale(.94);
}

.journey-story-track[data-stage="2"] .journey-bean-shadow {
    transform: translateX(-50%) scale(.88);
    opacity: .72;
}

.journey-mobile-story { display: none; }

@media (max-width: 1199.98px) {
    .journey-stage-grid {
        grid-template-columns: minmax(250px, 1fr) minmax(330px, 440px) minmax(150px, .55fr);
        gap: 24px;
    }
    .journey-stage-nav { min-width: 150px; }
    .journey-centerpiece { min-height: 430px; }
}

@media (max-width: 991.98px) {
    .journey-experience { padding-top: 58px; }
    .journey-story-track { height: auto; min-height: 0; }
    .journey-sticky-canvas { position: relative; top: auto; height: auto; min-height: 0; padding: 24px 0 40px; }
    .journey-stage-grid { display: block; }
    .journey-story-copy, .journey-stage-nav, .journey-progress-line, .journey-scroll-cue { display: none; }
    .journey-centerpiece { width: min(100%, 500px); height: 390px; min-height: 0; margin: 0 auto; }
    .journey-mobile-story { display: block; padding-bottom: 54px; }
    .journey-mobile-story article {
        display: grid;
        grid-template-columns: 58px 1fr;
        gap: 18px;
        padding: 26px 0;
        border-top: 1px solid rgba(42,93,82,.12);
    }
    .journey-mobile-story article > span {
        font-family: "Libre Baskerville", serif;
        font-size: 1.9rem;
        color: rgba(53,68,53,.28);
    }
    .journey-mobile-story small { display: block; color: #2A5D52; font-weight: 800; letter-spacing: .12em; margin-bottom: 7px; }
    .journey-mobile-story h3 { margin-bottom: 10px; font-size: 1.7rem; }
    .journey-mobile-story p { margin: 0; line-height: 1.7; }
}

@media (max-width: 575.98px) {
    .journey-experience-intro { padding-left: 18px; padding-right: 18px; }
    .journey-experience-intro h1 { font-size: 2.3rem; }
    .journey-centerpiece { height: 320px; }
    .journey-premium-image { max-width: 100%; max-height: 100%; }
}