/* BITE product film — generated product layers, animated in native scroll space. */
body{--hero-ink:#332017}
header{color:var(--hero-ink);border-color:#33201726}header .bag{border-color:#33201755}header .bag span{background:var(--hero-ink);color:var(--cream)}
.hero-scroll{height:420svh;background:#efe6de}.hero{height:100svh;min-height:0;max-height:none;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 89% 47%,#deb5bf 0,transparent 49%),linear-gradient(115deg,#f6efe3 32%,#dfd6cf 100%);color:var(--hero-ink);padding:125px 4% 28px}.hero:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 90%,#a5918845,transparent 30%);z-index:-1;pointer-events:none}.hero-kicker{position:relative;z-index:5;font-size:12px}.hero h1{position:absolute;top:22%;left:4%;font-size:clamp(85px,9.6vw,150px);line-height:.88;margin:0;max-width:51%;letter-spacing:-.025em;z-index:4;pointer-events:none;text-shadow:none}.hero h1 em{color:#e85f31}.hero-subcopy{position:absolute;left:4.3%;top:56%;max-width:27%;font-size:16px;line-height:1.6;z-index:4}.hero .hero-bottom{bottom:75px;align-items:center;z-index:6}.hero-bottom>p{display:none}.hero-bottom .button{background:var(--chocolate);color:var(--cream);gap:45px}.hero-bottom .button:hover{background:var(--orange)}.hero-bottom .scroll-cue{font-size:12px;margin-right:0}.hero-side{display:none}.hero-timeline{color:var(--chocolate);font-size:11px;z-index:6;bottom:26px}.hero-timeline i{background:#33201726;max-width:400px}.hero-timeline b{background:var(--orange)}.hero-pause{top:153px;right:4%;color:var(--chocolate);background:#f6efe370;border-color:#33201735;font-size:12px;z-index:8}.hero-pause[aria-pressed=true]{background:var(--chocolate);color:var(--cream)}
.product-film{position:absolute;width:51%;height:70%;right:0;top:15%;perspective:1200px;transform-style:preserve-3d;z-index:3;pointer-events:none}.film-camera{position:absolute;inset:0;transform-style:preserve-3d}.bar-rig{position:absolute;top:12%;width:23%;height:72%;transform-origin:50% 55%;will-change:transform;transform-style:preserve-3d}.bar-rig.rig-0{left:12%;z-index:2;transform:rotate(-15deg) translateY(16%)}.bar-rig.rig-1{left:38%;z-index:4;transform:rotate(4deg)}.bar-rig.rig-2{left:65%;z-index:3;transform:rotate(13deg) translateY(-6%)}.bar-core{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(9px 20px 15px #32201d25);opacity:1;transform-origin:50% 50%}.wrapper-layer{position:absolute;inset:-4% -10%;z-index:3;overflow:visible;will-change:transform,opacity}.wrapper-layer img{position:absolute;left:50%;top:50%;width:245%;height:auto;max-width:none;transform:translate(-50%,-50%) rotate(-90deg);filter:drop-shadow(6px 8px 8px #34221826)}.wrapper-seal{clip-path:inset(0 0 85% 0);z-index:4}.wrapper-sleeve{clip-path:inset(14.5% 0 0 0)}.ingredient-sprite{position:absolute;object-fit:contain;width:12%;height:16%;z-index:5;filter:drop-shadow(7px 12px 9px #30201728);pointer-events:none;will-change:transform,opacity}.ingredient-sprite.float-0{left:9%;top:8%;width:13%}.ingredient-sprite.float-1{left:73%;top:0;width:14%}.ingredient-sprite.float-2{left:90%;top:50%;width:10%}.ingredient-sprite.float-3{left:18%;top:83%;width:11%}.ingredient-sprite.float-4{left:48%;top:91%;width:9%}.ingredient-sprite.float-5{left:88%;top:22%;width:9%}.ingredient-sprite.float-6{left:40%;top:-3%;width:9%}.ingredient-sprite.float-7{left:82%;top:86%;width:9%}.film-ground-shadow{position:absolute;width:63%;height:5%;left:21%;bottom:0;background:#33201b3b;border-radius:50%;filter:blur(14px);transform-origin:center;z-index:0}.film-stage-caption{position:absolute;right:4.5%;bottom:18%;font-size:12px;letter-spacing:.1em;color:#5f4234;z-index:5}.film-step-copy{position:absolute;top:61%;left:4.3%;font-family:var(--display);font-size:34px;max-width:32%;color:#74503d;line-height:1.05;z-index:4}.film-step-copy p{font-size:16px;font-family:var(--body);line-height:1.6;margin-top:15px;max-width:300px}.hero h1,.hero-subcopy,.film-step-copy{will-change:transform,opacity}
.pack,.pack-orange,.pack-yellow,.pack-cream,.pack-pink,.flavor-card.chocolate .pack{background-size:contain!important;background-position:center!important;background-repeat:no-repeat;background-color:transparent;mix-blend-mode:normal;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(6px 16px 10px #33201824);aspect-ratio:2.8!important}.pack-orange,.flavor-card.chocolate .pack{background-image:url('assets/branded/wrapper-chocolate.webp')}.pack-yellow{background-image:url('assets/branded/wrapper-peanut.webp')}.pack-cream{background-image:url('assets/branded/wrapper-almond.webp')}.pack-pink{background-image:url('assets/branded/wrapper-berry.webp')}.meet-pack{height:270px;transform:rotate(-15deg);max-width:none}.flavor-card .pack{height:auto;min-height:170px;margin:20px 0;transform:rotate(-8deg)}.final-packs .pack{border:0;filter:drop-shadow(6px 16px 10px #773a2629)}
.story-product-rebuild{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;z-index:10;opacity:0;transform:translateY(30px) rotate(-12deg) scale(.6);transition:transform .8s,opacity .6s;filter:drop-shadow(10px 24px 18px #33201730);pointer-events:none}.photo-story.rebuild .story-product-rebuild{opacity:1;transform:translateY(0) rotate(-12deg) scale(1)}.photo-story.rebuild .story-photo{opacity:.25;width:32%;height:24%}.photo-story.rebuild .story-photo:nth-child(1){left:1%;top:0}.photo-story.rebuild .story-photo:nth-child(2){left:69%;top:0}.photo-story.rebuild .story-photo:nth-child(3){left:-1%;top:41%}.photo-story.rebuild .story-photo:nth-child(4){left:71%;top:40%}.photo-story.rebuild .story-photo:nth-child(5){left:5%;top:78%}.photo-story.rebuild .story-photo:nth-child(6){left:65%;top:79%}
@media(max-width:1000px){.hero h1{font-size:10vw;top:25%;max-width:53%}.hero-subcopy{top:53%;max-width:33%}.hero-pause{top:150px}.product-film{width:53%;height:63%;top:24%;right:-2%}.film-step-copy{top:61%;font-size:30px}.film-stage-caption{bottom:16%;font-size:10px}.flavor-card .pack{min-height:140px}}
@media(max-width:760px){.hero{padding:105px 6% 24px}.hero-scroll{height:400svh}.hero-kicker{font-size:10px;max-width:65%}.hero h1{top:20%;left:6%;max-width:88%;font-size:clamp(62px,14vw,105px);line-height:.87;z-index:5}.hero-subcopy{top:43%;left:6%;max-width:46%;font-size:13px;line-height:1.5}.product-film{top:38%;right:0;width:88%;height:46%;z-index:3}.hero-pause{top:100px;right:6%;padding:8px 11px;font-size:10px}.bar-rig{width:20%;height:75%;top:8%}.bar-rig.rig-0{left:12%}.bar-rig.rig-1{left:39%}.bar-rig.rig-2{left:67%}.hero-bottom{left:6%;right:6%;bottom:61px!important;display:flex;justify-content:space-between}.hero-bottom .button{padding:14px 20px;gap:24px;font-size:13px}.hero-bottom .scroll-cue{display:none}.hero-timeline{left:6%;right:6%;bottom:23px;font-size:9px;gap:12px}.hero-timeline i{max-width:100px}.hero-timeline>span:last-child{font-size:8px}.film-stage-caption{bottom:10%;right:6%;font-size:9px;max-width:135px;text-align:right}.film-step-copy{top:39%;left:6%;font-size:28px;max-width:40%;z-index:5}.film-step-copy p{font-size:12px;margin-top:9px}.film-ground-shadow{bottom:1%;left:25%;width:61%;height:4%;filter:blur(9px)}.ingredient-sprite{width:11%}.meet-pack{height:180px;transform:rotate(-10deg)!important}.flavor-card .pack{min-height:125px;margin:18px 0}.final-packs .pack{height:145px}.story-product-rebuild{inset:4%;width:92%;height:92%}}
@media(max-height:700px) and (min-width:761px){.hero{padding-top:110px}.hero h1{top:28%;font-size:min(10vw,18vh);max-width:53%}.hero-subcopy{top:58%;font-size:14px}.product-film{top:19%;height:68%;width:47%}.hero-pause{top:137px}.film-step-copy{top:63%;font-size:27px}.film-step-copy p{display:none}.film-stage-caption{bottom:17%}.flavor-card .pack{min-height:90px;height:110px}}
@media(max-height:700px) and (max-width:760px){.hero h1{top:23%;font-size:min(13vw,13vh);max-width:82%}.hero-subcopy{top:49%;max-width:31%;font-size:12px}.product-film{top:37%;height:46%;width:72%;right:0}.film-step-copy{top:50%;max-width:31%;font-size:23px}.film-step-copy p{display:none}.hero-bottom{bottom:52px!important}.film-stage-caption{bottom:15%}.hero-pause{top:100px}.hero h1,.hero-subcopy,.film-step-copy{z-index:5}.hero-timeline{bottom:18px}}
@media(prefers-reduced-motion:reduce){.hero-scroll{height:auto}.hero{position:relative;min-height:700px}.hero-pause,.hero-timeline,.film-step-copy{display:none}.product-film *{will-change:auto!important}.wrapper-layer{opacity:1}.film-stage-caption{bottom:10%;}.hero-bottom{bottom:35px!important}.film-step-copy{opacity:0}.story-product-rebuild{transition:none}}

/* Keep the product in a single stacking plane: foil always covers the bar. */
.bar-rig{transform-style:flat;isolation:isolate}
.bar-core{z-index:0;inset:8% 12%;width:76%;height:84%;visibility:hidden}
.wrapper-layer{transform-style:flat}
.ingredient-sprite{opacity:0}

/* A compact text column beside a bounded ingredient / finished-product stage. */
.ingredient-scroll{height:460svh}
.ingredient-stage{display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);grid-template-rows:auto 1fr;column-gap:5%;row-gap:28px;padding:48px 5% 76px;align-content:start}
.stage-heading{grid-column:1;max-width:none;align-self:end}
.stage-heading h2{font-size:clamp(52px,5.4vw,86px);margin-top:14px}
.ingredient-detail{position:relative;grid-column:1;grid-row:2;inset:auto;width:100%;max-width:350px;align-self:start}
.ingredient-detail h3{font-size:clamp(32px,3.2vw,48px);margin:10px 0 12px}
.ingredient-detail p{font-size:16px;line-height:1.5}
.film-controls{margin-top:16px}
.film-controls button{min-height:44px}
.photo-story,.photo-story.rebuild{position:relative;grid-column:2;grid-row:1 / 3;inset:auto;width:100%;height:100%;min-height:0;align-self:stretch;overflow:hidden;isolation:isolate}
.photo-story .story-product-rebuild{inset:18% 10%;width:80%;height:64%;object-fit:contain;mix-blend-mode:normal;transform:translateY(20px) rotate(-8deg) scale(.85)}
.photo-story.rebuild .story-product-rebuild{transform:translateY(0) rotate(-8deg) scale(1);opacity:1}
.photo-story.rebuild .story-photo{opacity:0;visibility:hidden}
.stage-footer{bottom:28px}
.problem{min-height:0;padding:72px 6%}
.problem h2{margin:28px 0;font-size:clamp(70px,9vw,135px)}
.problem-end{margin-top:36px}
.meet{padding:72px 5%}
.meet h2{margin-top:18px}
.meet-layout{margin-top:28px;gap:28px}
.ingredient-accessible{padding:48px 5%}
.ingredient-accessible h2{margin-bottom:24px}
#ingredient-list{gap:24px}
#ingredient-list article{padding-top:14px}
.lifestyle{padding-top:64px}
.life-heading{padding-bottom:32px}
.life-heading h2{margin-top:18px}
.final{padding:64px 5% 48px}
.final h2{margin-top:20px}
.final-packs{width:100%;height:auto;min-height:170px;gap:20px;margin:24px auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center}
.final-packs .pack{width:100%;height:auto;margin:0;transform:rotate(-6deg)}
.final-packs .pack:nth-child(2),.final-packs .pack:nth-child(3),.final-packs .pack:nth-child(4){transform:rotate(6deg)}
@media(max-width:760px){
 .ingredient-stage{padding:28px 6% 64px;grid-template-columns:1fr;grid-template-rows:auto minmax(100px,1fr) auto;gap:18px}
 .stage-heading{grid-column:1;grid-row:1}
 .stage-heading h2{font-size:clamp(40px,9vw,58px);margin-top:10px}
 .photo-story,.photo-story.rebuild{grid-column:1;grid-row:2;inset:auto}
 .ingredient-detail{grid-column:1;grid-row:3;max-width:none}
 .ingredient-detail h3{font-size:30px;margin:6px 0 8px}
 .ingredient-detail p{font-size:14px;max-width:none}
 .film-controls{margin-top:10px}
 .film-controls button{font-size:12px;padding:8px 16px}
 .stage-footer{bottom:20px;gap:12px}
 .problem,.meet{padding:48px 6%}
 .problem-lines{gap:14px}
 .problem-end{margin-top:26px}
 .meet-layout{gap:20px;margin-top:20px}
 .ingredient-accessible{padding:36px 6%}
 .ingredient-accessible h2{font-size:42px;margin-bottom:22px}
 .final{padding:48px 6% 36px}
 .final h2{font-size:clamp(70px,17vw,100px)}
 .final-packs{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px auto;min-height:0}
 .final-packs .pack{height:auto;min-height:70px}
}
@media(prefers-reduced-motion:reduce){.ingredient-scroll{height:100svh}.bar-core{visibility:hidden}.ingredient-sprite{visibility:hidden}}
/* Reserve separate mobile bands for copy, products and the primary action. */
@media(max-width:760px){
 .hero h1{top:21%;font-size:clamp(54px,13vw,90px)}
 .hero-subcopy{top:36%;max-width:85%;font-size:13px}
 .film-step-copy{top:35%;max-width:85%;font-size:25px}
 .film-step-copy p{max-width:290px;margin-top:6px}
 .product-film{top:48%;height:32%;width:86%;right:3%}
 .film-stage-caption{bottom:17%;font-size:8px}
}
@media(max-width:760px) and (max-height:700px){
 .hero h1{top:24%;font-size:min(13vw,12vh)}
 .hero-subcopy,.film-step-copy{top:43%;font-size:12px}
 .film-step-copy{font-size:22px}
 .product-film{top:52%;height:27%;width:74%;right:4%}
}