.hero{background-image:radial-gradient(#6c8a46 1.6px,transparent 1.8px)}.grid{background-image:linear-gradient(#28231f40 1px,transparent 1px),linear-gradient(90deg,#28231f40 1px,transparent 1px)}.s1{width:210px;clip-path:polygon(0 43%,11% 18%,29% 3%,42% 5%,64% 0,84% 7%,99% 18%,88% 37%,93% 88%,39% 100%,27% 52%,16% 54%)}.s1 .crop{height:212px}.s1 img{width:795px;left:-49px;top:-264px}.s2{width:145px}.s2 .crop{height:330px;clip-path:polygon(4% 7%,8% 2%,15% 0,24% 2%,32% 17%,31% 22%,23% 25%,29% 31%,44% 32%,61% 30%,70% 33%,96% 85%,96% 91%,80% 94%,44% 100%,36% 98%,5% 43%,6% 37%,18% 34%,18% 27%,11% 25%,3% 18%)}.s2 img{width:795px;left:-346px;top:-382px}.logo{border-radius:0;background:none;width:310px;max-width:100%}.logo img{left:-259px}.services h3{font-size:23px}@media(max-width:760px){.s1{width:105px}.s1 .crop{height:106px}.s1 img{width:397.5px;left:-24.5px;top:-132px}.s2{width:100px;right:-18px}.s2 .crop{height:227px}.s2 img{width:548px;left:-238.5px;top:-263.3px}.hero-board{transform:rotate(-1deg)}.logo{scale:.9}.services h3{font-size:19px}}
@media(max-width:760px){.s1{top:auto;bottom:0;left:-36px}.s2{bottom:-45px;right:-27px}.hero-board{padding-bottom:38px}.hero .eyebrow{font-size:11px;letter-spacing:2px}.logo{width:320px;margin-left:50%;transform:translateX(-55%);max-width:none}}
.hero .logo{width:340px;max-width:100%;height:auto;aspect-ratio:220.28/109.6;margin:8px auto 12px;overflow:visible;transform:none;scale:1;background:none;border-radius:0}.hero .logo img{position:static;display:block;width:100%;height:auto;max-width:100%;object-fit:contain}.hero .works-word{margin-top:0}@media(max-width:760px){.hero .logo{width:280px;margin:8px auto 12px}}
header .brand{display:flex;align-items:center;flex-shrink:0}header .brand img{display:block;width:126px;height:auto;max-height:66px;object-fit:contain}@media(max-width:760px){header .brand img{width:104px;max-height:54px}}
#about{background-color:#fff;background-image:linear-gradient(#d5d5d5 1px,transparent 1px),linear-gradient(90deg,#d5d5d5 1px,transparent 1px);background-size:64px 64px;max-width:none}
.social-list{display:grid;gap:18px;min-width:280px}@media(max-width:760px){.social-list{width:100%;min-width:0}}
header nav a{display:inline-block;border:var(--border);padding:10px 20px;box-shadow:4px 4px 0 var(--ink);font-weight:900;color:var(--ink);transition:transform .15s,box-shadow .15s}header nav a:nth-child(1){background:var(--lime)}header nav a:nth-child(2){background:var(--blue)}header nav a:nth-child(3){background:var(--red)}header nav a:nth-child(4){background:var(--yellow)}header nav a:hover{color:var(--ink);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}header nav a:active{transform:translate(4px,4px);box-shadow:none}@media(min-width:761px) and (max-width:1000px){header nav{gap:12px}header nav a{padding:10px 12px}}@media(max-width:760px){header nav{gap:7px;flex-wrap:wrap;justify-content:flex-start}header nav a,header nav .contact-link{padding:6px 9px;box-shadow:3px 3px 0 var(--ink);font-size:12px;min-height:36px}}
header{display:grid;grid-template-columns:140px minmax(0,1fr) 140px;gap:20px}header nav{display:contents}header .brand{justify-self:start}header .header-menu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,30px);width:min(100%,600px);justify-self:center}header .header-menu a{text-align:center;padding:10px 12px}header nav>.contact-link{justify-self:end;background:var(--yellow);text-align:center;padding:10px 20px}@media(min-width:761px) and (max-width:1000px){header{grid-template-columns:126px minmax(0,1fr) 126px;gap:14px;padding-inline:3%}header .header-menu{gap:10px}header .header-menu a{padding:10px 8px}header nav>.contact-link{padding:10px 12px}}@media(max-width:760px){header{grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:14px 18px}header .brand{grid-column:1;grid-row:1}header .header-menu{grid-column:1/-1;grid-row:2;width:100%;gap:10px}header .header-menu a{padding:8px 4px}header nav>.contact-link{grid-column:2;grid-row:1;padding:8px 12px}}
/* Set the hero data-show-stickers attribute to true to restore both animated merchandise stickers. */ .hero[data-show-stickers="false"] .sticker{display:none}
/* Match the hero CTA hover behavior on every header menu button. */ header nav a{transition:none}header nav a:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
/* Category ribbon is temporarily hidden. */ .ribbon{display:none}
/* Plain decorative black ribbon. */ .ribbon{display:block;height:40px;padding:0;background:var(--ink)}
/* High-contrast scroll cue using the header typeface. */ .hero .scroll{font-family:var(--font-heading);font-weight:900;font-size:14px;letter-spacing:2px;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 1px 0 var(--ink)}

.work .art.coming-soon{background:var(--blue);color:var(--ink)}.work .art.coming-soon b{font-size:clamp(24px,3vw,42px);white-space:nowrap;padding:18px 20px}.work:nth-child(n) .art{transform:rotate(2deg)}.work:hover .art{transform:rotate(0) scale(1.02)}@media(max-width:760px){.work .art.coming-soon b{font-size:clamp(22px,6vw,34px);padding:16px}}
/* Reference palette for the four coming-soon thumbnails. */ .work:nth-child(4n+1) .art.coming-soon{background:var(--lime)}.work:nth-child(4n+2) .art.coming-soon{background:var(--blue)}.work:nth-child(4n+3) .art.coming-soon{background:var(--red)}.work:nth-child(4n+4) .art.coming-soon{background:var(--yellow)}
/* Hide the ABOUT capability tags. */ #about .chips{display:none}
/* Keep the hero and ABOUT aligned with the shared paper grid. */ .grid,#about{background-color:var(--paper);background-image:var(--grid-pattern);background-size:var(--grid-size) var(--grid-size)}
#works .after-works .button{background:#fff}
/* Restore the work thumbnails and captions by removing hidden from #work-list. */ #work-list[hidden]{display:none}.services>div{padding:0}.service-link{display:block;height:100%;padding:22px;transition:background-color .15s}.service-link h3{display:flex;justify-content:space-between;align-items:center;gap:8px}.service-link h3 span{font-size:20px}.service-link h3 span{display:inline-block;transform-origin:center;transition:none}.service-link:hover h3 span,.service-link:focus-visible h3 span{transform:scale(1.2)}.service-link:focus-visible{outline-offset:-6px}@media(max-width:760px){.services>div{padding:0}.service-link{padding:16px}}


.service-link h3 .service-title{font-size:inherit;transform-origin:left center}.service-link h3 .service-arrow{transform-origin:center}


.lab-pending{border-block:var(--border);padding:48px 20px;text-align:center;font-size:28px}
/* Center the tagline within the logo panel and fit it to the panel width. */ .hero-board{container-type:inline-size}.hero .hero-board h1{display:block;width:100%;margin:12px auto;text-align:center;white-space:normal;font-size:clamp(18px,6.4cqw,48px);overflow-wrap:anywhere}
.video-entry{margin:40px 0}.video-entry iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:var(--border);background:var(--ink)}.video-entry p a{text-decoration:underline}

.design-projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin:32px 0}.design-project{display:block;background:#fff;border:var(--border);padding:20px}.design-project img{width:100%;aspect-ratio:16/10;object-fit:contain;background:#fff}.design-project h2{font-size:28px}.design-project:hover h2,.design-project:focus-visible h2{text-decoration:underline}@media(max-width:640px){.design-projects{grid-template-columns:1fr}}

#works .after-works[hidden]{display:none}
.hero .hero-board h1{transform:translateX(.2em)}
.hero .hero-board h1{transform:translateX(.5em)}.hero .hero-board h1 .tagline-comma{display:inline-block;margin-right:-.25em}
.hero-twitch-letter{display:inline-block}
#contact{padding-bottom:180px}.contact-toy{position:absolute;left:24px;bottom:18px;width:140px;height:140px;display:grid;place-items:center;cursor:default}.contact-toy-art{display:block;width:110px;height:110px;object-fit:contain;transition:translate .18s ease-out,rotate .18s ease-out;pointer-events:none}.contact-toy-dummy{border:3px solid var(--ink);border-radius:50%;background:var(--yellow);box-shadow:5px 5px 0 var(--ink)}@media(max-width:760px){section#contact{padding-bottom:150px}.contact-toy{left:12px;bottom:12px;width:120px;height:120px}.contact-toy-art{width:90px;height:90px}}@media(prefers-reduced-motion:reduce){.contact-toy-art{transition:none}}
.contact-toy-art{width:165px;height:165px}@media(max-width:760px){.contact-toy-art{width:135px;height:135px}}