.coffee-experience{position:relative;isolation:isolate;overflow:hidden;background:#190f0b;color:#faf5eb;text-align:center;padding:48px 0 60px;min-height:760px;background-image:radial-gradient(ellipse at 50% 42%,#483023 0,transparent 60%)}
.experience-kicker{font-size:10px;letter-spacing:.26em;color:#b37d8e;position:relative;z-index:4;margin:0}
.experience-stage{position:relative;height:480px;display:grid;place-items:center;margin:0 auto;max-width:1920px}
.experience-wordmark{z-index:1;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:240px;font-size:clamp(70px,10vw,180px);font-weight:500;letter-spacing:-.07em;color:#f7eee1;white-space:nowrap}
.experience-cup{width:420px;position:relative;z-index:2;filter:drop-shadow(0 25px 22px #0009);animation:cup-turn 18s ease-in-out infinite alternate;animation-play-state:paused}
.experience-cup img{display:block;width:100%;height:auto}
.experience-splash{position:absolute;width:38%;height:auto;pointer-events:none;animation:splash-drift 9s ease-in-out infinite alternate;animation-play-state:paused}
.splash-left{z-index:0;left:-7%;bottom:-12px;transform-origin:0 100%}
.splash-right{z-index:1;right:-6%;top:5px;transform-origin:100% 0;animation-delay:-4s}
.experience-steam{position:absolute;z-index:3;width:190px;height:250px;left:calc(50% - 95px);top:0;pointer-events:none;filter:blur(5px)}
.experience-steam i{position:absolute;bottom:0;left:20%;width:65px;height:205px;border-left:22px solid #fff8e1; border-radius:50%;opacity:0;animation:steam-rise 7s ease-in-out infinite;animation-delay:-1s;animation-play-state:paused}
.experience-steam i:nth-child(2){left:45%;animation-delay:-3.3s;height:180px}
.experience-steam i:nth-child(3){left:60%;animation-delay:-5.6s;width:55px}
.experience-copy{position:relative;z-index:4;padding:0 24px}
.experience-copy h2{font-family:var(--serif,Georgia,serif);font-size:clamp(32px,3.4vw,52px);font-weight:400;letter-spacing:-.025em;margin:0 0 14px}
.experience-copy p{font-size:14px;color:#c9bbb0;margin:0 0 22px}
.experience-copy a{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#6b2038;border-bottom:1px solid #6b203866;padding-bottom:8px;display:inline-flex;gap:24px}
.experience-toggle{position:absolute;right:24px;bottom:20px;background:transparent;border:1px solid #ffffff40;border-radius:20px;color:#dfd4c9;padding:10px 15px;font-size:10px;z-index:5;cursor:pointer}
.coffee-experience.is-running .experience-cup,.coffee-experience.is-running .experience-splash,.coffee-experience.is-running .experience-steam i{animation-play-state:running}
@keyframes cup-turn{from{transform:rotate(-14deg)}to{transform:rotate(17deg)}}
@keyframes splash-drift{from{transform:translate(-2%,10px) rotate(-3deg) scale(.96)}to{transform:translate(2%,-14px) rotate(3deg) scale(1.04)}}
@keyframes steam-rise{0%{opacity:0;transform:translate(0,55px) scale(.65) rotate(-12deg)}25%{opacity:.62}60%{opacity:.44}100%{opacity:0;transform:translate(30px,-80px) scale(1.3) rotate(16deg)}}
@media(max-width:700px){.coffee-experience{padding:38px 0 80px;min-height:650px}.experience-stage{height:350px}.experience-cup{width:min(74vw,330px)}.experience-wordmark{font-size:14vw;gap:5vw;opacity:.5;transform:translateY(-105px)}.experience-splash{width:65%;opacity:.85}.splash-left{left:-29%;bottom:5px}.splash-right{right:-26%;top:65px}.experience-steam{top:0;height:180px}.experience-copy p{max-width:290px;margin:0 auto 24px;line-height:1.7}.experience-toggle{right:50%;transform:translateX(50%);white-space:nowrap}.experience-copy h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){.coffee-experience .experience-cup,.coffee-experience .experience-splash,.coffee-experience .experience-steam i{animation:none!important}.experience-steam{display:none}}

/* Ivory continuation of the campaign above. */
.coffee-experience{background:#f3eee3;background-image:radial-gradient(ellipse at 50% 35%,#fffdf7 0,#f5f0e6 52%,#e9e1d3 100%);color:#302e28}
.experience-kicker{color:#6b2038}
.experience-wordmark{color:#514a3e}
.experience-cup{filter:drop-shadow(0 22px 24px #51433233)}
.experience-steam i{border-left-color:#fff;box-shadow:inset 5px 0 10px #ffffffb3}
.experience-copy p{color:#686154}
.experience-copy a{color:#6b2038;border-color:#6b203866}
.experience-toggle{color:#514b40;border-color:#514b4055}