@font-face{font-family:"Quality Lato";src:url("../images/home-revision/quality-lato-bold.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
:root{--paper:#e2dbd3;--olive:#78853c;--forest:#3f4727;--taupe:#a39383;--caramel:#b5977a;--font-en:"Lato",Arial,sans-serif;--font-zh:"Noto Sans TC","Noto Sans CJK TC","Microsoft JhengHei",sans-serif}
html{scroll-behavior:smooth}
body{overflow:auto;background:var(--paper);color:var(--forest)}
#content{height:auto;min-height:100svh}
.site-body{margin-left:90px;overflow:clip}
.home-wrap{width:min(1324.3581px,calc(100% - 76px));margin-inline:auto}
.side-rail{position:fixed;z-index:5;inset:0 auto 0 0;width:90px;background:var(--olive);color:var(--paper);display:flex;align-items:center;flex-direction:column;border-right:1px solid #e2dbd355}
.rail-logo{display:flex;align-items:center;flex-direction:column;gap:0;width:83px;margin-top:23px;color:inherit;text-decoration:none;font:900 11px var(--font-en);letter-spacing:.08em;opacity:0;transform:translateX(-100px) rotate(-105deg) scale(.5);transform-origin:center center}
.brand-mark{display:block;width:73px;height:64px;overflow:visible}
.menu-cookie{display:block;width:82px;height:82px;overflow:visible;transition:transform .35s ease}
.cookie-photo{filter:saturate(.64) brightness(1.2)}
.cookie-menu{border:0;background:none;gap:5px}
.cookie-menu:hover .menu-cookie{transform:rotate(-10deg)}
.cookie-menu:focus-visible{outline:2px solid var(--paper);outline-offset:3px;border-radius:8px}
@media(max-width:760px){.cookie-menu .menu-cookie{width:54px;height:54px}.cookie-menu{gap:7px}}
.home-entered .rail-logo{animation:logo-spin-in 1.2s cubic-bezier(.17,.85,.28,1.24) .15s both}
.rail-logo:hover .brand-mark{transform:rotate(16deg);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
@keyframes logo-spin-in{0%{opacity:0;transform:translateX(-100px) rotate(-105deg) scale(.5)}65%{opacity:1;transform:translateX(6px) rotate(14deg) scale(1.08)}100%{opacity:1;transform:translateX(0) rotate(0) scale(1)}}
.rail-line{width:1px;flex:1;min-height:40px;margin:30px 0 20px;background:repeating-linear-gradient(to bottom,#e2dbd388 0 2px,transparent 2px 8px)}
.rail-caption{writing-mode:vertical-rl;font:700 10px var(--font-en);letter-spacing:.22em;white-space:nowrap}
.rail-scroll{margin:36px 0 27px;writing-mode:vertical-rl;color:inherit;text-decoration:none;font:700 10px var(--font-en);letter-spacing:.22em}.rail-scroll span{font-size:18px;margin-top:10px}
.site-header{height:112px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:2}
.header-wordmark{text-decoration:none;color:var(--forest);font:900 28px var(--font-en);letter-spacing:-.05em;line-height:1}.header-wordmark span{display:block;margin-top:7px;font:700 10px var(--font-zh);letter-spacing:.26em}
.main-nav{display:flex;align-items:center;gap:clamp(24px,4vw,76px);margin-left:auto}.main-nav a{text-decoration:none;color:var(--forest);font:900 13px var(--font-en);letter-spacing:.11em;white-space:nowrap}.main-nav small{font:500 10px var(--font-zh);margin-left:7px;letter-spacing:.03em}.main-nav a:hover,.text-link:hover{color:var(--olive)}
.header-cta{display:flex;align-items:center;justify-content:center;gap:20px;min-height:46px;padding:0 21px;border:1px solid var(--forest);border-radius:50px;color:var(--forest);text-decoration:none;font:900 11px var(--font-en);letter-spacing:.1em;white-space:nowrap;transition:background .25s,color .25s}.header-cta:hover{background:var(--forest);color:var(--paper)}
.hero{min-height:calc(100svh - 112px);position:relative;background:var(--paper)}.hero-inner{min-height:calc(100svh - 112px);display:grid;grid-template-columns:42% 58%;align-items:center;position:relative;padding-bottom:64px}
.hero-copy{position:relative;z-index:2;padding-bottom:10px}.eyebrow{display:flex;align-items:center;gap:13px;margin:0 0 27px;font:900 11px var(--font-en);letter-spacing:.23em}.asterisk{color:var(--olive);font-size:23px;line-height:.5}.eyebrow-no{margin-left:15px;color:var(--taupe)}
.hero h1{margin:0;font:900 clamp(65px,6.65vw,130px)/.89 var(--font-en);letter-spacing:-.065em;white-space:nowrap}.hero h1 em{font-style:normal;color:var(--olive)}.hero-dot{color:var(--caramel)}
.hero-zh{font:700 clamp(21px,2vw,31px)/1.35 var(--font-zh);letter-spacing:.15em;margin:36px 0 17px}.hero-description{font:400 14px/2 var(--font-zh);letter-spacing:.04em;margin:0;color:#3f4727c9}
.round-link{display:inline-flex;align-items:center;gap:23px;margin-top:31px;color:var(--forest);text-decoration:none;font:700 13px var(--font-zh);letter-spacing:.06em}.round-arrow{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--forest);font:400 22px var(--font-en);transition:transform .25s,background .25s,color .25s}.round-link:hover .round-arrow{transform:rotate(45deg);background:var(--forest);color:var(--paper)}
.hero-visual{height:min(670px,74svh);position:relative;align-self:center;margin-right:calc((min(1324.3581px,100vw - 194px) - (100vw - 194px))/2 - 45px)}
.hero-blob{position:absolute;inset:0 -5% 0 -8%;overflow:hidden;border-radius:53% 47% 52% 48%/47% 46% 54% 53%;transform:rotate(-7deg);background:#d8cfbf}.hero-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:69% center;transform:rotate(7deg) scale(1.2)}
.hero-sticker{position:absolute;z-index:1;right:0;bottom:4%;width:132px;height:132px;border-radius:50%;background:var(--olive);color:var(--paper);display:flex;justify-content:center;align-items:center;flex-direction:column;gap:4px;transform:rotate(12deg);box-shadow:0 10px 30px #3f472733}.hero-sticker span{font:900 9px var(--font-en);letter-spacing:.19em}.hero-sticker strong{font:900 24px var(--font-en);letter-spacing:-.04em}
.hero-sparkle{position:absolute;z-index:1;width:65px;right:4%;top:1%;fill:var(--olive);filter:drop-shadow(0 0 0 var(--paper))}.hero-photo-label{position:absolute;left:-4%;bottom:8%;font:900 10px var(--font-en);letter-spacing:.22em;color:var(--paper);transform:rotate(-7deg);text-shadow:0 1px 10px #3f4727aa}
.hero-index{position:absolute;bottom:31px;left:0;font:900 12px var(--font-en);letter-spacing:.2em;color:var(--taupe)}
@keyframes marquee{to{transform:translateX(-50%)}}
.menu-section{background:#f5f0e9;padding:105px 0 122px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:48px}.section-kicker{font:900 11px var(--font-en);letter-spacing:.23em;color:var(--olive);margin:0 0 24px}.section-heading h2,.story-copy h2,.moments-inner h2{margin:0;font:700 clamp(34px,4vw,68px)/1.18 var(--font-zh);letter-spacing:-.03em}.section-heading h2 span{color:var(--olive)}.section-heading>p{font:400 14px/1.9 var(--font-zh);margin:0;color:#3f4727c9}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.product-card{min-width:0}.product-image{height:clamp(240px,29vw,385px);overflow:hidden;background:var(--paper);border-radius:49% 49% 9px 9px / 32% 32% 9px 9px}.product-image img{width:100%;height:100%;object-fit:cover;transition:transform .65s}.product-card:hover img{transform:scale(1.065)}.product-matcha img{object-position:51% center}.product-milk img{object-position:92% center}.product-tart img{object-position:83% 85%}.product-info{display:grid;grid-template-columns:1fr auto;align-items:start;gap:4px;padding:20px 4px}.product-info span{grid-column:1/-1;font:900 10px var(--font-en);color:var(--olive);letter-spacing:.2em}.product-info h3{font:700 23px var(--font-zh);margin:8px 0}.product-info p{font:400 12px/1.6 var(--font-zh);color:#3f4727aa;align-self:center;margin:8px 0}
.story-section{background:var(--olive);color:var(--paper);padding:115px 0}.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,145px);align-items:center}.story-art{height:480px;border:1px solid #e2dbd399;border-radius:48% 52% 42% 58%/46% 45% 55% 54%;position:relative;display:grid;place-items:center;transform:rotate(-6deg)}.story-orbit{position:absolute;width:73%;height:73%;border:1px solid #e2dbd3aa;border-radius:50%;transform:rotate(45deg) scaleX(.62)}.orbit-two{transform:rotate(-45deg) scaleX(.62)}.story-center{font:900 clamp(52px,6vw,98px) var(--font-en);letter-spacing:-.08em;transform:rotate(6deg)}.story-center i{font-style:normal;color:var(--caramel);font-size:.45em;vertical-align:top}.story-copy .section-kicker{color:var(--paper)}.story-copy h2 em{font-style:normal;color:#fff}.story-copy>p:not(.section-kicker){font:400 15px/2.2 var(--font-zh);max-width:450px;margin:28px 0 38px}.text-link{font:900 12px var(--font-en);letter-spacing:.12em;color:var(--paper);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:10px}.text-link span{margin-left:20px}
.moments-section{background:var(--paper);text-align:center;padding:110px 0 122px}.moments-inner h2{font-family:var(--font-en);font-size:clamp(70px,10vw,155px);line-height:.86;font-weight:900;letter-spacing:-.07em}.moments-inner h2 em{font-style:normal;color:var(--olive)}.moments-inner>p:not(.section-kicker){font:700 18px var(--font-zh);margin:35px 0}.pill-link{display:inline-block;background:var(--forest);color:var(--paper);border-radius:60px;padding:17px 28px;text-decoration:none;font:900 11px var(--font-en);letter-spacing:.14em}
.site-footer{background:var(--forest);color:var(--paper)}.footer-inner{min-height:130px;display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-inner>div{display:flex;align-items:center;gap:25px}.footer-inner strong{font:900 26px var(--font-en)}.footer-inner span{font:400 11px var(--font-zh);letter-spacing:.08em}.footer-inner button{background:none;border:0;color:var(--paper);padding:10px 0;font:700 11px var(--font-zh);letter-spacing:.06em}.footer-inner button:hover{text-decoration:underline}.footer-inner small{font:700 10px var(--font-en);letter-spacing:.1em}
@media(max-width:1100px){.home-wrap{width:calc(100% - 72px)}.site-body{margin-left:72px}.side-rail{width:72px}.main-nav{gap:20px}.main-nav small{display:none}.hero h1{font-size:clamp(58px,7vw,90px)}.hero-visual{margin-right:-40px}.hero-blob{inset:4% -10% 4% -6%}}
@media(max-width:760px){.site-body{margin-left:0}.side-rail{height:67px;width:100%;inset:0 0 auto 0;flex-direction:row;justify-content:space-between;padding:0 18px}.rail-logo{margin:0;flex-direction:row;gap:2px;min-width:100px}.brand-mark{width:51px;height:47px}.rail-line,.rail-caption{display:none}.rail-scroll{margin:0;writing-mode:initial;font-size:9px}.rail-scroll span{margin:0 0 0 5px}.site-header{margin-top:67px;height:73px}.home-wrap{width:calc(100% - 38px)}.header-wordmark{font-size:22px}.header-wordmark span{font-size:8px}.main-nav{margin-left:auto;gap:12px}.main-nav a{font-size:9px}.main-nav a:nth-child(n+2){display:none}.header-cta{min-height:38px;padding:0 12px;font-size:9px;gap:5px}.hero-inner{min-height:auto;display:flex;flex-direction:column;align-items:stretch;padding:24px 0 65px}.hero-copy{order:2;padding:0 5px}.hero-visual{order:1;align-self:stretch;width:100%;flex:0 0 52svh;min-height:335px;margin:0 0 10px}.hero-blob{inset:0 -10px 0 0}.hero-sparkle{width:44px}.hero-sticker{width:92px;height:92px;right:0}.hero-sticker strong{font-size:17px}.hero-sticker span{font-size:6px}.hero-photo-label{font-size:8px}.eyebrow{font-size:9px;margin-bottom:16px}.hero h1{font-size:clamp(49px,12vw,85px)}.hero-zh{font-size:19px;margin:22px 0 11px}.hero-description{font-size:12px}.round-link{margin-top:20px}.hero-index{left:auto;right:0;bottom:28px}.menu-section{padding:70px 0}.section-heading{display:block;margin-bottom:28px}.section-heading h2{font-size:34px}.section-heading>p{margin-top:16px;font-size:12px}.product-grid{grid-template-columns:1fr;gap:16px}.product-image{height:65vw;max-height:410px}.product-info{padding:11px 4px}.story-section{padding:70px 0}.story-grid{grid-template-columns:1fr;gap:40px}.story-art{height:300px}.story-copy h2{font-size:42px}.story-copy>p:not(.section-kicker){font-size:13px}.moments-section{padding:85px 0}.moments-inner h2{font-size:19vw}.footer-inner{padding:30px 0;display:grid;gap:15px}.footer-inner>div{display:grid;gap:4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.home-entered .rail-logo{animation:none;opacity:1;transform:none}}

/* Homepage rebuild, step 1: static photo and backing shape at the reference proportions. */
body{background:#d2c6b7}
.hero{background:#78853c}
.hero{z-index:4;min-height:100svh;overflow:visible}
.hero-inner{min-height:100svh;grid-template-columns:42% 58%}
.hero-copy{grid-column:1;grid-row:1;padding:0 32px 10px 0}
.hero h1{font-size:clamp(68px,4.05vw,80px)}
.hero-visual{grid-column:2;grid-row:1;width:100%;position:relative;align-self:center;background:none;overflow:visible;isolation:isolate}
.hero-color-block{position:absolute;z-index:0;inset:-13.25%;background:#e2dbd3;border-radius:48% 52% 49% 51% / 46% 47% 53% 54%;animation:backing-flow 13.7s ease-in-out infinite}
.hero-drip-layer{position:absolute;z-index:10;inset:0;overflow:visible;pointer-events:none}
.hero-drip{position:absolute;left:var(--drip-x);top:var(--drip-top);width:var(--drip-width);height:11%;transform:translateX(-50%)}
.hero-drip-one{--drip-x:56%;--drip-top:94%;--drip-width:7.5%}
.hero-cream-drip{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:#e2dbd3;transform-origin:50% 0;transform:scaleY(0)}
.home-entered .hero-cream-drip{animation:cream-neck-cycle 3s ease-in-out -.9s infinite}
@keyframes cream-neck-cycle{
  0%,6%,68%,100%{transform:scaleY(0)}
  24%{transform:scaleY(.45)}
  35%{transform:scaleY(.7)}
  43%{transform:scaleY(1)}
  53%{transform:scaleY(.16)}
}
@keyframes cream-bead-cycle{
  0%,37%,100%{opacity:0;transform:translate(-50%,0)}
  43%{opacity:1;transform:translate(-50%,0);animation-timing-function:cubic-bezier(.38,0,.72,.72)}
  90%{opacity:1;transform:translate(-50%,245px)}
  97%{opacity:0;transform:translate(-50%,275px)}
}
.hero-photo-frame{position:absolute;z-index:1;inset:-9.5%;overflow:hidden;border-radius:50%;animation:photo-contour-flow 9.4s ease-in-out -2.3s infinite}
.hero-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:none;animation:none}
.hero-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}
@keyframes backing-flow{
  0%,100%{border-radius:49% 51% 50% 50% / 48% 47% 53% 52%;transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  14%{border-radius:53% 47% 47% 53% / 45% 51% 49% 55%;transform:translate3d(-.7%,.25%,0) rotate(-.45deg) scale(1.002)}
  33%{border-radius:46% 54% 53% 47% / 51% 45% 55% 49%;transform:translate3d(.55%,-.45%,0) rotate(.5deg) scale(1.003)}
  57%{border-radius:52% 48% 46% 54% / 54% 52% 48% 46%;transform:translate3d(.8%,.45%,0) rotate(-.3deg) scale(.998)}
  79%{border-radius:47% 53% 52% 48% / 46% 54% 45% 55%;transform:translate3d(-.35%,-.55%,0) rotate(.35deg) scale(1.004)}
}
@keyframes photo-contour-flow{
  0%,100%{border-radius:51% 49% 48% 52% / 49% 52% 48% 51%;transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  19%{border-radius:46% 54% 53% 47% / 53% 46% 54% 47%;transform:translate3d(.7%,-.5%,0) rotate(.4deg) scale(.997)}
  46%{border-radius:54% 46% 47% 53% / 46% 54% 47% 53%;transform:translate3d(-.65%,.65%,0) rotate(-.55deg) scale(1.002)}
  71%{border-radius:47% 53% 54% 46% / 52% 48% 55% 45%;transform:translate3d(.55%,.35%,0) rotate(.45deg) scale(.996)}
  88%{border-radius:53% 47% 49% 51% / 47% 55% 46% 52%;transform:translate3d(-.4%,-.6%,0) rotate(-.2deg) scale(1.001)}
}
@media(prefers-reduced-motion:reduce){.hero-color-block,.hero-photo-frame,.hero-cream-drip,.menu-dew{animation:none!important}}
@media(min-width:1101px){
  .hero{--wordmark-top:calc(744.05px + clamp(50.4px,3.6645vw,70.35px) + clamp(28.35px,2.0385vw,39.15px));height:calc(var(--wordmark-top) + 124.344px);min-height:0}
  .hero-inner{height:100%;min-height:0}
  .hero-inner{grid-template-rows:minmax(0,1fr)}
  .hero-visual{width:min(1030px,54vw,99svh);height:auto;aspect-ratio:987.5949 / 1023.1733;margin:0 0 0 -21.2px}
  .hero-color-block{inset:0}
  .hero-photo-frame{inset:3.8%}
  .menu-section,.story-section,.moments-section{min-height:100svh;display:flex;align-items:center}}
@media(min-width:761px) and (max-width:1100px){
  .hero-visual{height:min(750px,78svh);margin-left:2%}
  .hero h1{font-size:clamp(52px,6vw,78px)}}
@media(max-width:760px){
  .hero{padding-top:67px}
  .hero-inner{min-height:auto;display:flex}
  .hero-copy{padding:0 5px 10px}
  .hero-visual{height:52svh;min-height:335px;flex:0 0 52svh;margin:0 0 36px}
  .hero-color-block{inset:-5%}
  .hero-photo-frame{inset:-1%}
  .hero h1{font-size:clamp(49px,12vw,85px)}}

/* Rolling cookie navigation replaces the previous left rail and headline. */
.site-body{margin-left:0}
.menu-info{border:0;border-radius:18px;padding:50px;min-width:280px;background:#d2c6b7;color:var(--forest);font-family:var(--font-zh)}
.menu-info::backdrop{background:#3f472766}
.product-matcha img{object-position:center 42%}
.menu-info-close{position:absolute;right:12px;top:8px;font-size:28px;background:none;border:0;color:inherit}
@media(max-width:760px){.hero{padding-top:0}.hero-visual{order:1}.site-body{margin-left:0}}

/* As the page leaves the hero, the menu folds into the dog mark at the upper left. */

/* First-screen type and dotted accents. */
.hero-inner{z-index:2}
.hero-brand-block{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:flex-start;left:0;bottom:31.5%;width:min(730px,48vw);color:#fff}
@media(min-width:1101px){.hero-brand-block{top:calc(152px + 220px + 139.1111px);bottom:auto}}
.hero-brand-dots{position:absolute;z-index:-1;left:calc(-1 * min(195px,10.156vw));top:calc(-1 * min(120px,6.25vw));width:min(395px,20.573vw);aspect-ratio:395 / 297;background:url("../images/home-revision/hero-brand-dots.png") center/contain no-repeat;pointer-events:none;opacity:0}
.hero-brand-formula{position:relative;display:block;min-height:1.05em;margin:0;color:#fff;font:900 clamp(48px,3.49vw,67px)/1.05 var(--font-en);letter-spacing:.12em;white-space:nowrap}
.formula-parts{display:flex;align-items:center;gap:0;opacity:0}
.formula-parts :is(.formula-cha,.formula-happy,.formula-plus){display:inline-block;transform-origin:center;will-change:transform}
.formula-parts b{color:inherit;font-weight:900}
.formula-result{position:absolute;inset:0;display:grid;align-items:center;justify-items:start;opacity:0;letter-spacing:.04em;transform-origin:center;will-change:transform,opacity}
.hero-brand-caption{margin-top:27.1111px;text-align:left}
.hero-brand-caption p{margin:0;color:#fff;font:700 clamp(21px,1.51vw,29px)/1.35 "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.22em;white-space:nowrap}
@media(min-width:761px) and (max-width:1100px){.hero-brand-formula{font-size:clamp(36px,3.5vw,48px)}.hero-brand-caption p{font-size:clamp(17px,1.51vw,21px)}}
.hero-view-more{display:inline-flex;align-items:center;justify-content:center;gap:16px;flex:none;width:166.2738px;height:47.3052px;margin-top:25px;overflow:hidden;border-radius:100px;background:#fff;color:#a2b242;font:400 15px/1 var(--font-en);text-decoration:none;white-space:nowrap;transition:filter .25s}
@media(min-width:1101px){.hero-view-more{margin-top:47.0194px}}
.hero-view-more-icon{display:block;flex:none;width:32px;height:35px;background:url("../images/home-revision/hero-view-more.png") -188px -114px / 358px 294px no-repeat;pointer-events:none}
.hero-view-more:hover,.hero-view-more:focus-visible{filter:brightness(.96)}
/* The menu lands first, then CHA and HAPPY pulse in turn and collide into CHAPPii. */
.hero-brand-formula{--formula-collision:clamp(28px,4.8vw,90px)}
.hero-brand-caption p{opacity:0;clip-path:inset(0 100% 0 0)}
.hero-view-more{opacity:0;transform:translateY(12px)}
.home-entered .formula-parts{animation:formula-parts 3.2s linear 2.9s both}
.home-entered .formula-cha{animation:formula-cha 3.2s linear 2.9s both}
.home-entered .formula-happy{animation:formula-happy 3.2s linear 2.9s both}
.home-entered .formula-plus{animation:formula-plus 3.2s linear 2.9s both}
.home-entered .formula-result{animation:formula-result 3.2s linear 2.9s both}
.home-entered .hero-brand-caption p{animation:hero-typewriter 1.05s steps(11,end) 6.25s both}
.home-entered .hero-view-more{animation:hero-type-in .5s cubic-bezier(.22,1,.36,1) 7.45s both}
@keyframes formula-parts{0%,3%{opacity:0}5%,75%{opacity:1}82%,100%{opacity:0}}
@keyframes formula-cha{0%,5%,10%{transform:scaleX(1);opacity:1}17%{transform:scaleX(1.2)}24%{transform:scaleX(.88)}31%,68%{transform:scaleX(1);opacity:1}78%{transform:translateX(var(--formula-collision)) scaleX(.68);opacity:1}83%,100%{transform:translateX(var(--formula-collision)) scaleX(.68);opacity:0}}
@keyframes formula-happy{0%,31%{transform:scaleX(1);opacity:1}45%{transform:scaleX(1.17)}53%{transform:scaleX(.9)}61%,68%{transform:scaleX(1);opacity:1}78%{transform:translateX(calc(0px - var(--formula-collision))) scaleX(.68);opacity:1}83%,100%{transform:translateX(calc(0px - var(--formula-collision))) scaleX(.68);opacity:0}}
@keyframes formula-plus{0%,68%{opacity:1}77%,100%{opacity:0}}
@keyframes formula-result{0%,76%{opacity:0;transform:scale(.58)}79%{opacity:1;transform:scale(.7)}86%{opacity:1;transform:scale(1.16)}93%{opacity:1;transform:scale(.94)}100%{opacity:1;transform:scale(1)}}
@keyframes hero-typewriter{from{opacity:1;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes hero-type-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.home-entered .hero-brand-dots{animation:hero-brand-dots-in .55s ease-out 7.35s both}
@keyframes hero-brand-dots-in{from{opacity:0}to{opacity:1}}
.hero-dots{position:absolute;z-index:2;pointer-events:none;background-image:radial-gradient(circle,var(--paper) 0 4px,transparent 4.6px);background-size:clamp(20px,1.45vw,29px) clamp(20px,1.45vw,29px);opacity:.26}
.hero-dots-top{z-index:4;top:24%;right:0;width:125.3816px;height:51.502px;background-image:radial-gradient(circle at 4px 4px,var(--paper) 0 3.4px,transparent 3.9px);background-size:17px 14.9px;opacity:0}
.home-entered .hero-dots-top{animation:hero-photo-dots-in .55s ease-out 7.55s both}
@keyframes hero-photo-dots-in{from{opacity:0}to{opacity:.36}}
@media(prefers-reduced-motion:reduce){.formula-parts{display:none}.formula-result,.hero-brand-caption p{opacity:1;clip-path:none}.hero-view-more,.hero-brand-dots{opacity:1;transform:none}.hero-dots-top{opacity:.36}.home-entered .formula-parts,.home-entered .formula-cha,.home-entered .formula-happy,.home-entered .formula-plus,.home-entered .formula-result,.home-entered .hero-brand-caption p,.home-entered .hero-view-more,.home-entered .hero-brand-dots,.home-entered .hero-dots-top{animation:none}}
@media(max-width:1100px){.hero-drip{height:12%}}
@media(prefers-reduced-motion:reduce){.home-entered .menu-dew,.home-entered .hero-cream-drip{animation:none}.menu-dew{opacity:0}.hero-cream-drip{transform:scaleY(0)}}
@media(max-width:760px){.hero-brand-block{position:relative;left:auto;bottom:auto;order:2;width:100%;margin:24px auto 48px;padding:0 19px}.hero-brand-dots{left:-20px;top:-40px;width:180px}.hero-brand-formula{font-size:clamp(29px,8vw,48px)}.hero-brand-caption{margin-top:16px}.hero-brand-caption p{font-size:clamp(17px,5vw,25px);white-space:normal}.hero-view-more{margin-top:20px}.hero-dots-top{width:112px;height:70px;top:7%;background-size:20px 20px;background-image:radial-gradient(circle,var(--paper) 0 3px,transparent 3.5px)}}
@media(max-width:760px){.hero-dots-top{top:24%;right:0;width:min(125.3816px,32vw);height:51.502px;background-image:radial-gradient(circle at 4px 4px,var(--paper) 0 3.4px,transparent 3.9px);background-size:17px 14.9px}}

/* Editorial image fills the right side of the second screen. */
.menu-section{position:relative;overflow:hidden}
.menu-feature{position:absolute;inset:0 0 0 auto;width:38%;height:100%;margin:0;overflow:hidden;background:#b6b16e}
.menu-feature-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
@media(min-width:1101px){
  .menu-section>.home-wrap{position:relative;z-index:1}
  .menu-section .section-heading,.menu-section .product-grid{width:57%}
  .menu-section .section-heading{display:block}
  .menu-section .section-heading>p{margin-top:16px}
  .menu-section .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .menu-section .product-tart{display:none}}
@media(max-width:1100px){.menu-feature{position:relative;width:calc(100% - 72px);height:min(80vw,620px);margin:40px auto 0}}
@media(max-width:760px){.menu-feature{width:calc(100% - 38px);height:120vw;max-height:520px}}

/* Screen two: a single tea-jelly cup against a green gradient and cream ground. */
.menu-section{display:flex;align-items:stretch;padding:0;background:#f5f0e9}
.menu-left{position:relative;width:62%;min-height:100svh;overflow:hidden;background:linear-gradient(180deg,#78853c 0%,#5a6d32 100%)}
.menu-accessible-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.menu-single-stage{position:absolute;inset:0;isolation:isolate}
.menu-single-stage::before{content:"";position:absolute;z-index:-1;left:-22%;bottom:-12%;width:144%;height:46%;border-radius:50% 50% 0 0 / 35% 35% 0 0;background:#e2dbd3}
.menu-single-stage img{position:absolute;z-index:1;left:50%;top:22%;height:min(64svh,630px);width:auto;max-width:88%;object-fit:contain;transform:translateX(-50%)}
.menu-feature{width:38%}
.menu-feature::after{content:"";position:absolute;z-index:2;inset:0 0 auto;height:clamp(180px,28svh,280px);pointer-events:none;background:linear-gradient(180deg,#78853c 0%,#78853cf0 12%,#78853caa 41%,#78853c44 72%,#78853c00 100%)}
.menu-rowing-dog{position:absolute;z-index:3;top:24%;right:-9%;width:min(62%,360px);transform-origin:52% 72%;animation:rowing-glide 2.1s ease-in-out infinite;pointer-events:none}
.menu-rowing-dog img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
@keyframes rowing-glide{0%,100%{transform:translate3d(0,0,0) rotate(-.8deg)}50%{transform:translate3d(-8px,3px,0) rotate(.8deg)}}
@media(prefers-reduced-motion:reduce){.menu-rowing-dog{animation:none}}
@media(max-width:1100px){
  .menu-section{display:block}
  .menu-left{width:100%;min-height:720px}
  .menu-single-stage img{height:460px;top:16%}
  .menu-feature{width:100%;height:70vw;max-height:650px;margin:0}
  .menu-rowing-dog{width:min(48%,340px);right:-5%;top:20%}}
@media(max-width:760px){
  .menu-left{min-height:620px}
  .menu-single-stage img{height:420px;max-width:82%;top:13%}
  .menu-single-stage::before{height:45%;bottom:-10%}
  .menu-feature{height:110vw;max-height:520px}
  .menu-rowing-dog{width:min(62%,290px);right:-8%;top:20%}}

/* Keep one cup position while four supplied photos advance with scrolling. */
.menu-section{height:400svh;min-height:0;overflow:clip}
.menu-left{position:sticky;top:0;align-self:flex-start;height:100svh;min-height:0}
.menu-feature{position:sticky;inset:auto;top:0;align-self:flex-start;height:100svh}
.menu-single-stage{--jelly-reveal:0%;--tea-reveal:0%;--foam-reveal:0%}
.menu-single-stage .menu-cup-empty{z-index:1}
.menu-single-stage .menu-cup-jelly{z-index:2;clip-path:inset(calc(100% - var(--jelly-reveal)) 0 0);mask-image:linear-gradient(to bottom,transparent calc(100% - var(--jelly-reveal)),#000 calc(110% - var(--jelly-reveal)))}
.menu-single-stage .menu-cup-tea{z-index:3;clip-path:inset(calc(100% - var(--tea-reveal)) 0 0);mask-image:linear-gradient(to bottom,transparent calc(100% - var(--tea-reveal)),#000 calc(110% - var(--tea-reveal)))}
.menu-single-stage .menu-cup-foam{z-index:4;clip-path:inset(0 0 calc(100% - var(--foam-reveal)) 0);mask-image:linear-gradient(to bottom,#000 calc(var(--foam-reveal) - 10%),transparent var(--foam-reveal));transform:translate(-50%,0)}
.menu-single-stage.is-jelly-complete .menu-cup-jelly,.menu-single-stage.is-tea-complete .menu-cup-tea{clip-path:none;mask-image:none}
.menu-single-stage.is-foam-complete .menu-cup-foam{clip-path:none;mask-image:none}
@media(max-width:1100px){
  .menu-section{height:auto}
  .menu-left{position:relative;top:auto;height:360svh;min-height:0;overflow:clip}
  .menu-single-stage{position:sticky;inset:auto;top:0;height:100svh}
  .menu-feature{position:relative;top:auto;height:70vw;max-height:650px}}
@media(max-width:760px){.menu-feature{height:110vw;max-height:520px}}

/* CHAPPii Picks: an editorial label system around the scroll-built cup. */
.menu-single-stage::before{z-index:0;bottom:-10%;height:31%;background:#f1eae4;border-radius:50% 50% 0 0 / 40% 40% 0 0}
.menu-single-stage > .menu-cup,.menu-single-stage .menu-cup-foam{left:37%;top:29%;height:min(61svh,640px);max-width:61%}
.menu-stage-heading{position:absolute;z-index:5;top:5.5%;left:9%;width:55%;color:#f9f5ef}
.menu-heading-orbit{position:absolute;z-index:-1;left:-5%;top:-25%;width:clamp(90px,12vw,168px);aspect-ratio:1;border-radius:50%;background:#b5977a}
.menu-stage-heading h2{position:relative;margin:0;padding:0 0 13px;border-bottom:1px solid #f9f5ef;font:500 clamp(25px,2.65vw,44px)/1.45 var(--font-zh);letter-spacing:.055em;white-space:nowrap}
.menu-stage-heading p{margin:8px 0 0 10px;font:700 clamp(21px,2.1vw,34px)/1.2 var(--font-en);letter-spacing:.035em}
.menu-ingredient-labels{position:absolute;z-index:5;inset:0;pointer-events:none;color:#f9f5ef}
.menu-ingredient{position:absolute;left:54%;display:flex;align-items:center;width:24%;margin:0;gap:10px;font:700 clamp(11px,1.05vw,17px)/1.3 var(--font-zh);letter-spacing:.16em;white-space:nowrap}
.menu-ingredient::before{content:"";flex:1 1 auto;height:0;border-top:2px dashed currentColor;opacity:.9}
.menu-ingredient span::before{content:"（"}.menu-ingredient span::after{content:"）"}
.menu-ingredient-foam{top:40%;transform:translateY(var(--foam-label-y,100px));opacity:var(--foam-label-opacity,0)}
.menu-ingredient-tea{top:58%;transform:translateY(var(--tea-label-y,110px));opacity:var(--tea-label-opacity,0)}
.menu-ingredient-jelly{top:76%;transform:translateY(var(--jelly-label-y,100px));opacity:var(--jelly-label-opacity,0)}
.menu-stage-picks{position:absolute;z-index:4;right:7%;top:26%;display:flex;align-items:end;gap:10px}
.menu-mini-cup{display:block;width:clamp(35px,4.8vw,65px);height:clamp(52px,7vw,96px);background:center/contain no-repeat}
.menu-mini-tea{background-image:url("../images/home-revision/menu-stage-tea.png")}.menu-mini-foam{background-image:url("../images/home-revision/menu-stage-foam.png")}
.menu-stage-dots{position:absolute;z-index:1;right:5%;bottom:32%;width:130px;height:60px;background-image:radial-gradient(circle,#e2dbd388 0 3px,transparent 4px);background-size:18px 18px}
.menu-stage-note{position:absolute;z-index:4;right:2%;bottom:2%;width:29%;min-height:21%;padding:clamp(20px,2.1vw,32px);display:flex;flex-direction:column;justify-content:center;color:#fffaf4;background:#b5977a;border-radius:52% 48% 49% 51% / 46% 48% 52% 54%;transform:rotate(-3deg)}
.menu-stage-note > *{transform:rotate(3deg)}
.menu-stage-note h3{margin:0 0 10px;font:700 clamp(17px,1.5vw,25px)/1.35 var(--font-zh);letter-spacing:.06em}
.menu-stage-note p{margin:0;font:500 clamp(12px,.95vw,15px)/1.65 var(--font-zh);letter-spacing:.02em}
@media(max-width:1350px){.menu-stage-picks{right:5%;top:26%}.menu-stage-note{width:29%}.menu-ingredient{left:54%;width:24%}}
@media(max-width:1100px){.menu-stage-heading{left:10%;width:54%}.menu-single-stage > .menu-cup,.menu-single-stage .menu-cup-foam{left:39%;top:27%;height:min(64svh,650px)}.menu-ingredient{left:56%}.menu-stage-note{right:7%;width:32%}.menu-stage-picks{right:10%}}
@media(max-width:760px){.menu-single-stage::before{height:26%;bottom:-8%}.menu-stage-heading{top:8%;left:7%;width:77%}.menu-heading-orbit{width:94px}.menu-stage-heading h2{font-size:clamp(19px,5.2vw,28px);padding-bottom:8px}.menu-stage-heading p{font-size:clamp(17px,4.7vw,24px)}.menu-single-stage > .menu-cup,.menu-single-stage .menu-cup-foam{left:39%;top:27%;height:min(53svh,460px);max-width:65%}.menu-ingredient{left:60%;width:36%;gap:5px;font-size:9px;letter-spacing:.08em}.menu-ingredient::before{flex-basis:22%}.menu-ingredient-foam{top:39%}.menu-ingredient-tea{top:52%}.menu-ingredient-jelly{top:66%}.menu-stage-picks,.menu-stage-dots{display:none}.menu-stage-note{right:2%;bottom:4%;width:47%;min-height:18%;padding:15px 17px}.menu-stage-note h3{font-size:13px;margin-bottom:4px}.menu-stage-note p{font-size:9px;line-height:1.55}}

/* Align the opening composition and the featured drink with the supplied artwork. */
.hero-transition{position:absolute;z-index:0;left:0;right:0;bottom:-150px;width:100%;height:250px;overflow:visible;pointer-events:none}
.hero-transition>path{fill:var(--olive)}
.menu-dew-layer{position:absolute;z-index:4;inset:0;overflow:hidden;pointer-events:none}
.menu-dew{position:absolute;top:110px;left:var(--dew-x,50%);width:var(--dew-size);height:calc(var(--dew-size) * 1.1875);overflow:visible;fill:#fffdf3;stroke:#d8d2bd;stroke-width:.8;opacity:0;transform:translateX(-50%)}
.menu-dew-one{--dew-x:24%;--dew-size:26px}
.home-entered .menu-dew{animation:cream-bead-cycle 3s linear -.9s infinite}
@media(max-width:1100px){.hero-drip-layer,.menu-dew-layer{display:none}}
@media(min-width:1101px){
  .hero-inner{width:min(1324.3581px,69vw)}
  .hero-visual{transform:translateY(80px)}}
.menu-left{width:calc(100% - min(656.3795px,46.65%));background:#b99a7d}
.menu-single-stage{--menu-drink-shift:clamp(30px,4svh,48px);background:#b99a7d url("../images/home-revision/menu-left-background.png?v=plain-top") center top/100% calc(100% + var(--menu-background-extend,8px)) no-repeat}
.menu-single-stage{--menu-shadow-cup-x:37%;--menu-shadow-cup-top:calc(29% + var(--menu-drink-shift));--menu-cup-height:min(64.05svh,33.075vw);--menu-shadow-width:500px;--menu-shadow-lift:10px;--menu-shadow-outset:50px}
.menu-single-stage::after{content:"";position:absolute;z-index:0;left:calc(var(--menu-shadow-cup-x) - var(--menu-cup-height) * .22 + var(--menu-shadow-outset));top:calc(var(--menu-shadow-cup-top) + var(--menu-cup-height) * .9476 - var(--menu-shadow-width) * .3923 - var(--menu-shadow-lift));width:var(--menu-shadow-width);aspect-ratio:650/477;background:url("../images/home-revision/menu-cup-shadow.png") center/contain no-repeat;opacity:1;pointer-events:none}
.menu-feature{width:min(656.3795px,46.65%);background:#b7b45e}
.menu-feature::after{display:none}
.menu-feature-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
@media(prefers-reduced-motion:reduce){.menu-feature-video{display:none}.menu-feature{background:center/cover no-repeat url("../images/home-revision/menu-milkcap-poster.jpg")}}
.menu-rowing-dog{top:19%;right:3%;width:209.3756px;height:178.184px}
.menu-feature-caption{position:absolute;z-index:3;top:52%;right:10%;margin:0;color:#78853c;text-align:right;white-space:nowrap;pointer-events:none}
.menu-feature-caption span{display:block;letter-spacing:.15em}
.menu-feature-caption-zh{font:500 22px/1.4 "Noto Sans CJK TC","Noto Sans TC",sans-serif}
.menu-feature-caption-en{margin-top:5px;font:400 18px/1.4 var(--font-en)}
.menu-feature-ingredients{position:absolute;z-index:3;left:13.5%;bottom:12%;display:grid;gap:12px;margin:0;color:#fff;white-space:nowrap;pointer-events:none}
.menu-feature-ingredients>div{display:grid;grid-template-columns:112px auto;align-items:baseline}
.menu-feature-ingredients :is(dt,dd){margin:0;letter-spacing:.15em}
.menu-feature-ingredients dt{font:500 16px/1.4 "Noto Sans CJK TC","Noto Sans TC",sans-serif}
.menu-feature-ingredients dd{font:400 16px/1.4 var(--font-en)}
.menu-rowing-dog img{visibility:hidden}
.menu-rowing-dog img:nth-child(1){animation:rowing-pose-one 2.1s steps(1,end) infinite}
.menu-rowing-dog img:nth-child(2){animation:rowing-pose-two 2.1s steps(1,end) infinite}
.menu-rowing-dog img:nth-child(3){animation:rowing-pose-three 2.1s steps(1,end) infinite}
.menu-rowing-dog img:nth-child(4){animation:rowing-pose-four 2.1s steps(1,end) infinite}
@keyframes rowing-pose-one{0%,16.66%{visibility:visible}16.67%,100%{visibility:hidden}}
@keyframes rowing-pose-two{0%,16.66%{visibility:hidden}16.67%,33.33%{visibility:visible}33.34%,83.32%{visibility:hidden}83.33%,100%{visibility:visible}}
@keyframes rowing-pose-three{0%,33.33%{visibility:hidden}33.34%,49.99%{visibility:visible}50%,66.66%{visibility:hidden}66.67%,83.32%{visibility:visible}83.33%,100%{visibility:hidden}}
@keyframes rowing-pose-four{0%,49.99%{visibility:hidden}50%,66.66%{visibility:visible}66.67%,100%{visibility:hidden}}
@media(prefers-reduced-motion:reduce){.menu-rowing-dog img{animation:none!important;visibility:hidden}.menu-rowing-dog img:first-child{visibility:visible}}
.menu-single-stage::before{display:none}
.menu-single-stage > .menu-cup,.menu-single-stage .menu-cup-foam{left:37%;top:calc(29% + var(--menu-drink-shift));height:var(--menu-cup-height);max-width:60%}
.menu-stage-heading{top:9%;left:23.5%;width:65%;color:#fff}
.menu-heading-orbit{width:clamp(90px,10vw,150px);background:#d4b9a3;opacity:.82}
.menu-stage-heading h2{padding:0;border:0;font:500 clamp(22px,1.9vw,27px)/1.2 "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.2em}
.menu-stage-heading p{margin:8px 0 0;font:700 clamp(34px,3.1vw,44px)/1.05 "Lato",Arial,sans-serif;letter-spacing:.05em}
.menu-ingredient{left:58%;width:max-content;font-size:clamp(11px,.93vw,16px)}
.menu-ingredient::before{flex:0 0 var(--menu-guide-width,clamp(55px,5vw,78px));border-top-width:1px}
.menu-ingredient-tea::before{flex-basis:var(--menu-guide-width,116.6471px)}
.menu-ingredient-jelly::before{flex-basis:146px}
.menu-ingredient-foam{top:calc(35% + var(--menu-drink-shift))}.menu-ingredient-tea{top:calc(43% + var(--menu-drink-shift))}.menu-ingredient-jelly{top:calc(62% + var(--menu-drink-shift))}
.menu-stage-picks{right:2%;top:31%}
.menu-stage-dots{right:8%;bottom:32%}
.menu-stage-note{right:41px;bottom:129px;width:min(49%,347.6262px);height:auto;aspect-ratio:347.6262/260.479;min-height:0;padding:0 4px 0 32px;justify-content:flex-start;isolation:isolate;background:transparent;border-radius:0;transform:none}
.menu-stage-note::before{content:"";position:absolute;z-index:-1;left:-6.182%;top:-8.803%;width:113.34%;height:auto;aspect-ratio:394/296;background:url("../images/home-revision/menu-note-shape.svg") center/contain no-repeat;animation:menu-note-drift 13.7s ease-in-out infinite;pointer-events:none}
.menu-stage-note::after{display:none}
.menu-stage-note p{position:absolute;z-index:1;top:80px;left:48px;right:4px;margin:0;font:500 clamp(15px,1.4vw,18px)/30px "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.2em;white-space:nowrap}
.menu-note-jelly{opacity:var(--menu-jelly-note-opacity,0);transform:translateY(var(--menu-jelly-note-y,12px))}
.menu-note-tea{opacity:var(--menu-tea-note-opacity,0);transform:translateY(var(--menu-tea-note-y,12px))}
.menu-note-foam{opacity:var(--menu-foam-note-opacity,0);transform:translateY(var(--menu-foam-note-y,12px))}
@media(max-width:1100px) and (min-width:761px){.menu-stage-note p{font-size:18px}}
@keyframes menu-note-drift{0%,100%{transform:translate3d(0,0,0)}35%{transform:translate3d(-1%,.5%,0)}70%{transform:translate3d(.8%,-.7%,0)}}
@media(prefers-reduced-motion:reduce){.menu-stage-note::before{animation:none}.menu-stage-note p{transition:none}}
@media(max-width:760px){.menu-stage-note p{font-size:clamp(10px,2.8vw,14px);line-height:1.9}}
.menu-step-track{position:absolute;z-index:4;left:15.5%;top:calc(43% + var(--menu-drink-shift) + 8px);width:48px;height:127.4802px;display:flex;flex-direction:column;justify-content:space-between;border-right:1pt dashed #fff9;color:#fff;font:700 12pt/1 var(--font-en);letter-spacing:.05em}
.menu-step-track span{position:relative;align-self:flex-end;padding-right:15px;white-space:nowrap;transition:color .25s ease}
.menu-step-track span:first-child{transform:translateY(-50%)}
.menu-step-track span:last-child{transform:translateY(50%)}
.menu-step-track span::after{content:"";position:absolute;right:-5px;top:calc(50% - 4.3807px);box-sizing:border-box;width:8.7614px;height:8.7614px;border-radius:50%;background:#fff;transition:background .25s ease}
.menu-step-track span.is-active{color:#3f4727}
.menu-step-track span.is-active::after{background:#3f4727;border:1pt solid #fff}
@media(max-width:1100px){
  .hero-transition{display:none}
  .menu-left,.menu-feature{width:100%}
  .menu-single-stage{--menu-shadow-cup-x:39%;--menu-cup-height:min(64.05svh,52.5vw)}
  .menu-stage-heading{left:12%;width:63%}
  .menu-single-stage > .menu-cup,.menu-single-stage .menu-cup-foam{left:39%;height:var(--menu-cup-height);max-width:65%}
  .menu-step-track{left:7%}}
@media(max-width:760px){
  .menu-single-stage{--menu-drink-shift:clamp(20px,3.5svh,32px)}
  .menu-single-stage{--menu-shadow-cup-top:calc(27% + var(--menu-drink-shift));--menu-cup-height:min(58.8svh,67.2vw);--menu-shadow-width:min(330px,75vw);--menu-shadow-lift:0px;--menu-shadow-outset:20px}
  .menu-stage-heading{top:8%;left:7%;width:77%}
  .menu-stage-heading h2{font-size:clamp(19px,5.2vw,28px)}
  .menu-stage-heading p{font-size:clamp(23px,6vw,32px)}
  .menu-single-stage > .menu-cup,.menu-single-stage .menu-cup-foam{left:39%;top:calc(27% + var(--menu-drink-shift));height:var(--menu-cup-height);max-width:70%}
  .menu-ingredient{left:58%;width:max-content;font-size:9px}
  .menu-ingredient::before{flex-basis:var(--menu-guide-width,clamp(24px,7vw,44px))}
  .menu-ingredient-foam{top:calc(37% + var(--menu-drink-shift))}.menu-ingredient-tea{top:calc(46% + var(--menu-drink-shift))}.menu-ingredient-jelly{top:calc(59% + var(--menu-drink-shift))}
  .menu-stage-note{right:2%;bottom:4%;width:46%;height:auto;padding:0 6px 0 14px}
  .menu-stage-note p{top:32px;left:22px;right:6px;font-size:clamp(8px,2.3vw,13px);line-height:1.7}
  .menu-step-track{display:none}
  .menu-feature{height:110vw;max-height:520px}
  .menu-rowing-dog{width:min(43%,209.3756px);height:auto;aspect-ratio:209.3756 / 178.184}
  .menu-feature-caption{top:55%;left:auto;right:10%;width:auto;transform:none;text-align:right}
  .menu-feature-caption-zh{font-size:clamp(14px,4vw,20px)}
  .menu-feature-caption-en{font-size:clamp(11px,3vw,16px)}
  .menu-feature-ingredients{left:9%;bottom:9%;gap:13px}
  .menu-feature-ingredients>div{grid-template-columns:105px auto}
  .menu-feature-ingredients :is(dt,dd){font-size:clamp(12px,3.4vw,16px)}}

/* The first quality story rolls in, then the next one follows the scroll position. */
.tea-story-section{position:relative;min-height:700svh;background:#c6b277;color:#fffaf0;--tea-next-opacity:0;--tea-first-circle-opacity:1;--tea-detail-opacity:0;--tea-mobile-detail-opacity:0;--tea-third-opacity:0;--tea-third-heading-opacity:0;--tea-third-copy-opacity:0;--tea-third-copy-offset:20px;--tea-next-offset:28px;--tea-detail-offset:20px;--tea-first-copy-opacity:1;--tea-first-line-opacity:1;--tea-target-opacity:0;--tea-mobile-target-opacity:0}
.tea-story-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#c6b277}
.tea-story-wipe{position:absolute;z-index:2;top:0;left:0;width:100%;height:min(900px,100svh);pointer-events:none}
.tea-story-wipe svg{display:block;width:100%;height:100%;fill:#e4ddd7}
.tea-story-inner{position:absolute;z-index:1;inset:0}
.tea-story-art{display:block;width:100%;height:100%;object-fit:cover}
.tea-story-first-circle{position:absolute;z-index:1;inset:0;display:block;width:100%;height:100%;opacity:var(--tea-first-circle-opacity);pointer-events:none}
.tea-story-first-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.tea-story-first-overlay{position:absolute;z-index:7;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.tea-story-first-copy{opacity:var(--tea-first-copy-opacity)}
.tea-story-first-en,.tea-story-first-target-en{fill:#fff;font-family:"Quality Lato","Lato",Arial,sans-serif;font-weight:700;font-size:32px;line-height:45px;letter-spacing:.15em}
.tea-story-first-title{fill:#e2dbd3;font:500 22px "Noto Sans TC","Noto Sans CJK TC",sans-serif;letter-spacing:.2em}
.tea-story-first-body{fill:#fff;font:400 18px "Noto Sans TC","Noto Sans CJK TC",sans-serif;letter-spacing:.2em}
.tea-story-first-target{opacity:var(--tea-target-opacity)}
.tea-story-first-target-zh{fill:#fff;font:500 22px "Noto Sans TC","Noto Sans CJK TC",sans-serif;letter-spacing:.2em}
.tea-story-line-reveal{stroke-dasharray:1000;stroke-dashoffset:1000}
.tea-story-first-line,.tea-story-mobile-line-stroke{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:6 4}
.tea-story-first-line,.tea-story-mobile-line{opacity:var(--tea-first-line-opacity)}
.tea-story-next{position:absolute;inset:0;display:block;background:url("../images/home-revision/quality-tea-background.webp") center/cover no-repeat;color:#fff;opacity:var(--tea-next-opacity);pointer-events:none;will-change:opacity}
.tea-story-next-circle{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.tea-story-next-shade{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.tea-story-mobile-next-kicker,.tea-story-reduced-kicker{margin:0;font-family:"Quality Lato","Lato",Arial,sans-serif;font-weight:700;font-size:32px;line-height:45px;letter-spacing:.15em}
.tea-story-next-curve{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:6 5}
.tea-story-next-copy{position:absolute;left:18.8%;top:47.5%;margin:0;font:400 18px/34px "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.12em;opacity:var(--tea-detail-opacity);transform:translateY(var(--tea-detail-offset))}
.tea-story-exit-line{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:6 5}
.tea-story-third{position:absolute;inset:0;overflow:hidden;color:#fff;opacity:var(--tea-third-opacity);pointer-events:none;will-change:opacity}
.tea-story-third-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tea-story-third-circle{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tea-story-third-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.tea-story-third-shade{position:absolute;inset:0;width:100%;height:100%}
.tea-story-third-heading{position:absolute;left:15.5%;top:30%;opacity:var(--tea-third-heading-opacity)}
.tea-story-third-heading p,.tea-story-mobile-third-heading p,.tea-story-reduced-third>div>p:first-child{margin:0;font:700 32px/45px "Quality Lato","Lato",Arial,sans-serif;letter-spacing:.15em}
.tea-story-third-heading h2{margin:5px 0 0;font:500 22px/1.4 "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.2em}
.tea-story-third-curve{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:6 5}
.tea-story-third-copy{position:absolute;left:41%;top:48%;margin:0;font:400 18px/34px "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.12em;opacity:var(--tea-third-copy-opacity);transform:translateY(var(--tea-third-copy-offset))}
.tea-story-mobile{display:none}
.tea-story-mobile-next,.tea-story-mobile-third,.tea-story-reduced,.tea-story-reduced-third{display:none}
.tea-story-more{position:absolute;z-index:3;left:74.5%;top:81%;display:inline-flex;align-items:center;justify-content:center;gap:16px;width:166.2738px;height:47.3052px;overflow:hidden;border-radius:100px;background:#fff;color:#a2b242;font:400 15px/1 var(--font-en);text-decoration:none;white-space:nowrap;opacity:var(--tea-detail-opacity);transition:filter .25s}
.tea-story-more:hover,.tea-story-more:focus-visible{filter:brightness(.96)}
.tea-story-more:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:760px){
  .tea-story-wipe{height:min(560px,80svh)}
  .tea-story-section{min-height:700svh}
  .tea-story-stage{background:#c6b277 url("../images/home-revision/quality-selection-embedded.png") 55% center/cover no-repeat}
  .tea-story-stage::after{content:"";position:absolute;z-index:0;inset:0;background:#5f5b3c55;pointer-events:none}
  .tea-story-art{display:none}
  .tea-story-first-circle{display:none}
  .tea-story-first-overlay{display:none}
  .tea-story-next{display:none}
  .tea-story-third{display:none}
  .tea-story-mobile{position:absolute;z-index:1;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:42px 28px;color:#fff;font-family:"Noto Sans CJK TC","Noto Sans TC",sans-serif;text-shadow:0 1px 10px #564b2a66}
  .tea-story-mobile-copy{opacity:var(--tea-first-copy-opacity)}
  .tea-story-mobile-kicker{margin:0 0 12px;font:700 clamp(19px,5.5vw,25px)/42px "Quality Lato","Lato",Arial,sans-serif;letter-spacing:.15em}
  .tea-story-mobile-copy h2{margin:0 0 28px;color:#e2dbd3;font:500 22px/1.4 "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.2em}
  .tea-story-mobile-copy>p:not(.tea-story-mobile-kicker){margin:0;font:400 18px/34px "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.2em}
  .tea-story-mobile-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  .tea-story-mobile>span{display:flex;flex-direction:column;align-items:flex-end;margin:25px 0 0 auto;text-align:right;opacity:var(--tea-mobile-target-opacity)}
  .tea-story-mobile>span strong{font-family:"Quality Lato","Lato",Arial,sans-serif;font-weight:700;font-size:clamp(19px,5.5vw,25px);line-height:42px;letter-spacing:.15em;white-space:nowrap}
  .tea-story-mobile>span small{font:500 17px/1.7 "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.2em}
  .tea-story-mobile-next{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;justify-content:center;padding:42px 28px 80px;background:linear-gradient(90deg,#541c19bd,#541c1959),url("../images/home-revision/quality-tea-background.webp") center/cover no-repeat;color:#fff;opacity:var(--tea-next-opacity);transform:translate3d(0,var(--tea-next-offset),0) scale(1.035);pointer-events:none}
  .tea-story-mobile-next-kicker{margin:0 0 5px;font-size:32px;line-height:45px}
  .tea-story-mobile-next h2{margin:0 0 38px;font:500 22px/1.4 "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.2em}
  .tea-story-mobile-next-copy{margin:0;font:400 clamp(13px,3.4vw,17px)/1.9 "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.1em;opacity:var(--tea-mobile-detail-opacity)}
  .tea-story-mobile-third{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:42px 28px 80px;background:url("../images/home-revision/quality-pistachio-background.jpg") center/cover no-repeat;color:#fff;opacity:var(--tea-third-opacity);pointer-events:none}
  .tea-story-mobile-third-circle{position:absolute;right:7%;top:18%;width:42vw;max-width:190px;aspect-ratio:1;overflow:hidden;border:0;border-radius:50%;background:url("../images/home-revision/quality-pistachio-circle-v2.png") center/cover no-repeat;box-shadow:0 0 0 100vmax #0007}
  .tea-story-mobile-third-heading{position:relative;z-index:1;opacity:var(--tea-third-heading-opacity)}
  .tea-story-mobile-third-heading p{font-size:clamp(20px,5vw,27px);line-height:1.4}
  .tea-story-mobile-third-heading h2{margin:5px 0 0;font:500 20px/1.4 "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.2em}
  .tea-story-mobile-third-curve{position:absolute;z-index:1;inset:0;width:100%;height:100%;fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:6 5}
  .tea-story-mobile-third-copy{position:relative;z-index:1;align-self:flex-end;width:min(75%,280px);margin:105px 0 0;font:400 clamp(13px,3.4vw,17px)/1.9 "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.1em;opacity:var(--tea-third-copy-opacity);transform:translateY(var(--tea-third-copy-offset))}
  .tea-story-more{z-index:3;left:auto;right:28px;top:auto;bottom:32px}}
@media(prefers-reduced-motion:reduce){
  .tea-story-section{min-height:0}
  .tea-story-stage{position:relative}
  .tea-story-wipe{display:none}
  .tea-story-next{display:none}
  .tea-story-third{display:none}
  .tea-story-first-copy,.tea-story-mobile-copy{opacity:1}
  .tea-story-first-target,.tea-story-mobile>span{opacity:1}
  .tea-story-line-reveal{stroke-dashoffset:0}
  .tea-story-reduced{display:flex;min-height:100svh;align-items:center;padding:10svh 15.5%;background:linear-gradient(#52161655,#52161655),url("../images/home-revision/quality-tea-background.webp") center/cover no-repeat}
  .tea-story-reduced-copy{display:block;font:400 18px/34px "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.12em}
  .tea-story-reduced-copy p{margin:0}
  .tea-story-reduced-copy h2{margin:2px 0 38px;font:500 22px/1.4 "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.2em}
  .tea-story-reduced-third{display:flex;min-height:100svh;align-items:center;padding:10svh 15.5%;background:linear-gradient(#0007,#0007),url("../images/home-revision/quality-pistachio-background.jpg") center/cover no-repeat;color:#fff}
  .tea-story-reduced-third h2{margin:5px 0 32px;font:500 22px/1.4 "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.2em}
  .tea-story-reduced-third>div>p:last-child{font:400 18px/34px "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.12em}}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .tea-story-reduced{display:flex;min-height:100svh;align-items:center;padding:42px 28px;background:linear-gradient(90deg,#541c19bd,#541c1959),url("../images/home-revision/quality-tea-background.webp") center/cover no-repeat}
  .tea-story-reduced-copy{display:block;font:400 clamp(13px,3.4vw,17px)/1.9 "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.1em}
  .tea-story-reduced-copy p{margin:0}
  .tea-story-reduced-kicker{font-size:32px;line-height:45px}
  .tea-story-reduced-copy h2{margin:5px 0 38px;font:500 22px/1.4 "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.2em}
  .tea-story-reduced-third{padding:42px 28px}
  .tea-story-reduced-third>div>p:first-child{font-size:clamp(20px,5vw,27px);line-height:1.4}
  .tea-story-reduced-third>div>p:last-child{font-size:clamp(13px,3.4vw,17px);line-height:1.9}}

/* Screen five: picture-led CHAPPii updates. */
.news-section{min-height:100svh;background:#f6f0e7;color:var(--forest);overflow:hidden}
.news-ticker{height:99.1761px;border-block:1px solid var(--forest);overflow:hidden;display:flex;align-items:center;background:var(--olive);color:#fff}
.news-ticker-track{display:flex;flex:none;width:max-content;font:700 30px/1 var(--font-en);letter-spacing:.05em;white-space:nowrap;animation:marquee 60s linear infinite}
.news-ticker-group{display:flex;flex:none;justify-content:space-around;width:max-content;min-width:100vw}
.news-ticker span{display:block;flex:none;padding-right:clamp(42px,5vw,80px)}
.news-layout{min-height:calc(100svh - 99.1761px);display:flex;flex-direction:column;justify-content:center;padding-block:38px 47px}
.news-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:40px}
.news-heading .section-kicker{margin-bottom:14px}
.news-heading h2{font:700 clamp(48px,4.5vw,82px)/1.1 var(--font-zh);letter-spacing:-.04em;margin:0}
.news-heading h2 span{color:var(--olive)}
.news-heading>p{font:500 15px/1.7 var(--font-zh);letter-spacing:.1em;margin:0 0 8px;text-align:right}
.news-track{display:flex;gap:18px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:33px 4px 12px 0}
.news-track::-webkit-scrollbar{display:none}
.news-card{flex:0 0 clamp(230px,19vw,286px);min-width:0;scroll-snap-align:start}
.news-image{position:relative;height:clamp(260px,23vw,345px);overflow:hidden;border-radius:8px;background:#d7d4b3;isolation:isolate}
.news-image::after{content:"";position:absolute;z-index:0;inset:38% 0 0;background:linear-gradient(transparent,#1f261d88)}
.news-image>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.news-card:hover .news-image>img{transform:scale(1.07)}
.news-image>strong{position:absolute;z-index:1;left:19px;bottom:17px;color:#fff;font:700 clamp(22px,2vw,30px)/1.3 var(--font-zh);letter-spacing:.08em;text-shadow:0 2px 9px #18201577}
.news-card-featured .news-image{overflow:visible;background:#b9d6db}
.news-card-featured .news-image>img{border-radius:8px;object-position:50% 35%}
.news-card-featured .news-image::after{border-radius:0 0 8px 8px}
.news-mascot{position:absolute;z-index:3;top:10px;left:10px;width:100px;height:100px;filter:drop-shadow(3px 5px 0 #3f472730);transform:rotate(-12deg)}
.news-burst{position:absolute;z-index:4;top:6px;left:89px;display:grid;place-items:center;width:57px;height:57px;clip-path:polygon(50% 0,61% 15%,78% 5%,81% 25%,99% 28%,89% 48%,100% 64%,80% 69%,77% 91%,57% 86%,44% 100%,31% 82%,10% 89%,13% 66%,0 54%,16% 41%,7% 20%,29% 22%);background:#e8e955;color:var(--forest);font:900 12px var(--font-en);transform:rotate(14deg)}
.news-card-peach .news-image{background:#f7aa71}.news-card-peach .news-image>img{object-position:72% center}
.news-card-green .news-image{background:#69a67d}.news-card-green .news-image>img{object-position:62% center}
.news-card-pink .news-image{background:#eca9bd}.news-card-tea .news-image{background:#a1a561}
.news-category{margin:14px 0 5px;font:900 10px/1.3 var(--font-en);letter-spacing:.14em;color:var(--olive)}
.news-card h3{margin:0;font:700 17px/1.55 var(--font-zh)}
.news-scroll-controls{display:flex;align-items:center;gap:4px;margin-top:6px;color:#b4bd90}
.news-scroll-controls button{flex:none;width:12px;height:16px;padding:0;border:0;background:none;color:inherit;cursor:pointer;font:700 14px/1 var(--font-en)}
.news-scroll-controls button:hover,.news-scroll-controls button:focus-visible{color:var(--olive)}
.news-scroll-rule{flex:1;height:6px;margin-right:clamp(80px,8.5vw,164px);border-radius:99px;background:#b9c19a}
.news-bottom{display:flex;align-items:end;gap:23px;margin-top:22px}
.news-bottom>div{display:flex;flex-direction:column}
.news-bottom-english{font:700 36px/1 var(--font-en);letter-spacing:-.04em}
.news-bottom-zh{font:700 11px/1.6 var(--font-zh);letter-spacing:.16em;margin-top:8px}
.news-more{border:1px solid var(--forest);border-radius:99px;background:transparent;color:var(--forest);padding:11px 19px;min-width:145px;cursor:pointer;font:900 11px/1 var(--font-en);letter-spacing:.1em;transition:background .25s,color .25s}
.news-more span{font-size:16px;margin-left:16px}
.news-more:hover,.news-more:focus-visible{background:var(--forest);color:#f6f0e7}
.news-bottom>p{font:700 13px/1.5 var(--font-zh);letter-spacing:.1em;margin:0 0 4px auto}
@media(max-width:760px){
  .news-section{min-height:100svh}
  .news-ticker{height:45px}.news-ticker-track{font-size:20px}
  .news-layout{min-height:calc(100svh - 45px);padding-block:48px}
  .news-heading{display:block;margin-bottom:25px}.news-heading h2{font-size:48px}.news-heading>p{text-align:left;margin-top:17px;font-size:12px}
  .news-track{gap:14px;padding-top:35px}.news-card{flex-basis:min(72vw,300px)}.news-image{height:78vw;max-height:350px}.news-scroll-rule{margin-right:18px}
  .news-bottom{flex-wrap:wrap;gap:20px}.news-bottom>p{width:100%;margin:0;font-size:11px}.news-bottom-english{font-size:29px}}
@media(prefers-reduced-motion:reduce){.news-ticker-track{animation:none}.news-image>img{transition:none}}

/* NEWS.svg layout with a fifth teaser card and an elastic footer curve. */
.news-section{position:relative;z-index:2;overflow:visible;background:#78853c}
@media(min-width:1101px){.news-section{min-height:0}}
.news-design{position:relative;height:min(980px,51.04vw);overflow:visible;background:transparent}
.news-curve{position:absolute;z-index:0;top:0;left:0;display:block;width:100%;height:115%;pointer-events:none}
.news-curve path{fill:#fff}
.news-design>.final-character{position:absolute;z-index:2;top:calc(var(--curve-apex-px,100%) + clamp(-42px,-2.2vw,-27px));left:50%;display:block;width:7.3%;height:auto;opacity:var(--dog-opacity,0);transform:translateX(-50%);transform-origin:50% 100%;pointer-events:none}
.news-design.is-bouncing>.final-character{animation:footer-dog-landing 1.8s linear both}
@keyframes footer-dog-landing{0%,9%{transform:translate(-50%,-8px) scale(.97,1.06)}15%{transform:translate(-50%,7px) scale(1.08,.88)}27%{transform:translate(-50%,-11px) scale(.97,1.07)}39%{transform:translate(-50%,3px) scale(1.03,.96)}55%{transform:translate(-50%,-4px) scale(.99,1.025)}73%,100%{transform:translateX(-50%) scale(1)}}
.news-design-heading{position:absolute;top:min(7.5vw,144px);right:15.5%;text-align:left;color:#505050;white-space:nowrap}
.news-design-heading{z-index:1}
.news-design-heading::before{content:"";position:absolute;z-index:0;left:-44px;top:-34px;width:84px;aspect-ratio:1;border-radius:50%;background:#abb083}
.news-design-heading p,.news-design-heading h2{position:relative;z-index:1;margin:0}
.news-design-heading p{font:500 clamp(22px,1.9vw,27px)/1.2 "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.2em}
.news-design-heading h2{margin-top:8px;font:700 clamp(34px,3.1vw,44px)/1.05 "Lato",Arial,sans-serif;letter-spacing:.05em}
/* AI px: keep 99.5833px from the English heading's line box to the right-hand cards. */
.news-design-inner{position:relative;z-index:1;width:min(69vw,1324px);margin:auto;padding-top:calc(min(7.5vw,144px) + clamp(26.4px,2.28vw,32.4px) + 8px + clamp(35.7px,3.255vw,46.2px) + 99.5833px - min(1.8975vw,36.41px))}
.news-design .news-track{display:flex;gap:4.15%;padding:0;overflow-x:auto;scroll-snap-type:none;scrollbar-width:none}
.news-design .news-track::-webkit-scrollbar{display:none}
.news-design .news-card{flex:0 0 min(21.15%,279.5665px);margin-top:2.75%;color:#383d2c}
.news-design .news-card-featured{position:relative;z-index:1;flex-basis:min(24.1%,318.9805px);margin-top:0}
.news-design .news-image{height:auto;aspect-ratio:1.035;overflow:visible;padding:14px;border-radius:20px;background:#b5977a;isolation:initial;transition:background-color .65s ease}
.news-design .news-card:not(.news-card-featured) .news-image{aspect-ratio:279.5665 / 271.5076;padding:0}
.news-design .news-card-featured .news-image{aspect-ratio:318.9805 / 309.7855;padding:0;background:#78853c}
.news-design .news-image::after{display:none}
.news-design .news-image>img,.news-design .news-card-featured .news-image>img{position:absolute;border-radius:5px;object-fit:cover}
.news-design .news-card:not(.news-card-featured) .news-image>img{top:9.2420064853%;left:6.9951871916%;width:86.0096256168%;height:81.5159870295%}
.news-design .news-card-featured .news-image>img{top:8.8300614458%;left:6.5605264272%;width:86.8789471457%;height:82.3398771085%}
.news-design .news-card:hover .news-image>img{transform:none}
.news-mascot-figure{position:absolute;left:26%;top:-44%;width:44%;height:44%;overflow:hidden;pointer-events:none}
.news-design .news-card:not(.news-card-featured) .news-mascot-figure{visibility:hidden}
.news-design .news-card time,.news-design .news-card-label{display:block;margin-top:19px;font:400 clamp(11px,.7vw,13px)/1.35 var(--font-en);letter-spacing:.03em}
.news-design .news-card h3{margin:10px 0 0;font:400 clamp(15px,1vw,20px)/1.35 var(--font-zh);letter-spacing:.08em}
.news-design-controls{display:flex;align-items:center;gap:24px;margin-top:45px}
.news-design-controls .news-scroll-prev,.news-design-controls .news-scroll-next{flex:none;width:40px;height:40px;padding:0;border:0;cursor:pointer;background-image:url("../images/home-revision/news-arrow-controls.png");background-size:810px 180px;background-repeat:no-repeat}
.news-design-controls .news-scroll-prev{background-position:-139px -106px}
.news-design-controls .news-scroll-next{background-position:-612px -106px}
.news-design-controls .news-scroll-prev:hover,.news-design-controls .news-scroll-prev:focus-visible{background-image:url("../images/home-revision/news-arrow-controls-feedback.png");background-position:-612px -39px;transform:scaleX(-1)}
.news-design-controls .news-scroll-next:hover,.news-design-controls .news-scroll-next:focus-visible{background-image:url("../images/home-revision/news-arrow-controls-feedback.png");background-position:-612px -39px}
.news-design-controls .news-scroll-rule{position:relative;flex:0 1 380px;height:3px;margin:0 5px 0 0;border-radius:99px;background:#d2d2d2;overflow:hidden}
.news-design-controls .news-scroll-rule::before{content:"";position:absolute;inset:0;background:#b5977a;transform:scaleX(var(--news-progress,.25));transform-origin:left center}
@media(prefers-reduced-motion:no-preference){
  .news-design-controls .news-scroll-rule::before{transition:transform .65s cubic-bezier(.22,1,.36,1)}
}
.news-design-controls .news-more{display:block;flex:none;width:150px;min-width:0;height:42px;margin-left:auto;padding:0;border:0;border-radius:99px;background:transparent;cursor:pointer;transition:filter .2s ease}
.news-design-controls .news-more img{display:block;width:100%;height:100%}
.news-design-controls .news-more:hover,.news-design-controls .news-more:focus-visible{background:transparent;filter:brightness(.92)}
@media(prefers-reduced-motion:reduce){.news-design .news-image{transition:none}}
@media(max-width:1100px){
  .news-design{height:auto;min-height:760px;background:#fff;border-radius:0 0 13% 13% / 0 0 7% 7%}
  .news-curve{display:none}
  .news-design-heading{top:50px;right:6%}
  .news-design-inner{width:calc(100% - 76px);padding-top:240px;padding-bottom:110px}
  .news-design .news-track{gap:25px}
  .news-design .news-card{flex-basis:calc((100% - 25px) / 2 - 20px);margin-top:0}
  .news-design .news-card-featured{flex-basis:calc((100% - 25px) / 2 + 20px)}
  .news-mascot-figure{top:-44%}}
@media(max-width:760px){
  .news-design{min-height:0;border-radius:0 0 18% 18% / 0 0 5% 5%}
  .news-design-heading{top:42px;right:20px}
  .news-design-heading::before{left:-23px;top:-16px;width:56px}
  .news-design-heading p{font-size:clamp(19px,5.2vw,28px)}
  .news-design-heading h2{font-size:clamp(23px,6vw,32px)}
  .news-design-inner{width:calc(100% - 38px);padding-top:235px;padding-bottom:100px}
  .news-design .news-track{gap:16px;padding-right:calc(100% - min(72vw,300px))}
  .news-design .news-card{flex-basis:min(72vw,300px)}
  .news-design .news-card-featured{flex-basis:min(78vw,318.9805px)}
  .news-design .news-image{padding:10px;border-radius:16px}
  .news-design .news-card time,.news-design .news-card-label{margin-top:15px;font-size:11px}
  .news-design .news-card h3{font-size:15px}
  .news-design-controls{gap:10px;margin-top:35px}
  .news-design-controls .news-scroll-prev,.news-design-controls .news-scroll-next{width:40px;height:40px}
  .news-design-controls .news-more{width:120px;height:38px;margin-left:auto}
  .news-design-controls .news-scroll-rule{min-width:24px}}

/* Supplied footer artwork is the bottom layer; the news wave and mascot remain above it. */
/* Artwork wordmark starts at SVG y=331.64; the settled mascot's visible bottom is y=184/190.
   Keep their vertical clearance at the Illustrator-specified 83.6667 CSS px. */
@media(max-width:760px){
  .news-design>.final-character{top:calc(var(--curve-apex-px,100%) - 37px);width:84px;max-width:none}}
@media(prefers-reduced-motion:reduce){.final-character{transition:none;animation:none;opacity:1}.final-character{transform:translateX(-50%)}}

/* Homepage hero composition, measured on the 1920px design. */
.site-body{--hero-height:max(650px,100svh,60.21vw);--hero-overlap:calc(var(--hero-height) * .278);--hero-curve-lift:24px}
.hero{height:var(--hero-height);min-height:0;background:linear-gradient(#cecc8a,#cecc8a) top/100% calc(100% - var(--hero-overlap) - var(--hero-curve-lift) + 1px) no-repeat;overflow:clip;isolation:isolate}
.hero + .recommend-scroll-stage{margin-top:calc(-1 * var(--hero-overlap))}
.hero-inner,.hero .home-wrap{width:100%;max-width:none;height:100%;min-height:0;margin:0;padding:0;display:block}
.hero-transition{display:block;position:absolute;z-index:0;inset:auto 0 0;width:100%;height:var(--hero-overlap);pointer-events:none}
.hero-transition>path{fill:#cecc8a}
.hero-transition{translate:0 calc(-1 * var(--hero-curve-lift))}
@media(max-width:760px){.site-body{--hero-curve-lift:12px}}
.hero-background-motion{position:absolute;inset:0;isolation:isolate;pointer-events:none}
.hero-marquee{position:absolute;top:calc(24.6875vw - 35px);inset-inline:0;overflow:hidden;color:#fff;pointer-events:none;font:italic 800 213.3333px/1 "Inter",sans-serif;letter-spacing:.12em;font-optical-sizing:none;font-variation-settings:"opsz" 18}
.hero-marquee-track{display:flex;width:max-content;animation:hero-marquee-right 24s linear infinite}
.hero-marquee-track span{flex:none;min-width:100vw;padding-inline-end:.45em;white-space:nowrap}
@keyframes hero-marquee-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.hero-visual{position:absolute;z-index:1;left:41.1979%;top:0;width:51.3281%;height:auto;min-height:0;aspect-ratio:auto;margin:0;transform:none}
.hero .hero-visual{aspect-ratio:1971 / 2180;scale:.95}
.hero-cream,.hero-drink-photo{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-cream{overflow:visible}
.hero-drink-photo{clip-path:url(#hero-drink-cutout)}
/* Local rim flow and the lower drip share one path renderer in home-revision.js. */
@media(prefers-reduced-motion:no-preference){
  .hero-inner > .hero-visual{opacity:0;transform-origin:50% 48%}
  .hero{--hero-entrance-duration:1.25s;--hero-entrance-delay:.85s;--hero-entrance-easing:cubic-bezier(.2,.75,.28,1)}
  .ready .hero-inner > .hero-visual{animation:hero-drink-enter var(--hero-entrance-duration) var(--hero-entrance-easing) var(--hero-entrance-delay) both}}
@keyframes hero-drink-enter{
  0%{opacity:0;transform:translateY(9%) scale(.58)}
  18%{opacity:1}
  73%{transform:translateY(-.6%) scale(1.025)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.hero-brand-block{position:absolute;z-index:3;top:calc(16.875vw - 20px);left:16.4583%;bottom:auto;width:19.0365%;margin:0;padding:0}
.hero .hero-brand-title{margin:0;scale:.95}
.hero-brand-title img{display:block;width:100%;height:auto}
@media(prefers-reduced-motion:no-preference){
  .hero .hero-brand-title,.hero-brand-caption img{transform:translateX(-40vw)}
  .ready .hero-brand-title,.ready .hero-brand-caption img{animation:hero-edge-enter 1s cubic-bezier(.22,.72,.28,1) .6s both}
  .hero .hero-brand-title{position:relative}
  .hero-brand-title::after{content:"";position:absolute;inset:19% 16% 39% 17%;background:#fff;pointer-events:none}
  .ready .hero-brand-title::after{animation:hero-title-type .8s steps(4,end) 1.6s both}}
@keyframes hero-edge-enter{
  from{transform:translateX(-40vw)}
  to{transform:translateX(0)}
}
@keyframes hero-title-type{
  from{clip-path:inset(0)}
  to{clip-path:inset(0 0 0 100%)}
}
.hero-brand-caption{position:absolute;z-index:3;top:29.8958vw;left:9.9219%;display:flex;align-items:flex-end;gap:1.09375vw;margin:0}
.hero-brand-caption img{width:10vw;height:auto;flex:none;translate:0 -10px}
.hero-brand-caption p,.home-entered .hero-brand-caption p{margin:0 0 .52em;opacity:1;clip-path:none;animation:none;color:#3f4140;font:700 clamp(13px,1.25vw,24px)/1.4 var(--font-en);letter-spacing:.10em}
.hero-scroll{position:absolute;z-index:3;right:calc(11.93% - 32px);top:calc(42.03vw - 76px);display:grid;place-items:center;width:6.5vw;min-width:72px;aspect-ratio:1;color:white;text-decoration:none}
.hero-scroll svg{position:absolute;inset:0;width:100%;height:100%;scale:1.15;fill:currentColor;font:700 11px var(--font-en);letter-spacing:.065em;animation:hero-scroll-spin 10s linear infinite}
@keyframes hero-scroll-spin{to{transform:rotate(1turn)}}
.hero-scroll span{display:grid;place-items:center;width:76%;aspect-ratio:1;border-radius:50%;background:#78853c;font:400 clamp(23px,2.5vw,44px)/1 var(--font-en)}
.hero-scroll span{position:relative}
.hero-scroll span::before,.hero-scroll span::after{content:"";position:absolute}
.hero-scroll span::before{left:calc(50% - 1px);top:31%;width:2px;height:38%;background:currentColor;transform-origin:top}
.hero-scroll span::after{left:50%;top:69%;width:12%;aspect-ratio:1;border-right:2px solid;border-bottom:2px solid;transform:translate(-50%,-85%) rotate(45deg)}
@media(prefers-reduced-motion:no-preference){
  .hero-scroll span::before{animation:hero-arrow-grow 1.65s ease-in-out infinite}
  .hero-scroll span::after{animation:hero-arrow-tip 1.65s ease-in-out infinite}}
@keyframes hero-arrow-grow{
  0%{transform:scaleY(0);opacity:1}
  55%,76%{transform:scaleY(1);opacity:1}
  100%{transform:scaleY(1);opacity:0}
}
@keyframes hero-arrow-tip{
  0%,45%{opacity:0}
  55%,76%{opacity:1}
  100%{opacity:0}
}
@media(max-width:760px){
  /* Mobile stacks the photo and copy, with an independently scaled marquee. */
  .hero{height:auto;min-height:100svh}
  .hero-inner,.hero .home-wrap{height:auto;min-height:0;padding:24px 20px 100px}
  .hero-visual{position:relative;inset:auto;display:block;width:min(86vw,460px);margin:22px auto 0}
  .hero-brand-block{position:relative;inset:auto;width:clamp(180px,54vw,275px);margin:-34px 0 0;top:-20px}
  .hero-brand-caption{position:relative;inset:auto;gap:12px;margin-top:26px;align-items:center}
  .hero-brand-caption img{width:82px;height:auto;translate:0 -5px}
  .hero-brand-caption p,.home-entered .hero-brand-caption p{font-size:clamp(10px,2.8vw,15px);white-space:normal}
  .hero-marquee{top:calc(35% - 45px);font-size:clamp(78px,19vw,140px)}
  .hero-scroll{top:auto;right:calc(6% - 14px);bottom:108px}
  .site-body{--hero-overlap:90px}}
@media(prefers-reduced-motion:reduce){.hero-marquee-track,.hero-scroll svg{animation:none}}

/* Second-screen artwork, with a single completed drink and live video. */
.recommend-section{height:auto;min-height:0;display:grid;grid-template-columns:63% 37%;overflow:hidden;background:#78853c;color:#fff}
.recommend-section .menu-left,.recommend-section .menu-feature{position:relative;top:auto;width:100%;height:max(51vw,620px);max-height:none;min-height:0;margin:0}
.recommend-section::after{content:"";position:absolute;inset:auto 0 0;z-index:11;height:clamp(18px,4.35vw,84px);background:conic-gradient(from 90deg,#e2dbd3 25%,transparent 0 50%,#e2dbd3 0 75%,transparent 0) 0 0 / calc(100% / 23) 100%;pointer-events:none}
.recommend-title{position:absolute;top:calc(25% - 28px);left:51.7%;width:max-content;max-width:100%;transform:translateX(-50%);margin:0;color:#fff;font:700 clamp(16px,2.2vw,42px)/1.2 var(--font-zh);letter-spacing:.15em;white-space:nowrap}
.recommend-outline{position:absolute;z-index:13;left:calc(15.635% + 12px);top:25%;writing-mode:sideways-lr;color:#fff;filter:url(#recommend-outline-only);-webkit-text-stroke:0;font:800 96px/1 "Inter",sans-serif;font-optical-sizing:none;font-variation-settings:"opsz" 18;letter-spacing:.12em;pointer-events:none}
.recommend-label>span{align-self:flex-start;margin-top:-.32em;border:1px solid currentColor;border-radius:999px;padding:.26em .62em;line-height:1;white-space:nowrap}
@media(max-width:760px){
  .recommend-title{top:calc(13% - 16px);left:50%;translate:0 -26px}
  .recommend-outline{left:26px;top:20%;translate:0 -20px;font-size:clamp(28px,7vw,42px)}
  .recommend-section::after{background-size:calc(100% / 15) 100%}}
.recommend-section .menu-left{background:#3f4727;overflow:hidden}
.recommend-section .menu-left::before{content:"";position:absolute;left:0;top:62%;width:100%;height:42%;background:url("../images/home-revision/recommend-green-ai.svg") top/100% 100% no-repeat}
@media(prefers-reduced-motion:no-preference){
  .recommend-section .menu-left::before{transform-origin:50% 45%;transform:scaleY(0);opacity:0;transition:transform .75s cubic-bezier(.2,1.35,.4,1),opacity .15s ease}
  .recommend-section.is-text-visible .menu-left::before{transform:scaleY(1);opacity:1}}
.recommend-section .menu-left > :is(.recommend-drink,.recommend-label){translate:0 calc(-76px - clamp(32px,4.2vw,80px))}
.recommend-label{position:absolute;z-index:1;left:31.5%;width:37%;display:flex;justify-content:space-between;border-top:1px solid;padding-top:.32em;font:700 clamp(13px,1.55vw,30px)/1.2 var(--font-en);letter-spacing:.14em}
.recommend-label small{writing-mode:vertical-rl;font:500 clamp(11px,.9vw,17px)/1.25 var(--font-zh);letter-spacing:.12em;padding-right:.3em;border-right:1px dotted #ffffff66}
.recommend-label-foam{top:37.5%}
.recommend-label-tea{top:60.5%;z-index:2}
.recommend-drink{position:absolute;top:42%;left:31%;width:47%;height:auto}
.recommend-section .menu-feature-caption{top:auto;right:auto;left:21%;bottom:calc(17% + 32px);color:#fff;text-align:left;border-right:1px dotted #ffffff88;padding-right:1em}
.recommend-section .menu-feature-caption-zh{font-size:clamp(13px,1.23vw,23px)}
.recommend-section .menu-feature-caption-en{font-size:clamp(10px,.92vw,17px)}
@media(max-width:760px){
  .recommend-section{grid-template-columns:1fr}
  .recommend-section .menu-left{height:max(112vw,480px)}
  .recommend-section .menu-feature{height:110vw}}

.recommend-section > .menu-rowing-dog{--row-start-x:89%;--row-start-y:35%;--row-end-x:65%;--row-end-y:93%;z-index:12;top:var(--row-start-y);left:var(--row-start-x);right:auto;width:clamp(105px,11vw,210px);height:auto;aspect-ratio:530 / 400;transform:translate(-50%,-50%);animation:none}
.recommend-section > .menu-rowing-dog img{animation:none}
.recommend-section > .menu-rowing-dog img:first-child{visibility:visible}
@media(prefers-reduced-motion:no-preference){
  .is-sequenced .recommend-section > .menu-rowing-dog{left:calc(var(--row-start-x) + (var(--row-end-x) - var(--row-start-x)) * var(--row-progress,0));top:calc(var(--row-start-y) + (var(--row-end-y) - var(--row-start-y)) * var(--row-progress,0))}
  .is-sequenced .recommend-section > .menu-rowing-dog img:first-child{animation:recommend-stroke-reach 1.8s steps(1,end) infinite, recommend-rowing-lean 1.8s ease-in-out infinite}
  .is-sequenced .recommend-section > .menu-rowing-dog img:last-child{animation:recommend-stroke-pull 1.8s steps(1,end) infinite, recommend-rowing-lean 1.8s ease-in-out infinite}}
@keyframes recommend-stroke-reach{0%,72%,100%{visibility:visible}28%{visibility:hidden}}
@keyframes recommend-stroke-pull{0%,72%,100%{visibility:hidden}28%{visibility:visible}}
@media(max-width:760px){
  .recommend-section > .menu-rowing-dog{--row-start-x:80%;--row-start-y:65%;--row-end-x:62%;--row-end-y:91%}}

.recommend-scroll-stage{position:relative}
.recommend-scroll-stage::before{content:"";position:absolute;left:0;top:calc(-1 * var(--hero-curve-lift) - 2px);width:63%;height:calc(var(--hero-curve-lift) + 4px);background:#3f4727;pointer-events:none}
@media(max-width:760px){.recommend-scroll-stage::before{width:100%}}
.recommend-drink{left:36%;width:28%;aspect-ratio:991/1588}
.recommend-drink::before{content:"";position:absolute;left:calc(25% + 5px);bottom:calc(-10% + 15px);width:145%;aspect-ratio:510/237;background:#263017;mask:url("../images/home-revision/recommend-shadow-ai.png") center/contain no-repeat;pointer-events:none}
.recommend-drink img{position:absolute;inset:0;display:block;width:100%;height:100%}
.recommend-label-jelly{display:none}
@media(prefers-reduced-motion:no-preference){
  .recommend-scroll-stage.is-sequenced::after{content:"";display:block;height:calc(300svh + var(--hero-overlap))}
  .recommend-scroll-stage.is-sequenced > .recommend-section{position:sticky;top:0}
  .is-sequenced .recommend-drink img:nth-child(2){clip-path:inset(var(--jelly-cut,100%) 0 0)}
  .is-sequenced .recommend-drink img:nth-child(3){clip-path:inset(var(--tea-cut,100%) 0 0)}
  .is-sequenced .recommend-drink img:nth-child(4){clip-path:inset(var(--foam-cut,100%) 0 0)}
  .is-sequenced .recommend-label{top:var(--line-top);opacity:var(--line-opacity,0)}
  .is-sequenced .recommend-label-jelly{display:flex}}
@media(max-width:760px){.recommend-drink{left:27.542%;width:38%}}

/* Desktop positions measured from the revised Illustrator composition. */
@media(min-width:761px){
  .hero .hero-visual{left:41.5%;top:.7vw;width:50.5%;scale:1}
  .hero-brand-block{top:18.39vw;left:16.49%;width:19.04%}
  .hero-brand-caption{top:29.05vw;left:10.08%;gap:.72vw}
  .hero-brand-caption img{width:10.05vw;translate:none}
  .recommend-section .menu-left,.recommend-section .menu-feature{height:min(100svh,calc(100vw * 980 / 1920))}
  .recommend-section .menu-left > :is(.recommend-title,.recommend-outline,.recommend-drink,.recommend-label){translate:0 -52px}
  .recommend-drink{top:33%;left:50%;width:min(31.4%,calc(58svh * 991 / 1588));transform:translateX(-59.1%)}
  .recommend-label{left:30%;width:40%}
  .recommend-label-foam{top:45%}
  .recommend-label-tea{top:63%}
  .recommend-section .menu-feature-caption{left:21%;bottom:calc(15% + 32px)}
  .recommend-section > .menu-rowing-dog{--row-start-x:90%;--row-start-y:38%;--row-end-y:89%;width:clamp(105px,11.2vw,215px)}}
.recommend-title,.recommend-outline{opacity:0;transition:opacity .45s ease}
.recommend-section.is-text-visible :is(.recommend-title,.recommend-outline){opacity:1}
@media(prefers-reduced-motion:reduce){.recommend-title,.recommend-outline{transition:none}}
.hero-falling-cream{position:fixed;z-index:30;pointer-events:none;opacity:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fffaf5 0%,#f2e5d8 48%,#d4bfb0 100%)}
.recommend-title{display:flex;align-items:center}
.recommend-title-inner{display:flex;justify-content:center;align-items:center;width:4.6em;overflow:hidden}
.recommend-title-inner>span{display:block;flex:none;width:4.6em}
@media(prefers-reduced-motion:no-preference){
  .recommend-title-inner{width:0;transition:width .75s cubic-bezier(.22,.8,.28,1) .18s}
  .recommend-title-inner>span{opacity:1;transform:none}
  .recommend-section.is-text-visible .recommend-title-inner{width:4.6em}
  .recommend-section.is-text-visible .recommend-title-inner>span{opacity:1;transform:scale(1)}}
.recommend-label-art{border:0;padding:0;display:block;letter-spacing:normal}
.recommend-label-art>img{display:block;width:100%;height:auto}
@media(prefers-reduced-motion:no-preference){
  .recommend-drink img{opacity:0;translate:0 -160px;transform-origin:50% 100%}
  .recommend-section.is-text-visible .recommend-drink img{animation:recommend-cup-land .85s cubic-bezier(.32,0,.68,1) both}
  .recommend-drink::before{opacity:0;transition:opacity .2s ease .85s}
  .recommend-section.is-text-visible .recommend-drink::before{opacity:1}}
@keyframes recommend-cup-land{
  0%{opacity:0;translate:0 -160px;scale:1}
  12%{opacity:1}
  62%{translate:0 5px;scale:1.025 .965}
  79%{translate:0 -9px;scale:.99 1.015}
  100%{opacity:1;translate:0 0;scale:1}
}
.recommend-arch{position:absolute;z-index:0;left:10%;top:27%;width:80%;height:auto;overflow:visible;fill:#78853c;font:800 101px/1 "Inter",var(--font-en);letter-spacing:.035em;pointer-events:none;opacity:0;translate:0 14px;transition:opacity .65s ease,translate .65s ease}
.recommend-section.is-drink-complete .recommend-arch{opacity:1;translate:0 0}
@media(max-width:760px){.recommend-arch{top:22%}}
@media(prefers-reduced-motion:reduce){.recommend-arch{transition:none}}
.recommend-description{position:absolute;z-index:1;left:calc(15.5% + 12px);bottom:17%;margin:0;color:#fff;font:400 min(1.25vw,1.84svh)/2.15 "Noto Sans TC","Noto Sans CJK TC",sans-serif;letter-spacing:.15em;white-space:nowrap;opacity:0;translate:0 10px;transition:opacity .65s ease .12s,translate .65s ease .12s;pointer-events:none}
.recommend-section.is-drink-complete .recommend-description{opacity:1;translate:0 0}
@media(max-width:760px){.recommend-description{left:calc(6% + 6px);bottom:12%;font-size:clamp(9px,2.1vw,12px);letter-spacing:.15em}}
@media(prefers-reduced-motion:reduce){.recommend-description{transition:none}}
.recommend-stickers{position:absolute;z-index:3;left:56%;top:74%;width:20%;color:#fff;font:700 clamp(12.6px,1.35vw,26.1px)/1.1 var(--font-en);letter-spacing:.02em;opacity:0;translate:0 10px;transition:opacity .45s ease .25s,translate .55s ease .25s}
.recommend-stickers>span{display:block;width:max-content;border:1px solid #fff;border-radius:16px;padding:.35em 1em;background:#a79787;box-shadow:0 2px 2px #26301726}
.recommend-stickers>span:first-child{transform:rotate(-9deg)}
.recommend-stickers>span:last-child{margin:-.3em 0 0 42%;transform:rotate(4deg)}
.recommend-section.is-drink-complete .recommend-stickers{opacity:1;translate:0 0}
@media(max-width:760px){.recommend-stickers{left:54%;top:72%;font-size:clamp(10px,2.34vw,14.4px)}.recommend-stickers>span{border-radius:10px;padding:.35em .8em}}
@media(prefers-reduced-motion:reduce){.recommend-stickers{transition:none}}
.recommend-stickers{scale:.81;transform-origin:0 50%}
@media(prefers-reduced-motion:no-preference){
  .recommend-section.is-drink-complete .recommend-stickers>span{animation:recommend-sticker-stick .5s cubic-bezier(.2,.75,.28,1) .25s both;transform-origin:center}
  .recommend-section.is-drink-complete .recommend-stickers>span:last-child{animation-delay:.42s}}
@keyframes recommend-sticker-stick{
  0%{opacity:0;translate:8px -18px;scale:1.2}
  12%{opacity:1}
  68%{translate:0 2px;scale:.96}
  100%{opacity:1;translate:0 0;scale:1}
}
.recommend-section.is-drink-complete .recommend-outline{opacity:0}
@media(prefers-reduced-motion:no-preference){
  .recommend-section.is-drink-complete .recommend-outline{animation:recommend-outline-close .45s ease-in both}
  .recommend-section.is-drink-complete .recommend-arch{opacity:1;translate:0 0;transition:none}
  .recommend-arch text{opacity:0}
  .recommend-section.is-drink-complete .recommend-arch text{animation:recommend-arch-settle .55s cubic-bezier(.22,.75,.28,1) .5s both}}
@keyframes recommend-outline-close{
  0%{opacity:1;clip-path:inset(-2px)}
  85%{opacity:1}
  100%{opacity:0;clip-path:inset(-2px -2px 100% -2px)}
}
@keyframes recommend-arch-settle{
  from{opacity:0;translate:0 10px}
  to{opacity:1;translate:0 0}
}

.has-rolling-wipe .tea-story-next{opacity:var(--tea-next-layer-opacity,0);clip-path:circle(var(--tea-next-reveal,0%) at 72.86% 48.33%);transform:none}


/* Keep the hand separate from the pill so it can wave without moving the label. */
.hero-view-more-icon{transform-origin:50% 85%;will-change:transform}
.news-design-controls .news-more .hero-view-more-icon{margin:0;flex:none}
.news-design-controls .news-more:hover,.news-design-controls .news-more:focus-visible{background:#a79787;filter:none;color:#fff}
@media(max-width:760px){.news-design-controls .news-more{gap:8px;font-size:12px}}

/* The badge stays still; only the transparent vector hand waves. */
.hero-view-more-icon{position:relative;background:none;will-change:auto}
.hero-view-more-icon::before{content:"";position:absolute;width:27px;height:27px;left:50%;top:50%;border-radius:50%;background:#e2dbd3;transform:translate(-50%,-50%)}
.hero-view-more-icon>i{position:absolute;inset:0;display:block;background:url("../images/home-revision/button-hand.svg") center/contain no-repeat;transform-origin:50% 85%;will-change:transform}

/* Solid beige decorative dots sit above the movie without blending. */

.tea-story-dots{opacity:1}
.tea-story-dots-base{fill:#e4ddd7}

.tea-story-dot{transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:no-preference){
  .tea-story-dot{animation:tea-dot-drift 6s ease-in-out infinite}
  .tea-story-dot-right{animation-duration:7s;animation-delay:-2s}
  .tea-story-dot-bottom{animation-duration:5.5s;animation-delay:-1s}}
@keyframes tea-dot-drift{0%,100%{transform:translateY(8px)}50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.tea-story-dots{opacity:1}}

/* Pure Happiness opens into Pistachio Expert from the same photograph center. */
@media(min-width:761px) and (prefers-reduced-motion:no-preference){
  .has-rolling-wipe .tea-story-third{opacity:var(--tea-third-layer-opacity,0);clip-path:circle(var(--tea-third-reveal,0%) at 72.86% 48.33%);will-change:clip-path}}

.tea-story-next-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* Continuous strokes remain readable even when scrolling pauses; never scale the artwork. */
.recommend-section > .menu-rowing-dog img{transform-origin:52% 73%}
@keyframes recommend-rowing-lean{
  0%,100%{transform:translateY(-2px) rotate(-2.5deg)}
  50%{transform:translateY(3px) rotate(2.5deg)}
}
/* Mobile keeps its existing stacked spacing. */

.news-design-inner{position:relative;top:-45px}

/* Stagger the three solid dots into place, then let their existing drift continue. */
.tea-story-dot-pop{transform-box:fill-box;transform-origin:center;--dot-delay:0s}
.tea-story-dot-pop-right{--dot-delay:.09s}
.tea-story-dot-pop-bottom{--dot-delay:.18s}
@media(prefers-reduced-motion:no-preference){
  .tea-story-dot-pop{transform:scale(0)}
  .is-tea-dots-visible .tea-story-first-circle .tea-story-dot-pop{animation:tea-dot-enter .8s calc(.2s + var(--dot-delay)) both}}
@keyframes tea-dot-enter{
  0%{transform:translateY(32px) scale(0);animation-timing-function:cubic-bezier(.12,.8,.2,1)}
  42%{transform:translateY(-12px) scale(1.3);animation-timing-function:ease-in}
  65%{transform:translateY(5px) scale(.86);animation-timing-function:ease-out}
  83%{transform:translateY(-3px) scale(1.1);animation-timing-function:ease-in-out}
  100%{transform:translateY(0) scale(1)}
}

@media(prefers-reduced-motion:no-preference){
  .is-tea-next-dots-visible .tea-story-next-circle .tea-story-dot-pop,
  .is-tea-third-dots-visible .tea-story-third-circle .tea-story-dot-pop{animation:tea-dot-enter .8s calc(.2s + var(--dot-delay)) both}}

/* Bounce the clipped video itself without moving the surrounding dots or scene wipe. */
.tea-story-video-pop{transform-box:view-box;transform-origin:72.8589% 48.3326%}
@media(prefers-reduced-motion:no-preference){
  .tea-story-video-pop{transform:scale(0)}
  .is-tea-dots-visible .tea-story-first-circle .tea-story-video-pop,
  .is-tea-next-dots-visible .tea-story-next-circle .tea-story-video-pop,
  .is-tea-third-dots-visible .tea-story-third-circle .tea-story-video-pop{animation:tea-video-enter .9s .2s both}}
@keyframes tea-video-enter{
  0%{transform:translateY(25px) scale(0);animation-timing-function:cubic-bezier(.15,.75,.2,1)}
  48%{transform:translateY(-8px) scale(1.12);animation-timing-function:ease-in-out}
  72%{transform:translateY(3px) scale(.95);animation-timing-function:ease-out}
  88%{transform:translateY(-1px) scale(1.03);animation-timing-function:ease-in-out}
  100%{transform:translateY(0) scale(1)}
}

/* Keep each circular video and its dots above the scene shade and copy. */
.tea-story-first-circle,.tea-story-next-circle,.tea-story-third-circle{z-index:4}

/* Later scenes must also sit above the first scene overlay stacking context. */
.tea-story-next{z-index:5}
.tea-story-third{z-index:6}

/* Dim only the expert background bitmap, never a layer above the video. */
.tea-story-third-photo{filter:brightness(.57)}
.tea-story-third-circle{isolation:isolate;filter:none;box-shadow:none}
.tea-story-third-video{filter:none;box-shadow:none;opacity:1}

/* Reveal stationary dashes once, from the top down, when this scene arrives. */
.tea-expert-upper-draw{stroke-dasharray:245;stroke-dashoffset:245}
.is-tea-third-dots-visible .tea-expert-upper-draw{animation:tea-expert-upper-draw .7s cubic-bezier(.2,.6,.35,1) both}
@keyframes tea-expert-upper-draw{from{stroke-dashoffset:245}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.tea-expert-upper-draw{stroke-dashoffset:0;animation:none}}

/* Warm tea-toned accents for Pure Happiness, matching its amber footage. */
.tea-story-next-circle .tea-story-dots-base{fill:#b96c36}

/* RECOMMEND bumps the heading; the two labels fall after that impact. */
@media(prefers-reduced-motion:no-preference){
  .recommend-section.is-drink-complete .recommend-arch text{animation:recommend-arch-impact 1s .25s both}
  .recommend-section.is-drink-complete .recommend-title{animation:recommend-heading-impact .65s .65s both;transform-origin:50% 100%}
  .recommend-section.is-drink-complete .recommend-stickers{opacity:1;translate:0 0;transition:none}
  .recommend-section.is-drink-complete .recommend-stickers>span{animation:recommend-tag-fall 1.1s .72s both;transform-origin:center}
  .recommend-section.is-drink-complete .recommend-stickers>span:last-child{animation-delay:.89s}}
@keyframes recommend-arch-impact{
  0%{opacity:0;translate:0 45px;animation-timing-function:cubic-bezier(.15,.7,.25,1)}
  12%{opacity:1}
  40%{opacity:1;translate:0 var(--recommend-hit-rise,-55px);animation-timing-function:cubic-bezier(.45,0,.8,.5)}
  72%{opacity:1;translate:0 9px;animation-timing-function:ease-out}
  88%{opacity:1;translate:0 -5px;animation-timing-function:ease-in-out}
  100%{opacity:1;translate:0 0}
}
@keyframes recommend-heading-impact{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1,1);animation-timing-function:ease-in-out}
  14%{transform:translateX(-50%) translateY(-3px) scale(1.09,.84);animation-timing-function:ease-out}
  38%{transform:translateX(-50%) translateY(-13px) scale(.96,1.10) rotate(-.6deg);animation-timing-function:ease-in-out}
  65%{transform:translateX(-50%) translateY(2px) scale(1.035,.95) rotate(.3deg);animation-timing-function:ease-in-out}
  83%{transform:translateX(-50%) translateY(-2px) scale(.99,1.025)}
}
@keyframes recommend-tag-fall{
  0%{opacity:0;translate:0 var(--recommend-tag-drop,-360px);rotate:-9deg;animation-timing-function:cubic-bezier(.45,0,.85,.45)}
  1%{opacity:1}
  60%{opacity:1;translate:0 5px;rotate:3deg;animation-timing-function:ease-out}
  78%{opacity:1;translate:0 -19px;rotate:-2deg;animation-timing-function:ease-in}
  92%{opacity:1;translate:0 2px;rotate:.5deg}
  100%{opacity:1;translate:0 0;rotate:0deg}
}

/* Preserve the original face; nod gently in time with the four title characters. */
.hero-speaking-dog{position:relative;display:block;flex:none;width:10.05vw;translate:0 0}
.hero-speaking-dog-pose{position:relative;display:block;transform-origin:48% 90%}
.hero .hero-brand-caption .hero-speaking-dog img{display:block;width:100%;height:auto;translate:none;transform:none;animation:none}
.hero .hero-brand-title::after{animation:none;clip-path:inset(0 0 0 var(--hero-title-cut,0%))}
@media(prefers-reduced-motion:no-preference){
  .hero-speaking-dog{transform:translateX(-40vw)}
  .ready .hero-speaking-dog{animation:hero-edge-enter 1s cubic-bezier(.22,.72,.28,1) .6s both}}
@keyframes hero-dog-speech-nod{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-2px) rotate(-.8deg)}70%{transform:translateY(1px) rotate(.4deg)}}
@media(max-width:760px){.hero-speaking-dog{width:82px;translate:0 -5px}}
@media(prefers-reduced-motion:reduce){.hero .hero-brand-title::after{display:none}.hero-speaking-dog{transform:none}}

/* One continuous image: the motion map eases to neutral above the fixed body. */
.hero-speaking-art{display:block;width:100%;height:auto;overflow:visible}
.hero-speaking-dog-pose{animation:none;transform:none}

/* Element 5: original vector head pivots over the intact body, cup and straw. */
.hero-speaking-vector-head{transform-origin:535px 450px}
@media(prefers-reduced-motion:no-preference){
  .hero-speaking-dog.is-speaking .hero-speaking-vector-head{animation:hero-vector-gentle-nod .5s ease-in-out 2}}
@keyframes hero-vector-gentle-nod{
  0%,100%{transform:translateY(0) rotate(0)}
  38%{transform:translateY(3px) rotate(2.8deg)}
  72%{transform:translateY(-1px) rotate(-1.8deg)}
}

/* Keep the white outline, filling upward in sync with the three ingredients. */
.recommend-outline{filter:none}
.recommend-outline-edge{display:block;filter:url(#recommend-outline-only)}
.recommend-outline-fill{position:absolute;inset:0;display:block;color:#fff;filter:none;clip-path:inset(var(--recommend-fill-cut,100%) 0 0 0)}

/* Reveal the red-tea heading automatically when its scene is in place. */
.tea-story-mobile-next-kicker{opacity:var(--tea-detail-opacity)}
.tea-story-mobile-next h2{opacity:var(--tea-detail-opacity)}

/* A single solid band with shallow, evenly spaced wave edges. */
.news-ticker{height:124px;border:0;background:#fff url("../images/home-revision/news-ticker-waves.svg?v=single-shallow-wave-1106") center/100% 100% no-repeat}
@media(max-width:760px){.news-ticker{height:64px}}

/* Overlap the photo by the wave inset so its upper edge has no white seam. */
.news-section{margin-top:-12px;background:linear-gradient(to bottom,transparent 0 124px,#78853c 124px)}
.news-ticker{background-image:url("../images/home-revision/news-ticker-waves.svg?v=single-shallow-wave-1106"),linear-gradient(to bottom,transparent 0 50%,#fff 50%);background-color:transparent;background-size:100% 100%;background-repeat:no-repeat}
@media(max-width:760px){.news-section{margin-top:-7px;background:linear-gradient(to bottom,transparent 0 64px,#78853c 64px)}}

/* Desktop Illustrator values: 40pt = 53.3333px; 65pt = 86.6667px.
   Tracking 200 = .2em; tracking 50 = .05em. */
.news-design-heading{text-align:left}
.news-design-heading::before{display:block;left:-84px;top:-64px;width:160px;background:#abb083}
.news-design-heading p{font-family:"Noto Sans CJK TC","Noto Sans TC",sans-serif;font-weight:500;font-size:53.3333px;line-height:1.2;letter-spacing:.2em;text-align:left}
.news-design-heading h2{font-family:"Quality Lato","Lato",Arial,sans-serif;font-weight:700;font-size:86.6667px;line-height:1.05;letter-spacing:.05em;margin-top:12px;text-align:left}
/* Intentional compact-screen scaling, independent of the desktop point sizes. */
@media(min-width:761px) and (max-width:1100px){
 .news-design-heading p{font-size:36px}
 .news-design-heading h2{font-size:58px}
 .news-design-heading::before{left:-56px;top:-42px;width:108px}}
@media(max-width:760px){
 .news-design-heading p{font-size:clamp(19px,5.2vw,28px)}
 .news-design-heading h2{font-size:clamp(23px,6vw,32px);margin-top:8px}
 .news-design-heading::before{left:-23px;top:-16px;width:56px}}

/* Scale Illustrator's converted desktop sizes with the 1920px artboard.
   At 1920px: Chinese 40pt/53.3333px, English 65pt/86.6667px.
   Render this heading at a maximum 75% design scale to match the reference:
   Chinese 40px, English 65px. Mobile keeps its separate rules. */
@media(min-width:761px){
 .news-design-heading p{font-size:min(40px,2.777778vw)}
 .news-design-heading h2{font-size:min(65px,4.513889vw);margin-top:min(9px,.625vw)}
 .news-design-heading::before{width:min(120px,8.333333vw);left:max(-63px,-4.375vw);top:max(-48px,-3.333333vw)}}

/* Restore the original straight-edged ticker band and photo junction. */
.news-section{margin-top:0;background:#78853c}
.news-ticker{height:99.1761px;border:0;background:#78853c}
@media(max-width:760px){.news-section{margin-top:0;background:#78853c}.news-ticker{height:45px}}

/* Match reference 2: right-aligned lines, with no decorative circle.
   AI source: 40pt=53.3333px and 65pt=86.6667px.
   Apply the reference's 75% presentation scale, then scale with the 1920px artboard.
   Tracking remains .2em / .05em independently of the presentation scale. */
.news-design-heading,.news-design-heading p,.news-design-heading h2{text-align:right}
.news-design-heading::before{display:none}
@media(min-width:761px){
 .news-design-heading p{font-size:min(40px,2.083333vw);font-weight:500;letter-spacing:.2em;line-height:1.2}
 .news-design-heading h2{font-size:min(65px,3.385417vw);font-weight:700;letter-spacing:.05em;line-height:1.05;margin-top:min(8px,.416667vw)}}

/* Raise both NEWS heading lines together without changing their alignment. */
.news-design-heading{translate:0 -45px}

/* Keep the sideways travel continuous through both hops. */
@media(prefers-reduced-motion:no-preference){
 .news-design.has-article-entrance .news-card:not(.is-article-visible){visibility:hidden}
 .news-design.is-articles-entering .news-card{
   --article-side:1;
   animation:news-article-travel 1.45s cubic-bezier(.15,.75,.3,1) var(--article-hop-delay,0ms) both,
             news-article-hop 1.45s ease-out var(--article-hop-delay,0ms) both
 }
 .news-design.is-articles-entering .news-card:nth-child(-n+2){--article-side:-1}
 .news-design.is-articles-entering .news-card:is(:first-child,:last-child){--article-hop-delay:145ms}
 .news-design.is-articles-entering .news-track{overflow:visible}}
@keyframes news-article-travel{
  from{translate:calc(var(--article-side) * 100vw) 0}
  to{translate:0 0}
}
@keyframes news-article-hop{
  from{transform:translateY(24px);animation-timing-function:ease-out}
  42%{transform:translateY(calc(-1 * clamp(48px,4.5vw,72px)));animation-timing-function:ease-in}
  69%{transform:none;animation-timing-function:ease-out}
  82%{transform:translateY(-20px);animation-timing-function:ease-in}
  to{transform:none}
}

.news-title-brackets{display:inline-flex;align-items:center;justify-content:center;vertical-align:top}
.news-title-opening{display:block;overflow:hidden;flex:none}
.news-title-opening>span{display:block;white-space:nowrap}
@media(prefers-reduced-motion:no-preference){
 .news-design-heading.has-bracket-opening .news-title-brackets{width:var(--news-bracket-width)}
 .news-design-heading.has-bracket-opening .news-title-opening{width:0;transition:width .85s cubic-bezier(.22,.8,.28,1) .1s}
 .news-design-heading.has-bracket-opening .news-title-opening>span{width:var(--news-label-width)}
 .news-design-heading.has-bracket-opening.is-brackets-open .news-title-opening{width:var(--news-label-width)}}

/* Enlarged compact logo; menu items emerge from the mark along curved paths. */

/* Enlarge only the compact navigation mark; restore the hero's original size. */

/* Compact menu fans around the logo circumference, with radial baselines.
   Reset each item's old absolute position so the motion path is not added twice. */
/* Product showcase restored from the current production homepage. */


/* Third screen: paired product displays from the supplied proposal artwork. */
.quality-section{overflow:clip;container-type:inline-size;background:#e4ddd7;color:#4b4b48}
.quality-showcase{position:relative;display:grid;grid-template-columns:minmax(0,45%) minmax(0,49%);gap:6%;width:min(1000px,calc(100% - 9vw));min-height:clamp(690px,66vw,920px);margin-inline:auto;padding-block:clamp(50px,5vw,80px)}
.quality-showcase-drinks{left:.1042px;grid-template-columns:minmax(0,44.7548%) minmax(0,49.2452%);width:min(1311.6666px,68.31596875vw);min-height:calc(clamp(690px,66vw,920px) + 80px);padding-top:144px}
.quality-side-waffle{--letter-angle:90deg;position:absolute;z-index:1;top:56%;right:calc(100% + clamp(20px,2.5vw,44px));display:flex;flex-direction:column;align-items:center;transform:translateY(-50%);color:#d5cbc3;font:900 clamp(48px,4.2vw,82px)/.91 "Lato",Arial,sans-serif;letter-spacing:.02em;pointer-events:none;user-select:none}
.quality-side-waffle span{--entry-x:-62px;--entry-rotate:-24deg;--land-rotate:8deg;display:grid;place-items:center;width:1.08em;height:1.08em;transform-origin:50% 80%}
.quality-side-waffle span:nth-child(even){--entry-x:62px;--entry-rotate:24deg;--land-rotate:-8deg}
.quality-side-waffle b{display:block;font:inherit;line-height:1;transform:rotate(var(--letter-angle))}
.quality-side-waffle span:nth-child(1){--i:0}.quality-side-waffle span:nth-child(2){--i:1}.quality-side-waffle span:nth-child(3){--i:2}.quality-side-waffle span:nth-child(4){--i:3}.quality-side-waffle span:nth-child(5){--i:4}.quality-side-waffle span:nth-child(6){--i:5}
.quality-side-waffle.has-side-waffle-animation span{opacity:0}
.quality-side-waffle.has-side-waffle-animation.is-visible span{animation:waffle-letter-pop 1.15s cubic-bezier(.2,.7,.2,1) calc(var(--i)*.17s) both}
@keyframes waffle-letter-pop{0%{opacity:0;transform:translate(var(--entry-x),-85px) rotate(var(--entry-rotate)) scale(.35,1.3)}48%{opacity:1;transform:translateY(16px) rotate(var(--land-rotate)) scale(1.17,.8)}68%{transform:translateY(-14px) rotate(-3deg) scale(.93,1.09)}84%{transform:translateY(5px) scale(1.04,.95)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.quality-side-waffle.has-side-waffle-animation span{opacity:1}.quality-side-waffle.has-side-waffle-animation.is-visible span{animation:none}}
.quality-product-side,.quality-feature-side{position:relative;min-width:0}
.quality-product-side{display:flex;align-items:center}
.quality-showcase-drinks .quality-product-side{align-items:flex-start;padding:48px 0 0}
.quality-showcase-drinks .quality-feature-side{position:sticky;top:72px;align-self:start}
.quality-showcase-drinks .quality-product-grid{max-width:none}
.quality-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.1vw,48px) clamp(24px,3vw,46px);width:100%;max-width:480px}
.quality-product-card{text-align:center;min-width:0}
.quality-showcase-drinks.has-scroll-reveal .quality-product-card--scroll{opacity:0;transform:translateY(36px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.quality-showcase-drinks.has-scroll-reveal .quality-product-card--scroll.is-visible{opacity:1;transform:none}
.quality-showcase-drinks.has-scroll-reveal .quality-product-card--scroll:nth-child(6){transition-delay:.1s}
.quality-product-image{display:grid;place-items:center;width:100%;aspect-ratio:1.04;background:#f6f5f5;border-radius:19px;overflow:hidden}
.quality-product-image img{display:block;width:89%;height:91%;object-fit:contain}
.quality-product-card--toffee .quality-product-image img{width:47.6%;height:auto}
.quality-product-card h3{margin:14px 0 3px;font:600 clamp(13px,1.08vw,18px)/1.45 var(--font-zh);letter-spacing:.08em}
.quality-product-card p{margin:0;font:500 clamp(10px,.8vw,13px)/1.4 var(--font-en);letter-spacing:.09em}
.quality-showcase-drinks .quality-product-card p{font:400 18px/21px "Lato",Arial,sans-serif;letter-spacing:.15em;white-space:nowrap}
.quality-heading{position:relative;z-index:1;margin-left:35%;white-space:nowrap}
.quality-showcase-drinks .quality-heading{width:min(695.7766px,36.2383646vw);margin-left:calc(3.0329% - 51.1476px);text-align:right}
.quality-heading p{position:relative;margin:0;font:600 clamp(19px,2.1vw,31px)/1.3 var(--font-zh);letter-spacing:.13em}
.quality-heading h2{margin:2px 0 0;font:700 clamp(38px,4vw,65px)/1.1 var(--font-en);letter-spacing:.03em}
.quality-showcase-drinks .quality-heading p{font:500 clamp(22px,1.9vw,27px)/1.2 "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.2em}
.quality-showcase-drinks .quality-heading h2{margin-top:8px;font:700 clamp(34px,3.1vw,44px)/1.05 "Lato",Arial,sans-serif;letter-spacing:.05em}
.quality-heading-dot{position:absolute;z-index:-1;right:16%;top:-24px;width:84px;aspect-ratio:1;border-radius:50%;background:#abb083}
.quality-showcase-drinks .quality-heading-dot{right:-42px;top:-37px}
.quality-blob{position:relative;width:94%;aspect-ratio:1.27;margin:clamp(50px,6vw,100px) 0 0 4%}
.quality-blob::before{content:"";position:absolute;inset:-15px -6px 22px 3px;background:#78853c;border-radius:48% 52% 38% 62% / 51% 37% 63% 49%;transform:rotate(-17deg)}
.quality-blob img,.quality-blob video{position:relative;display:block;width:100%;height:100%;object-fit:cover;clip-path:ellipse(49% 46% at 50% 50%)}
.quality-tea-blob{width:min(695.7766px,36.2383646vw);aspect-ratio:695.7766/574.0499;margin-top:clamp(50px,4.35764vw,83.6667px);margin-left:calc(3.0329% + .9653425vw);transform:none}
.quality-tea-blob::before{display:none}
.quality-tea-blob picture{display:block;width:100%;height:100%}
@keyframes quality-tea-flow{
  0%,100%{transform:translate3d(0,0,0) rotate(-.5deg) scale(1)}
  28%{transform:translate3d(2.5%,-1.8%,0) rotate(1.8deg) scale(1.035)}
  59%{transform:translate3d(-2.8%,1.5%,0) rotate(-2deg) scale(1.045)}
  82%{transform:translate3d(1.4%,1%,0) rotate(.8deg) scale(1.015)}
}
@media(prefers-reduced-motion:reduce){.quality-tea-blob{animation:none;transform:none}}
.quality-tea-blob img{width:100%;height:100%;object-fit:contain;clip-path:none;transform:none}
.quality-view-more{position:absolute;right:calc(100% - (3.0329% - 51.1476px) - min(695.7766px,36.2383646vw));bottom:calc(2% - 18px);display:block;width:166.2738px;height:47.3052px;overflow:hidden;border-radius:23.65px;text-decoration:none}
.quality-view-more img{position:absolute;left:-87.92px;top:-97.2px;display:block;width:342px;height:208.67px;max-width:none}
.quality-view-more:focus-visible{outline:2px solid #78853c;outline-offset:4px;border-radius:30px}
.quality-showcase-waffles{grid-template-columns:minmax(0,53%) minmax(0,41%);gap:6%;padding-top:0}
.quality-showcase-waffles .quality-heading{margin-left:calc(244.6667px - (100cqw - 1000px)/2);padding-top:5%}
.quality-showcase-waffles .quality-heading p{font:500 clamp(22px,1.9vw,27px)/1.2 "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.2em}
.quality-showcase-waffles .quality-heading h2{margin-top:8px;font:700 clamp(34px,3.1vw,44px)/1.05 "Lato",Arial,sans-serif;letter-spacing:.05em}
.quality-showcase-waffles .quality-heading-dot{left:-44px;right:auto;top:-34px}
.quality-showcase-waffles .quality-blob{width:min(729.6456px,40vw);aspect-ratio:729.6456/575.1186;margin:clamp(55px,6vw,95px) 0 0 calc(150px - (100cqw - 1000px)/2)}
.quality-waffle-blob{transform:none}
.quality-waffle-blob::before{display:none}
.quality-waffle-blob picture{display:block;width:100%;height:100%}
.quality-waffle-blob img{object-fit:contain;clip-path:none}
@media(prefers-reduced-motion:reduce){.quality-waffle-blob{animation:none;transform:none}}
.quality-waffle-stickers{position:absolute;z-index:2;inset:0;pointer-events:none}
.quality-waffle-sticker{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:19%;height:8%;padding:0 2%;border:2px solid #fff;border-radius:13px;color:#fff;font:700 clamp(16px,1.25vw,24px)/1 "Lato",Arial,sans-serif;letter-spacing:.03em;white-space:nowrap;transform:rotate(var(--sticker-angle))}
.quality-waffle-sticker-chappii{--sticker-angle:-9deg;left:16%;bottom:15%;background:#aa9989}
.quality-waffle-sticker-waffle{--sticker-angle:2deg;left:28%;bottom:8%;background:#78853c}
.quality-waffle-stickers.has-sticker-drop .quality-waffle-sticker{opacity:0;transform:translateY(-95px) rotate(calc(var(--sticker-angle) - 6deg)) scale(.88);transform-origin:center bottom}
.quality-waffle-stickers.has-sticker-drop .quality-waffle-sticker span{opacity:1}
.quality-waffle-stickers.has-sticker-drop.is-visible .quality-waffle-sticker-chappii{animation:waffle-label-fall .85s .1s both}
.quality-waffle-stickers.has-sticker-drop.is-visible .quality-waffle-sticker-waffle{animation:waffle-label-fall .85s 1s both}
.quality-waffle-stickers.has-sticker-drop.is-visible .quality-waffle-sticker-chappii span{animation:none;opacity:1}
.quality-waffle-stickers.has-sticker-drop.is-visible .quality-waffle-sticker-waffle span{animation:none;opacity:1}
@keyframes waffle-sticker-drop{0%{opacity:0;transform:translateY(-95px) rotate(calc(var(--sticker-angle) - 6deg)) scale(.88)}8%{opacity:1}52%{transform:translateY(6px) rotate(calc(var(--sticker-angle) + 1deg)) scale(1.045,.88)}72%{transform:translateY(-13px) rotate(calc(var(--sticker-angle) - .6deg)) scale(.98,1.05)}88%{transform:translateY(2px) rotate(calc(var(--sticker-angle) + .2deg)) scale(1.01,.97)}100%{opacity:1;transform:translateY(0) rotate(var(--sticker-angle)) scale(1)}}
@media(prefers-reduced-motion:reduce){.quality-waffle-stickers.has-sticker-drop .quality-waffle-sticker,.quality-waffle-stickers.has-sticker-drop .quality-waffle-sticker span{animation:none;opacity:1}.quality-waffle-stickers.has-sticker-drop .quality-waffle-sticker{transform:rotate(var(--sticker-angle))}}
.quality-showcase-waffles .quality-product-side{padding-top:13%;transform:translateY(44px)}
.quality-showcase-waffles .quality-product-grid{grid-template-columns:repeat(2,266.6682px);width:max-content;max-width:none}
.quality-showcase-waffles .quality-product-image{width:266.6682px;height:252.8614px;aspect-ratio:auto}
@media(max-width:1500px){
  .quality-showcase-waffles .quality-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .quality-showcase-waffles .quality-product-image{width:100%;height:auto;aspect-ratio:266.6682/252.8614}
  .quality-showcase-drinks .quality-product-card p{font-size:clamp(14px,1.2vw,18px);line-height:1.17}}
@media(max-width:1100px){
  .quality-showcase{width:min(900px,calc(100% - 8vw));min-height:0;padding-block:65px}
  .quality-side-waffle{right:calc(100% - 2px);font-size:clamp(36px,4vw,44px)}
  .quality-showcase-drinks{left:0;grid-template-columns:minmax(0,45%) minmax(0,49%);padding-top:144px}
  .quality-showcase-drinks .quality-product-side{padding-left:clamp(15px,5vw,50px)}
  .quality-showcase-drinks .quality-product-grid{max-width:480px}
  .quality-showcase-waffles .quality-blob{width:100%;margin-left:0}
  .quality-heading{margin-left:6%}
  .quality-showcase-drinks .quality-heading{width:auto;margin-left:6%;text-align:left}
  .quality-heading h2{font-size:clamp(30px,3.8vw,48px)}
  .quality-heading p{font-size:clamp(16px,2vw,24px)}
  .quality-product-card h3{font-size:clamp(11px,1.25vw,15px)}
  .quality-product-card p{font-size:10px}
  .quality-showcase-drinks .quality-product-card p{font-size:clamp(11px,1.64vw,18px);line-height:1.17}
  .quality-view-more{left:6%;right:auto;bottom:0}}
@media(max-width:900px){.quality-side-waffle{--letter-angle:0deg;top:auto;right:auto;bottom:-22px;left:0;flex-direction:row;gap:.035em;transform:none;font-size:clamp(40px,7vw,58px);line-height:1}.quality-side-waffle span{width:auto;height:auto}}
@media(max-width:760px){
  .quality-showcase,.quality-showcase-waffles{display:flex;flex-direction:column;width:calc(100% - 38px);padding-block:55px 70px;gap:36px}
  .quality-showcase-drinks{padding-top:55px}
  .quality-side-waffle{position:relative;left:auto;bottom:auto;align-self:flex-start;margin-top:-8px;font-size:clamp(35px,10vw,48px)}
  .quality-showcase-drinks .quality-product-side{padding-left:0}
  .quality-showcase-drinks .quality-feature-side{position:relative;top:auto;align-self:auto}
  .quality-showcase-drinks .quality-product-grid{max-width:none}
  .quality-showcase-drinks .quality-feature-side{order:-1}
  .quality-showcase-waffles .quality-feature-side{order:-1}
  .quality-heading,.quality-showcase-waffles .quality-heading{margin-left:2%;padding-top:0}
  .quality-showcase-drinks .quality-heading{margin-left:2%}
  .quality-heading p{font-size:clamp(15px,4.4vw,24px)}
  .quality-heading h2{font-size:clamp(32px,9vw,52px)}
  .quality-showcase-drinks .quality-heading p{font-size:clamp(19px,5.2vw,28px)}
  .quality-showcase-drinks .quality-heading h2{font-size:clamp(23px,6vw,32px)}
  .quality-showcase-waffles .quality-heading p{font-size:clamp(19px,5.2vw,28px)}
  .quality-showcase-waffles .quality-heading h2{font-size:clamp(23px,6vw,32px)}
  .quality-heading-dot,.quality-showcase-waffles .quality-heading-dot{width:56px;top:-13px;left:auto;right:7%}
  .quality-showcase-waffles .quality-heading-dot{left:-23px;right:auto;top:-16px}
  .quality-showcase-drinks .quality-heading-dot{right:-28px;top:-26px}
  .quality-blob,.quality-showcase-waffles .quality-blob{width:100%;margin-top:30px;aspect-ratio:1.34}
  .quality-tea-blob{aspect-ratio:695.7766/574.0499;margin-left:0}
  .quality-showcase-waffles .quality-waffle-blob{aspect-ratio:729.6456/575.1186}
  .quality-waffle-sticker{font-size:clamp(12px,3.2vw,21px);min-width:23%;height:9%;border-radius:10px}
  .quality-view-more{position:relative;left:auto;right:auto;bottom:auto;margin:20px 0 0 2%}
  .quality-product-side,.quality-showcase-waffles .quality-product-side{display:block;padding-top:0}
  .quality-showcase-waffles .quality-product-side{transform:translateY(20px)}
  .quality-product-grid{max-width:none;gap:24px 14px}
  .quality-product-image{border-radius:14px}
  .quality-product-card h3{font-size:clamp(11px,3.1vw,15px)}
  .quality-product-card p{font-size:10px}
  .quality-showcase-drinks .quality-product-card p{font-size:clamp(11px,2.9vw,16px);white-space:normal}}
@media(prefers-reduced-motion:no-preference){
  .quality-scroll-entry{position:relative;z-index:15;margin-top:-200svh}
  .quality-scroll-entry::after{content:"";display:block;height:100svh}
  .quality-scroll-entry>.quality-section{position:sticky;top:0;clip-path:none;mask-image:radial-gradient(circle at 50% 100svh,#000 0 var(--quality-circle-radius,0px),transparent calc(var(--quality-circle-radius,0px) + 1px));mask-mode:alpha}
  .quality-scroll-entry.is-expanded>.quality-section{mask-image:linear-gradient(#000,#000)}}

/* Menu lettering follows the decorative stroke, revealed from left to right. */
.quality-section{position:relative;isolation:isolate}
.quality-menu-curve{position:absolute;z-index:-1;left:0;top:30px;width:100%;height:auto;overflow:visible;pointer-events:none;clip-path:inset(0 100% 0 0)}
.quality-menu-curve-line{fill:none;stroke:#fff;stroke-width:50;stroke-linecap:round;stroke-linejoin:round}
.quality-menu-curve text{fill:#78853c;stroke:#e4ddd7;stroke-width:2px;paint-order:stroke;font:800 44px/1 "Inter",sans-serif;letter-spacing:.12em}
.quality-menu-curve textPath{dominant-baseline:central}
.quality-section.is-menu-curve-visible .quality-menu-curve{clip-path:inset(0);transition:clip-path 2.2s cubic-bezier(.25,.5,.35,1)}
@media(max-width:760px){.quality-menu-curve{top:20px;width:160%;left:-30%}}
@media(prefers-reduced-motion:reduce){.quality-menu-curve{clip-path:inset(0)}.quality-section.is-menu-curve-visible .quality-menu-curve{transition:none}}
.quality-view-more,.news-design-controls .news-more{display:inline-flex;align-items:center;justify-content:center;gap:16px;background:#a79787;color:#fff;font:400 15px/1 var(--font-en)}
.quality-view-more>span:first-child,.news-design-controls .news-more>span:first-child{margin:0;font:inherit;letter-spacing:normal}
.quality-view-more,.news-design-controls .news-more,.news-design-controls .news-more:hover,.news-design-controls .news-more:focus-visible{background:#a39383}

/* Use pre-rendered alpha artwork to avoid nested animated SVG clipping during the wipe. */
.quality-waffle-blob picture{background:transparent;mask:none}
.quality-waffle-blob{will-change:auto}

/* Give the opening waffle display more breathing room above its heading. */
@media(min-width:761px){
  .quality-showcase-waffles{padding-top:40px}
  .quality-menu-curve{top:70px}}

/* Remove the waffle heading while preserving the surrounding product layout. */
.quality-showcase-waffles .quality-heading{visibility:hidden}

@keyframes waffle-label-fall{
  0%{opacity:0;transform:translateY(-180px) rotate(calc(var(--sticker-angle) - 10deg));animation-timing-function:cubic-bezier(.45,0,.85,.45)}
  5%{opacity:1}
  62%{opacity:1;transform:translateY(5px) rotate(calc(var(--sticker-angle) + 2deg));animation-timing-function:ease-out}
  80%{transform:translateY(-12px) rotate(calc(var(--sticker-angle) - 1deg));animation-timing-function:ease-in}
  100%{opacity:1;transform:translateY(0) rotate(var(--sticker-angle))}
}

/* Center the drinks CTA beneath both columns, rather than inside the sticky photo. */
.quality-showcase-drinks{row-gap:32px}
.quality-showcase-drinks>.quality-view-more{position:relative;inset:auto;grid-column:1 / -1;justify-self:center;align-self:center;margin:85px auto 0;transform:none}

/* Product entrances use transform; hover uses translate so the two stay independent. */
@media(prefers-reduced-motion:no-preference){
 .quality-product-card{transition:translate .25s cubic-bezier(.2,.7,.3,1)}
 .quality-product-card.has-product-entrance{opacity:0}
 .quality-product-card.has-product-entrance.is-product-visible{animation:product-card-light-landing .8s var(--product-enter-delay,0s) both}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .quality-product-card:is(:hover,:focus-within){translate:0 -6px}
}
@keyframes product-card-light-landing{
  0%{opacity:0;transform:translate(35px,28px);animation-timing-function:cubic-bezier(.2,.7,.25,1)}
  18%{opacity:1}
  62%{opacity:1;transform:translate(0,-7px);animation-timing-function:ease-in-out}
  82%{transform:translate(0,3px)}
  100%{opacity:1;transform:translate(0,0)}
}

/* Hide the drinks title and decorative dot, retaining the existing photo position. */
.quality-showcase-drinks .quality-heading{visibility:hidden}

/* Centered menu title uses the same displayed type scale as the NEWS title. */
.quality-menu-heading{position:absolute;z-index:2;top:clamp(28px,2.5vw,48px);left:50%;width:max-content;max-width:95%;transform:translateX(-50%);text-align:center;pointer-events:none}
.quality-menu-heading p{margin:0;color:#3f3f3d;font:500 min(40px,2.083333vw)/1.2 "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.2em}
.quality-menu-heading h2{margin:min(8px,.416667vw) 0 0;color:#3f4727;font:700 min(65px,3.385417vw)/1.05 "Quality Lato","Lato",Arial,sans-serif;letter-spacing:.05em;white-space:nowrap}
@media(max-width:760px){
 .quality-menu-heading{position:relative;top:auto;left:auto;transform:none;margin:32px auto 0}
 .quality-menu-heading p{font-size:clamp(19px,5.2vw,28px)}
 .quality-menu-heading h2{font-size:clamp(23px,6vw,32px);margin-top:8px}
}

/* Shared waffle/drink card: image, dashed divider and bilingual names in one panel. */
.quality-showcase .quality-product-card{box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;padding:20px 28px 30px;border-radius:24px;background:#f3f3f3;overflow:hidden}
.quality-showcase .quality-product-image{width:100%;height:auto;aspect-ratio:1.15;background:transparent;border-radius:0}
.quality-showcase .quality-product-image img{display:block;width:85%;height:91%;object-fit:contain;margin:auto}
.quality-showcase-waffles .quality-product-image img{width:82%;height:90%}
.quality-showcase .quality-product-card--toffee .quality-product-image img{width:47.6%;height:91%}
.quality-showcase .quality-product-card h3{margin:0;padding-top:20px;border-top:1px dashed #626b42;color:#383a32;font:500 18px/1.5 "Noto Sans CJK TC","Noto Sans TC",sans-serif;letter-spacing:.15em}
.quality-showcase .quality-product-card p{margin:10px 0 0;color:#505050;font:400 12px/1.3 "Lato",Arial,sans-serif;letter-spacing:.12em;white-space:normal}
@media(max-width:1100px){
 .quality-showcase .quality-product-card{padding:16px 18px 24px;border-radius:22px}
 .quality-showcase .quality-product-card h3{font-size:15px;padding-top:16px}
 .quality-showcase .quality-product-card p{font-size:11px}
}
@media(max-width:760px){
 .quality-showcase .quality-product-card{padding:12px 15px 22px;border-radius:20px}
 .quality-showcase .quality-product-card h3{font-size:14px;letter-spacing:.1em}
 .quality-showcase .quality-product-card p{font-size:10px}
}

/* Give the centered menu heading breathing room above the product showcase. */
@media(min-width:761px){.quality-showcase-waffles{padding-top:100px}}
@media(max-width:760px){.quality-showcase-waffles{padding-top:80px}}

/* Enlarge only drink photos; retain card dimensions and label positions. */
.quality-showcase-drinks .quality-product-image img{transform:scale(1.18);transform-origin:center}

/* Drink-photo labels follow the same separate falling rhythm as the waffle labels. */
.quality-drink-stickers{position:absolute;z-index:2;inset:0;pointer-events:none}
.quality-drink-sticker{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:19%;height:8%;padding:0 2%;border:2px solid #fff;border-radius:13px;color:#fff;font:700 clamp(16px,1.25vw,24px)/1 "Lato",Arial,sans-serif;letter-spacing:.03em;white-space:nowrap;transform:rotate(var(--sticker-angle))}
.quality-drink-sticker-chappii{--sticker-angle:-9deg;right:21%;bottom:20%;background:#aa9989}
.quality-drink-sticker-drinks{--sticker-angle:2deg;right:12%;bottom:15%;background:#78853c}
@media(prefers-reduced-motion:no-preference){
 .quality-drink-stickers.has-sticker-drop .quality-drink-sticker{opacity:0}
 .quality-drink-stickers.has-sticker-drop.is-visible .quality-drink-sticker-chappii{animation:waffle-label-fall .85s .1s both}
 .quality-drink-stickers.has-sticker-drop.is-visible .quality-drink-sticker-drinks{animation:waffle-label-fall .85s 1s both}
}
@media(max-width:760px){.quality-drink-sticker{font-size:clamp(12px,3.2vw,21px);min-width:23%;height:9%;border-radius:10px}}

/* Direct hover trigger on every view-more hand, with two slow, visible waves. */
@media(prefers-reduced-motion:no-preference){
 :is(a,button).is-hand-greeting>.hero-view-more-icon>i{animation:view-more-hand-greeting 2.4s linear both}
}
@keyframes view-more-hand-greeting{
  0%,100%{transform:rotate(0deg);animation-timing-function:ease-in-out}
  12.5%,62.5%{transform:rotate(-12deg);animation-timing-function:ease-in-out}
  37.5%,87.5%{transform:rotate(12deg);animation-timing-function:ease-in-out}
}

/* Bring the drink showcase closer to the preceding waffle cards. */
@media(min-width:761px){
 .quality-showcase-waffles{padding-bottom:40px}
 .quality-showcase-drinks{padding-top:40px}
}
@media(max-width:760px){
 .quality-showcase-waffles{padding-bottom:40px}
 .quality-showcase-drinks{padding-top:30px}
}

/* Repeat the background line when the drink menu enters the viewport. */
.quality-drinks-curve{position:absolute;z-index:0;top:0;left:calc((100% - 100cqw)/2);width:100cqw;height:auto;overflow:visible;pointer-events:none;clip-path:inset(0 0 0 100%)}
.quality-showcase-drinks>.quality-product-side,.quality-showcase-drinks>.quality-feature-side{z-index:1}
.quality-showcase-drinks.is-drinks-curve-visible .quality-drinks-curve{clip-path:inset(0);transition:clip-path 2.2s cubic-bezier(.25,.5,.35,1)}
@media(prefers-reduced-motion:reduce){.quality-drinks-curve{clip-path:inset(0)}}

/* A slight tilt complements the card's existing hover lift. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .quality-showcase .quality-product-card{rotate:0deg;transition:translate .25s cubic-bezier(.2,.7,.2,1),rotate .3s ease}
 .quality-showcase .quality-product-card:is(:hover,:focus-within){rotate:-2deg}
 .quality-showcase .quality-product-card:nth-child(even):is(:hover,:focus-within){rotate:2deg}
}



/* Use the same label sizing for the waffle and drink showcases. */
:is(.quality-waffle-sticker,.quality-drink-sticker){min-width:0;width:max-content;height:auto;padding:.35em 1em;border:1px solid #fff;border-radius:16px;font:700 clamp(12.6px,1.35vw,26.1px)/1.1 var(--font-en);letter-spacing:.02em;zoom:.81}
.quality-waffle-sticker-chappii{left:19.75%;bottom:18.52%}
.quality-waffle-sticker-waffle{left:30%;bottom:10%;--sticker-angle:4deg}
@media(max-width:760px){:is(.quality-waffle-sticker,.quality-drink-sticker){font-size:clamp(10px,2.34vw,14.4px);padding:.35em .8em;border-radius:10px}}

/* Slight overlap between the two waffle labels. */
.quality-waffle-sticker-waffle{left:29%;bottom:14%}

.quality-waffle-sticker-waffle{bottom:calc(14% - 5px)}

/* The SVG dash window controls both ends of the ribbon. */
.quality-menu-curve,.quality-section.is-menu-curve-visible .quality-menu-curve,.quality-drinks-curve,.quality-showcase-drinks.is-drinks-curve-visible .quality-drinks-curve{clip-path:none;transition:none}

.quality-waffle-sticker-waffle{left:calc(29% + 5px);bottom:calc(14% - 10px)}

/* Release the drink feature when the last card row clears the viewport edge. */
@media(min-width:761px){
 .quality-showcase-drinks{
  --drink-photo-height:calc(min(36.2383646vw,695.7766px) * .825);
  --drink-sticky-top:max(40px,calc((100svh - var(--drink-photo-height)) / 2));
  align-items:start;
  overflow:visible;
 }
 .quality-showcase-drinks>.quality-feature-side{
  position:relative;
  top:auto;
  align-self:stretch;
  padding-bottom:max(0px,calc(100svh - var(--drink-sticky-top) - var(--drink-photo-height) - 32px));
 }
 .quality-drink-feature{
  position:sticky;
  top:var(--drink-sticky-top);
 }
 .quality-showcase-drinks .quality-tea-blob{margin-top:0;animation:none;transform:none;will-change:auto}
 .quality-showcase-drinks .quality-drink-feature>.quality-heading{display:none}
}

/* The Illustrator mascot peeks around the active waffle card's left edge. */
:is(.quality-showcase-waffles,.quality-showcase-drinks) .quality-product-card{position:relative;overflow:visible}
:is(.quality-showcase-waffles,.quality-showcase-drinks) .quality-product-card::before{
 content:"";
 position:absolute;
 z-index:2;
 left:-21.6%;
 top:43%;
 width:41.4%;
 aspect-ratio:129 / 121;
 background:var(--card-peek-art,url("../images/home-revision/waffle-peeking-dog-element6.svg?v=20261109")) center / contain no-repeat;
 pointer-events:none;
 opacity:0;
 transform:translateX(55%) rotate(8deg) scale(.94);
 transform-origin:85% 75%;
 transition:transform .45s cubic-bezier(.2,.8,.3,1.15),opacity .15s ease;
}
.quality-showcase-waffles .quality-product-card--peek-default{translate:0 -6px;rotate:-2deg}
.quality-showcase-waffles :is(.quality-product-card--peek-default,.quality-product-card--peeking)::before{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){:is(.quality-showcase-waffles,.quality-showcase-drinks) .quality-product-card::before{transition:none}}

/* Illustrator element 7 is the little drink cup for drink-card hovers. */
.quality-showcase-drinks .quality-product-card::before{
 --card-peek-art:url("../images/home-revision/drink-peek-element7.svg");
 left:auto;
 right:-13%;
 top:42%;
 width:22%;
 aspect-ratio:71 / 131;
 transform:translateX(-55%) rotate(-8deg) scale(.94);
 transform-origin:15% 75%;
}
@media(hover:hover) and (pointer:fine){
 .quality-showcase-drinks .quality-product-card:is(:hover,:focus-within)::before{opacity:1;transform:translateX(0) rotate(12deg) scale(1)}
}