:root{--paper:#f1eee7;--ink:#1b1a18;--orange:#f36a30;--blue:#2047cf;--line:#1b1a183d;--display:'Space Grotesk',Arial,sans-serif;--sans:'DM Sans',Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
button,a{font:inherit;color:inherit}
button{cursor:pointer}
a{text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--orange);color:var(--ink)}
.skip-link{position:fixed;z-index:500;top:-80px;left:20px;padding:12px 18px;background:#fff;color:#000}.skip-link:focus{top:20px}
.progress{position:fixed;z-index:120;top:0;left:0;width:100%;height:4px;pointer-events:none}.progress span{display:block;width:100%;height:100%;background:var(--orange);transform:scaleX(var(--page-progress,0));transform-origin:left}
.site-header{position:fixed;z-index:100;top:0;left:0;right:0;height:82px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(20px,3.7vw,68px);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(20px);transition:background .3s,color .3s,border-color .3s}
.site-header.is-dark{--paper:#1b1a18;--line:#ffffff38;color:#f1eee7}
.wordmark{display:flex;align-items:center;gap:10px;width:max-content;font:700 13px/.88 var(--display);letter-spacing:-.05em}.mark{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:2px solid currentColor;font:700 20px/.8 var(--display);letter-spacing:-.16em}.mark span{transform:translateY(4px)}
.header-center{font:700 10px var(--sans);letter-spacing:.18em}.site-header nav{justify-self:end;display:flex;align-items:center;gap:clamp(18px,2vw,38px)}.site-header nav>a{font:700 10px var(--sans);letter-spacing:.08em;white-space:nowrap;transition:opacity .2s}.site-header nav>a:hover{opacity:.55}.site-header .header-pill{display:flex;align-items:center;gap:20px;padding:13px 16px;border:1px solid currentColor;border-radius:99px}.header-pill span{font-size:16px;line-height:.6}.menu-toggle{display:none}.mobile-menu[hidden]{display:none}
.opening{height:480vh}.opening-stage{--open-progress:0;position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;background:color-mix(in srgb,var(--paper) calc(100% - var(--orange-mix,0%)),var(--orange) var(--orange-mix,0%));isolation:isolate}
.stage-grid{position:absolute;inset:0;background:linear-gradient(to right,transparent calc(50% - .5px),#1b1a1814 50%,transparent calc(50% + .5px)),linear-gradient(to bottom,transparent calc(50% - .5px),#1b1a1814 50%,transparent calc(50% + .5px));opacity:.6;pointer-events:none}
.chapter-label{position:absolute;z-index:6;top:113px;left:clamp(24px,5.2vw,88px);display:flex;gap:28px;margin:0;font:700 11px var(--sans);letter-spacing:.14em}.chapter-label span{color:var(--orange)}
.hero-title{position:absolute;z-index:1;top:25%;left:50%;width:100%;transform:translate(-50%,-50%);text-align:center;font:700 clamp(54px,11.7vw,190px)/.78 var(--display);letter-spacing:-.09em;white-space:nowrap;pointer-events:none;transition:opacity .2s}.hero-title span,.hero-title strong{display:block;font-weight:700}.hero-title span{position:relative;left:-12.5vw}.hero-title strong{position:relative;left:7vw;color:var(--orange)}
.hero-aside{position:absolute;z-index:5;top:42%;left:clamp(24px,5.2vw,88px);margin:0;font:500 clamp(15px,1.3vw,19px)/1.3 var(--sans)}
.product-box{position:absolute;z-index:4;left:50%;top:55%;width:min(58vw,860px);height:min(72vh,700px);transform:translate(-50%,-50%) translateY(calc(var(--open-progress) * -7vh)) scale(calc(.74 + var(--open-progress) * .45));filter:drop-shadow(0 40px 38px #15120f38);pointer-events:none;will-change:transform}
.product-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:center;will-change:transform}.box-open{transform:translateY(calc((1 - var(--open-progress)) * 5vh)) rotate(calc((1 - var(--open-progress)) * -8deg))}
.reveal-copy{position:absolute;z-index:7;right:clamp(24px,5.2vw,88px);top:42%;display:grid;gap:22px;text-align:right;opacity:clamp(0,calc((var(--open-progress) - .35) * 2.1),1);transform:translateY(calc((1 - var(--open-progress)) * 28px));pointer-events:none}.reveal-copy span{font:700 11px/1.45 var(--sans);letter-spacing:.16em}.reveal-copy b{font:700 clamp(44px,7vw,110px)/.84 var(--display);letter-spacing:-.08em}
.stage-bottom{position:absolute;z-index:8;bottom:28px;left:clamp(24px,5.2vw,88px);right:clamp(24px,5.2vw,88px);display:flex;justify-content:space-between;align-items:center;margin:0;padding-top:13px;border-top:1px solid currentColor;font:700 11px var(--sans);letter-spacing:.13em}.stage-bottom i{display:inline-block;margin-left:22px;font-style:normal;font-size:20px;vertical-align:middle;animation:cue 1.8s infinite}@keyframes cue{50%{transform:translateY(7px)}}
.interlude{position:relative;min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:110px 6vw;background:var(--orange);text-align:center;overflow:hidden}.interlude .eyebrow{position:relative;z-index:2;margin:0 0 44px;font:800 11px var(--sans);letter-spacing:.17em}.interlude h2{position:relative;z-index:2;margin:0;font:700 clamp(52px,9vw,148px)/.91 var(--display);letter-spacing:-.075em}.interlude h2 em{font-family:Georgia,Gelasio,serif;font-weight:400;letter-spacing:-.07em}.asterisk{position:absolute;left:-4vw;bottom:-17vw;display:block;font:400 53vw/.8 Georgia,Gelasio,serif;color:#1b1a1812;transform:rotate(-18deg);pointer-events:none}
.lineup{padding:130px clamp(20px,5vw,88px) 160px;background:#1b1a18;color:#f1eee7}.section-heading{display:grid;grid-template-columns:1fr 2fr 1fr;gap:20px;align-items:start;margin-bottom:90px}.section-heading p,.section-heading>span{margin:0;font:700 11px/1.5 var(--sans);letter-spacing:.14em}.section-heading>span{text-align:right;align-self:end}.section-heading h2{margin:0;font:700 clamp(62px,8.4vw,136px)/.82 var(--display);letter-spacing:-.085em}.section-heading h2 em{font:400 .92em Georgia,Gelasio,serif;letter-spacing:-.08em;color:var(--orange)}
.lineup-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:18px}.lineup-card{min-width:0;display:flex;flex-direction:column;overflow:hidden;border-radius:3px}.main-card{background:#efeddf;color:var(--ink)}.soda-card{background:#f36a30;color:var(--ink)}.card-top,.card-foot{position:relative;z-index:2;display:flex;justify-content:space-between;gap:20px;padding:24px 28px}.card-top{font:700 11px var(--sans);letter-spacing:.14em}.card-art{position:relative;min-height:clamp(360px,46vw,660px);display:grid;place-items:center;overflow:hidden}.card-art::before{content:'';position:absolute;width:72%;aspect-ratio:1;border:1px solid currentColor;border-radius:50%;opacity:.14}.card-art img{position:relative;width:85%;height:90%;object-fit:contain;filter:drop-shadow(0 30px 20px #1b1a1833);transition:transform .5s cubic-bezier(.2,.8,.2,1)}.lineup-card:hover .card-art img{transform:scale(1.08) rotate(-3deg)}.type-art span{position:relative;z-index:2;display:block;font:700 clamp(100px,15vw,250px)/.7 var(--display);letter-spacing:-.13em;transform:rotate(-15deg);transition:transform .5s}.type-art i{position:absolute;z-index:2;right:12%;top:14%;font:400 clamp(70px,10vw,160px)/1 var(--display);font-style:normal;transition:transform .5s}.soda-card:hover .type-art span{transform:rotate(-5deg) scale(1.08)}.soda-card:hover .type-art i{transform:translate(15px,-15px)}.card-foot{align-items:end;padding-bottom:32px}.card-foot h3{margin:0;font:700 clamp(37px,4.4vw,70px)/.9 var(--display);letter-spacing:-.07em;white-space:nowrap}.card-foot p{max-width:235px;margin:0;font:500 14px/1.45 var(--sans)}
.soda-world{--soda-bg:#174cc8;--soda-accent:#fbbf39;height:230vh;background:var(--soda-bg);color:white;transition:background .6s}.soda-world[data-flavor=berry]{--soda-bg:#7a306d;--soda-accent:#ffacd9}.soda-world[data-flavor=cola]{--soda-bg:#8e3f16;--soda-accent:#ffe4a7}.soda-sticky{position:sticky;top:0;height:100svh;min-height:650px;overflow:hidden;isolation:isolate}.soda-sticky::before{content:'';position:absolute;left:55%;top:52%;width:min(55vw,750px);aspect-ratio:1;border:1px solid #ffffff60;border-radius:50%;transform:translate(-50%,-50%)}.soda-sticky::after{content:'';position:absolute;left:55%;top:52%;width:min(78vw,1070px);aspect-ratio:1;border:1px solid #ffffff34;border-radius:50%;transform:translate(-50%,-50%)}
.soda-kicker{position:absolute;z-index:5;top:122px;left:clamp(24px,5vw,88px);margin:0;font:700 11px var(--sans);letter-spacing:.16em}.soda-copy{position:absolute;z-index:6;left:clamp(24px,5vw,88px);top:50%;width:46%;transform:translateY(-43%)}.soda-copy h2{position:relative;z-index:2;margin:0;font:700 clamp(64px,8.8vw,142px)/.82 var(--display);letter-spacing:-.09em;white-space:nowrap}.soda-copy h2 em{color:var(--soda-accent);font-family:Georgia,Gelasio,serif;font-weight:400;letter-spacing:-.07em}.soda-copy>p{max-width:260px;margin:38px 0 40px;font:500 17px/1.45 var(--sans)}.flavor-picker{display:flex;flex-wrap:wrap;gap:9px}.flavor-picker button{display:flex;gap:13px;align-items:center;padding:12px 15px;border:1px solid #ffffff84;border-radius:99px;background:transparent;color:white;font:700 11px var(--sans);letter-spacing:.1em;transition:background .25s,color .25s,transform .25s}.flavor-picker button:hover{transform:translateY(-3px)}.flavor-picker button.active{background:white;color:#1b1a18;border-color:white}.flavor-picker button span{font-weight:800}
.can-wrap{position:absolute;z-index:4;right:1vw;top:51%;width:min(62vw,820px);height:80vh;transform:translateY(-50%) translateY(calc(var(--soda-progress,0) * -4vh));perspective:900px}.can-image{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(18px 40px 27px #071a655c);transform:rotate(-8deg) rotateY(calc(var(--tilt-y,0) * 10deg)) rotateX(calc(var(--tilt-x,0) * -8deg)) scale(calc(.89 + var(--soda-progress,0) * .14));transition:transform .18s ease-out}.can-shadow{position:absolute;left:24%;right:20%;bottom:7%;height:26px;border-radius:50%;background:#071a6580;filter:blur(14px)}.soda-side{position:absolute;z-index:7;right:clamp(20px,4vw,70px);bottom:46px;margin:0;text-align:right;font:700 11px/1.5 var(--sans);letter-spacing:.13em}.flavor-display{position:absolute;z-index:1;right:-.1em;bottom:-.25em;font:700 clamp(170px,25vw,400px)/.75 var(--display);letter-spacing:-.12em;opacity:.12;pointer-events:none}.soda-orbit span{position:absolute;z-index:1;width:17px;height:17px;border:1px solid var(--soda-accent);border-radius:50%;background:var(--soda-accent);box-shadow:0 0 0 9px #ffffff19;animation:float 4s ease-in-out infinite}.soda-orbit span:nth-child(1){top:18%;right:25%}.soda-orbit span:nth-child(2){top:38%;right:5%;width:10px;height:10px;animation-delay:-1.5s}.soda-orbit span:nth-child(3){bottom:25%;right:43%;width:8px;height:8px;animation-delay:-2.6s}.soda-orbit span:nth-child(4){bottom:10%;right:17%;width:12px;height:12px;animation-delay:-.7s}@keyframes float{50%{transform:translateY(-20px)}}
.can-wrap{position:absolute;z-index:4;right:1vw;top:51%;width:min(62vw,820px);height:80vh;transform:translateY(-50%) translateY(calc(var(--soda-progress,0) * -4vh));perspective:900px}.can-image{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(18px 40px 27px #071a655c);transform:rotate(-8deg) rotateY(calc(var(--tilt-y,0) * 10deg)) rotateX(calc(var(--tilt-x,0) * -8deg)) scale(calc(.89 + var(--soda-progress,0) * .14));transition:transform .18s ease-out}.can-canvas{position:absolute;z-index:3;inset:0;width:100%;height:100%;display:none;touch-action:pan-y;cursor:grab}.can-canvas:active{cursor:grabbing}.can-canvas:focus-visible{outline:2px solid white;outline-offset:-12px}.can-wrap.has-3d .can-canvas{display:block}.can-wrap.has-3d .can-image{display:none}.can-shadow{position:absolute;left:24%;right:20%;bottom:7%;height:26px;border-radius:50%;background:#071a6580;filter:blur(14px)}.soda-side{position:absolute;z-index:7;right:clamp(20px,4vw,70px);bottom:46px;margin:0;text-align:right;font:700 11px/1.5 var(--sans);letter-spacing:.13em}.flavor-display{position:absolute;z-index:1;right:-.1em;bottom:-.25em;font:700 clamp(170px,25vw,400px)/.75 var(--display);letter-spacing:-.12em;opacity:.12;pointer-events:none}.soda-orbit span{position:absolute;z-index:1;width:17px;height:17px;border:1px solid var(--soda-accent);border-radius:50%;background:var(--soda-accent);box-shadow:0 0 0 9px #ffffff19;animation:float 4s ease-in-out infinite}.soda-orbit span:nth-child(1){top:18%;right:25%}.soda-orbit span:nth-child(2){top:38%;right:5%;width:10px;height:10px;animation-delay:-1.5s}.soda-orbit span:nth-child(3){bottom:25%;right:43%;width:8px;height:8px;animation-delay:-2.6s}.soda-orbit span:nth-child(4){bottom:10%;right:17%;width:12px;height:12px;animation-delay:-.7s}@keyframes float{50%{transform:translateY(-20px)}}
.closing{position:relative;min-height:96vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:125px 5vw 40px;background:var(--paper);text-align:center}.closing-index{font:800 11px var(--sans);letter-spacing:.17em}.closing h2{margin:56px 0 20px;font:700 clamp(56px,10vw,160px)/.81 var(--display);letter-spacing:-.09em}.closing h2 em{color:var(--orange);font:400 .89em Georgia,Gelasio,serif;letter-spacing:-.08em}.closing>p{font:500 18px/1.5 var(--sans)}.restart{display:flex;gap:45px;align-items:center;margin:38px auto 80px;padding:17px 24px;border:1px solid currentColor;border-radius:99px;font:800 12px var(--sans);letter-spacing:.1em;transition:background .2s,color .2s}.restart:hover{background:var(--ink);color:var(--paper)}.closing-foot{width:100%;display:flex;justify-content:space-between;align-items:end;gap:20px;margin-top:auto;padding-top:22px;border-top:1px solid var(--line);text-align:left;font:700 10px/1.5 var(--sans);letter-spacing:.1em}.closing-foot span:nth-child(2){text-align:center}.closing-foot span:last-child{text-align:right}
@media(max-width:1050px){.header-center{display:none}.site-header{grid-template-columns:1fr auto}.site-header nav{gap:18px}.section-heading{grid-template-columns:1fr 2fr}.section-heading>span{display:none}.hero-title{font-size:12vw}.product-box{width:min(75vw,760px)}.lineup-grid{grid-template-columns:1fr 1fr}.card-foot{display:block}.card-foot p{margin-top:20px}}
@media(max-width:700px){.site-header{height:70px;padding:0 18px}.site-header nav{display:none}.menu-toggle{display:grid;justify-self:end;place-content:center;gap:6px;width:42px;height:42px;border:1px solid currentColor;border-radius:50%;background:none}.menu-toggle span{display:block;width:17px;height:1px;background:currentColor}.mobile-menu{position:fixed;z-index:95;inset:70px 0 auto;display:grid;padding:22px;background:var(--ink);color:var(--paper);box-shadow:0 20px 30px #0003}.mobile-menu a{padding:16px 6px;border-bottom:1px solid #ffffff44;font:700 22px var(--display)}.opening-stage{min-height:520px}.chapter-label{top:94px;left:19px;gap:14px;font-size:10px}.hero-title{top:30%;font-size:clamp(45px,13vw,86px);white-space:normal}.hero-title span{left:-5vw}.hero-title strong{left:1vw}.hero-aside{top:42%;left:20px;font-size:13px}.product-box{top:61%;width:116vw;height:60vh;max-height:550px;transform:translate(-50%,-50%) translateY(calc(var(--open-progress) * -5vh)) scale(calc(.73 + var(--open-progress) * .25))}.reveal-copy{top:auto;bottom:100px;right:20px;gap:9px}.reveal-copy b{font-size:48px}.reveal-copy span{font-size:10px}.stage-bottom{left:20px;right:20px;bottom:20px;font-size:10px}.interlude{min-height:70vh;padding:100px 18px}.interlude h2{font-size:clamp(45px,10vw,82px)}.interlude .eyebrow{font-size:10px}.lineup{padding:90px 18px 100px}.section-heading{display:block;margin-bottom:45px}.section-heading p{font-size:10px;margin-bottom:36px}.section-heading h2{font-size:clamp(58px,12vw,88px)}.lineup-grid{grid-template-columns:1fr;gap:14px}.card-art{min-height:390px}.soda-world{height:200vh}.soda-sticky{min-height:620px}.soda-kicker{top:90px;left:20px;font-size:10px}.soda-copy{top:26%;left:20px;right:20px;width:auto;transform:none}.soda-copy h2{font-size:clamp(50px,12vw,78px)}.soda-copy>p{margin:24px 0 20px;font-size:14px;max-width:220px}.flavor-picker{gap:6px}.flavor-picker button{padding:9px 10px;font-size:10px;gap:5px}.can-wrap{right:-25vw;top:69%;width:100vw;height:57vh;min-height:350px}.soda-sticky::before{left:63%;top:69%;width:95vw}.soda-sticky::after{left:63%;top:69%;width:135vw}.soda-side{right:18px;bottom:28px;font-size:10px}.flavor-display{font-size:49vw;bottom:4%}.closing{min-height:84vh;padding:100px 18px 28px}.closing-index{font-size:10px}.closing h2{font-size:clamp(50px,13vw,90px)}.closing>p{font-size:15px}.closing-foot{display:grid;grid-template-columns:1fr 1fr;font-size:10px}.closing-foot span:nth-child(2){grid-column:1/-1;grid-row:2;text-align:left}.closing-foot span:last-child{text-align:right}}
@media(max-width:420px){.hero-title{font-size:14vw}.product-box{top:59%;width:128vw}.reveal-copy b{font-size:40px}.soda-copy h2{font-size:13vw}.soda-copy>p{max-width:200px}.can-wrap{right:-32vw;top:72%}.card-art{min-height:345px}}
@media(max-width:700px){.hero-aside{top:36%}.flavor-picker button{min-height:44px;gap:0;padding:10px 12px;font-size:0}.flavor-picker button span{font-size:12px;letter-spacing:.02em}.can-wrap{right:-16vw}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}.opening{height:auto}.opening-stage{position:relative;height:100svh}.box-open{transform:none}.product-box{transform:translate(-50%,-50%) scale(.9)}.reveal-copy{opacity:1;transform:none}.hero-title{opacity:.35}.soda-world{height:auto}.soda-sticky{position:relative;height:100svh}.can-image{transform:rotate(-8deg)}}

/* Burger scene layout and controls; the final CGI layer treatment follows below. */
.burger-dive{height:270vh;background:#191816;color:#f1eee7}
.burger-stage{--stack-open:0;position:sticky;top:0;height:100svh;min-height:650px;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 66% 55%,#403428 0,#26221d 38%,#191816 75%)}
.burger-stage::before{content:'THE STACK';position:absolute;z-index:-1;left:7%;bottom:-.23em;font:700 clamp(170px,28vw,470px)/.8 var(--display);letter-spacing:-.14em;white-space:nowrap;color:#ffffff08;pointer-events:none}
.burger-kicker{position:absolute;z-index:10;top:124px;left:clamp(24px,5vw,88px);margin:0;font:700 11px var(--sans);letter-spacing:.16em;color:var(--orange)}
.burger-copy{position:absolute;z-index:10;top:42%;left:clamp(24px,5vw,88px);width:min(43vw,640px);transform:translateY(-50%)}
.burger-copy h2{margin:0;font:700 clamp(58px,8vw,122px)/.83 var(--display);letter-spacing:-.09em;white-space:nowrap}
.burger-copy h2 em{font:400 .9em Georgia,Gelasio,serif;letter-spacing:-.07em;color:var(--orange)}
.burger-copy p{max-width:290px;margin:32px 0 28px;font:500 17px/1.45 var(--sans)}
.stack-toggle{display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:48px;padding:13px 18px;border:1px solid #f1eee7;border-radius:99px;background:transparent;color:#f1eee7;font:800 11px var(--sans);letter-spacing:.1em;transition:background .25s,color .25s,transform .25s}
.stack-toggle:hover{background:#f1eee7;color:#191816;transform:translateY(-3px)}
.stack-toggle:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.stack-toggle span{font-size:18px;line-height:.8}
.burger-scene{position:absolute;z-index:4;right:-11vw;top:51%;width:min(80vw,1180px);aspect-ratio:1;transform:translateY(-50%) scale(1.12);pointer-events:none;filter:drop-shadow(0 35px 30px #0005)}
.burger-layer{position:absolute;inset:0;transform-origin:40% 59%;will-change:transform;filter:drop-shadow(0 13px 8px #0007);transition:transform .45s cubic-bezier(.18,.8,.2,1)}
.layer-top{z-index:5;clip-path:polygon(18% 56%,18% 52%,20% 48%,23% 45%,28% 42%,34% 41%,42% 41%,48% 42%,53% 44%,56% 48%,57% 52%,56% 55%,51% 56%,45% 57%,36% 58%,27% 59%,21% 58%);transform:translate3d(calc(var(--stack-open) * -1vw),calc(var(--stack-open) * -13vh),0) rotate(calc(var(--stack-open) * -5deg))}
.layer-greens{z-index:4;clip-path:polygon(20% 57%,25% 55%,32% 55%,39% 55%,46% 54%,53% 54%,58% 55%,58% 59%,54% 60%,47% 61%,39% 61%,32% 63%,26% 63%,21% 61%);transform:translate3d(calc(var(--stack-open) * 1vw),calc(var(--stack-open) * -6vh),0) rotate(calc(var(--stack-open) * 3deg))}
.layer-tomato{z-index:3;clip-path:polygon(21% 61%,26% 60%,34% 59%,43% 58%,50% 58%,56% 59%,58% 62%,57% 65%,50% 66%,42% 65%,34% 65%,27% 64%,22% 63%);transform:translate3d(calc(var(--stack-open) * -1vw),calc(var(--stack-open) * 0vh),0) rotate(calc(var(--stack-open) * -2deg))}
.layer-patty{z-index:2;clip-path:polygon(23% 65%,28% 64%,36% 63%,44% 62%,53% 62%,58% 64%,59% 67%,57% 72%,51% 74%,43% 73%,35% 74%,29% 72%,25% 69%);transform:translate3d(calc(var(--stack-open) * 1vw),calc(var(--stack-open) * 6vh),0) rotate(calc(var(--stack-open) * 2deg))}
.layer-bottom{z-index:1;clip-path:polygon(25% 71%,30% 70%,37% 70%,45% 69%,53% 68%,59% 69%,59% 73%,55% 76%,48% 77%,39% 78%,32% 77%,27% 75%);transform:translate3d(calc(var(--stack-open) * -1vw),calc(var(--stack-open) * 12vh),0) rotate(calc(var(--stack-open) * -3deg))}
.ingredient{position:absolute;z-index:8;left:63%;width:190px;padding:8px 0;border-top:1px solid #f1eee7aa;font:800 11px var(--sans);letter-spacing:.13em;color:#f1eee7;opacity:clamp(0,calc((var(--stack-open) - .52) * 2.4),1);transform:translateX(calc((1 - var(--stack-open)) * 18px));transition:opacity .25s,transform .25s}
.ingredient-top{top:31%}.ingredient-greens{top:45%}.ingredient-tomato{top:57%}.ingredient-patty{top:70%}
.burger-foot{position:absolute;z-index:10;left:clamp(24px,5vw,88px);right:clamp(24px,5vw,88px);bottom:30px;display:flex;justify-content:space-between;padding-top:14px;border-top:1px solid #f1eee77a;font:700 10px var(--sans);letter-spacing:.15em}
@media(max-width:1050px){.burger-copy h2{font-size:8vw}.burger-scene{right:-22vw;width:93vw}.ingredient{left:58%}}
@media(max-width:700px){.burger-dive{height:230vh}.burger-stage{min-height:620px;background:radial-gradient(circle at 50% 66%,#403428 0,#26221d 35%,#191816 80%)}.burger-kicker{top:93px;left:20px;font-size:10px}.burger-copy{top:22%;left:20px;right:20px;width:auto;transform:none}.burger-copy h2{font-size:clamp(48px,12vw,74px)}.burger-copy p{max-width:250px;margin:17px 0 16px;font-size:14px}.stack-toggle{min-height:44px;padding:10px 14px;font-size:10px}.burger-scene{left:50%;right:auto;top:64%;width:min(175vw,700px);transform:translate(-39%,-50%)}.layer-bottom{transform:translate3d(calc(var(--stack-open) * -1vw),calc(var(--stack-open) * 9vh),0) rotate(calc(var(--stack-open) * -3deg))}.ingredient{left:50%;width:120px;padding:5px 0;font-size:12px;letter-spacing:0;line-height:1.2}.ingredient-top{top:28%}.ingredient-greens{top:43%}.ingredient-tomato{top:57%}.ingredient-patty{top:72%}.burger-foot{left:20px;right:20px;bottom:20px;font-size:10px}.burger-stage::before{bottom:7%;font-size:49vw}}
@media(max-width:420px){.burger-copy{top:21%}.burger-copy h2{font-size:12vw}.burger-copy p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.burger-dive{height:auto}.burger-stage{position:relative;height:100svh}.burger-layer{transition:none}.ingredient{transition:none}}

/* Burger product CGI: independent ingredient bands from one coherent 3D render. */
.burger-stage{background:radial-gradient(circle at 73% 52%,#37271e 0,#211c19 42%,#171615 79%)}
.burger-scene{right:7vw;top:55%;width:min(40vw,57svh,550px);aspect-ratio:2/3;transform:translateY(-50%);filter:none}
/* Burger: five whole ingredients from one CGI atlas (SIDEQUEST asset pack v1). Each layer is cropped to its own
   box, so it tips around its own centre; offsets are cqh (% of the burger's height), written by app.js as springs */
.burger-scene{container-type:size;transform-origin:50% 60.5%} /* phones zoom the closed burger around its own middle */
.burger-layer{inset:auto 0;background:url('./assets/burger-layers-v1.webp') 0 var(--bg-y)/100% var(--bg-h) no-repeat;clip-path:none;filter:none;-webkit-mask-image:none;mask-image:none;transform-origin:50% 50%;transform:translate3d(0,calc(((1 - var(--stack-open)) * var(--closed) + var(--stack-open) * var(--spread)) * 1cqh),0)}
.layer-top{--closed:30.3;--spread:-2.5;--bg-y:3.506%;--bg-h:388.861%;z-index:5;top:2.604%;height:25.716%;background:none}
.layer-greens{--closed:16.2;--spread:-1;--bg-y:35.568%;--bg-h:490.735%;z-index:4;top:28.32%;height:20.378%}
.layer-pickles{--closed:8.2;--spread:0;--bg-y:55.162%;--bg-h:853.333%;z-index:3;top:48.698%;height:11.719%}
.layer-beef{--closed:0;--spread:1;--bg-y:76.568%;--bg-h:474.074%;z-index:2;top:60.417%;height:21.094%}
.layer-bottom{--closed:-11;--spread:2;--bg-y:100%;--bg-h:540.845%;z-index:1;top:81.51%;height:18.49%}
/* the atlas shows the top bun from below; closed, its pale underside would sit on the lettuce, so a mask keeps
   only the crust and the full bun fades in as it lifts (--under, set per frame in app.js) */
.layer-top::before,.layer-top::after{content:'';position:absolute;inset:0;background:url('./assets/burger-layers-v1.webp') 0 var(--bg-y)/100% var(--bg-h) no-repeat}
.layer-top::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 395' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3Cpath filter='url(%23f)' d='M-20-20H1044V365H954L930 351 890 339 830 328 760 319 680 312 600 307 520 304 450 303 350 304 250 307 180 311 130 319 100 329 86 338H-20Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 395' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3Cpath filter='url(%23f)' d='M-20-20H1044V365H954L930 351 890 339 830 328 760 319 680 312 600 307 520 304 450 303 350 304 250 307 180 311 130 319 100 329 86 338H-20Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.layer-top::after{opacity:var(--under,var(--stack-open));will-change:opacity}
.ingredient{left:85%;width:150px;font-size:12px;letter-spacing:.08em}
.ingredient-top{top:13.5%}.ingredient-greens{top:36%}.ingredient-pickles{top:52.5%}.ingredient-beef{top:68.5%}
@media(max-width:1050px){.burger-scene{right:2vw;width:min(44vw,54svh,520px)}.ingredient{left:79%}}
@media(max-width:700px){.burger-stage{background:radial-gradient(circle at 50% 63%,#3a271c 0,#211c19 40%,#171615 80%)}.burger-scene{left:50%;right:auto;top:65%;width:min(90vw,43svh);transform:translate(-50%,-50%)}.ingredient{display:none}}
@media(max-width:420px){.burger-copy{top:13%}.burger-scene{top:66%}}

/* Portfolio return link (added for kevinantonius.com) */
.ka-back{position:fixed;z-index:9999;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:#10151b;color:#f2f0ea;font:600 11px/1 "Instrument Sans",Arial,Helvetica,sans-serif;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;box-shadow:0 10px 30px -12px rgba(0,0,0,.6);transition:transform .35s cubic-bezier(.22,1,.36,1)}.ka-back:hover{transform:translateX(-3px)}.ka-back:focus-visible{outline:2px solid #e8b26c;outline-offset:4px}@media print{.ka-back{display:none}}@media(max-width:1050px){.ka-back{left:50%;bottom:auto;top:12px;transform:translateX(-50%)}.ka-back:hover{transform:translateX(calc(-50% - 3px))}}@media(max-width:560px){.ka-back{width:44px;padding:0;justify-content:center;font-size:16px;letter-spacing:0}.ka-back-text{display:none}}

/* ── Upgrade layer (ui-ux-pro-max, Kevin's direction) ─────────────────────── */
/* brand orange stays for fills; orange TEXT on paper uses the same hue at a readable depth */
:root{--orange-lg:#e54d0d;--orange-sm:#be400b}
.chapter-label span{color:var(--orange-sm)}
.hero-title strong,.closing h2 em{color:var(--orange-lg)}
picture{display:contents}
/* single-pointer alternative to dragging the can (WCAG 2.2 dragging movements) */
.can-controls{position:absolute;z-index:5;left:50%;bottom:clamp(12px,3vh,28px);transform:translateX(-50%);display:flex;gap:10px}
.can-controls[hidden]{display:none}
.can-controls button{width:48px;height:48px;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;font:600 18px/1 var(--sans);cursor:pointer;transition:transform .35s cubic-bezier(.22,1,.36,1),background-color .3s}
.can-controls button:hover{background:#ffffff1f}
.can-controls button:active{transform:scale(.94)}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.can-controls button{transition:none}}

/* the kicker now rides in the copy block: never collides with the headline */
.burger-copy .burger-kicker{position:static;margin:0 0 22px;top:auto;left:auto}
/* portfolio link: inside the header wherever the nav shows; floating pill only on phones */
.header-back{display:inline-flex;align-items:center;gap:6px;padding-right:18px;border-right:1px solid currentColor}
@media (min-width:701px){.ka-back{display:none}}
.burger-copy .burger-kicker{font:700 11px/1.4 var(--sans);letter-spacing:.16em;color:var(--orange);max-width:none}
.site-header .wordmark,.menu-toggle{position:relative}
.site-header .wordmark::after,.menu-toggle::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,48px);height:48px;transform:translate(-50%,-50%)}

@media (max-width:700px){}
@media (max-width:700px){}
/* portfolio link sits beside the wordmark, clear of the centred tagline */
.header-left{display:flex;align-items:center;gap:22px}
.header-back{padding:0 0 0 22px;border-right:0;border-left:1px solid currentColor;font:700 10px var(--sans);letter-spacing:.08em;white-space:nowrap;min-height:44px}
@media (max-width:700px){.header-back{display:none}}
/* burger bands are moved by spring physics in app.js; CSS no longer tweens them */
.spring .burger-layer{transition:none;will-change:transform}
.spring .ingredient{transition:opacity .3s;will-change:transform}
/* phones: the opened stack fits between the button and the footer line */
@media(max-width:700px){.burger-scene{width:min(80vw,34svh);top:68%}}
/* tablets: labels overlapped the burger and ran off the right edge; the stack speaks for itself */
@media(max-width:1050px){.ingredient{display:none}}
/* desktop labels stay on screen: never past the viewport edge, never over the burger */
@media(min-width:1051px){.ingredient{width:150px;left:calc(100% + 12px)}}
/* the atlas ingredients fill the burger's width, so labels only show where app.js found room beside it */
.no-labels .ingredient{display:none}
/* short desktop windows: the opened stack stays clear of the footer text */
@media(min-width:701px) and (max-height:700px){.burger-scene{width:min(40vw,48svh,550px)}}
/* Photoreal can (asset pack v1): three renders crossfade by mood; app.js/can-photo.js move the stack on springs.
   They show until the 3D can (can.js) takes over, and stay as the fallback when WebGL is unavailable */
.can-photo{position:absolute;z-index:2;inset:0;transform-origin:50% 60%;will-change:transform}
.can-photo .can-image{opacity:0;transform:rotate(-8deg) scale(calc(.8 + var(--soda-progress,0) * .12));transition:opacity .45s cubic-bezier(.22,1,.36,1)}
.can-photo .can-image.is-active{opacity:1}
.soda-world[data-flavor=berry] .can-image{filter:drop-shadow(18px 40px 27px #2c0a285c)}
.soda-world[data-flavor=cola] .can-image{filter:drop-shadow(18px 40px 27px #3a13055c)}
.can-bubbles{position:absolute;z-index:1;inset:-4% -8%;width:116%;height:108%;pointer-events:none}
.can-wrap.has-3d .can-photo{display:none}
@media(prefers-reduced-motion:reduce){.can-photo .can-image{transform:rotate(-8deg) scale(.86)}.can-bubbles{display:none}}
/* phones and portrait tablets stack the copy over the can; app.js fits the can into the space left below */
#flavor-note{min-height:calc(2 * 1.45em)} /* every mood note is two lines at every width (measured 320-1440), so switching never moves the buttons */
@media(min-width:701px) and (max-width:1050px) and (max-aspect-ratio:4/5){.soda-copy{top:24%;right:5vw;width:auto;transform:none}}
@media(max-width:700px) and (max-height:640px){.soda-copy{top:19%}.soda-copy>p{margin:14px 0 12px}}
@media(max-width:700px),(max-width:1050px) and (max-aspect-ratio:4/5){.can-wrap{transform:translateY(-50%)}}

/* 3D can: the rotate buttons stand beside the can's lower half, never on it (cqh = % of the can stage's height;
   the can is ~34% of that height wide) */
.can-wrap.has-3d{container-type:size}
.has-3d .can-controls{left:auto;right:calc(50% + 18cqh + 12px);bottom:14cqh;transform:none;flex-direction:column}