/* danka.css · shared system for inner pages */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/anton-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/work-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Work Sans';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/work-sans-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/work-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/work-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/noto-sans-devanagari-devanagari-700-normal.woff2') format('woff2')}
:root{
  --black:#131110; --card:#1B1815; --line:#2E2A25;
  --red:#E23B22; --darkred:#B22A16;
  --cream:#F5EFE6; --mute:#8A8073; --body:#C9BFB0; --cap:#A79D8E;
  --ink:#23291F;
  --drum:cubic-bezier(.05,.7,.1,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
:target{scroll-margin-top:96px}
section[id],div[id]{scroll-margin-top:96px}
body{background:var(--black);color:var(--cream);font-family:'Work Sans',-apple-system,'Segoe UI',sans-serif;line-height:1.55;overflow-x:hidden}
.display{font-family:'Anton','Arial Black',Impact,sans-serif;font-weight:400;letter-spacing:.02em;text-transform:uppercase}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
.wrap-n{max-width:860px;margin:0 auto;padding:0 28px}
::selection{background:var(--red);color:var(--black)}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.devbg{position:absolute;font-family:'Noto Sans Devanagari',sans-serif;font-weight:700;color:transparent;-webkit-text-stroke:1.5px var(--line);pointer-events:none;user-select:none;line-height:1;z-index:0}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:125;background:rgba(19,17,16,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;max-width:1400px;margin:0 auto}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--cream)}
.mark{display:inline-flex;align-items:center}
.mark svg{display:block;height:30px;width:auto}
.wordmark{display:inline-flex;align-items:center}
.wordmark svg{display:block;height:16px;width:auto;fill:currentColor}
.mark .dot{transform-box:fill-box;transform-origin:center;animation:idlepulse 2.4s ease-in-out infinite}
@keyframes idlepulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
.nav-r{display:flex;gap:18px;align-items:center}
.nav-mid{display:none;gap:30px;align-items:center}
.nav-mid a{color:var(--body);text-decoration:none;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;position:relative;padding:6px 0;transition:color .2s var(--drum)}
.nav-mid a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--red);transition:right .25s var(--drum)}
.nav-mid a:hover{color:var(--cream)}
.nav-mid a:hover::after{right:0}
.nav-mid a[aria-current="page"]{color:var(--red)}
.nav-mid a[aria-current="page"]::after{right:0}
@media(min-width:1040px){.nav-mid{display:flex}#burger{display:none}}
.btn{display:inline-block;background:var(--red);color:var(--black);font-weight:600;text-decoration:none;padding:12px 26px;font-size:14px;border-radius:2px;transition:background .2s var(--drum),color .2s;border:none;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--cream)}
.btn.dark{background:var(--black);color:var(--cream)}
.btn.dark:hover{background:var(--cream);color:var(--black)}
body.menu-open .logo{color:var(--black)}
body.menu-open .logo .mark svg{fill:var(--black)}
body.menu-open .logo .mark svg [stroke]{stroke:var(--black)}
#burger{width:44px;height:44px;background:none;border:1px solid var(--line);border-radius:2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:border-color .2s}
#burger:hover{border-color:var(--mute)}
#burger i{display:block;width:18px;height:2px;background:var(--cream);transition:transform .3s var(--drum),opacity .3s}
body.menu-open #burger i:nth-child(1){transform:translateY(4px) rotate(45deg)}
body.menu-open #burger i:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* overlay menu */
#menu{position:fixed;inset:0;background:var(--red);z-index:124;display:flex;align-items:flex-start;overflow-y:auto;overscroll-behavior:contain;clip-path:circle(0% at calc(100% - 50px) 40px);transition:clip-path .65s var(--drum);visibility:hidden;overflow:hidden}
body.menu-open #menu{clip-path:circle(150% at calc(100% - 50px) 40px);visibility:visible}
#menu .devbg{font-size:44vh;right:-6vw;bottom:-10vh;-webkit-text-stroke-color:var(--darkred)}
#menu .m-in{max-width:1160px;margin:0 auto;padding:clamp(104px,13vh,150px) 28px 64px;width:100%;position:relative;z-index:1}
#menu a.mlink{display:block;color:var(--black);text-decoration:none;font-size:clamp(30px,4.6vw,58px);line-height:1.2;opacity:0;transform:translateY(30px);transition:opacity .4s var(--drum),transform .4s var(--drum),color .2s}
#menu a.mlink:hover{color:var(--cream)}
#menu a.mlink .no{font-size:.35em;color:var(--darkred);vertical-align:super;margin-right:14px}
body.menu-open #menu a.mlink{opacity:1;transform:none}
body.menu-open #menu a.mlink:nth-child(1){transition-delay:.13s}
body.menu-open #menu a.mlink:nth-child(2){transition-delay:.2s}
body.menu-open #menu a.mlink:nth-child(3){transition-delay:.27s}
body.menu-open #menu a.mlink:nth-child(4){transition-delay:.34s}
body.menu-open #menu a.mlink:nth-child(5){transition-delay:.41s}
body.menu-open #menu a.mlink:nth-child(6){transition-delay:.48s}
body.menu-open #menu a.mlink:nth-child(7){transition-delay:.55s}
#menu .m-foot{margin-top:34px;color:var(--darkred);font-size:14px;letter-spacing:.15em;text-transform:uppercase}

/* page hero */
.phero{padding:170px 0 70px;position:relative;overflow:hidden}
.phero .devbg{font-size:34vh;right:-6vw;top:-4vh}
.phero .wrap,.phero .wrap-n{position:relative;z-index:1}
.kicker{color:var(--red);font-size:12px;font-weight:600;letter-spacing:.4em;text-transform:uppercase;margin-bottom:24px}
.kicker a{color:inherit;text-decoration:none}
.kicker a:hover{color:var(--cream)}
h1{font-size:clamp(44px,7.2vw,104px);line-height:.98;letter-spacing:-.005em;max-width:1000px}
h1 .rd{color:var(--red)}
h1 .ol{color:transparent;-webkit-text-stroke:1.5px var(--mute)}
.phero .sub{font-size:19px;color:var(--body);max-width:640px;margin-top:30px}
.phero .sub strong{color:var(--cream)}

/* sections */
section.blk{padding:80px 0;position:relative;overflow:hidden}
section.blk .wrap,section.blk .wrap-n{position:relative;z-index:1}
h2{font-size:clamp(32px,4.4vw,52px);margin-bottom:14px;letter-spacing:-.005em}
.sec-sub{color:var(--mute);font-size:16px;font-style:italic;margin-bottom:44px}
p.lead{font-size:18px;color:var(--body);max-width:720px}
p.lead strong{color:var(--cream)}
.prose p{color:var(--body);font-size:16.5px;max-width:720px;margin-bottom:20px}
.prose p strong{color:var(--cream)}

/* meta row (case studies) */
.metarow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:56px 0 0;border-top:1px solid var(--line);padding-top:28px}
.metarow .m .k{color:var(--mute);font-size:11px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:8px}
.metarow .m .v{color:var(--cream);font-size:15px}

/* cards & lists */
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cardx{background:var(--card);border:1px solid var(--line);padding:32px 30px;transition:transform .25s var(--drum),border-color .25s}
.cardx:hover{transform:translateY(-5px);border-color:var(--mute)}
.cardx h3{font-size:24px;margin-bottom:12px}
.cardx h3 em{color:var(--red);font-style:normal}
.cardx p{color:var(--body);font-size:15px}
ul.ticks{list-style:none;max-width:640px}
ul.ticks li{color:var(--body);font-size:16px;padding:13px 0 13px 24px;border-top:1px solid var(--line);position:relative}
ul.ticks li strong{color:var(--cream)}
ul.ticks li::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--red)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stat{background:var(--card);border:1px solid var(--line);padding:30px 28px}
.stat .n{font-size:46px;line-height:1.1;letter-spacing:-.01em}
.stat.lead .n{color:var(--red)}
.stat p{color:var(--cap);font-size:13.5px;margin-top:10px}

/* logo panel + palette (case pages) */
.brandpanel{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:stretch}
.logo-stage{border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:56px 40px;min-height:320px}
.logo-stage img{max-width:78%;max-height:240px;width:auto;height:auto}
.chips{display:flex;flex-direction:column;gap:0;border:1px solid var(--line)}
.chip{flex:1;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;font-size:13px;letter-spacing:.08em;min-height:56px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:40px 0}
.step{background:var(--card);border:1px solid var(--line);padding:32px 28px}
.step .s{color:var(--red);font-size:12px;letter-spacing:.3em;font-weight:600}
.step h3{font-size:26px;margin:8px 0 12px}
.step p{color:var(--body);font-size:14.5px}

/* work index cards */
.workgrid{display:grid;grid-template-columns:1fr;gap:18px}
.workcard{display:grid;grid-template-columns:.9fr 1.1fr;border:1px solid var(--line);text-decoration:none;color:var(--cream);transition:border-color .25s,transform .25s var(--drum);overflow:hidden}
.workcard:hover{border-color:var(--mute);transform:translateY(-4px)}
.workcard .wc-vis{display:flex;align-items:center;justify-content:center;padding:48px 30px;min-height:230px}
.workcard .wc-vis img{max-width:70%;max-height:150px;width:auto;height:auto}
.workcard .wc-tx{padding:38px 34px;background:var(--card)}
.workcard .wc-tx .k{color:var(--red);font-size:11px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:12px}
.workcard .wc-tx h3{font-size:clamp(24px,2.6vw,34px);line-height:1.05;margin-bottom:12px}
.workcard .wc-tx p{color:var(--body);font-size:15px;max-width:480px}
.workcard .wc-tx .go{color:var(--red);font-size:13px;letter-spacing:.15em;text-transform:uppercase;margin-top:18px;display:inline-block}

/* CTA band */
.ctaband{background:var(--red);padding:80px 0;position:relative;overflow:hidden}
.ctaband .devbg{font-size:40vh;right:-6vw;bottom:-12vh;-webkit-text-stroke-color:var(--darkred)}
.ctaband .wrap{position:relative;z-index:1}
.ctaband h2{color:var(--black);font-size:clamp(34px,4.8vw,58px)}
.ctaband p{color:#5A1508;font-size:17px;margin:12px 0 30px;max-width:640px}
.ctaband p strong{color:var(--black)}

/* footer */
footer{padding:70px 0 34px;overflow:hidden;position:relative;border-top:1px solid var(--line)}
.foot{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:50px}
.foot-logo{display:block;height:44px;width:auto;margin-bottom:14px}
.foot-tag{color:var(--cap);font-size:11px;letter-spacing:.28em;text-transform:uppercase;margin-bottom:16px}
.foot-tag i{color:var(--red);font-style:normal}
.foot .dev{font-family:'Noto Sans Devanagari',sans-serif;color:var(--red)}
.foot .tag{color:var(--mute);font-style:italic;margin-top:6px}
.foot-links{display:flex;gap:60px;flex-wrap:wrap}
.foot-links .col .h{color:var(--mute);font-size:11px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:14px}
.foot-links .col a{display:block;color:var(--body);text-decoration:none;font-size:14.5px;line-height:2}
.foot-links .col a:hover{color:var(--cream)}
.foot-contact{color:var(--body);font-size:15px;line-height:2}
.foot-contact a{color:var(--body);text-decoration:none}
.foot-contact a:hover{color:var(--cream)}
.legal{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--mute);font-size:12px;letter-spacing:.08em;flex-wrap:wrap;gap:10px}

/* next-case */
.nextcase{border-top:1px solid var(--line)}
.nextcase a{display:block;text-decoration:none;color:var(--cream);padding:60px 0;text-align:center;transition:background .3s}
.nextcase a:hover{background:var(--card)}
.nextcase .k{color:var(--mute);font-size:12px;letter-spacing:.35em;text-transform:uppercase;margin-bottom:12px}
.nextcase .t{font-size:clamp(30px,4.5vw,54px)}
.nextcase .t .arr{color:var(--red)}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .6s var(--drum),transform .6s var(--drum)}
.rv.in{opacity:1;transform:none}
.rv[data-i="1"]{transition-delay:.08s}.rv[data-i="2"]{transition-delay:.16s}
.rv[data-i="3"]{transition-delay:.24s}.rv[data-i="4"]{transition-delay:.32s}

.hatke{display:inline-block;transform:rotate(-3deg);background:var(--red);color:var(--black);font-style:normal;font-weight:600;padding:1px 10px}

@media(max-width:900px){
  .cards2,.cards3,.steps,.brandpanel{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .metarow{grid-template-columns:1fr 1fr}
  .workcard{grid-template-columns:1fr}
  .workcard .wc-vis{min-height:180px}
  .phero{padding:140px 0 56px}
}
@media(max-width:560px){
  .stats{grid-template-columns:1fr}
  .wrap,.wrap-n{padding:0 20px}
    .mark svg{height:26px}
.wordmark svg{height:14px}
  .nav-in{padding:14px 18px}
  .nav-r{gap:12px}
  .nav-r .btn{padding:10px 16px;font-size:13px}
  .foot-links{gap:34px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════
   v2 · case studies, gyaan, deeper service pages
   ═══════════════════════════════════════════════════════════ */

/* ---- chapter headings (the case-study spine) ---- */
.chap{display:flex;align-items:baseline;gap:16px;margin-bottom:18px}
.chap .no{font-family:'Anton',sans-serif;font-size:15px;letter-spacing:.22em;color:var(--red)}
.chap .ln{flex:1;height:1px;background:var(--line)}
.chap .ln.on-band{background:rgba(0,0,0,.18)}

/* ---- case hero ---- */
.casehero{padding:160px 0 0;position:relative;overflow:hidden}
.casehero .devbg{font-size:36vh;right:-6vw;top:-6vh}
.casehero .wrap{position:relative;z-index:1}
.casehero h1{font-size:clamp(42px,6.6vw,96px);max-width:1040px}
.casehero .sub{font-size:19px;color:var(--body);max-width:660px;margin-top:28px}
.casehero .sub strong{color:var(--cream)}
.headline{display:flex;gap:0;flex-wrap:wrap;margin-top:56px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.headline .h{flex:1 1 190px;padding:26px 26px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.headline .h .n{font-family:'Anton',sans-serif;font-size:clamp(34px,3.6vw,48px);line-height:1;color:var(--cream);letter-spacing:-.01em}
.headline .h.lead .n{color:var(--red)}
.headline .h p{color:var(--cap);font-size:13px;margin-top:10px;line-height:1.5}

/* ---- full-bleed brand band ---- */
.band{padding:78px 0;position:relative;overflow:hidden;background:var(--band,var(--card))}
.band .wrap{position:relative;z-index:1}
.band h2,.band h3{color:var(--band-ink,var(--cream))}
.band p,.band li{color:var(--band-body,var(--body))}
.band .chap .no{color:var(--band-acc,var(--red))}
.band.light{--band-ink:#1A1510;--band-body:#4A443C}
.band.light .sec-sub{color:#7A7268}

/* ---- artifact gallery (brand book pages, collateral) ---- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gal.two{grid-template-columns:repeat(2,1fr)}
.gal figure{margin:0;position:relative;transition:transform .3s var(--drum)}
.gal figure:hover{transform:translateY(-6px)}
.gal img{display:block;width:100%;height:auto;border:1px solid rgba(0,0,0,.14);box-shadow:0 18px 40px rgba(0,0,0,.22)}
.gal figcaption{color:var(--band-cap,var(--cap));font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;margin-top:14px}
.gal.wide{grid-template-columns:1fr;max-width:820px;margin:0 auto}
.showcase{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:start}
.showcase .stackpair{display:grid;gap:16px}

/* ---- pull quote ---- */
.pull{max-width:900px;margin:0 auto;text-align:center;padding:10px 0}
.pull .q{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(28px,4.2vw,54px);line-height:1.1;letter-spacing:-.005em}
.pull .q em{color:var(--red);font-style:normal}
.pull .cite{color:var(--mute);font-size:12px;letter-spacing:.3em;text-transform:uppercase;margin-top:22px}
.band.light .pull .cite{color:#8B8474}

/* ---- before / after ---- */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line)}
.ba > div{padding:36px 34px}
.ba .before{border-right:1px solid var(--line);background:transparent}
.ba .after{background:var(--card)}
.ba .k{font-size:11px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:16px}
.ba .before .k{color:var(--mute)}
.ba .after .k{color:var(--red)}
.ba ul{list-style:none}
.ba li{font-size:15px;padding:9px 0 9px 22px;position:relative;color:var(--body)}
.ba .before li{color:var(--mute)}
.ba li::before{content:'·';position:absolute;left:2px;color:var(--mute);font-size:14px}
.ba .after li::before{content:'●';font-size:8px;top:12px;color:var(--red)}

/* ---- spec table (pricing tiers, project inventory) ---- */
.spec{border:1px solid var(--line)}
.spec .row{display:grid;grid-template-columns:1.3fr 1fr 1.4fr;gap:20px;padding:17px 24px;border-bottom:1px solid var(--line);align-items:center}
.spec .row:last-child{border-bottom:none}
.spec .row.head{background:var(--card);color:var(--mute);font-size:11px;letter-spacing:.26em;text-transform:uppercase}
.spec .row .a{color:var(--cream);font-size:15.5px;font-weight:500}
.spec .row .b{color:var(--red);font-family:'Anton',sans-serif;font-size:22px;letter-spacing:.01em}
.spec .row .c{color:var(--cap);font-size:13.5px}
.spec.on-light{border-color:rgba(0,0,0,.14)}
.spec.on-light .row{border-bottom-color:rgba(0,0,0,.12)}
.spec.on-light .row.head{background:rgba(0,0,0,.05);color:#7A7268}
.spec.on-light .row .a{color:#1A1510}
.spec.on-light .row .c{color:#5C554C}

/* ---- deliverables grid (service pages) ---- */
.deliv{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.deliv .d{background:var(--black);padding:28px 26px}
.deliv .d .t{color:var(--cream);font-size:16px;font-weight:600;margin-bottom:8px}
.deliv .d p{color:var(--cap);font-size:13.5px}
.deliv .d .fmt{color:var(--red);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;margin-top:12px}

/* ---- for / not for ---- */
.fitgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fitgrid .fit{border:1px solid var(--line);padding:32px 30px}
.fitgrid .fit.yes{border-color:var(--red)}
.fitgrid .fit .k{font-size:11px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:18px}
.fitgrid .fit.yes .k{color:var(--red)}
.fitgrid .fit.no .k{color:var(--mute)}
.fitgrid ul{list-style:none}
.fitgrid li{color:var(--body);font-size:15px;padding:10px 0 10px 24px;position:relative;border-top:1px solid var(--line)}
.fitgrid li:first-child{border-top:none}
.fitgrid .yes li::before{content:'✓';position:absolute;left:0;color:var(--red);font-size:13px}
.fitgrid .no li::before{content:'×';position:absolute;left:2px;color:var(--mute);font-size:15px}
.fitgrid .no li{color:var(--mute)}

/* ---- FAQ ---- */
.faq{border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;color:var(--cream);font-size:17px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:6px;top:20px;color:var(--red);font-size:24px;line-height:1;transition:transform .25s var(--drum)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--red)}
.faq .a{padding:0 40px 24px 0;color:var(--body);font-size:15.5px;max-width:760px}
.faq .a p+p{margin-top:14px}
.faq .a strong{color:var(--cream)}

/* ---- insight / gyaan callout inside pages ---- */
.insight{border-left:3px solid var(--red);padding:6px 0 6px 26px;max-width:760px;margin:34px 0}
.insight .k{color:var(--red);font-size:11px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:10px}
.insight p{color:var(--body);font-size:16.5px}
.insight p strong{color:var(--cream)}
.insight p+p{margin-top:14px}

/* ---- numbers strip ---- */
.numstrip{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.numstrip .n1{flex:1 1 160px;padding:24px 24px 26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.numstrip .n1 b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:34px;color:var(--cream);line-height:1}
.numstrip .n1 span{display:block;color:var(--cap);font-size:12.5px;margin-top:9px}
.numstrip.on-light{border-color:rgba(0,0,0,.14)}
.numstrip.on-light .n1{border-color:rgba(0,0,0,.14)}
.numstrip.on-light .n1 b{color:#1A1510}
.numstrip.on-light .n1 span{color:#5C554C}

/* ---- featured work (homepage + work index) ---- */
.featgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.featcard{display:flex;flex-direction:column;border:1px solid var(--line);text-decoration:none;color:var(--cream);overflow:hidden;transition:transform .28s var(--drum),border-color .28s;background:var(--card)}
.featcard:hover{transform:translateY(-6px);border-color:var(--mute)}
.featcard .vis{display:flex;align-items:center;justify-content:center;padding:44px 26px;min-height:190px;position:relative}
.featcard .vis img{max-width:74%;max-height:110px;width:auto;height:auto}
.featcard .bd{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.featcard .k{color:var(--red);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;margin-bottom:12px}
.featcard h3{font-size:22px;line-height:1.12;margin-bottom:12px}
.featcard p{color:var(--body);font-size:14.5px;flex:1}
.featcard .res{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);color:var(--cap);font-size:13px}
.featcard .res b{font-family:'Anton',sans-serif;font-weight:400;color:var(--red);font-size:19px;margin-right:8px;letter-spacing:.01em}

/* ---- gyaan ---- */
.postlist{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.postrow{display:grid;grid-template-columns:74px 1fr 190px;gap:26px;align-items:start;padding:34px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--cream);transition:background .25s,padding .25s var(--drum)}
.postrow:hover{background:var(--card);padding-left:18px;padding-right:18px}
.postrow .num{font-family:'Anton',sans-serif;color:var(--red);font-size:15px;letter-spacing:.18em;padding-top:6px}
.postrow h3{font-size:clamp(21px,2.3vw,30px);line-height:1.14;margin-bottom:10px}
.postrow p{color:var(--body);font-size:15px;max-width:620px}
.postrow .meta{color:var(--mute);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;text-align:right;padding-top:8px;line-height:2}
.postrow:hover h3{color:var(--red)}

.article{max-width:720px}
.article > p{color:var(--body);font-size:17.5px;line-height:1.72;margin-bottom:24px}
.article > p strong{color:var(--cream)}
.article > p em{color:var(--cream);font-style:italic}
.article h2{font-size:clamp(25px,3.1vw,36px);margin:52px 0 18px;line-height:1.1}
.article h3{font-size:20px;margin:36px 0 12px;color:var(--cream)}
.article ul,.article ol{margin:0 0 24px 0;padding-left:0;list-style:none}
.article li{color:var(--body);font-size:16.5px;line-height:1.65;padding:9px 0 9px 26px;position:relative}
.article ul li::before{content:'';position:absolute;left:2px;top:19px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.article ol{counter-reset:oi}
.article ol li{counter-increment:oi}
.article ol li::before{content:counter(oi);position:absolute;left:0;top:9px;font-family:'Anton',sans-serif;color:var(--red);font-size:13px}
.article li strong{color:var(--cream)}
.article a{color:var(--red)}
.article blockquote{border-left:3px solid var(--red);padding-left:26px;margin:34px 0}
.article blockquote p{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(21px,2.6vw,31px);line-height:1.16;color:var(--cream)}
.article hr{border:none;border-top:1px solid var(--line);margin:46px 0}
.article .kicker-in{color:var(--red);font-size:11px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:12px}
.article table{width:100%;border-collapse:collapse;margin:8px 0 28px;font-size:15px}
.article th{text-align:left;color:var(--mute);font-size:11px;letter-spacing:.24em;text-transform:uppercase;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:400}
.article td{color:var(--body);padding:14px;border-bottom:1px solid var(--line);vertical-align:top}
.article td strong{color:var(--cream)}
.artmeta{display:flex;gap:26px;flex-wrap:wrap;color:var(--mute);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.takeaway{border:1px solid var(--red);padding:30px 30px;margin:44px 0 10px;max-width:720px}
.takeaway .k{color:var(--red);font-size:11px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:14px}
.takeaway p{color:var(--cream);font-size:17px;line-height:1.6}
.nextpost{border-top:1px solid var(--line)}
.nextpost a{display:block;text-decoration:none;color:var(--cream);padding:52px 0;transition:background .3s}
.nextpost a:hover{background:var(--card)}
.nextpost .k{color:var(--mute);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:12px}
.nextpost .t{font-size:clamp(24px,3.4vw,40px);line-height:1.1;max-width:820px}
.nextpost .t .arr{color:var(--red)}

/* ---- misc ---- */
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.tag{border:1px solid var(--line);color:var(--cap);font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:7px 13px;border-radius:2px}
.insetimg{border:1px solid var(--line);display:block;width:100%;height:auto}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.twocol p{color:var(--body);font-size:16.5px;margin-bottom:18px}
.twocol p strong{color:var(--cream)}

@media(max-width:900px){
  .gal,.gal.two{grid-template-columns:1fr 1fr}
  .showcase{grid-template-columns:1fr}
  .deliv{grid-template-columns:1fr}
  .fitgrid,.ba,.twocol{grid-template-columns:1fr}
  .ba .before{border-right:none;border-bottom:1px solid var(--line)}
  .featgrid{grid-template-columns:1fr}
  .postrow{grid-template-columns:52px 1fr;gap:16px}
  .postrow .meta{grid-column:2;text-align:left;padding-top:0;margin-top:12px}
  .spec .row{grid-template-columns:1fr;gap:6px}
  .spec .row.head{display:none}
  .casehero{padding:130px 0 0}
}
@media(max-width:560px){
  .gal,.gal.two{grid-template-columns:1fr}
  .headline .h{flex:1 1 100%}
  .band{padding:60px 0}
  .article > p{font-size:16.5px}
}
.workcard .wc-res{margin-top:18px;color:var(--cap);font-size:13px;line-height:1.5}
.workcard .wc-res b{font-family:'Anton',sans-serif;font-weight:400;color:var(--red);font-size:17px;margin-right:9px;letter-spacing:.03em}

/* ─── client-brand specimen blocks (case studies) ─── */
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/lora-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/lora-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Noto Serif Kannada';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/noto-serif-kannada-kannada-400-normal.woff2') format('woff2')}

.spec-block{--ink:#274B52;--paper:#F2EAD9;--accent:#C1653F;--sub:#6B5D4A}
.spec-block + .spec-block{margin-top:18px}
.spec-card{background:#FFFDF7;border:1px solid rgba(39,75,82,.16);padding:38px 34px}
.spec-card .lab{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--sub);margin-bottom:26px}

/* logo stage */
.bw-stage{background:var(--paper);border:1px solid rgba(39,75,82,.16);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 30px 44px;gap:26px}
.bw-stage img{max-width:min(72%,520px);height:auto;display:block}
.bw-stage .cap{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--sub)}

/* palette */
.bw-pal{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.bw-pal .sw{border:1px solid rgba(39,75,82,.14);background:#FFFDF7}
.bw-pal .sw .chip{height:132px;display:block}
.bw-pal .sw .meta{padding:16px 16px 20px}
.bw-pal .sw .nm{font-family:'Lora',Georgia,serif;font-size:16px;color:var(--ink);margin-bottom:6px}
.bw-pal .sw .hx{font-size:12px;letter-spacing:.06em;color:var(--sub);font-variant-numeric:tabular-nums}
.bw-pal .sw .ro{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sub);opacity:.75;margin-top:8px}

/* type specimen */
.bw-type{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.bw-type .fam{font-family:'Lora',Georgia,serif;font-size:clamp(34px,4.4vw,54px);color:var(--ink);line-height:1;margin-bottom:16px}
.bw-type .fam.ws{font-family:'Work Sans',sans-serif;font-weight:400}
.bw-type .aa{font-family:'Lora',Georgia,serif;font-size:19px;color:var(--ink);margin-bottom:14px}
.bw-type .aa.ws{font-family:'Work Sans',sans-serif}
.bw-type p{font-size:14px;line-height:1.6;color:var(--sub);max-width:34ch}
.bw-kan{margin-top:34px;padding-top:28px;border-top:1px solid rgba(39,75,82,.14)}
.bw-kan .kn{font-family:'Noto Serif Kannada',serif;font-size:38px;color:var(--ink);line-height:1.4;display:flex;gap:26px;align-items:baseline;flex-wrap:wrap}
.bw-kan .kn small{font-size:24px}
.bw-kan p{font-size:14px;color:var(--sub);margin-top:12px}

/* voice lines */
.bw-voice .ln{font-family:'Lora',Georgia,serif;font-size:clamp(19px,2.3vw,27px);line-height:1.45;color:var(--ink);padding:20px 0;border-top:1px solid rgba(39,75,82,.14)}
.bw-voice .ln:first-of-type{border-top:none;padding-top:0}
.bw-voice .ln em{color:var(--accent);font-style:normal}

@media(max-width:900px){
  .bw-pal{grid-template-columns:repeat(2,1fr)}
  .bw-type{grid-template-columns:1fr;gap:28px}
  .spec-card{padding:30px 24px}
}
@media(max-width:560px){ .bw-pal{grid-template-columns:1fr} }

/* desktop: the inline nav replaces the burger */
@media(min-width:1040px){#burger{display:none!important}}

/* ─── stationery cards, rebuilt natively (client case studies) ─── */
.kcards{display:grid;grid-template-columns:repeat(2,1fr);column-gap:28px;row-gap:38px;align-items:end}
.kcard{position:relative;aspect-ratio:90/54;border-radius:4px;overflow:hidden;
  background:
    radial-gradient(120% 130% at 18% -8%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 55%),
    linear-gradient(152deg,#FDFAF3 0%,#FAF5E9 52%,#F3EBDA 100%);
  box-shadow:
    inset 0 0 0 1px rgba(110,78,30,.14),
    inset 0 1px 0 rgba(255,255,255,.6),
    0 1px 2px rgba(31,25,12,.10),
    0 8px 18px -6px rgba(31,25,12,.14),
    0 26px 48px -18px rgba(31,25,12,.24);
  font-family:'Lora',Georgia,serif;color:#221B12;container-type:inline-size}
.kcard .ghost{position:absolute;left:-9%;bottom:-44%;width:60%;opacity:.07;
  filter:sepia(.35) saturate(.75) contrast(.88);pointer-events:none;user-select:none}
.kcard .kmark{position:absolute;right:7%;top:50%;transform:translateY(-50%);width:27%}
.kcard .body{position:absolute;left:8.5%;top:14%;right:43%}
.kcard .nm{font-size:clamp(15px,3.9cqw,24px);letter-spacing:.01em;line-height:1.15;color:#1E1810}
.kcard .role{font-family:'Work Sans',sans-serif;font-weight:500;font-size:clamp(7.5px,1.8cqw,11px);
  letter-spacing:.32em;text-transform:uppercase;color:#A5813A;margin-top:1.4cqw}
.kcard .rule{width:8cqw;height:1px;background:linear-gradient(90deg,#8A6A2C,#C9A050);margin:2.8cqw 0 3cqw}
.kcard .det{font-family:'Work Sans',sans-serif;font-size:clamp(10px,2.3cqw,14px);line-height:1.65;color:#33291A}
.kcard .adr{font-family:'Work Sans',sans-serif;font-size:clamp(9px,2cqw,12.5px);line-height:1.6;color:#6B6152;margin-top:2.4cqw}
.kcard.front{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.kcard.front .kmark{position:static;transform:none;width:37%;margin-top:2%}
.kcard.front .tagline{font-family:'Work Sans',sans-serif;font-weight:500;font-size:clamp(7.5px,1.85cqw,11.5px);
  letter-spacing:.46em;text-indent:.46em;text-transform:uppercase;color:#8A6A2C;margin-top:4.2cqw}
.kcard.front .bar{position:absolute;left:0;right:0;bottom:0;height:1.15cqw;min-height:4px;
  background:linear-gradient(90deg,#8A6A2C,#E3C271 45%,#B08B3E)}
.kcards .lbl{font-family:'Work Sans',sans-serif;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:#7A7268;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.kcards .lbl::before{content:"";width:18px;height:1px;background:#B08B3E;flex:none}
.kcards .slot{container-type:inline-size}
@media(max-width:760px){.kcards{grid-template-columns:1fr;row-gap:30px}}

/* ─── press files: envelope + letterhead drawn to spec ─── */
.kpress{display:grid;grid-template-columns:1.32fr 1fr;column-gap:36px;align-items:start}
.kpress .kp-col{display:flex;flex-direction:column;gap:40px;min-width:0}
.kpress .slot{container-type:inline-size;min-width:0}
.kpress .lbl{font-family:'Work Sans',sans-serif;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:#8A8073;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.kpress .lbl::before{content:"";width:18px;height:1px;background:#B08B3E;flex:none}
.kpress .bz{filter:contrast(.72) grayscale(1) sepia(1) hue-rotate(-8deg) saturate(1.7) brightness(.72)}
/* kraft stock shared by both envelope faces */
.kenv,.kenvb{position:relative;border-radius:3px;overflow:hidden;
  background:
    radial-gradient(120% 150% at 18% -12%,rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 55%),
    repeating-linear-gradient(94deg,rgba(112,88,50,.045) 0 2px,rgba(0,0,0,0) 2px 5px),
    repeating-linear-gradient(3deg,rgba(255,251,240,.05) 0 3px,rgba(0,0,0,0) 3px 8px),
    linear-gradient(152deg,#E0CFAE 0%,#D9C7A6 48%,#CBB58C 100%);
  box-shadow:
    inset 0 0 0 1px rgba(110,78,30,.20),
    inset 0 1px 0 rgba(255,255,255,.32),
    0 1px 2px rgba(31,25,12,.10),
    0 8px 18px -6px rgba(31,25,12,.16),
    0 26px 48px -18px rgba(31,25,12,.28)}
/* envelope front · DL 220 × 110, one spot bronze */
.kenv{aspect-ratio:220/110}
.kenv .kmark{position:absolute;left:6.4%;top:12%;width:19%}
.kenv .ghost{position:absolute;right:-13%;bottom:-56%;width:56%;opacity:.09;pointer-events:none;user-select:none}
.kenv .rule{position:absolute;left:6.4%;bottom:31%;width:33%;height:1px;
  background:linear-gradient(90deg,#6E4E1E,rgba(110,78,30,.25))}
.kenv .adr{position:absolute;left:6.4%;bottom:10.5%;font-family:'Work Sans',sans-serif;font-weight:500;
  font-size:clamp(7px,1.62cqw,10.5px);letter-spacing:.2em;text-transform:uppercase;line-height:2;color:#6E4E1E}
/* envelope back · flap open on the right short edge, liner showing */
.kenvb{aspect-ratio:260/110;background:none;box-shadow:0 1px 2px rgba(31,25,12,.10),
  0 8px 18px -6px rgba(31,25,12,.16),0 26px 48px -18px rgba(31,25,12,.28);overflow:visible;border-radius:0}
.kenvb .bk{position:absolute;left:0;top:0;bottom:0;width:84.6%;border-radius:3px 0 0 3px;overflow:hidden;
  background:
    radial-gradient(120% 150% at 18% -12%,rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 55%),
    repeating-linear-gradient(94deg,rgba(112,88,50,.045) 0 2px,rgba(0,0,0,0) 2px 5px),
    repeating-linear-gradient(3deg,rgba(255,251,240,.05) 0 3px,rgba(0,0,0,0) 3px 8px),
    linear-gradient(152deg,#E0CFAE 0%,#D9C7A6 48%,#CBB58C 100%);
  box-shadow:inset 0 0 0 1px rgba(110,78,30,.20),inset 0 1px 0 rgba(255,255,255,.32),
    inset -10px 0 16px -12px rgba(31,25,12,.30)}
.kenvb .pocket{position:absolute;inset:0;clip-path:polygon(0 0,62% 50%,0 100%);
  background:linear-gradient(115deg,rgba(255,253,246,.13),rgba(110,78,30,.05) 70%)}
.kenvb .seam{position:absolute;left:0;top:0;width:66.9%;height:1px;transform-origin:0 0;
  transform:rotate(21.8deg);background:linear-gradient(90deg,rgba(110,78,30,.34),rgba(110,78,30,.12))}
.kenvb .seam.b{top:auto;bottom:0;transform-origin:0 100%;transform:rotate(-21.8deg)}
.kenvb .hinge{position:absolute;right:0;top:0;bottom:0;width:1px;background:rgba(110,78,30,.30)}
.kenvb .flap{position:absolute;left:84.6%;top:0;bottom:0;width:15.4%;
  clip-path:polygon(0 0,100% 50%,0 100%);
  background:linear-gradient(90deg,#CDB88F 0%,#DBC9A6 14%,#E2D2B1 100%);
  filter:drop-shadow(2px 1px 1.5px rgba(31,25,12,.28))}
.kenvb .flap .liner{position:absolute;inset:0;
  background:url('/work-assets/krupa/mark-building.webp') 0 0/26% auto repeat;opacity:.15;
  filter:grayscale(1) sepia(1) hue-rotate(-8deg) saturate(1.6) brightness(.6)}
.kenvb .cap{position:absolute;left:4.2%;bottom:8.5%;font-family:'Work Sans',sans-serif;font-weight:500;
  font-size:clamp(7px,1.45cqw,10px);letter-spacing:.24em;text-transform:uppercase;color:rgba(110,78,30,.62)}
/* letterhead · A4 210 × 297, cream stock */
.klh{position:relative;aspect-ratio:210/297;border-radius:3px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 20% -6%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 55%),
    linear-gradient(160deg,#FDFAF3 0%,#FAF5E9 52%,#F3EBDA 100%);
  box-shadow:
    inset 0 0 0 1px rgba(110,78,30,.14),
    inset 0 1px 0 rgba(255,255,255,.6),
    0 1px 2px rgba(31,25,12,.10),
    0 8px 18px -6px rgba(31,25,12,.14),
    0 26px 48px -18px rgba(31,25,12,.26)}
.klh .kmark{position:absolute;left:50%;top:5.2%;transform:translateX(-50%);width:17.5%}
.klh .hr{position:absolute;left:9%;right:9%;top:19.6%;height:1px;
  background:linear-gradient(90deg,rgba(138,106,44,0),#8A6A2C 22%,#C9A050 50%,#8A6A2C 78%,rgba(138,106,44,0))}
.klh .body{position:absolute;left:10.5%;right:10.5%;top:24.5%}
.klh .body i{display:block;height:1.05cqw;min-height:3px;border-radius:1px;
  background:rgba(62,50,32,.09);margin-bottom:1.95cqw}
.klh .body i.dk{background:rgba(62,50,32,.16)}
.klh .body .gap{height:2.6cqw}
.klh .wm{position:absolute;right:5.5%;bottom:9.5%;width:31%;opacity:.08;pointer-events:none;user-select:none}
.klh .ft{position:absolute;left:9%;right:9%;bottom:3.8%;text-align:center;
  font-family:'Work Sans',sans-serif;font-size:clamp(6.5px,1.5cqw,9.5px);letter-spacing:.16em;
  text-transform:uppercase;line-height:2;color:#6B6152}
.klh .ft::before{content:"";display:block;width:26%;height:1px;margin:0 auto 1.8cqw;
  background:rgba(110,78,30,.35)}
@media(max-width:760px){
  .kpress{grid-template-columns:1fr;row-gap:34px}
  .kpress .kp-col{gap:34px}
}