:root{--blue:#153cc2;--navy:#09234a;--paper:#f4f5f3;--muted:#637085;--line:#15324e25;color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:0}body{margin:0;background:var(--paper);color:var(--navy);font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif;overflow-x:clip}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid #5e8aff;outline-offset:5px}.skip{position:fixed;top:-100px;z-index:1000;padding:15px;background:white}.skip:focus{top:10px}.header{height:92px;padding:0 5.2%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:4}.brand img{display:block;width:166px;height:auto;filter:brightness(0) saturate(100%) invert(12%) sepia(35%) saturate(2287%) hue-rotate(185deg) brightness(93%) contrast(99%)}nav{display:flex;gap:38px;font-size:14px}nav a{padding:15px 0}.motion-button{border:0;background:none;font-size:12px;display:flex;gap:12px;align-items:center;padding:12px}.motion-button span{background:var(--navy);color:white;border-radius:20px;padding:5px 12px;font-size:11px}.hero{min-height:780px;height:calc(100svh - 92px);max-height:1100px;position:relative;display:grid;grid-template-columns:1fr 1fr;padding:0 5.2% 70px;isolation:isolate}.hero-copy{padding-top:13%;align-self:center;position:relative;z-index:2;pointer-events:none}.hero-copy a{pointer-events:auto}.eyebrow{font-size:11px;font-weight:500;letter-spacing:2px;margin:0 0 30px}.hero h1{font-size:clamp(56px,6.3vw,98px);line-height:1.27;letter-spacing:-4px;margin:0 0 30px;font-weight:700}.hero h1 span{color:var(--blue)}.hero-description{font-size:17px;color:#59677a;line-height:1.85;margin-bottom:34px}.journey-button{display:inline-flex;align-items:center;gap:36px;font-size:15px;border-bottom:1px solid var(--navy);padding:0 0 12px;position:relative}.button-arrow{width:40px;height:40px;background:var(--blue);color:white;border-radius:50%;display:grid;place-items:center;font-size:23px;transition:transform .3s}.journey-button:hover .button-arrow{transform:rotate(45deg)}.hero-edition{display:flex;gap:45px;font-size:11px;line-height:1.8;color:#6c7786;margin-top:60px}.hero-edition>span:first-child{font-size:13px;font-weight:600;letter-spacing:1px;color:var(--navy)}.hero-visual{position:relative;min-width:0;height:100%;perspective:1400px;isolation:isolate;touch-action:pan-y}.hero-picture{position:absolute;top:8%;right:-12%;width:104%;height:82%;background:#1642d3;transform:rotate(-6deg);overflow:hidden}.hero-picture-image{position:absolute;inset:-10%;background:url('assets/coconut-editorial.webp') center/cover;transform:translate3d(calc(var(--px,0)*8px),calc(var(--py,0)*8px),0) scale(1.03)}.picture-label{position:absolute;top:28px;left:30px;color:#ffffffce;font-size:11px;letter-spacing:2px}.picture-index{position:absolute;bottom:25px;right:30px;color:#ffffffce;font-size:11px;letter-spacing:1px}.product-float{position:absolute;inset:0;transform:translate3d(calc(var(--px,0)*-12px),calc(var(--py,0)*-10px),70px) rotateY(calc(var(--px,0)*7deg)) rotateX(calc(var(--py,0)*-5deg));transform-style:preserve-3d;pointer-events:none}.hero-product{position:absolute;width:135%;height:115%;object-fit:contain;left:-28%;top:-1%;transform:rotate(-13deg);user-select:none;-webkit-user-drag:none}.hero-product-name{position:absolute;right:3%;bottom:17%;font-size:18px;color:white;z-index:3}.hero-product-name small{display:block;font-size:10px;letter-spacing:2px;margin-top:8px}.hero-stamp{position:absolute;left:-11%;top:17%;color:var(--blue);font-size:18px;line-height:1.4;border:1px solid #61739965;padding:15px 12px;transform:rotate(-9deg);background:var(--paper)}.hero-footer{position:absolute;bottom:26px;left:5.2%;right:5.2%;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.5px}.hero-footer a{font-size:10px;letter-spacing:1.5px;display:flex;gap:18px;align-items:center}.hero-footer a span{font-size:22px}.intro{padding:120px 8% 130px;display:grid;grid-template-columns:1.3fr 1fr;border-top:1px solid var(--line);gap:20px 80px;align-items:end}.intro .eyebrow{grid-column:1/-1;margin-bottom:25px}h2{font-size:clamp(36px,4.4vw,68px);font-weight:600;letter-spacing:-2px;line-height:1.35;margin:0}.intro h2 span{color:#7b8a9e}.intro>p:last-child{font-size:18px;color:#56667b;line-height:2.2;justify-self:center;margin:0 0 8px}.journey{height:330svh;min-height:2100px;position:relative;--j:0;--p0:1;--p1:0;--p2:0;--c1:100%;--c2:100%}.journey-stage{position:sticky;top:0;height:100svh;min-height:640px;overflow:hidden;isolation:isolate;background:#163abe;color:white}.chapter-backdrop{position:absolute;inset:0;background-size:cover;background-position:center}.coconut-backdrop{background-image:url('assets/coconut-editorial.webp');transform:scale(calc(1.06 + var(--j)*.03)) translateX(calc(var(--j)*-1%))}.coffee-backdrop{clip-path:inset(0 var(--c1) 0 0);transform:scale(1.02)}.final-backdrop{background:#e9eff2;clip-path:inset(0 0 0 var(--c2))}.chapter-shade{position:absolute;inset:0;background:linear-gradient(90deg,#03143e59,transparent 65%);opacity:calc(1 - var(--p2))}.journey-topline{position:absolute;top:42px;left:6%;right:6%;display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;z-index:3;color:var(--journey-ink,white)}.chapter-copy{position:absolute;left:8%;top:29%;z-index:3;max-width:46%;pointer-events:none}.chapter-copy h2{font-size:clamp(50px,6.3vw,100px);line-height:1.25;letter-spacing:-3px;font-weight:600}.chapter-copy>.eyebrow{font-size:12px}.chapter-copy>p:last-child{font-size:17px;line-height:1.9;margin-top:30px}.chapter-copy[data-chapter="0"]{opacity:var(--p0);transform:translateY(calc((1 - var(--p0))*-35px))}.chapter-copy[data-chapter="1"]{opacity:var(--p1);transform:translateY(calc((1 - var(--p1))*35px))}.chapter-copy[data-chapter="2"]{opacity:var(--p2);transform:translateY(calc((1 - var(--p2))*35px));color:var(--navy)}.journey-product{position:absolute;right:1%;top:8%;height:85%;width:62%;opacity:var(--p2);transform:translateY(calc((1 - var(--p2))*90px)) rotate(calc(-10deg + var(--p2)*4deg)) scale(calc(.85 + var(--p2)*.15));z-index:2}.journey-product img{width:100%;height:100%;object-fit:contain}.journey-word{position:absolute;bottom:3%;left:5%;font-size:21vw;font-weight:700;letter-spacing:-1.2vw;color:#15364d08;opacity:var(--p2);pointer-events:none}.chapter-nav{position:absolute;left:8%;bottom:70px;display:flex;gap:38px;z-index:4;color:var(--journey-ink,white)}.chapter-nav button{display:flex;align-items:center;gap:10px;padding:13px 0;background:transparent;border:0;position:relative;color:inherit;font-size:14px;opacity:.65}.chapter-nav button>span:first-child{font-size:10px;letter-spacing:1px}.chapter-nav button[aria-current=step]{opacity:1}.step-line{position:absolute;bottom:0;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s}.chapter-nav button[aria-current=step] .step-line{transform:scaleX(1)}.journey-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#ffffff20}.journey-progress>span{display:block;width:100%;height:100%;background:var(--journey-ink,white);transform:scaleX(calc(var(--j)/2));transform-origin:left}.creative-note{position:absolute;bottom:22px;right:6%;font-size:10px;letter-spacing:.3px;color:var(--journey-ink,white);opacity:.65;z-index:4}.cup{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding:120px 8%;align-items:center}.cup-image{height:640px;position:relative;display:grid;place-items:center;background:#e5eaf0;overflow:hidden}.cup-image img{width:120%;height:105%;object-fit:contain;position:absolute;transform:rotate(9deg)}.cup-image-word{position:absolute;left:7%;top:8%;font-size:clamp(70px,8vw,130px);font-weight:700;letter-spacing:-5px;line-height:.9;color:#bac7d9;opacity:.5}.image-credit{position:absolute;bottom:22px;left:8%;font-size:10px;color:#748299}.cup-copy h2{font-size:clamp(36px,4vw,62px)}.cup-description{font-size:17px;line-height:1.9;color:#697789;margin:25px 0}.tasting-notes{margin:35px 0}.tasting-notes>div{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);padding:16px 0;font-size:14px}.tasting-notes dt{color:#718096}.tasting-notes dd{margin:0}.cup-copy .journey-button{font-size:14px;gap:20px}.product-note{font-size:11px;color:#7e8a99;line-height:1.8;margin-top:20px}.closing{background:var(--blue);color:white;padding:65px 6% 30px;overflow:hidden}.closing p{font-size:15px;color:#dce7ff}.closing>a{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;font-size:clamp(70px,13vw,215px);font-weight:700;letter-spacing:-.6vw;line-height:1.2}.closing>a span{font-size:12px;font-weight:400;letter-spacing:0;white-space:nowrap;margin-bottom:2.8vw}footer{padding:24px 6%;display:flex;justify-content:space-between;gap:25px;font-size:11px;color:#708096}.motion-paused html{scroll-behavior:auto}.motion-paused .product-float{transform:none!important}.motion-paused .hero-picture-image{transform:none!important}.motion-paused .button-arrow{transition:none}.motion-paused *{scroll-behavior:auto!important}@media(max-width:1000px){.hero h1{font-size:64px}.hero{min-height:710px}.hero-edition{gap:20px}.hero-product{left:-30%;width:148%}.hero-picture{height:80%;right:-16%;width:112%;top:11%}.hero-stamp{display:none}.hero-product-name{right:-2%;bottom:10%}.intro{gap:20px 40px;padding:90px 7%}.cup{padding:90px 7%;gap:7%}.cup-image{height:540px}.chapter-copy{left:7%}.chapter-nav{left:7%}}@media(max-width:700px){.header{height:76px;padding:0 6%}.brand img{width:135px}.header nav{gap:18px;font-size:12px}.header nav a:nth-child(2){display:none}.motion-button{padding:10px 0;gap:6px}.motion-button span{padding:4px 9px}.hero{display:flex;flex-direction:column;height:auto;min-height:1040px;padding:36px 7% 74px}.hero-copy{padding-top:0;align-self:stretch}.eyebrow{font-size:9px;letter-spacing:1.5px;margin-bottom:24px}.hero h1{font-size:clamp(44px,11vw,67px);letter-spacing:-2.5px;margin-bottom:20px;line-height:1.25}.hero-description{font-size:15px;line-height:1.7;margin-bottom:24px}.hero-edition{display:none}.journey-button{font-size:14px;gap:27px}.button-arrow{width:36px;height:36px}.hero-visual{height:480px;margin-top:26px;flex-shrink:0;min-height:0}.hero-picture{top:7%;height:88%;width:92%;right:-10%}.hero-product{width:146%;height:123%;left:-32%;top:-5%}.hero-product-name{right:3%;bottom:10%;font-size:16px}.hero-product-name small{font-size:9px}.picture-label{font-size:8px;top:20px;left:20px;letter-spacing:1.5px}.picture-index{display:none}.hero-footer{left:7%;right:7%;bottom:21px;font-size:10px}.hero-footer>span:first-child{display:none}.hero-footer a{font-size:9px}.intro{padding:70px 7%;grid-template-columns:1fr;gap:22px}.intro .eyebrow{grid-column:auto;font-size:9px;margin-bottom:6px}h2{font-size:36px;letter-spacing:-1.5px}.intro>p:last-child{justify-self:start;font-size:15px;line-height:2;margin:0}.journey{height:280svh;min-height:2000px}.journey-stage{min-height:650px}.coconut-backdrop{background-position:66% center}.coffee-backdrop{background-position:60% center}.chapter-shade{background:linear-gradient(180deg,#051c5570,transparent 80%)}.journey-topline{top:28px;left:7%;right:7%;font-size:8px;letter-spacing:1.2px}.chapter-copy{left:8%;top:15%;max-width:90%}.chapter-copy h2{font-size:48px;letter-spacing:-2px}.chapter-copy>.eyebrow{font-size:10px;margin-bottom:22px}.chapter-copy>p:last-child{font-size:15px;margin-top:22px;line-height:1.8}.journey-product{right:-22%;top:31%;height:57%;width:132%}.chapter-copy[data-chapter="2"] h2{font-size:44px}.chapter-copy[data-chapter="2"]>p:last-child{display:none}.chapter-nav{bottom:64px;gap:28px;left:8%}.chapter-nav button{font-size:13px;gap:8px}.creative-note{bottom:23px;left:8%;right:auto;font-size:9px;max-width:85%}.journey-word{font-size:27vw;bottom:14%}.cup{padding:70px 7%;grid-template-columns:1fr;gap:45px}.cup-image{height:440px}.cup-image img{width:115%;height:110%}.cup-image-word{font-size:88px}.cup-copy .eyebrow{font-size:10px}.cup-copy h2{font-size:37px}.cup-description{font-size:15px}.tasting-notes{margin:25px 0}.closing{padding:45px 7% 30px}.closing p{font-size:13px}.closing>a{font-size:14vw;letter-spacing:-3px;flex-wrap:wrap;gap:14px}.closing>a span{font-size:11px;width:100%;margin:0;letter-spacing:0}footer{font-size:10px;flex-wrap:wrap;gap:14px;padding:22px 7%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.product-float,.hero-picture-image{transform:none!important}}

.hero-stamp{display:none}.hero-picture-image,.product-float{transition:transform .25s ease-out}
.hero{overflow:clip}
@media(max-width:700px){.chapter-shade{background:linear-gradient(180deg,#03122e94 0%,#03122e38 52%,transparent 90%)}}

.journey.assets-ready .coffee-backdrop{background-image:url('assets/coffee-editorial.webp')}
.journey-stage{contain:paint}
/* Interactive chapters: event-driven, no idle animation. */
.mix-section{padding:100px 7%;background:#e9edef;scroll-margin-top:24px}.mix-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:45px}.mix-heading .eyebrow{margin:0}.section-number{font-size:12px;color:#657488}.mix-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:8%;align-items:center}.mix-copy h2{font-size:clamp(36px,4vw,64px)}.mix-copy h2 span{color:var(--blue)}.mix-copy>p{color:#526378;line-height:1.9;font-size:16px;margin:24px 0 34px}.mix-readout{display:flex;justify-content:space-between;align-items:center;margin:36px 0 22px;font-size:17px}.mix-readout output{font-size:38px;font-variant-numeric:tabular-nums;letter-spacing:-2px}.mix-readout output span{font-size:12px;color:#67778b;letter-spacing:0}.range-label{display:block;font-size:12px;color:#526378;margin-bottom:8px}#blend{display:block;width:100%;height:40px;margin:0;accent-color:#153cc2;cursor:ew-resize;touch-action:pan-y}.range-ends{display:flex;justify-content:space-between;font-size:12px;color:#64748a}.mix-presets{display:flex;gap:8px;margin:24px 0 28px}.mix-presets button{flex:1;min-height:44px;background:transparent;border:1px solid #a3afbe;border-radius:3px;font-size:13px}.mix-presets button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}.mix-bottom{display:flex;justify-content:space-between;gap:10px}.mix-bottom button{border:0;background:transparent;padding:10px 0;min-height:44px;font-size:13px}.mix-copy .mix-disclaimer{font-size:11px;margin:13px 0 0;color:#67778b}.mix-art{position:relative;aspect-ratio:4/5;overflow:hidden;background:#e2d6c0;isolation:isolate;--blend:0;--finish:0;--reveal:100%}.milk-base,.mix-fluid,.mix-finish{position:absolute;inset:0}.milk-base{background:radial-gradient(ellipse at 30% 35%,#fffef6 0 15%,#f2ecdf 30%,#d7c8ad 58%,#f7f0e5 70%,#d4c2a2 95%)}.mix-fluid{background-size:cover;background-position:center;clip-path:inset(var(--reveal) 0 0);transform:scale(calc(1.16 - var(--blend)*.16))}.mix-art.assets-ready .mix-fluid{background-image:url('assets/coffee-editorial.webp')}.mix-finish{background:#1842c5;opacity:var(--finish)}.mix-cup{position:absolute;inset:5% -10%;width:120%;height:90%;object-fit:contain;opacity:var(--finish);transform:translateY(calc((1 - var(--finish))*60px)) rotate(-8deg)}.mix-art-kicker{position:absolute;top:30px;left:30px;font-size:11px;letter-spacing:2px;color:#112b48;background:#f7f4ebdf;padding:9px 11px}.mix-art-word{position:absolute;top:19%;left:8%;font-size:clamp(64px,8vw,135px);font-family:Georgia,serif;font-style:italic;color:#513c2b;opacity:calc(1 - var(--blend));letter-spacing:-5px}.mix-art-caption{position:absolute;bottom:25px;left:6%;right:6%;font-size:12px;color:#122c4a;background:#f7f4ebe8;padding:14px 16px}.moments{padding:95px 0 0;background:#071d3b;color:white;scroll-margin-top:0}.moments-heading{padding:0 7% 45px;display:flex;justify-content:space-between;align-items:end;gap:35px}.moments-heading .eyebrow{font-size:10px;color:#a9bdd7}.moments h2{font-size:clamp(32px,3.3vw,52px)}.moments h2 span{display:block;color:#a7bbd5}.moment-tabs{display:flex;gap:5px;padding:5px;border:1px solid #ffffff40;border-radius:30px;flex-shrink:0}.moment-tabs button{min-width:76px;min-height:44px;padding:10px 18px;border:0;border-radius:25px;background:none;color:#c2cfe1;font-size:14px}.moment-tabs button[aria-pressed=true]{background:white;color:#09234a}.moment-stage{height:650px;position:relative;overflow:hidden;isolation:isolate;background:#27425c}.moment-photo,.moment-shade{position:absolute;inset:0}.moment-photo{background-position:center;background-size:cover}.moment-stage.assets-ready[data-scene=morning] .moment-photo{background-image:url('assets/morning.webp')}.moment-stage.assets-ready[data-scene=afternoon] .moment-photo{background-image:url('assets/afternoon.webp')}.moment-stage.assets-ready[data-scene=weekend] .moment-photo{background-image:url('assets/weekend.webp')}.moment-shade{background:linear-gradient(90deg,#04182fe6,#04182f55 52%,transparent 80%)}.moment-story{position:absolute;left:8%;top:11%;z-index:2}.moment-time{font-size:clamp(50px,7vw,100px);font-weight:300;letter-spacing:-4px;line-height:1;font-variant-numeric:tabular-nums}.moment-label{font-size:11px;letter-spacing:2px;margin:20px 0 38px;color:#d0dfef}.moment-story h3{font-size:clamp(32px,3.5vw,50px);line-height:1.35;margin:0 0 22px;letter-spacing:-1px;white-space:pre-line}.moment-description{font-size:16px;line-height:1.9;white-space:pre-line;color:#e5edf8}.moment-product{position:absolute;width:47%;height:80%;right:0;bottom:5%;transform:rotate(-6deg);transition:transform .5s ease}.moment-stage[data-scene=afternoon] .moment-product{transform:rotate(4deg)}.moment-stage[data-scene=weekend] .moment-product{transform:rotate(-2deg)}.moment-product img{position:relative;width:100%;height:100%;object-fit:contain}.cup-shadow{position:absolute;bottom:7%;left:27%;width:47%;height:6%;border-radius:50%;background:radial-gradient(ellipse,#07182e60,transparent 70%);transform:rotate(6deg)}.moment-caption{position:absolute;bottom:22px;left:8%;right:6%;display:flex;justify-content:space-between;gap:15px;font-size:10px;color:white;text-shadow:0 1px 4px #000}.moment-index{font-size:13px;letter-spacing:2px}.motion-paused .moment-product{transition:none!important}
@media(max-width:1000px){.mix-layout{gap:5%}.mix-art{aspect-ratio:3/5}.moments-heading{align-items:start;flex-direction:column}.moment-product{width:57%;right:-6%}.header nav{gap:18px}}
@media(max-width:700px){.header nav a:not(:first-child){display:none}.mix-section{padding:65px 7%}.mix-heading{gap:10px;margin-bottom:30px}.mix-heading .eyebrow{font-size:8px;letter-spacing:1px}.section-number{font-size:10px;white-space:nowrap}.mix-layout{grid-template-columns:1fr;gap:32px}.mix-copy h2{font-size:37px}.mix-copy>p{font-size:15px;margin:20px 0}.mix-art{aspect-ratio:1/1}.mix-art-word{font-size:90px}.mix-art-kicker{top:20px;left:20px;font-size:9px}.mix-art-caption{bottom:18px;font-size:11px;padding:12px}.mix-readout{margin:24px 0 14px}.mix-presets{margin:20px 0 15px}.moments{padding-top:65px}.moments-heading{gap:25px;padding-bottom:30px}.moments h2{font-size:31px}.moment-tabs{width:100%}.moment-tabs button{flex:1}.moment-stage{height:720px}.moment-story{top:35px;left:7%}.moment-time{font-size:60px}.moment-label{margin:14px 0 25px;font-size:10px}.moment-story h3{font-size:32px}.moment-description{font-size:14px}.moment-product{width:92%;height:52%;right:-17%;bottom:3%}.moment-shade{background:linear-gradient(150deg,#04182fe6,#04182f55 55%,transparent 85%)}.moment-caption{left:7%;right:7%;font-size:8px;align-items:end}.moment-caption>span:last-child{max-width:180px;text-align:right;line-height:1.6}}
.mix-fluid{clip-path:none;mask-image:linear-gradient(to top,#000 calc(var(--blend)*140% - 35%),transparent calc(var(--blend)*140% + 5%));transform:scale(calc(1.2 - var(--blend)*.2)) rotate(calc((1 - var(--blend))*-8deg))}
@media(max-width:700px){.mix-layout{display:flex;flex-direction:column;gap:0;align-items:stretch}.mix-copy{display:contents}.mix-copy h2{order:0}.mix-copy>p:first-of-type{order:1}.mix-art{order:2;margin:10px 0 0;aspect-ratio:1.15}.mix-readout{order:3}.range-label{order:4}#blend{order:5}.range-ends{order:6}.mix-presets{order:7}.mix-bottom{order:8}.mix-copy .mix-disclaimer{order:9}.mix-art-word{top:13%;font-size:74px}}
/* The real finished drink sits against the existing AI-generated café scene. */
.mix-art.assets-ready .mix-finish{background:linear-gradient(0deg,#071d3b20,#071d3b08),url('assets/afternoon.webp') center/cover}
.mix-cup{inset:9% -10%;height:85%}
.extraction-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.mix-art{aspect-ratio:2/3;background:#201b18}.mix-finish,.mix-cup{pointer-events:none}.mix-art-kicker{font-size:10px;top:20px;left:20px}.extraction-play{width:100%;min-height:48px;border:0;background:var(--blue);color:white;border-radius:3px;font-size:14px;margin:0 0 8px}.extraction-status{min-height:18px;font-size:12px!important;margin:3px 0 8px!important;color:#53647a}.mix-art-caption{bottom:16px;padding:10px 12px}.mix-art.assets-ready .mix-fluid{background-image:none}
@media(max-width:700px){.mix-art{aspect-ratio:2/3;max-height:530px}.extraction-play{order:8;margin-top:4px}.extraction-status{order:9}.mix-bottom{order:10}.mix-copy .mix-disclaimer{order:11}.mix-readout{margin-top:18px}.mix-art-kicker{font-size:8px;left:14px;top:14px}.mix-art-caption{font-size:10px}}
.mix-art{width:100%;max-width:480px;justify-self:center}
@media(max-width:700px){.mix-art{max-width:354px;max-height:none;align-self:center}}
.mix-finish:after{content:'';position:absolute;left:30%;bottom:20%;width:44%;height:5%;background:radial-gradient(ellipse,#271a1366,transparent 70%);transform:rotate(-8deg)}
.extraction-time{display:block;text-align:right;font-size:12px;color:#637085;font-variant-numeric:tabular-nums;margin:3px 0 7px;order:8}.mix-finish,.mix-cup{transition:opacity .3s ease}.barista-scene{isolation:isolate;background:linear-gradient(145deg,#e5ecf9,#d6e0f1);overflow:hidden}.barista-scene:before{content:'';position:absolute;inset:15% 8% 0;border:1px solid #fff9;border-radius:50% 50% 0 0;background:#eef2f8}.barista-word{position:absolute;z-index:1;left:7%;top:7%;font-size:clamp(48px,5vw,80px);letter-spacing:-4px;font-weight:700;line-height:.95;color:#153cc21a}.cup-image .barista{position:absolute;z-index:2;width:100%;height:100%;inset:0;object-fit:contain;object-position:center bottom;transform:none}.barista-greeting{position:absolute;z-index:3;right:5%;bottom:12%;background:#fffef5;padding:15px 18px;border-radius:18px 18px 2px 18px;font-size:13px;box-shadow:0 8px 24px #09234a0a}.barista-scene .image-credit{z-index:3;color:#526378;background:#eef2f8df;padding:5px 8px;left:5%;bottom:3%}@media(max-width:700px){.cup-image.barista-scene{height:480px}.barista-word{font-size:58px}.barista-greeting{font-size:12px;bottom:13%}}

.extraction-scrub{position:absolute;inset:0;background-image:url('assets/extraction-frames.webp');background-size:900% 900%;background-repeat:no-repeat}.extraction-scrub[hidden]{display:none}#blend{touch-action:pan-y}
/* Touch screens have no hover: give the original product a quiet, automatic parallax. */
@keyframes mobile-cup-float{0%,100%{transform:translate3d(-4px,8px,40px) rotate(-1.5deg) rotateY(-3deg)}50%{transform:translate3d(6px,-12px,40px) rotate(1.5deg) rotateY(3deg)}}
@keyframes mobile-coconut-drift{0%,100%{transform:translate3d(5px,-4px,0) scale(1.04)}50%{transform:translate3d(-5px,6px,0) scale(1.04)}}
@media(max-width:700px),(hover:none) and (pointer:coarse){.hero-visual .product-float{animation:mobile-cup-float 6s ease-in-out infinite;animation-play-state:paused;transition:none}.hero-visual .hero-picture-image{animation:mobile-coconut-drift 6s ease-in-out infinite;animation-play-state:paused;transition:none}.hero-visual.hero-visible .product-float,.hero-visual.hero-visible .hero-picture-image{animation-play-state:running}.motion-paused .hero-visual .product-float,.motion-paused .hero-visual .hero-picture-image{animation:none}}