/* Kautilya motion: a quiet "ledger signature" set. Short, small, one idea at a time. */
:root{--k-ease:cubic-bezier(.2,.7,.2,1);--k-spring:cubic-bezier(.34,1.45,.64,1);--k-stamp:cubic-bezier(.2,.9,.3,1.2)}
@keyframes k-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes k-page{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes k-stamp{0%{opacity:0;transform:scale(1.7) rotate(-9deg)}60%{opacity:1;transform:scale(.96) rotate(-1deg)}100%{opacity:1;transform:scale(1) rotate(var(--rot,0deg))}}
@keyframes k-drawer{from{transform:translateX(-100%);opacity:0}to{transform:none;opacity:1}}
@keyframes k-digit{from{opacity:0;transform:translateY(8px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes k-badge{from{opacity:0;transform:scale(0);filter:blur(2px)}to{opacity:1;transform:scale(1);filter:none}}
@keyframes k-draw{to{stroke-dashoffset:0}}
@keyframes k-ring{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}

/* skip link */
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600;transition:top .15s}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* 1. stamp: the Kautilya mark signs the page */
.wordmark .mk{animation:k-stamp .32s var(--k-stamp) .12s backwards}
.js-on .sys.in .num{--rot:-2deg;transform:rotate(-2deg);animation:k-stamp .32s var(--k-stamp) backwards}

/* 4. page transition: hero children cascade */
.js-on .hero.in .wrap>*,.js-on .dhero.in>*{animation:k-page .42s var(--k-ease) backwards}
.js-on .hero.in .wrap>:nth-child(2),.js-on .dhero.in>:nth-child(2){animation-delay:50ms}
.js-on .hero.in .wrap>:nth-child(3),.js-on .dhero.in>:nth-child(3){animation-delay:100ms}
.js-on .hero.in .wrap>:nth-child(4),.js-on .dhero.in>:nth-child(4){animation-delay:150ms}
.js-on .hero.in .wrap>:nth-child(5),.js-on .dhero.in>:nth-child(5){animation-delay:200ms}
.js-on .hero.in .wrap>:nth-child(n+6),.js-on .dhero.in>:nth-child(n+6){animation-delay:240ms}
.js-on .hero.in .hero-lower>*{animation:k-page .5s var(--k-ease) .18s backwards}
.js-on .hero.in .hero-photo{animation-delay:.3s}

/* 3. stagger-rise for grids once their section is revealed (cap at 6th child) */
.js-on .reveal.in :is(.pf-grid,.stats,.flow,.foot-cols,.faq-list)>*{animation:k-rise .4s ease-out backwards}
.js-on .reveal.in :is(.pf-grid,.stats,.flow,.faq-list)>:nth-child(2){animation-delay:45ms}
.js-on .reveal.in :is(.pf-grid,.stats,.flow,.faq-list)>:nth-child(3){animation-delay:90ms}
.js-on .reveal.in :is(.pf-grid,.stats,.flow,.faq-list)>:nth-child(4){animation-delay:135ms}
.js-on .reveal.in :is(.pf-grid,.stats,.flow,.faq-list)>:nth-child(5){animation-delay:180ms}
.js-on .reveal.in :is(.pf-grid,.stats,.flow,.faq-list)>:nth-child(n+6){animation-delay:225ms}
.case-study .sys:hover{transform:translateY(-2px)}

/* 10. press feedback + 150ms interaction transitions */
a,button,summary,.btn{transition:color .15s,background-color .15s,border-color .15s,box-shadow .15s,transform .15s}
.btn:active{transform:translateY(.5px) scale(.985)}

/* 6. mobile drawer + 24. icon swap on the menu button */
@media(max-width:640px){.nav-links.open{animation:k-drawer .26s var(--k-ease)}}
.hamb{position:relative;width:40px;height:40px;padding:0;color:var(--ink)}
.hamb svg{position:absolute;inset:0;margin:auto;transition:opacity .25s,transform .25s,filter .25s}
.hamb .i-x,.hamb[aria-expanded="true"] .i-bars{opacity:0;transform:scale(.25);filter:blur(2px)}
.hamb[aria-expanded="true"] .i-x{opacity:1;transform:none;filter:none}

/* 17. digit pop-in for headline figures */
.stat .v .ch{display:inline-block}
.js-on .reveal.in .stat .v .ch{animation:k-digit .5s var(--k-spring) backwards;animation-delay:calc(var(--i,0)*70ms)}

/* 18. badge pop + 26. tooltip */
.js-on .reveal.in .status{animation:k-badge .5s var(--k-spring) backwards}
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);white-space:nowrap;font-size:12px;font-weight:500;letter-spacing:0;color:#fff;background:var(--ink);padding:6px 10px;border-radius:6px;opacity:0;pointer-events:none;z-index:20;transition:opacity .15s,transform .15s}
@media(hover:hover){[data-tip]:hover::after{opacity:1;transform:translate(-50%,0);transition-delay:.35s}}

/* 21. success tick draws itself */
.tick{display:inline-block;vertical-align:-3px;margin-right:2px}
.js-on .tick path{stroke-dasharray:24;stroke-dashoffset:24}
.js-on .hero.in .tick path{animation:k-draw .38s ease-out .5s forwards}

/* 25. accordion: native <details> with animated height */
.faq-list{max-width:860px;margin-top:46px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);interpolate-size:allow-keywords}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 2px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{font-size:clamp(17px,2vw,20px);font-weight:600;letter-spacing:-.01em;line-height:1.35}
.faq-item summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--k-ease)}
.faq-item[open] summary::after{transform:rotate(45deg) scale(-1) translate(2px,2px)}
.faq-item summary:hover h3{color:var(--gold)}
.faq-item p{margin:0;padding:0 2px 24px;max-width:68ch;font-size:16.5px;line-height:1.75}
.faq-item::details-content{block-size:0;overflow:clip;transition:block-size .28s var(--k-ease),content-visibility .28s allow-discrete}
.faq-item[open]::details-content{block-size:auto}

/* closing panel carries the mark */
.cta-box::after{content:"";position:absolute;right:48px;bottom:-30px;width:220px;height:220px;background:url(kautilya-mark-white.svg) center/contain no-repeat;opacity:.07;pointer-events:none}
@media(max-width:640px){.cta-box::after{width:150px;height:150px;right:12px}}

/* respect reduced motion: everything visible, nothing moves */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js-on .reveal{opacity:1;transform:none}
  .tick path{stroke-dashoffset:0}
}
.no-motion,.no-motion *{animation:none!important}

/* FAQ: heading column left, questions right, one shared grid */
#faq{border-top:1px solid var(--line)}
.faq-wrap{display:grid;grid-template-columns:minmax(240px,340px) minmax(0,1fr);gap:64px;align-items:start}
.faq-head{position:sticky;top:110px}
.faq-wrap .faq-list{margin-top:0;max-width:none}
.faq-item summary{padding:24px 0}
.faq-item p{padding:0 40px 26px 0}
@media(max-width:860px){.faq-wrap{grid-template-columns:1fr;gap:30px}.faq-head{position:static}.faq-item p{padding-right:0}}