/* Direction A: Zoom out. One violet token, followed from a single decision to 100M+ people.
   Type scale (tiers differ in at least two of size, weight, colour):
   display  Inter Tight 900  clamp(88,15vw,224) ink
   h2       Inter Tight 800  clamp(40,5.2vw,76)  ink
   cap      Inter Tight 800  clamp(34,4.2vw,64)  ink
   h3       Inter Tight 700  clamp(22,1.9vw,28)  ink
   lead     Inter Tight 900  clamp(56,6vw,96)    ink
   body     Inter 400 17/1.6  ink2
   meta     Inter 500 14/1.45 mute
   eyebrow  Inter 600 13      ink2 */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#FFFFFF;--ink:#0E0F13;--ink2:#474A54;--mute:#6B6E78;--rule:#E7E8EC;--soft:#F5F5F7;
  --v:#5B3DF5;--v-ink:#4A2EE0;
  --pad:clamp(20px,5.2vw,96px);
  --sh:0 1px 2px rgba(14,15,19,.05),0 12px 32px -12px rgba(14,15,19,.14);
}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html.splashing{overflow:hidden}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img{display:block}
.sq{display:inline-block;width:.5em;height:.5em;background:var(--v);border-radius:2px;flex:none}

/* Splash: see site.css, "Splash (4 Nov 2026, founder review)" */

/* Progress */
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none}
.progress span{display:block;height:100%;width:100%;background:var(--v);transform-origin:0 50%;transform:scaleX(0)}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:16px var(--pad);transition:background .3s,box-shadow .3s}
.nav.solid{background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--rule)}
.mark{display:inline-flex;align-items:flex-start;gap:2px;font:900 22px/1 'Inter Tight',Inter,system-ui,sans-serif;letter-spacing:-.05em}
.mark .sq{width:7px;height:7px;margin-top:1px}
.nav .mark{justify-self:start}.nav .btn{justify-self:end}
.nav-links{display:flex;gap:32px;font:500 15px Inter,system-ui,sans-serif;color:var(--ink2)}
.nav-links a{position:relative;padding:4px 0}
.nav-links a::after,.lnk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.lnk:hover::after{transform:scaleX(1)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:999px;font:600 15px Inter,system-ui,sans-serif;white-space:nowrap;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 1px 2px rgba(14,15,19,.2),0 8px 20px -8px rgba(14,15,19,.45)}
.btn-dark:hover{transform:translateY(-2px);background:#000;box-shadow:0 2px 4px rgba(14,15,19,.2),0 14px 28px -10px rgba(91,61,245,.55)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--v);outline-offset:3px;border-radius:6px}

/* Hero */
.hero{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr auto auto;column-gap:48px;padding:120px var(--pad) 40px;position:relative}
.name{grid-column:1;grid-row:1;align-self:end;font:900 clamp(88px,15vw,224px)/.84 'Inter Tight',Inter,system-ui,sans-serif;letter-spacing:-.055em;color:var(--ink);position:relative}
.name span.l1,.name span.l2{display:block}
.name .l2{margin-top:.02em}
.ii{position:relative;display:inline-block}
/* Inter Tight 900 i-dot: centred on the stem, about .21em square, top at about .02em in this line box */
.tok{position:absolute;left:50%;top:-.007em;width:.2em;height:.2em;margin-left:-.0725em;background:var(--v);border-radius:.034em}
.hero-side{grid-column:2;grid-row:1;align-self:end;padding-bottom:clamp(4px,1.25vw,20px)}
.big-stat b{display:block;font:900 clamp(64px,7.6vw,120px)/.76 'Inter Tight',Inter,system-ui,sans-serif;letter-spacing:-.05em;text-align:right}
.big-stat span{display:block;margin-bottom:14px;font:500 14px/1.45 Inter,system-ui,sans-serif;color:var(--mute);text-align:right}
.hero-foot{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;margin-top:40px;padding-top:24px;border-top:2px solid var(--ink)}
.title{font:800 clamp(24px,2.3vw,34px)/1.1 'Inter Tight',Inter,system-ui,sans-serif;letter-spacing:-.025em}
.scope{margin-top:12px;max-width:620px;color:var(--ink2)}
.contact{display:grid;gap:6px;font:500 15px/1.35 Inter,system-ui,sans-serif;text-align:right;padding-top:4px}
.contact a{color:var(--ink);background:linear-gradient(var(--v),var(--v)) 0 100%/0 1.5px no-repeat;transition:background-size .35s cubic-bezier(.2,.7,.2,1),color .2s}
.contact a:hover{color:var(--v-ink);background-size:100% 1.5px}
.contact .loc{color:var(--mute);margin-top:4px}
.cue{grid-column:1/-1;grid-row:3;justify-self:start;margin-top:28px;display:inline-flex;align-items:center;gap:10px;font:600 13px Inter,system-ui,sans-serif;color:var(--ink2)}
.cue .sq{animation:nudge 1.8s cubic-bezier(.5,0,.5,1) infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* Zoom story: see site.css, "Zoom story, real ZEE5 screens" */
.eyebrow{font:600 13px Inter,system-ui,sans-serif;color:var(--ink2);letter-spacing:.06em;text-transform:uppercase}

/* Section rhythm */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding-bottom:20px;border-bottom:2px solid var(--ink)}
.h2{font:800 clamp(40px,5.2vw,76px)/.95 'Inter Tight',Inter,system-ui,sans-serif;letter-spacing:-.045em}
.sec-sub{font:500 17px Inter,system-ui,sans-serif;color:var(--mute)}

/* Experience */
.exp{padding:clamp(96px,12vw,180px) var(--pad) 40px}
.exp-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,5vw,80px);margin-top:8px}
.rail{position:sticky;top:110px;align-self:start;padding-top:32px;display:grid;gap:4px}
.rail a{position:relative;display:flex;align-items:baseline;gap:12px;padding:8px 0 8px 22px;font:500 15px Inter,system-ui,sans-serif;color:var(--mute);transition:color .25s}
.rail a b{font:700 15px 'Inter Tight',Inter,system-ui,sans-serif;color:inherit;font-variant-numeric:tabular-nums;width:38px}
.rail a::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:2px;background:var(--rule);transition:background .25s,transform .35s cubic-bezier(.2,.7,.2,1)}
.rail a:hover{color:var(--ink)}
.rail a.on{color:var(--ink)}
.rail a.on::before{background:var(--v);transform:scale(1.35)}
.role{padding:40px 0 44px;border-bottom:1px solid var(--rule);scroll-margin-top:96px}
.role:last-child{border-bottom:0}
.role-top{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:40px}
.when{font:500 14px/1.45 Inter,system-ui,sans-serif;color:var(--mute);text-align:right}
.wm{font:900 20px/1 'Inter Tight',Inter,system-ui,sans-serif;letter-spacing:-.04em}
.role-body{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(24px,4vw,64px);margin-top:20px}
.role h3{font:700 clamp(22px,1.9vw,28px)/1.15 'Inter Tight',Inter,system-ui,sans-serif;letter-spacing:-.025em}
.ctx{margin-top:6px;font:500 14px/1.45 Inter,system-ui,sans-serif;color:var(--mute)}
.pts{margin-top:20px;display:grid;gap:12px;max-width:760px}
.pts li{position:relative;padding-left:24px;color:var(--ink2)}
.pts li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:1.5px;background:var(--v);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.role:hover .pts li::before{transform:rotate(45deg)}
.lead{align-self:start;text-align:right;padding-top:4px}
.lead b{display:block;padding-right:.04em;font:900 clamp(56px,6vw,96px)/.9 'Inter Tight',Inter,system-ui,sans-serif;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.lead span{display:block;margin:10px 0 0 auto;max-width:220px;font:500 14px/1.45 Inter,system-ui,sans-serif;color:var(--mute)}
.back{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font:600 15px Inter,system-ui,sans-serif;color:var(--v-ink)}
.back .sq{width:8px;height:8px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.back:hover .sq{transform:translateY(-4px)}
.back:hover{text-decoration:underline;text-underline-offset:4px}

/* Skills */
.skills{padding:clamp(80px,9vw,140px) var(--pad) 0}
.sk-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);margin-top:32px}
.sk-group h3{font:700 clamp(20px,1.6vw,24px)/1.2 'Inter Tight',Inter,system-ui,sans-serif;letter-spacing:-.02em}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.tags li{padding:9px 16px;border:1px solid var(--rule);border-radius:999px;font:500 15px/1.3 Inter,system-ui,sans-serif;color:var(--ink);background:#fff;transition:border-color .25s,transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.tags li:hover{border-color:var(--v);transform:translateY(-2px);box-shadow:var(--sh)}

/* Awards and education */
.awards-edu{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);padding:clamp(80px,9vw,140px) var(--pad) 0}
.ae-col .h2{padding-bottom:20px;border-bottom:2px solid var(--ink)}
.awards li{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.awards b{font:900 40px/1 'Inter Tight',Inter,system-ui,sans-serif;letter-spacing:-.04em}
.awards h3,.edu h3{font:700 20px/1.25 'Inter Tight',Inter,system-ui,sans-serif;letter-spacing:-.015em}
.awards p,.edu p{margin-top:4px;font:500 14px/1.45 Inter,system-ui,sans-serif;color:var(--mute)}
.edu li{padding:22px 0;border-bottom:1px solid var(--rule)}

/* Footer */
.foot{padding:clamp(96px,12vw,180px) var(--pad) 120px;margin-top:clamp(80px,9vw,140px);border-top:2px solid var(--ink)}
.foot-k{display:flex;align-items:center;gap:12px;font:600 13px Inter,system-ui,sans-serif;color:var(--ink2);letter-spacing:.06em;text-transform:uppercase}
.foot-k .sq{width:9px;height:9px}
.foot-mail{display:inline-block;margin-top:18px;font:900 clamp(36px,7vw,112px)/.95 'Inter Tight',Inter,system-ui,sans-serif;letter-spacing:-.05em;color:var(--ink);background:linear-gradient(var(--v),var(--v)) 0 100%/0 .06em no-repeat;transition:background-size .5s cubic-bezier(.2,.7,.2,1);word-break:break-word}
.foot-mail:hover{background-size:100% .06em}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:44px}
.lnk{position:relative;padding:4px 0;font:600 15px Inter,system-ui,sans-serif;color:var(--ink)}

/* Reveal base (only when JS animates) */
/* Nothing is hidden by CSS. main.js sets back only what is still below the fold, then reveals it on scroll. */

/* Tablet and phone */
@media (max-width:1080px){
  .hero{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;padding-top:112px}
  .name{grid-row:1;align-self:end;margin-top:auto}
  .hero{align-content:end}
  .hero-side{grid-column:1;grid-row:2;padding:0;margin-top:28px}
  .big-stat{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;gap:16px}
  .big-stat b,.big-stat span{text-align:left;margin:0}
  .big-stat b{line-height:.9}
  .hero-foot{grid-row:3;grid-template-columns:1fr;gap:20px;margin-top:24px}
  .contact{text-align:left}
  .cue{grid-row:4}
  .exp-grid{grid-template-columns:1fr}
  .rail{display:none}
  .role-body{grid-template-columns:1fr}
  .lead{grid-row:1;text-align:left;display:flex;align-items:baseline;gap:14px;padding:0}
  .lead span{margin:0;max-width:none}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav{padding:12px 20px}
  .nav-links{display:none}
  .btn{height:40px;padding:0 16px;font-size:14px}
  .hero{padding:96px 20px 28px;min-height:100svh}
  .big-stat b{font-size:64px}
  .title{font-size:24px}
  .sec-head{flex-direction:column;gap:8px}
  .role{padding:32px 0 36px}
  .role-top{flex-direction:column;align-items:flex-start;gap:12px}
  .when{text-align:left}
  .lead{flex-direction:column;gap:6px}
  .lead b{font-size:60px}
  .sk-grid,.awards-edu{grid-template-columns:1fr}
  .awards li{grid-template-columns:72px 1fr}
  .awards b{font-size:32px}
  .tags li{font-size:14px;padding:8px 14px}
  .foot-mail{font-size:clamp(28px,8.6vw,44px)}
  .foot-row{gap:20px}
}
@media (prefers-reduced-motion:reduce){
  .cue .sq{animation:none}
  *{transition-duration:.01ms!important}
}

/* Real logos, sized by optical weight (logos.json): base height --lh; ZEE5 x1.92, BookMyShow x1.65, Gemini x1.42 */
.logo{display:block;width:auto;height:var(--lh,20px);flex:none}
.logo.zee5{height:calc(var(--lh,20px) * 1.92)}
.logo.bms{height:calc(var(--lh,20px) * 1.65)}
.logo.gem{height:calc(var(--lh,20px) * 1.42)}
.role-top{--lh:20px}
.role-top .wm{font-size:21px}
.rail{--lh:13px}
.rail a{align-items:center;min-height:40px}
.rail a .logo,.rail a .wm{opacity:.5;transition:opacity .25s}
.rail a .wm{font:800 14px/1 'Inter Tight',Inter,system-ui,sans-serif;letter-spacing:-.03em;color:var(--ink)}
.rail a:hover .logo,.rail a:hover .wm,.rail a.on .logo,.rail a.on .wm{opacity:1}
.src{display:flex;align-items:center;gap:12px}
.awards .src{--lh:14px;margin-top:10px;font:500 14px/1 Inter,system-ui,sans-serif;color:var(--mute)}