/* Water Balls — sample site
   Palette inspired by the Pinterest bakery mockup (seen, no exact hexes on the pin):
   dark sage/teal-green, pale sage, warm cream, soft peach, terracotta, red accent.
   These hexes are approximations for the sample, not sampled from the pin. */
:root{
  --sage-dark:#2f5a4e;
  --sage:#5f8578;
  --sage-pale:#dde9dc;
  --cream:#fff9ee;
  --peach:#fadac8;
  --peach-light:#fdf0e6;
  --terra:#c96a45;
  --terra-dark:#a85433;
  --red:#d64541;
  --ink:#24302c;
  --muted:#5a6a64;
  --white:#ffffff;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6}
a{color:var(--sage-dark)}
header{background:var(--sage-dark);color:#fff;position:sticky;top:0;z-index:10}
.nav{max-width:1080px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.logo{font-weight:800;font-size:22px;letter-spacing:.2px;color:#fff;text-decoration:none}
.logo span{color:var(--peach)}
nav{display:flex;gap:6px;flex-wrap:wrap}
nav a{color:#fff;text-decoration:none;padding:7px 11px;border-radius:999px;font-size:14px}
nav a:hover,nav a.active{background:rgba(255,255,255,.18)}
.wrap{max-width:1080px;margin:0 auto;padding:28px 20px}
.topbar{background:var(--terra);color:#fff;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 20px;font-size:13px;font-weight:600}
.hero{background:var(--cream);color:var(--ink);padding:64px 20px;text-align:left;position:relative;overflow:hidden;display:block;max-width:none;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);min-height:70vh;align-content:center;background-image:linear-gradient(rgba(255,249,238,.65),rgba(255,249,238,.55)),url('images/basket-hero.webp');background-size:cover;background-position:center 75%;background-repeat:no-repeat}
.hero-wave{position:relative;z-index:3;margin-bottom:-42px;background:transparent}
.hero-wave svg{height:42px}
.trust-strip{background:var(--sage-dark);color:#fff;border-radius:20px;padding:18px 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.trust-strip strong{display:block;font-size:16px}
.trust-strip span{font-size:13px;color:#dde9dc}
.how-strip{background:var(--sage-dark);color:#fff}
.how-strip h2{color:#fff}
.how-strip .card{background:rgba(255,255,255,.12);border:0;color:#fff}
.how-strip .card h3{color:#fff}
.how-strip .card p{color:#dde9dc}
.banner.banner-mustard{background:#c98a2e;color:#fff}
.banner.banner-mustard h2{color:#fff}
.banner.banner-mustard p{color:#fff}
.banner.banner-mustard .pill{background:var(--sage-dark)}
.hero-text{position:relative;z-index:2;max-width:640px;margin:0 auto 0 0;background:rgba(255,249,238,.95);padding:26px 28px;border-radius:20px}
.hero .water-row{justify-content:flex-start}
.hero .hero h1{color:var(--ink)}
.hero p{color:var(--muted)}
.hero .pill.outline{color:var(--sage-dark);border-color:var(--sage-dark)}
/* Line-art dates and tamarind in the background */
.line-art{position:absolute;pointer-events:none;z-index:1;opacity:.30}
.line-art.date{left:-10px;bottom:-20px}
.line-art.tamarind{right:-10px;top:10px}
.line-art svg{fill:none;stroke:#5f8578;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.line-art.light svg{stroke:#8aa99b}
/* Falling herb leaves — in the header, above the menu, not in the hero */
header{position:relative;overflow:hidden}
header .nav{position:relative;z-index:2}
@keyframes fall{0%{transform:translateY(-60px) rotate(0deg);opacity:0}10%{opacity:.85}100%{transform:translateY(420px) rotate(340deg);opacity:0}}
@keyframes header-fall{0%{transform:translateY(-50px) rotate(0deg);opacity:0}15%{opacity:.85}100%{transform:translateY(90px) rotate(340deg);opacity:0}}
.fall-leaf{position:absolute;top:0;animation-name:fall;animation-timing-function:linear;animation-iteration-count:infinite;pointer-events:none;z-index:1}
header .fall-leaf{animation-name:header-fall}
.hero h1,.hero p,.hero .pill{position:relative;z-index:2}
.hero-img{display:block;max-width:100%;width:100%;height:auto;object-fit:contain;margin:0 auto;border-radius:20px;position:relative;z-index:2;align-self:center}
@media(max-width:700px){.hero{display:block;padding:32px 16px;text-align:left;min-height:auto;background-attachment:scroll}.hero h1{font-size:32px}.hero p{font-size:15px}.pill{padding:9px 14px;font-size:14px}.hero-img{margin:0;max-width:100%}.nav{padding:10px 12px}nav a{font-size:13px;padding:6px 9px}}
.leaf-float{position:absolute;opacity:.35;pointer-events:none}
.leaf-float.l1{left:6%;top:18%;transform:rotate(-24deg)}
.leaf-float.l2{right:7%;top:28%;transform:rotate(32deg)}
.leaf-float.l3{left:12%;bottom:12%;transform:rotate(14deg)}
.hero h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(36px,6vw,60px);line-height:1.05;margin:0 0 12px}
.hero h1 em{font-style:italic;color:var(--terra)}
.hero p{max-width:640px;margin:0 auto 18px;color:var(--muted);font-size:18px}
.pill{display:inline-block;background:var(--terra);color:#fff;text-decoration:none;padding:12px 22px;border-radius:999px;font-weight:700;margin:4px}
.pill:hover{background:var(--terra-dark)}
.pill.outline{background:transparent;color:var(--sage-dark);border:2px solid var(--sage-dark)}
.water-row{display:flex;justify-content:center;gap:14px;margin:22px 0 6px;flex-wrap:wrap}
section{padding:10px 0 28px}
.section-sage{background:var(--sage-pale)}
.section-peach{background:var(--peach-light)}
h2{font-family:Georgia,'Times New Roman',serif;font-size:32px;margin:8px 0 10px}
h3{margin:6px 0}
.lead{color:var(--muted);max-width:700px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:18px}
/* Menu tiles — mosaic style from the cookie/bakery pin: irregular pastel panels, serif names, no crisp card borders */
.menu-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.tile-card{padding:30px 22px;border:0;box-shadow:none;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,8 C10,2 20,8 30,4 C40,0 50,8 60,4 C70,0 80,8 90,4 C95,2 100,6 100,6 L100,94 C90,98 80,92 70,96 C60,100 50,92 40,96 C30,100 20,92 10,96 C5,98 0,94 0,94 Z' fill='white'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,8 C10,2 20,8 30,4 C40,0 50,8 60,4 C70,0 80,8 90,4 C95,2 100,6 100,6 L100,94 C90,98 80,92 70,96 C60,100 50,92 40,96 C30,100 20,92 10,96 C5,98 0,94 0,94 Z' fill='white'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.tile-card:nth-child(5n+1){background:#f7d6d0;border-radius:28px 10px 28px 10px}
.tile-card:nth-child(5n+2){background:#cfe3da;border-radius:10px 28px 10px 28px}
.tile-card:nth-child(5n+3){background:#fdeec2;border-radius:28px 28px 10px 28px}
.tile-card:nth-child(5n+4){background:#fbd9c8;border-radius:10px 28px 28px 10px}
.tile-card:nth-child(5n+5){background:#e3dcf2;border-radius:28px 10px 28px 28px}
.tile-card.wide{grid-column:span 2}
.tile-card h3{font-family:Georgia,'Times New Roman',serif;font-size:26px;line-height:1.15;margin:6px 0 8px}
.tile-card p{color:#4a4a4a}
.tile-card .price{display:inline-block;background:#d64541;color:#fff !important;border-radius:999px;padding:6px 14px;font-size:18px}
.tile-card .tag{background:rgba(255,255,255,.7)}
@media(max-width:700px){.menu-tiles{grid-template-columns:1fr 1fr}.tile-card.wide{grid-column:span 2}.tile-card h3{font-size:20px}}
@media(max-width:480px){.menu-tiles{grid-template-columns:1fr}.tile-card.wide{grid-column:span 1}}
.card{background:#fff;border:1px solid #e8ddd0;border-radius:18px;padding:18px}
.card .price{font-weight:800;color:var(--terra);font-size:20px}
.tag{display:inline-block;background:var(--sage-pale);color:var(--sage-dark);border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700;margin:2px 4px 2px 0}
.banner{background:var(--sage-dark);color:#fff;border-radius:20px;padding:24px;text-align:center}
.banner h2{color:#fff}
.banner .pill{background:var(--terra)}
.wave{display:block;width:100%;height:28px;background:var(--sage-pale);clip-path:ellipse(60% 100% at 50% 0)}
/* Wavy, curved section edges — like the Pinterest bakery mockup */
.wave-divider{line-height:0;overflow:hidden}
.wave-divider svg{display:block;width:100%;height:42px}
.wave-divider.cream-bg{background:var(--cream)}
.wave-divider.sage-bg{background:var(--sage-pale)}
.wave-divider.peach-bg{background:var(--peach-light)}
/* Water-dripping section edges — replaces the smooth waves */
.drip-divider{line-height:0;overflow:hidden}
.drip-divider svg{display:block;width:100%;height:70px}
/* Torn-page section edges — replaces the drips, per her confirmation */
.torn-divider{line-height:0;overflow:hidden}
.torn-divider svg{display:block;width:100%;height:55px}
form{max-width:560px}
label{display:block;font-weight:700;margin-top:14px}
input,textarea,select{width:100%;padding:11px;border:1px solid #cbbfb0;border-radius:10px;font:inherit;background:#fff}
button{cursor:pointer;border:0}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}
.tile{background:var(--sage-pale);border-radius:18px;min-height:170px;display:flex;align-items:flex-end;padding:16px;font-weight:700}
.tile.peach{background:var(--peach)}
.tile.terra{background:#e8b9a0}
.faq{border-bottom:1px solid #e2d5c5;padding:12px 0}
.note{background:var(--peach-light);border-left:5px solid var(--terra);padding:12px 16px;border-radius:8px;margin:16px 0}
.map-wrap{border-radius:20px;overflow:hidden;border:1px solid #e8ddd0;margin:16px 0}
.map-wrap iframe{display:block}
footer{background:var(--sage-dark);color:#fff;text-align:center;padding:26px 20px;margin-top:0}
footer a{color:var(--peach)}
@media(max-width:600px){.nav{justify-content:center;text-align:center}nav{justify-content:center}}

/* Small smooth wavy edges, site-wide — same smooth wave mask as the menu tiles */
.card,.tile,.banner{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,8 C10,2 20,8 30,4 C40,0 50,8 60,4 C70,0 80,8 90,4 C95,2 100,6 100,6 L100,94 C90,98 80,92 70,96 C60,100 50,92 40,96 C30,100 20,92 10,96 C5,98 0,94 0,94 Z' fill='white'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,8 C10,2 20,8 30,4 C40,0 50,8 60,4 C70,0 80,8 90,4 C95,2 100,6 100,6 L100,94 C90,98 80,92 70,96 C60,100 50,92 40,96 C30,100 20,92 10,96 C5,98 0,94 0,94 Z' fill='white'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* 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}}

/* Flavour water glasses — Menu page Flavour Waters section (moved from the Home hero) */
.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}
@media(max-width:700px){.water-glass{width:70px}.water-glass svg{width:70px;height:84px}}

.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)}}