/* ============================================================
   KONSTRAI DESIGN SYSTEM
   Dual mode, light dominant. Warm slate + oxidised lime.
   ============================================================ */

:root {
  /* light, dominant */
  --base:#EBEAE6; --elev:#E3E2DC; --card:#F7F6F3;
  --hair:#D4D3CD; --strong:#BCBBB1;
  --ink:#1E1F1C; --sec:#4F4F49; --mut:#94948B;
  --deep:#566E1C; --mid:#7E9A2E; --lime:#BFD24A; --olive:#36421F;
  --btnbg:#1E1F1C; --btnfg:#BFD24A;
  --retbg:#1E1F1C; --retfg:#F7F6F3; --retsec:#AEAEA4;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --sharp:cubic-bezier(0.4,0,0.2,1);
  --maxw:1140px; --gut:44px;
}
html[data-mode="dark"] {
  --base:#16170F; --elev:#1D1E15; --card:#23241A;
  --hair:#32331F; --strong:#44462C;
  --ink:#ECEBDF; --sec:#B6B5A4; --mut:#84847A;
  --deep:#9DB84A; --mid:#A8C24E; --lime:#BFD24A; --olive:#A8C24E;
  --btnbg:#BFD24A; --btnfg:#16170F;
  --retbg:#1D1E15; --retfg:#ECEBDF; --retsec:#9A9A8E;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--base);transition:background .45s var(--sharp);-webkit-font-smoothing:antialiased;}
body{font-family:'Space Grotesk',system-ui,sans-serif;background:var(--base);color:var(--ink);line-height:1.5;transition:background .45s var(--sharp),color .45s var(--sharp);}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.12em;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);}
a{color:inherit;text-decoration:none;}
::selection{background:var(--lime);color:#1E1F1C;}

/* progress + loader */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--lime);z-index:120;transition:width .08s linear;}
#loader{position:fixed;inset:0;background:var(--base);z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .5s var(--sharp),visibility .5s,background .45s var(--sharp);}
#loader.done{opacity:0;visibility:hidden;}
.loadmark{font-size:30px;font-weight:600;letter-spacing:-.01em;color:var(--ink);opacity:0;transform:translateY(8px);animation:markIn .6s var(--ease) forwards;}
.loadline{height:2px;width:0;background:var(--lime);margin-top:18px;animation:lineGrow .7s var(--ease) .4s forwards;}
@keyframes markIn{to{opacity:1;transform:translateY(0);}}
@keyframes lineGrow{to{width:200px;}}

/* nav */
nav{position:sticky;top:0;z-index:80;background:var(--base);border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center;padding:18px var(--gut);transition:background .45s var(--sharp),border-color .45s var(--sharp),padding .3s var(--sharp);}
nav.shrunk{padding:11px var(--gut);}
.wordmark{font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--ink);}
.navright{display:flex;align-items:center;gap:26px;}
.navlinks{display:flex;gap:20px;font-size:10px;position:relative;}
.navlinks a{color:var(--sec);position:relative;padding-bottom:5px;transition:color .2s;}
.navlinks a:hover{color:var(--ink);}
.navlinks a.active{color:var(--deep);}
#navind{position:absolute;bottom:0;height:2px;background:var(--mid);transition:left .32s var(--ease),width .32s var(--ease);opacity:0;}
.toggle{font-size:10px;cursor:pointer;user-select:none;}
.toggle .on{color:var(--deep);}
.toggle .off{color:var(--mut);}
.menubtn{display:none;font-size:10px;cursor:pointer;color:var(--sec);}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}
.d1{transition-delay:.06s;}.d2{transition-delay:.12s;}.d3{transition-delay:.18s;}.d4{transition-delay:.24s;}

/* hero */
.hero{padding:92px 0 70px;}
.kicker{font-size:11px;color:var(--mut);margin-bottom:22px;display:flex;align-items:center;gap:6px;}
.cursor{display:inline-block;width:7px;height:13px;background:var(--lime);animation:blink 1.1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
h1{font-size:clamp(33px,5vw,51px);font-weight:600;line-height:1.06;letter-spacing:-.025em;max-width:790px;margin-bottom:24px;}
h1 .w{display:inline-block;opacity:0;transform:translateY(22px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
h1.in .w{opacity:1;transform:translateY(0);}
.sub{font-size:clamp(16px,2vw,18px);line-height:1.55;max-width:620px;color:var(--sec);}
.heroline{height:2px;width:0;background:var(--lime);margin-top:40px;transition:width .7s var(--ease) .2s;}
.heroline.in{width:100%;max-width:760px;}
.strip{margin-top:34px;font-size:10px;color:var(--mut);}
.strip i{opacity:.45;font-style:normal;margin:0 6px;}

/* buttons */
.btn{display:inline-block;margin-top:38px;padding:13px 26px;border-radius:2px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:12px;background:var(--btnbg);color:var(--btnfg);position:relative;overflow:hidden;transition:background .45s var(--sharp),color .45s var(--sharp);}
.btn s{position:relative;z-index:2;text-decoration:none;}
.btn::before{content:"";position:absolute;inset:0;background:var(--mid);transform:translateX(-101%);transition:transform .32s var(--sharp);z-index:1;}
.btn:hover::before{transform:translateX(0);}

/* sections */
section{padding:70px 0;}
.sectlabel{font-size:11px;color:var(--mut);margin-bottom:18px;}
h2{font-size:clamp(25px,3.4vw,32px);font-weight:600;letter-spacing:-.02em;margin-bottom:34px;max-width:700px;line-height:1.12;}
.lead{font-size:16px;line-height:1.65;color:var(--sec);max-width:680px;margin-bottom:22px;}
.lead.tight{margin-bottom:14px;}
.small{font-size:13px;color:var(--mut);max-width:640px;line-height:1.6;}
.pull{margin:48px 0 8px;font-size:clamp(21px,2.8vw,27px);font-weight:600;line-height:1.24;letter-spacing:-.01em;max-width:720px;color:var(--olive);}

/* stat band */
.stats{display:flex;gap:54px;margin:8px 0 18px;flex-wrap:wrap;}
.stat .num{font-size:clamp(32px,4.4vw,42px);font-weight:600;letter-spacing:-.02em;color:var(--deep);}
.stat .lab{font-size:10px;color:var(--mut);margin-top:6px;max-width:150px;}

/* cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.cards.three{grid-template-columns:repeat(3,1fr);}
.card{background:var(--card);border:1px solid var(--hair);border-radius:3px;padding:26px;position:relative;transition:border-color .25s var(--sharp),background .45s var(--sharp);min-height:178px;display:flex;flex-direction:column;}
.card:hover{border-color:var(--strong);}
.cardnum{position:absolute;top:22px;right:24px;font-size:10px;color:var(--mut);font-family:'IBM Plex Mono',monospace;}
.cardlabel{font-size:10px;color:var(--deep);margin-bottom:14px;transition:color .2s;font-family:'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;}
.card h3{font-size:17px;font-weight:600;margin-bottom:10px;letter-spacing:-.01em;display:inline-block;position:relative;align-self:flex-start;}
.card h3::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:var(--mid);transition:width .22s var(--sharp);}
.card:hover h3::after{width:100%;}
.card p{font-size:13px;line-height:1.5;color:var(--sec);}
.viewcue{font-size:10px;color:var(--mut);margin-top:auto;padding-top:16px;}
.card.ret{background:var(--retbg);border-color:var(--retbg);}
html[data-mode="dark"] .card.ret{border-color:var(--strong);}
.card.ret .cardlabel{color:var(--lime);}
.card.ret h3{color:var(--retfg);}
.card.ret p{color:var(--retsec);}
.card.ret .cardnum,.card.ret .viewcue{color:var(--mut);}

/* foundation marquee */
.foundation{padding:24px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);overflow:hidden;white-space:nowrap;transition:border-color .45s var(--sharp);}
.marquee{display:inline-block;animation:scrollx 30s linear infinite;}
.marquee span{font-size:11px;color:var(--mut);margin:0 24px;font-family:'IBM Plex Mono',monospace;letter-spacing:.12em;}
.marquee span b{color:var(--deep);font-weight:500;}
@keyframes scrollx{to{transform:translateX(-50%);}}

/* flow */
.flowsection{background:var(--elev);transition:background .45s var(--sharp);}
.flowtrack{position:relative;margin-top:46px;}
.flowbase{position:absolute;top:9px;left:0;height:2px;width:100%;background:var(--hair);}
.flowfill{position:absolute;top:9px;left:0;height:2px;width:0;background:var(--mid);transition:width 1.5s var(--ease);}
.flowfill.in{width:100%;}
.pulse{position:absolute;top:5px;left:0;width:10px;height:10px;border-radius:50%;background:var(--lime);opacity:0;}
.pulse.run{animation:pulseMove 1.5s var(--ease) forwards;}
@keyframes pulseMove{0%{opacity:1;left:0;}90%{opacity:1;}100%{left:100%;opacity:0;}}
.stages{display:flex;position:relative;gap:0;}
.stage{flex:1;}
.dot{width:20px;height:20px;border-radius:50%;background:var(--elev);border:2px solid var(--hair);position:relative;z-index:2;transition:border-color .3s var(--sharp),background .3s var(--sharp);}
.stage.lit .dot{border-color:var(--mid);background:var(--lime);}
.stagebody{margin-top:18px;opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease),transform .4s var(--ease);padding-right:18px;}
.stage.lit .stagebody{opacity:1;transform:translateY(0);}
.stagelabel{font-size:9px;color:var(--mut);margin-bottom:7px;}
.stagename{font-size:16px;font-weight:600;margin-bottom:6px;letter-spacing:-.01em;}
.stagedeliv{font-size:12px;line-height:1.45;color:var(--sec);}
.replay{margin-top:46px;font-size:10px;color:var(--deep);cursor:pointer;user-select:none;border:1px solid var(--hair);display:inline-block;padding:9px 16px;border-radius:2px;transition:border-color .2s;}
.replay:hover{border-color:var(--strong);}

/* service page blocks */
.svc{padding:54px 0;border-top:1px solid var(--hair);}
.svc:first-of-type{border-top:none;}
.covers{list-style:none;margin:22px 0 26px;}
.covers li{font-size:14px;color:var(--sec);padding:9px 0;border-bottom:1px solid var(--hair);display:flex;gap:12px;}
.covers li::before{content:"/";color:var(--deep);font-family:'IBM Plex Mono',monospace;}
.why{font-size:15px;font-weight:600;color:var(--deep);max-width:620px;line-height:1.4;}
.crosslinks{display:flex;gap:40px;flex-wrap:wrap;padding:48px 0 0;}
.xlink{max-width:300px;}
.xlink .xl{font-size:10px;color:var(--mut);margin-bottom:8px;font-family:'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;}
.xlink p{font-size:14px;color:var(--sec);line-height:1.45;}
.xlink a{color:var(--deep);position:relative;}
.xlink a:hover{text-decoration:underline;}

/* engage */
.engage{border-top:1px solid var(--hair);}
.engage .small{margin-top:14px;}
.engage .ph{font-size:10px;color:var(--mut);margin-top:26px;font-family:'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;}

/* footer */
footer{border-top:1px solid var(--hair);padding:40px 0 50px;transition:border-color .45s var(--sharp);}
.footrow{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:18px;}
.foottag{font-size:10px;color:var(--mut);font-family:'IBM Plex Mono',monospace;letter-spacing:.12em;}
.footnav{font-size:10px;color:var(--mut);margin-top:22px;display:flex;gap:18px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;letter-spacing:.12em;}
.footnav a:hover{color:var(--ink);}
.copyr{font-size:10px;color:var(--mut);margin-top:18px;}

/* contact */
.contactline{font-size:10px;color:var(--mut);margin-top:24px;font-family:'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;}

/* ============================================================
   v2 additions — CTAs, system map, services page
   ============================================================ */

/* nav cta */
.navcta{font-size:10px;color:var(--deep);border:1px solid var(--hair);padding:8px 13px;border-radius:2px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.1em;transition:border-color .2s,color .2s;}
.navcta:hover{border-color:var(--deep);color:var(--ink);}

/* buttons */
.btn span{position:relative;z-index:2;text-decoration:none;}
.btnrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:36px;}
.btnrow .btn{margin-top:0;}
.btn.ghost{background:transparent;color:var(--deep);border:1px solid var(--hair);}
.btn.ghost::before{background:var(--card);}
.btn.ghost:hover{color:var(--ink);}
.btn.ghost:hover{border-color:var(--strong);}

/* system map — "entered once, flows everywhere" */
.systemflow{background:var(--elev);transition:background .45s var(--sharp);}
.sysmap{display:grid;grid-template-columns:1fr auto 1.15fr auto 1fr;gap:16px;align-items:center;margin-top:44px;}
.syscol{display:flex;flex-direction:column;gap:9px;}
.syslab{font-size:10px;color:var(--mut);margin-bottom:5px;font-family:'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;}
.syschip{background:var(--card);border:1px solid var(--hair);border-radius:3px;padding:12px 14px;font-size:13px;color:var(--sec);transition:border-color .25s var(--sharp),background .45s var(--sharp);}
.syschip.out{border-left:2px solid var(--mid);color:var(--ink);}
.sysarrow{color:var(--mid);font-size:20px;line-height:1;text-align:center;}
.hubcard{background:var(--lime);border-radius:4px;padding:24px 20px;}
.hubname{font-size:19px;font-weight:600;color:#1E1F1C;letter-spacing:-.01em;}
.hubsub{font-size:10px;color:#36421F;margin-top:9px;font-family:'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;line-height:1.5;}

/* services page */
.svcblock{padding:64px 0;border-top:1px solid var(--hair);}
.svcblock:first-of-type{border-top:none;}
.modetag{font-size:10px;color:var(--deep);font-family:'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;margin-bottom:13px;}
.svchead h2{margin-bottom:18px;}
.svcsub{margin-top:42px;padding-top:34px;border-top:1px solid var(--hair);}
.svcsub:first-of-type{margin-top:34px;}
.svcsub h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:14px;}
.outcome{margin-top:20px;font-size:12px;color:var(--mut);font-family:'IBM Plex Mono',monospace;letter-spacing:.04em;line-height:1.6;}
.outcome b{color:var(--deep);font-weight:500;}
.svcjump{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px;}
.svcjump a{font-size:10px;color:var(--sec);border:1px solid var(--hair);padding:9px 14px;border-radius:2px;font-family:'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;transition:border-color .2s,color .2s;}
.svcjump a:hover{border-color:var(--deep);color:var(--ink);}

/* differentiation cards */
.difflist{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:7px;}
.difflist li{font-size:12.5px;color:var(--sec);padding-left:14px;position:relative;line-height:1.45;}
.difflist li::before{content:"/";position:absolute;left:0;color:var(--deep);font-family:'IBM Plex Mono',monospace;}
.card.ret .difflist li{color:var(--retsec);}
.card.ret .difflist li::before{color:var(--lime);}
.card.tall{min-height:230px;}

/* vision / mission band */
.vm{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px;}
.vmcard{background:var(--card);border:1px solid var(--hair);border-radius:3px;padding:30px 28px;transition:border-color .25s var(--sharp),background .45s var(--sharp);}
.vmcard .vlab{font-size:10px;color:var(--deep);font-family:'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;}
.vmcard p{font-size:16px;line-height:1.6;color:var(--sec);}

/* responsive */
@media(max-width:760px){
  .vm{grid-template-columns:1fr;}
  .sysmap{grid-template-columns:1fr;gap:12px;}
  .sysarrow{transform:rotate(90deg);justify-self:center;margin:2px 0;}
  .navcta{display:none;}
}
@media(max-width:920px){
  .cards,.cards.three{grid-template-columns:1fr 1fr;}
  .stages{flex-direction:column;gap:24px;}
  .flowbase,.flowfill,.pulse{display:none;}
  .dot{display:none;}
  .stagebody{margin-top:0;opacity:1;transform:none;}
}
@media(max-width:680px){
  :root{--gut:22px;}
  .navlinks{display:none;}
  .menubtn{display:block;}
  .cards,.cards.three{grid-template-columns:1fr;}
  .stats{gap:28px;}
  nav.open .navlinks{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--base);flex-direction:column;padding:16px var(--gut);border-bottom:1px solid var(--hair);gap:14px;}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;}
  .reveal{opacity:1;transform:none;}
  h1 .w{opacity:1;transform:none;}
  #loader{display:none;}
  .marquee{animation:none;}
  .cursor{animation:none;}
}