@font-face{font-family:'Geist Mono';src:url(/f/GeistMono-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
/* v21 — minimal system (Inter Display, light/dark, pill buttons). Shared by /, /work/, /contact/ */
@font-face{font-family:'Inter';src:url('/f/InterVar.woff2') format('woff2-variations'),url('/f/InterVar.woff2') format('woff2');font-weight:100 900;font-display:swap;font-optical-sizing:auto}
:root{
  --bg:#fafaf9;--fg:#1c1917;--tx:#3a3735;--mu:#78716c;--fa:#a8a29e;--ln:#eceae8;--sf:#ffffff;--sf2:#f1f0ee;
  --pill:#1c1917;--pillt:#fafaf9;--sh:none;--hv:#e8e6e3;--hv2:#dcd9d5;
  --col:600px;--wide:1160px;--pad:24px;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#0b0b0b;--fg:#f5f5f4;--tx:#d6d3d1;--mu:#8a8580;--fa:#5c5854;--ln:#1c1c1b;--sf:#141414;--sf2:#161616;
  --pill:#f5f5f4;--pillt:#0b0b0b;--sh:none;--hv:#222221;--hv2:#30302e;color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:400 16px/1.55 'Inter',system-ui,-apple-system,sans-serif;font-optical-sizing:auto;letter-spacing:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .45s var(--ease),color .45s var(--ease)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* layout */
.wrap{width:100%;max-width:calc(var(--col) + var(--pad)*2);margin:0 auto;padding:0 var(--pad)}
.wrap.w{max-width:calc(var(--wide) + var(--pad)*2)}

/* nav (Aravind-style: logo left, small square keys + one pill right) */
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:56px;padding-bottom:0}
.logo{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--fg);flex:none;transition:transform .5s var(--ease),background-color .45s var(--ease)}
.logo img{width:22px;height:22px;filter:invert(1)}
:root[data-theme=dark] .logo img{filter:none}
:root[data-theme=dark] .logo{background:#1d1d1c}
.logo:hover{transform:rotate(-8deg) scale(1.04)}
.nr{display:flex;align-items:center;gap:8px}
.nl{font-size:17px;color:var(--mu);padding:6px 8px;border-radius:8px;transition:color .2s}
.nl:hover,.nl[aria-current=page]{color:var(--fg)}
.key{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--ln);background:var(--sf);color:var(--tx);box-shadow:var(--sh);transition:border-color .2s,background-color .45s var(--ease),color .2s,transform .2s var(--ease)}
.key:hover{border-color:var(--fa);color:var(--fg)}
.key:active{transform:scale(.94)}
.key svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.key .fill{fill:currentColor;stroke:none}
.key.lg{font-size:13.5px;font-weight:550;letter-spacing:.02em}
.th .sun,.th .moon{position:absolute;transition:transform .5s var(--ease),opacity .3s}
.th .moon{opacity:0;transform:rotate(-60deg) scale(.6)}
:root[data-theme=dark] .th .sun{opacity:0;transform:rotate(60deg) scale(.6)}
:root[data-theme=dark] .th .moon{opacity:1;transform:none}
.nsep{width:1px;height:18px;background:var(--ln);margin:0 2px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 13px;border-radius:999px;font-size:15.5px;line-height:1;font-weight:450;white-space:nowrap;transition:transform .25s var(--ease),background-color .45s var(--ease),color .45s var(--ease),border-color .2s,opacity .2s}
.btn.sm{height:28px;padding:0 11px}
.btn.pr{background:var(--pill);color:var(--pillt)}
.btn.pr:hover{opacity:.86}
.btn.gh{color:var(--fg);background:var(--sf2)}
.btn.gh:hover{background:var(--hv)}
.btn:active{transform:scale(.97)}
.btn .ar{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(2px)}
.btn.dot::before{content:'';width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}

/* identity block */
.who{margin-top:56px}
.who h1{margin:0;font-size:18.5px;line-height:1.3;font-weight:500;color:var(--fg);letter-spacing:-.012em}
.who .role{margin-top:3px;font-size:16.5px;color:var(--mu);letter-spacing:-.01em}

/* text helpers */
.hi{color:var(--fg)}
.sec{margin-top:112px}
.sh{font-size:15px;color:var(--mu);margin:0 0 20px;font-weight:400}

/* word reveal (Shashi-style) */
.rv .w{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(5px);transition:opacity .7s var(--ease),filter .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.rv.in .w{opacity:1;filter:none;transform:none}
.up{opacity:0;transform:translateY(10px);filter:blur(4px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);transition-delay:var(--d,0ms)}
.up.in{opacity:1;transform:none;filter:none}
.lfade{transition:opacity .35s ease}
.lfade.out{opacity:0}

/* web preview card (shared: home carousel + /work grid) */
.vp{position:relative;aspect-ratio:1000/625;overflow:hidden;border-radius:12px;clip-path:inset(0 round 12px);background:var(--sf2);transform:translateZ(0);transition:border-color .3s,background-color .45s var(--ease)}
.st{position:absolute;left:0;top:0;width:100%;will-change:transform;transform:translate3d(0,0,0);transition:transform 1s var(--ease)}
.st img{display:block;width:100%;height:auto;margin-bottom:-1px}
.play .st{transform:translate3d(0,var(--end),0);transition:transform var(--dur) cubic-bezier(.45,.05,.55,.95) .25s}
.ph{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:4px;color:var(--mu)}
.ph b{color:var(--fg);font-weight:500}
.cap{display:flex;align-items:baseline;gap:6px;margin-top:10px;font-size:15px;line-height:1.3;white-space:nowrap;overflow:hidden}
.cap b{font-weight:450;color:var(--fg);overflow:hidden;text-overflow:ellipsis}
.cap i{font-style:normal;color:var(--fa)}
.cap span{color:var(--mu);overflow:hidden;text-overflow:ellipsis}

.card .go{margin-left:auto;color:var(--mu);opacity:0;transform:translate(-4px,4px);transition:opacity .3s,transform .3s var(--ease)}
.card:hover .go{opacity:1;transform:none}

/* theme switch: circle grows from the toggle */
:root.vt-theme::view-transition-old(root){animation:none}
:root.vt-theme::view-transition-new(root){animation:.7s cubic-bezier(.65,0,.35,1) both thIn}
@keyframes thIn{from{clip-path:circle(0 at var(--vx,90%) var(--vy,60px))}to{clip-path:circle(150vmax at var(--vx,90%) var(--vy,60px))}}
/* page transitions */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.28s ease both vtOut}
::view-transition-new(root){animation:.42s var(--ease) both vtIn}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(6px)}}

@media (max-width:640px){
  :root{--pad:20px}
  .nav{padding-top:32px}
  .who{margin-top:52px}
  .who .role{font-size:18.5px}
  .sec{margin-top:88px}
  .nl{display:none}
  .hide-s{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .rv .w,.up{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ================= home ================= */
.who .role i{font-style:normal;color:var(--fa);margin:0 2px}
.bio{margin-top:24px}
.bio p{margin:0 0 14px;font-size:17.5px;line-height:1.6;color:var(--mu);letter-spacing:-.012em;text-wrap:pretty}
.bio .hi{color:var(--fg)}
.cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.bio+.cta{margin-top:14px}

/* showcase v23: tilted 3D ring (CSS 3D, no blur) <-> A-Z grid, same cards, FLIP between them. Poses/height/perspective-origin set by home.js */
.mq{margin-top:64px;padding:0 0 24px;overflow:hidden;overscroll-behavior-x:contain;-webkit-user-select:none;user-select:none}
.mqb{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;transition:max-width .9s var(--ease)}
.mq.g .mqb{max-width:calc(var(--wide) + var(--pad)*2);margin-bottom:18px}
.mqh{font:400 12px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--fa)}
.fx{position:relative;height:var(--fh,520px);cursor:grab;touch-action:pan-y;perspective:var(--p,2300px);perspective-origin:var(--po,50% 30%);outline:none;transition:opacity .35s ease;--dk:1}
:root[data-theme=light] .fx{--dk:.62}
.fx:focus-visible{box-shadow:inset 0 0 0 2px var(--fa)}
.fx:not(.grid) .sc .mc{cursor:grab;-webkit-user-drag:none;-webkit-touch-callout:none}
.fx.drag,.fx.drag:not(.grid) .sc .mc{cursor:grabbing}
.fx .mc img{-webkit-user-drag:none;user-select:none}
.fx .sc{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.fx .sc .mc{pointer-events:auto}
.fx .sc .mc{position:absolute;left:50%;top:var(--top,30px);width:var(--cw,460px);margin-left:calc(var(--cw,460px) / -2);transform-origin:50% calc(var(--vh,288px) / 2);backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,opacity}
.fx .sc .mc.off{visibility:hidden;pointer-events:none}
/* depth lighting: a dark veil (never a bg-coloured one, never blur); max .55 in dark, ~.34 in light */
.fx .mc .vp::after{content:"";position:absolute;inset:0;background:#000;opacity:calc(var(--dim,0) * .55 * var(--dk));pointer-events:none;z-index:2;transition:opacity .2s linear}
.fx .mc .vp .st{z-index:1}
.fx .sc .mc .cap{margin-top:12px}
.mc{display:block;flex:none}
.mc .vp{border-radius:14px;clip-path:inset(0 round 14px)}
.mc img{-webkit-user-drag:none}
.fx.grid{height:auto;perspective:none;cursor:auto;max-width:calc(var(--wide) + var(--pad)*2);margin:0 auto;padding:4px var(--pad) 8px}
.fx.grid .sc{position:relative;inset:auto;transform-style:flat;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
.fx.grid .sc .mc{position:relative;left:auto;top:auto;width:auto;margin:0;transform-origin:0 0;will-change:auto}
.fx.grid .mc .vp::after{opacity:0}
.fx.grid .sc .mc .cap{margin-top:10px}
.fx.mor{pointer-events:none}
.fx.fade{opacity:0}
@media (prefers-reduced-motion:reduce){.mqb,.fx{transition:none}}

/* journey accordion */
.jl{list-style:none;margin:0;padding:0;border-top:1px solid var(--ln)}
.ji{border-bottom:1px solid var(--ln)}
.jb{display:grid;grid-template-columns:52px 1fr 16px;align-items:center;gap:14px;width:100%;padding:14px 0;text-align:left}
.jy{font-size:15.5px;color:var(--fg);font-variant-numeric:tabular-nums;font-weight:500}
.jpv{font-size:15.5px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
.ji.on .jpv{opacity:0}
.jpl{position:relative;width:12px;height:12px}
.jpl::before,.jpl::after{content:'';position:absolute;left:0;top:50%;width:12px;height:1.5px;margin-top:-.75px;background:var(--mu);border-radius:2px;transition:transform .4s var(--ease)}
.jpl::after{transform:rotate(90deg)}
.ji.on .jpl::after{transform:rotate(0)}
.jb:hover .jpl::before,.jb:hover .jpl::after{background:var(--fg)}
.jx{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.ji.on .jx{grid-template-rows:1fr}
.jxi{overflow:hidden;padding-left:0}
.jxi .jp{display:block;font-size:15.5px;line-height:1.65;color:var(--mu);margin:0 0 12px;opacity:0;transform:translateY(-4px);transition:opacity .4s,transform .5s var(--ease)}
.jxi .jp:last-child{margin-bottom:20px}
.ji.on .jp{opacity:1;transform:none;transition-delay:.12s}
.lk{color:var(--fg);text-decoration:underline;text-decoration-color:var(--fa);text-underline-offset:3px}
.lk:hover{text-decoration-color:var(--fg)}

/* closing */
.end{padding-bottom:96px}
.endt{margin:0;font-size:17.5px;color:var(--mu);letter-spacing:-.012em}
.end .cta{margin-top:18px}
.loc{margin:24px 0 0;font-size:13.5px;color:var(--fa);font-variant-numeric:tabular-nums}

@media (max-width:640px){
  .bio p{font-size:19.5px}
  .mq{margin-top:64px}
  .fx.grid .sc{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  .fx.grid .mc .vp{border-radius:10px;clip-path:inset(0 round 10px)}
  .fx .sc .mc .cap{margin-top:9px}
  .fx .cap b,.fx .cap span{max-width:100%}
  .jb{grid-template-columns:48px 1fr 14px;gap:10px}
  .jxi{padding-left:0}
}

/* ================= work ================= */
.wk-h{max-width:var(--col)}
.tabs{position:relative;display:inline-flex;gap:2px;margin-top:32px;padding:3px;border-radius:999px;background:var(--sf2)}
.tabs button{position:relative;z-index:1;height:28px;padding:0 13px;border-radius:999px;font-size:15px;line-height:1;color:var(--mu);transition:color .3s}
.tabs button i{font-style:normal;color:var(--fa);font-size:13.5px;margin-left:4px;font-variant-numeric:tabular-nums;transition:color .3s}
.tabs button[aria-selected=true]{color:var(--pillt)}
.tabs button[aria-selected=true] i{color:var(--pillt);opacity:.6}
.tb-k{position:absolute;z-index:0;top:3px;bottom:3px;left:0;width:0;border-radius:999px;background:var(--pill);transition:transform .45s var(--ease),width .45s var(--ease),background-color .45s var(--ease)}
.wk-p{margin-top:40px;padding-bottom:110px}
.wg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:48px 28px}
.wg .card{display:block}
.wk-p.enter{animation:pin .5s var(--ease) both}
@keyframes pin{from{opacity:0;transform:translateY(8px);filter:blur(4px)}}
.wg li{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.wg li.in{opacity:1;transform:none}

/* design (Behance slideshows) */
.dz{display:flex;flex-direction:column;gap:40px}
.dz-row{display:flex;gap:28px}
.dzc{margin:0;min-width:0}
.dzf{position:relative;overflow:hidden;border-radius:14px;background:var(--sf2)}
.dzs{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.dzs.on{opacity:1}
.dzs img.fg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dzs.fit img.fg{object-fit:contain}
.dzs img.bg{position:absolute;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);object-fit:cover;filter:blur(24px) brightness(.55);transform:scale(1.05)}
.dza{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:32px;height:32px;margin-top:-16px;border-radius:50%;background:rgba(255,255,255,.9);color:#1c1917;opacity:0;transition:opacity .25s,transform .25s var(--ease)}
.dza svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dza.prev{left:12px}.dza.next{right:12px}
.dzc:hover .dza,.dza:focus-visible{opacity:1}
.dza:active{transform:scale(.92)}
.dzp{position:absolute;left:0;right:0;bottom:12px;z-index:2;display:flex;justify-content:center;gap:5px}
.dzp i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .3s,width .3s var(--ease)}
.dzp i.on{background:#fff;width:14px;border-radius:3px}
.bh{margin-top:40px}

@media (max-width:760px){
  .wg{grid-template-columns:1fr;gap:36px}
  .dz-row{flex-direction:column}
  .dzc{flex:none!important}
  .dza{opacity:1}
}

/* ================= contact ================= */
.cf{margin-top:40px;display:flex;flex-direction:column;gap:22px}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fd{display:flex;flex-direction:column;gap:7px;font-size:15px;color:var(--mu)}
.fd input,.fd textarea{font:inherit;font-size:16.5px;color:var(--fg);background:var(--sf2);border:0;border-radius:12px;padding:11px 14px;outline:0;resize:vertical;transition:background-color .25s var(--ease),box-shadow .25s}
.fd input::placeholder,.fd textarea::placeholder{color:var(--fa)}
.fd input:focus,.fd textarea:focus{background:var(--hv)}
.fd.bad input,.fd.bad textarea{background:rgba(220,38,38,.1)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;background:var(--sf2);color:var(--tx);font-size:15px;cursor:pointer;transition:all .25s var(--ease)}
.chip:hover span{background:var(--hv)}
.chip input:checked+span{background:var(--pill);color:var(--pillt)}
.chip input:focus-visible+span{outline:2px solid var(--fg);outline-offset:2px}
.hp{position:absolute;left:-9999px}
.fbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fst{margin:0;font-size:15px;color:var(--mu)}
.fst.ok{color:#16a34a}.fst.err{color:#dc2626}
.cf.busy #fsb{opacity:.6}
.alt{margin-top:72px;padding-bottom:96px}
.alt .cta{margin-top:0}
.cpm .sw{display:grid;overflow:hidden;height:16px;line-height:16px}
.cpm .sw>span{grid-area:1/1;transition:transform .4s var(--ease),opacity .3s}
.cpm .sw>span+span{transform:translateY(100%);opacity:0}
.cpm.done .sw>span:first-child{transform:translateY(-100%);opacity:0}
.cpm.done .sw>span+span{transform:none;opacity:1}
@media (max-width:640px){.r2{grid-template-columns:1fr}}

/* ================= v21b: top bar (wolf symbol + language flag toggle + theme toggle), no outlines ================= */
.top{display:flex;align-items:center;justify-content:space-between;padding-top:52px}
.top .logo{width:auto;height:auto;border-radius:0;background:none!important;display:block}
.top .logo img{width:30px;height:30px;filter:none}
:root[data-theme=dark] .top .logo img{filter:invert(1)}  /* wolf.png is black: white symbol in dark, black in light */
.top .logo:hover{transform:rotate(-6deg)}
.tg{display:flex;gap:8px}
.sw2{position:relative;display:grid;grid-template-columns:30px 30px;height:30px;padding:0 2px;border-radius:10px;background:var(--sf2);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .45s var(--ease)}
.sw2 span{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;color:var(--fa);transition:color .3s}
.sw2 i{position:absolute;top:3px;bottom:3px;left:3px;width:28px;border-radius:7px;background:var(--sf);box-shadow:0 1px 2px rgba(0,0,0,.08),0 2px 6px -2px rgba(0,0,0,.12);transition:transform .35s var(--ease),background-color .45s var(--ease)}
:root[data-theme=dark] .sw2 i{background:#2a2a29;box-shadow:0 1px 2px rgba(0,0,0,.5)}
.sw2[data-on="1"] i{transform:translateX(30px)}
.sw2 span svg{display:block}
.lang span svg{width:16px;height:10px;border-radius:1.5px;filter:grayscale(1);opacity:.5;transition:filter .3s,opacity .3s}
.lang[data-on="0"] span:first-of-type svg,.lang[data-on="1"] span:last-of-type svg{filter:none;opacity:1}
.thm span svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.thm[data-on="0"] span:first-of-type,.thm[data-on="1"] span:last-of-type{color:var(--fg)}
.sw2:hover span{color:var(--mu)}
.sw2:active i{transform:scale(.94)}.sw2[data-on="1"]:active i{transform:translateX(30px) scale(.94)}
@media (max-width:640px){.top{padding-top:30px}}

/* dock in the light theme (dark theme keeps the original tactile dock) */
:root[data-theme=light] .dock{background:rgba(255,255,255,.78);box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 34px -14px rgba(28,25,23,.28)}
:root[data-theme=light] .dock a,:root[data-theme=light] .dock button{color:#8a847f}
:root[data-theme=light] .dock .dk-sep{background:rgba(0,0,0,.08);box-shadow:none}
:root[data-theme=light] .dock [aria-current="page"]{color:#1c1917;background:#f1f0ee;box-shadow:none}
:root[data-theme=light] .dock .dk-ct{color:#fafaf9;background:#1c1917;box-shadow:none}
@media (hover:hover){
  :root[data-theme=light] .dock a:hover,:root[data-theme=light] .dock button:hover,:root[data-theme=light] .dock [aria-current="page"]:hover{color:#1c1917;background:#ecebe9;box-shadow:none}
  :root[data-theme=light] .dock .dk-ct:hover{color:#fafaf9;background:#000;box-shadow:none}
}
:root[data-theme=light] .dock .tt{background:#1c1917;color:#fafaf9;box-shadow:none}
:root[data-theme=light] .dk-pop{background:#1c1917;border:0}
:root[data-theme=light] .dk-pop .dk-ar{background:#1c1917;border:0}

/* ================= v21b services: rows with a tiny live demo each (plays on hover; on touch when in view) ================= */
.svg{display:flex;flex-direction:column;gap:8px}
.sv{border-radius:16px;background:var(--sf2);transition:background-color .35s var(--ease)}
.svb{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:28px 1fr 148px 18px;align-items:center;gap:14px;padding:14px 14px 14px 16px;border-radius:16px}
.svb:focus-visible{outline:2px solid var(--fg);outline-offset:-2px}
.svt,.svh,.svd,.svi{display:block}
.sv:hover{background:var(--hv)}
.svn{text-align:center;font-size:13px;color:var(--fa);font-variant-numeric:tabular-nums}
.svh{margin:0;font-size:16.5px;font-weight:500;color:var(--fg)}
.svd{margin:2px 0 8px;font-size:15.5px;color:var(--mu)}
.svi{margin:0;font-size:14.5px;color:var(--fa)}
.svi i{font-style:normal;margin:0 6px;opacity:.7}
.viz{position:relative;width:148px;height:88px;border-radius:11px;background:var(--bg);overflow:hidden;transition:background-color .45s var(--ease),transform .5s var(--ease)}
.sv:hover .viz{transform:scale(1.03)}
.viz *{position:absolute;display:block;margin:0}
/* web: a page builds itself */
.vw .vb{left:0;right:0;top:0;height:14px;border-bottom:0;background:var(--sf2)}
.vw .vb i{position:absolute;top:5px;width:4px;height:4px;border-radius:50%;background:var(--fa)}
.vw .vb i:nth-child(1){left:7px}.vw .vb i:nth-child(2){left:14px}.vw .vb i:nth-child(3){left:21px}
.vw u{left:12px;height:5px;border-radius:3px;background:var(--fg);transform-origin:left}
.vw .a1{top:24px;width:70px}.vw .a2{top:33px;width:46px;background:var(--fa)}.vw .a3{top:44px;width:24px;height:8px;border-radius:4px}
.vw s{top:60px;width:38px;height:20px;border-radius:5px;background:var(--sf2);transform-origin:bottom}
.vw .k1{left:12px}.vw .k2{left:55px}.vw .k3{left:98px}
.sv:hover .vw u,.sv.live .vw u{animation:vgrow 3.2s var(--ease) infinite both}
.sv:hover .vw s,.sv.live .vw s{animation:vrise 3.2s var(--ease) infinite both}
.vw .a2{animation-delay:.12s!important}.vw .a3{animation-delay:.24s!important}.vw .k1{animation-delay:.36s!important}.vw .k2{animation-delay:.46s!important}.vw .k3{animation-delay:.56s!important}
@keyframes vgrow{0%{transform:scaleX(0);opacity:0}18%,82%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes vrise{0%{transform:translateY(8px) scaleY(.4);opacity:0}20%,82%{transform:none;opacity:1}100%{opacity:0}}
/* ai: prompt -> agent runs -> done */
.va .vp2{left:10px;right:10px;top:12px;height:20px;padding:0 8px;border-radius:6px;background:var(--sf2);font-size:11.5px;line-height:20px;color:var(--mu);white-space:nowrap;overflow:hidden;position:absolute}
.va .vp2::before{content:'>';position:static;margin-right:5px;color:var(--fa)}
.va .ty{position:static;display:inline-block;overflow:hidden;vertical-align:top;white-space:nowrap}
.va em{position:static;display:inline-block;width:1px;height:10px;margin-left:1px;vertical-align:-1px;background:var(--fg)}
.va .fl{left:18px;right:18px;top:50px;height:24px}
.va .fl i{top:5px;width:14px;height:14px;border-radius:50%;background:var(--sf2);z-index:1}
.va .n1{left:0}.va .n2{left:calc(50% - 7px)}.va .n3{right:0;display:grid!important;place-items:center}
.va .n3 svg{position:static;width:10px;height:10px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.va .ln{left:7px;right:7px;top:11.5px;height:1px;background:var(--sf2)}
.va .pk{left:3px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--fg);opacity:0;z-index:2}
.sv:hover .va .ty,.sv.live .va .ty{animation:vtype 3.6s steps(14) infinite both}
.sv:hover .va em,.sv.live .va em{animation:vblink .7s steps(2) infinite}
.sv:hover .va .pk,.sv.live .va .pk{animation:vpk 3.6s cubic-bezier(.6,0,.3,1) infinite both}
.sv:hover .va .n1,.sv.live .va .n1{animation:vn 3.6s infinite both;animation-delay:0s}
.sv:hover .va .n2,.sv.live .va .n2{animation:vn2 3.6s infinite both}
.sv:hover .va .n3,.sv.live .va .n3{animation:vn3 3.6s infinite both}
.sv:hover .va .n3 svg,.sv.live .va .n3 svg{animation:vck 3.6s infinite both}
@keyframes vtype{0%{max-width:0}35%,100%{max-width:90px}}
@keyframes vblink{50%{opacity:0}}
@keyframes vpk{0%,36%{transform:translateX(0);opacity:0}40%{opacity:1}74%{transform:translateX(calc(148px - 36px - 12px));opacity:1}78%,100%{transform:translateX(calc(148px - 36px - 12px));opacity:0}}
@keyframes vn{0%,38%{background:var(--sf2)}42%,90%{background:var(--fa)}100%{background:var(--sf2)}}
@keyframes vn2{0%,54%{background:var(--sf2)}58%,90%{background:var(--fa)}100%{background:var(--sf2)}}
@keyframes vn3{0%,74%{background:var(--sf2);transform:none}78%{transform:scale(1.25)}82%,92%{background:#22c55e;transform:none}100%{background:var(--sf2)}}
@keyframes vck{0%,76%{opacity:0}82%,92%{opacity:1}100%{opacity:0}}
/* design: shapes snap to the grid under a cursor */
.vd .g{inset:0;background-image:radial-gradient(var(--sf2) 1px,transparent 1.2px);background-size:10px 10px;opacity:1}
.vd .sq,.vd .ci,.vd .tr{top:34px;width:20px;height:20px;transition:transform .6s var(--ease)}
.vd .sq{left:28px;background:var(--fg);border-radius:4px}
.vd .ci{left:64px;background:var(--fa);border-radius:50%}
.vd .tr{left:100px;width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:20px solid var(--fg);background:none;opacity:.55}
.vd .cu{left:96px;top:56px;width:14px;height:14px;fill:var(--fg);stroke:var(--bg);stroke-width:1.2;opacity:0}
.sv:hover .vd .sq,.sv.live .vd .sq{animation:vsq 3.4s var(--ease) infinite both}
.sv:hover .vd .ci,.sv.live .vd .ci{animation:vci 3.4s var(--ease) infinite both}
.sv:hover .vd .tr,.sv.live .vd .tr{animation:vtr 3.4s var(--ease) infinite both}
.sv:hover .vd .cu,.sv.live .vd .cu{animation:vcu 3.4s var(--ease) infinite both}
@keyframes vsq{0%,8%{transform:translate(-8px,-14px) rotate(-18deg)}38%,86%{transform:none}100%{transform:translate(-8px,-14px) rotate(-18deg)}}
@keyframes vci{0%,18%{transform:translate(6px,16px) scale(.7)}48%,86%{transform:none}100%{transform:translate(6px,16px) scale(.7)}}
@keyframes vtr{0%,28%{transform:translate(10px,-12px) rotate(24deg)}58%,86%{transform:none}100%{transform:translate(10px,-12px) rotate(24deg)}}
@keyframes vcu{0%{transform:translate(-70px,-30px);opacity:0}10%{opacity:1}30%{transform:translate(-62px,-14px)}45%{transform:translate(-26px,0)}60%{transform:translate(4px,-18px)}80%{transform:translate(14px,6px);opacity:1}100%{transform:translate(14px,6px);opacity:0}}
@media (max-width:640px){
  .sv{grid-template-columns:22px 1fr 112px;gap:10px;padding:12px}
  .viz{width:112px;height:72px}
  .sv:hover .viz{transform:none}
  .vw s{width:28px;height:16px;top:50px}.vw .k2{left:44px}.vw .k3{left:76px}
  .va .fl{top:42px;left:12px;right:12px}
  @keyframes vpk{0%,36%{transform:translateX(0);opacity:0}40%{opacity:1}74%{transform:translateX(76px);opacity:1}78%,100%{transform:translateX(76px);opacity:0}}
  .vd .sq{left:18px}.vd .ci{left:46px}.vd .tr{left:74px}.vd .sq,.vd .ci,.vd .tr{top:26px}.vd .cu{left:70px;top:46px}
  .svi{display:none}
}
@media (prefers-reduced-motion:reduce){.viz *{animation:none!important}}
/* cursor pill */
.vcur{position:fixed;left:0;top:0;z-index:30;padding:0 10px;height:26px;display:flex;align-items:center;border-radius:999px;background:var(--pill);color:var(--pillt);font-size:13.5px;line-height:1;white-space:nowrap;pointer-events:none;opacity:0;scale:.6;transition:opacity .25s,scale .35s var(--ease)}
.vcur.on{opacity:1;scale:1}
.mc{cursor:none}
.mc .go{display:none}

/* services accordion (v21c) */
.svp{position:relative;width:18px;height:18px;justify-self:end}
.svp::before,.svp::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:1.5px;margin-top:-.75px;border-radius:2px;background:var(--mu);transition:transform .45s var(--ease),background-color .3s}
.svp::after{transform:rotate(90deg)}
.sv.on .svp::after{transform:rotate(0)}
.sv:hover .svp::before,.sv:hover .svp::after{background:var(--fg)}
.svx{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.sv.on .svx{grid-template-rows:1fr}
.svxi{overflow:hidden;min-height:0}
.svl{list-style:none;margin:0;padding:2px 16px 16px 58px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.svl li{padding:10px 12px;border-radius:11px;background:var(--bg);opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .5s var(--ease),background-color .18s ease-out}
/* v24b: the reveal stagger delays only opacity/transform, never the hover background (it used to wait up to 280ms + .3s) */
.sv.on .svl li{opacity:1;transform:none;transition-delay:calc(var(--j)*40ms + 80ms),calc(var(--j)*40ms + 80ms),0s}
/* hover: own tone, one step past the row's hover (--hv), so the card never melts into the row; in instantly-ish, out .18s */
.svl li:hover{background:var(--hv2);transition-duration:.4s,.5s,.06s}
.svl b{display:block;font-weight:500;font-size:15px;color:var(--fg)}
.svl span{display:block;margin-top:1px;font-size:14.5px;color:var(--mu)}
@media (max-width:760px){.svb{grid-template-columns:22px 1fr 112px 16px;gap:10px;padding:12px}.svl{padding:0 12px 12px;grid-template-columns:1fr}}
/* dock in the v21 style: Inter, rounded, neutral accents, no outlines */
html .dock{border:0;border-radius:16px}
html .dock a,html .dock button{border-radius:11px}
html .dock [aria-current="page"]::after{width:4px;height:4px;margin-left:-2px;bottom:3px;border-radius:50%;background:currentColor;opacity:.8}
html .dock .tt{font:500 13px/1 'Inter',system-ui,sans-serif;letter-spacing:0;height:24px;padding:0 9px;border:0;border-radius:8px}
html .dock a:focus-visible,html .dock button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
html .dock .dk-loop path{stroke:var(--fg)}
html .dk-pop{font:500 14.5px/1 'Inter',system-ui,sans-serif;letter-spacing:-.005em;border:0;border-radius:12px;background:var(--sf2);color:var(--fg);box-shadow:0 14px 30px -14px rgba(0,0,0,.45)}
html .dk-pop .dk-dot{border-radius:50%;background:var(--fg)}
html .dk-pop .dk-x{border-radius:8px;color:var(--mu)}
html .dk-pop .dk-x:hover{background:var(--hv);color:var(--fg)}
html .dk-pop .dk-ar{border:0;background:var(--sf2)}

/* aravind-style mono meta labels */
.svn,.svi,.jy,.cap span{font-family:'Geist Mono',ui-monospace,monospace;letter-spacing:-.01em}
.svn,.jy,.svi{font-size:12px}
html .dk-pop,:root[data-theme] .dk-pop{background:var(--pill);color:var(--pillt)}
html .dk-pop .dk-dot{background:var(--pillt)}
html .dk-pop .dk-ar,:root[data-theme] .dk-pop .dk-ar{background:var(--pill)}
html .dk-pop .dk-x{color:var(--pillt);opacity:.7}html .dk-pop .dk-x:hover{background:transparent;opacity:1;color:var(--pillt)}
/* aravind.design type scale (measured from its Framer presets): name 18/500/155%, body 16/150%, small 14/143%, tracking 0 */
.who h1{font-size:18px;line-height:1.55;letter-spacing:0}
.who .role,.who .role{font-size:16px;letter-spacing:0;margin-top:0}
.bio p{font-size:16px;line-height:1.5;letter-spacing:0;margin-bottom:16px}
.endt{font-size:16px;letter-spacing:0}
.sh{font-size:14px}
@media (max-width:640px){.who .role{font-size:16px}.bio p{font-size:16px}}
/* Inter Display (rsms, OFL) = same family/cut aravind.design uses */
@font-face{font-family:'Inter Display';src:url(/f/InterDisplay-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter Display';src:url(/f/InterDisplay-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
body,.btn,.fd input,.fd textarea{font-family:'Inter Display','Inter',system-ui,-apple-system,sans-serif}
.btn{font-weight:400}
:root{--col:528px}
/* Aravind scale on Services / Journey / End: titles 16/500, text 16 & 14, meta mono 12 */
.sh{font-size:14px}
.svh{font-size:16px;letter-spacing:0}
.svd{font-size:14px;line-height:1.43;letter-spacing:0}
.svl b{font-size:14px}.svl span{font-size:14px}

.jpv{font-size:16px}.jxi .jp{font-size:16px;line-height:1.5}.jy{font-size:14px}
.endt{font-size:16px;letter-spacing:0}
/* journey: expanded text continues on the year's line, in the text column */
.jx{transition:grid-template-rows .5s var(--ease),margin-top .5s var(--ease)}
.jxi{padding:0 30px 0 66px}
.jxi .jp{line-height:1.55}
.ji.on .jx{margin-top:calc(-14px - 1.55em)}
.jx{font-size:16px}
.ji.on .jpv{opacity:0;transition:opacity .15s}
@media (prefers-reduced-motion:reduce){.jx{transition:none}}
@media (max-width:640px){.jxi{padding:0 24px 0 58px}}
/* flat minimal navbar/dock: same language as .btn (sf2 surface, no blur/shadow/border/blue) */
html .dock,:root[data-theme] .dock{background:var(--sf2);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border:0;padding:4px;border-radius:999px}
html .dock a,html .dock button,:root[data-theme] .dock a,:root[data-theme] .dock button{color:var(--mu);border-radius:999px;width:36px;height:36px}
html .dock .dk-sep,:root[data-theme] .dock .dk-sep{background:var(--ln);box-shadow:none;height:16px;margin:0 4px}
html .dock [aria-current="page"],:root[data-theme] .dock [aria-current="page"]{color:var(--fg);background:var(--hv);box-shadow:none}
html .dock [aria-current="page"]::after{display:none}
html .dock .dk-ct,:root[data-theme] .dock .dk-ct{color:var(--pillt);background:var(--pill);box-shadow:none}
@media (hover:hover){html .dock a:hover,html .dock button:hover,:root[data-theme] .dock a:hover,:root[data-theme] .dock button:hover{color:var(--fg);background:var(--hv);box-shadow:none}
html .dock .dk-ct:hover,:root[data-theme] .dock .dk-ct:hover{color:var(--pillt);background:var(--pill);opacity:.86}}
html .dock a:hover svg,html .dock button:hover svg{transform:none}
html .dock .tt,:root[data-theme] .dock .tt{background:var(--pill);color:var(--pillt);border:0;box-shadow:none;font:400 12px/1 'Inter Display','Inter',system-ui,sans-serif;border-radius:999px;padding:0 9px}
html .dock a:focus-visible,html .dock button:focus-visible{outline:2px solid var(--fg)}
/* top toggles flat: no raised chip shadow */
.sw2 i,:root[data-theme=dark] .sw2 i{box-shadow:none;background:var(--hv);border-radius:999px}
.sw2{border-radius:999px}
html .dk-pop .dk-x,:root[data-theme] .dk-pop .dk-x{background:transparent;box-shadow:none;border:0}html .dk-pop{box-shadow:none}
/* journey v3: no crossfade; preview line simply grows into full text, rest appears below (no blur/opacity) */
.ji.on .jx{margin-top:0}
.jb{align-items:baseline}
.jpl{align-self:center}
.ji.on .jpv{opacity:1;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.55;transition:none}
.ji.on .jpl{align-self:start;margin-top:7px}
.jxi{padding:0 30px 0 66px}
.jxi .jp,.ji.on .jp{opacity:1;transform:none;filter:none;transition:none;margin:0 0 12px}
.jxi .jp:first-child{margin-top:-2px}
.jxi .jp:last-child{margin-bottom:16px}
@media (max-width:640px){.jxi{padding:0 24px 0 58px}}
/* journey v4: first line static; new lines/paragraphs animate in (no blur) */
@property --jr{syntax:'<length-percentage>';inherits:false;initial-value:1.6em}
@keyframes jrv{from{--jr:1.6em}to{--jr:100%}}
@keyframes jin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ji.on .jpv{-webkit-mask-image:linear-gradient(#000 var(--jr),transparent calc(var(--jr) + 1.4em));mask-image:linear-gradient(#000 var(--jr),transparent calc(var(--jr) + 1.4em));animation:jrv .55s cubic-bezier(.2,.7,.2,1) forwards}
.ji.on .jxi .jp{opacity:0;animation:jin .45s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.18s}
.ji.on .jxi .jp:nth-child(2){animation-delay:.28s}
.ji.on .jxi .jp:nth-child(3){animation-delay:.38s}
@media (prefers-reduced-motion:reduce){.ji.on .jpv,.ji.on .jxi .jp{animation:none;opacity:1;-webkit-mask-image:none;mask-image:none}}
/* dock v22k: same on every page; auto-centred (re-centres as the contact label grows); contact label expands on hover */
html .dock,:root[data-theme] .dock{left:0!important;right:0;margin-inline:auto;width:max-content}
html .dock .dk-ct,:root[data-theme] .dock .dk-ct{width:auto;min-width:36px;padding:0 10px}
@media (hover:hover){html .dock .dk-ct:hover,:root[data-theme] .dock .dk-ct:hover{padding-right:13px}}
html .dock.dk-open .dk-ct[aria-current="page"],html .dock .dk-ct:focus-visible{padding-right:13px}
/* v22l shapes (John 2026-10-27): squircle, not circles. tray 14px, keys 10px; same on toggles + dock, every page */
.sw2,html .dock,:root[data-theme] .dock{border-radius:14px}
.sw2 i,:root[data-theme=dark] .sw2 i,html .dock a,html .dock button,:root[data-theme] .dock a,:root[data-theme] .dock button{border-radius:10px}
html .dock .tt,:root[data-theme] .dock .tt{border-radius:7px}
.sw2{border-radius:10px}.sw2 i,:root[data-theme=dark] .sw2 i{border-radius:7px}
/* services v22n: tag line removed; title + description vertically centred in the row */
.svi{display:none!important}
.svt{align-self:center}
.svd{margin:2px 0 0!important}
/* v22o: dock never moves between pages (same width everywhere, no crossfade/morph, stable scrollbar gutter) */
html{scrollbar-gutter:stable}
::view-transition-group(dock){animation:none!important}
::view-transition-old(dock){animation:none!important;opacity:0}
::view-transition-new(dock){animation:none!important;opacity:1}
/* theme switch: lighter + no lag (named layers off during theme VT so the dock flips with the circle; shorter) */
:root.vt-theme .dock{view-transition-name:none}
:root.vt-theme::view-transition-new(root){animation-duration:.5s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
:root.vt-theme::view-transition-group(root){animation:none}
/* v22q captions (John 2026-10-27): "Name / Type" in Inter Display only, no mono */
.cap,.cap b,.cap i,.cap span,.fx .cap span{font-family:'Inter Display','Inter',system-ui,sans-serif;letter-spacing:0}
.cap{align-items:baseline;gap:8px;font-size:15px;line-height:1.4}
.cap b{font-weight:500;color:var(--fg)}
.cap i{color:var(--fa);font-weight:400}
.cap span{color:var(--mu);font-weight:400}
.cap .go{margin-left:auto}
@media (max-width:640px){.fx .cap{flex-direction:row;align-items:baseline;gap:6px;font-size:14px}.fx .cap i{display:inline}.fx .cap span{font-size:14px}}
/* v23d: perspective toggle + counter-scaled captions on scaled cards */
.mqp[hidden]{display:none}
.fx:not(.grid) .sc .mc .cap{width:calc(100% / var(--is,1));transform:scale(var(--is,1));transform-origin:0 0}
.mqb .mqv{margin-left:auto}
.mq.g .mqb{max-width:calc(var(--col) + var(--pad)*2);margin-bottom:6px} /* v23h: header row never moves between views */

/* ===== v24b /work/ webs: three animated columns, portrait cards, minimal text, tight top ===== */
.wkm .who.wk-h{margin-top:22px}
.wkm .wk-p{margin-top:22px}
#panel-webs{position:relative;width:min(1400px,calc(100vw - var(--pad)*2));left:50%;transform:translateX(-50%)}
#panel-webs.enter{animation:pinx .5s var(--ease) both}
@keyframes pinx{from{opacity:0;transform:translate(-50%,8px);filter:blur(4px)}}
.wg3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start;padding-bottom:90px}
.wc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px;will-change:transform}
/* v24f /work/ scroll reveal (both tabs; body.rvl is added by work.js only when motion is allowed). Hidden state sits below the
   viewport edge it will enter from (data-o=b below / t above); stagger delays are set inline per card */
.rvl .wc li,.rvl .dzc,.rvl .dg-t{opacity:0;transform:translate3d(0,36px,0) scale(.97);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);will-change:transform,opacity}
.rvl .wc li[data-o=t],.rvl .dzc[data-o=t],.rvl .dg-t[data-o=t]{transform:translate3d(0,-36px,0) scale(.97)}
.rvl .wc li.in,.rvl .dzc.in,.rvl .dg-t.in{opacity:1;transform:none}
.wc .card{display:block}
.wc .vp{aspect-ratio:4/5;border-radius:16px;clip-path:inset(0 round 16px)}
.wc .card .cap{margin-top:10px;font-size:14px}
.wc .card .cap b{font-weight:450}
@media (max-width:760px){
  .wkm .who.wk-h{margin-top:14px}
  #panel-webs{width:100%}
  .wg3{grid-template-columns:1fr;gap:28px;padding-bottom:40px}
  .wc{gap:28px}
  .wc .vp{aspect-ratio:4/5;border-radius:14px;clip-path:inset(0 round 14px)}
}
@media (prefers-reduced-motion:reduce){.rvl .wc li,.rvl .dzc,.rvl .dg-t{opacity:1;transform:none;transition:none}}
/* design sets open their Behance project */
.dzc .dzf{cursor:pointer}
.dzc .cap a{color:inherit;text-decoration:none;display:flex;align-items:baseline;gap:6px;min-width:0;width:100%}
.dzc .cap .go{margin-left:auto;color:var(--mu);opacity:0;transform:translate(-4px,4px);transition:opacity .3s,transform .3s var(--ease)}
.dzc:hover .cap .go{opacity:1;transform:none}
body:has(.wkm) .top{padding-top:28px}@media (max-width:640px){body:has(.wkm) .top{padding-top:18px}}
/* v24c: minimal /work/ — no title block, just the tabs; both panels span the full screen width */
.wkm .wk-h{display:none}
.wkm .tabs{margin-top:28px}
.wkm .wk-p{margin-top:20px}
#panel-webs,#panel-design{position:relative;width:calc(100vw - 32px);left:50%;transform:translateX(-50%)}
#panel-design.enter{animation:pinx .5s var(--ease) both}
.wg3{gap:12px}.wc{gap:12px}
@media (max-width:760px){#panel-webs,#panel-design{width:calc(100vw - 16px)}.wkm .tabs{margin-top:16px}.wg3,.wc{gap:10px}}
/* v24d: grid back inside the site's content padding (logo-to-toggle width); tabs full width, two equal halves, centred labels */
#panel-webs,#panel-design{width:100%;left:auto;transform:none}
#panel-webs.enter,#panel-design.enter{animation:pin .5s var(--ease) both}
.wkm .tabs{display:flex;width:100%}
.wkm .tabs button{flex:1 1 0;justify-content:center;height:40px;font-size:15px}
.wc .vp .st img{display:block;width:100%;height:auto}
@media (max-width:760px){#panel-webs,#panel-design{width:100%}.wkm .tabs button{height:38px}}

/* v25 /work/ Design: mixed-size mosaic (placements from design.js). Row unit = 16:9 of a 2-col tile, from the panel width (container units) */
#panel-design{container-type:inline-size}
.dz{--g:15px;display:grid;gap:var(--g);grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:calc((2*(100cqw - 5*var(--g))/6 + var(--g))*9/32 - var(--g)/2)}
.dg-t{position:relative;display:block;min-width:0;overflow:hidden;border-radius:10px;background:var(--sf2);isolation:isolate;-webkit-tap-highlight-color:transparent}
.dg-t img{width:100%;height:100%;object-fit:cover}
.dg-o{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:44px 12px 12px;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0));color:#fff;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .45s var(--ease);pointer-events:none}
.dg-o b{min-width:0;font-weight:500;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-p{flex:none;height:26px;padding:0 10px;display:flex;align-items:center;border-radius:999px;background:var(--pill);color:var(--pillt);font-size:13.5px;line-height:1;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.dg-t:hover .dg-o{opacity:1;transform:none}}
.dg-t:focus-visible{outline:2px solid var(--fg);outline-offset:2px}.dg-t:focus-visible .dg-o{opacity:1;transform:none}
#panel-design .bh{margin-top:36px}
@media (max-width:760px){.dz{--g:9px;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:calc((2*(100cqw - var(--g))/2 + var(--g))*9/32 - var(--g)/2)}.dg-t{border-radius:8px}#panel-design .bh{margin-top:28px}}
@media (prefers-reduced-motion:reduce){.dg-o{transition:none}}

/* v25 Lenis (smooth wheel scroll, see app.js) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}

/* v25b Webs cards: no caption; hover / keyboard focus shows the Design-style label (title + "View site ↗") (v25c: no image zoom). Touch: title stays visible, no pill. */
.wc .vp .dg-o{z-index:3}
@media (hover:hover) and (pointer:fine){.wc .card:hover .dg-o{opacity:1;transform:none}}
.wc .card:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:16px}.wc .card:focus-visible .dg-o{opacity:1;transform:none}
@media (hover:none),(pointer:coarse){.wc .dg-o{opacity:1;transform:none;padding:36px 12px 11px;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.wc .dg-o .dg-p{display:none}}