@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap";*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;font-family:DM Sans,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline-offset:4px;outline:2px solid}.portfolio-return{z-index:100;color:#fff;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#111e;border:1px solid #7778;border-radius:30px;padding:10px 15px;font-size:10px;position:fixed;bottom:20px;left:20px}.credit{opacity:.65;font-size:10px;line-height:1.8}.credit a{text-decoration:underline}dialog{border:1px solid #666;border-radius:12px;width:90%;max-width:500px;padding:35px}dialog::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0009}dialog .close{float:right;background:0 0;border:0;font-size:20px}dialog h2{font-size:28px}dialog p{line-height:1.7}.revealed{animation:.9s both in}@keyframes in{0%{opacity:0;transform:translateY(25px)}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}:root{--pink:#f5cfce;--ink:#60293c;--flavour:#f0a6ae}body{background:var(--pink);color:var(--ink)}header{z-index:5;justify-content:space-between;align-items:center;width:100%;padding:28px 5%;display:flex;position:absolute;top:0}.logo{letter-spacing:-5px;font-size:52px;font-weight:800;line-height:1}.logo span{letter-spacing:0;vertical-align:top;margin-left:7px;font-size:10px}nav{gap:35px;font-size:11px;display:flex}header button{color:inherit;background:0 0;border:1px solid #60293c55;border-radius:30px;padding:12px 17px;font-size:10px}header button span{margin-left:12px}.hero{height:100svh;min-height:780px;max-height:1100px;padding:145px 5% 35px;position:relative;overflow:hidden}.eyebrow{letter-spacing:1.5px;z-index:2;text-align:center;font-size:8px;display:block;position:relative}.hero h1{text-align:center;letter-spacing:-8px;z-index:1;margin:35px 0;font-size:clamp(75px,10.5vw,170px);font-weight:800;line-height:.9;position:relative}.hero h1 em{font-family:Georgia;font-weight:400}.can-scene{z-index:2;pointer-events:none;position:absolute;inset:230px 0 70px}.can-scene canvas,.single-can canvas{width:100%;height:100%;display:block}.scene-loading{letter-spacing:2px;font-size:9px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hero-bottom{z-index:3;justify-content:space-between;align-items:end;display:flex;position:absolute;bottom:35px;left:5%;right:5%}.hero-bottom p{margin:0;font-size:12px;line-height:1.8}.hero-bottom>span{letter-spacing:1px;font-size:7px}.pill{background:var(--ink);color:#fff5e8;border:0;border-radius:35px;justify-content:space-between;gap:40px;padding:17px 25px;font-size:12px;display:inline-flex}.fruit{opacity:.6;z-index:0;font-size:130px;position:absolute}.fruit-1{color:#bf5973;top:35%;left:7%;transform:rotate(-12deg)}.fruit-2{color:#b94c68;top:62%;right:10%;transform:rotate(25deg)}.marquee{color:var(--pink);white-space:nowrap;letter-spacing:-.5px;text-align:center;background:#60293c;padding:25px;font-size:21px;font-weight:600;overflow:hidden}.marquee span{margin:0 45px}.story{text-align:center;background:#fff5e8;padding:100px 6%}.story>span,.flavour-top,.big-statement>span,.questions>span{letter-spacing:1.5px;font-size:8px}h2{letter-spacing:-4px;margin:35px 0;font-size:clamp(45px,6vw,90px);font-weight:600;line-height:1}h2 em{letter-spacing:-.055em;font-family:Georgia;font-weight:400}.story>p{color:#926d6b;font-size:13px;line-height:1.9}.values{grid-template-columns:repeat(3,1fr);gap:50px;margin-top:75px;display:grid}.values b{font-size:50px;font-weight:400}.values h3{letter-spacing:-1px;font-size:25px;font-weight:600}.values p{color:#926d6b;font-size:12px;line-height:1.8}.flavours{background:var(--flavour);padding:35px 6% 70px;transition:background .6s,color .6s}.flavour-top{justify-content:space-between;display:flex}.flavour-layout{grid-template-columns:1.2fr 1fr;align-items:center;gap:10%;margin-top:40px;display:grid}.single-can{height:570px;position:relative}.single-can:before{content:"";background:#fff2;border-radius:50%;position:absolute;inset:10% 0}.single-can canvas{position:relative}.orbit-text{letter-spacing:3px;white-space:nowrap;font-size:8px;position:absolute;bottom:25px;left:50%;transform:translate(-50%)}.flavour-info>span{letter-spacing:1px;font-size:8px}.flavour-info h2{letter-spacing:-5px;margin:25px 0;font-size:80px;font-weight:800}.flavour-info>p{max-width:350px;font-size:13px;line-height:1.9}.flavour-switches{gap:15px;margin:25px 0;display:flex}.flavour-switches button{background:0 0;border:1px solid #0000;border-radius:50%;width:42px;height:42px;padding:4px;font-size:28px;line-height:1}.flavour-switches button.active{border-color:currentColor}.flavour-switches button:first-child{color:#933b5b}.flavour-switches button:nth-child(2){color:#e0ea70}.flavour-switches button:nth-child(3){color:#8971bd}.flavour-switches button:nth-child(4){color:#da5c6b}.flavour-switches button:nth-child(5){color:#efad8c}.pack{border-top:1px solid #60293c55;justify-content:space-between;align-items:center;max-width:360px;padding:20px 0;display:flex}.pack span{letter-spacing:1px;font-size:8px}.pack b{font-size:22px;font-weight:500}#add-bag{width:100%;max-width:360px}.flavour-info>small{opacity:.7;margin-top:16px;font-size:8px;display:block}.big-statement{text-align:center;color:#384c27;background:#b9c784;padding:90px 5%}.big-statement h2{margin:40px 0;font-size:clamp(65px,8.5vw,135px)}.big-statement .pill{background:#384c27;margin-top:15px}.questions{max-width:1000px;margin:auto;padding:90px 7%}.questions h2{margin-bottom:50px}.questions details{border-top:1px solid #60293c55;padding:22px 0}.questions summary{cursor:pointer;font-size:15px}.questions p{max-width:650px;font-size:12px;line-height:1.8}.closing{text-align:center;color:var(--pink);background:#60293c;padding:70px 5%}.closing .logo{letter-spacing:-12px;font-size:130px}.closing h2{letter-spacing:-1.5px;font-size:35px}.closing>a:last-child{border-bottom:1px solid;padding-bottom:7px;font-size:12px}footer{justify-content:space-between;gap:20px;padding:25px 5%;font-size:8px;display:flex}dialog{color:#60293c;background:#fff5e8}.bag-row{border-top:1px solid #ddd;justify-content:space-between;align-items:center;gap:15px;padding:15px 0;font-size:12px;display:flex}.bag-row button{width:25px;height:25px;color:inherit;background:0 0;border:1px solid #aaa;border-radius:50%}.bag-row span{font-size:10px}.bag-row>div{align-items:center;gap:10px;display:flex}#bag-total{margin:25px 0;font-size:18px}#checkout-status{font-size:12px}dialog>small{font-size:9px}dialog .pill{width:100%}@media (width<=650px){header{padding:24px 5%}.logo{letter-spacing:-4px;font-size:39px}nav{display:none}.hero{min-height:780px;max-height:900px;padding-top:135px}.eyebrow{letter-spacing:1px;font-size:6px}.hero h1{letter-spacing:-4px;margin-top:30px;font-size:16vw}.can-scene{inset:270px -10% 135px}.fruit{font-size:75px}.fruit-1{top:43%;left:3%}.fruit-2{top:65%;right:5%}.hero-bottom{align-items:center;gap:15px;bottom:30px}.hero-bottom p{font-size:10px}.hero-bottom>span{display:none}.hero-bottom .pill{gap:15px;padding:14px 18px;font-size:10px}.marquee{padding:20px;font-size:16px}.marquee span{margin:0 25px}.story{padding:65px 6%}h2{letter-spacing:-2px;font-size:43px}.story>p{font-size:12px}.values{grid-template-columns:1fr;gap:30px;margin-top:45px}.values h3{margin:18px 0;font-size:25px}.values b{font-size:40px}.flavours{padding:25px 6% 55px}.flavour-top{gap:25px;font-size:6px;line-height:1.7}.flavour-top>span:last-child{text-align:right;max-width:130px}.flavour-layout{grid-template-columns:1fr;gap:20px;margin-top:10px}.single-can{height:400px}.single-can:before{inset:5% 0}.flavour-info h2{letter-spacing:-4px;font-size:64px}.flavour-info>p{font-size:12px}.flavour-info>span{font-size:7px}.flavour-switches{gap:12px}.pack,#add-bag{max-width:none}.big-statement{padding:65px 5%}.big-statement h2{letter-spacing:-3px;font-size:15vw}.questions{padding:65px 6%}.questions summary{font-size:13px;line-height:1.6}.closing .logo{font-size:100px}.closing h2{font-size:29px}footer{flex-wrap:wrap;justify-content:center;font-size:7px}footer>span{text-align:center;order:3;width:100%}}
