/* The Real Juicery — static site. Brand colors sampled from the logo. */
@font-face{font-family:"Fredoka";src:url("fonts/fredoka.woff2") format("woff2");font-weight:300 700;font-display:swap}
:root{
  --blue:#3AB4FA; --blue-deep:#0F7FC2; --blue-ink:#0A3550; --sky:#E9F7FF;
  --yellow:#FFEC1F; --yellow-soft:#FFF9C4;
  --pink:#D6177E; --pink-hot:#E8288F;
  --ink:#111417; --muted:#4A5560; --cream:#FFFDF6; --line:#E6EEF4;
  --radius:22px; --shadow:0 10px 30px rgba(10,53,80,.12);
  --head:"Fredoka",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --header-h:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 60px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--body);font-size:16px;line-height:1.55;color:var(--ink);background:var(--cream);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-deep)}
h1,h2,h3,h4{font-family:var(--head);line-height:1.1;margin:0;letter-spacing:-.01em}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--pink-hot);outline-offset:3px;border-radius:8px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:48px;padding:.7em 1.3em;border-radius:999px;font-family:var(--head);font-weight:600;font-size:1.05rem;text-decoration:none;border:2.5px solid var(--ink);transition:transform .15s ease,box-shadow .15s ease;text-align:center;line-height:1.15}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--ink)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-order{background:var(--pink);color:#fff}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-ghost{background:#fff;color:var(--ink);border-width:2px;font-size:.95rem;min-height:44px;padding:.55em 1em}
.btn-sm{min-height:40px;padding:.45em 1em;font-size:.95rem}
.btn-lg{min-height:54px;font-size:1.12rem;padding:.8em 1.6em}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,253,246,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.site-header.scrolled{border-bottom-color:var(--line);box-shadow:0 4px 18px rgba(10,53,80,.07)}
.header-inner{display:flex;align-items:center;gap:16px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--head);font-weight:700;font-size:1.15rem;margin-right:auto;min-width:0}
.brand img{width:44px;height:44px;flex:none}
.brand span{white-space:nowrap}
.nav{display:none;gap:6px}
.nav a{color:var(--ink);text-decoration:none;font-family:var(--head);font-weight:500;font-size:1.05rem;padding:8px 14px;border-radius:999px}
.nav a:hover{background:var(--sky)}
@media (min-width:820px){.nav{display:flex}}
@media (max-width:400px){.brand span{font-size:1.02rem}}

/* Hero */
.hero{position:relative;background:var(--blue);background-image:radial-gradient(circle at 85% 20%,rgba(255,255,255,.35),transparent 45%),radial-gradient(circle at 10% 90%,rgba(255,236,31,.35),transparent 40%);color:var(--ink);overflow:hidden;padding:28px 0 90px}
.hero-inner{display:grid;gap:28px;align-items:center}
.hero-copy{text-align:center}
.hero-logo{width:132px;height:132px;margin:0 auto 10px;filter:drop-shadow(0 8px 18px rgba(10,53,80,.25))}
.hero h1{font-size:clamp(2.5rem,11vw,4.6rem);font-weight:700;color:#fff;text-shadow:3px 3px 0 var(--ink);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill}
.hero h1 span{color:var(--yellow)}
.lede{font-size:1.12rem;max-width:34em;margin:16px auto 22px;color:var(--blue-ink);font-weight:500}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hero-cta .btn{flex:1 1 200px;max-width:280px}
.hero-locs{margin:18px 0 0;font-weight:600;color:var(--blue-ink)}
.hero-locs a{color:var(--blue-ink)}
.hero-art{position:relative;height:250px;max-width:420px;width:100%;margin:0 auto}
.hero-art img{position:absolute;width:56%;border-radius:28px;border:4px solid #fff;box-shadow:var(--shadow)}
.hero-art .h1{left:0;top:30px;transform:rotate(-8deg)}
.hero-art .h2{left:22%;top:0;z-index:2;transform:rotate(2deg)}
.hero-art .h3{right:0;top:40px;transform:rotate(9deg)}
.wave{position:absolute;bottom:-1px;left:0;width:100%;height:60px;fill:var(--cream)}
@media (min-width:900px){
  .hero{padding:56px 0 120px}
  .hero-inner{grid-template-columns:1.1fr 1fr}
  .hero-copy{text-align:left}
  .hero-logo{margin:0 0 12px;width:150px;height:150px}
  .lede{margin-left:0}
  .hero-cta{justify-content:flex-start}
  .hero-art{height:430px;max-width:520px}
}

/* Promises */
.promises{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:-36px auto 0;position:relative;z-index:3}
.promises li{background:#fff;border:2px solid var(--ink);border-radius:16px;padding:12px 10px;font-family:var(--head);font-weight:600;font-size:1rem;display:flex;align-items:center;gap:8px;box-shadow:0 4px 0 var(--ink)}
.promises span{font-size:1.25rem}
@media (min-width:820px){.promises{grid-template-columns:repeat(4,1fr);gap:16px}.promises li{justify-content:center;font-size:1.1rem;padding:16px}}

/* Section heads */
.section-head{text-align:center;margin:0 auto 22px;max-width:640px}
.eyebrow{display:inline-block;font-family:var(--head);font-weight:600;color:var(--pink);text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;margin:0 0 8px}
.section-head h2,.about h2{font-size:clamp(2rem,7vw,3rem)}
.section-head p{color:var(--muted);margin:10px 0 0;font-size:1.05rem}

/* Menu */
.menu{padding:56px 0 30px}
.chips{position:sticky;top:var(--header-h);z-index:40;background:rgba(255,253,246,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line);margin-bottom:8px}
.chips-inner{display:flex;gap:8px;overflow-x:auto;padding-top:10px;padding-bottom:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.chips-inner::-webkit-scrollbar{display:none}
.chips a{flex:none;scroll-snap-align:start;text-decoration:none;color:var(--ink);font-family:var(--head);font-weight:600;font-size:.98rem;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:7px 15px;white-space:nowrap}
.chips a.active,.chips a:hover{background:var(--yellow)}
@media (min-width:900px){.chips-inner{justify-content:center}}
.cat{padding-top:26px}
.cat-head{margin-bottom:14px}
.cat-head h3{font-size:1.8rem;display:inline-block;background:linear-gradient(transparent 62%,var(--yellow) 62%);padding:0 4px}
.cat-head p{margin:6px 0 0;color:var(--muted);max-width:46em}
.items{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:640px){.items{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.items{grid-template-columns:repeat(3,1fr);gap:16px}}
.item{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px;box-shadow:0 2px 10px rgba(10,53,80,.05);transition:box-shadow .2s,transform .2s}
.item:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.item img{width:104px;height:104px;border-radius:16px;object-fit:cover;background:var(--sky)}
.item-body{min-width:0;padding:2px 4px 2px 0}
.item-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.item h4{font-size:1.18rem;font-weight:600}
.price{font-family:var(--head);font-weight:700;color:var(--pink);font-size:1.08rem;white-space:nowrap}
.ing{margin:5px 0 0;font-size:.92rem;color:var(--muted);line-height:1.45}
.ing b{color:var(--ink);font-weight:600}
.nutr{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.chip{font-size:.78rem;font-weight:600;background:var(--sky);color:var(--blue-ink);border-radius:999px;padding:3px 9px}
@media (min-width:1000px){.item{grid-template-columns:1fr;padding:0;overflow:hidden}.item img{width:100%;height:auto;aspect-ratio:1/1;border-radius:0}.item-body{padding:14px 16px 16px}}
.menu-note{text-align:center;color:var(--muted);font-size:.9rem;margin:28px 0 0}

/* About */
.about{background:var(--yellow);border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);padding:56px 0;margin-top:40px}
.about-inner{display:grid;gap:30px;align-items:center}
.about-copy p{font-size:1.08rem;margin:14px 0 0;max-width:36em}
.about .eyebrow{color:var(--ink)}
.family{font-family:var(--head);font-weight:700;font-size:1.5rem!important;color:var(--pink)}
.about-art{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.about-art img{border-radius:20px;border:3px solid var(--ink);aspect-ratio:1/1;object-fit:cover}
.about-art img:nth-child(2n){transform:translateY(18px)}
@media (min-width:900px){.about-inner{grid-template-columns:1.1fr 1fr}}

/* Locations */
.locations{padding:64px 0 40px}
.loc-grid{display:grid;gap:18px}
@media (min-width:820px){.loc-grid{grid-template-columns:1fr 1fr;gap:24px}}
.loc{background:#fff;border:2.5px solid var(--ink);border-radius:26px;padding:20px;box-shadow:0 6px 0 var(--ink)}
.loc-top{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.loc-top .status{display:inline-block;margin-top:8px}
.loc-top .status[hidden]{display:none}
.pin{width:36px;height:auto;margin-top:2px}
.loc h3{font-size:1.65rem}
.addr{margin:4px 0 0;color:var(--muted)}
.status{font-family:var(--head);font-weight:600;font-size:.85rem;border-radius:999px;padding:4px 10px;white-space:nowrap;background:#E7F8EC;color:#11663A;border:1.5px solid #11663A}
.status.closed{background:#FDECEF;color:#9B1239;border-color:#9B1239}
.hours{width:100%;border-collapse:collapse;margin:16px 0 10px;font-size:.98rem}
.hours caption{text-align:left;font-family:var(--head);font-weight:600;font-size:1rem;margin-bottom:4px}
.hours th{text-align:left;font-weight:500;color:var(--muted);padding:6px 0;border-top:1px solid var(--line)}
.hours td{text-align:right;font-weight:600;padding:6px 0;border-top:1px solid var(--line)}
.phone{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:1.1rem;color:var(--ink);text-decoration:none;padding:8px 0;min-height:44px}
.phone:hover{color:var(--blue-deep)}
.loc-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.loc-actions .btn-order{grid-column:1/-1}

/* Order band */
.order{background:var(--blue);background-image:radial-gradient(circle at 15% 20%,rgba(255,255,255,.3),transparent 40%);border-top:2.5px solid var(--ink);padding:56px 0;text-align:center;margin-top:30px}
.order h2{font-size:clamp(2rem,7.5vw,3rem);color:#fff;-webkit-text-stroke:1.2px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink)}
.order p{color:var(--blue-ink);font-weight:500;font-size:1.08rem;margin:12px auto 0;max-width:32em}
.order-btns{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:24px}
.order-btns .btn{width:100%;max-width:360px}
@media (min-width:720px){.order-btns{flex-direction:row;justify-content:center}.order-btns .btn{width:auto}}
.order-call a{color:var(--blue-ink);font-weight:700;white-space:nowrap}
.foot-locs a,.social a{white-space:nowrap}

/* Footer */
.site-footer{background:var(--ink);color:#E9EEF2;padding:44px 0 120px;text-align:center}
.foot-logo{width:96px;height:96px;margin:0 auto}
.foot-name{font-family:var(--head);font-weight:700;font-size:1.6rem;margin:8px 0 0;color:#fff}
.site-footer .tag{font-family:var(--head);font-weight:600;color:var(--yellow);font-size:1.2rem;margin:4px 0 18px}
.foot-locs{display:flex;justify-content:center;gap:36px;flex-wrap:wrap}
.foot-locs p{margin:0;line-height:1.6}
.site-footer a{color:#9FDBFF}
.social{margin:22px 0 6px}
.copy{color:#9AA6B1;font-size:.88rem;margin:0}
@media (min-width:820px){.site-footer{padding-bottom:44px}}

/* Mobile order bar */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1.6fr 1fr;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,253,246,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s ease}
.mobile-bar.show{transform:none}
.mobile-bar .btn{min-height:48px}
@media (min-width:820px){.mobile-bar{display:none}}

/* ===== Overfill Smoothies (featured) ===== */
.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}
.nav a.nav-hot{background:var(--pink);color:#fff;border:2px solid var(--ink);padding:6px 14px}
.nav a.nav-hot:hover{background:var(--pink-hot)}
.overfill{--of-bg:#E8288F;position:relative;overflow-x:clip;margin-top:62px;padding:34px 0 44px;color:#fff;
  background-color:var(--of-bg);
  background-image:radial-gradient(rgba(255,236,31,.33) 2.2px,transparent 2.8px),linear-gradient(160deg,#F23C9C 0%,#E8288F 45%,#C9157A 100%);
  background-size:22px 22px,100% 100%}
/* bubbly foam top edge */
.overfill::before{content:"";position:absolute;left:0;right:0;top:-27px;height:28px;
  background:radial-gradient(circle at 22px 28px,var(--of-bg) 21px,transparent 22px) 0 0/44px 28px repeat-x,
             radial-gradient(circle at 14px 28px,#F23C9C 12px,transparent 13px) 11px 6px/44px 28px repeat-x;
  animation:of-foam 9s linear infinite}
@keyframes of-foam{to{background-position:44px 0,55px 6px}}
.of-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;opacity:.55;animation:of-drift 14s ease-in-out infinite alternate}
.b1{width:340px;height:340px;left:-120px;top:-60px;background:radial-gradient(circle,#FFEC1F 0,rgba(255,236,31,0) 68%)}
.b2{width:380px;height:380px;right:-140px;top:30%;background:radial-gradient(circle,#8B3FC0 0,rgba(139,63,192,0) 68%);animation-duration:17s}
.b3{width:300px;height:300px;left:30%;bottom:-120px;background:radial-gradient(circle,#FFB25B 0,rgba(255,178,91,0) 68%);animation-duration:12s}
@keyframes of-drift{to{transform:translate(40px,30px) scale(1.15)}}
.of-float{position:absolute;font-size:26px;opacity:.5;animation:of-floaty 6s ease-in-out infinite;will-change:transform}
.f0{left:6%;top:12%}.f1{left:88%;top:9%;animation-delay:-1s}.f2{left:80%;top:44%;animation-delay:-2s}.f3{left:4%;top:52%;animation-delay:-3s}
.f4{left:48%;top:4%;animation-delay:-4s;font-size:20px}.f5{left:22%;top:86%;animation-delay:-2.5s}.f6{left:68%;top:88%;animation-delay:-1.5s;font-size:22px}.f7{left:93%;top:70%;animation-delay:-3.5s}
@keyframes of-floaty{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-14px) rotate(10deg)}}
.of-head{text-align:center;position:relative}
.of-eyebrow{display:inline-block;margin:0 0 10px;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:5px 14px;font-family:var(--head);font-weight:700;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 3px 0 var(--ink);transform:rotate(-2deg)}
.overfill h2{display:flex;flex-direction:column;align-items:center;line-height:.95}
.of-word{display:flex;font-size:clamp(3.4rem,17vw,7rem);font-weight:700;color:#fff;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink)}
.of-word span{display:inline-block;animation:of-jelly 2.6s ease-in-out infinite;animation-delay:calc(var(--d) * .12s);transform-origin:50% 90%}
@keyframes of-jelly{0%,60%,100%{transform:translateY(0) scale(1,1)}10%{transform:translateY(-10px) scale(.94,1.08)}20%{transform:translateY(0) scale(1.08,.92)}30%{transform:translateY(-3px) scale(.98,1.02)}40%{transform:translateY(0) scale(1,1)}}
.of-sub{font-size:clamp(1.9rem,8vw,3.2rem);font-weight:700;color:var(--yellow);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink);transform:rotate(-3deg);margin-top:2px}
.of-lede{margin:14px auto 0;font-family:var(--head);font-weight:500;font-size:1.2rem;max-width:26em}
/* cards: swipe row on phones, grid on desktop */
.of-track{list-style:none;margin:26px 0 0;padding:14px 20px 26px;display:grid;grid-auto-flow:column;grid-auto-columns:min(68%,270px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch;position:relative}
.of-track::-webkit-scrollbar{display:none}
.of-card{scroll-snap-align:start;background:var(--c);color:var(--ink);border:2.5px solid var(--ink);border-radius:28px;padding:10px;box-shadow:0 6px 0 var(--ink);display:flex;flex-direction:column}
.of-light{color:#fff}
.of-photo{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:2/3;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 2px 10px rgba(0,0,0,.08)}
.of-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.34,1.4,.5,1);transform-origin:50% 88%}
.of-card:hover .of-photo img{transform:scale(1.04) translateY(-6px)}

.of-price{position:absolute;top:10px;right:10px;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ink);border:2.5px solid var(--ink);font-family:var(--head);font-weight:700;font-size:1.02rem;box-shadow:0 3px 0 var(--ink);transform:rotate(12deg);animation:of-wiggle 2.8s ease-in-out infinite;animation-delay:calc(var(--i) * .35s)}
@keyframes of-wiggle{0%,80%,100%{transform:rotate(12deg) scale(1)}86%{transform:rotate(-6deg) scale(1.12)}93%{transform:rotate(16deg) scale(1.04)}}
.of-body{padding:12px 6px 4px;display:flex;flex-direction:column;flex:1}
.of-body h3{font-size:1.5rem;font-weight:700}
.of-body p{margin:4px 0 12px;font-size:.98rem;line-height:1.4;flex:1}
.of-btn{width:100%}
.of-card:hover{animation:of-jiggle .6s ease}
@keyframes of-jiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-2deg) scale(1.02)}50%{transform:rotate(1.5deg) scale(1.02)}75%{transform:rotate(-.8deg)}}
/* pour-in on scroll (only when JS is present) */
.js .of-card{opacity:0;transform:translateY(-50px) scale(.92) rotate(-3deg);transition:opacity .45s ease,transform .7s cubic-bezier(.34,1.6,.5,1)}
.js .of-card.in{opacity:1;transform:none;transition-delay:calc(var(--i) * .1s)}
.js .of-card.in:hover{transition-delay:0s}
.of-swipe{text-align:center;margin:0 0 6px;font-family:var(--head);font-weight:600;font-size:.95rem;opacity:.9}
.of-swipe span{display:inline-block;animation:of-nudge 1.2s ease-in-out infinite}
@keyframes of-nudge{50%{transform:translateX(6px)}}
.of-ribbon{position:relative;margin:18px -10px 0;background:var(--yellow);color:var(--ink);border-block:2.5px solid var(--ink);transform:rotate(-2deg);overflow:hidden;white-space:nowrap;font-family:var(--head);font-weight:700;font-size:1.1rem;padding:8px 0}
.of-ribbon-in{display:inline-flex;animation:of-marquee 22s linear infinite}
@keyframes of-marquee{to{transform:translateX(-50%)}}
/* drips hanging off the bottom edge */
.of-drips{position:absolute;left:0;right:0;top:calc(100% - 1px);display:flex;justify-content:space-around;pointer-events:none;z-index:2}
.of-drips i{display:block;width:var(--w);height:var(--h);background:#C9157A;border-radius:0 0 999px 999px;transform-origin:50% 0;animation:of-drip var(--t) ease-in-out infinite}
.of-drips i:nth-child(n+9){display:none}
@keyframes of-drip{0%,100%{transform:scaleY(.75)}50%{transform:scaleY(1.15)}}
.overfill + .menu{padding-top:96px}
@media (min-width:640px){.of-track{grid-auto-columns:min(42%,280px)}.of-drips i:nth-child(n+9){display:block}}
@media (min-width:960px){
  .overfill{padding:50px 0 54px}
  .of-track{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;max-width:1160px;margin:34px auto 0;padding:14px 20px 20px;gap:20px}
  .of-swipe{display:none}
  .of-ribbon{margin-top:28px}
}
@media (prefers-reduced-motion:reduce){.js .of-card{opacity:1;transform:none}.of-photo img{transition:none}.of-card:hover .of-photo img{transform:none}}

.hero h1 .h1-kicker{display:block;font-family:var(--body,inherit);font-size:clamp(.78rem,3.3vw,.95rem);font-weight:700;line-height:1.35;letter-spacing:.04em;text-transform:uppercase;color:var(--blue-ink,#0a3550);-webkit-text-stroke:0;text-shadow:none;margin:0 0 10px}