:root{--paper:#f3ecdf;--ink:#1d1a16;--red:#c8331f;--haldi:#e9b52b;--mut:#6b6257;--disp:Anton,Impact,"Arial Narrow",sans-serif;--dev:"Tiro Devanagari Hindi",serif;--body:Mukta,system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 18px/1.5 var(--body);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.07;background-image: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='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
.dev{font-family:var(--dev)}
.red{color:var(--red)}.yel{color:var(--haldi)}
.kicker{font-weight:800;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.k-light{color:var(--haldi)}
.h-sec{font:400 clamp(44px,9vw,96px)/.92 var(--disp);text-transform:uppercase;letter-spacing:.005em}

/* shutter */
.shutter{position:fixed;inset:0;z-index:100;display:grid;place-items:end center;padding-bottom:12vh;background:repeating-linear-gradient(#8a8278 0 6px,#a49c91 6px 18px,#7b746b 18px 20px);transition:transform 1s cubic-bezier(.7,0,.25,1) .35s}
.shutter span{font:28px var(--dev);color:var(--paper);background:var(--ink);padding:6px 18px}
.shutter::after{content:"";position:absolute;left:50%;bottom:4vh;width:70px;height:10px;margin-left:-35px;background:#3d3832;border-radius:3px}
.open .shutter{transform:translateY(-102%)}

/* header */
.top{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--paper);border-bottom:2px solid var(--ink)}
.mark{text-decoration:none;display:flex;align-items:baseline;gap:8px}
.mark .dev{font-size:30px;line-height:1;color:var(--red)}
.mark .lat{font:13px var(--disp);letter-spacing:.2em;text-transform:uppercase}
nav{display:flex;gap:18px;font-weight:600;font-size:15px}
nav a{text-decoration:none}
nav a:not(.nav-cta){display:none}
.nav-cta{background:var(--ink);color:var(--paper);padding:6px 14px}

/* hero */
.hero{padding:40px 20px 70px;display:grid;gap:56px}
.hero h1{font:400 clamp(64px,19vw,168px)/.86 var(--disp);text-transform:uppercase}
.hero h1 span{display:block}
.hero h1 .red{white-space:nowrap;background:var(--red);color:var(--paper);display:inline-block;padding:.04em .12em .0em;margin-top:.08em;transform:rotate(-1.5deg);box-shadow:6px 6px 0 var(--ink)}
.lede{max-width:30ch;margin-top:28px;font-size:20px}
.hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:30px}
.btn-board{display:inline-block;background:var(--haldi);color:var(--ink);font:400 22px var(--disp);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;padding:14px 22px;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.btn-board:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.link-under{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.link-under.light{color:var(--paper)}

.phone-wrap{position:relative;justify-self:center;width:min(330px,100%)}
.phone{background:#fffaf0;border:3px solid var(--ink);border-radius:34px;padding:14px 12px 12px;box-shadow:12px 12px 0 var(--red);transform:rotate(2deg)}
.ph-head{display:flex;gap:10px;align-items:center;padding:6px 6px 12px;border-bottom:1.5px dashed #bdb2a1}
.ph-head b{display:block;font-size:15px;line-height:1.2}
.ph-head small{font-size:12px;color:var(--mut)}
.av{width:36px;height:36px;border-radius:50%;background:var(--haldi);display:grid;place-items:center;font:20px var(--disp);border:2px solid var(--ink)}
.chat{list-style:none;min-height:330px;padding:14px 4px;display:flex;flex-direction:column;gap:9px;font-size:15px;line-height:1.35}
.chat li{max-width:84%;padding:8px 12px;border:1.5px solid var(--ink);border-radius:14px}
.chat .me{align-self:flex-end;background:var(--ink);color:var(--paper);border-bottom-right-radius:3px}
.chat .them{align-self:flex-start;background:var(--paper);border-bottom-left-radius:3px}
.js .chat li{display:none}
.js .chat li.on{display:block;animation:pop .3s ease-out}
.chat li.typing{display:block;width:62px;letter-spacing:3px;font-weight:800}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}
.ph-input{border:1.5px solid #bdb2a1;border-radius:20px;padding:8px 14px;font-size:14px;color:var(--mut)}
.note{font-size:12px;color:var(--mut);margin-top:22px;text-align:center}
.arrow{position:absolute;left:-86px;top:-40px;width:90px;color:var(--ink);display:none}
.scrawl{position:absolute;left:-150px;top:-66px;font:24px var(--dev);transform:rotate(-6deg);display:none}

/* board */
.board{background:var(--red);color:var(--paper);border-block:3px solid var(--ink);padding:16px 20px;transform:rotate(-1deg);margin:0 -10px}
.board p{font:400 clamp(20px,3.4vw,34px)/1.15 var(--disp);text-transform:uppercase;letter-spacing:.02em;text-align:center}

/* story */
.story{display:grid;padding:90px 20px 40px;gap:0}
.sub{color:var(--mut);margin:12px 0 30px}
.step{padding:28px 0 28px 0;border-top:2px solid var(--ink);opacity:.3;transition:opacity .4s}
.step.on{opacity:1}
.step b{font:400 18px var(--disp);color:var(--red)}
.step h3{font:400 34px/1 var(--disp);text-transform:uppercase;margin:4px 0 8px}
.step p{max-width:36ch}
.parchi-col{position:sticky;bottom:10px;order:-1;z-index:5;align-self:end;display:none}
.parchi{position:relative;background:#fffdf6;width:min(340px,100%);margin:auto;padding:22px 22px 30px;font-family:"Courier New",monospace;font-size:14px;box-shadow:0 1px 0 #d8cfbf,0 18px 30px -18px rgba(0,0,0,.35);transform:rotate(-1.5deg);
  -webkit-mask:radial-gradient(circle 6px at 50% 100%,transparent 98%,#000) 0 0/16px 100% repeat-x;mask:radial-gradient(circle 6px at 50% 100%,transparent 98%,#000) 0 0/16px 100% repeat-x}
.p-top{text-align:center;border-bottom:1.5px dashed var(--ink);padding-bottom:10px;margin-bottom:10px}
.p-top .dev{display:block;font-size:24px}
.p-top small{display:block;color:var(--mut)}
.p-items{width:100%;border-collapse:collapse}
.p-items td:last-child{text-align:right}
.p-items .tot td{border-top:1.5px dashed var(--ink);padding-top:4px;font-weight:700}
.p-log{list-style:none;margin-top:14px}
.p-log li{display:grid;grid-template-columns:22px 1fr auto;padding:3px 0;border-bottom:1px dotted #cbbfae;opacity:.15;transition:opacity .35s}
.p-log li::before{content:"☐ ";}
.p-log li.on{opacity:1}
.p-log li.on::before{content:"☑ ";color:var(--red)}
.p-log i{font-style:normal;color:var(--mut)}
.stamp{display:table;margin:18px 0 0 auto;border:3px solid var(--red);color:var(--red);font:400 28px/1 var(--disp);padding:6px 10px;text-align:center;transform:rotate(-14deg) scale(1.6);opacity:0;transition:.35s cubic-bezier(.3,1.6,.6,1)}
.stamp small{font:16px var(--dev)}
.parchi.done .stamp{opacity:.85;transform:rotate(-14deg) scale(1)}

/* dukandar */
.duk{background:var(--ink);color:var(--paper);padding:90px 20px;margin-top:60px}
.duk-head{display:grid;gap:30px}
.shutter-art{width:220px}
.khata{margin-top:50px;background:var(--paper);color:var(--ink);padding:26px 20px;background-image:repeating-linear-gradient(transparent 0 33px,#c9bfae 33px 34px);border-left:6px double var(--red)}
.khata-title{font:400 26px var(--disp);text-transform:uppercase;margin-bottom:10px}
.khata ol{list-style:none;counter-reset:k}
.khata li{counter-increment:k;display:grid;grid-template-columns:44px 1fr;padding:12px 0;border-bottom:1.5px solid var(--ink)}
.khata li::before{content:counter(k)".";grid-row:span 2;font:400 30px var(--disp);color:var(--red)}
.khata span{font-weight:800;font-size:21px}
.khata em{font-style:normal;color:#4a433b}

/* grahak */
.gra{background:var(--haldi);padding:90px 20px;display:grid;gap:40px;border-bottom:3px solid var(--ink)}
.gra .kicker{color:var(--ink)}
.big{font:600 clamp(22px,3vw,30px)/1.25 var(--body);margin:22px 0;max-width:24ch}
.ticks{list-style:none}
.ticks li{padding:10px 0 10px 34px;border-top:1.5px solid var(--ink);position:relative;max-width:46ch}
.ticks li::before{content:"";position:absolute;left:4px;top:18px;width:16px;height:9px;border-left:3px solid var(--red);border-bottom:3px solid var(--red);transform:rotate(-45deg)}
.cycle{width:100%;max-width:420px;justify-self:center}

/* faq */
.faq{padding:90px 20px;display:grid;gap:36px}
details{border-top:2px solid var(--ink);padding:18px 0}
details:last-child{border-bottom:2px solid var(--ink)}
summary{font-weight:800;font-size:21px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 30px/0.8 var(--disp);color:var(--red)}
details[open] summary::after{content:"–"}
details p{margin-top:10px;max-width:52ch;color:#3b352e}

/* contact */
.contact{background:var(--red);color:var(--paper);padding:80px 20px;display:grid;gap:30px;border-top:3px solid var(--ink)}
.contact p{max-width:40ch;margin-top:16px;font-size:19px}
.c-links{display:flex;flex-direction:column;align-items:flex-start;gap:20px;align-self:end}
.foot{background:var(--ink);color:var(--paper);padding:50px 20px;}
.big-dev{font-size:clamp(80px,20vw,200px);line-height:1;color:var(--haldi);display:block}
.foot p{margin-top:8px}.tiny{font-size:13px;opacity:.7}

/* step on mobile: show parchi sticky small */
@media (max-width:899px){
  .parchi-col{display:block;order:1;position:static;margin-top:30px}
  .parchi{width:min(300px,92%);font-size:12.5px;padding:14px 16px 22px}
  .p-top .dev{font-size:20px}
}
@media (min-width:900px){
  body{font-size:19px}
  .top{padding:14px 48px}
  nav a:not(.nav-cta){display:inline}
  .hero{grid-template-columns:1.25fr .75fr;align-items:center;padding:70px 48px 110px;min-height:calc(100vh - 62px)}
  .arrow,.scrawl{display:block}
  .story{grid-template-columns:1fr 420px;gap:80px;padding:130px 48px 80px}
  .parchi-col{display:block;order:0;position:sticky;top:110px;align-self:start}
  .duk{padding:130px 48px;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
  .duk-head{grid-template-columns:1fr}
  .shutter-art{width:280px}
  .khata{margin-top:0;transform:rotate(.8deg)}
  .gra{grid-template-columns:1.1fr .9fr;align-items:center;padding:130px 48px}
  .faq{grid-template-columns:.8fr 1.2fr;padding:130px 48px;align-items:start}
  .contact{grid-template-columns:1.3fr .7fr;padding:110px 48px}
  .foot{padding:60px 48px;display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:40px}
  .foot p{grid-column:1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .shutter{display:none}
}