@font-face{font-family:Space;src:url('assets/space-grotesk-bold.ttf');font-display:swap}@font-face{font-family:DM;src:url('assets/dm-sans-regular.ttf');font-display:swap}:root{--navy:#17203b;--lime:#d5f34b;--cream:#faf7ef;--pink:#f6afd0}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px;overflow-x:clip}body{margin:0;background:var(--cream);color:var(--navy);font-family:DM,Arial,sans-serif}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #ed487f;outline-offset:5px}h1,h2,h3,p{margin:0}header{position:absolute;top:0;left:0;width:100%;height:100px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;z-index:10}.brand{font-family:Space,Arial;font-size:37px;font-weight:bold;white-space:nowrap}.brand span{font-family:DM;font-size:14px;vertical-align:top;display:inline-block;margin:8px 0 0 4px}nav{display:flex;gap:32px;font-size:14px}nav a:hover{text-decoration:underline;text-underline-offset:6px}.bag{border:1px solid #17203b50;background:transparent;color:var(--navy);border-radius:30px;padding:12px 16px;font-size:14px}.bag span{background:var(--navy);color:var(--lime);border-radius:50%;display:inline-grid;place-items:center;width:24px;height:24px;margin-left:14px}.hero{position:relative;isolation:isolate;height:max(820px,100svh);max-height:1150px;overflow:hidden;background:var(--lime)}.hero-label{position:absolute;top:134px;left:0;width:100%;text-align:center;font-size:12px;font-weight:bold;letter-spacing:2px}h1{position:absolute;z-index:1;top:178px;width:100%;text-align:center;font-family:Space,Arial;font-size:clamp(85px,12.9vw,195px);line-height:.92}h1 span{font-size:.84em}.drink-wrap{position:absolute;z-index:3;inset:12% 19% -4%;pointer-events:none;perspective:1000px;will-change:transform}.drink-wrap img{height:100%;width:100%;object-fit:contain;filter:drop-shadow(10px 35px 20px #34432124);animation:entrance 1.3s cubic-bezier(.2,.7,.3,1) both}#atmosphere{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}.hero-side{position:absolute;left:6%;bottom:130px;z-index:5;max-width:200px}.tiny{font-size:12px;letter-spacing:1.5px;font-weight:bold}.hero-side strong{font-family:Space;font-size:48px;line-height:.98;display:block;margin-top:18px}.hero-side em{font-family:Georgia;font-weight:normal}.hero-side p{margin-top:18px;font-size:14px;line-height:1.5}.hero-buy{position:absolute;right:5%;bottom:130px;z-index:5}.hero-buy p{font-size:17px;line-height:1.4;margin:0 0 18px 8px}.button{display:inline-flex;justify-content:space-between;align-items:center;gap:36px;border:0;background:var(--navy);color:var(--cream);padding:20px 25px;border-radius:40px;font-size:14px;font-weight:bold;transition:transform .25s,background .25s}.button:hover{transform:translateY(-4px);background:#313f64}.button span{font-size:21px;line-height:1}.hero-foot{position:absolute;z-index:6;bottom:26px;left:4%;right:4%;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #17203b35;padding-top:22px;font-size:11px;letter-spacing:1px}.hero-foot button{font-size:11px;border:0;background:transparent;color:inherit;padding:0}.serving-note{position:absolute;z-index:5;right:3%;top:52%;font-size:10px;writing-mode:vertical-rl;opacity:.65}.marquee{background:var(--navy);color:var(--lime);overflow:hidden;padding:24px 0;font-family:Space;font-size:25px;transform:rotate(-1.5deg);margin:-18px -2% 0;position:relative;z-index:7;width:104%}.marquee div{width:max-content;animation:marquee 28s linear infinite}.marquee span{margin:0 45px;color:var(--pink)}.flavours{padding:100px 5% 80px;overflow:hidden}.section-head{position:relative;margin-bottom:40px}.section-head h2{font-family:Space;font-size:clamp(42px,6.6vw,94px);line-height:.98;margin-top:25px}.section-head h2 em{font-family:Georgia;font-weight:normal}.section-head p{position:absolute;right:3%;bottom:7px;font-size:16px;line-height:1.7}.flavour-tabs{display:flex;border-bottom:1px solid #17203b25;margin:35px 0 0;gap:40px}.flavour-tabs button{border:0;border-bottom:4px solid transparent;background:transparent;padding:20px 3px;color:#6d7180;font-size:16px}.flavour-tabs button[aria-selected=true]{color:var(--navy);border-bottom-color:var(--navy)}.flavour-stage{position:relative;display:grid;grid-template-columns:1fr 1.12fr;min-height:610px;background:#264b38;color:#e8f6c6;padding:65px 6%;overflow:hidden;transition:background .6s,color .6s}.flavour-copy{position:relative;z-index:3}.flavour-copy h3{font-family:Space;font-size:clamp(45px,5.8vw,83px);line-height:.98;margin:24px 0}.flavour-copy p{font-size:16px;line-height:1.7;max-width:340px;opacity:.85}.product-meta{display:flex;gap:35px;font-size:13px;margin:22px 0}.light{background:var(--cream);color:var(--navy)}.light:hover{background:#fff}.pack-scene{position:relative;display:grid;place-items:center;min-height:480px;perspective:800px}.pack-scene img{height:420px;width:90%;object-fit:contain;position:relative;z-index:2;transform:rotate(10deg);filter:drop-shadow(0 22px 20px #0004);animation:packFloat 6s ease-in-out infinite}.pack-word{position:absolute;top:42%;font-family:Space;font-size:clamp(65px,8vw,120px);opacity:.14;transform:rotate(-90deg);white-space:nowrap}.pack-caption{position:absolute;bottom:0;font-size:10px;letter-spacing:2px}.flavour-index{position:absolute;right:24px;bottom:20px;display:flex;align-items:center;gap:10px;font-size:12px}.flavour-index #current-index{font-size:22px}.flavour-index button{width:40px;height:40px;border:1px solid currentColor;border-radius:50%;background:none;color:inherit;font-size:20px;margin-left:10px}.ritual{min-height:840px;background:var(--pink);position:relative;padding:85px 6%;overflow:hidden}.ritual-title{position:relative;z-index:2}.ritual h2{font-family:Space;font-size:clamp(68px,9vw,134px);line-height:.85;margin-top:30px}.ritual h2 span{color:#fff4ec}.ritual h2 em{font-family:Georgia;font-weight:normal}.ritual-visual{position:absolute;inset:0 7% 0 29%;pointer-events:none}.ritual-visual img{width:100%;height:100%;object-fit:contain;transform:rotate(13deg)}.round-note{position:absolute;right:4%;top:10%;background:var(--lime);border-radius:50%;width:132px;height:132px;display:grid;place-content:center;text-align:center;font-size:13px;line-height:1.4;transform:rotate(12deg)}.ritual-copy{position:absolute;right:6%;bottom:60px;max-width:280px;z-index:3}.ritual-copy p{font-size:17px;line-height:1.6;margin-bottom:16px}.text-link{display:inline-block;border-bottom:1px solid;padding-bottom:8px;font-size:14px}.business{background:var(--navy);color:var(--lime);padding:65px 6% 80px}.business-top{display:flex;justify-content:space-between;font-size:11px}.business h2{font-family:Space;font-size:clamp(50px,8.1vw,120px);line-height:1;margin:65px 0 45px}.business h2 em{font-family:Georgia;color:var(--cream);font-weight:normal}.business-bottom{display:flex;justify-content:space-between;align-items:end}.business p{color:var(--cream);font-size:17px;line-height:1.7}.business .button{background:var(--lime);color:var(--navy)}footer{padding:45px 5%;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}footer p{font-size:14px}footer>span{font-size:11px;opacity:.6}footer>a:last-child{font-size:12px}.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s}.reveal.visible{opacity:1;transform:none}dialog{border:0;border-radius:8px;padding:32px;width:min(470px,90vw);color:var(--navy);background:var(--cream);box-shadow:0 30px 100px #0005}dialog::backdrop{background:#17203b99;backdrop-filter:blur(7px)}.dialog-top{display:flex;align-items:center;justify-content:space-between}.dialog-top button{background:none;border:0;font-size:30px;color:inherit}dialog h2{font-family:Space;font-size:42px;margin:20px 0}#basket-items p{padding:15px 0;border-bottom:1px solid #17203b25;line-height:1.4}.basket-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid #17203b25}.basket-row button{border:0;background:none;color:inherit;text-decoration:underline;font-size:12px}.demo-note{font-size:13px;line-height:1.5;margin:25px 0;opacity:.7}#toast{position:fixed;z-index:30;left:50%;bottom:25px;transform:translate(-50%,100px);border-radius:30px;background:var(--navy);color:white;padding:16px 24px;font-size:13px;transition:transform .3s;white-space:nowrap}#toast.show{transform:translate(-50%,0)}.paused *{animation-play-state:paused!important}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes packFloat{50%{transform:translateY(-12px) rotate(5deg)}}@keyframes entrance{from{opacity:0;transform:translateY(100px) rotate(-15deg) scale(.8)}to{opacity:1;transform:none}}
@media(max-width:800px){header{height:78px;padding:0 6%}.brand{font-size:28px}nav{display:none}.bag{font-size:12px;padding:8px 12px}.hero{height:920px;max-height:none}.hero-label{top:110px;font-size:10px}h1{top:148px;font-size:14vw;line-height:1}h1 span{font-size:.82em}.drink-wrap{inset:25% -12% 14%}.hero-side{left:6%;bottom:145px;max-width:155px}.hero-side .tiny{font-size:9px}.hero-side strong{font-size:34px;margin-top:10px}.hero-side p{display:none}.hero-buy{right:6%;bottom:120px;max-width:195px}.hero-buy p{font-size:14px}.button{padding:16px 20px;font-size:13px;gap:20px}.hero-foot{left:6%;right:6%;font-size:9px;letter-spacing:0}.hero-foot button{font-size:10px}.hero-foot>span{display:none}.serving-note{top:47%;font-size:9px}.marquee{font-size:19px;padding:18px 0}.flavours{padding:70px 6% 55px}.section-head h2{font-size:46px}.section-head p{position:static;font-size:15px;margin-top:25px}.flavour-tabs{gap:0;justify-content:space-between}.flavour-tabs button{font-size:13px;padding:17px 0}.flavour-stage{grid-template-columns:1fr;padding:35px 7%;min-height:970px}.flavour-copy h3{font-size:52px}.flavour-copy p{font-size:15px}.product-meta{font-size:12px;gap:20px}.pack-scene{min-height:405px;margin-top:25px}.pack-scene img{height:340px}.pack-word{font-size:80px}.pack-caption{bottom:5px;font-size:8px}.flavour-index{bottom:10px;right:12px}.flavour-index button{width:33px;height:33px}.ritual{min-height:1130px;padding:65px 6%}.ritual h2{font-size:85px}.ritual-visual{inset:280px -15% 135px 5%}.round-note{width:100px;height:100px;font-size:10px;right:20%;top:5%}.ritual-copy{bottom:45px;left:6%;right:6%;max-width:none}.ritual-copy p{font-size:15px}.business{padding:45px 6% 55px}.business-top{display:block}.business-top>span:last-child{display:block;margin-top:15px;font-size:9px}.business h2{font-size:50px;margin:45px 0 30px}.business-bottom{display:block}.business p{font-size:15px;margin-bottom:25px}footer{padding:35px 6%;gap:20px}footer p{font-size:12px}footer>span{width:100%;order:4;font-size:10px}.tiny{font-size:10px}}
@media(max-width:800px){.flavour-copy h3{font-size:43px}}
/* Keep all readable copy outside the moving artwork's bounds. */
.hero-label{left:6%;top:150px;width:46%;text-align:left}
h1{left:6%;top:195px;width:46%;text-align:left;font-size:clamp(72px,7.6vw,118px);line-height:1.04;z-index:5}
h1 span{font-size:.7em;white-space:nowrap}
.drink-wrap{inset:115px 1% 75px 53%}
#atmosphere{left:53%;width:47%}
.hero-side{left:6%;bottom:145px;max-width:180px}
.hero-side strong{font-size:40px}
.hero-buy{left:27%;right:auto;bottom:155px;max-width:250px}
.hero-buy p{margin-left:0}
.ritual{display:grid;grid-template-columns:32% 43% 25%;align-items:center;gap:0;min-height:850px}
.ritual-title{align-self:start}.ritual h2{font-size:clamp(64px,7.2vw,106px)}
.ritual-visual{position:relative;inset:auto;height:660px}.ritual-visual img{transform:none}
.round-note{right:0;top:0;width:112px;height:112px;font-size:11px}
.ritual-copy{position:relative;right:auto;bottom:auto;max-width:none;padding-left:20px;align-self:end}
@media(min-width:801px) and (max-width:1100px){.hero-buy{left:26%;max-width:220px}.hero-side strong{font-size:35px}.hero-buy .button{padding:17px;gap:14px;font-size:12px}.hero-buy p{font-size:15px}.ritual-copy p{font-size:15px}}
@media(max-width:800px){.hero-label{left:6%;top:112px;width:88%;text-align:center}h1{left:6%;top:150px;width:88%;text-align:center;font-size:14vw;line-height:1.04}.drink-wrap{inset:275px 4% 190px}#atmosphere{left:0;top:275px;width:100%;height:455px}.hero-side{display:none}.hero-buy{left:6%;right:6%;bottom:105px;max-width:none;text-align:center}.hero-buy p{display:none}.hero-buy .button{min-width:220px}.ritual{display:flex;flex-direction:column;align-items:stretch;padding:60px 6%;min-height:0}.ritual h2{font-size:76px}.ritual-visual{height:520px;margin:-20px 0 0 12%}.round-note{right:0;top:10%;width:100px;height:100px;font-size:10px}.ritual-copy{padding:20px 0 0;align-self:stretch}.serving-note{top:47%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* Commercial beverage presentation layer */
:root{--navy:#11131b;--lime:#d8f35a;--cream:#fbf4e7;--pink:#b9785c;--copper:#d69254;--ink:#f8f1e7}
body{background:var(--navy);color:var(--ink)}header{color:var(--ink);background:linear-gradient(#11131bcc,transparent);height:112px}.brand span{color:var(--copper)}nav a:hover{text-decoration-color:var(--copper)}.bag{color:var(--ink);border-color:#f8f1e755}.bag span{background:var(--copper);color:var(--navy)}
.header-actions{display:flex;align-items:center;gap:20px}.demo-link{font-size:13px;border-bottom:1px solid var(--copper);padding-bottom:4px;color:var(--ink)}
.hero{background:radial-gradient(circle at 72% 42%,#77523d 0,#332b2b 25%,#11131b 63%);color:var(--ink)}.hero:after{content:'HAI CHAI';position:absolute;right:5%;top:34%;font-family:Space;font-size:clamp(70px,11vw,170px);writing-mode:vertical-rl;color:#ffffff0d;z-index:0}.hero-label{color:var(--copper)}h1{color:var(--ink);text-shadow:0 6px 25px #0006}h1 span{color:var(--copper)}.hero-side strong{color:var(--ink)}.hero-side em{color:var(--copper)}.hero-side p,.hero-buy p{color:#f8f1e7cc}.hero-buy .button{background:var(--copper);color:var(--navy)}.hero-buy .button.outline{background:#ffffff12;color:var(--ink);border:1px solid #f8f1e755}.hero-foot{border-color:#f8f1e73b;color:#f8f1e7cc}.serving-note{color:#f8f1e799}.marquee{background:var(--copper);color:var(--navy)}.marquee span{color:var(--navy)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:#1c202b;color:var(--ink);border-top:1px solid #ffffff12;border-bottom:1px solid #ffffff12}.stats div{padding:26px 7%;border-right:1px solid #ffffff12}.stats div:last-child{border:0}.stats strong{display:block;font:46px/1 Space;color:var(--copper)}.stats strong span{font-family:DM;font-size:20px}.stats small{display:block;margin-top:8px;font-size:10px;letter-spacing:1.5px;color:#f8f1e799}
.flavours{background:#11131b;color:var(--ink)}.section-head p{color:#f8f1e7aa}.flavour-tabs{border-color:#ffffff20}.flavour-tabs button{color:#f8f1e799}.flavour-tabs button[aria-selected=true]{color:var(--copper);border-color:var(--copper)}.flavour-stage{background:#2b211d;color:var(--ink)}.light{background:var(--copper);color:var(--navy)}.product-meta{color:#f8f1e7aa}
.ritual{background:#3b2625;color:var(--ink)}.ritual h2 span{color:var(--copper)}.round-note{background:var(--lime);color:var(--navy)}.business{background:#0b0d13;color:var(--copper)}.business h2 em{color:var(--ink)}.business p{color:#f8f1e7cc}.business .button{background:var(--copper);color:var(--navy)}footer{background:#11131b;color:var(--ink)}footer .brand{color:var(--ink)}
dialog{background:#1c202b;color:var(--ink)}dialog::backdrop{background:#08090dcc}.dialog-top button{color:var(--ink)}dialog h2 em{color:var(--copper)}.demo-note{color:#f8f1e799}
@media(max-width:800px){header{height:82px}.header-actions{gap:8px}.demo-link{display:none}.stats{grid-template-columns:repeat(2,1fr)}.stats div{padding:22px 7%}.stats strong{font-size:36px}.stats small{font-size:9px}.hero:after{right:1%;top:33%;font-size:56px}}