/* Water Balls — Home 2 (street cart style). Separate from style.css so Home 1 keeps its classic look. */
*{box-sizing:border-box}
:root{--ink:#17100b;--coal:#211710;--panel:#2b1d13;--cream:#fff6e9;--soft:#e8d9c3;--saffron:#ff9f1c;--chili:#e63946;--mint:#7fb069;--gold:#ffc53d}
body{margin:0;font-family:'Segoe UI',system-ui,Arial,sans-serif;background:var(--ink);color:var(--cream);line-height:1.55}
a{color:inherit}
.topbar2{background:var(--chili);color:#fff;text-align:center;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px}
header{background:var(--coal);position:sticky;top:0;z-index:40;border-bottom:3px solid var(--saffron)}
.nav2{max-width:1120px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.logo2{font-family:'Arial Black','Segoe UI',sans-serif;font-size:24px;text-decoration:none;letter-spacing:.02em}
.logo2 span{color:var(--saffron)}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav a{color:var(--cream);text-decoration:none;padding:8px 12px;border-radius:999px;font-size:14px;font-weight:600}
nav a:hover,nav a.active{background:var(--saffron);color:var(--ink)}
.has-drop{position:relative;display:inline-block}
.has-drop .caret{font-size:10px}
.drop{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.45);padding:6px;display:none;min-width:136px;z-index:80}
.drop a{color:#3a2415;display:block;border-radius:8px;padding:9px 12px;font-weight:700}
.drop a:hover{background:#ffedd0;color:#3a2415}
.has-drop.open .drop{display:block}
@media (hover:hover){.has-drop:hover .drop{display:block}}
.hero2{position:relative;min-height:80vh;display:flex;align-items:center;background:url('images/platter-hero.webp') center/cover no-repeat;padding:64px 20px}
.hero2::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,9,4,.88) 0%,rgba(16,9,4,.62) 52%,rgba(16,9,4,.18) 100%)}
.hero2-in{position:relative;max-width:1120px;margin:0 auto;width:100%}
.kicker{display:inline-block;background:var(--chili);color:#fff;font-weight:800;letter-spacing:.14em;font-size:12px;text-transform:uppercase;padding:6px 12px;border-radius:6px;transform:rotate(-2deg)}
.hero2 h1{font-family:'Arial Black','Segoe UI',sans-serif;font-size:56px;line-height:1.04;margin:18px 0 14px;text-transform:uppercase;max-width:640px}
.hero2 h1 .y{color:var(--saffron)}
.hero2 p{font-size:18px;color:var(--soft);max-width:520px;margin:0 0 24px}
.btn{display:inline-block;background:var(--saffron);color:var(--ink);font-weight:800;text-decoration:none;padding:13px 24px;border-radius:999px;margin:0 10px 10px 0;font-size:15px}
.btn.ghost{background:transparent;color:var(--cream);border:2px solid var(--cream)}
.btn:hover{filter:brightness(1.08)}
.marquee{background:var(--saffron);color:var(--ink);overflow:hidden;white-space:nowrap;padding:10px 0;font-family:'Arial Black','Segoe UI',sans-serif;text-transform:uppercase;font-size:15px;letter-spacing:.06em}
.marquee .track{display:inline-block;animation:mq 22s linear infinite}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.wrap2{max-width:1120px;margin:0 auto;padding:56px 20px}
h2.title{font-family:'Arial Black','Segoe UI',sans-serif;text-transform:uppercase;font-size:32px;margin:0 0 8px}
h2.title .y{color:var(--saffron)}
.lead2{color:var(--soft);margin:0 0 28px;max-width:640px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.split img{width:100%;border-radius:18px;display:block;border:3px solid var(--panel)}
.flav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.flav{background:var(--panel);border-radius:16px;padding:20px 16px;border-top:6px solid var(--mint)}
.flav.f2{border-top-color:#e8b4b8}.flav.f3{border-top-color:#b07d4f}.flav.f4{border-top-color:var(--gold)}
.flav h3{margin:0 0 6px;font-size:18px}
.flav p{margin:0;color:var(--soft);font-size:14px}
.fav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fav{background:var(--cream);color:#2b1a0e;border-radius:16px;padding:20px 16px;position:relative}
.fav h3{margin:0 0 6px;font-size:17px}
.fav p{margin:0 0 14px;font-size:14px;color:#6b5138}
.price2{display:inline-block;background:var(--chili);color:#fff;font-weight:800;border-radius:999px;padding:5px 14px;font-size:15px}
.fav a.more{display:block;margin-top:12px;font-weight:800;color:#b3540e;text-decoration:none;font-size:14px}
.band{background:var(--saffron);color:var(--ink)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{background:rgba(255,255,255,.35);border-radius:16px;padding:20px 16px}
.step .n{font-family:'Arial Black','Segoe UI',sans-serif;font-size:30px;color:var(--chili)}
.step h3{margin:6px 0 6px;font-size:18px}
.step p{margin:0;font-size:14px}
.note2{background:var(--panel);border-left:6px solid var(--saffron);border-radius:10px;padding:16px 18px;color:var(--soft);font-size:14px}
footer{background:var(--coal);border-top:3px solid var(--saffron);text-align:center;padding:26px 16px;color:var(--soft);font-size:14px}
footer a{color:var(--saffron)}
@media(max-width:900px){.flav-grid,.fav-grid{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}.steps{grid-template-columns:1fr}}
@media(max-width:700px){.hero2{min-height:auto;padding:44px 16px}.hero2 h1{font-size:36px}.hero2 p{font-size:16px}.nav2{padding:10px 12px}nav a{font-size:13px;padding:7px 9px}h2.title{font-size:25px}}
@media (prefers-reduced-motion: reduce){.marquee .track{animation:none}}

/* Puri-filling animation — About page */
.puri-anim-wrap{text-align:center}
.puri-anim{width:min(420px,92%);height:auto}
.puri-anim figcaption,.puri-anim-wrap figcaption{color:var(--muted);font-size:14px;margin-top:6px}
.puri-anim .jug{transform-box:view-box;transform-origin:182px 90px;animation:pourTilt 4.8s ease-in-out infinite}
.puri-anim .stream{transform-box:fill-box;transform-origin:top center;animation:streamFlow 4.8s ease-in-out infinite,dashMove .7s linear infinite;stroke-dasharray:10 8}
.puri-anim .pani-fill{animation:paniRise 4.8s ease-in-out infinite}
.puri-anim .puri-bob{animation:puriBob 4.8s ease-in-out infinite}
.puri-anim .drop{opacity:0;animation:dropPop 4.8s ease-in-out infinite}
.puri-anim .spark{opacity:0;transform-box:fill-box;transform-origin:center;animation:sparkPop 4.8s ease-in-out infinite}
@keyframes pourTilt{0%,8%{transform:rotate(0deg)}18%,58%{transform:rotate(-26deg)}70%,100%{transform:rotate(0deg)}}
@keyframes streamFlow{0%,14%{opacity:0;transform:scaleY(.2)}20%,56%{opacity:1;transform:scaleY(1)}62%,100%{opacity:0;transform:scaleY(.2)}}
@keyframes dashMove{to{stroke-dashoffset:-36}}
@keyframes paniRise{0%,16%{transform:translateY(19px)}56%,92%{transform:translateY(0)}100%{transform:translateY(19px)}}
@keyframes dropPop{0%,52%{opacity:0;transform:translateY(4px)}58%{opacity:1;transform:translateY(-4px)}66%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes sparkPop{0%,60%{opacity:0;transform:scale(.4)}72%{opacity:1;transform:scale(1)}88%,100%{opacity:0;transform:scale(.6)}}
@keyframes puriBob{0%,62%{transform:translateY(0)}74%{transform:translateY(-4px)}86%,100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.puri-anim *{animation:none!important}}
.puri-anim .ripple{opacity:0;transform-box:fill-box;transform-origin:center;animation:rippleOut 4.8s ease-in-out infinite}
@keyframes rippleOut{0%,18%{opacity:0;transform:scale(.5)}26%{opacity:.95}48%{opacity:0;transform:scale(1.5)}56%{opacity:.95;transform:scale(.6)}64%,100%{opacity:0;transform:scale(1.5)}}

/* --- Inner dark pages (About 2 / Menu 2 / Catering 2 / Gallery 2 / FAQ 2 / Contact 2) --- */
h1.title{font-family:'Arial Black','Segoe UI',sans-serif;text-transform:uppercase;font-size:40px;margin:0 0 10px;line-height:1.1}
h1.title .y{color:var(--saffron)}
.anim-card{background:var(--cream);border-radius:18px;padding:20px 14px;text-align:center}
.anim-card .puri-anim-wrap{margin:0}
.anim-card figcaption{color:#6b5138}
.water-row{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;background:var(--panel);border-radius:16px;padding:24px 16px}
.water-glass{width:92px;text-align:center}
.water-glass svg{width:92px;height:110px}
.water-glass span{display:block;font-size:13px;font-weight:700;margin-top:2px;color:var(--cream)}
@media(max-width:700px){.water-glass{width:70px}.water-glass svg{width:70px;height:84px}}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tag2{display:inline-block;background:#f3e2c7;color:#8a5a1d;font-size:11px;font-weight:800;letter-spacing:.05em;border-radius:999px;padding:3px 9px;margin:0 6px 10px 0}
.fav .price2{display:inline-block;margin-top:2px}
.qa{background:var(--panel);border-radius:14px;padding:18px 20px;margin-bottom:12px}
.qa h3{margin:0 0 6px;color:var(--gold);font-size:17px}
.qa p{margin:0;color:var(--soft)}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gal{margin:0}
.gal img{width:100%;height:220px;object-fit:cover;border-radius:14px;display:block}
.gal figcaption{color:var(--soft);font-size:14px;margin-top:8px}
.gal .ph{height:220px;border-radius:14px;background:var(--panel);display:grid;place-items:center;color:var(--soft);border:2px dashed #4a3421;font-weight:700}
.form2 label{display:block;font-weight:700;margin:14px 0 6px}
.form2 input,.form2 textarea{width:100%;padding:12px;border-radius:10px;border:2px solid #4a3421;background:var(--ink);color:var(--cream);font:inherit}
.map2{width:100%;height:400px;border:0;border-radius:16px}
nav .has-drop:last-child .drop{left:auto;right:0}
@media(max-width:900px){.menu-grid,.gal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.menu-grid,.gal-grid{grid-template-columns:1fr}h1.title{font-size:29px}}