@font-face{font-family:Anton;src:url('assets/anton.ttf') format('truetype');font-display:swap}@font-face{font-family:DM;src:url('assets/dm-sans.ttf') format('truetype');font-display:swap}
:root{--cream:#fff2d7;--ink:#241a13;--accent:#ff641d;--accent-dark:#a6350c;--accent-light:#ffc76b;--can-image:url('assets/duo-can-mandarine-v1.webp');--world-image:url('assets/world-mandarine.webp');--tint:0deg;--pointer-x:0;--pointer-y:0}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:DM,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid currentColor;outline-offset:6px}button{touch-action:manipulation}::selection{background:var(--ink);color:var(--cream)}img{max-width:100%;display:block}.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link:focus{position:fixed;z-index:60;top:10px;left:10px;background:var(--cream);padding:15px}.eyebrow{font-size:10px;font-weight:bold;letter-spacing:.13em;line-height:1.5;margin:0 0 25px}
.header{position:absolute;left:4%;right:4%;top:0;z-index:30;color:var(--cream);height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #fff2d744}.wordmark{font:48px/1 Anton,sans-serif;letter-spacing:-2.5px;transform:rotate(-6deg);display:inline-block;text-shadow:0 2px 10px #40200010}.wordmark span{font:12px DM;vertical-align:top;letter-spacing:0;margin-left:3px}.header-note{font-size:10px;letter-spacing:.15em}.header nav{display:flex;align-items:center;gap:30px;font-size:10px;font-weight:bold}.header nav>a{display:flex;gap:17px;align-items:center}.header nav>a>span{font-size:25px}.sound-button{background:none;border:0;color:inherit;display:flex;align-items:center;gap:9px;font-size:9px;padding:15px 0}.sound-bars{display:flex;gap:3px;height:14px;align-items:center}.sound-bars i{width:2px;height:4px;background:currentColor}.sound-bars i:nth-child(2){height:12px;animation-delay:.2s!important}.sound-bars i:nth-child(3){height:8px;animation-delay:.4s!important}.sound-button[aria-pressed=true] i{animation:sound .65s ease-in-out infinite alternate}
.hero{height:100svh;min-height:800px;max-height:1300px;position:relative;background:var(--accent);isolation:isolate;overflow:clip;color:var(--cream);--hero-exit:0}.worlds{position:absolute;inset:-3%;z-index:-3;transform:translate3d(calc(var(--pointer-x)*-12px),calc(var(--pointer-y)*-9px),0) scale(calc(1 + var(--hero-exit)*.08));will-change:transform}.world{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .8s ease,transform 1.5s cubic-bezier(.2,.7,.2,1)}.world.active{opacity:1;transform:scale(1)}.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#40200025,transparent 30%,#44230010 50%,#21140050)}.hero-kicker{position:absolute;left:4%;top:15%;font-size:10px;font-weight:bold;line-height:1.7;letter-spacing:.13em;margin:0}.hero h1{margin:0;font-family:Anton;font-weight:400;letter-spacing:-.045em;line-height:1}.headline-top{position:absolute;left:4%;top:21%;font-size:clamp(150px,20vw,350px);z-index:1;transform:rotate(-4deg);text-shadow:0 3px 20px #6c230b15;white-space:nowrap}.living-word{display:flex;position:absolute;left:4%;top:48%;font-size:clamp(120px,16.65vw,300px);z-index:6;white-space:nowrap;text-shadow:0 4px 25px #62290d20;line-height:1.12}.letter{display:inline-block;transform-origin:50% 87%;position:relative;will-change:transform}.period{color:var(--ink)}.character .eye{position:absolute;left:40%;top:25%;width:.22em;height:.24em;opacity:0;transform:scaleY(0);transition:opacity .15s,transform .35s cubic-bezier(.2,1.8,.4,1)}.awake .character .eye{opacity:1;transform:scaleY(1)}.eye{background:#fffaf0;border-radius:50%;box-shadow:inset -3px -4px 7px #0002,0 2px 7px #0003;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}.pupil{display:block;background:#191714;border-radius:50%;width:47%;height:50%;position:relative;transform:translate(var(--eye-x,0px),var(--eye-y,0px))}.pupil:after{content:'';position:absolute;left:17%;top:20%;width:25%;height:25%;border-radius:50%;background:white}
.product-stage{position:absolute;left:42%;top:12%;width:35%;height:72%;z-index:4;pointer-events:none;perspective:1000px;transform:translate3d(calc(var(--pointer-x)*15px),calc(var(--pointer-y)*10px),0)}.hero-can-wrap{height:100%;width:100%;display:flex;justify-content:center;animation:levitate 6s ease-in-out infinite}.can-sprite{background-image:var(--can-image);background-position:center;background-size:100% 100%;background-repeat:no-repeat;aspect-ratio:2/3}.hero-can{height:100%;transform:rotate(-13deg);filter:drop-shadow(15px 25px 12px #48230055);will-change:transform}.floating-drop{position:absolute;border-radius:55% 55% 55% 5%;background:radial-gradient(ellipse at 30% 22%,#fff9,transparent 40%),linear-gradient(140deg,var(--accent-light),var(--accent-dark));box-shadow:inset -4px -5px 6px #0003,3px 7px 9px #3a100025;transform:rotate(-30deg);animation:float 4s ease-in-out infinite}.drop-one{width:35px;height:48px;left:3%;top:25%}.drop-two{width:20px;height:27px;right:0%;bottom:20%;animation-delay:-2s}.flavor-side{position:absolute;right:4%;top:23%;width:15%;display:flex;flex-direction:column;gap:14px;z-index:6;text-align:right;text-shadow:0 2px 8px #0002}.flavor-side>span:first-child{font-size:11px;letter-spacing:.1em}.flavor-side strong{font:clamp(24px,3vw,54px)/1.06 Anton;letter-spacing:-.02em}.flavor-side>span:last-child{font-size:8px;letter-spacing:.1em;line-height:1.5}.hero-action{position:absolute;left:4%;bottom:19%;z-index:10}.primary{background:var(--cream);color:var(--ink);border:0;border-radius:99px;min-height:58px;display:inline-flex;align-items:center;justify-content:space-between;gap:35px;padding:18px 26px;font-size:13px;font-weight:bold;transition:transform .25s,background .25s;box-shadow:0 5px 20px #33140015}.primary:hover{transform:translateY(-4px);background:white}.primary:disabled{cursor:wait;opacity:.7}.button-drop{display:block;width:14px;height:19px;border-radius:55% 55% 55% 0;background:var(--accent);transform:rotate(-45deg)}.hero-action>p{font-size:10px;margin:10px 0 0 20px;font-style:italic}.flavor-bar{position:absolute;left:4%;right:16%;bottom:4%;z-index:12;display:flex;align-items:center;gap:20px;padding:12px 18px;background:#fff2d7f0;color:var(--ink);border:1px solid #fff7;border-radius:17px;box-shadow:0 10px 30px #45221020;backdrop-filter:blur(12px)}.flavor-intro{width:21%;border-right:1px solid #241a1322;padding-right:12px}.flavor-intro>span{font-size:8px;letter-spacing:.13em;font-weight:bold}.flavor-intro p{font-size:10px;line-height:1.5;margin:5px 0 0}.flavor-options{display:flex;flex:1;gap:7px}.flavor-button{position:relative;background:transparent;border:1px solid transparent;border-radius:10px;flex:1;display:flex;align-items:center;gap:1px;padding:4px 6px;font-size:11px;text-align:left;min-height:57px;transition:background .2s,border-color .2s}.flavor-button img{height:54px;max-width:none;width:36px;object-fit:contain;transform:rotate(-8deg);transition:transform .25s}.flavor-button small{display:block;font-size:9px;opacity:.65;margin-top:3px}.flavor-button:hover{background:#ffffff88}.flavor-button:hover img{transform:rotate(8deg) translateY(-4px)}.flavor-button.selected{border-color:var(--ink);background:#ffffff65}.flavor-button i{width:4px;height:4px;border-radius:50%;background:var(--accent);position:absolute;right:6px;top:6px;opacity:0}.flavor-button.selected i{opacity:1}.scroll-cue{position:absolute;right:4%;bottom:5.8%;display:flex;align-items:center;gap:18px;font-size:8px;line-height:1.5;letter-spacing:.08em;z-index:12}.scroll-cue>span:last-child{font-size:27px;animation:nudge 2s infinite}.marquee{overflow:hidden;background:var(--ink);color:var(--cream);padding:18px 0;position:relative;z-index:5;transform:rotate(-2deg) scale(1.02);margin:-12px 0;font-family:Anton;font-size:27px;letter-spacing:.01em}.marquee div{width:max-content;animation:marquee 25s linear infinite}
.incident{height:260svh;min-height:1800px;position:relative;background:var(--accent-dark);color:var(--cream);--progress:0;--fill:0;--flow:0;--spill:0;--monster:0;--can-rotation:0deg}.incident-sticky{position:sticky;top:0;height:100svh;min-height:700px;overflow:hidden;isolation:isolate;display:flex;align-items:center;padding:6%}.incident-world{position:absolute;inset:-5%;background-image:var(--world-image);background-size:cover;background-position:center;filter:blur(25px) brightness(.32) saturate(.8);z-index:-3;opacity:.65;transform:scale(1.1)}.incident-glow{position:absolute;width:80%;height:110%;right:-10%;top:-5%;background:radial-gradient(ellipse,var(--accent),transparent 65%);opacity:.45;z-index:-2}.incident-copy{width:40%;position:relative;z-index:5;align-self:center;pointer-events:none}.incident h2{font:clamp(60px,7.5vw,135px)/1.05 Anton;letter-spacing:-.035em;margin:0 0 25px}.incident h2 em{font-style:normal;color:var(--accent-light)}.incident-copy>p:not(.eyebrow){font-size:15px;line-height:1.6;max-width:250px;min-height:45px}.chapter-label{display:block;margin-top:30px;font-size:10px;letter-spacing:.12em;opacity:.65}.pour-stage{position:absolute;right:1%;top:10%;height:83%;width:59%;max-height:850px;min-height:540px}.pour-can{position:absolute;left:3%;top:4%;height:49%;z-index:4;transform:translate(calc(var(--progress)*40px),calc(var(--progress)*-20px)) rotate(var(--can-rotation));transform-origin:65% 20%;filter:drop-shadow(8px 14px 10px #0007)}.pour-mouth{position:absolute;left:50%;top:5%;width:1px;height:1px}.photo-glass{position:absolute;left:42%;bottom:6%;height:51%;aspect-ratio:2/3;z-index:3}.photo-glass>img,.fill-reveal,.fill-reveal>img{position:absolute;inset:0;width:100%;height:100%}.glass-empty{opacity:.8}.fill-reveal{clip-path:inset(calc(90% - var(--fill)*90%) 0 0);opacity:var(--fill-opacity,1)}.glass-full{filter:hue-rotate(var(--tint))}.liquid-surface{position:absolute;bottom:calc(16% + var(--fill)*68%);left:12%;right:12%;height:6%;border-radius:50%;background:radial-gradient(ellipse,#fff7 0%,var(--accent-light) 40%,var(--accent) 80%);box-shadow:0 -1px 4px #fff9;opacity:var(--surface-opacity,0);z-index:3}#fluid-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}.spill{position:absolute;bottom:5%;left:24%;width:72%;height:8%;border-radius:57% 43% 68% 32%;transform:scale(var(--spill));background:radial-gradient(ellipse at 40% 25%,var(--accent-light),var(--accent) 50%,var(--accent-dark));box-shadow:inset 1px 4px 3px #fff8,0 6px 12px #0002;z-index:1}.liquid-creature{position:absolute;right:-2%;bottom:4%;width:36%;z-index:6;filter:hue-rotate(var(--tint)) drop-shadow(5px 9px 12px #0005);transform:translateY(calc((1 - var(--monster))*80px)) scale(var(--monster));transform-origin:50% 95%}.monster-speech{position:absolute;right:0;bottom:41%;font-size:17px;font-style:italic;opacity:var(--monster);transform:rotate(8deg);z-index:6}.incident-progress{position:absolute;bottom:34px;left:6%;right:6%;display:flex;align-items:center;gap:20px;font-size:8px;letter-spacing:.14em}.incident-progress>div{height:2px;flex:1;background:#fff2d730}.incident-progress i{display:block;height:100%;width:calc(var(--progress)*100%);background:var(--cream)}
.collection{background:var(--cream);padding:90px 0 0;position:relative;z-index:2}.collection-heading{padding:0 5% 60px;display:grid;grid-template-columns:1fr 1fr;align-items:end}.collection-heading .eyebrow{grid-column:1/-1;margin-bottom:20px}.collection h2{font:clamp(70px,9vw,155px)/1 Anton;letter-spacing:-.035em;margin:0}.collection h2 em{font-style:normal;color:var(--accent)}.collection-heading>p:last-child{font-size:16px;line-height:1.65;justify-self:end;padding-bottom:6px}.collection-grid{display:grid;grid-template-columns:repeat(4,1fr)}.flavor-card{position:relative;isolation:isolate;overflow:hidden;min-width:0;height:660px;display:flex;flex-direction:column;align-items:flex-start;padding:25px 20px 20px;border:0;border-right:1px solid #fff3;color:var(--cream);background:var(--card-color);text-align:left}.card-orange{--card-color:#ee590a;--can-image:url('assets/duo-can-mandarine-v1.webp');--card-world:url('assets/world-mandarine.webp')}.card-pink{--card-color:#c82958;--can-image:url('assets/duo-can-framboise-v1.webp');--card-world:url('assets/world-framboise.webp')}.card-green{--card-color:#738707;--can-image:url('assets/duo-can-citron-v1.webp');--card-world:url('assets/world-citron.webp')}.card-purple{--card-color:#6133a5;--can-image:url('assets/duo-can-myrtille-v1.webp');--card-world:url('assets/world-myrtille.webp')}.card-world{position:absolute;inset:0;background-image:linear-gradient(180deg,#0002,transparent 40%,#0008),var(--card-world);background-size:cover;background-position:35% 50%;z-index:-2;transition:transform .7s;opacity:.75}.flavor-card:hover .card-world{transform:scale(1.1)}.card-number{font-size:10px;opacity:.7}.card-saying{font-size:8px;font-weight:bold;letter-spacing:.1em;margin-top:12px}.card-can{display:block;height:57%;max-width:none;position:absolute;top:12%;left:50%;transform:translateX(-50%) rotate(-12deg);filter:drop-shadow(10px 15px 10px #0004);transition:transform .6s cubic-bezier(.2,.8,.2,1)}.flavor-card:nth-child(even) .card-can{transform:translateX(-50%) rotate(12deg)}.flavor-card:hover .card-can{transform:translateX(-50%) rotate(0) translateY(-20px) scale(1.04)}.card-title{font:clamp(25px,3vw,50px)/1.06 Anton;letter-spacing:-.02em;margin-top:auto;position:relative;z-index:3}.card-description{font-size:10px;line-height:1.5;margin-top:10px;min-height:30px}.card-link{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:8px;letter-spacing:.06em;border-top:1px solid #fff5;margin-top:15px;padding-top:13px}.card-link b{font-size:25px;font-weight:normal}.finale{position:relative;isolation:isolate;overflow:hidden;min-height:900px;padding:80px 5% 0;color:var(--cream);background:var(--accent-dark)}.finale-world{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#21130be6,#21130b90),var(--world-image);background-size:cover;background-position:center;filter:saturate(.65)}.finale>p{font-size:10px;letter-spacing:.12em}.finale h2{font:clamp(85px,11vw,180px)/1 Anton;letter-spacing:-.035em;margin:28px 0 35px;position:relative;z-index:5}.finale h2 em{color:var(--accent-light);font-style:normal}.finale-button{position:relative;z-index:7}.can-fan{position:absolute;top:7%;right:0;width:60%;height:55%;z-index:3;pointer-events:none}.can-fan img{height:100%;position:absolute;left:50%;max-width:none;filter:drop-shadow(7px 17px 9px #0005);transform-origin:50% 100%;transition:transform .7s}.can-fan img:nth-child(1){transform:translateX(-80%) rotate(-28deg)}.can-fan img:nth-child(2){transform:translateX(-65%) rotate(-9deg);z-index:3}.can-fan img:nth-child(3){transform:translateX(-35%) rotate(12deg);z-index:2}.can-fan img:nth-child(4){transform:translateX(-15%) rotate(29deg)}.finale:hover .can-fan img:nth-child(1){transform:translateX(-85%) rotate(-32deg) translateY(-12px)}.finale:hover .can-fan img:nth-child(4){transform:translateX(-10%) rotate(33deg) translateY(-12px)}.giant-brand{font:31.8vw/.9 Anton;letter-spacing:-.06em;text-align:center;position:relative;margin:65px -1% 0;z-index:4;user-select:none}.giant-brand .eye{position:absolute;width:3vw;height:3.4vw;right:39%;top:35%;transform:rotate(-10deg)}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #fff4;position:relative;z-index:7;padding:25px 0 30px;margin-top:25px;font-size:8px;letter-spacing:.08em}footer>a{font-size:9px;white-space:nowrap}
#particles{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}.particle{position:absolute;left:0;top:0;border-radius:50%;background:var(--accent);box-shadow:inset -2px -3px 4px #0002,inset 2px 2px 3px #ffffff70}.projectile{width:22px;height:29px;border-radius:55% 55% 55% 10%;background:radial-gradient(ellipse at 30% 23%,#fff9,transparent 35%),var(--accent);position:fixed;left:0;top:0;z-index:40;pointer-events:none;box-shadow:inset -4px -5px 6px #0002,0 1px 10px #fff7}.impact-mark{position:absolute;border-radius:50% 40% 60% 35%;background:var(--cream);height:9px;bottom:-9px;left:60%;width:35%;opacity:0}.awake .impact-mark{opacity:.7}.portal{position:absolute;width:80%;height:13%;background:var(--ink);border:3px solid var(--accent-light);border-radius:50%;bottom:-4%;left:10%;box-shadow:0 0 15px var(--accent-light);transform:scale(0);z-index:-1}
@keyframes sound{to{transform:scaleY(.3)}}@keyframes float{50%{translate:0 -20px;rotate:10deg}}@keyframes levitate{50%{transform:translateY(-15px) rotate(2deg)}}@keyframes nudge{50%{transform:translateY(5px)}}@keyframes marquee{to{transform:translateX(-50%)}}
@media(min-width:1600px){.hero-action{bottom:20%}.flavor-bar{left:8%;right:18%;bottom:4.5%;padding:18px 25px}.flavor-button{font-size:13px}.flavor-button img{height:64px;width:43px}.flavor-button small{font-size:11px}.flavor-intro>span{font-size:10px}.flavor-intro p{font-size:12px}.flavor-card{height:800px}.finale{min-height:1100px}}
@media(max-width:1100px){.header-note{display:none}.hero{min-height:760px}.flavor-intro{display:none}.flavor-bar{right:20%;gap:0}.flavor-button{font-size:10px;padding:5px 3px}.flavor-button small{font-size:8px}.flavor-side{width:18%;top:23%}.product-stage{left:38%;width:44%;top:13%;height:69%}.hero-action{bottom:19%}.incident-copy{width:42%}.pour-stage{right:0;width:60%;height:80%;top:13%}.card-title{font-size:30px}.flavor-card{height:590px;padding:22px 16px 15px}.card-link{font-size:7px}.card-can{height:53%;top:17%}.finale{min-height:780px}.can-fan{top:15%;height:46%;width:58%}.giant-brand{margin-top:90px}}
@media(max-width:760px){.header{height:77px;left:6%;right:6%}.wordmark{font-size:37px}.header nav{gap:22px;font-size:9px}.header nav>a{gap:8px}.header nav>a>span{font-size:20px}.sound-button{font-size:8px}.hero{height:100svh;min-height:820px;max-height:1100px}.hero-kicker{left:6%;top:12%;font-size:8px}.headline-top{font-size:27vw;left:6%;top:20%}.living-word{font-size:17.5vw;left:6%;top:46%;line-height:1.1}.product-stage{height:51%;width:70%;left:26%;top:15%}.hero-can{transform:rotate(-13deg)}.flavor-side{right:6%;top:12.5%;width:40%;gap:5px}.flavor-side strong{font-size:23px}.flavor-side>span:first-child{font-size:8px}.flavor-side>span:last-child{display:none}.worlds{inset:-2% -45%;}.hero-shade{background:linear-gradient(180deg,#40200020,transparent 28%,#38200015 40%,#21140070)}.hero-action{left:6%;bottom:29%;}.primary{padding:15px 20px;min-height:52px;font-size:11px;gap:25px}.hero-action>p{font-size:9px;max-width:180px;margin-left:12px}.flavor-bar{left:6%;right:6%;bottom:8%;padding:7px;border-radius:13px}.flavor-options{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:100%}.flavor-button{font-size:11px;gap:2px;padding:3px 7px;min-height:53px}.flavor-button img{height:46px;width:31px}.flavor-button small{font-size:9px}.scroll-cue{bottom:2%;right:6%;left:6%;justify-content:space-between;font-size:7px;line-height:1.4}.scroll-cue br{display:none}.scroll-cue>span:last-child{font-size:23px}.drop-one{width:22px;height:30px;left:10%;top:29%}.drop-two{width:13px;height:19px;bottom:20%;right:16%}.marquee{font-size:20px;padding:14px 0;margin:-9px 0}.incident{height:240svh;min-height:1800px}.incident-sticky{min-height:690px;padding:40px 6%;display:block}.incident-copy{width:100%;position:absolute;top:8%;left:6%}.incident-copy .eyebrow{font-size:8px;margin-bottom:12px}.incident h2{font-size:14vw;line-height:1.03;margin:0 0 12px}.incident h2 br:nth-child(2){display:none}.incident h2 em{margin-left:.12em}.incident-copy>p:not(.eyebrow){font-size:11px;min-height:35px;max-width:190px;margin:0}.chapter-label{font-size:8px;margin-top:10px}.pour-stage{width:100%;right:0;top:32%;height:60%;min-height:0;max-height:none}.pour-can{height:49%;left:0%;top:0}.photo-glass{height:56%;left:38%;bottom:8%}.liquid-creature{right:0;width:35%;bottom:6%}.monster-speech{right:6%;bottom:42%;font-size:11px}.spill{bottom:6%;left:18%;width:75%}.incident-progress{font-size:7px;bottom:23px;left:6%;right:6%;gap:12px}.collection{padding-top:60px}.collection-heading{display:block;padding:0 6% 35px}.collection-heading .eyebrow{font-size:8px;max-width:220px;margin-bottom:16px}.collection h2{font-size:17vw}.collection-heading>p:last-child{font-size:12px;margin-top:18px}.collection-grid{grid-template-columns:1fr 1fr}.flavor-card{height:480px;padding:18px 14px 15px}.card-number{font-size:8px}.card-saying{font-size:7px;line-height:1.4;margin-top:7px}.card-can{height:53%;top:16%}.card-title{font-size:27px}.card-description{font-size:9px;min-height:28px}.card-link{font-size:6px;letter-spacing:0;padding-top:10px;margin-top:12px}.card-link b{font-size:18px}.finale{min-height:800px;padding:55px 6% 0}.finale>p{font-size:8px}.finale h2{font-size:24vw;margin:25px 0 22px}.can-fan{top:35%;height:36%;right:-2%;width:100%}.finale-button{font-size:10px;gap:20px}.giant-brand{font-size:31vw;margin-top:290px}.giant-brand .eye{width:4vw;height:4.5vw}.finale footer{font-size:6px;line-height:1.6;gap:15px;margin-top:20px;padding-bottom:25px}.finale footer>span:nth-child(2){display:none}.finale footer>a{font-size:7px}}
@media(max-width:380px){.hero{min-height:790px}.flavor-card{height:440px;padding:15px 11px}.card-title{font-size:24px}.card-can{height:51%}.card-saying{font-size:6px}.card-link{font-size:5.5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.incident{height:auto;min-height:0}.incident-sticky{position:relative;height:850px}.worlds,.product-stage{transform:none}.marquee div{animation:none}}
.header{filter:drop-shadow(0 2px 5px #29130840)}
.flavor-side{text-shadow:0 2px 12px #34100080}
.spill{opacity:.32;filter:blur(2px);height:5%;box-shadow:inset 1px 2px 3px #fff5,0 6px 15px #0003}
body{overflow-x:clip}
.headline-top{font-size:12vw;top:27%;z-index:2}
.living-word{font-size:8.6vw;top:49%;z-index:2}
.product-stage{left:49%;width:30%;top:15%;height:66%}
.hero-action{bottom:22%}
.flavor-side{width:17%;top:30%}
.can-fan{right:7%;width:52%;height:45%;top:16%}
.can-fan img{height:auto;width:32%;max-height:100%;object-fit:contain}
.can-fan img:nth-child(1),.finale:hover .can-fan img:nth-child(1){transform:translateX(-120%) rotate(-20deg)}
.can-fan img:nth-child(2){transform:translateX(-72%) rotate(-7deg)}
.can-fan img:nth-child(3){transform:translateX(-25%) rotate(8deg)}
.can-fan img:nth-child(4),.finale:hover .can-fan img:nth-child(4){transform:translateX(20%) rotate(21deg)}
.tasting-story{padding:90px 4% 45px;background:#33190e;color:var(--cream)}
.story-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:45px}
.story-heading h2{font:clamp(52px,7vw,105px)/1.03 Anton;margin:0;letter-spacing:-.025em}
.story-heading h2 em{color:#ffb95c;font-style:normal}
.story-heading>p{font-size:15px;line-height:1.7;padding-bottom:5px}
.story-frames{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.story-frames figure{margin:0;min-width:0}.story-photo{aspect-ratio:1;background-image:url('assets/storyboard-mandarine.webp');background-size:300% 100%;background-repeat:no-repeat;border-radius:3px}
.shot-open{background-position:0% 50%}.shot-pour{background-position:50% 50%}.shot-taste{background-position:100% 50%}
.story-frames figcaption{padding:23px 0 0}.story-frames figcaption>span{font-size:9px;letter-spacing:.12em;color:#ffc78e}.story-frames strong{display:block;font:clamp(40px,5vw,75px)/1 Anton;margin-top:12px}.story-frames p{font-size:12px;line-height:1.5}.story-note{font-size:9px;opacity:.6;margin:40px 0 0}
@media(max-width:760px){
 .hero{min-height:860px}.headline-top{top:17%;font-size:18vw;z-index:2}.living-word{top:26%;font-size:12vw;z-index:2}
 .product-stage{left:23%;width:54%;top:32%;height:36%}.flavor-side{top:11%;width:43%}.hero-action{bottom:22%;left:6%}.flavor-bar{bottom:7%}
 .can-fan{top:37%;width:90%;right:5%;height:30%}.can-fan img{width:35%}.giant-brand{margin-top:290px}
 .tasting-story{padding:65px 6% 35px}.story-heading{display:block;margin-bottom:30px}.story-heading h2{font-size:13vw}.story-heading>p{font-size:12px;margin-top:22px}.story-heading .eyebrow{font-size:8px}.story-frames{grid-template-columns:1fr;gap:35px}.story-frames figcaption{display:grid;grid-template-columns:1fr 1fr;padding-top:17px;align-items:center}.story-frames strong{grid-column:1;grid-row:2;font-size:45px;margin-top:7px}.story-frames figcaption>p{grid-column:2;grid-row:1/3;font-size:11px;margin:0;max-width:130px;justify-self:end}.story-note{font-size:8px;line-height:1.6}
}
.marquee{transform:none}
.flavor-showcase{--show-color:#ff641d;--show-dark:#c9420d;--show-tint:0deg;position:relative;overflow:hidden;isolation:isolate;background:var(--show-color);color:var(--cream);padding:55px 5% 35px;transition:background-color .65s ease}
.showcase-heading{display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid #fff4;padding-bottom:25px;gap:20px}.showcase-heading .eyebrow{font-size:9px;margin:0 0 12px}.showcase-heading h2{font:clamp(45px,6.2vw,100px)/1 Anton;letter-spacing:-.025em;margin:0}.showcase-count{font-size:12px;white-space:nowrap;padding-bottom:6px}.showcase-count b{font:36px Anton;margin-right:8px}
.showcase-main{display:grid;grid-template-columns:33% 67%;align-items:center;min-height:570px}.showcase-copy{position:relative;z-index:5;padding:30px 0}.showcase-copy>p:first-child{font-size:9px;letter-spacing:.12em;margin:0 0 18px}.showcase-copy h3{font:clamp(45px,4.8vw,80px)/1.02 Anton;letter-spacing:-.02em;margin:0 0 22px}.showcase-copy>p:nth-of-type(2){font-size:13px;line-height:1.7;max-width:290px;min-height:66px}.showcase-notes{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0 28px}.showcase-notes span{font-size:9px;padding:7px 10px;border:1px solid #fff7;border-radius:40px}.showcase-link{font-size:11px;gap:25px;min-height:52px;padding:15px 22px}
.showcase-stage{position:relative;height:570px;min-width:0;touch-action:pan-y}.showcase-splash{position:absolute;width:83%;height:73%;left:9%;top:8%;background:var(--cream);border-radius:42% 58% 61% 39% / 52% 40% 60% 48%;transform:rotate(-12deg);box-shadow:18px 23px 0 #ffffff20;transition:transform .65s ease}.flavor-showcase[data-flavor=framboise] .showcase-splash{transform:rotate(8deg)}.flavor-showcase[data-flavor=citron] .showcase-splash{transform:rotate(-20deg)}.flavor-showcase[data-flavor=myrtille] .showcase-splash{transform:rotate(16deg)}.showcase-word{font:clamp(70px,9vw,150px)/1 Anton;letter-spacing:-.035em;position:absolute;left:50%;top:31%;transform:translateX(-50%) rotate(-12deg);color:transparent;-webkit-text-stroke:1px var(--show-dark);opacity:.32;white-space:nowrap}.showcase-product{position:absolute;inset:0 0 65px;pointer-events:none}.showcase-product>img:first-child{position:absolute;height:98%;width:auto;left:19%;top:-2%;transform:rotate(-10deg);filter:drop-shadow(13px 20px 12px #33190e40);z-index:3}.showcase-glass{position:absolute;right:5%;bottom:5%;height:63%;width:auto;filter:hue-rotate(var(--show-tint)) drop-shadow(5px 13px 9px #33190e25);z-index:2}.showcase-shadow{position:absolute;left:23%;right:8%;bottom:6%;height:6%;background:#421a1229;filter:blur(13px);border-radius:50%;z-index:1}.showcase-arrows{position:absolute;bottom:18px;left:20%;right:15%;display:flex;align-items:center;justify-content:space-between;gap:20px}.showcase-arrows button{border:1px solid #fff8;color:var(--cream);background:transparent;width:58px;height:48px;border-radius:50px;font-size:27px;transition:background .2s,color .2s}.showcase-arrows button:hover{background:var(--cream);color:var(--show-dark)}.showcase-arrows span{font-size:8px;letter-spacing:.13em;white-space:nowrap}
.showcase-picks{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #fff6;gap:12px;padding-top:22px}.showcase-picks button{border:1px solid #fff4;background:transparent;color:var(--cream);padding:7px 14px;border-radius:10px;display:flex;align-items:center;gap:10px;position:relative;text-align:left;min-width:0;transition:background .2s,color .2s}.showcase-picks button[aria-pressed=true]{background:var(--cream);color:var(--ink);border-color:var(--cream)}.showcase-picks button:hover{border-color:var(--cream)}.showcase-picks img{height:65px;width:43px;object-fit:contain;transform:rotate(-8deg)}.showcase-picks button>span{font-size:12px;font-weight:bold}.showcase-picks small{font-size:10px;font-weight:normal;display:block;margin-top:4px}.showcase-picks b{margin-left:auto;font-size:9px;opacity:.6}
@media(max-width:1000px) and (min-width:761px){.showcase-copy h3{font-size:44px}.showcase-stage{height:500px}.showcase-main{min-height:500px}.showcase-link{font-size:10px;padding:14px}.showcase-arrows{left:13%;right:6%}.showcase-picks button{padding:7px}.showcase-picks button>span{font-size:10px}}
@media(max-width:760px){.flavor-showcase{padding:45px 6% 28px}.showcase-heading{gap:12px;padding-bottom:20px;align-items:center}.showcase-heading h2{font-size:10.5vw;max-width:240px;line-height:1.04}.showcase-heading .eyebrow{font-size:7px;max-width:190px;line-height:1.5}.showcase-count{font-size:9px}.showcase-count b{font-size:26px;margin-right:2px}.showcase-main{display:flex;flex-direction:column;min-height:0}.showcase-copy{padding:25px 0 0;width:100%;display:grid;grid-template-columns:1fr 1fr;column-gap:18px;align-items:start}.showcase-copy>p:first-child{grid-column:1/-1;font-size:8px;margin-bottom:12px}.showcase-copy h3{font-size:9.4vw;margin-bottom:10px}.showcase-copy>p:nth-of-type(2){font-size:10px;line-height:1.65;min-height:0;margin:0}.showcase-notes{grid-column:1/-1;margin:8px 0 15px;gap:5px}.showcase-notes span{font-size:8px;padding:6px 9px}.showcase-link{grid-column:1/-1;justify-self:start;font-size:10px;min-height:44px;padding:12px 18px}.showcase-stage{height:410px;width:calc(100% + 24px);margin:22px -12px 0}.showcase-splash{height:68%;width:88%;left:6%;top:9%;box-shadow:10px 15px 0 #ffffff20}.showcase-word{font-size:17vw;top:33%}.showcase-product{bottom:60px}.showcase-product>img:first-child{height:96%;left:9%;top:1%}.showcase-glass{right:0;height:60%;bottom:4%}.showcase-arrows{bottom:8px;left:8%;right:8%;gap:10px}.showcase-arrows span{font-size:7px;letter-spacing:.08em}.showcase-arrows button{width:52px;height:44px;font-size:25px}.showcase-picks{grid-template-columns:1fr 1fr;gap:7px;padding-top:16px;margin-top:10px}.showcase-picks button{padding:5px 8px;gap:4px}.showcase-picks img{height:50px;width:33px}.showcase-picks button>span{font-size:10px}.showcase-picks small{font-size:8px;margin-top:3px}.showcase-picks b{font-size:7px}}
.world.active{animation:world-current 15s ease-in-out -4s infinite alternate;transform-origin:50% 55%;will-change:transform}
.world-motion-paused .world{animation-play-state:paused}
@keyframes world-current{
  0%{transform:translate3d(-1.2%,.7%,0) scale(1.045) rotate(-.65deg)}
  50%{transform:translate3d(.3%,-1.1%,0) scale(1.085) rotate(.25deg)}
  100%{transform:translate3d(1.1%,.4%,0) scale(1.13) rotate(.8deg)}
}
@media(max-width:760px){.world.active{animation-duration:18s}}
@media(prefers-reduced-motion:reduce){.world.active{animation:none;transform:none;will-change:auto}}
@media(max-width:760px){.pour-stage{top:47%;height:45%}.photo-glass{height:62%}.incident-copy{width:88%}}

/* GLOUP micro-intro: a single liquid wordmark, then the homepage. */
.loading-intro{display:none;flex-direction:column;justify-content:space-between;position:fixed;inset:0;z-index:1000;background:var(--cream);color:#ff641d;padding:clamp(24px,4vw,64px);isolation:isolate;overflow:hidden}
.intro-loading .loading-intro{display:flex;flex-direction:column;justify-content:space-between}
html.intro-loading{overflow:hidden}
.intro-top{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;font-weight:600;letter-spacing:.1em}
.intro-center{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:min(88vw,1120px);text-align:center}
.intro-logo{display:block;width:100%;overflow:visible;font-family:Anton,'Arial Narrow',sans-serif;font-size:330px;letter-spacing:-9px}
.intro-outline{fill:none;stroke:#ff641d;stroke-width:1.2}
.intro-wave{fill:#ff641d;animation:intro-wave 3.2s linear infinite}
.intro-bubbles{fill:var(--cream)}
.intro-bubbles circle{opacity:0;animation:intro-bubble-rise 2.4s linear infinite}
.intro-bubbles circle:nth-child(2){animation-delay:-.8s;animation-duration:2.8s}
.intro-bubbles circle:nth-child(3){animation-delay:-1.5s;animation-duration:3s}
.intro-bubbles circle:nth-child(4){animation-delay:-.4s;animation-duration:2.6s}
.intro-bubbles circle:nth-child(5){animation-delay:-1.9s;animation-duration:3.2s}
.intro-bubbles circle:nth-child(6){animation-delay:-1.1s;animation-duration:2.7s}
.intro-center p{font-size:11px;font-weight:600;letter-spacing:.22em;margin:10px 0 0}.intro-center p span{opacity:.55}
.intro-bottom{margin-top:auto;display:grid;grid-template-columns:1fr auto;align-items:end;gap:16px;color:var(--ink)}
.intro-caption{font-size:10px;font-weight:600;letter-spacing:.12em;padding-bottom:9px}
.intro-progress{font:clamp(50px,7vw,100px)/.95 Anton,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:#ff641d;min-width:3ch;text-align:right}
.intro-progress small{font:18px DM,sans-serif;letter-spacing:0;margin-left:8px}
.intro-track{grid-column:1/-1;height:2px;background:#ff641d25;overflow:hidden}.intro-track i{display:block;height:100%;width:100%;background:#ff641d;transform:scaleX(0);transform-origin:left}
.loading-intro.intro-leaving{display:flex;pointer-events:none;animation:intro-curtain .65s cubic-bezier(.76,0,.24,1) both}
/* Two alternating quadratic arcs form one 400-unit wave; loop a full period. */
@keyframes intro-wave{to{transform:translateX(-400px)}}
/* Each bubble resets only while invisible, independently of its neighbours. */
@keyframes intro-bubble-rise{0%{transform:translate(0,40px);opacity:0}18%{opacity:.8}72%{opacity:.8}100%{transform:translate(8px,-120px);opacity:0}}
@keyframes intro-curtain{to{transform:translateY(-105%)}}
@media(max-width:600px){.intro-top{font-size:7px;letter-spacing:.05em;align-items:start}.intro-top>span{max-width:130px;line-height:1.6}.intro-center{width:92vw;top:45%}.intro-center p{font-size:8px;letter-spacing:.15em;margin-top:18px}.intro-caption{font-size:8px;max-width:130px;line-height:1.5}.intro-progress{font-size:64px}.intro-progress small{font-size:14px}}
@media(prefers-reduced-motion:reduce){.intro-wave,.intro-bubbles circle{animation:none}.intro-bubbles circle{opacity:.75}.loading-intro.intro-leaving{animation:none;display:none}}

/* One gesture, one chapter. Native scroll remains available as a fallback. */
html:has(#label-dialog[open]){overflow:hidden}
#label-dialog{overscroll-behavior:contain}
.journey{position:relative;height:996svh;--journey-h:100svh}
.journey .hero{position:sticky;top:0;height:100svh;min-height:0;max-height:none;--intro-away:0;--story-on:0;--can-tilt:-13deg}
.journey-anchor{position:absolute;top:calc(var(--step) * 112svh);width:1px;height:1px;pointer-events:none}
.journey .hero h1,.journey .hero-kicker,.journey .hero-action,.journey .flavor-side,.journey .flavor-bar,.journey .scroll-cue{opacity:calc(1 - var(--intro-away));translate:0 calc(var(--intro-away) * -30px)}
.hero.is-travelling .hero-action,.hero.is-travelling .scroll-cue{pointer-events:none}
.journey .product-stage{left:0;top:0;transform-origin:0 0;will-change:transform}
.journey .hero-can-wrap{animation:none}
.journey .hero-can{position:relative;transform:rotate(var(--can-tilt));background-image:none;filter:drop-shadow(14px 25px 13px #180c0755)}
.journey .hero-can:before{content:'';position:absolute;inset:0;background:var(--can-image) center/100% 100% no-repeat;opacity:0}
#turning-can{display:block;width:100%;height:100%;opacity:0}
#turning-can.ready{opacity:1}
.hero:not(.can-3d-ready) .hero-can:before{opacity:1}
.journey .floating-drop{opacity:calc(1 - var(--intro-away))}
.journey .hero.is-travelling .floating-drop,.journey .hero.is-travelling .world{animation-play-state:paused}
.journey .worlds{transform:translate3d(calc(var(--pointer-x)*-8px * (1 - var(--story-on))),calc(var(--pointer-y)*-5px * (1 - var(--story-on))),0) scale(calc(1 + var(--story-on)*.13));}
.journey-veil{position:absolute;inset:0;background:linear-gradient(90deg,#180b07df,#180b0780 50%,#180b0738);opacity:var(--story-on);z-index:0;pointer-events:none}
.hero[data-chapter="2"] .journey-veil{background:linear-gradient(270deg,#180b07ed,#180b0785 50%,#180b0738)}
.journey-orbit{position:absolute;left:47%;top:6%;height:80%;width:54%;border:1px solid #fff2d733;border-radius:50%;transform:rotate(-25deg);opacity:calc(var(--story-on)*.7);pointer-events:none;z-index:1}
.journey-heading{position:absolute;top:25px;left:5%;right:5%;display:flex;align-items:center;gap:26px;z-index:15;opacity:var(--story-on);visibility:visible}
.is-travelling .journey-heading{visibility:visible}
.journey-heading>a{font:37px Anton;letter-spacing:-2px;transform:rotate(-6deg)}
.journey-heading>a span{font:8px DM;vertical-align:top;letter-spacing:0}
.journey-heading>span{font-size:9px;letter-spacing:.12em;font-weight:600}
.journey-picks{margin-left:auto;display:flex;gap:8px}
.journey-picks button{width:34px;height:34px;border-radius:50%;background:var(--pick);color:var(--ink);font-size:10px;font-weight:800;border:1px solid #fff6;box-shadow:0 0 0 3px transparent}
.journey-picks button[aria-pressed=true]{box-shadow:0 0 0 3px var(--cream)}
.journey-scenes{position:absolute;inset:0;pointer-events:none;z-index:5}
.journey-scene{position:absolute;left:6%;top:50%;width:45%;opacity:0;visibility:hidden;transform:translateY(calc(-50% + var(--copy-y,0px)));pointer-events:none}
.journey-scene.is-current{visibility:visible;pointer-events:auto}
.journey-scene.scene-right{left:auto;right:6%;width:42%}
.journey-eyebrow{font-size:9px;letter-spacing:.17em;margin:0 0 30px;font-weight:600}
.journey-scene h2{font:clamp(56px,8vw,140px)/1.04 Anton;letter-spacing:-.025em;margin:0 0 28px;overflow-wrap:normal}
.journey-scene h2 span{display:block;font:clamp(23px,2.8vw,43px)/1.2 Anton;letter-spacing:0;margin-top:10px;color:var(--accent-light)}
.journey-scene[data-scene="3"] h2,.journey-scene[data-scene="4"] h2,.journey-scene[data-scene="5"] h2{font-size:clamp(60px,7.8vw,130px)}
.journey-scene[data-scene="3"] h2 span,.journey-scene[data-scene="4"] h2 span,.journey-scene[data-scene="5"] h2 span{font-size:inherit;line-height:1.03;margin-top:0}
.journey-copy{font-size:15px;line-height:1.8;max-width:355px;margin:0 0 25px}
.journey-detail{font-size:10px;line-height:1.7;opacity:.65;max-width:335px;margin:22px 0 0}
.taste-notes{display:flex;gap:20px;max-width:370px;border-top:1px solid #fff4;padding-top:20px}
.taste-notes span{font-size:10px;letter-spacing:.06em}
.taste-notes span:before{content:'✦';display:block;color:var(--accent-light);font-size:23px;margin-bottom:9px}
.back-details{display:inline-flex;align-items:center;gap:25px;border:0;border-bottom:1px solid #fff7;color:var(--cream);background:none;padding:8px 0 12px;font-size:12px;text-align:left}
.back-details span{font-size:22px}
.journey-track{position:absolute;bottom:28px;left:5%;right:5%;z-index:16;display:flex;gap:23px;align-items:center;opacity:var(--story-on);visibility:visible;font-size:9px}
.is-travelling .journey-track{visibility:visible}
.journey-track>a{padding:12px 0;white-space:nowrap;opacity:.7}
.journey-track>a:hover{opacity:1}
.journey-track-line{height:1px;flex:1;background:#fff4}
.journey-track-line i{display:block;width:100%;height:2px;background:var(--cream);transform:scaleX(0);transform-origin:left}
.journey-scroll{font-size:8px;letter-spacing:.08em;margin-left:14px}
#label-dialog{border:0;background:var(--cream);color:var(--ink);width:min(94vw,1060px);max-width:none;max-height:90svh;padding:0;border-radius:8px;overflow:auto;box-shadow:0 25px 90px #0006;--label-color:#ff641d;--label-dark:#c9420d;--label-light:#ffc76b}
#label-dialog::backdrop{background:#180b07e6}
.label-open .hero *{animation-play-state:paused!important}
#close-label{position:absolute;right:14px;top:14px;z-index:4;width:42px;height:42px;border:1px solid #241a1325;border-radius:50%;font:28px/1 DM;background:var(--cream);color:var(--ink)}
.label-layout{display:grid;grid-template-columns:44% 56%;min-height:630px}
.label-visual{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 45%,var(--label-light),var(--label-color) 70%);min-height:630px}
.label-visual:before{content:'';position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 50% 50%,transparent 0 48px,#fff2 49px 50px,transparent 51px 95px);opacity:.6;z-index:-1}
.label-brand{position:absolute;top:25px;left:28px;font:40px/1 Anton;letter-spacing:-.05em;color:var(--cream)}
.label-orbit{position:absolute;width:78%;height:73%;border:1px solid #fff8;border-radius:50%;transform:rotate(-20deg);box-shadow:inset 0 0 65px #fff2,0 0 65px #fff2}
.label-can{position:relative;width:340px;max-width:95%;height:510px;transform:rotate(-7deg);filter:drop-shadow(14px 20px 15px #241a1340)}
.label-can img{position:absolute;width:100%;height:100%;inset:0;opacity:0;object-fit:contain}
.label-can img.ready{opacity:1}
.label-print{position:absolute;inset:6% 22%;border-radius:10% / 3%;background-image:var(--label-art);background-size:400% 100%;background-position:91% 50%}
.label-can:has(img.ready) .label-print{visibility:hidden}
.label-visual-footer{position:absolute;left:28px;right:28px;bottom:25px;display:flex;justify-content:space-between;gap:12px;font-size:9px;font-weight:600;letter-spacing:.1em;color:var(--cream)}
.label-content{padding:50px 40px 26px}
#label-dialog .eyebrow{font-size:8px;letter-spacing:.13em;margin:6px 0 20px;color:var(--label-dark)}
#label-dialog h2{font:clamp(34px,4vw,52px)/1.06 Anton;letter-spacing:-.02em;margin:0 0 18px}
#label-dialog h2 span{display:block;color:var(--label-dark);margin-top:4px}
#label-dialog p{font-size:12px;line-height:1.7}
#label-dialog .label-intro{font-size:14px;margin:0 0 18px;max-width:34ch}
.label-notes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.label-notes span{font-size:10px;padding:7px 12px;border-radius:30px;background:color-mix(in srgb,var(--label-color) 18%,transparent);color:var(--label-dark)}
.label-duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid #241a1325;padding-top:19px}
.label-duo article>span{font-size:7px;letter-spacing:.08em;font-weight:600}
#label-dialog h3{font:23px/1.1 Anton;color:var(--label-dark);margin:10px 0 8px}
.label-duo p{margin:0}
.label-format{display:flex;align-items:center;gap:24px;padding:20px 0;margin:12px 0 0;border-bottom:1px solid #241a1325}
.label-format strong{font:54px/1 Anton;letter-spacing:-.03em;color:var(--label-dark)}
.label-format strong span{font:20px DM;letter-spacing:0}
.label-format p{margin:0}
.label-recipe{margin-top:15px}
.label-recipe summary{display:flex;justify-content:space-between;gap:12px;font-size:10px;font-weight:600;cursor:pointer;list-style:none;padding:9px 0}
.label-recipe summary::-webkit-details-marker{display:none}
.label-recipe summary span{color:var(--label-dark);font-size:18px;line-height:12px}
.label-recipe[open] summary span{transform:rotate(45deg)}
#label-dialog .label-note{font-size:9px;line-height:1.5;opacity:.6;margin:18px 0 0}
@media(min-width:761px) and (max-height:650px){.journey-scene{top:52%}.journey-scene h2,.journey-scene[data-scene] h2{font-size:65px}.journey-eyebrow{margin-bottom:15px}.journey-copy{font-size:12px;margin-bottom:10px}.journey-scene h2{margin-bottom:15px}.journey-detail{margin-top:12px}.hero-kicker{top:17%}.hero-action{bottom:23%}.flavor-bar{padding:4px 12px}}
@media(max-width:760px){
 .journey{height:1060svh}.journey-anchor{top:calc(var(--step) * 120svh)}
 .journey .hero{min-height:0;height:100svh}
 .journey .scroll-cue{bottom:2.2%}
 .journey-heading{top:19px;left:6%;right:6%;gap:14px}
 .journey-heading>a{font-size:30px}
 .journey-heading>span{font-size:7px;letter-spacing:.04em;max-width:100px;line-height:1.5}
 .journey-picks{gap:6px}.journey-picks button{width:26px;height:26px;font-size:8px}
 .journey-scene,.journey-scene.scene-right{left:7%;right:7%;top:14%;width:auto;transform:translateY(var(--copy-y,0px));}
 .journey-eyebrow{font-size:7px;margin:0 0 14px;letter-spacing:.1em}
 .journey-scene h2{font-size:12vw;margin:0 0 14px}
 .journey-scene h2 span{font-size:6vw;margin-top:6px}
 .journey-copy{font-size:11px;line-height:1.65;max-width:90%;margin:0 0 12px}
 .journey-detail{font-size:8px;line-height:1.6;max-width:85%;margin-top:10px}
 .journey-scene[data-scene="3"] h2,.journey-scene[data-scene="4"] h2,.journey-scene[data-scene="5"] h2{font-size:12.5vw}
 .journey-scene[data-scene="3"] h2 span,.journey-scene[data-scene="4"] h2 span,.journey-scene[data-scene="5"] h2 span{display:inline;margin-left:.15em}
 .taste-notes{gap:25px;padding-top:10px;max-width:270px}.taste-notes span{font-size:8px}.taste-notes span:before{display:inline;font-size:14px;margin-right:7px}
 .back-details{font-size:10px;padding:3px 0 7px}.back-details span{font-size:17px}
 .journey-track{bottom:18px;left:6%;right:6%;gap:12px;font-size:7px;flex-wrap:wrap}
 .journey-track-line{min-width:60%;}.journey-track>a{padding:5px 0}.journey-scroll{margin-left:auto;font-size:7px}
 .journey-veil,.hero[data-chapter="2"] .journey-veil{background:linear-gradient(180deg,#180b07ef,#180b0799 40%,#180b0726 75%,#180b07a0)}
 .journey-orbit{left:13%;top:44%;width:74%;height:42%}
 #label-dialog{width:94vw;max-height:92svh;padding:0}.label-layout{grid-template-columns:1fr;min-height:0}.label-visual{min-height:330px}.label-can{height:310px;width:207px}.label-brand{font-size:30px;top:22px;left:22px}.label-visual-footer{left:22px;right:22px;bottom:16px;font-size:8px}.label-content{padding:28px 24px}.label-orbit{width:58%;height:82%}#label-dialog h2{font-size:38px}.label-duo{gap:16px}#label-dialog h3{font-size:21px}
}
@media(max-width:760px) and (max-height:680px){.hero-kicker{display:none}.journey-scene{top:13%}.journey-eyebrow{margin-bottom:9px}.journey-copy{font-size:10px}.journey-scene h2{margin-bottom:9px}.journey-detail{font-size:7px}.flavor-bar{bottom:7%;padding:3px}.flavor-button{min-height:44px}.flavor-button img{height:36px}.hero-action{bottom:24%}}
@media(prefers-reduced-motion:reduce){.journey .hero-can{transform:none!important}.journey .worlds{transform:none}.journey-scene{transform:translateY(-50%)}.journey .hero h1,.journey .hero-kicker,.journey .hero-action,.journey .flavor-side,.journey .flavor-bar,.journey .scroll-cue{translate:none}}
@media(prefers-reduced-motion:reduce) and (max-width:760px){.journey-scene{transform:none}}

.journey .hero h1{position:absolute;inset:0;pointer-events:none}
.hero-can:not(:has(canvas.ready)):before{opacity:1}
.journey .hero-can-wrap{animation:can-breathe 6s ease-in-out infinite}
@keyframes can-breathe{50%{translate:0 calc(-10px * (1 - var(--intro-away)));rotate:calc(1.2deg * (1 - var(--intro-away)))}}

@media(max-width:760px){.journey-heading{gap:10px}.journey-picks{gap:5px}.journey-picks button{width:32px;height:32px;position:relative}.journey-picks button:after{content:'';position:absolute;inset:-6px}}

/* The last sip: a translucent liquid world, in the selected flavour's colour. */
.ending-world{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;opacity:var(--ending-on,0);background:radial-gradient(ellipse at 50% 45%,var(--accent-light) 0%,var(--accent) 40%,var(--accent-dark) 85%)}
.ending-haze{position:absolute;inset:-25%;background:conic-gradient(from 40deg at 50% 50%,transparent,#fff2d755,transparent 30%,#fff2d744,transparent 60%,#1b0d1933,transparent);filter:blur(45px);animation:ending-drift 18s linear infinite;animation-play-state:paused}
.liquid-lens{position:absolute;width:75vw;height:42vw;left:12%;top:18%;border:1px solid #fff7;border-radius:50%;box-shadow:inset 7px 4px 16px #fff4,inset -12px -15px 35px #40200022,0 1px 8px #fff5;transform:rotate(-24deg);background:linear-gradient(160deg,#fff2,transparent 45%,#fff3);animation:lens-drift 10s ease-in-out infinite alternate;animation-play-state:paused}
.lens-two{width:51vw;height:72vw;left:58%;top:-42%;animation-delay:-6s;opacity:.65;rotate:27deg}
.lens-three{width:35vw;height:35vw;left:-21%;top:58%;animation-delay:-3s;opacity:.55}
.ending-watermark{position:absolute;bottom:-.13em;left:-.02em;font:37vw/.9 Anton;letter-spacing:-.04em;white-space:nowrap;color:#fff2d712}
.in-ending .ending-haze,.in-ending .liquid-lens{animation-play-state:running}
.world-motion-paused .ending-haze,.world-motion-paused .liquid-lens{animation-play-state:paused}
@keyframes ending-drift{to{rotate:360deg}}
@keyframes lens-drift{to{translate:3vw -3vh;transform:rotate(-7deg) scale(1.08)}}
.hero.in-ending .journey-orbit{opacity:0}
.ending-world:before,.ending-world:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none}
.ending-world:after{background:linear-gradient(90deg,#16081388,transparent 62%);opacity:calc(var(--ending-shade,0) * (1 - var(--faq-shade,0)))}
.ending-world:before{background:linear-gradient(270deg,#160813b8,transparent 90%);opacity:var(--faq-shade,0)}
.hero.in-finale .journey-scenes{z-index:3}
.journey-scene.scene-finale{inset:0;width:auto;transform:none;text-align:center}
.scene-finale .journey-eyebrow{position:absolute;top:14%;width:100%;font-size:10px;letter-spacing:.24em}
.scene-finale h2{position:absolute;left:0;right:0;top:33%;font-size:clamp(95px,14.5vw,240px);line-height:.95;color:#fff2d747;letter-spacing:-.025em;margin:0;transform:rotate(-4deg)}
.scene-finale h2 span{font:inherit;font-size:.66em;line-height:1.2;letter-spacing:.015em;color:transparent;-webkit-text-stroke:1px #fff2d799;margin:0}
.finale-caption{position:absolute;bottom:10%;left:0;width:100%}
.finale-caption p{font-size:12px;font-weight:700;letter-spacing:.2em;margin:0 0 8px}
.finale-caption>span{font-size:10px;opacity:.8}
.journey-scene.scene-faq{top:49%;right:6%;width:48%;}
.scene-faq h2{font-size:clamp(48px,6.1vw,96px);line-height:1;margin-bottom:25px}
.scene-faq h2 span{display:inline;font:inherit;margin:0 0 0 .2em;color:var(--accent-light)}
.scene-faq .journey-eyebrow{margin-bottom:18px}
.faq-list{border-top:1px solid #fff6}
.faq-list details{border-bottom:1px solid #fff5}
.faq-list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:17px 0;font-size:13px;font-weight:600;cursor:pointer}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
.faq-list summary>span{font-size:23px;font-weight:400;line-height:1;transition:rotate .2s}
.faq-list details[open] summary>span{rotate:45deg}
.faq-list details p{font-size:12px;line-height:1.75;max-width:94%;margin:0;padding:0 20px 19px 0}
.scene-join h2{font-size:clamp(60px,7.8vw,125px);line-height:1.04}
.scene-join h2 span{font:inherit;color:var(--accent-light);margin:0}
.scene-join .journey-eyebrow{margin-bottom:24px}
.share-gloup{margin:0;min-height:52px;font-size:11px;gap:35px;box-shadow:none}
.share-gloup span{font-size:22px}
.share-status{min-height:15px;margin:10px 0;font-size:10px;line-height:1.5}
.restart-link{display:table;font-size:11px;margin-top:10px}
#share-link{width:100%;max-width:350px;padding:8px;background:var(--cream);color:var(--ink);border:0;font:10px DM}
.journey-scroll{border:0;background:none;color:inherit;cursor:pointer;padding:10px 0;white-space:nowrap}
.journey-scroll:hover{color:var(--accent-light)}
@media(max-width:760px){
 .liquid-lens{width:145vw;height:88vw;left:-25%;top:30%}.lens-two{width:100vw;height:170vw;left:60%;top:-30%}.lens-three{width:85vw;height:85vw;left:-60%;top:75%}
 .ending-watermark{font-size:48vw;bottom:5%}
 .scene-finale .journey-eyebrow{top:15%;font-size:7px;letter-spacing:.15em}
 .scene-finale h2{top:31%;font-size:21vw;line-height:1.1}
 .scene-finale h2 span{font-size:.78em}
 .finale-caption{bottom:12%}.finale-caption p{font-size:9px;letter-spacing:.15em}.finale-caption>span{font-size:8px}
 .journey-scene.scene-faq{top:15%;left:7%;right:7%;width:auto;transform:translateY(var(--copy-y,0px))}
 .scene-faq h2{font-size:12vw;margin-bottom:24px}.scene-faq .journey-eyebrow{font-size:7px;margin-bottom:16px}
 .faq-list summary{font-size:11px;padding:17px 0;gap:15px}.faq-list details p{font-size:11px;line-height:1.7;padding:0 0 18px;max-width:100%}
 .scene-join h2{font-size:12vw;margin-bottom:14px}.scene-join .journey-eyebrow{font-size:7px;line-height:1.6;margin-bottom:13px}
 .scene-join .journey-copy{max-width:100%;margin-bottom:14px}.share-gloup{font-size:10px;min-height:44px;padding:12px 20px}.share-gloup span{font-size:16px}
 .share-status{font-size:9px;margin:7px 0;min-height:13px}.restart-link{font-size:10px;margin-top:4px}.scene-join .journey-detail{margin-top:9px}
}
@media(max-width:760px) and (max-height:680px){.scene-faq h2{font-size:10vw;margin-bottom:14px}.faq-list summary{padding:12px 0;font-size:10px}.faq-list details p{font-size:10px;line-height:1.5;padding-bottom:12px}.scene-join h2{font-size:10vw}.scene-join .journey-copy{font-size:10px}.scene-join .journey-eyebrow{font-size:6px}.scene-join .journey-detail{display:none}}
@media(min-width:761px) and (max-height:650px){.scene-faq h2{font-size:54px;margin-bottom:15px}.faq-list summary{padding:12px 0}.faq-list details p{font-size:11px;padding-bottom:12px}.scene-join h2{font-size:65px}.scene-join .journey-eyebrow{margin-bottom:15px}.scene-join .journey-copy{font-size:12px}.scene-join .journey-detail{display:none}}
@media(prefers-reduced-motion:reduce){.ending-haze,.liquid-lens{animation:none}}
@media(max-width:760px){.ending-world:before{background:#16081380}}

/* A soft flavour-coloured halo follows the can throughout the journey. */
.journey .product-stage:before{content:'';position:absolute;inset:-8% -15%;background:radial-gradient(ellipse,color-mix(in srgb,var(--accent-light) 45%,transparent),color-mix(in srgb,var(--accent) 25%,transparent) 38%,transparent 68%);filter:blur(20px);opacity:.7;pointer-events:none}
.journey .hero-can-wrap{position:relative;z-index:1}

/* Prepare the first ingredient layer before the first scroll. Inert/aria-hidden
   keep its content inaccessible until the scene becomes active. */
.journey-scene[data-scene="1"]{visibility:visible;will-change:transform,opacity}
.journey-heading,.journey-track,.journey-veil{will-change:opacity}

/* Four liquid openings share one stage: no hidden flavours or carousel. */
html{scrollbar-gutter:stable}
html.choosing-flavor,html.flavor-entering{overflow:hidden}
.choosing-flavor main,.choosing-flavor .header,.choosing-flavor .skip-link{visibility:hidden}
.flavor-lobby{display:none;position:fixed;inset:0;z-index:70;isolation:isolate;overflow:hidden;background:#fff2d7;color:#241a13;--can-height:min(41svh,410px)}
.choosing-flavor .flavor-lobby,.flavor-entering .flavor-lobby{display:block}
.flavor-entering .flavor-lobby{pointer-events:none;will-change:opacity}
.flavor-entering main,.flavor-entering .header{visibility:visible}
.choosing-flavor .world{transition:none}
.lobby-choice:before{content:'';position:absolute;left:-12%;width:124%;top:-10%;height:calc(var(--can-height) * 1.25);background:radial-gradient(ellipse,color-mix(in srgb,var(--door-color) 48%,transparent),transparent 68%);filter:blur(14px);pointer-events:none;opacity:.7;transition:opacity .3s}
.lobby-choice:hover:before,.lobby-choice:focus-visible:before{opacity:1}
.flavor-lobby:before{content:'';position:absolute;width:70vw;height:70vw;border:1px solid #c9420d16;border-radius:50%;left:15%;top:6%;transform:scaleY(.48);pointer-events:none}
.lobby-top{position:absolute;top:25px;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;font-size:8px;font-weight:600;letter-spacing:.14em}
.lobby-logo{font:44px/1 Anton;letter-spacing:-.05em;color:#ff641d;transform:rotate(-6deg)}
.lobby-logo span{font:8px DM;vertical-align:top;letter-spacing:0;margin-left:4px}
.lobby-top-right{text-align:right;line-height:1.6}
.lobby-heading{position:absolute;top:13%;left:5%;right:5%;text-align:center;pointer-events:none;z-index:1}
.lobby-heading p{font-size:8px;font-weight:600;letter-spacing:.2em;margin:0 0 12px}
.lobby-heading h1{font:clamp(54px,7.2vw,110px)/1.05 Anton;margin:0;letter-spacing:-.035em}
.lobby-heading h1 span{display:inline-block;color:#ff641d;transform:none;margin-left:.18em}
.lobby-lineup{position:absolute;top:32%;left:6%;right:6%;bottom:15%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;z-index:2}
.lobby-lineup:before{content:'GLOUP';position:absolute;left:50%;top:5%;transform:translateX(-50%);font:36vw/1 Anton;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px #241a1312;pointer-events:none}
.lobby-choice{position:relative;border:0;background:none;min-width:0;padding:0;color:#241a13;text-align:center;outline-offset:10px;touch-action:manipulation;transition:opacity .3s,translate .3s}
.lobby-choice:focus-visible{outline:none}
.lobby-door{position:absolute;left:15%;width:70%;height:calc(var(--can-height) * .93);top:3%;overflow:hidden;border-radius:48% 52% 43% 57% / 57% 39% 61% 43%;background:var(--door-color);box-shadow:inset 5px 4px 15px #fff9,inset -6px -5px 20px #241a1333,0 15px 28px color-mix(in srgb,var(--door-color) 23%,transparent);transform:rotate(8deg) scale(.95);transition:transform .6s,border-radius .6s;animation:door-breathe 8s ease-in-out infinite alternate;animation-delay:calc(var(--order) * -1.8s)}
.door-world{position:absolute;inset:-12%;background-size:cover;background-position:center;opacity:.52;filter:saturate(.7);transform:rotate(-8deg);transition:opacity .4s,scale .8s}
.lobby-door:after{content:'';position:absolute;inset:2px;border:1px solid #fff8;border-radius:inherit;background:linear-gradient(125deg,#fff8,transparent 30%,transparent 75%,#fff5);pointer-events:none}
.lobby-door i{position:absolute;inset:8%;border:1px solid #fff6;border-radius:inherit;transform:rotate(12deg)}
.lobby-can{position:absolute;left:50%;top:-4%;height:var(--can-height);width:calc(var(--can-height) * .666667);transform:translateX(-50%) rotate(var(--can-lean));filter:drop-shadow(8px 17px 9px #241a1330);z-index:2;transition:transform .55s cubic-bezier(.2,.8,.25,1);animation:lobby-float 5s ease-in-out infinite;animation-delay:calc(var(--order) * -1.1s);pointer-events:none}
.lobby-can img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.lobby-puddle{position:absolute;left:17%;width:66%;height:18px;top:calc(var(--can-height) + 3px);border-radius:50%;background:var(--door-color);opacity:.28;filter:blur(5px);transform:scaleY(.5);transition:scale .5s,opacity .5s}
.lobby-label{position:absolute;top:calc(var(--can-height) + 25px);left:0;right:0;display:flex;flex-direction:column;align-items:center}
.lobby-label strong{font:clamp(18px,2vw,30px)/1.12 Anton;letter-spacing:-.015em}
.lobby-label strong>span{display:block;color:var(--door-dark);font-size:.7em;letter-spacing:.02em;margin-top:4px}
.lobby-label small{font-size:8px;margin-top:10px;opacity:.65}
.lobby-enter{font-size:9px;letter-spacing:.03em;font-weight:600;margin-top:13px;border-bottom:1px solid #241a1340;padding-bottom:5px;display:flex;align-items:center;gap:22px}
.lobby-enter>span{font-size:16px;color:var(--door-dark)}
.lobby-bottom{position:absolute;bottom:24px;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;font-size:7px;font-weight:600;letter-spacing:.09em}
.lobby-bottom p{font-size:10px;font-weight:400;letter-spacing:0;margin:0}
@media(hover:hover){.lobby-choice:hover .lobby-can{transform:translateX(-50%) translateY(-20px) rotate(0deg) scale(1.08)}.lobby-choice:hover .lobby-door{transform:rotate(-6deg) scale(1.12);border-radius:47% 53% 54% 46% / 42% 55% 45% 58%}.lobby-choice:hover .door-world{opacity:.9;scale:1.12}.lobby-choice:hover .lobby-puddle{scale:.8;opacity:.45}}
.lobby-choice:focus-visible .lobby-can{transform:translateX(-50%) translateY(-20px) rotate(0deg) scale(1.08)}
.lobby-choice:focus-visible .lobby-door{transform:rotate(-6deg) scale(1.12)}
@keyframes lobby-float{50%{translate:0 -9px}}
@keyframes door-breathe{to{border-radius:57% 43% 51% 49% / 44% 56% 44% 56%}}
.intro-loading .lobby-can,.intro-loading .lobby-door,.lobby-paused .lobby-can,.lobby-paused .lobby-door{animation-play-state:paused}
@media(max-width:760px){
 .flavor-lobby{--can-height:clamp(150px,25svh,240px)}
 .lobby-top{top:24px;left:6%;right:6%;font-size:6px;letter-spacing:.04em}.lobby-logo{font-size:36px}.lobby-top>span:nth-child(2){display:none}.lobby-top-right{line-height:1.7}
 .lobby-heading{top:16%;left:5%;right:5%}.lobby-heading p{font-size:6px;letter-spacing:.1em;line-height:1.6;margin-bottom:14px}.lobby-heading h1{font-size:12vw;line-height:1.02}.lobby-heading h1 span{display:block;font-size:1.35em;margin:0}
 .lobby-lineup{top:45%;left:3%;right:3%;bottom:12%;gap:0}
 .lobby-lineup:before{font-size:40vw;top:14%}
 .lobby-door{left:8%;width:84%;height:calc(var(--can-height) * .94);top:-1%}
 .lobby-can{top:-3%}.lobby-puddle{left:10%;width:80%;top:calc(var(--can-height) + 2px);height:12px}
 .lobby-label{top:calc(var(--can-height) + 20px)}.lobby-label strong{font-size:clamp(12px,3.4vw,20px);line-height:1.15}.lobby-label strong>span{font-family:DM;font-size:8px;font-weight:600;letter-spacing:0;line-height:1.5;margin-top:6px}
 .lobby-label small{display:none}.lobby-enter{font-size:8px;gap:9px;margin-top:15px}.lobby-enter>span{font-size:13px}
 .lobby-bottom{bottom:6%;left:5%;right:5%;justify-content:center}.lobby-bottom>span{display:none}.lobby-bottom p{font-size:10px}
}
@media(max-width:760px) and (max-height:680px){.lobby-heading{top:16%}.lobby-heading h1{font-size:10.5vw}.lobby-heading p{font-size:5px;margin-bottom:10px}.lobby-lineup{top:44%}.lobby-label{top:calc(var(--can-height) + 14px)}.lobby-enter{margin-top:10px}.lobby-bottom{bottom:4%}}
@media(min-width:761px) and (max-height:700px){.flavor-lobby{--can-height:36svh}.lobby-heading{top:15%}.lobby-heading h1{font-size:8svh}.lobby-lineup{top:34%}.lobby-label{top:calc(var(--can-height) + 15px)}.lobby-label strong{font-size:22px}.lobby-label small{margin-top:5px}.lobby-enter{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.lobby-door,.lobby-can{animation:none}.lobby-choice,.lobby-door,.lobby-can,.door-world{transition:none}}

/* GLOUP — the can is the subject. Restore the original liquid worlds on chapters 1, 2 and 4. */
body[data-flavor=mandarine]{--studio-dark:#3e1b09;--studio-mid:#9e4619}
body[data-flavor=framboise]{--studio-dark:#330e23;--studio-mid:#952345}
body[data-flavor=citron]{--studio-dark:#102c22;--studio-mid:#476c28}
body[data-flavor=myrtille]{--studio-dark:#160f30;--studio-mid:#4e326e}
.sensory-stage{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;isolation:isolate}
.sensory-studio{position:absolute;inset:0;opacity:var(--studio-on,0);background:radial-gradient(ellipse at 67% 46%,var(--studio-mid),var(--studio-dark) 76%)}
.sensory-studio:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,#fff2d708,transparent 30%,#fff2d70c 60%,transparent);}
.sensory-word{position:absolute;left:-1%;bottom:10%;font:clamp(100px,19vw,360px)/1 Anton;letter-spacing:-.045em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px #fff2d72b;opacity:0;will-change:transform,opacity}
.sip-rings{position:absolute;left:68%;top:50%;width:min(80vw,105svh);aspect-ratio:1;translate:-50% -50%;opacity:var(--sip-on,0);transform:rotate(-25deg);}
.sip-rings i{position:absolute;inset:0;border:1px solid #fff2d74a;border-radius:50%;transform:scaleY(.52);box-shadow:inset 0 3px 3px #fff2d712,0 -2px 2px #fff2d715;}
.sip-rings i:nth-child(2){inset:12%;transform:scaleY(.68) rotate(25deg);border-color:#fff2d726}
.sip-rings i:nth-child(3){inset:27%;transform:scaleY(.8) rotate(-35deg);border-color:#fff2d733}
.sip-bubbles{position:absolute;inset:0;opacity:var(--sip-on,0);overflow:hidden}
.sip-bubbles i{position:absolute;left:var(--x);bottom:-30px;width:var(--size);height:var(--size);border:1px solid #fff2d74d;border-radius:50%;background:radial-gradient(circle at 28% 22%,#fff2d7a3,transparent 35%);box-shadow:inset -1px -2px 3px #fff2d72b;animation:sensory-rise var(--duration) var(--delay) linear infinite;animation-play-state:paused}
.sip-active .sip-bubbles i{animation-play-state:running}
.world-motion-paused .sip-bubbles i,.choosing-flavor .sip-bubbles i{animation-play-state:paused}
@keyframes sensory-rise{0%{translate:0 0;opacity:0}10%,80%{opacity:.7}100%{translate:var(--sway) -105svh;opacity:0}}
.sensory-active .journey-orbit{opacity:0}
.hero.world-revealed:not(.world-motion-paused) .world.active{animation-play-state:running}
.label-light{position:absolute;inset:0;opacity:var(--label-light,0);background:radial-gradient(ellipse at 73% 50%,#fff2d733,transparent 48%);pointer-events:none}
.label-light>i{position:absolute;left:73%;top:53%;width:60svh;height:82%;translate:-50% -50%;border:1px solid #fff2d747;border-radius:50%;box-shadow:inset 1px 0 0 #fff2d722,0 0 70px #fff2d70a}
.journey .journey-scene[data-scene="4"] h2{font-size:clamp(70px,9vw,145px);line-height:1;transform:rotate(-3deg)}
.journey .journey-scene[data-scene="4"] h2 span{color:transparent;-webkit-text-stroke:1.5px var(--cream)}
#open-label{border:1px solid #fff2d799;border-radius:99px;background:var(--cream);color:var(--ink);padding:14px 22px;min-height:48px;gap:26px;box-shadow:0 6px 25px #180b0720;transition:translate .2s}
#open-label:hover{translate:0 -3px}
.journey .journey-scene[data-scene="1"],.journey .journey-scene[data-scene="2"]{top:43%;width:42%}
.journey .journey-scene[data-scene="1"] h2,.journey .journey-scene[data-scene="2"] h2{font-size:clamp(58px,7.6vw,138px);line-height:1.05;margin-bottom:24px}
.journey .journey-scene[data-scene="1"] h2 span,.journey .journey-scene[data-scene="2"] h2 span{font:clamp(23px,2.8vw,43px)/1.2 Anton;letter-spacing:0;font-weight:400;color:var(--accent-light);max-width:430px;margin-top:12px}
.journey .journey-scene[data-scene="1"] .journey-copy,.journey .journey-scene[data-scene="2"] .journey-copy{max-width:320px;font-size:14px;line-height:1.8}
.journey .journey-scene[data-scene="1"] .journey-detail,.journey .journey-scene[data-scene="2"] .journey-detail{border-top:1px solid #fff2d730;padding-top:18px;margin-top:26px;max-width:290px;font-size:9px;letter-spacing:.025em}
.journey .journey-scene[data-scene="3"]{width:40%}
.journey .journey-scene[data-scene="3"] h2{font-size:clamp(72px,10vw,170px);line-height:.95;transform:rotate(-4deg);margin-bottom:28px}
.journey .journey-scene[data-scene="3"] h2 span{font-size:1.25em;line-height:1.08;color:var(--accent-light)}
.journey .journey-scene[data-scene="3"] .journey-copy{font-size:14px;max-width:315px}
.taste-notes{gap:25px}.taste-notes span:before{content:'·';display:inline;font:24px DM;margin-right:8px}
.journey .journey-scene[data-scene="5"]{width:57%}
.journey .journey-scene[data-scene="5"] h2{font-size:clamp(80px,10.5vw,176px);line-height:.98;letter-spacing:-.035em}
.journey .journey-scene[data-scene="5"] .journey-copy{max-width:390px}
.journey-track{font-size:10px}.journey-track>a{opacity:.85}.journey-scroll{font-size:9px;min-height:44px}
.journey-track-line{height:2px;background:#fff2d72a}.journey-track-line i{background:var(--accent-light)}
.journey-heading>span{font-size:10px}
.journey-picks button{width:36px;height:36px;transition:transform .2s}
.journey-picks button:hover{transform:translateY(-3px)}
.share-status:empty{display:none}
@media(min-width:761px){.journey .journey-scene[data-scene="2"]{right:5%;width:42%}.journey .hero h1 .living-word{font-size:8.1vw}.lobby-heading h1{letter-spacing:-.045em}.lobby-choice:hover .lobby-label strong{color:var(--door-dark)}}
@media(max-width:760px){
 .label-light{background:radial-gradient(ellipse at 50% 68%,#fff2d730,transparent 55%)}
 .label-light>i{left:50%;top:66%;width:min(74vw,42svh);height:50%}
 .journey .journey-scene[data-scene="4"] h2{font-size:12.5vw;line-height:1.1}
 #open-label{padding:10px 17px;min-height:44px;font-size:10px;gap:22px}
 .sensory-studio{background:radial-gradient(ellipse at 50% 70%,var(--studio-mid),var(--studio-dark) 85%)}
 .sensory-word{font-size:30vw;bottom:19%;left:-3%;-webkit-text-stroke:1px #fff2d724}
 .journey .journey-scene[data-scene="1"],.journey .journey-scene[data-scene="2"]{top:15%;left:7%;right:7%;width:auto;transform:translateY(var(--copy-y,0px))}
 .journey .journey-scene[data-scene="1"] h2,.journey .journey-scene[data-scene="2"] h2{font-size:13vw;margin-bottom:14px}
 .journey .journey-scene[data-scene="1"] h2 span,.journey .journey-scene[data-scene="2"] h2 span{font-size:6vw;max-width:100%;letter-spacing:0;margin-top:9px}
 .journey .journey-scene[data-scene="1"] .journey-copy,.journey .journey-scene[data-scene="2"] .journey-copy{font-size:12px;line-height:1.65;max-width:95%;margin:0}
 .journey .journey-scene[data-scene="1"] .journey-detail,.journey .journey-scene[data-scene="2"] .journey-detail{font-size:8px;border:0;padding:0;margin-top:13px;max-width:95%;opacity:.65}
 .journey .journey-scene[data-scene="3"]{width:auto;top:14%}
 .journey .journey-scene[data-scene="3"] h2{font-size:14vw;margin-bottom:15px}
 .journey .journey-scene[data-scene="3"] h2 span{display:inline;font-size:1.15em;line-height:1;margin-left:.15em}
 .journey .journey-scene[data-scene="3"] .journey-copy{font-size:12px;max-width:95%}
 .sip-rings{left:55%;top:64%;width:125vw}
 .journey .journey-scene[data-scene="5"]{width:auto;top:15%}
 .journey .journey-scene[data-scene="5"] h2{font-size:14vw;line-height:1.02;margin-bottom:14px}
 .journey .journey-scene[data-scene="5"] h2 span{display:block;margin:0}
 .journey .journey-scene[data-scene="5"] .journey-copy{max-width:95%;font-size:11px;line-height:1.65}
 .scene-history .back-details{max-width:46%;gap:8px;line-height:1.4}
 .scene-history .journey-detail{max-width:44%}
 .journey-heading>span{font-size:7px}.journey-picks button{width:32px;height:32px}
 .journey-track{font-size:9px;gap:10px;bottom:14px}.journey-track>a{padding:8px 0}.journey-track-line{min-width:65%}.journey-scroll{font-size:8px;min-height:32px}
 .taste-notes span{font-size:9px}.taste-notes span:before{font-size:18px;margin-right:5px}
}
@media(max-width:760px) and (max-height:700px){
 .journey .journey-scene[data-scene="1"],.journey .journey-scene[data-scene="2"]{top:14%}
 .journey .journey-scene[data-scene="1"] h2,.journey .journey-scene[data-scene="2"] h2{font-size:11vw;margin-bottom:9px}
 .journey .journey-scene[data-scene="1"] h2 span,.journey .journey-scene[data-scene="2"] h2 span{font-size:5vw}
 .journey .journey-scene[data-scene="1"] .journey-copy,.journey .journey-scene[data-scene="2"] .journey-copy{font-size:10px}
 .journey .journey-scene[data-scene="1"] .journey-detail,.journey .journey-scene[data-scene="2"] .journey-detail{font-size:7px;margin-top:8px}
 .journey .journey-scene[data-scene="3"] h2{font-size:12vw}.journey .journey-scene[data-scene="3"] .journey-copy{font-size:10px}
 .journey .journey-scene[data-scene="5"] h2{font-size:13vw}.journey .journey-scene[data-scene="5"] .journey-copy{font-size:10px}
}
@media(min-width:761px) and (max-height:650px){
 .journey .journey-scene[data-scene="4"] h2{font-size:12svh}
 .journey .journey-scene[data-scene="1"] h2,.journey .journey-scene[data-scene="2"] h2{font-size:10svh;margin-bottom:14px}
 .journey .journey-scene[data-scene="3"] h2,.journey .journey-scene[data-scene="5"] h2{font-size:14svh}
 .journey .journey-scene[data-scene="1"] .journey-copy,.journey .journey-scene[data-scene="2"] .journey-copy{font-size:12px}
 .journey .journey-scene[data-scene="1"] .journey-detail,.journey .journey-scene[data-scene="2"] .journey-detail{padding-top:12px;margin-top:14px}
}
@media(prefers-reduced-motion:reduce){.sip-bubbles i{animation:none;bottom:calc(var(--x)*.75)}.sensory-word{will-change:auto}}

/* The same sound control follows the visitor from the lobby through the journey. */
.sound-button{min-width:76px;min-height:44px;justify-content:center;flex-shrink:0;touch-action:manipulation;cursor:pointer;letter-spacing:.04em}
.sound-button:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}
.lobby-top-right{display:flex;align-items:center;gap:26px}
.journey-heading>.sound-button{margin-left:auto}
.journey-heading>.journey-picks{margin-left:0}
@media(max-width:760px){
 .lobby-top-right{gap:16px}
 .journey-heading>#journey-flavor-name{display:none}
 .journey-heading>.sound-button{font-size:8px;min-width:66px;gap:7px}
 .journey-heading>.journey-picks{gap:6px}
}
@media(prefers-reduced-motion:reduce){.sound-button[aria-pressed=true] i{animation:none}}

.mascot-peek{position:fixed;z-index:85;bottom:-13px;left:16px;width:158px;pointer-events:none;transform:translateY(110%) rotate(-9deg);transform-origin:40% 100%;transition:transform 260ms cubic-bezier(.4,0,.8,.4);contain:layout style}
.mascot-peek{display:grid}
.mascot-peek img{grid-area:1/1;display:block;width:100%;height:auto;opacity:0;filter:drop-shadow(1px 5px 5px #6b391a24)}
.mascot-peek img.is-current{opacity:1}
.mascot-peek.is-visible{transform:translateY(0) rotate(0);transition-duration:420ms;transition-timing-function:cubic-bezier(.16,1,.3,1)}
@media(max-width:760px){.mascot-peek{width:112px;left:4px;bottom:-10px}}
@media(prefers-reduced-motion:reduce){.mascot-peek,.mascot-peek.is-visible{transition:none}}

/* The returning product resolves to its exact lobby image while still moving. */
.flavor-lobby{overflow:clip}
.lobby-choice{will-change:transform,opacity}
/* A closed lobby must not retain a composited, faintly visible surface. */
.flavor-lobby{opacity:0;visibility:hidden;will-change:auto}
.choosing-flavor .flavor-lobby,.flavor-entering .flavor-lobby,.returning-flavor .flavor-lobby{opacity:1;visibility:visible}
.flavor-entering .flavor-lobby{will-change:opacity}
.flavor-entering .lobby-can,.flavor-entering .lobby-door{animation-play-state:paused}
html.returning-flavor{overflow:hidden}
.returning-flavor .flavor-lobby{display:block;pointer-events:none}
.returning-flavor .journey .hero{position:fixed;inset:0;width:100%;height:100svh;z-index:80;pointer-events:none;background:transparent}
.returning-flavor .header{visibility:hidden}
.returning-flavor .hero>.worlds,.returning-flavor .hero>.hero-shade,.returning-flavor .hero>.journey-veil,.returning-flavor .hero>.journey-orbit{visibility:hidden}
.returning-flavor .hero-can-wrap,.returning-flavor .lobby-can,.returning-flavor .lobby-door{animation-play-state:paused}
.returning-flavor .is-return-target .lobby-can img{opacity:0}
.returning-flavor .is-return-target .lobby-can{transform:translateX(-50%) rotate(var(--can-lean));transition:none}
.returning-flavor .mascot-peek{visibility:hidden}

.return-can-flight{position:fixed;left:0;top:0;z-index:90;pointer-events:none;transform-origin:center;will-change:transform,opacity}
.return-can-flight img{display:block;width:100%;height:100%;object-fit:contain}

/* Keep long presses from selecting the presentation while preserving form fields. */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
@media(min-width:761px){
 .lobby-heading{margin-top:-20px}
 .lobby-bottom{display:grid;grid-template-columns:1fr auto 1fr}
 .lobby-bottom p{grid-column:2}
 .lobby-bottom>span{grid-column:3;justify-self:end;text-align:right}
}

/* Retain the original lift/fade, clearing the old lettering before the reveal. */
.flavor-entering .flavor-lobby:before,.flavor-entering .lobby-lineup:before,.flavor-entering .lobby-choice:before{opacity:0;transition:opacity 120ms ease-out}
.is-entry-clean .lobby-top,.is-entry-clean .lobby-heading,.is-entry-clean .lobby-bottom,
.is-entry-clean .lobby-choice:not(.is-enter-target),.is-entry-clean .lobby-door,
.is-entry-clean .lobby-label,.is-entry-clean .lobby-puddle,
.flavor-lobby.is-entry-clean:before,.is-entry-clean .lobby-lineup:before,.is-entry-clean .lobby-choice:before{visibility:hidden}

/* Leave room below the floating can on phone product home screens. */
@media(max-width:760px){
 .journey .hero-action{bottom:12%}
}
@media(max-width:760px) and (max-height:680px){
 .journey .hero-action{bottom:9%}
}

/* Keep the progress line and the next-step action on one row. */
.journey-track{flex-wrap:nowrap}
.journey-track-line{min-width:0}

/* Safari 26 can keep the lobby's cream tint when one viewport-sized fixed layer
   replaces another. Give its fixed-edge sampler a small, opaque color source.
   WebKit's direct background-color path requires a box larger than 10px.
   Empty text clipping paints no pixels and does not change the content frame.
   See LocalFrameView::fixedContainerEdges / primaryBackgroundColorForRenderer:
   https://github.com/WebKit/WebKit/blob/main/Source/WebCore/page/LocalFrameView.cpp */
.browser-edge{display:none}
@supports (-webkit-touch-callout:none){
 @media(max-width:760px){
  .browser-edge{
   display:block;position:fixed;left:0;right:0;height:11px;z-index:2147483647;
   pointer-events:none;user-select:none;
   background-color:var(--browser-edge-color,var(--cream));
   -webkit-background-clip:text;background-clip:text;
  }
  .browser-edge-top{top:0}
  .browser-edge-bottom{bottom:0}
  html[data-edge-refresh] .browser-edge{height:12px}
 }
}

/* Extend only the scenery when mobile browser bars retract. The hero's 100svh
   content frame, chapter anchors and can coordinates must stay unchanged. */
@media(max-width:760px){
 :root{
  --gloup-safe-top:env(safe-area-inset-top,0px);
  --gloup-safe-bottom:env(safe-area-inset-bottom,0px);
  --gloup-content-height:calc(100svh - var(--gloup-safe-top) - var(--gloup-safe-bottom));
  background:var(--cream);
 }
 html:not(.choosing-flavor):not(.intro-loading):not(.returning-flavor),
 html:not(.choosing-flavor):not(.intro-loading):not(.returning-flavor) body{background:var(--accent)}
 .flavor-lobby{
  top:var(--gloup-safe-top);bottom:var(--gloup-safe-bottom);
  --can-height:clamp(150px,calc(var(--gloup-content-height) * .25),240px);
 }
 .header{top:var(--gloup-safe-top)}
 .journey{padding-top:var(--gloup-safe-top)}
 .journey .hero,.returning-flavor .journey .hero{
  top:var(--gloup-safe-top);height:var(--gloup-content-height);
 }
 .journey .hero>.worlds{position:fixed;top:-2lvh;bottom:auto;height:104lvh}
 .journey .hero>.hero-shade,
 .journey .hero>.journey-veil,
 .journey .hero>.ending-world,
 .journey .sensory-studio{position:fixed;top:0;bottom:auto;height:100lvh}
}

/* Opt-in Safari trial: extend the existing artwork only. Native sticky layout,
   hero dimensions, gesture handling and content coordinates stay unchanged.
   Safari chrome still needs verification on a physical iPhone. */
@media(max-width:760px){
 html.scenery-bleed-trial .browser-edge{display:none}
 html.scenery-bleed-trial .journey .hero{
  overflow:visible;background:transparent;
 }
 html.scenery-bleed-trial .journey .hero>.worlds{
  position:absolute;top:calc(-1 * var(--gloup-safe-top) - 2lvh);
  bottom:auto;height:104lvh;overflow:hidden;
 }
 html.scenery-bleed-trial .journey .hero>.hero-shade,
 html.scenery-bleed-trial .journey .hero>.journey-veil,
 html.scenery-bleed-trial .journey .hero>.ending-world,
 html.scenery-bleed-trial .journey .sensory-studio{
  position:absolute;top:calc(-1 * var(--gloup-safe-top));
  bottom:auto;height:100lvh;
 }
 html.scenery-bleed-trial .sensory-stage{overflow:visible}
}

/* Start the browser canvas tint with the click, while the lobby still fades. */
@media(max-width:760px){
 html.flavor-entering,html.flavor-entering body{background:var(--browser-edge-color,var(--accent))}
}

/* Keep the fabrication entry visible while the experience is under maintenance. */
.lobby-fabrication-link{position:absolute;z-index:3;left:50%;top:calc(32% + var(--can-height) + 98px);transform:translateX(-50%);display:inline-flex;align-items:center;gap:22px;min-height:44px;padding:9px 20px;border:1px solid #241a1340;border-radius:99px;background:transparent;color:#241a13;text-decoration:none;white-space:nowrap;font:600 11px DM;transition:background .2s,color .2s}
.lobby-fabrication-link span{font-size:19px;color:#ff641d}
.lobby-fabrication-link:not(:disabled):hover{background:#241a13;color:#fff2d7}
.lobby-fabrication-link:focus-visible{outline:2px solid #ff641d;outline-offset:5px}
.is-entry-clean .lobby-fabrication-link{visibility:hidden}
@media(max-width:760px){.lobby-fabrication-link{top:calc(45% + var(--can-height) + 75px);font-size:10px;min-height:40px;padding:8px 18px;gap:18px}}
@media(max-width:760px) and (max-height:680px){.lobby-fabrication-link{top:calc(44% + var(--can-height) + 64px)}}
@media(min-width:761px) and (max-height:700px){.lobby-fabrication-link{top:calc(34% + var(--can-height) + 75px)}}

.lobby-fabrication-link:disabled{cursor:default;color:#706358;border-color:#241a1326;background:#241a1305;opacity:1;-webkit-text-fill-color:#706358}

/* Shared type scale for the eight chapters; lobby and product hero stay separate. */
.journey {
  --chapter-title-size: clamp(58px, 7.6vw, 138px);
  --chapter-subtitle-size: clamp(23px, 2.8vw, 43px);
  --chapter-copy-size: 14px;
  --chapter-eyebrow-size: 9px;
  --chapter-detail-size: 9px;
  --chapter-copy-leading: 1.8;
}

.journey .journey-scene[data-scene] h2 {
  font-size: var(--chapter-title-size);
  line-height: 1.05;
  letter-spacing: -.025em;
}

/* A title continued on a second line is still the same title size. */
.journey .journey-scene[data-scene] h2 span {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* Ingredient taglines form the smaller subtitle level. */
.journey .journey-scene[data-scene="1"] h2 span,
.journey .journey-scene[data-scene="2"] h2 span {
  font-size: var(--chapter-subtitle-size);
  line-height: 1.2;
  letter-spacing: 0;
}

.journey .journey-scene[data-scene] .journey-copy {
  font-size: var(--chapter-copy-size);
  line-height: var(--chapter-copy-leading);
}

.journey .journey-scene[data-scene] .journey-eyebrow {
  font-size: var(--chapter-eyebrow-size);
}

.journey .journey-scene[data-scene] .journey-detail {
  font-size: var(--chapter-detail-size);
  line-height: 1.7;
}

@media (max-width: 760px) {
  .journey {
    --chapter-title-size: 13vw;
    --chapter-subtitle-size: 6vw;
    --chapter-copy-size: 12px;
    --chapter-eyebrow-size: 7px;
    --chapter-detail-size: 8px;
    --chapter-copy-leading: 1.65;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  .journey {
    --chapter-title-size: 11vw;
    --chapter-subtitle-size: 5vw;
    --chapter-copy-size: 10px;
    --chapter-detail-size: 7px;
  }
}

@media (min-width: 761px) and (max-height: 650px) {
  .journey {
    --chapter-title-size: 10svh;
    --chapter-copy-size: 12px;
  }
}

/* Give the last-sip can more room between its upper and lower captions. */
.scene-finale .journey-eyebrow {
  top: max(84px, 10%);
}
.scene-finale .finale-caption {
  bottom: 8.5%;
}
.scene-finale .finale-caption p {
  margin: 0;
}
@media (max-width: 760px) {
  .scene-finale .journey-eyebrow {
    top: max(84px, 12%);
  }
  .scene-finale .finale-caption {
    bottom: max(94px, 11.5%);
  }
}

/* Keep the expanded FAQ readable without covering the chapter navigation. */
.journey .journey-scene.scene-faq {
  display: flex;
  flex-direction: column;
  max-height: calc(100svh - 180px);
}
.scene-faq > .journey-eyebrow,
.scene-faq > h2 {
  flex-shrink: 0;
}
.scene-faq .faq-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #fff2d770 transparent;
  padding-inline: 6px;
  margin-inline: -6px;
  scroll-padding-block: 8px;
}
.scene-faq .faq-list:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 6px;
}
/* Without the can, the questions own the full desktop/tablet chapter. */
@media (min-width: 761px) {
  .journey .journey-scene.scene-faq {
    left: 6%;
    right: 6%;
    top: 50%;
    width: auto;
    height: calc(100svh - 200px);
  }
  .scene-faq > .journey-eyebrow,
  .journey .scene-faq > h2 {
    text-align: center;
  }
  .scene-faq .faq-list {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .scene-faq .faq-list details {
    flex: 1 0 auto;
    align-content: center;
  }
  .scene-faq .faq-list summary {
    font-size: var(--chapter-copy-size);
    padding-block: 16px;
  }
  .scene-faq .faq-list details p {
    max-width: 80ch;
    font-size: var(--chapter-copy-size);
  }
}
@media (max-width: 760px) {
  .journey .journey-scene.scene-faq {
    max-height: calc(85svh - 104px);
  }
}