/* immadkhan.com. Tokens first; both themes are defined here. */
:root{
  --bg:#EDF0F7;--paper:#FFFFFF;--wash:#F5F7FB;--ink:#141B34;--soft:#4F5775;--faint:#6E7592;--rule:#D8DDEA;
  --accent:#FF6A2B;--accent-ink:#B83E0A;--green:#128A5A;
  --bar:rgba(237,240,247,.88);--shadow:rgba(20,27,52,.5);
  --src-z:#C2413A;--src-s:#2F6FD6;--src-g:#7A4FD0;--src-n:#138A7A;--src-f:#C47A0C;--src-d:#4F5775;
  --f:"Epilogue",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0E1328;--paper:#121833;--wash:#182042;--ink:#E9ECF6;--soft:#AEB5D0;--faint:#8F97B6;--rule:#27305A;
  --accent:#FF7A3D;--accent-ink:#FF9563;--green:#3CC48A;
  --bar:rgba(14,19,40,.86);--shadow:rgba(0,0,0,.7);
  --src-z:#F0776F;--src-s:#6FA2F2;--src-g:#A88AF0;--src-n:#4FC7B5;--src-f:#E6A640;--src-d:#AEB5D0;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0E1328;--paper:#121833;--wash:#182042;--ink:#E9ECF6;--soft:#AEB5D0;--faint:#8F97B6;--rule:#27305A;
  --accent:#FF7A3D;--accent-ink:#FF9563;--green:#3CC48A;
  --bar:rgba(14,19,40,.86);--shadow:rgba(0,0,0,.7);
  --src-z:#F0776F;--src-s:#6FA2F2;--src-g:#A88AF0;--src-n:#4FC7B5;--src-f:#E6A640;--src-d:#AEB5D0;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{background:var(--paper);color:var(--ink);font-family:var(--f);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg{max-width:100%}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:28px}
.skip{position:absolute;left:-9999px;top:0}.skip:focus{left:16px;top:16px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:20}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* top bar */
.bar{position:sticky;top:0;z-index:10;background:var(--bar);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.bar.lined{border-bottom-color:var(--rule)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.me{display:flex;align-items:center;gap:10px;font-weight:760;text-decoration:none;letter-spacing:-.01em}
.me svg{width:30px;height:30px;flex:none}
.bar nav{display:flex;gap:4px;font-size:15px}
.bar nav a{text-decoration:none;color:var(--soft);padding:8px 12px;border-radius:999px;transition:color .2s,background .2s}
.bar nav a:hover{color:var(--ink)}
.bar nav a.on{color:var(--ink);background:var(--wash)}
.bar nav .cta{color:var(--paper);background:var(--ink);font-weight:650;margin-left:6px}
.bar nav .cta:hover,.bar nav .cta.on{color:var(--paper);background:var(--ink)}

/* hero */
.hero-bg{background:var(--bg)}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-block:64px 64px}
.kicker{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
h1{font-size:clamp(38px,4.9vw,64px);line-height:1.02;font-weight:780;letter-spacing:-.037em;margin-top:16px;max-width:16ch}
h1 .soft{color:var(--soft);font-weight:700}
.lede{margin-top:24px;color:var(--soft);max-width:50ch;font-size:19px}
.who{margin-top:18px;font-size:16px;color:var(--soft);max-width:54ch}.who b{color:var(--ink)}
.actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;font:inherit;font-weight:700;font-size:16px;text-decoration:none;border:2px solid var(--ink);cursor:pointer;transition:background .2s,color .2s,transform .2s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{background:color-mix(in srgb,var(--ink) 85%,var(--accent))}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* hero dashboard mock (always dark: it is a screen) */
.dash-col{min-width:0}
.dash{background:#0E1328;color:#DDE1F2;border-radius:20px;border:1px solid #27305A;box-shadow:0 50px 100px -50px var(--shadow);overflow:hidden;font-size:14px}
.dash .top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #27305A}
.dash .top i{width:10px;height:10px;border-radius:50%;background:#2C3663}
.dash .top b{font-weight:650;color:#fff;margin-left:6px}
.dash .top .sim{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#FFB892;border:1px solid #5A3A2C;border-radius:999px;padding:3px 9px}
.dash .sum{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #27305A}
.dash .sum div{padding:12px 16px;border-right:1px solid #27305A}.dash .sum div:last-child{border-right:0}
.dash .sum span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8A93B8}
.dash .sum b{display:block;font-size:22px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.dash .sum b.hot{color:#FF8A57}.dash .sum b.ok{color:#3CC48A}
.issue{padding:16px}
.issue .row1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pill{font-size:11px;font-weight:700;border-radius:6px;padding:3px 8px;letter-spacing:.04em}
.pill.p1{background:#FF6A2B;color:#141B34}
.pill.src{background:#182042;color:#C3CAE6;border:1px solid #27305A}
.issue h2{font-size:19px;line-height:1.25;color:#fff;margin-top:10px;letter-spacing:-.01em;max-width:none}
.issue .why{color:#AEB5D0;font-size:13px;margin-top:4px}
.ev{list-style:none;margin-top:12px;border-left:1px solid #2C3663;padding-left:14px}
.ev li{position:relative;padding:4px 0;font-size:13px;color:#D2D7EE;opacity:1;transform:none;transition:opacity .4s,transform .4s}
.ev li::before{content:"";position:absolute;left:-18px;top:11px;width:7px;height:7px;border-radius:2px;background:var(--c,#8A93B8)}
.ev time{font-family:var(--mono);font-size:11.5px;color:#8A93B8;margin-right:8px}
.js .ev li.pre{opacity:0;transform:translateX(-6px)}
.fixbox{margin-top:14px;background:rgba(21,164,107,.18);border:1px solid rgba(60,196,138,.35);border-radius:12px;padding:12px 14px;color:#E3F4EC;font-size:14px}
.fixbox b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7FE0B3;margin-bottom:3px}
.js .fixbox.pre{opacity:0}
.fixbox{transition:opacity .5s}
.dash .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid #27305A;font-size:12px;color:#8A93B8}
.dash .foot button{font:inherit;font-size:12px;font-weight:650;color:#fff;background:#182042;border:1px solid #2C3663;border-radius:8px;padding:6px 10px;cursor:pointer}
.dash .foot button:hover{border-color:#8A93B8}
.runbook{list-style:decimal;margin:0 16px 14px 34px;font-size:13px;color:#D2D7EE}
.runbook li{padding:2px 0}
.caption{margin-top:12px;font-size:13px;color:var(--faint)}

/* credentials strip */
.creds{border-top:1px solid var(--rule);padding-block:18px 22px}
.creds ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;font-size:14px;color:var(--soft)}
.creds li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.creds li b{color:var(--ink);font-weight:700}
.creds li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--rule);margin-right:14px}
.creds .lab{font-family:var(--mono);font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}

/* sections */
section{padding-block:110px;border-top:1px solid var(--rule)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
section h2,footer h2{font-size:clamp(32px,4.2vw,54px);font-weight:770;letter-spacing:-.036em;line-height:1.03;max-width:20ch;margin-top:10px}
.intro{margin-top:18px;color:var(--soft);max-width:60ch}

/* career */
.countries{margin-top:34px;display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink)}
.countries div{padding:16px 16px 0 0}
.countries b{display:block;font-size:20px;font-weight:740;letter-spacing:-.01em}
.countries span{font-size:14px;color:var(--soft)}
.career{margin-top:44px;list-style:none;border-top:1px solid var(--rule)}
.career li{display:grid;grid-template-columns:180px 1fr auto;gap:20px;padding-block:22px;border-bottom:1px solid var(--rule);align-items:baseline}
.career .yr{color:var(--soft);font-size:15px;font-variant-numeric:tabular-nums}
.career p{color:var(--soft);font-size:16px;margin-top:2px;max-width:62ch}
.career .place{font-family:var(--mono);font-size:12px;color:var(--faint);white-space:nowrap}
.career li.now .yr{color:var(--accent-ink);font-weight:700}

/* case studies */
.index{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule)}
.index a{padding:18px 16px 0 0;text-decoration:none;font-weight:650;font-size:16px}
.index a span{display:block;color:var(--soft);font-weight:400;font-size:14px}
.index a:hover{color:var(--accent-ink)}
.case{padding-top:84px;margin-top:84px;border-top:1px solid var(--rule)}
.case:first-of-type{margin-top:56px}
.case .head{display:grid;grid-template-columns:100px 1fr;gap:20px}
.case .no{font-size:15px;color:var(--soft);font-weight:650;padding-top:10px}
.case h3.title{font-size:clamp(26px,3.2vw,40px);font-weight:760;letter-spacing:-.03em;line-height:1.08;max-width:24ch}
.case .ctx{color:var(--soft);font-size:15px;margin-top:8px}
.case .ctx b{color:var(--ink);font-weight:650}
.body{margin-top:40px;display:grid;grid-template-columns:100px 1fr 1fr;gap:22px 44px}
.body .col{grid-column:2}
.body h4{font-size:13px;font-weight:750;color:var(--accent-ink);letter-spacing:.08em;text-transform:uppercase}
.body p{margin-top:6px}
.body ul{margin-top:8px;padding-left:18px}.body li{margin:4px 0}
.body a{color:var(--accent-ink);font-weight:650}
.fig{grid-column:3;grid-row:1 / span 3;background:var(--wash);border:1px solid var(--rule);border-radius:16px;padding:20px;align-self:start;color:var(--ink)}
.fig svg{width:100%;height:auto;display:block;overflow:visible}
.fig .hl{stroke:var(--accent-ink)}.fig text{fill:currentColor;font-family:var(--f)}.fig text.hl{fill:var(--accent-ink);stroke:none}
.fig figcaption{font-size:14px;color:var(--soft);margin-top:10px}
.draw path,.draw rect,.draw circle{stroke-dasharray:var(--len,600);stroke-dashoffset:0;transition:stroke-dashoffset 1.6s ease}
.js .draw:not(.in) path,.js .draw:not(.in) rect,.js .draw:not(.in) circle{stroke-dashoffset:var(--len,600)}
.draw .dash{stroke-dasharray:5 5!important;stroke-dashoffset:0!important;transition:opacity .8s .8s}
.js .draw:not(.in) .dash{opacity:0}
.draw text{transition:opacity .6s .9s}.js .draw:not(.in) text{opacity:0}
.stack{grid-column:2 / span 2;display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.stack span{font-size:13px;border:1px solid var(--rule);border-radius:999px;padding:4px 12px;color:var(--soft)}

/* dashboard walk-through */
.sn{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;margin-top:56px;align-items:start}
.steps{list-style:none;display:grid;gap:14px}
.step{display:block;width:100%;text-align:left;background:transparent;border:1px solid var(--rule);border-radius:18px;padding:22px 22px 22px 60px;position:relative;font:inherit;color:inherit;cursor:pointer;transition:border-color .3s,background .3s}
.step .n{position:absolute;left:20px;top:22px;width:26px;height:26px;border-radius:50%;border:2px solid var(--rule);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--faint);transition:all .3s}
.step h3{font-size:20px;font-weight:730;line-height:1.2}
.step p{color:var(--soft);font-size:16px;margin-top:6px}
.step[aria-pressed="true"]{border-color:var(--ink);background:var(--wash)}
.step[aria-pressed="true"] .n{background:var(--accent);border-color:var(--accent);color:#141B34}
.console-wrap{position:sticky;top:96px}
.console{background:#0E1328;color:#DDE1F2;border-radius:22px;border:1px solid #27305A;overflow:hidden;box-shadow:0 40px 80px -50px var(--shadow)}
.console .head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #27305A;font-size:13px}
.console .head b{font-weight:650;color:#fff}
.console .head .t{font-family:var(--mono);font-size:12px;color:#8A93B8}
.meter{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #27305A}
.meter div{padding:14px 18px;border-right:1px solid #27305A}.meter div:last-child{border-right:0}
.meter span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8A93B8}
.meter b{display:block;font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px;color:#fff;transition:color .3s}
.meter b.ok{color:#3CC48A}.meter b.hot{color:#FF8A57}
.stage{position:relative;height:340px;padding:16px 18px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;height:100%;transition:opacity .6s}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;background:#182042;border:1px solid #27305A;border-radius:7px;padding:4px 7px;color:#C3CAE6;transition:opacity .35s,transform .35s,background .4s,border-color .4s,filter .4s}
.chip i{width:7px;height:7px;border-radius:2px;background:var(--c)}
.js .chip.pre{opacity:0;transform:translateY(6px)}
[data-step="1"] .chip:not(.rel),[data-step="2"] .chip,[data-step="3"] .chip{opacity:.16;filter:saturate(.3)}
[data-step="1"] .chip.rel{background:#3A2418;border-color:#FF7A3D;color:#fff}
.card{position:absolute;left:18px;right:18px;top:50%;transform:translate(0,-44%) scale(.97);opacity:0;visibility:hidden;background:#182042;border:1px solid #3A4675;border-radius:16px;padding:18px;transition:opacity .45s,transform .45s,visibility .45s}
.card .t{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#FFB892;font-weight:650}
.card h4{font-size:19px;line-height:1.25;margin-top:4px;color:#fff}
.card p{font-size:14px;color:#C3CAE6;margin-top:8px}
.card .fix{margin-top:12px;background:rgba(21,164,107,.2);border-radius:10px;padding:10px 12px;font-size:14px;color:#E3F4EC}
.card ol{margin:10px 0 0 18px;font-size:14px;color:#E3F4EC}
.card ol li{padding:2px 0}
[data-step="2"] .card.diag,[data-step="3"] .card.plan{opacity:1;visibility:visible;transform:translate(0,-50%) scale(1)}
.console .foot{padding:10px 18px;border-top:1px solid #27305A;font-size:12px;color:#8A93B8}

/* principles */
.prin{margin-top:50px;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink)}
.prin li{padding:26px 28px 0 0}
.prin li+li{padding-left:28px;border-left:1px solid var(--rule)}
.prin .k{font-family:var(--mono);font-size:12px;color:var(--faint)}
.prin h3{font-size:24px;font-weight:750;letter-spacing:-.02em;line-height:1.15;margin-top:8px}
.prin p{color:var(--soft);font-size:16px;margin-top:10px}

/* ventures */
.ven{margin-top:50px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.vcard{background:var(--wash);border:1px solid var(--rule);border-radius:24px;padding:32px}
.vcard .k{font-size:14px;font-weight:650;color:var(--accent-ink)}
.vcard h3{font-size:30px;font-weight:760;letter-spacing:-.025em;line-height:1.1;margin-top:6px}
.vcard p{color:var(--soft);font-size:16px;margin-top:12px}
.vcard ul{list-style:none;margin-top:18px;border-top:1px solid var(--rule)}
.vcard li{padding:12px 0;border-bottom:1px solid var(--rule);font-size:15px;color:var(--soft)}
.vcard li b{color:var(--ink)}
.vcard a{color:var(--accent-ink);font-weight:650}

/* insights */
.posts{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none}
.posts a{display:flex;flex-direction:column;height:100%;background:var(--wash);border:1px solid var(--rule);border-radius:18px;padding:24px;text-decoration:none;transition:border-color .2s}
.posts a:hover{border-color:var(--ink)}
.posts .meta{font-size:13px;color:var(--soft)}
.posts h3{font-size:19px;line-height:1.25;font-weight:720;margin-top:8px}
.posts p{font-size:15px;color:var(--soft);margin-top:8px}
.all{display:inline-block;margin-top:26px;color:var(--accent-ink);font-weight:700}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.about p{color:var(--soft);margin-top:16px}
.about table{width:100%;border-collapse:collapse;font-size:16px;margin-top:16px}
.about th,.about td{padding-block:12px;border-bottom:1px solid var(--rule);vertical-align:top;text-align:left}
.about th{color:var(--soft);font-weight:400;width:36%;padding-right:16px}

/* footer */
footer{padding-block:110px calc(64px + env(safe-area-inset-bottom,0px));background:#0E1328;color:#fff}
footer .eyebrow{color:#FFB892}
footer h2{color:#fff}
footer .intro{color:#B9C0DC}
.mailrow{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mailbox{display:flex;align-items:center;gap:4px;background:#182042;border:1px solid #27305A;border-radius:999px;padding:6px 6px 6px 20px;max-width:100%}
.mailbox a{color:#fff;text-decoration:none;font-weight:650;font-size:18px;overflow-wrap:anywhere}
.mailbox button{font:inherit;font-size:14px;font-weight:650;border:0;border-radius:999px;padding:9px 14px;background:#FF7A3D;color:#141B34;cursor:pointer;margin-left:10px;flex:none}
.mailbox button.ok{background:#3CC48A}
footer .btn,footer .btn.ghost{border-color:#fff;color:#fff;background:transparent}
footer .btn:hover,footer .btn.ghost:hover{background:#fff;color:#141B34}
.fine{margin-top:64px;padding-top:24px;border-top:1px solid #27305A;color:#9CA4C6;font-size:14px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.fine .brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700}
.fine .brand svg{width:64px;height:auto}
.fine button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* responsive */
@media (max-width:1020px){
  .sn{grid-template-columns:1fr;gap:28px}
  .console-wrap{position:static;order:-1}
}
@media (max-width:960px){
  .bar nav a:not(.cta){display:none}
  .hero{grid-template-columns:1fr;padding-block:40px 56px;gap:40px}
  .ven,.posts,.about,.prin{grid-template-columns:1fr}
  .prin li,.prin li+li{padding:22px 0;border-left:0;border-bottom:1px solid var(--rule)}
  .index,.countries{grid-template-columns:1fr 1fr}
  .countries div{padding-bottom:12px}
  .case .head,.body{grid-template-columns:1fr}
  .body .col,.fig,.stack{grid-column:1;grid-row:auto}
  .career li{grid-template-columns:1fr;gap:2px}
  section{padding-block:80px}
}
@media (max-width:480px){
  .wrap{padding-inline:18px}
  body{font-size:17px}
  .lede{font-size:17px}
  .index{grid-template-columns:1fr}
  .stage{height:380px}
  .dash .sum div{padding:10px 12px}
  .dash .sum b{font-size:19px}
  .mailbox{width:100%;justify-content:space-between}
  .mailbox a{font-size:15px}
  .creds li+li::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{
  @page{margin:16mm}
  body{background:#fff;color:#000;font-size:11pt}
  .bar,.dash-col,.actions,.index,.fig,.console-wrap,#insights,.mailbox button,.fine button,.skip,.stack,#dashboard{display:none!important}
  .hero-bg,footer{background:#fff;color:#000}
  .hero{display:block;padding:0}
  h1{font-size:22pt}section h2,footer h2{font-size:16pt;color:#000}
  section{padding-block:14pt;border-top:1px solid #999;break-inside:avoid-page}
  .case{padding-top:10pt;margin-top:10pt}.body{display:block}.body .col{margin-top:6pt}
  .prin,.ven,.about,.countries{display:block}.vcard{border:0;padding:6pt 0;background:none}
  footer{padding:10pt 0}.mailbox{background:none;border:0;padding:0}.mailbox a,footer .intro,.fine,.fine .brand{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
}
.ev li.sz{--c:var(--src-z)}.ev li.sg{--c:var(--src-g)}.ev li.sd{--c:#AEB5D0}.ev li.sn2{--c:var(--src-n)}
.me .mk{width:30px;height:30px;flex:none;border-radius:8px;box-shadow:0 0 0 1px var(--rule)}
.fine .brand .mk{width:64px;height:auto}
.nf{padding-block:120px 140px}
.mini-creds{display:none;margin-top:18px;font-size:14px;color:var(--soft)}
.mini-creds b{color:var(--ink)}
@media (max-width:960px){.mini-creds{display:block}}