:root{--ink:#111;--cream:#f7efdf;--red:#c8202a;--red2:#a3161f;--paper:#fffaf1}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6}
a{color:inherit}img{max-width:100%;display:block}
h1,h2,h3,.logo{font-family:"Bowlby One",Impact,sans-serif;font-weight:400;line-height:1.02;letter-spacing:.5px}
h1{font-size:clamp(3rem,7vw,6.2rem)}h2{font-size:clamp(2.1rem,4.5vw,3.6rem);margin-bottom:1rem}h3{font-size:1.35rem;margin:.3rem 0}
em{font-style:normal;color:var(--red)}
.wrap{max-width:1200px;margin:auto;padding:0 24px}
.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.nav{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px 28px;background:rgba(17,17,17,.94);color:var(--cream);backdrop-filter:blur(8px)}
.logo{font-size:1.5rem;text-decoration:none;text-transform:uppercase}.logo span{color:var(--red)}
.nav nav{display:flex;gap:28px;align-items:center}.nav nav a{text-decoration:none;font-weight:600;position:relative}
.nav nav a:not(.btn):after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--red);transition:.25s}.nav nav a:hover:after{width:100%}
.burger{display:none;background:none;border:0;cursor:pointer}.burger span{display:block;width:26px;height:3px;background:var(--cream);margin:5px 0;transition:.3s}
.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:15px 28px;border-radius:999px;border:3px solid var(--red);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-3px);box-shadow:0 6px 0 var(--ink)}.btn.sm{padding:9px 18px;font-size:.85rem}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}.btn.ghost.light{color:#fff;border-color:#fff}.btn.dark{background:var(--ink);border-color:var(--ink)}
.ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.kicker{text-transform:uppercase;letter-spacing:3px;font-weight:800;font-size:.8rem;color:var(--red);margin-bottom:10px}
.lead{font-size:1.2rem;max-width:34em;margin-top:22px}
.hero{padding:70px 0 0;background:var(--paper);overflow:hidden}.hero .mascot{max-height:560px;margin:auto}
.mascot{filter:drop-shadow(0 18px 18px rgba(0,0,0,.18))}.mascot.sm{max-width:220px}
.float{animation:float 5s ease-in-out infinite}@keyframes float{50%{transform:translateY(-14px) rotate(-1.5deg)}}
.marquee{margin-top:60px;background:var(--ink);color:var(--cream);overflow:hidden;white-space:nowrap;padding:16px 0;font-family:"Bowlby One";font-size:1.3rem}
.marquee div{display:inline-block;animation:mq 30s linear infinite}@keyframes mq{to{transform:translateX(-50%)}}
.sec{padding:110px 0}.cream{background:var(--cream)}.dark{background:var(--ink);color:var(--cream)}.red{background:var(--red);color:#fff}.red .kicker{color:var(--ink)}
.dark .mascot{max-height:480px;margin:auto}.sec .grid2>.mascot{max-height:480px;margin:auto}
.head{display:flex;gap:36px;align-items:center;margin-bottom:50px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:8px;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-6px);box-shadow:8px 8px 0 var(--red)}.price{margin-top:auto;font-family:"Bowlby One";color:var(--red);font-size:1.4rem}
.ph{margin-top:14px;font-size:.85rem;padding:10px 14px;border:2px dashed var(--red);border-radius:10px;color:var(--red2);background:rgba(200,32,42,.06)}
.dark .ph{color:#ff8a8f}.ph.light{color:#fff;border-color:#fff;background:rgba(255,255,255,.1)}
.quote{font-size:1.25rem;font-weight:600;border-left:6px solid var(--red);padding-left:18px;margin:10px 0 18px}
.big{font-size:1.3rem;font-weight:600;margin-bottom:12px}
.scoot{max-height:440px;margin:auto;transform:translateX(-120%);opacity:0;transition:transform 1.3s cubic-bezier(.2,.8,.2,1),opacity .6s}.scoot.in{transform:none;opacity:1}
.foot{background:var(--ink);color:var(--cream);padding:50px 0}.foot .grid2{grid-template-columns:1fr auto}.small{opacity:.6;font-size:.85rem}
.wave{max-width:170px;transform-origin:bottom center}.wave:hover{animation:wv .8s}@keyframes wv{30%{transform:rotate(-6deg)}60%{transform:rotate(5deg)}}
.reveal{opacity:0;transform:translateY(30px);transition:.8s ease}.reveal.in{opacity:1;transform:none}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr}}
@media(max-width:760px){
.burger{display:block}.nav nav{position:fixed;inset:62px 0 auto 0;flex-direction:column;background:var(--ink);padding:28px;gap:22px;transform:translateY(-130%);transition:.35s}
.nav.open nav{transform:none}.nav.open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}.nav.open .burger span:nth-child(2){opacity:0}.nav.open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.grid2,.foot .grid2{grid-template-columns:1fr;gap:30px}.hero{padding-top:40px}.hero .mascot{max-height:380px}
.sec{padding:72px 0}.cards{grid-template-columns:1fr}.head{flex-direction:column;align-items:flex-start}
#order .grid2 .scoot{order:2}.wave{margin:auto}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal,.scoot{opacity:1;transform:none}}
.aboutimgs{position:relative}.founders{width:100%;border-radius:22px;border:4px solid var(--ink);box-shadow:12px 12px 0 var(--red)}
.doughpop{position:absolute;width:38%;right:-6%;bottom:-14%}
#about .grid2{align-items:start}
@media(max-width:760px){.doughpop{width:42%;right:-2%;bottom:-18%}#about .aboutimgs{margin-bottom:60px}}
.social{display:flex;gap:10px}.social a{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:2px solid currentColor;transition:.2s}
.social a:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-2px)}.social svg{width:20px;height:20px}
.navsoc{margin-left:auto;margin-right:20px}.footsoc{margin:16px 0}
.flock{padding:0 0 20px;background:var(--paper)}.flockbox{background:var(--ink);color:var(--cream);border-radius:28px;padding:48px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;margin-top:110px}
.flockbtns{display:flex;gap:14px;flex-wrap:wrap}.flockbtns .btn{display:inline-flex;gap:10px;align-items:center}.flockbtns svg{width:22px;height:22px}.flockbtns .btn.dark{border-color:var(--cream)}
@media(max-width:760px){.navsoc{margin-right:12px}.navsoc a{width:34px;height:34px}.flockbox{padding:32px 24px;margin-top:72px}}
@media(max-width:760px){.nav{padding:12px 18px}.nav .logo{font-size:1.15rem}.navsoc{gap:8px;margin-right:10px}}
@media(max-width:760px){.doughpop{position:static;width:55%;margin:-30px 0 0 auto}#about .aboutimgs{margin-bottom:0}}
@media(min-width:761px){.nav nav{margin-left:auto}.navsoc{order:3;margin:0 0 0 22px}}
.mtabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.mtabs button{font:700 .85rem Inter;text-transform:uppercase;letter-spacing:1px;padding:9px 16px;border-radius:999px;border:2px solid var(--ink);background:transparent;cursor:pointer;transition:.2s}
.mtabs button:hover{background:var(--ink);color:var(--cream)}.mtabs button.on{background:var(--red);border-color:var(--red);color:#fff}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px 56px}.mcat{display:none;background:#fff;border:3px solid var(--ink);border-radius:20px;padding:30px}
.mgrid .mcat.show{display:block}.mgrid.single .mcat.show{grid-column:1/-1}.mgrid.single .mcat.show .mlist{columns:2;column-gap:48px}
.mcat-h{color:var(--red);font-size:1.6rem;margin-bottom:14px}.mlist{list-style:none;padding:0}.mlist li{break-inside:avoid;padding:12px 0;border-bottom:1px dashed #ddd}
.mrow{display:flex;align-items:baseline;gap:8px}.mname{font-weight:800}.dots{flex:1;border-bottom:2px dotted #bbb;transform:translateY(-4px)}.mprice{font-family:"Bowlby One";color:var(--red)}
.mlist p{font-size:.92rem;color:#555;margin-top:4px}.tag{font-size:.65rem;background:#2f7d32;color:#fff;padding:2px 7px;border-radius:99px;margin-left:6px;vertical-align:middle;text-transform:uppercase}
.msauce{margin-top:28px;font-size:.92rem}
@media(max-width:760px){.mgrid{grid-template-columns:1fr}.mgrid.single .mcat.show .mlist{columns:1}.mcat{padding:22px}.mtabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;max-width:calc(100vw - 48px)}.mtabs button{white-space:nowrap}}
.mnote{font-size:.9rem;color:#555;margin:-6px 0 6px}.msrc{font-size:.85rem;color:#555;margin-top:8px}.msrc a{color:var(--red);font-weight:700}
.beers{margin-top:16px;color:var(--cream);opacity:.9}.small2{font-size:.85rem;color:#666}
.awardline{display:inline-flex;gap:8px;align-items:center;background:var(--ink);color:#f5c74a;font-weight:800;font-size:.9rem;letter-spacing:.5px;padding:8px 16px;border-radius:999px;margin-bottom:18px;text-transform:uppercase}
.awardline span{color:#f5c74a}
.heroart{position:relative;padding-bottom:40px}.award{width:100%;max-width:560px;margin:auto;filter:drop-shadow(0 20px 22px rgba(0,0,0,.22))}
.heropizza{position:absolute;width:42%;left:-14%;bottom:-10px;max-height:none!important}
@media(max-width:760px){.hero .grid2{gap:10px}.heroart{order:-1;padding-bottom:0}.award{max-width:250px}.heropizza{width:36%;left:2%;bottom:-6px}
.hero h1{font-size:2.7rem}.awardline{font-size:.72rem;padding:7px 12px;margin-bottom:12px}.hero .lead{font-size:1.05rem;margin-top:14px}}
.award{height:auto}
.doughsheep{width:180px;max-height:none;margin:0 0 18px}
@media(max-width:760px){.doughsheep{width:150px;margin:0 auto 16px}}
/* ===== Sheep motion (uses individual rotate/translate props so it never fights reveal/drive-in transforms) ===== */
.award.float{animation:awardBounce 3.2s ease-in-out infinite;transform-origin:50% 90%}
@keyframes awardBounce{0%,100%{translate:0 0;rotate:0deg}30%{translate:0 -10px;rotate:-2deg}55%{translate:0 0;rotate:1.5deg}75%{translate:0 -4px;rotate:0deg}}
.head .mascot.sm{animation:wiggle 2.6s ease-in-out infinite;transform-origin:50% 85%}
@keyframes wiggle{0%,60%,100%{rotate:0deg}68%{rotate:-4deg}76%{rotate:4deg}84%{rotate:-2deg}92%{rotate:1deg}}
#bar .mascot{animation:sway 4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes sway{0%,100%{rotate:-2deg}50%{rotate:2deg}}
.scoot{animation:scootBounce .9s ease-in-out infinite}
@keyframes scootBounce{0%,100%{translate:0 0}50%{translate:0 -4px}}
.wave{animation:waveRock 1.5s ease-in-out infinite;transform-origin:50% 100%}
@keyframes waveRock{0%,100%{rotate:-5deg}50%{rotate:5deg}}
.wave:hover{animation:waveRock .6s ease-in-out infinite}
.heropizza{animation:bob 4s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
.award,.head .mascot.sm,#bar .mascot,.doughsheep,.scoot,.heropizza{cursor:pointer}
.award:hover,.head .mascot.sm:hover,#bar .mascot:hover,.doughsheep:hover,.scoot:hover,.heropizza:hover{animation:hoverWiggle .5s ease-in-out 2}
@keyframes hoverWiggle{0%,100%{rotate:0deg;scale:1}25%{rotate:-6deg;scale:1.04}75%{rotate:6deg;scale:1.04}}
@media(prefers-reduced-motion:reduce){.award,.head .mascot.sm,#bar .mascot,.doughsheep,.scoot,.wave,.heropizza{animation:none!important;rotate:none;translate:none;scale:none}}
/* cartoon social icons */
.social a{border:0;border-radius:12px;width:auto;height:auto;background:none!important;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.social a:hover{transform:translateY(-3px) scale(1.12) rotate(-6deg)}
.social a:nth-child(2):hover{transform:translateY(-3px) scale(1.12) rotate(6deg)}
.sicon{display:block;height:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.navsoc .sicon{width:40px}.footsoc .sicon{width:52px}.footsoc{gap:14px}
.flockbtns .sbtn{display:inline-flex;align-items:center;gap:14px;padding:10px 26px 10px 12px;font-size:1rem}
.flockbtns .sbtn .sicon{width:72px;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.flockbtns .sbtn:hover .sicon{transform:scale(1.1) rotate(-8deg)}
.flockbtns a.sbtn[href*=facebook]:hover .sicon{transform:scale(1.1) rotate(8deg)}
@media(max-width:760px){.navsoc .sicon{width:34px}.navsoc{gap:6px}.flockbtns .sbtn .sicon{width:60px}.flockbtns{width:100%}.flockbtns .sbtn{width:100%}}
@media(prefers-reduced-motion:reduce){.social a:hover,.flockbtns .sbtn:hover .sicon{transform:none}}
/* award frame animation */
.awardanim{position:relative;max-width:560px;margin:auto}
.awardanim .award{animation:none!important;display:block;width:100%}
.aframe{position:absolute;bottom:0;left:50%;height:100%;width:auto;max-width:none;transform:translateX(-50%);opacity:0;pointer-events:none;filter:drop-shadow(0 20px 22px rgba(0,0,0,.22))}
.awardanim.playing .award{visibility:hidden}
.awardanim.playing .aframe.on{opacity:1}
@media(max-width:760px){.awardanim{max-width:250px}}
@media(prefers-reduced-motion:reduce){.awardanim .aframe{display:none}.awardanim .award{visibility:visible!important}}
.awardanim{height:640px;max-width:none;width:100%}
.awardanim .award{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:auto;height:88%;max-width:none}
@media(max-width:1100px){.awardanim{height:520px}}
@media(max-width:760px){.awardanim{height:340px;max-width:none}}
/* fix: no per-frame filters/opacity layers (WebKit drew a pale box); toggle display instead */
.aframe{filter:none!important;opacity:1!important;display:none;will-change:auto;transform:translateX(-50%);background:transparent}
.awardanim.playing .aframe.on{display:block}
.awardanim.playing .award{display:none!important}
.awardanim,.heroart{background:transparent!important}
.awardanim::after{content:"";position:absolute;left:50%;bottom:-6px;width:58%;height:26px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.18),rgba(0,0,0,0) 70%);pointer-events:none;z-index:-1}
.awardanim{isolation:isolate}
.awardanim .award{filter:none}
/* cartoon Order Online buttons */
.orderimg{display:inline-block;background:none!important;border:0!important;padding:0!important;box-shadow:none!important;line-height:0;transition:transform .2s cubic-bezier(.3,1.6,.5,1);-webkit-tap-highlight-color:transparent}
.orderimg img{display:block;width:100%;height:auto;filter:none}
.orderimg:hover{transform:scale(1.06) rotate(-2deg)}
.orderimg:active{transform:scale(.96) rotate(0deg) translateY(2px);transition-duration:.06s}
.oi-hero{width:280px}.oi-cta{width:240px}.oi-nav{width:150px}
.nav nav a.orderimg:after{display:none}
.ctas{align-items:center}
@media(max-width:760px){.oi-hero{width:240px}.nav nav .oi-nav{width:200px}}
@media(prefers-reduced-motion:reduce){.orderimg:hover,.orderimg:active{transform:none}}

.doughanim{position:relative;width:180px;aspect-ratio:473/503;margin:0 0 18px;isolation:isolate}
.doughanim .doughsheep{width:100%;height:100%;object-fit:contain;object-position:50% 100%;margin:0}
.dframe{position:absolute;inset:0;width:100%;height:100%;display:none;filter:none!important;opacity:1!important}
.doughanim.playing .dframe.on{display:block}
.doughanim.playing .doughsheep{display:none!important}
.doughanim:hover{animation:hoverWiggle .5s ease-in-out 2}
@media(max-width:760px){.doughanim{width:150px;margin:0 auto 16px}}
@media(prefers-reduced-motion:reduce){.dframe{display:none!important}.doughanim .doughsheep{display:block!important}.doughanim:hover{animation:none}}

/* cartoon image buttons */
.imgbtn{display:inline-block;line-height:0;background:none;border:0;padding:0;transition:transform .2s cubic-bezier(.3,1.6,.5,1);-webkit-tap-highlight-color:transparent}
.imgbtn img{display:block;height:64px;width:auto;filter:none}
.ib-dir img{height:58px}
.imgbtn:hover{transform:scale(1.06) rotate(-2deg)}
.imgbtn:active{transform:scale(.96) translateY(2px);transition-duration:.06s}
@media(max-width:760px){.imgbtn img{height:54px}.ib-call img{height:50px}}
/* menu tabs */
.mtabs{align-items:center;gap:10px;padding-top:6px}
.mtabs button.gtab{background:none!important;border:0;padding:0;line-height:0;border-radius:0;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.mtabs button.gtab img{display:block;height:52px;width:auto}
.mtabs button.gtab:hover{background:none;transform:scale(1.06) rotate(-2deg)}
.mtabs button.gtab.on{transform:translateY(-4px) scale(1.08)}
.mtabs button.gtab:after{content:"";display:block;height:4px;border-radius:4px;margin:4px 18% 0;background:transparent}
.mtabs button.gtab.on:after{background:var(--red)}



.mtabs button:active{transform:scale(.96) translateY(2px)}
@media(max-width:760px){.mtabs button.gtab img{height:46px}.mtabs{padding-top:8px}}
@media(prefers-reduced-motion:reduce){.imgbtn,.mtabs button{transition:none}.imgbtn:hover,.mtabs button:hover{transform:none}}
.mtabs button{flex:0 0 auto}.mtabs button.gtab img{max-width:none}
@media(max-width:760px){.mtabs{padding-left:8px;padding-right:8px;padding-top:10px}}
@media(max-width:760px){.mtabs button.gtab.on,}
.mtabs button.gtab img.tb-sandwiches{height:58.8px}@media(max-width:760px){.mtabs button.gtab img.tb-sandwiches{height:52.0px}}
.mtabs button.gtab img.tb-drinks{height:66.5px}@media(max-width:760px){.mtabs button.gtab img.tb-drinks{height:58.9px}}
.mtabs button.gtab img.tb-beerwine{height:63.7px}@media(max-width:760px){.mtabs button.gtab img.tb-beerwine{height:56.3px}}
.mtabs button.gtab img.tb-showall{height:62.4px}@media(max-width:760px){.mtabs button.gtab img.tb-showall{height:55.2px}}

/* order section: fit content, wobble CTAs */
#order .scoot{display:block;width:100%;height:auto}
@media(max-width:760px){#order .scoot{max-width:320px;max-height:none}}
#order .ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
@keyframes ctaWobble{0%,100%{rotate:-3deg;scale:1}25%{rotate:0deg;scale:1.05}50%{rotate:3deg;scale:1}75%{rotate:0deg;scale:1.05}}
#order .ctas .orderimg,#order .ctas .imgbtn{animation:ctaWobble 1.6s ease-in-out infinite}
#order .ctas .imgbtn{animation-delay:-.8s}
@media(prefers-reduced-motion:reduce){#order .ctas .orderimg,#order .ctas .imgbtn{animation:none!important;rotate:none;scale:none}}

/* award plaque */
.awardband{background:var(--paper);padding:80px 0}
.plaquefig{display:flex;align-items:center;justify-content:center;gap:56px;margin:0}
.plaquewrap{position:relative;display:inline-block;line-height:0}
.plaque{animation:plaqueGlint 6s ease-in-out infinite}
@keyframes plaqueGlint{0%,70%,100%{filter:brightness(1)}85%{filter:brightness(1.15)}}
.plaquefig .plaquewrap{width:min(320px,70vw);animation:plaqueTilt 7s ease-in-out infinite}
@keyframes plaqueTilt{0%,100%{rotate:-2deg}50%{rotate:2deg}}
.plaque{width:100%;height:auto;display:block}
.plaquefig figcaption{max-width:420px}.plaquefig h2{margin:0}.plaquesrc{font-weight:800;color:var(--red);font-size:1.1rem;margin-top:6px}
.footaward{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:30px;padding-top:24px;border-top:1px solid rgba(247,239,223,.15);text-align:left}
.footaward .plaquewrap{width:84px;flex:none}.footaward p{margin:0;font-size:.95rem;opacity:.85}
@media(max-width:700px){.awardband{padding:56px 0}.plaquefig{flex-direction:column;gap:20px;text-align:center}.plaquefig .plaquewrap{width:min(240px,64vw)}.footaward .plaquewrap{width:64px}}
@media(prefers-reduced-motion:reduce){.plaquewrap,.plaque{animation:none!important;filter:none}.plaquefig .plaquewrap{rotate:none}}

.chefbio{margin-top:34px;background:var(--paper);border:3px solid var(--ink);border-radius:18px;padding:20px 22px;box-shadow:8px 8px 0 var(--ink)}.chefbio h3{font-family:"Bowlby One",Impact,sans-serif;font-size:1.3rem;margin:0 0 10px;color:var(--red);letter-spacing:.02em}.chefbio ul{list-style:none;margin:0;padding:0}.chefbio li{position:relative;padding-left:22px;margin:8px 0;line-height:1.5}.chefbio li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--red)}
@media(max-width:760px){.chefbio{margin-top:26px;padding:16px 16px;box-shadow:6px 6px 0 var(--ink)}.chefbio h3{font-size:1.15rem}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
img.mascot{height:auto}