:root{--bg:#f4f4f2;--panel:#fff;--text:#0e0e0e;--muted:#6a6a6a;--faint:#6f6f6f;--line:#e3e3e0;--acc:#ff3b30;--glass:rgba(255,255,255,.55);--glassbrd:rgba(0,0,0,.1)}
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}html,body{max-width:100%;overflow-x:hidden}
  body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
  body.dcur{cursor:none}
  h1,h2,h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em;line-height:1.02;font-weight:600}
  .mono{font-family:'Space Mono',monospace}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1200px;margin:0 auto;padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}
  .lbl{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
  .sec{padding:92px 0}
  .dots{position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.09) 1px,transparent 1px);background-size:19px 19px;pointer-events:none}

  
  
  
  
  #bar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--acc);z-index:120}
  .cd,.cr{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:130;transform:translate(-50%,-50%)}
  .cd{width:6px;height:6px;background:var(--acc)}
  .cr{width:30px;height:30px;border:1px solid var(--text);transition:width .2s,height .2s}
  .cr.big{width:54px;height:54px;border-color:var(--acc)}

  nav{position:sticky;top:0;z-index:100;padding-top:env(safe-area-inset-top,0)}
  nav .in{margin-top:14px;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 20px;background:var(--glass);backdrop-filter:blur(16px) saturate(150%);border:1px solid var(--glassbrd);border-radius:16px}
  .brand{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-weight:700;letter-spacing:.2em;font-size:15px}
  .brand i{width:9px;height:9px;border-radius:50%;background:var(--acc)}
  .nl{display:flex;gap:22px;font-family:'Space Mono';font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);align-items:center}
  .nl a:hover{color:var(--text)}
  .nl .cta{color:#fff;background:var(--text);padding:8px 15px}
  @media(max-width:620px){.nl a:not(.cta){display:none}}

  /* HERO */
  .hero{position:relative;min-height:100svh;overflow:hidden}
  .cx{position:absolute;color:#c4c4c4;font-size:15px;z-index:2}
  .htag{position:absolute;left:max(28px,env(safe-area-inset-left));top:98px;z-index:5;font-family:'Space Mono';font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .glass{position:absolute;top:96px;right:max(28px,env(safe-area-inset-right));width:230px;z-index:5;background:var(--glass);backdrop-filter:blur(16px) saturate(150%);border:1px solid var(--glassbrd);border-radius:16px;padding:16px;font-family:'Space Mono';font-size:10.5px;letter-spacing:.06em;color:#333}
  .glass .h{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:700;margin-bottom:10px;letter-spacing:.1em}
  .glass .h i{width:7px;height:7px;border-radius:50%;background:#2ec25f}
  .glass .rg{display:flex;justify-content:space-between;padding:5px 0;border-top:1px solid rgba(0,0,0,.08)}
  .hname{position:absolute;left:0;right:0;bottom:32vh;text-align:center;z-index:4;font-family:'Space Grotesk';font-weight:700;font-size:clamp(74px,20vw,290px);letter-spacing:-.045em;line-height:.78;color:var(--text)}
  .mtn{position:absolute;left:0;right:0;bottom:0;height:66%;z-index:3;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
  .mtn img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
  .hfoot{position:absolute;left:max(28px,env(safe-area-inset-left));bottom:24px;z-index:5;font-family:'Space Mono';font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#555}
  .hscroll{position:absolute;right:max(28px,env(safe-area-inset-right));bottom:24px;z-index:5;font-family:'Space Mono';font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#555}
  .hscroll .ar{display:inline-block;animation:dn 1.6s ease-in-out infinite}
  @keyframes dn{50%{transform:translateY(4px)}}

  .marq{overflow:hidden;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)}
  .marq .t{display:flex;gap:36px;width:max-content;animation:sc 30s linear infinite;font-family:'Space Mono';font-size:15px;color:#6f6f6f;text-transform:uppercase;letter-spacing:.05em}
  .marq .t b{color:var(--text);font-weight:400}
  @keyframes sc{to{transform:translateX(-50%)}}

  .whead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
  .whead h2,.whead h1{font-size:clamp(26px,3.4vw,40px)}
  .pcards{display:flex;flex-direction:column;gap:36px;margin-top:52px}
  .pc{display:flex;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--glass);backdrop-filter:blur(10px);position:relative;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s}
  .pc:hover{transform:translateY(-6px);border-color:#111;box-shadow:0 26px 54px -32px rgba(0,0,0,.4)}
  .pc:hover .pc-r svg{filter:brightness(1.15)}
  .pidx{position:absolute;top:10px;right:22px;z-index:2;font-family:'Space Grotesk';font-weight:700;font-size:58px;line-height:1;color:rgba(0,0,0,.055);pointer-events:none}
  .pc:nth-child(even) .pidx{right:auto;left:22px}
  .pstat{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
  .pstat span{font-family:'Space Mono';font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:#555;border:1px solid var(--line);border-radius:999px;padding:5px 11px;background:rgba(255,255,255,.4)}
  .pc-l{flex:1 1 52%;padding:52px 48px;display:flex;flex-direction:column;justify-content:center}
  .pno{font-family:'Space Mono';font-size:12px;letter-spacing:.12em;color:var(--acc)}
  .pc h3{font-size:clamp(20px,2.3vw,27px);font-weight:600;margin:10px 0 4px}
  .pc p{color:#555;font-size:14.5px;line-height:1.65;max-width:46ch;margin-top:8px}
  .pc p b{color:var(--text);font-weight:500}
  .pacts{margin-top:20px;display:flex;gap:18px;font-family:'Space Mono';font-size:11px;letter-spacing:.08em;text-transform:uppercase}
  .pacts a{border-bottom:1px solid var(--text);padding-bottom:2px}
  .pc-r{flex:1 1 48%;position:relative;background:#111214;border-left:1px solid var(--line);min-height:300px;overflow:hidden}
  .pgrid{position:absolute;inset:0;background-image:linear-gradient(#1c1c1c 1px,transparent 1px),linear-gradient(90deg,#1c1c1c 1px,transparent 1px);background-size:44px 44px}
  .pc-r svg{position:relative;width:100%;height:100%}
  .nfs{opacity:0;transform:translateX(80px) skewX(-4deg)}
  .pc:nth-child(even).nfs{transform:translateX(-80px) skewX(4deg)}
  .nfs.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
  @media(max-width:720px){.pc{flex-direction:column}.pc-r{border-left:none;border-top:1px solid var(--line);min-height:200px}.nfs,.pc:nth-child(even).nfs{transform:translateY(40px)}}

  .state{padding:70px 0}
  .state h2{font-size:clamp(30px,5.2vw,64px);font-weight:600;letter-spacing:-.03em;max-width:18ch}.state em{font-style:normal;color:var(--faint)}
  .kb{overflow:hidden;padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .kt{display:flex;width:max-content;white-space:nowrap;font-family:'Space Grotesk';font-weight:700;font-size:clamp(42px,9vw,120px);letter-spacing:-.03em;animation:sc 22s linear infinite}
  .kt span:nth-child(3n){color:var(--acc)}
  .svc{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;border-top:1px solid var(--line);padding-top:40px}
  @media(max-width:760px){.svc{grid-template-columns:1fr;gap:28px}}
  .svc h4{font-family:'Space Mono';font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 18px 2px}
  .svc ul{display:flex;flex-direction:column;gap:7px;margin:0;padding:0}
.svc li{list-style:none;font-family:'Space Grotesk';font-size:18px;line-height:1.4;padding:13px 16px;border-radius:16px;border:1px solid transparent;background:transparent;transition:background .4s cubic-bezier(.2,.8,.2,1),border-color .4s,transform .4s cubic-bezier(.2,.8,.2,1)}
  .svc .sm li{font-family:'Inter';font-size:14px;color:var(--muted)}
  .contact{text-align:center;border-top:1px solid var(--line)}
  .contact h2{font-size:clamp(34px,6vw,80px);font-weight:600;letter-spacing:-.03em}
  .contact h2 a{border-bottom:3px solid var(--acc)}
  .clinks{margin-top:32px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;font-family:'Space Mono';font-size:12px;letter-spacing:.1em;text-transform:uppercase}
  .clinks a{padding:13px 22px;border:1px solid var(--line);transition:.2s}
  .clinks a:hover{background:var(--text);color:#fff;border-color:var(--text)}
  .fname{overflow:hidden;padding:26px 0 6px;text-align:center}
  .fname div{font-family:'Space Grotesk';font-weight:700;font-size:clamp(58px,20vw,300px);line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.4px #cfcfcc;transition:-webkit-text-stroke-color .4s}
  .fname:hover div{-webkit-text-stroke-color:var(--text)}
  footer{border-top:1px solid var(--line);padding:24px 0 calc(24px + env(safe-area-inset-bottom))}
  footer .in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-family:'Space Mono';font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

  #snd{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:110;display:flex;align-items:center;gap:9px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--glassbrd);padding:9px 14px;font-family:'Space Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);cursor:pointer}
  #snd.on{color:var(--text)}
  #snd .eq{display:flex;align-items:flex-end;gap:2px;height:12px}
  #snd .eq i{width:2px;height:4px;background:currentColor}
  #snd.on .eq i{animation:eq .8s ease-in-out infinite}#snd.on .eq i:nth-child(2){animation-delay:.15s}#snd.on .eq i:nth-child(3){animation-delay:.3s}
  @keyframes eq{50%{height:12px}}

  /* black / white section division */
  section.inv{background:#0d0d0d;color:#efefef}
  .inv .lbl,.inv .pno,.inv .svc h4,.inv .whead .lbl{color:#8a8a8a}
  .inv h2,.inv h3{color:#fff}
  .inv .state em{color:#8a8a8a}
.inv .svc .sm li{color:#9a9a9a}
  /* frosted glass on the black panels */
  .inv{position:relative}
  .inv .pc{background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border-color:rgba(255,255,255,.18);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 18px 44px -28px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.22)}
  .inv .pc:hover{border-color:rgba(255,255,255,.45);box-shadow:0 30px 60px -28px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.3)}
  .inv .pc p{color:#c2c2c2}.inv .pc p b{color:#fff}
  .inv .pidx{color:rgba(255,255,255,.08)}
  .inv .pstat span{color:#e2e2e2;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}
  .inv .pacts a{border-color:#fff}
  .inv .pc-r{border-color:rgba(255,255,255,.16)}
  .inv .svc{border-color:rgba(255,255,255,.14)}
  .inv .svc li{color:#ededed;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07)}
  .inv .svc li:hover{background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.16);transform:translateX(4px)}
  /* soft glass glow blobs behind the black panels */
  .inv::before,.inv::after{content:'';position:absolute;border-radius:50%;filter:blur(90px);opacity:.16;pointer-events:none;z-index:0}
  .inv::before{width:340px;height:340px;background:var(--acc);top:-60px;left:-40px}
  .inv::after{width:300px;height:300px;background:#4f7cff;bottom:-60px;right:-30px}
  .inv .wrap{position:relative;z-index:1}
  /* abstract black & white line art in the work section gaps */
  .workart{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .workart svg{position:absolute}
  .wa1{top:52px;right:-70px;width:280px}
  .wa2{top:42%;left:-56px;width:190px}
  .wa3{bottom:70px;right:6%;width:320px}
  .wa4{top:30%;right:14%;width:120px}
  @media(max-width:1000px){.workart{display:none}}
  .kb{background:#0d0d0d;border-color:#0d0d0d}
  .kt{color:#efefef}.kt span:nth-child(3n){color:var(--acc)}
  .fname{background:#0d0d0d}
  .fname div{-webkit-text-stroke-color:#333}
  .fname:hover div{-webkit-text-stroke-color:#fff}
  footer{background:#0d0d0d;border-color:#1c1c1c}
  footer .in{color:#7a7a7a}
  .rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  .rv.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.mtn{transform:none!important}}
  /* ===== mobile / small screens ===== */
  @media(max-width:680px){
    .sec{padding:64px 0}
    .wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
    .glass{display:none}
    .cx{display:none}
    .htag{top:88px;font-size:10px}
    .hname{bottom:30vh;font-size:clamp(58px,19vw,120px);letter-spacing:-.03em}
    .pcards{gap:26px;margin-top:38px}
    .pc-l{padding:30px 24px}
    .pidx{font-size:44px;top:8px;right:16px}
    .pc:nth-child(even) .pidx{left:16px}
    .state{padding:52px 0}
    .kb{padding:24px 0}
    .contact h2{font-size:clamp(30px,10vw,54px)}
    .clinks a{padding:12px 16px;font-size:11px}
    .fname div{font-size:clamp(46px,22vw,130px)}
    
    #snd{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));padding:0 13px;font-size:10px;min-height:44px}
  }
  @media(max-width:400px){
    .hname{font-size:clamp(48px,18vw,90px)}
    .htag{max-width:60%}
  }

/* ---- all-work page ---- */
.allnote{max-width:60ch;margin:18px 0 0;color:#c2c2c2;font-size:15px;line-height:1.7}
.allback{margin-top:52px;font-family:'Space Mono';font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.allback a{border-bottom:1px solid #fff;padding-bottom:2px}
nav a.brand{display:inline-flex;align-items:center;gap:8px}

/* ---- certifications list ---- */
.certs ul li{display:flex;flex-direction:column;gap:2px}
.cmeta{font-family:'Space Mono';font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.inv .cmeta{color:#8d8d8d}
.certs ul li a{display:inline;border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .3s}
.certs ul li a:hover{border-bottom-color:var(--acc)}

/* ---- compact work grid ---- */
.wgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:48px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.13);border-radius:14px;overflow:hidden}
.wgt{background:#0c0c0e;padding:30px 28px 26px;display:flex;flex-direction:column;min-height:300px;transition:background .35s}
.wgt:hover{background:#141418}
.wgtop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.wgmk{display:block;width:52px;height:52px;border-radius:13px;overflow:hidden;line-height:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.wgmk svg{width:52px;height:52px;display:block;overflow:visible}
.wgmk-i{width:100%;height:100%;object-fit:contain;display:block}
.wgmk-i.pad{padding:8px;box-sizing:border-box}
.wgi{display:block;margin-top:26px;font-family:'Space Mono';font-size:11px;letter-spacing:.18em;color:#8a8a8a}
.wgs{font-family:'Space Mono';font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:#8a8a8a;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:4px 9px;white-space:nowrap;margin-top:4px}
.wgs-client,.wgs-live{color:#ffb4af;border-color:rgba(255,59,48,.45)}
.wgn{font-family:'Space Grotesk';font-weight:600;font-size:20px;line-height:1.25;margin:9px 0 0;color:#fff;letter-spacing:-.01em}
.wgd{color:#a6a6a6;font-size:13.5px;line-height:1.68;margin:11px 0 0}
.wgc{display:flex;gap:7px;flex-wrap:wrap;margin:22px 0 0}
.wgc span{font-family:'Space Mono';font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;color:#c4c4c4;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 10px}
.wgl{margin-top:auto;padding-top:22px;display:flex;gap:16px;font-family:'Space Mono';font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.wgl a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px}
.wgl a:hover{border-bottom-color:var(--acc);color:var(--acc)}
.wgl-none span{color:#7a7a7a}
.wgall{margin-top:38px;font-family:'Space Mono';font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.wgall a{border-bottom:1px solid #fff;padding-bottom:3px}
@media(max-width:1000px){.wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.wgrid{grid-template-columns:minmax(0,1fr)}.wgt{min-height:0;padding:26px 22px 24px}}
/* ---- stack & tools ---- */
.stwrap{margin-top:44px;display:flex;flex-direction:column;gap:0}
.stgrp{display:grid;grid-template-columns:132px 1fr;gap:24px;align-items:start;border-top:1px solid var(--line);padding:20px 0}
.stgrp:last-child{border-bottom:1px solid var(--line)}
.stcat{font-family:'Space Mono';font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-top:9px}
.sttiles{display:flex;flex-wrap:wrap;gap:8px}
.stt{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;padding:7px 13px 7px 9px;background:var(--panel);transition:border-color .25s,transform .25s cubic-bezier(.2,.8,.2,1),background .25s}
.stt:hover{border-color:var(--c);background:var(--b);transform:translateY(-2px)}
.stt svg{width:17px;height:17px;flex:none;fill:var(--c);display:block}
.stt b{font-weight:500;font-size:12.5px;letter-spacing:-.005em;white-space:nowrap}
.stm{width:17px;height:17px;flex:none;display:grid;place-items:center;border-radius:4px;background:var(--c);color:#fff;font-family:'Space Mono';font-size:8.5px;font-weight:700;letter-spacing:-.02em}
@media(max-width:820px){.stgrp{grid-template-columns:1fr;gap:12px;padding:18px 0}.stcat{padding-top:0}}
@media(max-width:500px){.stt{padding:6px 10px 6px 8px;gap:7px}.stt b{font-size:11.5px}}

/* ---- inline icons in lists and links ---- */
.ci{width:16px;height:16px;flex:none;display:block}
.ci:not(.ln){fill:var(--c)}
.ci.ln{color:currentColor}
.clinks a{display:inline-flex;align-items:center;gap:9px}
.svc li{display:flex;align-items:flex-start;gap:11px}
.svc li>.ci{margin-top:3px;color:var(--faint)}
.inv .svc li>.ci{color:#7c7c7c}
.svc li>span{flex:1;min-width:0}
.certs ul li{display:flex;flex-direction:row;align-items:flex-start;gap:13px}
.certs .ctx{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:1;min-width:0}
.ci.bi{width:22px;height:22px;margin-top:0}
.certs li>.cmono,.cmono{flex:0 0 22px;width:22px;height:22px;margin-top:0;display:grid;place-items:center;border-radius:3px;background:var(--c);color:#fff;font-family:'Space Mono';font-size:7.5px;font-weight:700}
@media(max-width:560px){.clinks a{gap:7px}.ci{width:14px;height:14px}}

/* ---- touch targets: expand the hit area without moving anything visually ---- */
@media(max-width:760px),(pointer:coarse){
  .wgl a,.pacts a,.allback a,.wgall a,.clinks a,.wd-acts a,.wd-back a,.certs .ctx a,nav .nl a,nav a.brand{position:relative}
  .wgl a::after,.pacts a::after,.allback a::after,.wgall a::after,.wd-acts a::after,.wd-back a::after,.certs .ctx a::after,nav .nl a::after,nav a.brand::after{
    content:"";position:absolute;left:-6px;right:-6px;top:50%;transform:translateY(-50%);height:44px}
}

  /* ── WEB DEVELOPMENT PAGE ─────────────────────────── */
  .wdsec{padding:56px 0 100px;position:relative}
  .wdintro{max-width:66ch;margin:20px 0 0;color:var(--muted);font-size:15.5px;line-height:1.78}
  .wdlist{display:flex;flex-direction:column;gap:92px;margin-top:64px}
  .wd{scroll-margin-top:92px}
  .wd-info{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:22px 56px;align-items:start;margin-bottom:26px}
  .wd-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
  .wd-i{font-family:'Space Mono';font-size:11px;letter-spacing:.2em;color:var(--faint)}
  .wd-tag{display:inline-flex;align-items:center;gap:7px;font-family:'Space Mono';font-size:10px;letter-spacing:.13em;text-transform:uppercase;padding:5px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);color:#2a2a2a}
  .wd-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#9a9a9a;flex:0 0 6px}
  .wd-client::before{background:#0a7a35}
  .wd-demo::before{background:#b5760a}
  .wd-os::before{background:#2f6bd8}
  .wd-award::before{background:var(--acc)}
  .wd-name{font-size:clamp(27px,3.3vw,42px)}
  .wd-desc{color:var(--muted);font-size:15.5px;line-height:1.78}
  .wd-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
  .wd-chips span{font-family:'Space Mono';font-size:10.5px;letter-spacing:.06em;color:#4a4a4a;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:999px;padding:5px 13px}
  .wd-acts{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:22px;font-family:'Space Mono';font-size:11px;letter-spacing:.1em;text-transform:uppercase}
  .wd-acts a{border-bottom:1px solid var(--text);padding-bottom:2px}

  .wd-stage{border-radius:20px;overflow:hidden;background:#101014;box-shadow:0 34px 66px -44px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.07)}
  .wd-bar{display:flex;align-items:center;gap:14px;padding:0 15px;height:48px;background:#17171c;border-bottom:1px solid #26262d}
  .wd-dots{display:flex;gap:6px;flex:0 0 auto}
  .wd-dots i{width:10px;height:10px;border-radius:50%;background:#35353d}
  .wd-addr{font-family:'Space Mono';font-size:11px;color:#bcbcc4;background:#0d0d11;border-radius:999px;padding:6px 15px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wd-ctl{display:flex;gap:6px;flex:0 0 auto}
  .wd-ctl button{font-family:'Space Mono';font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#aeaeb8;background:transparent;border:1px solid #34343d;border-radius:999px;padding:6px 12px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
  .wd-ctl button:hover{color:#fff;border-color:#5c5c68}
  .wd-ctl button.on{color:#111;background:#f0f0f2;border-color:#f0f0f2}
  .wd-ctl button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
  .wd-still{font-family:'Space Mono';font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#9c9ca6;border:1px solid #34343d;border-radius:999px;padding:6px 12px;white-space:nowrap}
  .wd-live-dot{display:none;align-items:center;gap:7px;font-family:'Space Mono';font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#7fe0a0;flex:0 0 auto}
  .wd-live-dot i{width:7px;height:7px;border-radius:50%;background:#3ddb7c;animation:wdp 2s ease-in-out infinite}
  @keyframes wdp{50%{opacity:.35}}
  .wd-stage.wd-on .wd-live-dot{display:flex}

  .wd-view{position:relative;height:660px;background:#f6f6f4;display:flex;justify-content:center;overflow:hidden}
  .wd-hold{position:absolute;inset:0}
  .wd-pic{display:block;position:absolute;inset:0}
  .wd-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
  .wd-cta{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:linear-gradient(180deg,rgba(8,8,10,.2),rgba(8,8,10,.5));transition:opacity .4s ease}
  .wd-launch{background:#fff;color:#101014;border:0;border-radius:999px;padding:16px 32px;font-family:'Space Mono';font-size:12px;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;box-shadow:0 20px 44px -20px rgba(0,0,0,.7);transition:transform .35s cubic-bezier(.16,1,.3,1)}
  .wd-launch:hover{transform:scale(1.045)}
  .wd-launch:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .wd-hint{font-family:'Space Mono';font-size:11px;letter-spacing:.05em;color:#ececee;background:rgba(8,8,10,.74);border-radius:999px;padding:7px 15px}
  .wd-stage.wd-on .wd-hold{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .45s ease,visibility .45s}

  .wd-fit{position:relative;overflow:hidden;background:#fff;flex:0 0 auto}
  .wd-if{border:0;display:block;background:#fff;transform-origin:top left}
  .wd-load{position:absolute;inset:0;background:#eeeeec;overflow:hidden;z-index:2;transition:opacity .4s ease}
  .wd-load::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 100%);animation:wdwave 2.4s cubic-bezier(.45,0,.25,1) infinite}
  @keyframes wdwave{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
  .wd-stage.wd-ready .wd-load{opacity:0;pointer-events:none}
  .wd-fail{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:3;background:#17171c;padding:0 28px;text-align:center}
  .wd-stage.wd-broke .wd-fail{display:flex}
  .wd-fail p{font-family:'Space Mono';font-size:12px;line-height:1.8;color:#c6c6ce;max-width:44ch}
  .wd-fail a{font-family:'Space Mono';font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#101014;background:#f0f0f2;border-radius:999px;padding:11px 22px}

  .wd-scroll{display:block;overflow-y:auto;overscroll-behavior:contain;background:var(--gut,#fff);scrollbar-width:thin}
  /* the capture keeps scrolling past the fold — say so */
  .wd-stage[data-mode="shot"]{position:relative}
  .wd-stage[data-mode="shot"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;pointer-events:none;background:linear-gradient(180deg,rgba(6,6,8,0),rgba(6,6,8,.3))}
  .wd-shot{display:block;width:100%;max-width:900px;margin:0 auto}
  .wd-cap{display:block;margin-top:16px;font-family:'Space Mono';font-size:11.5px;line-height:1.8;color:var(--muted);max-width:74ch}
  .wd-cap b{color:var(--text);font-weight:400}
  .wd-cap code{font-size:11px;background:rgba(0,0,0,.055);border-radius:5px;padding:2px 6px;color:#3a3a3a}
  .wd-foot{margin-top:82px;padding-top:26px;border-top:1px solid var(--line);max-width:70ch;color:var(--muted);font-size:14.5px;line-height:1.8}
  .wd-back{margin-top:46px;font-family:'Space Mono';font-size:11px;letter-spacing:.08em;text-transform:uppercase}
  .wd-back a{border-bottom:1px solid var(--text);padding-bottom:2px}

  @media(max-width:900px){
    /* one column: flatten the two wrappers so the links can sit after the
       description instead of interrupting it */
    .wd-info{display:flex;flex-direction:column;gap:0}
    .wd-info>div{display:contents}
    .wd-top{order:1}.wd-name{order:2}.wd-desc{order:3;margin-top:14px}
    .wd-chips{order:4}.wd-acts{order:5}
    .wdlist{gap:68px}
    .wd-view{height:520px}
    .wd-addr{font-size:10px;padding:5px 11px}
    .wd-ctl button{padding:5px 9px}
  }
  @media(max-width:620px){
    .wdsec{padding:40px 0 76px}
    .wd-view{height:470px}
    .wd-bar{gap:9px;padding:0 11px}
    .wd-dots{display:none}
    .wd-acts{gap:16px}
  }
  @media(prefers-reduced-motion:reduce){
    .wd-load::after,.wd-live-dot i{animation:none}
    .wd-launch:hover{transform:none}
  }

  /* web page: real 44px controls on touch */
  @media(max-width:760px),(pointer:coarse){
    .wd-bar{height:62px}
    .wd-ctl button{min-height:44px;padding:0 13px;display:inline-flex;align-items:center}
  }
  @media(max-width:620px){
    .wd-bar{height:auto;flex-wrap:wrap;padding:10px 11px;gap:8px}
    .wd-addr{flex:1 1 100%;order:1}
    .wd-live-dot{order:1;flex:0 0 auto}
    .wd-ctl{order:2;flex:1 1 100%;gap:7px}
    .wd-ctl button{flex:1 1 0;justify-content:center;padding:0 6px}
  }