@keyframes wpexpertReelUp{0%{transform:translateY(0)}to{transform:translateY(-50%)}}.codeKicker{display:block;font-family:var(--font-family-alt);font-size:13px;line-height:18px;letter-spacing:1px;color:var(--font-color-2)}.showcaseHero{padding:96px 0 72px;position:relative;overflow:hidden}.showcaseHero .showcaseGlow{position:absolute;width:560px;height:560px;border-radius:50%;filter:blur(90px);pointer-events:none}.glowBlue:is(.showcaseHero .showcaseGlow){background:rgba(22,214,248,.08);top:-140px;left:-140px}.glowOrange:is(.showcaseHero .showcaseGlow){background:rgba(249,116,21,.07);bottom:-180px;right:-100px}:is(.showcaseHero .container) .showcaseGrid{display:grid;grid-template-columns:6fr 5fr;column-gap:64px;align-items:center}:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseIntro{position:relative;z-index:2}:is(:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseIntro) .spanTag{margin-bottom:32px}:is(:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseIntro) h1{font-size:56px;line-height:64px;margin-bottom:24px}:is(:is(:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseIntro) h1) span{display:inline-block}:is(:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseIntro) p{font-size:19px;line-height:29px;color:var(--font-color-2);max-width:520px}:is(:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseIntro) .ctaContainer{display:flex;flex-wrap:wrap;margin-top:40px;column-gap:16px;row-gap:16px}:is(:is(:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseIntro) .ctaContainer) .ctaButton{padding:20px 32px}:is(:is(:is(:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseIntro) .ctaContainer) .ctaButton) .svg-icon{width:16px;height:16px}:is(:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseIntro) .showcaseStats{display:flex;flex-wrap:wrap;gap:16px 40px;margin-top:48px}:is(:is(:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseIntro) .showcaseStats) span{font-family:var(--font-family-alt);font-size:13px;line-height:18px;color:var(--font-color-2);display:inline-flex;align-items:baseline;column-gap:8px}:is(:is(:is(:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseIntro) .showcaseStats) span) b{font-family:var(--font-family);font-size:22px;line-height:26px;font-weight:800;color:var(--font-color-1)}:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseReel{position:relative;height:640px;display:flex;column-gap:20px;transform:rotate(-6deg) scale(1.08);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);overflow:hidden}:is(:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseReel) .reelColumn{flex:1;display:flex;flex-direction:column}:is(:is(:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseReel) .reelColumn) img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--border-color-1);margin-bottom:20px}.reelUp:is(:is(:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseReel) .reelColumn){animation:wpexpertReelUp 60s linear infinite}.reelDown:is(:is(:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseReel) .reelColumn){animation:wpexpertReelUp 75s linear infinite reverse}.portfolioOverview{padding-top:32px}:is(.portfolioOverview .container) .werkHeader{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;max-width:1180px;margin:0 auto 32px}:is(:is(.portfolioOverview .container) .werkHeader) .portfolioFilter{display:flex;flex-wrap:wrap;gap:8px}:is(:is(:is(.portfolioOverview .container) .werkHeader) .portfolioFilter) .filterChip{display:inline-flex;align-items:center;font-family:var(--font-family-alt);font-size:13px;line-height:18px;color:var(--font-color-2);padding:9px 18px;border-radius:60px;border:1px solid var(--border-color-1);background:var(--alt-background-1);cursor:pointer;transition:var(--transition)}:is(:is(:is(:is(.portfolioOverview .container) .werkHeader) .portfolioFilter) .filterChip):focus-visible,:is(:is(:is(:is(.portfolioOverview .container) .werkHeader) .portfolioFilter) .filterChip):hover{border-color:rgba(22,214,248,.45);background:var(--blueOpacity);color:var(--font-color-1);transform:translateY(-2px)}.isActive:is(:is(:is(:is(.portfolioOverview .container) .werkHeader) .portfolioFilter) .filterChip){border-color:rgba(22,214,248,.6);background:var(--blueOpacity);color:var(--main-color-1);font-weight:700}:is(.portfolioOverview .container) .portfolioGrid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;gap:20px;max-width:1180px;margin:0 auto}:is(:is(.portfolioOverview .container) .portfolioGrid) .portfolioCard{min-width:0}.isHidden:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .portfolioCard){display:none}:is(:is(.portfolioOverview .container) .portfolioGrid) .tile{position:relative;display:block;aspect-ratio:790/1024;overflow:hidden;border-radius:20px;border:1px solid var(--border-color-1);background:var(--alt-background-2);transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease}:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile) img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s cubic-bezier(.4,0,.2,1)}:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile) .tileScrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,19,.35)0,rgba(11,14,19,0) 30%,rgba(11,14,19,.02) 55%,rgba(11,14,19,.88) 100%);transition:opacity .35s ease}:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile) .tileIndex{position:absolute;top:16px;left:18px;font-family:var(--font-family-alt);font-size:12px;line-height:16px;letter-spacing:1px;color:rgba(240,242,245,.85);transition:opacity .3s ease,transform .3s ease}:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile) .tileMeta{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;row-gap:8px;padding:20px;transition:opacity .3s ease,transform .3s ease}:is(:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile) .tileMeta) h2{font-size:18px;line-height:26px;font-weight:800;color:var(--font-color-1);text-shadow:0 2px 12px rgba(11,14,19,.6)}:is(:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile) .tileMeta) .cardType{font-family:var(--font-family-alt);font-size:11px;line-height:16px;padding:4px 10px;border-radius:60px;backdrop-filter:blur(6px)}.typeWebsite:is(:is(:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile) .tileMeta) .cardType){color:var(--main-color-1);background:rgba(22,214,248,.12);border:1px solid rgba(22,214,248,.35)}.typeWebshop:is(:is(:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile) .tileMeta) .cardType){color:var(--alt-color-2);background:rgba(249,116,21,.14);border:1px solid rgba(249,116,21,.4)}.tileFeature:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile){grid-column:span 2;grid-row:span 2}.tileFeature.featPos2:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile){grid-column:3/span 2}.tileFeature.featPos3:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile){grid-column:1/span 2}.tileFeature:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile) .tileMeta{padding:28px}:is(.tileFeature:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile) .tileMeta) h2{font-size:24px;line-height:32px}:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile):focus-within,:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile):hover{transform:translateY(-4px);border-color:rgba(22,214,248,.4);box-shadow:0 24px 60px rgba(0,0,0,.4)}:is(:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile):hover,:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile):focus-within) img{transform:scale(1.05)}:is(:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile):hover,:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile):focus-within) .tileScrim{opacity:.25}:is(:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile):hover,:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile):focus-within) .tileIndex{opacity:0;transform:translateY(-6px)}:is(:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile):hover,:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile):focus-within) .tileMeta{opacity:0;transform:translateY(10px)}:is(:is(.portfolioOverview .container) .portfolioGrid) .ctaCard{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;column-gap:32px;row-gap:20px;padding:36px 48px;border-radius:20px;border:1px dashed rgba(22,214,248,.35);background:radial-gradient(ellipse 60% 100%at 50% 100%,rgba(22,214,248,.07) 0%,transparent 65%),var(--alt-background-1);transition:var(--transition)}:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .ctaCard) .ctaCardPlus{position:relative;display:inline-block;flex-shrink:0;width:64px;height:64px;border-radius:50%;border:1px solid rgba(22,214,248,.4);background:var(--main-background);font-size:0;transition:var(--transition)}:is(:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .ctaCard) .ctaCardPlus):after,:is(:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .ctaCard) .ctaCardPlus):before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--main-color-1);border-radius:2px}:is(:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .ctaCard) .ctaCardPlus):before{width:22px;height:2px}:is(:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .ctaCard) .ctaCardPlus):after{width:2px;height:22px}:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .ctaCard) .ctaCardBody{flex:1;min-width:240px}:is(:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .ctaCard) .ctaCardBody) .ctaCardTitle{display:block;font-size:22px;line-height:30px;font-weight:800;color:var(--font-color-1);margin-bottom:4px}:is(:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .ctaCard) .ctaCardBody) .ctaCardText{display:block;font-size:14px;line-height:21px;color:var(--font-color-2)}:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .ctaCard) .ctaCardLink{font-size:15px;line-height:22px;font-weight:700;color:var(--main-color-1);transition:var(--transition)}:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .ctaCard):focus-visible,:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .ctaCard):hover{transform:translateY(-4px);border-color:rgba(22,214,248,.6);border-style:solid}:is(:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .ctaCard):hover,:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .ctaCard):focus-visible) .ctaCardPlus{transform:rotate(90deg);background:var(--blueOpacity)}:is(:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .ctaCard):hover,:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .ctaCard):focus-visible) .ctaCardLink{transform:translateX(4px)}@media (max-width:1024px){.showcaseHero{padding:72px 0 48px}:is(.showcaseHero .container) .showcaseGrid{grid-template-columns:1fr;row-gap:56px}:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseReel{height:360px;transform:rotate(-4deg) scale(1.05)}:is(.portfolioOverview .container) .portfolioGrid{grid-template-columns:1fr 1fr}:is(:is(.portfolioOverview .container) .portfolioGrid) .tile{transform:none}:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile):focus-within,:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile):hover{transform:translateY(-4px)}.tileFeature.featPos2:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile),.tileFeature.featPos3:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile),.tileFeature:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile){grid-column:1/span 2}}@media (max-width:768px){:is(:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseIntro) h1{font-size:34px;line-height:42px}:is(:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseIntro) p{font-size:16px;line-height:24px}:is(:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseIntro) .showcaseStats{gap:12px 28px}:is(:is(:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseIntro) .showcaseStats) span b{font-size:18px;line-height:22px}:is(:is(.showcaseHero .container) .showcaseGrid) .showcaseReel{height:300px}:is(.portfolioOverview .container) .werkHeader{flex-direction:column;align-items:flex-start}:is(.portfolioOverview .container) .portfolioGrid{grid-template-columns:1fr;gap:24px}:is(:is(.portfolioOverview .container) .portfolioGrid) .tile{transform:none}:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile):focus-within,:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile):hover{transform:none}.tileFeature.featPos2:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile),.tileFeature.featPos3:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile),.tileFeature:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile){grid-column:auto;grid-row:auto;aspect-ratio:790/1024}:is(.tileFeature:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile),.tileFeature.featPos2:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile),.tileFeature.featPos3:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile)) .tileMeta{padding:20px}:is(:is(.tileFeature:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile),.tileFeature.featPos2:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile),.tileFeature.featPos3:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .tile)) .tileMeta) h2{font-size:18px;line-height:26px}:is(:is(.portfolioOverview .container) .portfolioGrid) .ctaCard{flex-direction:column;text-align:center;padding:32px 24px}:is(:is(:is(.portfolioOverview .container) .portfolioGrid) .ctaCard) .ctaCardBody{min-width:0}}@media (prefers-reduced-motion:reduce){.showcaseHero .container .showcaseGrid .showcaseReel .reelColumn{animation:none!important}}