/* ANNVITRA – "harvest market poster" vibe */
:root{--forest:#214E3D;--cream:#F7F2E8;--orange:#E97842;--sage:#D7E4C4;--gold:#F0C96B;--charcoal:#292E29;
--bg:var(--cream);--fg:var(--charcoal);--head:var(--forest);--surface:#fff;--line:rgba(33,78,61,.2);
--font-d:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;--font-b:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--font-h:"Caveat","Segoe Script","Comic Sans MS",cursive;
--r:18px;--w:1180px;--t:.3s cubic-bezier(.2,.8,.2,1)}
@media (prefers-color-scheme:dark){:root{--bg:#15231c;--fg:#EDE8DC;--head:#F7F2E8;--surface:#1E3329;--line:rgba(247,242,232,.2)}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font:1.0625rem/1.7 var(--font-b);overflow-x:clip}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:150;opacity:.09;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-d);color:var(--head);line-height:.98;margin:0 0 .5em;font-weight:800;letter-spacing:-.03em}
h1{font-size:clamp(2.6rem,7vw,6rem);line-height:.95}
h2{font-size:clamp(2.2rem,6vw,4.6rem)}
h3{font-size:1.35rem;line-height:1.15;letter-spacing:-.01em}
p{margin:0 0 1em;max-width:62ch}a{color:inherit}
em{font-style:normal}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 1.25rem}
section{padding:clamp(4rem,9vw,8rem) 0;position:relative}
.dark{background:var(--forest);color:var(--cream);--head:var(--cream);--surface:rgba(247,242,232,.09);--line:rgba(247,242,232,.25)}
.sage{background:var(--sage);color:var(--charcoal);--head:var(--forest);--surface:#F7F2E8;--line:rgba(33,78,61,.22)}
.lead{font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.55}
.hand{font-family:var(--font-h);font-size:1.6rem;color:var(--orange);line-height:1;display:inline-block;transform:rotate(-3deg)}
.mark{background:linear-gradient(transparent 58%,var(--gold) 58% 90%,transparent 90%);padding:0 .08em}
.dark .mark{background:linear-gradient(transparent 58%,var(--orange) 58% 90%,transparent 90%);color:var(--cream)}
.squig{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8'%3E%3Cpath d='M0 4q6-6 12 0t12 0' fill='none' stroke='%23E97842' stroke-width='3'/%3E%3C/svg%3E") repeat-x left bottom;padding-bottom:.18em}
.skip{position:absolute;left:-999px;background:var(--forest);color:var(--cream);padding:.6rem 1rem;z-index:400}.skip:focus{left:8px;top:8px}
.progress{position:fixed;inset:0 0 auto 0;height:5px;z-index:300}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--gold))}
/* page curtain */
.curtain{position:fixed;inset:0;background:var(--forest);z-index:500;display:grid;place-items:center;transform:translateY(100%);transition:transform .55s cubic-bezier(.7,0,.2,1);pointer-events:none;border-radius:50% 50% 0 0/12% 12% 0 0}
.curtain img{width:90px;animation:spin 3s linear infinite}
.curtain.in{transform:none;pointer-events:auto}
html.pt .curtain{transform:none;transition:none}
.curtain.out{transform:translateY(-100%);transition:transform .7s cubic-bezier(.7,0,.2,1)}
/* cursor */
.cur{position:fixed;left:0;top:0;z-index:450;pointer-events:none;display:none}
@media (pointer:fine){.cur{display:block;opacity:0;transition:opacity .3s}.cur.on{opacity:1}.cur i{position:absolute;border-radius:50%;translate:-50% -50%}.cur .d{width:8px;height:8px;background:var(--orange)}.cur .r{width:38px;height:38px;border:2px solid var(--orange);transition:width .25s,height .25s,background .25s}.cur.big .r{width:70px;height:70px;background:rgba(233,120,66,.18)}}
/* buttons etc */
.btn{display:inline-block;padding:.8rem 1.5rem;border-radius:99px;background:var(--forest);color:var(--cream);font-weight:700;text-decoration:none;border:2px solid var(--forest);transition:transform var(--t),box-shadow var(--t);will-change:transform}
.btn:hover{box-shadow:0 8px 0 rgba(41,46,41,.2)}
.btn.orange{background:var(--orange);border-color:var(--orange);color:var(--charcoal)}
.btn.ghost{background:transparent;color:var(--head);border-color:var(--head)}
.dark .btn:not(.orange){background:var(--cream);color:var(--forest);border-color:var(--cream)}.dark .btn.ghost{background:transparent;color:var(--cream)}
.btn.big{font-size:1.2rem;padding:1rem 2.1rem}
.tag{display:inline-block;font:600 .78rem var(--font-b);padding:.1rem .65rem;border-radius:99px;background:var(--gold);color:var(--charcoal);vertical-align:middle;letter-spacing:0}
.tag.plan{background:transparent;border:1.5px solid var(--orange);color:inherit}
.ico{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid currentColor;color:var(--head);transition:background var(--t),color var(--t),transform var(--t)}
.ico:hover{background:var(--orange);border-color:var(--orange);color:var(--charcoal);transform:rotate(-10deg) scale(1.1)}
.ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem;margin:1.8rem 0}
/* nav */
header{position:sticky;top:0;z-index:200;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:800 1.4rem var(--font-d);color:var(--head);letter-spacing:.02em}
.brand img{transition:transform .6s}.brand:hover img{transform:rotate(360deg)}
.nav ul{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0;align-items:center}
.nav a.l{text-decoration:none;font-weight:600;padding:.2rem 0;background:linear-gradient(var(--orange),var(--orange)) 0 100%/0 3px no-repeat;transition:background-size var(--t)}
.nav a.l:hover,.nav a.l[aria-current]{background-size:100% 3px}
.menu{display:none;background:none;border:2px solid var(--head);color:var(--head);border-radius:99px;padding:.45rem 1.1rem;font:700 .95rem var(--font-b);cursor:pointer;position:relative;z-index:2}
@media (max-width:980px){header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}.menu{display:block}
.nav ul{position:fixed;inset:0;height:100vh;height:100dvh;background:var(--forest);flex-direction:column;justify-content:center;align-items:center;gap:1.2rem;overflow-y:auto;padding:5rem 1.25rem 2rem;clip-path:circle(0 at calc(100% - 3rem) 2.5rem);transition:clip-path .6s cubic-bezier(.7,0,.2,1);visibility:hidden;z-index:1}
.nav ul.open{clip-path:circle(150% at calc(100% - 3rem) 2.5rem);visibility:visible}
.nav a.l{font:800 clamp(2rem,9vw,3rem) var(--font-d);color:var(--cream)}.nav ul .btn{font-size:1.3rem}
.nav:has(ul.open) .menu{background:var(--cream);color:var(--forest);border-color:var(--cream)}}
/* hero */
.hero{padding-top:clamp(2rem,5vw,4rem);padding-bottom:clamp(4rem,7vw,6rem);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:2rem;align-items:center}
.sticker{display:inline-block;font:700 1.05rem var(--font-d);background:var(--gold);color:var(--charcoal);padding:.3rem 1rem;border-radius:99px;transform:rotate(-3deg);margin-bottom:1.2rem;box-shadow:3px 3px 0 var(--forest)}
.badge{isolation:isolate;position:relative;max-width:420px;margin:0 auto;width:100%;aspect-ratio:1}.badge>svg:not(.dd){position:absolute;inset:8%;width:84%;height:84%}
.badge>img{position:absolute;inset:0;margin:auto;width:45%;height:45%;object-fit:contain}
.spin{transform-origin:200px 200px;animation:spin 40s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.dd{position:absolute;width:clamp(48px,6vw,72px);height:auto;filter:drop-shadow(3px 4px 0 rgba(41,46,41,.2));animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{translate:0 -6px;rotate:5deg}}
.dd:nth-of-type(2){animation-delay:-1.5s}.dd:nth-of-type(3){animation-delay:-3s}.dd:nth-of-type(4){animation-delay:-4s}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.w>span{display:inline-block}
.js .w>span{transform:translateY(112%);transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*70ms)}
.js .split.go .w>span{transform:none}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.badge{max-width:300px}}
/* marquee */
.marquee{background:var(--orange);color:var(--charcoal);overflow:hidden;transform:rotate(-1.5deg);margin:-1.2rem 0 0;padding:1rem 0;position:relative;z-index:2;border-block:3px solid var(--charcoal)}
.marquee.b{background:var(--gold);transform:rotate(1deg);margin-top:0}
.track{display:flex;gap:1.6rem;width:max-content;align-items:center;font:800 clamp(1.4rem,3vw,2.2rem) var(--font-d);animation:marq 30s linear infinite;white-space:nowrap}
.marquee.b .track{animation-direction:reverse}
.marquee svg{width:26px;height:26px;fill:var(--forest)}
@keyframes marq{to{transform:translateX(-50%)}}
/* page header */
.phead{padding:clamp(3rem,7vw,6rem) 0 clamp(2rem,4vw,3rem);overflow:hidden}
.phead h1{font-size:clamp(2.6rem,7.5vw,6.4rem)}
/* door cards */
.doors{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:2.5rem}
.door{display:flex;flex-direction:column;justify-content:space-between;min-height:290px;padding:1.6rem;border-radius:var(--r);background:var(--surface);border:2px solid var(--head);text-decoration:none;position:relative;overflow:hidden;box-shadow:6px 6px 0 var(--head);transition:transform var(--t),box-shadow var(--t)}
.door:hover{box-shadow:10px 10px 0 var(--orange)}
.door b{font:800 4rem/1 var(--font-d);color:var(--orange)}.door h3{font-size:1.8rem;margin:.2rem 0}.door p{margin:0;font-size:1rem}
.door i{position:absolute;right:1.2rem;top:1.2rem;font:800 2rem var(--font-d);font-style:normal;transition:transform var(--t)}.door:hover i{transform:translate(6px,-6px) rotate(10deg)}
/* statement */
.statement{overflow:hidden;text-align:center}
.statement .big{font:800 clamp(3.5rem,13vw,11rem)/.95 var(--font-d);letter-spacing:-.04em;white-space:nowrap;display:block;color:var(--cream);will-change:transform}
.statement .big.o{color:transparent;-webkit-text-stroke:2px var(--sage)}
.chips{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:3rem}
.chip{background:rgba(247,242,232,.1);border:2px solid var(--cream);border-radius:99px;padding:.6rem 1.2rem;font-weight:600}
/* cards */
.grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:2rem}
.card{background:var(--surface);border:2px solid var(--head);border-radius:var(--r);padding:1.6rem;box-shadow:5px 5px 0 var(--head)}
.card p{font-size:1rem;margin:0 0 1rem}.card p:last-child{margin:0}
.card:nth-child(3n+1){border-top-color:var(--orange)}
[data-tilt]{transform-style:preserve-3d;transition:transform .2s ease-out;will-change:transform}
/* story timeline */
.tl{position:relative;margin:2.5rem 0 0;padding:0 0 0 2.6rem;list-style:none;--p:0}
.tl::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:4px;background:var(--line);border-radius:4px}
.tl::after{content:"";position:absolute;left:11px;top:6px;width:4px;height:calc((100% - 12px)*var(--p));background:var(--orange);border-radius:4px}
.tl li{position:relative;padding-bottom:2.4rem}
.tl li::before{content:"";position:absolute;left:calc(-2.6rem + 3px);top:.35rem;width:20px;height:20px;border-radius:50%;background:var(--bg);border:5px solid var(--orange);z-index:1}
.tl h3{margin-bottom:.2rem}.tl p{margin:0}
.quote{font:800 clamp(2rem,5vw,4rem)/1.05 var(--font-d);letter-spacing:-.03em;max-width:18em;margin:0}
/* how */
.how{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.sticky{position:sticky;top:110px}
.loop{width:100%;max-width:400px;margin-top:1rem}
.loop .ring{stroke-dasharray:6 10;animation:dash 20s linear infinite}@keyframes dash{to{stroke-dashoffset:-320}}
.loop .n circle{fill:rgba(247,242,232,.15);transition:fill var(--t),transform var(--t);transform-box:fill-box;transform-origin:center}
.loop .n text{fill:var(--cream);font:800 22px var(--font-d)}
.loop .n{cursor:pointer}.loop .n:hover circle{fill:var(--gold)}.loop .n:hover text{fill:var(--charcoal)}.loop .n:focus-visible{outline:none}.loop .n:focus-visible circle{stroke:var(--orange);stroke-width:4}.loop .n.on circle{fill:var(--orange);transform:scale(1.4)}.loop .n.on text{fill:var(--charcoal)}
.loop .mid{fill:var(--sage);font:800 18px var(--font-d)}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;min-height:65vh;display:flex;flex-direction:column;justify-content:center;opacity:.3;transition:opacity var(--t)}
.steps li.on{opacity:1}
.steps li::before{content:counter(s);font:800 clamp(6rem,14vw,11rem)/1 var(--font-d);color:var(--gold)}
.steps h3{font-size:2rem;color:var(--cream)}
@media (max-width:860px){.how{grid-template-columns:1fr;gap:1rem}.sticky{position:static}.loop{max-width:260px}.steps li{min-height:auto;opacity:1;padding:1.5rem 0;border-top:1px solid var(--line)}.steps li::before{font-size:4rem}}
/* sorter */
.sorter{display:grid;grid-template-columns:1fr 1.1fr;gap:2rem;margin-top:2rem}
.picks{display:grid;gap:.7rem;align-content:start}
.pick{display:flex;gap:.8rem;align-items:center;text-align:left;font:600 1rem var(--font-b);padding:.8rem 1rem;border-radius:14px;border:2px solid var(--head);background:var(--surface);color:var(--fg);cursor:pointer;transition:transform var(--t),background var(--t)}
.pick:hover{transform:translateX(6px)}.pick[aria-pressed=true]{background:var(--gold);color:var(--charcoal);box-shadow:4px 4px 0 var(--head)}
.pick svg{width:38px;height:38px;flex:none}
.out{border:2px dashed var(--head);border-radius:var(--r);padding:1.6rem;min-height:260px;background:var(--surface)}
.out ol{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.8rem}
.out li{display:flex;gap:.8rem;align-items:center;animation:pop .5s both;animation-delay:calc(var(--i)*.25s)}
.out li span{flex:none;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--orange);color:var(--charcoal);display:grid;place-items:center;font:800 1rem var(--font-d)}
@keyframes pop{from{opacity:0;transform:translateX(-20px) scale(.9)}}
@media (max-width:860px){.sorter{grid-template-columns:1fr}}
/* two col */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:4rem}@media (max-width:860px){.split2{grid-template-columns:1fr;gap:2.5rem}}
.ticks{list-style:none;padding:0;margin:0 0 1.5rem}.ticks li{padding-left:2.1rem;position:relative;margin-bottom:.9rem}
.ticks li::before{content:"";position:absolute;left:0;top:.4em;width:1.1rem;height:1.1rem;background:var(--orange);border-radius:0 70% 0 70%}
/* team */
.team{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:2.5rem}
.person{background:var(--surface);border:2px solid var(--head);border-radius:var(--r);overflow:hidden;box-shadow:6px 6px 0 var(--head)}
.person:nth-child(even){margin-top:2rem}
.person .ph{overflow:hidden;position:relative}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;background:var(--sage);transition:transform .8s}
.person:hover img{transform:scale(1.07)}
.person .role{position:absolute;left:.8rem;bottom:.8rem}
.person div.i{padding:1rem 1.2rem 1.3rem;border-top:4px solid var(--orange);display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.soc{display:flex;gap:.4rem}.person .ico{width:38px;height:38px}.person h3{margin:0}.person p{margin:.1rem 0 0;font-size:.95rem}
/* join */
.contact{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:.8rem}
.contact a{display:flex;align-items:center;gap:.9rem;font:700 1.2rem var(--font-d);text-decoration:none}
.contact a:hover span{text-decoration:underline wavy var(--orange)}
.band{background:var(--orange);color:var(--charcoal);text-align:center;--head:var(--charcoal)}
.band .btn{background:var(--charcoal);border-color:var(--charcoal);color:var(--cream)}.band .btn.ghost{background:transparent;color:var(--charcoal)}
.band p{margin-inline:auto}.band .cta-row{justify-content:center}
/* footer */
footer{background:var(--charcoal);color:var(--cream);padding:4rem 0 2rem;--head:var(--cream)}
.fgrid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.fbrand{font:800 clamp(2.4rem,6vw,4rem)/1 var(--font-d);margin:0 0 .4rem}.fhead{font:700 1.1rem var(--font-d);margin:0 0 .6rem;color:var(--gold)}
footer ul{list-style:none;padding:0;margin:0}footer li{margin-bottom:.4rem}
footer .ico{color:var(--cream)}.socials{display:flex;gap:.7rem;margin-top:1rem}.small{font-size:.9rem;opacity:.75;margin-top:2.5rem}
/* fab + toast */
.fab{position:fixed;right:1.1rem;bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));z-index:190;box-shadow:0 6px 0 rgba(41,46,41,.28);opacity:0;translate:0 24px;pointer-events:none}
.fab.show{opacity:1;translate:0;pointer-events:auto}
#toast{position:fixed;left:50%;bottom:5.5rem;transform:translate(-50%,20px);background:var(--charcoal);color:var(--cream);padding:.8rem 1.3rem;border-radius:12px;opacity:0;transition:opacity var(--t),transform var(--t);z-index:350;max-width:90vw;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}
.js .reveal{opacity:0;translate:0 34px;transition:opacity .8s ease,translate .8s ease}.js .reveal.in{opacity:1;translate:0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal{opacity:1;translate:none}.js .w>span{transform:none}.steps li{opacity:1}.curtain{display:none}}
/* phones */
@media (max-width:600px){
 section{padding:3.2rem 0}
 .statement .big{white-space:nowrap;font-size:9.6vw;padding:0;line-height:1.05}
 .door{min-height:200px;box-shadow:4px 4px 0 var(--head)}.door b{font-size:3rem}.door h3{font-size:1.5rem}
 .fab.big{font-size:.98rem;padding:.7rem 1.3rem}
 .btn.big{font-size:1.05rem;padding:.85rem 1.6rem}
 .cta-row .btn{flex:1 1 100%;text-align:center}
 .hero{padding-top:1.5rem}.sticker{font-size:.95rem}
 .person:nth-child(even){margin-top:0}
 .card,.person{box-shadow:4px 4px 0 var(--head)}
 .quote{font-size:1.8rem}.steps h3{font-size:1.6rem}
 .marquee{margin-top:-.6rem}.track{font-size:1.3rem}
 .contact a{font-size:1.05rem;word-break:break-word}
 .chip{font-size:.9rem}
}

/* made with love */
.love{text-align:center;overflow:hidden;padding:clamp(4rem,9vw,7rem) 0}
.love-t{font:400 clamp(2.2rem,7vw,5.6rem)/1.15 "Yatra One","Bricolage Grotesque",serif;color:var(--cream);margin:.3rem auto;max-width:14em}
.love .hand{color:var(--gold);font-size:2rem}
.heart{display:inline-block;animation:beat 1.4s ease-in-out infinite}
@keyframes beat{0%,60%,100%{transform:scale(1)}15%{transform:scale(1.28)}30%{transform:scale(.95)}45%{transform:scale(1.18)}}
.love-s{font-size:2rem;letter-spacing:.6rem;margin-top:1rem}
.nw{white-space:nowrap}
@media (max-width:600px){.love-t{font-size:clamp(1.9rem,8.2vw,2.6rem)}}