/* ===== Home page ===== */
.hero{min-height:100vh;background:var(--paper);position:relative;overflow:hidden;padding:130px 24px 40px;display:flex;flex-direction:column;justify-content:space-between}
.hero .meta{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hero h2{font-size:clamp(64px,15.5vw,260px);font-weight:800;line-height:.82;letter-spacing:-.06em;text-transform:lowercase;position:relative;z-index:3}
.hero h2 .ln{display:block}
.hero h2 i{font-style:normal;display:inline-block;will-change:transform}
.hero h2 .serif{letter-spacing:-.03em}
.hero p.sub{max-width:460px;font-size:clamp(16px,1.6vw,20px);line-height:1.4}
.hero .row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;position:relative;z-index:3}
.hero .row .btns{display:flex;gap:10px;flex-wrap:wrap}
.blob{position:absolute;border-radius:50%;z-index:0;animation:morph 9s ease-in-out infinite}
@keyframes morph{50%{transform:scale(1.08) rotate(20deg)}}
.hero .sheet{will-change:transform;position:absolute;z-index:2;width:clamp(150px,20vw,300px);animation:floaty 6s ease-in-out infinite}
.hero .sheet:nth-of-type(2){animation-delay:-2s}.hero .sheet:nth-of-type(3){animation-delay:-4s}
@keyframes floaty{50%{translate:0 -22px}}
.hero .sheet em{position:absolute;left:14px;bottom:12px;font:600 11px 'JetBrains Mono';letter-spacing:.08em;text-transform:uppercase;z-index:2}

/* statement */
.statement{padding:200px 0 140px}
.statement h3{font-size:clamp(34px,6.2vw,104px);line-height:.98;letter-spacing:-.045em;font-weight:800;max-width:1300px}
.statement h3 .sw{display:inline-block;opacity:.14;transition:opacity .3s,transform .5s var(--spring);margin-right:.22em}
.statement h3 .sw.on{opacity:1}
.statement h3 .sw.hl{font-family:'DM Serif Display',serif;font-style:italic;font-weight:400;color:var(--orange)}

/* Formats: Pack / Pouch / Ream / Kg */
.formats{padding:120px 0;background:var(--ink);color:#fff;border-radius:48px;margin:0 12px;overflow:hidden}
.formats h3{font-size:clamp(46px,9vw,150px);font-weight:800;letter-spacing:-.055em;line-height:.85}
.ftabs{display:flex;gap:10px;flex-wrap:wrap;margin:50px 0 40px}
.ftabs button{padding:16px 30px;border-radius:100px;border:1.5px solid #fff4;background:0;color:#fff;font-size:20px;font-weight:700;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.ftabs button:hover{border-color:#fff}
.ftabs button.on{background:var(--butter);color:var(--ink);border-color:var(--butter)}
.fstage{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;min-height:440px}
.fvis{height:400px;display:grid;place-items:center;perspective:1000px;position:relative}
.fvis .obj{position:relative;transform-style:preserve-3d;animation:objin .8s var(--spring)}
@keyframes objin{from{transform:scale(.2) rotateY(-200deg);opacity:0}}
.fvis .glow{position:absolute;width:320px;height:320px;border-radius:50%;background:var(--butter);filter:blur(80px);opacity:.25}
.fname{font-size:clamp(50px,8vw,120px);font-weight:800;letter-spacing:-.05em;line-height:.9;color:var(--butter)}
.fp{font-size:20px;line-height:1.4;max-width:40ch;margin:16px 0 26px;opacity:.85}
.fprices{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.fprices span{border:1.5px solid #fff4;border-radius:100px;padding:8px 16px;font-size:14px}
/* pack */
.o-pack{width:200px;height:250px;background:var(--butter);border-radius:8px;transform:rotateY(-25deg) rotateX(10deg);box-shadow:20px 30px 60px #0008;display:grid;place-items:center;color:var(--ink);font-weight:800;font-size:28px;letter-spacing:-.04em}
.o-pack::before{content:'';position:absolute;inset:14px;border:2px dashed #0004;border-radius:4px}
/* pouch */
.o-pouch{width:210px;height:290px;background:linear-gradient(160deg,#fff,#d5efe0);border-radius:14px 14px 40px 40px;box-shadow:20px 30px 60px #0008;transform:rotateY(18deg);position:relative;display:grid;place-items:center;color:var(--ink);font-weight:800;font-size:26px;letter-spacing:-.04em}
.o-pouch::before,.o-pouch::after{content:'';position:absolute;top:0;left:0;right:0;height:22px;background:repeating-linear-gradient(90deg,#0002 0 4px,transparent 4px 8px);border-radius:14px 14px 0 0}
.o-pouch::after{top:auto;bottom:0;height:12px;border-radius:0 0 40px 40px}
/* ream */
.o-ream{width:230px;height:70px;transform:rotateX(55deg) rotateZ(-30deg);position:relative;transform-style:preserve-3d}
.o-ream i{position:absolute;inset:0;background:#fffdf0;border:1px solid #0002;border-radius:3px;box-shadow:0 1px 0 #0002}
.o-ream b{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink);font-size:22px;font-weight:800}
/* kg roll (draggable) */
.o-roll{width:280px;height:200px;transform-style:preserve-3d;cursor:grab}
.o-roll .cyl{position:absolute;inset:0;border-radius:100px/50%;background:repeating-linear-gradient(90deg,#c69a66 0 5px,#b98a56 5px 10px);box-shadow:inset 0 0 40px #0006,20px 30px 60px #0008}
.o-roll .cyl::after{content:'';position:absolute;left:0;top:0;bottom:0;width:70px;border-radius:50%;background:radial-gradient(circle,#2b1f10 0 22%,#e8c79b 23% 60%,#b98a56 61%)}
@media(max-width:860px){.fstage{grid-template-columns:1fr}.fvis{height:300px}}

/* product slideshow */
.prods{background:var(--paper);padding:140px 0 100px}
.prods .head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:60px}
.prods h3{font-size:clamp(46px,9vw,150px);font-weight:800;letter-spacing:-.055em;line-height:.85}
.track-wrap{overflow:hidden;cursor:grab;padding:0 24px}
.track-wrap.drag{cursor:grabbing}
.track{display:flex;gap:22px;width:max-content;will-change:transform}
.card{width:clamp(280px,32vw,460px);border-radius:var(--r);padding:26px;min-height:clamp(520px,44vw,620px);display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;user-select:none}
.card .num{font:600 12px 'JetBrains Mono'}
.card h4{font-size:clamp(34px,4vw,56px);font-weight:800;letter-spacing:-.045em;line-height:.9}
.card p{font-size:15px;line-height:1.4;max-width:34ch;margin-top:12px}
.card>div:last-child{margin-top:auto}
.card .vis{position:relative;flex:none;height:clamp(170px,15vw,230px);aspect-ratio:3/4;margin:0 4px 0 auto;transform:rotate(6deg);transition:transform .6s var(--spring)}
.card:hover .vis{transform:rotate(-2deg) scale(1.04)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.chips span{border:1.5px solid #0006;border-radius:100px;padding:6px 12px;font-size:12px;font-weight:600}
.card .go{position:relative;z-index:2;margin-top:16px;width:fit-content}
.ctrl{display:flex;align-items:center;gap:20px;padding:40px 24px 0}
.prog{flex:1;height:3px;background:#0002;border-radius:3px;overflow:hidden}
.prog b{display:block;height:100%;width:20%;background:var(--orange);border-radius:3px}
.arrow{width:56px;height:56px;border-radius:50%;border:1.5px solid #0004;background:0;color:var(--ink);font-size:20px;cursor:pointer;transition:.3s}
.arrow:hover{background:var(--butter)}

/* process (sticky stack) */
.proc{padding:140px 0 60px;background:var(--cream)}
.proc h3{font-size:clamp(44px,8vw,130px);font-weight:800;letter-spacing:-.055em;line-height:.88;margin-bottom:70px}
.stack .s{position:sticky;top:90px;border-radius:var(--r);padding:clamp(24px,4vw,56px);min-height:62vh;display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:30px;box-shadow:0 -10px 40px -20px #0004}
.stack .s:nth-child(1){background:var(--butter)}.stack .s:nth-child(2){background:var(--blue);color:#fff}.stack .s:nth-child(3){background:var(--orange);color:#fff}.stack .s:nth-child(4){background:var(--ink);color:var(--butter)}
.s .big{font-size:clamp(90px,17vw,260px);font-weight:800;letter-spacing:-.07em;line-height:.8}
.s h4{font-size:clamp(28px,4vw,56px);letter-spacing:-.04em;line-height:.95;font-weight:800;margin-bottom:16px}
.s p{max-width:44ch;font-size:17px;line-height:1.45}
.s .r{display:flex;flex-direction:column;justify-content:space-between}
@media(max-width:760px){.stack .s{grid-template-columns:1fr;min-height:auto}}

.stats{padding:120px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;max-width:1500px;margin:0 auto}
.stat{border-top:2px solid var(--ink);padding-top:18px}
.stat b{display:block;font-size:clamp(60px,9vw,140px);font-weight:800;letter-spacing:-.06em;line-height:.9}

.why{padding:40px 0 140px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.tile{border-radius:var(--r);padding:28px;min-height:260px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .5s var(--spring);position:relative;overflow:hidden}
.tile:hover{box-shadow:0 20px 40px -20px #0004}
.tile h5{font-size:clamp(24px,2.6vw,38px);letter-spacing:-.04em;line-height:1;font-weight:800}
.tile p{font-size:15px;line-height:1.4;margin-top:10px;max-width:38ch}
.t1{grid-column:span 7;background:var(--butter)}.t2{grid-column:span 5;background:var(--ink);color:#fff}.t3{grid-column:span 4;background:#CFE8D8}.t4{grid-column:span 4;background:var(--orange);color:#fff}.t5{grid-column:span 4;background:#CDEBC0}
.tile .ic{font-size:64px;line-height:1;animation:bob 3s ease-in-out infinite}
@media(max-width:860px){.grid>*{grid-column:span 12!important}}


/* photo mosaic */
.gallery{padding:140px 0 60px;background:var(--cream);position:relative;z-index:2}
.gallery h3{font-size:clamp(46px,9vw,150px);font-weight:800;letter-spacing:-.055em;line-height:.85;margin-bottom:60px}
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(90px,11vw,170px);gap:16px}
.ph{position:relative;overflow:hidden;border-radius:var(--r);clip-path:inset(0 0 100% 0 round 28px);transition:clip-path 1.2s var(--ease)}
.mosaic.in .ph{clip-path:inset(0 round 28px)}
.mosaic.in .ph:nth-child(2){transition-delay:.15s}.mosaic.in .ph:nth-child(3){transition-delay:.3s}.mosaic.in .ph:nth-child(4){transition-delay:.45s}.mosaic.in .ph:nth-child(5){transition-delay:.6s}
.ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease);transform:scale(1.25)}
.mosaic.in .ph img{transform:scale(1)}
.ph:hover img{transform:scale(1.12) rotate(1deg)}
.ph figcaption{position:absolute;left:16px;bottom:14px;background:var(--butter);color:var(--ink);padding:6px 12px;border-radius:100px;font-size:11px}
.p1{grid-column:1/6;grid-row:1/4}.p2{grid-column:6/9;grid-row:1/3}.p3{grid-column:9/13;grid-row:1/4}.p4{grid-column:6/9;grid-row:3/5}.p5{grid-column:1/6;grid-row:4/6}
@media(max-width:760px){.mosaic>*{grid-column:1/-1!important;grid-row:auto!important;height:240px}}

/* hero particle canvas */
#swarm{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* home blog teaser */
.blogs{padding:140px 0 40px;background:var(--cream)}
.bhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:50px}
.bhead h3{font-size:clamp(46px,9vw,150px);font-weight:800;letter-spacing:-.055em;line-height:.85}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bgrid .big{grid-column:span 2}
.pcard{border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;min-height:440px;position:relative}
.pcard .pimg{height:230px;transition:transform 1s var(--ease)}
.pcard.big .pimg{height:300px}
.pcard:hover .pimg{transform:scale(1.06)}
.pcard .pbody{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1;background:inherit;position:relative;z-index:1}
.pcard h4{font-size:clamp(22px,2.2vw,32px);letter-spacing:-.04em;line-height:1;font-weight:800}
.pcard p{font-size:15px;line-height:1.4;opacity:.8}
.pcard .more{margin-top:auto;font-weight:700}
.pcard:hover .more{color:var(--orange)}
@media(max-width:900px){.bgrid{grid-template-columns:1fr}.bgrid .big{grid-column:auto}}

.aboutteaser{padding:150px 0 120px}
.atrow{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,5vw,80px);align-items:end}
.atrow h3{font-size:clamp(38px,6vw,96px);font-weight:800;letter-spacing:-.05em;line-height:.92}
.atrow p{font-size:19px;line-height:1.5;margin-bottom:22px;max-width:44ch}
@media(max-width:860px){.atrow{grid-template-columns:1fr}}

/* phones: keep the photo sheets in the gap under the headline, off the copy */
@media(max-width:600px){
  .hero{padding:110px 18px 32px}
  .hero .meta{font-size:11px}
  .hero .sheet{width:27vw!important;top:57%!important;right:auto!important}
  .hero .sheet[aria-label^="Butter"]{left:6%!important}
  .hero .sheet[aria-label^="Silicone"]{left:37%!important}
  .hero .sheet[aria-label^="Kraft"]{left:68%!important}
  .hero .sheet em{font-size:8px;left:8px;bottom:8px}
  .hero .row{margin-top:190px}
}

/* customer reviews */
.reviews{padding:100px 0}
.reviews h3{font-size:clamp(46px,9vw,150px);font-weight:800;letter-spacing:-.055em;line-height:.85;margin-bottom:50px;padding:0 24px}
.revgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;padding:0 24px}
.revcard{background:var(--paper);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:14px;transition-delay:calc(var(--i) * 80ms)}
.revstars{color:var(--orange);font-size:15px;letter-spacing:2px}
.revcard p{font-size:16px;line-height:1.5}
.revwho{display:flex;align-items:center;gap:12px;margin-top:auto}
.revwho>span{display:flex;flex-direction:column;gap:2px}
.revwho b{font-size:15px}
.revwho .mono{font-size:12px;opacity:.6}
.revav{flex:none;width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}


/* featured products */
.featured{padding:70px 0 20px}
.featured h3{font-size:clamp(24px,3.6vw,48px);font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:28px;padding:0 24px}
.featgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:0 24px}
.featcard{background:var(--paper);border-radius:var(--r);overflow:hidden;display:block;transition:box-shadow .3s}
.featcard:hover{box-shadow:0 18px 40px -22px #0006}
.featimg{aspect-ratio:4/3;background-size:cover;background-position:center}
.featbody{padding:16px 18px 18px}.featbody h4{font-size:16px;margin-bottom:4px}.featbody .mono{font-size:11px;opacity:.65}