/* WooCha identity refresh. Colors sampled from the corrected 1080px JPGs supplied on 2026-10-27;
   exact numeric brand specifications were not provided. */
:root{--ink:#0e3777;--gold:#e9b569;--yellow:#ffe57a;--cream:#fff;--line:#d7dfe9;--body:#424657;--black:#141414;--sand:#fff5e9;--sans:-apple-system,BlinkMacSystemFont,'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif}
body{background:white;color:var(--ink)}
h1,h2,h3{font-family:var(--sans)}
h2{font-weight:700;letter-spacing:-.6px;line-height:1.55}
a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:var(--ink)}
.header{height:92px;background:#fff;border-bottom:2px solid var(--black);padding:0 5%;gap:28px}
.brand{gap:16px;min-width:0}
.brand img{width:auto;height:auto;object-fit:contain;flex-shrink:0}
.brand .logo-en{width:150px;height:auto}
.brand .logo-zh{width:65px;height:auto;margin-top:17px}
.logo-rule{display:block;height:24px;width:1px;background:#bfccdf;margin-top:16px}
.desktop-nav{font-weight:500}
.desktop-nav a:hover,.text-link:hover{color:#6c390b}
.nav-cta{background:var(--ink);color:#fff;border:1px solid var(--ink);padding:10px 18px}
.nav-cta:hover{background:#0b2c5f}
.hero{grid-template-columns:49% 51%;min-height:670px;border-bottom:4px solid var(--black)}
.hero-copy{padding:65px 8% 26px 10.2%;justify-content:flex-start;background:white}
.hero-copy>.eyebrow{font-size:10px;letter-spacing:1.7px}
.dot{border-radius:0;width:8px;height:8px;background:var(--ink)}
.hero-kicker{font-size:14px;letter-spacing:2px;margin:15px 0 19px}
.hero h1{font-family:var(--sans);font-size:clamp(38px,4.2vw,65px);font-weight:800;line-height:1.45;letter-spacing:-1px;margin-bottom:24px}
.highlight:after{background:var(--yellow);height:17px;bottom:4px}
.hero-desc{font-size:14px;line-height:2.1;color:var(--body);margin-bottom:29px}
.dark,.gold{background:var(--ink)}
.dark:hover,.gold:hover{background:#0b2c5f}
.hero-foot{padding-top:19px;gap:15px;border-color:#cbd5e3;font-size:10px;font-weight:600;letter-spacing:.8px}
.hero-foot>span:last-child{font-size:8px;letter-spacing:1px}
.hero-stage{display:grid;grid-template-columns:15% 1fr 12%;grid-template-rows:70px minmax(495px,1fr) 100px;background:#fff;border-left:4px solid var(--black);min-width:0;position:relative}
.hero-stage>div{min-width:0}
.stage-blue{grid-column:1;grid-row:1;background:var(--ink);border-right:4px solid var(--black);border-bottom:4px solid var(--black)}
.stage-caption{grid-column:2/4;grid-row:1;display:flex;align-items:center;padding:15px 27px;border-bottom:4px solid var(--black);font-size:clamp(9px,1vw,13px);font-weight:700;letter-spacing:1.5px}
.stage-slogan{grid-column:1;grid-row:2;display:flex;align-items:center;justify-content:center;border-right:4px solid var(--black)}
.stage-slogan img{width:32px;height:auto;max-height:80%;object-fit:contain}
.stage-product{grid-column:2;grid-row:2;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;padding:25px 22px 12px}
.stage-product>img{width:auto;height:445px;max-width:100%;object-fit:contain}
.stage-product-label{position:absolute;right:18px;top:20px;font-size:7px;font-weight:600;letter-spacing:1px;writing-mode:vertical-rl}
.stage-side{grid-column:3;grid-row:2/4;display:grid;grid-template-rows:25% 1fr 20%;border-left:4px solid var(--black)}
.stage-side span:first-child{background:var(--yellow);border-bottom:4px solid var(--black)}
.stage-side span:last-child{background:var(--ink);border-top:4px solid var(--black)}
.stage-gold{grid-column:1;grid-row:3;background:var(--gold);border-top:4px solid var(--black);border-right:4px solid var(--black)}
.stage-bottom{grid-column:2;grid-row:3;border-top:4px solid var(--black);display:flex;justify-content:space-between;align-items:center;padding:12px 25px;gap:20px}
.stage-bottom>span{font-size:12px;line-height:1.6;letter-spacing:1px}
.stage-bottom>span b{font-size:19px}
.stage-bottom img{height:70px;width:98px;object-fit:contain}
.ticker{background:#fff;color:var(--ink);border-bottom:1px solid var(--black);gap:22px;font-size:12px;font-weight:600;padding:18px 5%}
.ticker .ticker-smile{width:27px;height:17px;object-fit:contain}
.ticker .ticker-en{font-size:12px;letter-spacing:2px}
.intro{background:white}
.intro-copy .lead{font-weight:600}
.intro-end{font-weight:600}
.flavor{background:#f5f7fb}
.flavor .art-art{border:2px solid var(--black)}
.art-art.amber{background:var(--gold)}
.jelly{background:linear-gradient(135deg,#ffe6b4,#d88c49);box-shadow:inset 4px 5px 9px #fff5,12px 15px 20px #7a440f18}
.art-art.amber>span{color:#fff3d7}
.art-art.fruit{background:var(--yellow)}
.fruit>span{color:#fff;font-size:62px}
.art-art.identity{background:#fff;padding:34px 22px}
.art-art.identity img{height:auto;width:100%;object-fit:contain}
.tags span{border-color:#bdcde1;color:#365176;background:#fff}
.fine{color:#5d6374}
.store-section{background:#fff;border-top:3px solid var(--black);border-bottom:3px solid var(--black)}
.store-photo{border-right:3px solid var(--black)}
.store-photo>span{color:var(--ink);border:1px solid var(--ink);font-weight:600}
.store-copy{position:relative;padding:80px 15% 80px 11%}
.store-copy .store-wordmark{position:absolute;top:38px;right:28px;width:24px;height:auto;object-fit:contain}
.support-grid article{border-top:2px solid var(--black)}
.support-grid article>span{color:#4d607b}
.support-grid h3{font-weight:700}
.brand-pattern{height:140px;overflow:hidden;background:#fff;border-top:3px solid var(--black);border-bottom:3px solid var(--black)}
.brand-pattern img{height:100%;width:100%;object-fit:cover;object-position:50% 49%}
.partner{background:var(--ink);color:white}
.partner .eyebrow{color:var(--yellow)}
.partner h2 span{color:var(--yellow)}
.partner-layout>div>p{color:#edf2fa}
.partner-list span{color:var(--yellow)}
.partner-list li{border-color:#ffffff55}
.steps li{border-top:2px solid var(--black)}
.steps li:before{background:var(--ink);border-radius:0;width:10px;height:10px;top:-6px}
.steps li>span{font-family:var(--sans);font-size:34px;font-weight:800;color:var(--ink)}
.faq{border-top:1px solid var(--line)}
.faq-list details[open]{background:#f5f7fb}
.faq-list details[open] p{padding-left:16px;padding-right:16px}
.faq-list details[open] summary{padding-left:16px;padding-right:16px}
.contact{position:relative;background:white;border-top:4px solid var(--black)}
.contact:before{position:absolute;content:'';top:0;left:0;right:0;height:12px;background:linear-gradient(to right,var(--ink) 0 25%,var(--gold) 25% 63%,var(--yellow) 63% 100%)}
.contact-intro{position:relative}
.contact-smiles{width:125px;height:auto;object-fit:contain;margin:-10px 0 24px}
.contact-note{border-color:var(--ink);margin-top:30px}
.contact-intro>p:not(.eyebrow){color:var(--body)}
#inquiry-form{padding-top:10px}
input,select,textarea{background:#f5f7fb;border-color:#b8c8dd;border-radius:0}
input:focus,select:focus,textarea:focus{outline-color:var(--ink)}
label em{color:var(--ink)}
.copy-button{background:var(--ink)}
footer{border-top:2px solid var(--black);background:white}
footer p{display:flex;flex-direction:column;gap:5px;text-align:center}
footer p strong{font-size:15px;letter-spacing:3px}
footer p span{font-size:9px;letter-spacing:1.4px}
footer .brand .logo-en{width:130px}
footer .brand .logo-zh{width:57px;margin-top:14px}
footer .logo-rule{margin-top:12px}
footer>span{color:var(--body)}
@media(min-width:1600px){.hero{min-height:760px}.hero-copy{padding-top:100px}.hero-stage{grid-template-rows:80px minmax(565px,1fr) 110px}.stage-product>img{height:510px}.stage-slogan img{width:37px}}
@media(max-width:1100px){.header{gap:20px;padding:0 4%}.brand{gap:10px}.brand .logo-en{width:125px}.brand .logo-zh{width:55px;margin-top:13px}.logo-rule{margin-top:13px;height:20px}.desktop-nav{gap:20px;font-size:13px}.hero-copy{padding:55px 7% 24px 8%}.hero h1{font-size:44px}.hero-foot>span:last-child{display:block;letter-spacing:.5px}.hero-stage{grid-template-columns:14% 1fr 10%;grid-template-rows:66px minmax(495px,1fr) 100px}.stage-caption{letter-spacing:1px;padding:12px 18px}.stage-slogan img{width:25px}.stage-product{padding:25px 15px 12px}.stage-product>img{height:425px}.stage-bottom{padding:12px 18px;gap:12px}.stage-bottom>span{font-size:10px}.stage-bottom>span b{font-size:15px}.stage-bottom img{height:58px;width:80px}.store-copy{padding-left:10%;padding-right:15%}.store-copy h2{font-size:30px}.contact-smiles{width:115px}.ticker .ticker-en{display:none}footer>p{display:none}}
@media(max-width:850px) and (min-width:721px){.header .brand .logo-zh,.header .logo-rule{display:none}.header .brand .logo-en{width:130px}.header{gap:15px}.desktop-nav{font-size:12px;gap:16px}.nav-cta{font-size:12px;padding:8px 14px}.hero h1{font-size:36px}.hero-desc{font-size:12px}.hero-foot{font-size:9px}.hero-foot>span:last-child{display:none}.hero-copy .eyebrow{font-size:8px}.hero-kicker{font-size:12px}.stage-product>img{height:410px}.stage-caption{font-size:8px}.stage-bottom img{height:48px;width:65px}.stage-bottom>span b{font-size:13px}.brand-pattern{height:105px}}
@media(max-width:720px){html{scroll-padding-top:85px}.header{height:74px;padding:0 6%;gap:13px;border-bottom:2px solid var(--black)}.header .brand{gap:9px}.header .brand .logo-en{width:106px}.header .brand .logo-zh{width:40px;margin-top:11px}.header .logo-rule{height:18px;margin-top:9px}.header .nav-cta{padding:8px 10px;font-size:11px}.header .nav-cta span{margin-left:5px}.menu-toggle{font-size:21px;color:var(--ink);padding:4px;flex-shrink:0}.mobile-nav{top:74px;background:white;border-bottom:2px solid var(--black)}.hero{min-height:0;border-bottom:3px solid var(--black)}.hero-copy{padding:41px 7% 23px}.hero-copy>.eyebrow{font-size:8px;letter-spacing:1.4px;margin-bottom:18px}.hero-kicker{font-size:12px;margin:12px 0 16px;letter-spacing:1.8px}.hero h1{font-size:clamp(34px,9.4vw,57px);line-height:1.5;letter-spacing:-.6px;margin-bottom:22px}.hero-desc{font-size:13px;margin-bottom:25px;line-height:2.1}.hero-foot{font-size:9px}.hero-foot>span:last-child{font-size:7px;display:block;letter-spacing:.7px}.hero-stage{border-left:0;border-top:3px solid var(--black);grid-template-columns:16% 1fr 12%;grid-template-rows:51px 375px 85px}.stage-blue,.stage-slogan{border-right-width:3px}.stage-blue,.stage-caption{border-bottom-width:3px}.stage-side{border-left-width:3px}.stage-side span:first-child{border-bottom-width:3px}.stage-side span:last-child{border-top-width:3px}.stage-gold{border-top-width:3px;border-right-width:3px}.stage-bottom{border-top-width:3px;padding:10px 20px}.stage-caption{font-size:9px;letter-spacing:.7px;padding:12px 20px}.stage-slogan img{width:27px}.stage-product{padding:22px 15px 12px}.stage-product>img{height:335px}.stage-product-label{font-size:6px;right:9px;top:18px}.stage-bottom>span{font-size:10px}.stage-bottom>span b{font-size:16px}.stage-bottom img{width:85px;height:60px}.ticker{padding:16px 7%;gap:17px;font-size:11px}.ticker .ticker-smile{width:22px;height:12px}.ticker .ticker-smile:nth-of-type(4){display:none}.ticker .ticker-en{display:none}.section{padding:63px 7%}h2{font-size:29px;letter-spacing:-.5px}.intro-copy .lead{font-size:18px}.art-art.identity{padding:40px 27px}.store-photo{border-right:0;border-bottom:3px solid var(--black);height:510px}.store-copy{padding:55px 13% 55px 7%}.store-copy .store-wordmark{width:21px;top:34px;right:20px}.store-copy h2{font-size:29px}.brand-pattern{height:90px;border-width:2px}.brand-pattern img{width:100%;object-fit:cover;object-position:25% 50%}.contact-smiles{width:105px;margin:0 0 26px}.contact{border-top-width:3px}.contact:before{height:9px}.contact-note{margin-top:25px}#inquiry-form{padding-top:0}footer{padding:30px 7%;gap:25px}footer .brand .logo-en{width:125px}footer .brand .logo-zh{width:53px}footer p{display:none}footer>span{font-size:9px}.support-grid p{color:var(--body)}}
@media(max-width:370px){.header .brand .logo-zh,.header .logo-rule{display:none}.header .brand .logo-en{width:116px}.header .nav-cta{padding:8px 11px}.stage-caption{font-size:8px;padding:10px 16px}.stage-bottom{padding:10px 15px;gap:8px}.stage-bottom>span{font-size:9px}.stage-bottom>span b{font-size:14px}.stage-bottom img{width:65px;height:50px}.hero-stage{grid-template-rows:48px 340px 80px}.stage-product>img{height:305px}.hero-desc{font-size:12px}.ticker{gap:13px}}

/* Franchise application and FAQ */
.faq-word{display:block;font-size:clamp(58px,7vw,98px);line-height:1.1;font-weight:850;letter-spacing:-5px;margin:24px 0;color:var(--ink)}
.faq-intro h2{font-size:clamp(27px,2.7vw,38px)}
.faq-list summary{align-items:flex-start;gap:15px;font-weight:600;line-height:1.8}
.faq-list summary b{font-weight:600;flex:1}
.faq-list .faq-number{font-size:12px;letter-spacing:1px;background:var(--yellow);padding:3px 7px;margin-top:2px;flex-shrink:0;line-height:1.8}
.faq-list summary>span{flex-shrink:0;transition:transform .25s ease;margin-top:3px}
.faq-list details{transition:background .25s ease}
.faq-list details[open]{border-top:2px solid var(--ink);background:#f5f7fb}
.faq-list details[open] p{padding:0 18px 0 16px}
.faq-list details[open] .faq-answer{animation:answer-in .35s ease both}
.faq-form-link{display:flex;align-items:center;gap:16px;width:fit-content;margin-top:17px;font-weight:700;color:var(--ink);border-bottom:1px solid currentColor}
.contact{align-items:center}
.contact-card{background:#f5f7fb;border:2px solid var(--ink);padding:38px;box-shadow:9px 9px 0 var(--gold)}
.contact-card h3{font-size:29px;line-height:1.6;margin:16px 0}
.contact-card>p:not(.eyebrow){font-size:14px;line-height:2;color:var(--body)}
.contact-next{list-style:none;margin:25px 0 30px;padding:0}
.contact-next li{padding:12px 0;border-bottom:1px solid var(--line);display:flex;gap:16px;font-size:14px}
.contact-next span{font-size:12px;font-weight:700}
.contact-card .external-note{font-size:11px!important;text-align:center;margin:12px 0 0}
.nav-cta,.button{transition:transform .3s cubic-bezier(.2,.8,.3,1.4),background .2s}
.nav-cta:hover,.button:hover{transform:translateY(-3px) scale(1.015)}
.nav-cta:active,.button:active{transform:scale(.97)}
.scroll-reveal{opacity:0;transform:translateY(30px) scale(.97);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.25,1.18);transition-delay:var(--reveal-delay,0ms)}
.scroll-reveal.is-visible,.scroll-reveal:focus-within{opacity:1;transform:translateY(0) scale(1)}
@keyframes answer-in{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:720px){.faq{gap:32px}.faq-word{font-size:66px;margin:14px 0 20px}.faq-list summary{font-size:15px;gap:10px}.faq-list details[open] summary{padding-left:10px;padding-right:10px}.contact{gap:35px}.contact-card{padding:25px 22px;box-shadow:6px 6px 0 var(--gold)}.contact-card h3{font-size:25px}.contact-card .button{font-size:14px;padding:15px 18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scroll-reveal{opacity:1!important;transform:none!important;transition:none!important}.faq-list details[open] .faq-answer{animation:none}.nav-cta,.button,.faq-list summary>span{transition:none}.nav-cta:hover,.button:hover{transform:none}}
@media print{.scroll-reveal{opacity:1!important;transform:none!important}}

/* User-supplied product and storefront photography. */
.flavor .feature-photo{padding:0;background:#fff}
.feature-photo img{display:block;width:100%;height:100%;object-fit:cover}
.honey-jelly-scene img{object-position:50% 69%}
.apple-tea-scene img{object-position:50% 51%}
.store-sign-scene img{object-position:50% 48%}

/* 2026 brand marketing portfolio */
.marketing{background:#f5f7fb;border-bottom:2px solid var(--black)}
.marketing-lead{display:flex;align-items:center;gap:45px;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:30px 0;margin:35px 0}
.marketing-year{font-size:clamp(58px,7vw,96px);font-weight:850;letter-spacing:-5px;line-height:1;color:var(--ink)}
.marketing-lead p{font-size:16px;line-height:2;color:var(--body);margin:0}
.marketing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.marketing-card{background:white;border:1px solid var(--line);border-top:4px solid var(--ink);padding:26px;display:flex;flex-direction:column}
.marketing-card:nth-child(2),.marketing-card:nth-child(5){border-top-color:var(--gold)}
.marketing-card:nth-child(3),.marketing-card:nth-child(6){border-top-color:var(--yellow)}
.marketing-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:10px;letter-spacing:.4px}
.marketing-meta>span{font-weight:700;background:#f0f4fa;padding:5px 8px}
.marketing-meta time{color:#5a6170}
.marketing-card h3{font-size:20px;line-height:1.6;margin:22px 0 13px}
.marketing-card>p{font-size:14px;line-height:2;color:var(--body);margin:0 0 25px}
.marketing-card>a{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;font-weight:600;border-top:1px solid var(--line);padding-top:17px;margin-top:auto}
.marketing-card>a:hover{text-decoration:underline;text-underline-offset:4px}
.marketing-planned{display:flex;gap:25px;align-items:flex-start;padding:30px;margin-top:25px;border:1px dashed var(--ink);background:#fff5e9}
.planned-badge{flex-shrink:0;font-size:11px;padding:6px 11px;background:var(--gold);font-weight:700}
.marketing-planned h3{font-size:22px;margin:0 0 9px}.marketing-planned p{font-size:14px;line-height:1.9;margin:0 0 9px;color:var(--body)}
.marketing-planned small{font-size:11px;line-height:1.8;color:#666}.planned-arrow{margin-left:auto;font-size:36px}
.marketing-note{font-size:11px;line-height:1.9;color:#616778;margin:20px 0 0}
.desktop-nav{gap:22px}.header{gap:22px}
@media(max-width:1100px){.desktop-nav{gap:13px;font-size:12px}.header{gap:15px}.marketing-grid{gap:16px}.marketing-card{padding:22px}.marketing-card h3{font-size:18px}}
@media(max-width:850px) and (min-width:721px){.desktop-nav{gap:10px;font-size:11px}.header .brand .logo-en{width:110px}.header{gap:10px}.marketing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.marketing-lead{align-items:flex-start;gap:20px;flex-direction:column;padding:25px 0;margin:28px 0}.marketing-year{font-size:64px}.marketing-lead p{font-size:14px}.marketing-grid{grid-template-columns:1fr}.marketing-card{padding:24px}.marketing-card h3{font-size:21px}.marketing-planned{flex-direction:column;gap:15px;padding:24px}.planned-arrow{display:none}.header{gap:13px}}

.investment{padding:0 16px 24px}.faq-list details[open] .investment p{padding:0;margin:0 0 18px}.investment-label{font-weight:700;letter-spacing:1px}.faq-list details[open] .investment .investment-price{color:var(--ink);font-size:21px;line-height:1.3;padding:18px 0;border-bottom:3px solid var(--gold)}.investment-price strong{font-size:52px;letter-spacing:-1px}.investment ul{list-style:none;padding:0;margin:0 0 20px;display:grid;grid-template-columns:1fr 1fr;gap:18px}.investment li{border-top:1px solid var(--line);padding-top:14px}.investment li strong{display:block;font-size:14px;margin-bottom:6px}.investment li span{display:block;font-size:13px;line-height:1.9;color:var(--body)}.faq-list details[open] .investment .investment-note{font-size:11px;color:#616778;margin-bottom:0}@media(max-width:480px){.investment ul{grid-template-columns:1fr;gap:12px}.investment-price strong{font-size:44px}}

.marketing-history{margin-top:56px;padding-top:36px;border-top:2px solid var(--ink)}.history-heading{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:26px}.history-heading h3{font-size:clamp(24px,2.5vw,32px);line-height:1.5;margin:10px 0 0}.history-heading>p{font-size:14px;line-height:1.9;color:var(--body);margin:0}.marketing-history .marketing-card{background:#fffaf0}@media(max-width:720px){.history-heading{display:block}.history-heading>p{margin-top:16px}.marketing-history{margin-top:36px;padding-top:26px}}