<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PW77LSZB');</script>
<!-- End Google Tag Manager -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Product Development Chicago | Eidra.Punchkick</title>
<meta name="description" content="Eidra.Punchkick is a Chicago-based digital product development studio. We shape, ship, and scale digital products that perform — from mobile apps to complex enterprise platforms.">
<link rel="canonical" href="https://punchkick.eidra.com/">
<link rel="icon" href="https://www.eidra.com/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
<link rel="preload" href="https://punchkick.pages.dev/fonts/EidraSans-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://punchkick.pages.dev/fonts/EidraSans-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<meta property="og:type" content="website">
<meta property="og:url" content="https://punchkick.eidra.com/">
<meta property="og:title" content="Digital Product Development Chicago | Eidra.Punchkick">
<meta property="og:description" content="We shape, ship, and scale digital products that perform. Part of the Eidra collective, based in Chicago.">
<meta property="og:image" content="https://punchkick.pages.dev/Eidra_Punchkick_White.svg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Digital Product Development Chicago | Eidra.Punchkick">
<meta name="twitter:description" content="We shape, ship, and scale digital products that perform. Part of the Eidra collective, based in Chicago.">
<meta name="twitter:image" content="https://punchkick.pages.dev/Eidra_Punchkick_White.svg">
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"ProfessionalService","name":"Eidra.Punchkick","description":"Digital product development studio shaping, shipping, and scaling digital products.","url":"https://punchkick.eidra.com","foundingDate":"2006","address":{"@type":"PostalAddress","streetAddress":"1101 W Lake Street, 4th Floor","addressLocality":"Chicago","addressRegion":"IL","postalCode":"60607","addressCountry":"US"},"email":"letsbuild@eidra.com","serviceType":["Digital Product Development","UX Design","Mobile App Development","Product Strategy","Enterprise Software","AI Products"]}
</script>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PW77LSZB"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<nav aria-label="Main navigation">
  <a class="logo" href="/" aria-label="Eidra.Punchkick — home">
    <img src="https://punchkick.pages.dev/Eidra_Punchkick_White.svg" alt="">
  </a>
  <ul class="nav-links">
    <li><a href="/about">About</a></li>
    <li><a href="/work">Work</a></li>
    <li><a href="https://www.eidra.com/career" target="_blank" rel="noopener noreferrer">Careers<span class="sr-only"> (opens in new tab)</span></a></li>
  </ul>
  <button class="nav-hamburger" onclick="toggleMenu()" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-menu" id="hamburger-btn">
    <span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
  </button>
</nav>

<div class="mobile-menu" id="mobile-menu" role="dialog" aria-modal="true" aria-label="Navigation menu">
  <button class="mobile-close" onclick="toggleMenu()" aria-label="Close menu">✕</button>
  <a href="/about" onclick="toggleMenu()">About</a>
  <a href="/work" onclick="toggleMenu()">Work</a>
  <a href="https://www.eidra.com/career" target="_blank" rel="noopener noreferrer" onclick="toggleMenu()">Careers<span class="sr-only"> (opens in new tab)</span></a>
</div>

<main>
  <section class="o-hero" id="o-hero" aria-label="Hero">
    <div class="o-hero-grid" id="hero-grid" aria-hidden="true"></div>
    <div class="o-hero-sweep" aria-hidden="true"></div>
    <h1 class="t-136">We shape, ship,<br>and scale digital<br>products that <span style="color:rgba(255,255,255,.75)">perform.</span></h1>
    <p class="o-hero-desc">From the first idea to global scale, we unite design craft, engineering rigor, and business strategy to build
      <button class="ht" aria-expanded="false" aria-describedby="tt-products">products<span class="tt" id="tt-products" role="tooltip"><strong>Products</strong><span>Mobile apps (iOS &amp; Android)</span><span>Web applications</span><span>Connected device interfaces</span><span>AI-powered products</span></span></button>
      and
      <button class="ht" aria-expanded="false" aria-describedby="tt-platforms">platforms<span class="tt" id="tt-platforms" role="tooltip"><strong>Platforms</strong><span>Back-end APIs &amp; services</span><span>Internal &amp; operational tools</span><span>Design systems</span><span>E-commerce platforms</span></span></button>
      that create lasting impact.</p>
  </section>

  <div class="page-sheet">
  <section class="sec reveal">
    <p class="t-15" style="letter-spacing:.12em;text-transform:uppercase;color:var(--grey-500);margin-bottom:var(--sp-xs)">Where we come in</p>
    <h2 class="t-90" style="margin-bottom:var(--sp-xs)">Think of us when…</h2>
    <p class="t-20" style="color:var(--grey-600);max-width:540px;margin-bottom:var(--sp-s)">We meet you where you are, whether you're still figuring out the problem, stuck mid-build, or ready to take a product to the world.</p>
    <div class="strengths">
      <div class="strength" id="strength-1">
        <button class="strength-header" onclick="toggleStrength(this)" aria-expanded="false" aria-controls="strength-body-1"><span class="s-num" aria-hidden="true">01</span><h3>You have a business goal and know product is the answer, but not which product or where to start.</h3><span class="strength-arrow" aria-hidden="true">+</span></button>
        <div class="strength-body" id="strength-body-1" hidden><p>We don't just validate ideas, we help you find the right one. Whether the goal is growing revenue, reducing cost, or entering a new market, we shape the product direction and put real numbers on what it's worth before anything gets built.</p><div class="stags"><span class="stag">H&amp;M</span><span class="stag">PetSmart</span><span class="stag">US Soccer</span><span class="stag">Verifi</span></div></div>
      </div>
      <div class="strength" id="strength-2">
        <button class="strength-header" onclick="toggleStrength(this)" aria-expanded="false" aria-controls="strength-body-2"><span class="s-num" aria-hidden="true">02</span><h3>You want an experience that genuinely stops people, not just something that works.</h3><span class="strength-arrow" aria-hidden="true">+</span></button>
        <div class="strength-body" id="strength-body-2" hidden><p>Most products work. Few of them move people. We design for both, starting with what users actually need, then finding the moments of craft, surprise and brand expression that make something worth remembering.</p><div class="stags"><span class="stag">Electrolux</span><span class="stag">Hyundai</span><span class="stag">National Gallery</span><span class="stag">Rijksmuseum</span></div></div>
      </div>
      <div class="strength" id="strength-3">
        <button class="strength-header" onclick="toggleStrength(this)" aria-expanded="false" aria-controls="strength-body-3"><span class="s-num" aria-hidden="true">03</span><h3>You know it's technically complex, the stakes are high and the margin for error is zero.</h3><span class="strength-arrow" aria-hidden="true">+</span></button>
        <div class="strength-body" id="strength-body-3" hidden><p>Net-new builds and replatforms that can't fail. A web of integrations that needs untangling. Platforms that must operate at global scale and hold under real load, in the real world, where there are real consequences. And it all needs to get done fast. That's when you call us.</p><div class="stags"><span class="stag">Allstate</span><span class="stag">Avis</span><span class="stag">Duly Health</span><span class="stag">Fidem Financial</span><span class="stag">KLM</span><span class="stag">PostNL</span></div></div>
      </div>
      <div class="strength" id="strength-4">
        <button class="strength-header" onclick="toggleStrength(this)" aria-expanded="false" aria-controls="strength-body-4"><span class="s-num" aria-hidden="true">04</span><h3>You need to accelerate delivery without creating dependency.</h3><span class="strength-arrow" aria-hidden="true">+</span></button>
        <div class="strength-body" id="strength-body-4" hidden><p>We move fast. But unlike most, we build in a way that leaves you in control, not reliant on us to keep it running. Our Build, Operate, Transfer (BOT) model means your team gains the capabilities and operating model to own what we've built and keep driving it forward.</p><div class="stags"><span class="stag">Biamp</span><span class="stag">Home Credit</span><span class="stag">Kwik Trip</span><span class="stag">W.R. Berkley</span></div></div>
      </div>
      <div class="strength" id="strength-5">
        <button class="strength-header" onclick="toggleStrength(this)" aria-expanded="false" aria-controls="strength-body-5"><span class="s-num" aria-hidden="true">05</span><h3>Your product isn't performing and nobody can agree on why.</h3><span class="strength-arrow" aria-hidden="true">+</span></button>
        <div class="strength-body" id="strength-body-5" hidden><p>When a product isn't converting, retaining, or hitting its numbers, we step in. We diagnose what's actually broken, technically, experientially, or commercially, not just what's visible on the surface. The result is a product that performs again.</p><div class="stags"><span class="stag">Devold</span><span class="stag">Kronans Apotek</span><span class="stag">Norwegian Air</span><span class="stag">Yogi Tea</span></div></div>
      </div>
    </div>
  </section>

  <!-- CLIENT LOGO STRIP -->
  <div class="logo-strip" aria-label="Selected clients">
    <div class="logo-strip-noise" aria-hidden="true"></div>
    <div class="logo-strip-inner">
      <p class="logo-strip-heading">Partners to leading brands and bold challengers.</p>
    </div>
    <div class="logo-track-wrap">
      <div class="logo-track">
        <span class="logo-name">Nike</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name">Spotify</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name">Philips Hue</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name">Allstate</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name">KLM</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name">Electrolux</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name">Norwegian Air</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name">Rijksmuseum</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name">Volvo Cars</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name">PetSmart</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name">Intuit</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name">BlueCross BlueShield</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name">H&amp;M</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <!-- Duplicate for seamless loop -->
        <span class="logo-name" aria-hidden="true">Nike</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name" aria-hidden="true">Spotify</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name" aria-hidden="true">Philips Hue</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name" aria-hidden="true">Allstate</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name" aria-hidden="true">KLM</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name" aria-hidden="true">Electrolux</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name" aria-hidden="true">Norwegian Air</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name" aria-hidden="true">Rijksmuseum</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name" aria-hidden="true">Volvo Cars</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name">PetSmart</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name" aria-hidden="true">Intuit</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name" aria-hidden="true">BlueCross BlueShield</span>
        <span class="logo-sep" aria-hidden="true">—</span>
        <span class="logo-name" aria-hidden="true">H&amp;M</span>
        <span class="logo-sep" aria-hidden="true">—</span>
      </div>
    </div>
  </div>

  <section class="sec reveal">
    <p class="t-15" style="letter-spacing:.12em;text-transform:uppercase;color:var(--grey-500);margin-bottom:var(--sp-xs)">What it's like working with us</p>
    <h2 class="t-90" style="margin-bottom:var(--sp-xs)">Senior, direct,<br>genuinely invested.</h2>
    <p class="t-20" style="color:var(--grey-600);max-width:540px;margin-bottom:var(--sp-m)">We work the way the best teams work: with speed, honesty, and a care for the outcome that goes beyond the brief.</p>
    <div class="traits">
      <div class="trait"><h4>Guided by pragmatism</h4><p>Scandinavian simplicity runs through everything we do. Clean thinking, clean design, clean code. We remove everything that doesn't serve.</p></div>
      <div class="trait"><h4>Deeply contextual</h4><p>We immerse ourselves in your business before we touch the work: your model, your politics, your history. We don't parachute in with a framework.</p></div>
      <div class="trait"><h4>Honest and invested</h4><p>We push back when it matters, look beyond the scope, and don't hold clients to contract technicalities. We solve the real problem.</p></div>
      <div class="trait"><h4>Built to hand back</h4><p>We leave you with ownership, capability, and confidence, not dependency. We build, operate, and transfer.</p></div>
    </div>
  </section>

  <section class="sec bg-dark reveal">
    <p class="t-15" style="letter-spacing:.12em;text-transform:uppercase;color:var(--grey-500);margin-bottom:var(--sp-xs)">Our approach with AI</p>
    <h2 class="t-90" style="color:var(--white);margin-bottom:var(--sp-xs)">Human-led.<br>AI-enabled.</h2>
    <p class="t-20" style="color:var(--grey-400);max-width:540px;margin-bottom:var(--sp-m)">We use AI across the entire product lifecycle to move faster and with more precision. The judgment, taste, and accountability stay with our people.</p>
    <div class="ai-split">
      <div class="ai-col ai-dark"><h3>Where humans stay in charge</h3><ul><li>Framing the right problem, not just the stated one</li><li>Designing resilient, secure, scalable foundations</li><li>Applying design taste and brand coherence</li><li>Testing with real people and reading cultural nuance</li><li>Aligning stakeholders and building executive belief</li><li>Making judgment calls and owning the outcome</li></ul></div>
      <div class="ai-col ai-light"><h3>Where AI accelerates us</h3><ul><li>Discovery and opportunity analysis</li><li>Design exploration and iteration</li><li>Development velocity and code quality</li><li>Performance optimisation and growth</li><li>Scalable, intelligent product architectures</li></ul></div>
    </div>
  </section>

  <section class="close-sec reveal" id="contact">
    <p class="t-90">Ready to talk?</p>
    <div class="cta-row">
      <a href="/cdn-cgi/l/email-protection#117d7465627364787d755174787563703f727e7c" class="cta-btn">Contact us</a>
    </div>
  </section>
  </div>

  <footer aria-label="Site footer">
    <a class="footer-logo" href="/"><img src="https://punchkick.pages.dev/Eidra_Punchkick_White.svg" alt="Eidra.Punchkick"></a>
    <ul class="footer-links">
      <li><a href="/about">About</a></li>
      <li><a href="/work">Work</a></li>
      <li><a href="https://www.eidra.com/career" target="_blank" rel="noopener noreferrer">Careers<span class="sr-only"> (opens in new tab)</span></a></li>
    </ul>
    <p class="footer-address">1101 W Lake Street, 4th Floor<br>Chicago, IL 60607</p>
    <span class="footer-copy">© Eidra 2026</span>
  </footer>
</main>

<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// Hero parallax
const heroSection = document.getElementById('o-hero');
if(heroSection && !prefersReducedMotion) {
  window.addEventListener('scroll', () => {
    const scrollY = window.scrollY;
    const heroH = heroSection.offsetHeight;
    if(scrollY <= heroH) heroSection.style.transform = `translateY(${scrollY * 0.4}px)`;
    else heroSection.style.transform = '';
  }, {passive:true});
}

// Hero grid parallax
const heroEl = document.getElementById('o-hero');
const gridEl = document.getElementById('hero-grid');
if(heroEl && gridEl && !prefersReducedMotion){
  let tx=0,ty=0,cx=0,cy=0;
  const lerp=(a,b,t)=>a+(b-a)*t;
  heroEl.addEventListener('mousemove',e=>{const r=heroEl.getBoundingClientRect();tx=((e.clientX-r.left)/r.width-.5)*14;ty=((e.clientY-r.top)/r.height-.5)*8;});
  heroEl.addEventListener('mouseleave',()=>{tx=0;ty=0;});
  (function animate(){cx=lerp(cx,tx,.06);cy=lerp(cy,ty,.06);gridEl.style.transform=`translate(${cx}px,${cy}px)`;requestAnimationFrame(animate);})();
}

// Tooltips
document.querySelectorAll('.o-hero-desc .ht').forEach(ht => {
  function show() {
    document.querySelectorAll('.o-hero-desc .ht').forEach(t => t.setAttribute('aria-expanded','false'));
    ht.setAttribute('aria-expanded','true');
    const tt = ht.querySelector('.tt');
    if(!tt) return;
    const r = ht.getBoundingClientRect();
    const spaceBelow = window.innerHeight - r.bottom;
    if(spaceBelow < tt.offsetHeight + 16){tt.style.top='auto';tt.style.bottom='calc(100% + 8px)';}
    else{tt.style.bottom='auto';tt.style.top='calc(100% + 8px)';}
    tt.style.left='0';
    if(tt.getBoundingClientRect().right > window.innerWidth - 8){tt.style.left='auto';tt.style.right='0';}
  }
  function hide(){ht.setAttribute('aria-expanded','false');}
  ht.addEventListener('mouseenter',show);
  ht.addEventListener('mouseleave',hide);
  ht.addEventListener('focus',show);
  ht.addEventListener('blur',hide);
  ht.addEventListener('click',e=>{e.stopPropagation();ht.getAttribute('aria-expanded')==='true'?hide():show();});
  ht.addEventListener('keydown',e=>{if(e.key==='Escape')hide();});
});
document.addEventListener('click',()=>{document.querySelectorAll('.o-hero-desc .ht').forEach(t=>t.setAttribute('aria-expanded','false'));});

// Scroll reveal
const revealObserver = new IntersectionObserver(entries=>{
  entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('visible');revealObserver.unobserve(e.target);}});
},{threshold:0.08});
document.querySelectorAll('.reveal').forEach(el=>revealObserver.observe(el));

// Strength accordion
function toggleStrength(header) {
  const s = header.parentElement;
  const isOpen = s.classList.contains('open');
  document.querySelectorAll('.strength.open').forEach(x=>{x.classList.remove('open');x.querySelector('.strength-header').setAttribute('aria-expanded','false');x.querySelector('.strength-body').hidden=true;});
  if(!isOpen){s.classList.add('open');header.setAttribute('aria-expanded','true');s.querySelector('.strength-body').hidden=false;}
}

// Mobile menu
function toggleMenu(){
  const menu=document.getElementById('mobile-menu');
  const btn=document.getElementById('hamburger-btn');
  const isOpen=menu.classList.toggle('open');
  btn.setAttribute('aria-expanded',isOpen?'true':'false');
  btn.setAttribute('aria-label',isOpen?'Close menu':'Open menu');
  if(isOpen){const f=menu.querySelector('button,a');if(f)f.focus();}
}
document.addEventListener('keydown',e=>{if(e.key==='Escape'&&document.getElementById('mobile-menu').classList.contains('open')){toggleMenu();document.getElementById('hamburger-btn').focus();}});
</script>
</body>
</html>
