/* ===== R.K. Enterprise — shared styles (all pages) ===== */
:root{--butter:#FF6600;--butter2:#D9EFDF;--cream:#F7F4EA;--ink:#10261B;--paper:#FFFDF7;--orange:#349966;--blue:#1F7A4D;--kraft:#B98A56;--headbg:#F2E7CE;--r:28px;--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.3,1.6,.4,1)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Bricolage Grotesque',sans-serif;background:var(--cream);color:var(--ink);overflow-x:clip;-webkit-font-smoothing:antialiased}
body.loading{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--ink);color:var(--butter)}
img{max-width:100%}
.mono{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.serif{font-family:'DM Serif Display',serif;font-style:italic;font-weight:400}
.wrap{padding:0 24px;max-width:1500px;margin:0 auto}
section{position:relative}
.eyebrow{display:inline-flex;gap:8px;align-items:center;padding:8px 14px;border:1.5px solid currentColor;border-radius:100px}
.eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--orange);animation:pulse 1.6s infinite}
@keyframes pulse{50%{transform:scale(1.8);opacity:.4}}
@keyframes bob{50%{transform:translateY(-10px) rotate(8deg)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* scroll progress */
.sprog{position:fixed;top:0;left:0;height:4px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--orange);z-index:9500;will-change:transform}

/* cursor */
.cursor,.trail{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%)}
.cursor{width:18px;height:18px;background:#fff;mix-blend-mode:difference;transition:width .25s,height .25s}
.cursor.big{width:80px;height:80px}
.cursor span{position:absolute;inset:0;display:grid;place-items:center;font:600 10px 'JetBrains Mono';color:#000;opacity:0}
.cursor.big span{opacity:1}
.trail{width:10px;height:10px;background:var(--orange);z-index:9998;opacity:.5}
@media(hover:none){.cursor,.trail{display:none}}

/* ---- doodles ---- */
.dd{width:100%;height:auto;overflow:visible;display:block}
.dd *{fill:none;stroke:var(--c,#1f5a3d);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.on .dd *,.dd.on *,.pbd .dd *{animation:draw 1.1s cubic-bezier(.6,0,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---- preloader: paper roll rolls out a sheet, business doodles appear, logo gets stamped, page tears away ---- */
.pre{--bg:#F4F1E6;position:fixed;inset:0;z-index:9800;display:grid;place-items:center;background:var(--bg);transition:transform 1.1s cubic-bezier(.77,0,.18,1)}
.pre::after{content:'';position:absolute;left:0;right:0;top:100%;height:22px;background:linear-gradient(135deg,var(--bg) 50%,transparent 50%) 0 0/22px 22px,linear-gradient(225deg,var(--bg) 50%,transparent 50%) 0 0/22px 22px}
.pre.done{transform:translateY(calc(-100% - 24px))}
.pre.bump .pmid{animation:bump .35s}
@keyframes bump{30%{transform:translateY(6px) scale(1.01)}60%{transform:translateY(-3px)}}
.pback{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pbd{position:absolute;width:clamp(70px,11vw,150px);opacity:.55}
.pbd.b0{left:6%;top:14%}.pbd.b1{right:8%;top:12%;transform:rotate(14deg)}.pbd.b2{left:12%;bottom:12%}.pbd.b3{right:10%;bottom:14%;transform:rotate(-10deg)}.pbd.b4{left:42%;top:8%;width:80px}.pbd.b5{left:50%;bottom:8%;width:70px;transform:rotate(20deg)}
.pbd .dd *{animation-duration:2.2s}
.pmid{position:relative;text-align:center;color:#1f5a3d;width:100%}
.pstage{--p:0%;--pp:0px;position:relative;width:min(860px,90vw);height:clamp(150px,22vw,210px);margin:0 auto}
.psheet{position:absolute;inset:0;border-radius:6px;background:repeating-linear-gradient(0deg,#fffdf3 0 3px,#f6efd6 3px 6px);box-shadow:0 18px 40px -14px #0004,inset 0 0 0 2px #1f5a3d22;display:flex;align-items:center;justify-content:space-around;padding:0 3%;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.pslot{width:calc(100%/7 - 12px);max-width:96px}
.pmark{position:absolute;left:14px;bottom:8px;font-size:9px;opacity:.5;white-space:nowrap;letter-spacing:.2em}
.proll{position:absolute;top:-16px;bottom:-16px;width:64px;left:var(--p);transform:translateX(-50%);border-radius:32px;background:repeating-linear-gradient(90deg,#c69a66 0 6px,#b98a56 6px 12px);background-position:var(--pp) 0;box-shadow:0 20px 40px -10px #0006}
.proll::before{content:'';position:absolute;inset:0;border-radius:32px;background:linear-gradient(90deg,#0006,#fff3 35%,#fff0 55%,#0005)}
.proll::after{content:'';position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);border-radius:50%;background:#3a2a16;box-shadow:0 0 0 5px #e8c79b}
.pstamp{position:absolute;left:50%;top:50%;width:clamp(90px,14vw,140px);aspect-ratio:1;transform:translate(-50%,-50%) scale(3) rotate(-14deg);opacity:0;border-radius:50%;overflow:hidden;background:#F7F7F7;box-shadow:0 0 0 6px #349966,0 0 0 12px #F4F1E6}
.pstamp img{width:100%;height:100%;object-fit:contain}
.pstamp.hit{animation:stamp .55s cubic-bezier(.3,1.6,.4,1) forwards}
@keyframes stamp{0%{opacity:0;transform:translate(-50%,-50%) scale(3) rotate(-14deg)}55%{opacity:1;transform:translate(-50%,-50%) scale(.9) rotate(-6deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-6deg)}}
.pword{margin-top:34px;font-family:'DM Serif Display',serif;font-style:italic;font-size:clamp(28px,5vw,56px);letter-spacing:-.02em}
.pword.flip{animation:flip .5s var(--ease)}
@keyframes flip{from{opacity:0;transform:translateY(18px) rotateX(70deg)}}
.pcnt{margin-top:6px;opacity:.6}

/* ---- page-change ---- */
html.cov{background:#F4F1E6}
html.cov body>*{visibility:hidden}
.curtain{position:fixed;inset:0;z-index:9700;display:none;overflow:hidden;visibility:visible!important}
.cpaper{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#fffdf3 0 3px,#f6efd6 3px 6px);will-change:transform,clip-path;backface-visibility:hidden}
.cd{position:absolute;opacity:0;animation:cdpop .45s var(--ease) forwards}
@keyframes cdpop{from{opacity:0;transform:rotate(var(--r)) scale(.6)}to{opacity:.95;transform:rotate(var(--r)) scale(1)}}
.dd.st *{stroke-dashoffset:0;animation:none}
.cmid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:#1f5a3d}
.cmid img{width:clamp(80px,12vw,120px);border-radius:50%;background:#F7F7F7;box-shadow:0 0 0 5px #349966,0 0 0 10px #fffdf3}
.cw{font-size:clamp(34px,7vw,84px);margin-top:20px;letter-spacing:-.02em}
.croll{position:absolute;top:0;bottom:0;right:0;width:90px;background:linear-gradient(90deg,#8e6a3f,#c69a66 18%,#f0d9b0 45%,#c69a66 75%,#7a5830);box-shadow:-24px 0 40px -10px #0005}
.croll::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 22px,#0002 22px 24px)}

/* nav */
nav.top{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:500;display:flex;align-items:center;gap:6px;padding:8px 8px 8px 22px;background:#10261Bd9;backdrop-filter:blur(16px);border-radius:100px;color:#fff;width:min(960px,calc(100% - 24px));justify-content:space-between;transition:transform .5s var(--ease)}
nav.top.hide{transform:translate(-50%,-140%)}
nav .logo{font-weight:800;letter-spacing:-.03em;font-size:18px;display:flex;align-items:center;gap:8px}
nav .logo img{width:38px;height:38px;border-radius:50%;object-fit:contain;background:#F7F7F7;padding:2px}
nav ul{display:flex;list-style:none;gap:2px}
nav ul a{padding:9px 16px;border-radius:100px;font-size:14px;transition:.3s;display:block}
nav ul a:hover,nav ul a.act{background:#ffffff26}
.navr{display:flex;gap:8px;align-items:center}
.cartbtn{position:relative;background:var(--butter);color:var(--ink);border:0;border-radius:100px;padding:12px 20px;font-weight:700;font-size:14px;cursor:pointer;display:flex;gap:8px;align-items:center;transition:filter .2s}
.cartbtn:hover{filter:brightness(1.08)}
.cartbtn .n{background:var(--ink);color:var(--butter);border-radius:50%;min-width:22px;height:22px;display:grid;place-items:center;font-size:12px}

@media(max-width:820px){nav ul{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:100px;background:var(--butter);color:var(--ink);font-weight:600;font-size:15px;border:0;cursor:pointer;position:relative;overflow:hidden;transition:transform .3s,color .3s}
.btn.dark{background:var(--ink);color:#fff}
.btn.orange{background:var(--orange);color:#fff}
.btn::before{content:'';position:absolute;inset:0;background:var(--orange);transform:translateY(101%);transition:transform .45s cubic-bezier(.6,0,.2,1);border-radius:inherit}
.btn.orange::before{background:var(--ink)}
.btn:hover::before{transform:none}
.btn span{position:relative;z-index:1}
.btn:hover{color:#fff}
.btn.orange:hover{color:#fff}
.btn:disabled{opacity:.5;pointer-events:none}

/* marquee */
.marq{background:var(--headbg);color:var(--ink);padding:22px 0;overflow:hidden;white-space:nowrap;transform:rotate(-1.5deg) scale(1.03);margin:-14px 0;position:relative;z-index:5}
.marq .in{display:inline-flex;animation:mq 28s linear infinite;font-size:clamp(28px,4vw,54px);font-weight:800;letter-spacing:-.03em}
.marq.rev .in{animation-direction:reverse}
.marq span{display:inline-flex;align-items:center;gap:48px;padding-right:48px}
.marq span::after{content:'✺';color:var(--orange)}
@keyframes mq{to{transform:translateX(-50%)}}

/* reveal system */
.rv{opacity:0;transform:translateY(60px);transition:opacity .9s,transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.l{transform:translateX(-80px)}.rv.r{transform:translateX(80px)}.rv.z{transform:scale(.8)}
.rv.in.l,.rv.in.r,.rv.in.z{transform:none}
.words .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .2em .3em .16em;margin:-.14em calc(.22em - .2em) -.3em -.16em}
.words .w>span{display:inline-block;transform:translateY(135%) rotate(6deg);transition:transform 1s var(--ease)}
.words.in .w>span{transform:none}

/* paper "sheet" visuals shared */
.sheet{position:relative;border-radius:14px;box-shadow:0 30px 60px -20px #0005;aspect-ratio:3/4;overflow:hidden}
.sheet::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,#fff8 0%,transparent 40%,#0002 100%)}
.sheet.butter{background:repeating-linear-gradient(0deg,#fffdf0 0 2px,#f3ecd0 2px 4px)}
.sheet.sil{background:linear-gradient(160deg,#fff,#e2f3e8)}
.sheet.kraft{background:repeating-linear-gradient(90deg,#c69a66 0 3px,#b98a56 3px 6px)}
.sheet.bake{background:repeating-linear-gradient(0deg,#fff 0 3px,#ffe0d2 3px 6px)}

/* cart drawer */
.veil{position:fixed;inset:0;background:#0007;z-index:900;opacity:0;pointer-events:none;transition:opacity .4s}
.veil.on{opacity:1;pointer-events:all}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(460px,100%);background:var(--paper);z-index:950;transform:translateX(105%);transition:transform .6s cubic-bezier(.7,0,.2,1);display:flex;flex-direction:column;border-radius:32px 0 0 32px;box-shadow:-30px 0 80px #0005}
.drawer.on{transform:none}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:26px 26px 14px}
.drawer h3{font-size:34px;font-weight:800;letter-spacing:-.04em}
.drawer .x{width:44px;height:44px;border-radius:50%;border:1.5px solid #0003;background:0;font-size:18px;cursor:pointer;transition:.4s var(--spring)}
.drawer .x:hover{background:var(--ink);color:#fff}
.dl{flex:1;overflow:auto;padding:6px 26px}
.li{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1.5px dashed #0002;animation:slidein .5s var(--ease) both}
@keyframes slidein{from{opacity:0;transform:translateX(40px)}}
.li .sheet{width:64px;border-radius:10px}
.li b{font-size:17px;letter-spacing:-.02em;display:block}
.li small{opacity:.6;font-size:13px}
.qty{display:inline-flex;align-items:center;border:1.5px solid #0003;border-radius:100px;margin-top:6px}
.qty button{width:30px;height:30px;border:0;background:0;font-size:16px;cursor:pointer;border-radius:50%}
.qty button:hover{background:var(--butter)}
.qty span{min-width:26px;text-align:center;font-weight:700;font-size:14px}
.li .p{text-align:right;font-weight:800;font-size:17px}
.li .rm{display:block;margin-top:6px;font-size:12px;background:0;border:0;opacity:.5;cursor:pointer;text-decoration:underline}
.empty{text-align:center;padding:60px 0;opacity:.7}
.empty .ic{font-size:70px;animation:bob 3s infinite}
.dfoot{padding:20px 26px 26px;border-top:1.5px solid #0002}
.dfoot .tot{display:flex;justify-content:space-between;font-size:22px;font-weight:800;letter-spacing:-.03em;margin-bottom:14px}
.dfoot .btn{width:100%;justify-content:center}
.flyer{position:fixed;width:22px;height:22px;border-radius:6px;background:var(--orange);z-index:9990;pointer-events:none}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,200%);background:var(--ink);color:#fff;padding:14px 22px;border-radius:100px;z-index:9600;font-weight:600;transition:transform .6s var(--spring);display:flex;gap:10px;align-items:center}
.toast.on{transform:translate(-50%,0)}

/* footer */
footer.foot{background:var(--butter);padding:120px 0 30px;border-radius:48px 48px 0 0;overflow:hidden;margin-top:-1px}
footer h3{font-size:clamp(56px,13vw,220px);font-weight:800;letter-spacing:-.065em;line-height:.82}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px;margin-top:70px}
footer .cols h6{font:600 12px 'JetBrains Mono';letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin-bottom:12px}
footer .cols p,footer .cols a{font-size:20px;line-height:1.4;font-weight:600;display:block;letter-spacing:-.02em}
footer .cols a:hover{color:var(--orange)}
footer .bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:70px;padding-top:20px;border-top:1.5px solid #0003}
footer .giant{font-size:clamp(80px,25vw,420px);font-weight:800;letter-spacing:-.08em;line-height:.75;text-align:center;margin-top:30px;white-space:nowrap}
.wa{position:fixed;right:18px;bottom:18px;z-index:600;width:60px;height:60px;border-radius:50%;background:#25D366;display:grid;place-items:center;font-size:28px;box-shadow:0 10px 30px #0004;animation:bob 3s infinite}
canvas#fx{position:fixed;inset:0;pointer-events:none;z-index:9600}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* smooth-scroll (Lenis) housekeeping + perf hints */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.marq .in,.track,.card,.sheet,.ph img{will-change:transform}

/* per-destination transition looks */
.cpaper.flip{background:repeating-linear-gradient(0deg,#fffdf3 0 31px,#cfe0d6 31px 32px);box-shadow:-30px 0 60px -10px #0004;transform-origin:left center}
.cpaper.flip::before{content:'';position:absolute;left:8%;top:0;bottom:0;width:2px;background:#e8867f88}
.cpaper.flip::after{content:'';position:absolute;left:0;top:0;bottom:0;width:120px;background:linear-gradient(90deg,#0003,transparent)}

.wa{display:grid;place-items:center;text-decoration:none}
.wa svg{display:block}
.wabtn{background:#25D366;color:#fff;gap:10px}
.wabtn::before{background:#128C7E}
.wabtn svg{position:relative;z-index:1}
.wabtn:hover{color:#fff}
.cinfo a.wabtn{display:inline-flex;font-size:15px;letter-spacing:0;margin-top:20px}

/* contact: a letter slides up, envelope flap on top, the logo rings like a phone */
.cpaper.letter{box-shadow:0 -30px 60px -20px #0004}
.cpaper.letter::before{content:'';position:absolute;left:0;right:0;top:-1px;height:26vh;background:linear-gradient(180deg,#e9dfc0,#f4ecd2);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 6px 6px #0002)}
.cpaper.letter .cmid img{animation:ring .5s ease-in-out infinite}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}}

/* richer footer */
footer.foot{padding:110px 0 30px}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;margin-top:70px}
.fcols.first{margin-top:0}
@media(max-width:980px){.fcols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fcols{grid-template-columns:1fr}}
.fcols h6{font:600 12px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.6;margin-bottom:14px}
.fcols a,.fcols p{display:block;font-size:17px;line-height:1.5;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.fcols a:hover{color:var(--orange)}
.fcols .fbrand p{font-weight:500;font-size:15px;opacity:.85;max-width:38ch}
.fcols .fbrand p.mono{font-size:11px;opacity:.6;margin-top:10px}
.fcols .faddr{font-weight:500;font-size:15px;opacity:.85;margin-top:8px}
.flogo{display:flex!important;align-items:center;gap:10px;margin-bottom:12px!important}
.flogo img{width:46px;height:46px;border-radius:50%;background:#F7F7F7;object-fit:contain;padding:2px}
.flogo b{font-size:22px;letter-spacing:-.03em}
.fmap{text-decoration:underline;font-size:14px!important}
footer .bar{margin-top:56px}

/* mobile hardening */
html{overflow-x:clip;max-width:100%}
.grid2>*,.cinfo,.ctiles,.ctile,.ctiles>*{min-width:0}
.ctile,.cinfo p,.cinfo h3{overflow-wrap:anywhere}
@media(max-width:600px){.wafull{width:100%;white-space:normal;text-align:center}.blob{max-width:80vw;max-height:80vw}}
.burger{display:none;width:44px;height:44px;border:0;border-radius:50%;background:#ffffff1f;cursor:pointer;position:relative;flex:none}
.burger i{position:absolute;left:13px;right:13px;height:2px;background:#fff;border-radius:2px;transition:transform .35s var(--ease),top .35s var(--ease)}
.burger i:nth-child(1){top:18px}.burger i:nth-child(2){top:25px}
nav.open .burger i:nth-child(1){top:21px;transform:rotate(45deg)}nav.open .burger i:nth-child(2){top:21px;transform:rotate(-45deg)}
@media(max-width:820px){.burger{display:block}
nav.top{padding-left:14px}
nav.top ul{display:flex;flex-direction:column;position:absolute;top:calc(100% + 8px);left:0;right:0;background:#10261Bf2;backdrop-filter:blur(16px);border-radius:28px;padding:10px;gap:2px;opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);transform-origin:top;transition:opacity .3s,transform .4s var(--ease),visibility 0s .4s}
nav.open ul{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .4s var(--ease)}
nav.top ul a{padding:15px 18px;font-size:17px;font-weight:600}}
@media(max-width:420px){nav .logo{font-size:15px;gap:6px}nav .logo img{width:32px;height:32px}.cartbtn{padding:11px 14px}}
.drawer:not(.on){transform:translateX(calc(100% + 120px));box-shadow:none;visibility:hidden;transition:transform .6s cubic-bezier(.7,0,.2,1),visibility 0s .6s}
.drawer.on{visibility:visible}

/* once revealed, never clip glyph overhangs */
.words .w.done{overflow:visible}

/* smooth page change: own compositor layers */
.cpaper,.croll{will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
.curtain{contain:strict}

/* first-visit 10%-off popup */
.offv{position:fixed;inset:0;z-index:9400;background:#10261Bb3;opacity:0;transition:opacity .4s var(--ease);backdrop-filter:blur(4px)}
.offv.on{opacity:1}
.offer{position:fixed;z-index:9401;left:50%;top:50%;transform:translate(-50%,-46%) scale(.94);opacity:0;width:min(420px,calc(100% - 32px));background:var(--paper);border-radius:32px;padding:36px 32px 30px;transition:transform .45s var(--spring),opacity .35s var(--ease);text-align:center}
.offer.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.offx{position:absolute;right:18px;top:18px;width:34px;height:34px;border-radius:50%;border:0;background:#0001;cursor:pointer;font-size:14px}
.offbadge{display:inline-flex;background:var(--butter);color:var(--ink);font-weight:800;padding:8px 18px;border-radius:100px;font-size:13px;letter-spacing:.04em;margin-bottom:16px}
.offer h3{font-size:clamp(26px,4vw,32px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-bottom:10px}
.offer>p{font-size:14px;opacity:.75;margin-bottom:20px}
.offer form{display:flex;flex-direction:column;gap:10px}
.offer [hidden]{display:none!important}
.offer input{padding:13px 16px;border:1.5px solid #0002;border-radius:14px;font:600 14px 'Bricolage Grotesque',sans-serif;background:#fff}
.offer form .btn{margin-top:6px;justify-content:center;width:100%}
.offskip{margin-top:14px;font-size:13px}
.offskip a{color:inherit;opacity:.6;text-decoration:underline}
.offdone b{font-size:16px}
@media(max-width:480px){.offer{padding:30px 22px 24px}}