/* Pani Puri Co · concept by Brand Evolution */
:root{
  --leaf:#0F3D2E; --leaf-2:#174F3C; --pudina:#4F9A3A; --puri:#E3A43A; --puri-soft:#FFE2A0; --cream:#FFF6E3; --paper:#FFFBF2;
  --imli:#6B2E14; --chilli:#E2483D; --chilli-deep:#B5321F; --ink:#1B2A22; --ink-soft:#4A5A50; --mint:#DDEFD2;
  --pani:#5BA33A;
  --display:"Unbounded", system-ui, sans-serif; --body:"Instrument Sans", system-ui, -apple-system, sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font:400 1.06rem/1.6 var(--body);color:var(--ink);background:var(--cream);overflow-x:hidden}
svg{display:block}
h1,h2,h3{font-family:var(--display);line-height:1.04;margin:0 0 .45em;font-weight:700;letter-spacing:-.02em}
p{margin:0 0 1em}
a{color:inherit}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--chilli);outline-offset:3px;border-radius:8px}
.pp-skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 14px;border-radius:10px;z-index:100}
.pp-skip:focus{left:12px}
.pp-wrap{width:min(1180px,100% - 32px);margin:0 auto;position:relative;z-index:3}
.pp-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.pp-display{font-size:clamp(2rem,4.6vw,3.8rem)}
.pp-kicker{font:700 .8rem/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--chilli-deep);margin-bottom:1rem;display:flex;align-items:center;gap:10px}
.pp-step{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--puri-soft);font:700 .8rem var(--display);letter-spacing:0}
.pp-lead{font-size:clamp(1.06rem,1.4vw,1.2rem);max-width:33em}
.pp-sub{max-width:44em;font-size:1.08rem;color:var(--ink-soft)}
.pp-tiny{font-size:.92rem;color:var(--ink-soft);margin-top:1.2rem}
.pp-facts{display:inline-block;font-weight:600;font-size:.95rem;background:#fff;border-radius:12px;padding:6px 12px;box-shadow:0 4px 0 rgba(227,164,58,.5)}
.pp-copy{max-width:32em}

/* buttons */
.pp-btn{display:inline-flex;align-items:center;justify-content:center;font:700 .98rem var(--display);text-decoration:none;color:#fff;background:var(--chilli);border:0;cursor:pointer;
  padding:.9em 1.5em;border-radius:999px;box-shadow:0 5px 0 var(--chilli-deep);transition:background .2s,box-shadow .2s,transform .2s}
.pp-btn:hover{background:#D33C31;transform:translateY(-2px)}
.pp-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--chilli-deep)}
.pp-btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2.5px var(--ink)}
.pp-btn-ghost:hover{background:rgba(27,42,34,.07)}
.pp-btn-small{padding:.62em 1.1em;font-size:.86rem;box-shadow:0 4px 0 var(--chilli-deep)}
.pp-wide{width:100%}
.pp-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.6rem}

/* nav: clear at top; cream glass over light sections, deep-green glass over dark ones */
.pp-nav{position:fixed;top:12px;left:50%;transform:translateX(-50%);width:min(1180px,100% - 24px);z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:8px 8px 8px 16px;border-radius:999px;background:transparent;color:var(--ink);transition:background .35s,box-shadow .35s,color .35s}
.pp-nav.scrolled{background:rgba(255,246,227,.84);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);box-shadow:0 6px 24px rgba(27,42,34,.14)}
.pp-nav.scrolled.dark{background:rgba(15,61,46,.8);color:var(--cream);box-shadow:0 6px 24px rgba(0,0,0,.3)}
.pp-nav.dark nav a:hover{color:var(--puri)}
.pp-logo{display:flex;align-items:center;gap:8px;text-decoration:none;font:700 1.05rem var(--display);letter-spacing:-.02em;white-space:nowrap}
.pp-logo svg{width:32px;height:32px}
.pp-nav nav{display:flex;gap:22px}
.pp-nav nav a{text-decoration:none;font-weight:600;font-size:.98rem}
.pp-nav nav a:hover{color:var(--chilli)}

/* sections + torn edge */
.pp-sec{position:relative;scroll-margin-top:80px;padding:clamp(90px,11vw,150px) 0 clamp(80px,9vw,130px);background:var(--bg,var(--cream))}
.pp-sec+.pp-sec::before{content:"";position:absolute;left:0;right:0;top:-17px;height:18px;z-index:2;background:var(--bg,var(--cream));pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'%3E%3Cpath d='M0 18V9l12 4 14-7 11 5 16-8 10 6 15-3 13 6 12-8 17 5 9-4 16 7 12-6 14 3 11-5 15 7 13-4 10 3 20-6V18z'/%3E%3C/svg%3E") 0 0/240px 18px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'%3E%3Cpath d='M0 18V9l12 4 14-7 11 5 16-8 10 6 15-3 13 6 12-8 17 5 9-4 16 7 12-6 14 3 11-5 15 7 13-4 10 3 20-6V18z'/%3E%3C/svg%3E") 0 0/240px 18px repeat-x}
.pp-hero{--bg:#FFD86E;background:radial-gradient(120% 90% at 80% 25%,#FFF0BF 0%,#FFD86E 50%,#F6B93E 100%);min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:120px;padding-bottom:110px}
.pp-crack{--bg:var(--cream)}
.pp-fill{--bg:#FBE3C4}
.pp-pani{--bg:var(--mint)}
.pp-serve{--bg:var(--paper)}
.pp-hygiene{--bg:var(--leaf);color:var(--cream)}
.pp-models{--bg:var(--cream)}
.pp-outlets{--bg:#FFE9B8}
.pp-enquire{--bg:var(--paper)}
.pp-foot{--bg:var(--ink);color:var(--cream);padding-bottom:90px}
.pp-crack,.pp-fill,.pp-pani,.pp-serve{min-height:88vh;display:flex;align-items:center}
.pp-crack>.pp-wrap,.pp-fill>.pp-wrap,.pp-pani>.pp-wrap,.pp-serve>.pp-wrap{width:min(1180px,100% - 32px)}

/* hero */
.pp-sunburst{position:absolute;width:min(70vw,780px);aspect-ratio:1;right:-16vw;top:-12vw;border-radius:50%;z-index:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.3) 0 7deg,transparent 7deg 20deg);animation:ppSpin 100s linear infinite;
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%)}
@keyframes ppSpin{to{transform:rotate(360deg)}}
.pp-hero h1{font-size:clamp(2.5rem,6vw,5.2rem)}
.pp-hl{color:var(--chilli);display:inline-block;animation:ppCrackIn .6s .2s cubic-bezier(.3,1.6,.5,1) backwards}
@keyframes ppCrackIn{from{transform:rotate(-8deg) scale(.6);opacity:0}}
.pp-hero-copy>*{animation:ppRise .7s cubic-bezier(.2,.9,.3,1.2) backwards}
.pp-hero-copy>:nth-child(2){animation-delay:.06s}.pp-hero-copy>:nth-child(3){animation-delay:.14s}.pp-hero-copy>:nth-child(4){animation-delay:.22s}.pp-hero-copy>:nth-child(5){animation-delay:.3s}
@keyframes ppRise{from{opacity:0;transform:translateY(24px)}}
.pp-hero-art{position:relative;justify-self:center;width:min(38vw,440px);z-index:4}
.pp-dock{position:relative;aspect-ratio:1;width:min(34vw,420px);justify-self:center}
.pp-hero .pp-dock{width:100%}
.pp-static{position:absolute;inset:0}
.pp-static svg{width:100%;height:100%;overflow:visible}
/* placeholder puri before the drawing loads */
.pp-dock[data-stage="0"] .pp-static:empty{background:url(img/puri-whole-cut.webp) 50% 50%/99% no-repeat}
html.pp-fly .pp-dock .pp-static{visibility:hidden}
#ppObj{position:fixed;left:0;top:0;width:400px;height:400px;z-index:30;pointer-events:none;transform-origin:0 0;will-change:transform}
#ppObj svg{width:100%;height:100%;overflow:visible}
.pp-buddy{position:absolute;left:-6%;top:-4%;width:30%;border:0;padding:0;background:none;cursor:pointer;z-index:5;animation:ppPop .8s cubic-bezier(.3,1.6,.5,1) .6s backwards;transform-origin:50% 100%}
.pp-buddy svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 8px 12px rgba(27,42,34,.2))}
.pp-buddy.again svg{animation:ppWob .5s ease-in-out}
@keyframes ppPop{from{opacity:0;transform:translateY(40%) scale(.5)}}
@keyframes ppWob{25%{transform:rotate(-7deg)}75%{transform:rotate(5deg)}}
.pp-bubble{position:absolute;left:66%;top:-30%;font:700 clamp(14px,1.5vw,19px)/1 var(--display);color:var(--ink);background:#fff;padding:10px 14px 9px;border-radius:18px;white-space:nowrap;
  box-shadow:0 6px 0 rgba(27,42,34,.1),0 12px 24px rgba(27,42,34,.16);transform-origin:0 100%;animation:ppBub .5s cubic-bezier(.3,1.8,.5,1) 1.2s backwards}
.pp-bubble::after{content:"";position:absolute;left:12px;bottom:-12px;border:9px solid transparent;border-top:14px solid #fff;border-bottom:0;transform:skewX(-18deg)}
.pp-buddy.again .pp-bubble{animation:ppBub2 .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes ppBub{from{opacity:0;transform:scale(0) rotate(-14deg)}}
@keyframes ppBub2{from{opacity:0;transform:scale(0) rotate(-14deg)}}
.pp-buddy .pp-eye{transform-box:fill-box;transform-origin:50% 50%;animation:ppBlink 4s 2s infinite}
@keyframes ppBlink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.pp-marquee{position:absolute;left:0;right:0;bottom:0;z-index:3;overflow:hidden;background:var(--leaf);color:var(--puri-soft);padding:12px 0 10px;transform:rotate(-1.2deg) translateY(10px)}
.pp-mq{display:flex;gap:40px;width:max-content;animation:ppMq 36s linear infinite;font:700 1rem var(--display);white-space:nowrap}
.pp-mq span::before{content:"●";margin-right:40px;color:var(--pudina)}
@keyframes ppMq{to{transform:translateX(-50%)}}

/* journey copy bits */
.pp-stats{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pp-stats li{background:#fff;border-radius:18px;padding:14px;box-shadow:0 5px 0 rgba(27,42,34,.08)}
.pp-stats b{display:block;font:700 clamp(1.5rem,2.6vw,2.2rem)/1 var(--display);color:var(--chilli)}
.pp-stats span{font-size:.9rem;color:var(--ink-soft)}
.pp-flavours{display:flex;flex-wrap:wrap;gap:8px;margin:1.2rem 0 1rem}
.pp-flav{display:inline-flex;align-items:center;gap:8px;border:0;background:#fff;border-radius:999px;padding:8px 14px 8px 8px;font-weight:700;font-size:.95rem;cursor:pointer;box-shadow:0 4px 0 rgba(27,42,34,.1);transition:transform .25s var(--ease),box-shadow .25s,background .25s}
.pp-flav:hover{transform:translateY(-3px)}
.pp-flav i{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),inset 0 3px 0 rgba(255,255,255,.35)}
.pp-flav[aria-checked="true"]{background:var(--ink);color:#fff;box-shadow:0 4px 0 #000}
.pp-flav-note{background:rgba(255,255,255,.7);border-radius:18px;padding:16px 18px;max-width:30em;box-shadow:inset 4px 0 0 var(--pani);transition:box-shadow .5s}
.pp-flav-note p{margin:0 0 .4em}
.pp-flav-name{font:700 1.15rem var(--display)}
.pp-heat{font-size:.9rem;font-weight:700;color:var(--chilli-deep)}
.pp-menu{list-style:none;padding:0;margin:1.4rem 0 0;border-top:2px dashed rgba(27,42,34,.2)}
.pp-menu li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:12px 2px;border-bottom:2px dashed rgba(27,42,34,.2);transition:background .25s,padding .25s}
.pp-menu li:hover{background:#FFF1CC;padding-left:10px;padding-right:10px}
.pp-menu span{font-weight:700}
.pp-menu small{display:block;font-weight:500;color:var(--ink-soft);font-size:.88rem}
.pp-menu b{font:700 1.2rem var(--display);color:var(--chilli-deep)}
.pp-menu li{align-items:center}
.pp-menu-img{flex:0 0 auto;width:56px;height:56px;border-radius:14px;object-fit:cover;box-shadow:0 6px 14px -8px rgba(27,42,34,.5)}
.pp-menu li>span{flex:1;text-align:left}
.pp-card-img{display:block;width:calc(100% + 16px);margin:-12px -8px 6px;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:16px}

/* hygiene */
.pp-hygiene .pp-kicker{color:var(--puri)}
.pp-hygiene .pp-sub{color:#C9DDD0}
.pp-process{list-style:none;padding:0;margin:2.4rem 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pp-process li{position:relative;padding:20px 18px;border-radius:22px;background:rgba(255,246,227,.06);box-shadow:inset 0 0 0 1.5px rgba(255,246,227,.14);opacity:.72;transform:translateY(10px);transition:opacity .5s,transform .5s var(--ease),background .5s,box-shadow .5s}
.pp-process li.on{opacity:1;transform:none;background:rgba(79,154,58,.18);box-shadow:inset 0 0 0 1.5px rgba(146,214,120,.45)}
.pp-process h3{font-size:1.05rem;margin:14px 0 8px}
.pp-process p{font-size:.94rem;color:#C9DDD0;margin:0}
.pp-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--cream)}
.pp-ico svg{width:38px;height:38px}
.pp-pipe{height:8px;border-radius:4px;background:rgba(255,246,227,.12);margin-top:22px;overflow:hidden}
.pp-pipe-fill{height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#9FD3DE,#5BA33A)}
@media (max-width:1000px){.pp-process{grid-template-columns:1fr 1fr}.pp-process li:last-child{grid-column:1/-1}}
@media (max-width:560px){.pp-process{grid-template-columns:1fr}}

/* franchise models */
.pp-scale{display:flex;justify-content:space-between;margin:2rem 0 10px;font-size:.78rem;font-weight:700;color:var(--ink-soft);border-bottom:1.5px solid rgba(27,42,34,.2);padding-bottom:6px}
.pp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pp-card{position:relative;display:flex;flex-direction:column;gap:8px;text-align:left;border:0;background:#fff;border-radius:24px;padding:24px 22px 22px;cursor:pointer;
  box-shadow:0 8px 0 rgba(27,42,34,.08),0 18px 34px rgba(27,42,34,.08);transition:transform .3s var(--ease),box-shadow .3s,background .3s}
.pp-card:hover{transform:translateY(-5px)}
.pp-card[aria-checked="true"]{background:#FFF4D6;box-shadow:0 0 0 4px var(--puri),0 8px 0 rgba(27,42,34,.08),0 18px 34px rgba(27,42,34,.12)}
.pp-ind{position:absolute;top:-12px;right:18px;font:700 .72rem var(--display);letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--puri-soft);padding:6px 12px;border-radius:999px}
.pp-card-name{font:700 1.5rem/1.1 var(--display)}
.pp-range{position:relative;display:block;height:12px;border-radius:6px;background:rgba(27,42,34,.07);margin:4px 0 6px;overflow:hidden}
.pp-range-bar{position:absolute;top:0;bottom:0;left:var(--l,0);width:var(--w,0);border-radius:6px;
  background:repeating-linear-gradient(-45deg,var(--pudina) 0 6px,#6DB352 6px 12px);transform-origin:0 50%;transform:scaleX(0);transition:transform .9s var(--ease)}
.pp-models.in .pp-range-bar{transform:scaleX(1)}
.pp-price{font:700 1.16rem var(--display);color:var(--chilli-deep)}
.pp-price-sub{font-size:.88rem;color:var(--ink-soft);font-weight:600;margin-top:-4px}
.pp-spec{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;border-top:1px dashed rgba(27,42,34,.15);padding-top:8px}
.pp-spec span:first-child{color:var(--ink-soft)}
.pp-spec span:last-child{font-weight:600;text-align:right}
.pp-incl{font-size:.9rem;color:var(--ink-soft);margin-top:4px}
.pp-disclaimer{margin:26px 0 0;padding:16px 18px;border-radius:16px;background:#FFF1CC;box-shadow:inset 4px 0 0 var(--chilli);font-size:.95rem;max-width:60em}

/* outlets: a borderless city list, no map */
.pp-ofilter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.pp-chip{border:0;padding:9px 16px;border-radius:999px;background:rgba(27,42,34,.08);font-weight:700;font-size:.92rem;cursor:pointer;transition:background .2s,color .2s}
.pp-chip.on{background:var(--ink);color:#fff}
.pp-cities{list-style:none;padding:0;margin:0}
.pp-city{border-bottom:2px solid rgba(27,42,34,.14)}
.pp-city button{width:100%;display:grid;grid-template-columns:auto 1fr auto auto;gap:16px;align-items:center;border:0;background:none;padding:18px 4px;cursor:pointer;text-align:left}
.pp-pin{width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--chilli);box-shadow:0 0 0 5px rgba(226,72,61,.18)}
.pp-city.soon .pp-pin{background:transparent;box-shadow:inset 0 0 0 3px var(--chilli)}
.pp-cname{font:700 clamp(1.5rem,4vw,3rem)/1 var(--display);transition:transform .4s var(--ease),color .3s}
.pp-city button:hover .pp-cname,.pp-city.open .pp-cname{transform:translateX(10px);color:var(--chilli-deep)}
.pp-ccount{font-weight:700;white-space:nowrap}
.pp-cplus{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:700;transition:transform .3s}
.pp-city.open .pp-cplus{transform:rotate(45deg)}
.pp-areas{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.pp-city.open .pp-areas{grid-template-rows:1fr}
.pp-areas>div{overflow:hidden}
.pp-areas ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0 4px 20px 36px}
.pp-areas li{background:#fff;border-radius:999px;padding:6px 14px;font-size:.92rem;font-weight:600}
@media (max-width:560px){.pp-city button{grid-template-columns:auto 1fr auto;gap:12px}.pp-ccount{grid-column:2;grid-row:2;font-size:.9rem}.pp-cplus{grid-row:1/3;grid-column:3}}

/* enquiry form */
.pp-enq-grid{align-items:start}
.pp-next{padding-left:1.2em;margin:1rem 0 0;display:grid;gap:8px;font-weight:600}
.pp-form,.pp-thanks{background:#fff;border-radius:26px;padding:clamp(20px,3vw,32px);box-shadow:0 8px 0 rgba(27,42,34,.08),0 20px 40px rgba(27,42,34,.08)}
.pp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pp-field{margin:0 0 14px;border:0;padding:0;min-width:0}
.pp-field label,.pp-field legend{display:block;font-weight:700;font-size:.92rem;margin-bottom:6px;padding:0}
.pp-opt{font-weight:500;color:var(--ink-soft)}
.pp-field input,.pp-field select,.pp-field textarea{width:100%;font:inherit;padding:12px 14px;border-radius:14px;border:2px solid rgba(27,42,34,.16);background:var(--paper);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.pp-field input:focus,.pp-field select:focus,.pp-field textarea:focus{outline:0;border-color:var(--pudina);box-shadow:0 0 0 4px rgba(79,154,58,.2)}
.pp-field input[aria-invalid="true"]{border-color:var(--chilli)}
.pp-err{color:var(--chilli-deep);font-size:.86rem;font-weight:600;margin:4px 0 0;min-height:0}
.pp-err:empty{display:none}
.pp-radios{display:flex;flex-wrap:wrap;gap:8px}
.pp-radios legend{width:100%}
.pp-radios label{position:relative;margin:0}
.pp-radios input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.pp-radios span{display:block;padding:9px 14px;border-radius:12px;box-shadow:inset 0 0 0 2px rgba(27,42,34,.16);font-weight:600;font-size:.92rem;cursor:pointer;transition:background .2s,color .2s}
.pp-radios input:checked+span{background:var(--ink);color:#fff;box-shadow:none}
.pp-radios input:focus-visible+span{outline:3px solid var(--chilli);outline-offset:2px}
.pp-consent{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;margin:4px 0 6px;cursor:pointer}
.pp-consent input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--pudina)}
.pp-form .pp-btn{margin-top:10px}
.pp-form-note{font-size:.85rem;color:var(--ink-soft);text-align:center;margin:12px 0 0}
.pp-thanks{grid-column:2;animation:ppRise .6s var(--ease) both}
.pp-thanks .pp-display{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.pp-shake{animation:ppShake .4s}
@keyframes ppShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* footer */
.pp-foot-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:end}
.pp-foot-big{font:800 clamp(2.2rem,7vw,5.5rem)/1 var(--display);color:var(--puri);margin-bottom:.4em}
.pp-foot nav{display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:flex-end}
.pp-foot nav a{text-decoration:none;font-weight:600}
.pp-foot nav a:hover{color:var(--puri)}
.pp-copy{text-align:center;font-size:.86rem;opacity:.7;margin:48px 0 0;position:relative;z-index:3}
.pp-badge{position:fixed;left:12px;bottom:12px;z-index:70;font:700 .8rem var(--body);text-decoration:none;color:#fff;background:rgba(27,42,34,.92);padding:7px 12px 6px;border-radius:999px}
.pp-badge:hover{background:var(--chilli)}

/* reveal */
.js .pp-rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .pp-rv.in{opacity:1;transform:none}
.pp-pop{animation:ppDockPop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes ppDockPop{from{transform:scale(.6);opacity:0}}

@media (max-width:860px){
  .pp-nav nav{display:none}
  .pp-two,.pp-foot-grid{grid-template-columns:1fr}
  .pp-hero{min-height:auto;padding-top:110px;padding-bottom:120px}
  .pp-hero-art{width:min(70vw,300px);margin:20px auto 0}
  .pp-dock{width:min(70vw,320px)}
  .pp-two>.pp-dock{order:-1}
  .pp-crack,.pp-fill,.pp-pani,.pp-serve{min-height:0}
  .pp-cards{grid-template-columns:1fr}
  .pp-stats{gap:8px}.pp-stats li{padding:10px}
  .pp-row{grid-template-columns:1fr}
  .pp-thanks{grid-column:auto}
  .pp-foot nav{justify-content:flex-start}
  .pp-buddy{left:-14%}
}
@media (max-width:420px){.pp-logo span{font-size:.92rem}.pp-btn-small{font-size:.78rem;padding:.6em .9em}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .pp-rv{opacity:1;transform:none}
  .pp-process li{opacity:1;transform:none}
  .pp-range-bar{transform:scaleX(1)}
}