/* no4mat / casino, slots and betting creative portfolio. */
.igaming-hero{display:block;margin-top:48px}
.hero-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:clamp(24px,3vw,48px);align-items:start}
.igaming-hero h1{grid-column:1;grid-row:1;font-size:clamp(66px,8.2vw,140px);line-height:.91;letter-spacing:-.055em;margin:0 0 0 -4px}
.igaming-hero h1>span{display:block}
.igaming-hero h1 .hero-specialty{font-size:.43em;line-height:1.05;letter-spacing:-.035em;margin-top:22px}
.hero-details{display:contents}
.hero-illustration{grid-column:2;grid-row:1/span 3;position:relative;align-self:stretch;min-width:0;min-height:0;overflow:hidden;pointer-events:none;user-select:none}
/* The text sets the desktop height. Fit the untouched PNG's visible bounds inside it. */
.hero-illustration svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden}
.hero-description{grid-column:1;grid-row:2;font-size:16px;line-height:1.45;color:#bcb1c8;max-width:none;margin:32px 0 26px}
.hero-actions{grid-column:1;grid-row:3;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero-actions>.tiny-label{color:var(--muted);font-size:8px}
.primary-link{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;background:var(--accent);color:var(--ink);font-size:13px;padding:16px 19px;transition:background .2s}
.primary-link:hover{background:#a631df}.primary-link>span{font-size:19px}

.igaming-formats{margin-top:39px;padding-bottom:31px;gap:20px}
.igaming-formats>div{display:flex;align-items:center;gap:27px}
.igaming-formats>div>span{display:flex;align-items:center;gap:9px;font:10px var(--mono);white-space:nowrap;color:var(--muted)}
.ratio-icon{display:inline-block;border:1px solid var(--muted);width:13px;height:17px}.ratio-tall{width:10px;height:18px}.ratio-square{height:13px}

/* Compact 3D card stacks. The original artwork keeps its own aspect ratio. */


.collections{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.collection{min-width:0;container-type:inline-size;border:1px solid var(--line);background:#17131c;overflow:hidden;border-radius:12px;transition:border-color .35s}
.collection.is-hovering{border-color:#805299}
.collection[hidden]{display:none}
.collection-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:61px;padding:16px 17px;border-bottom:1px solid var(--line)}
.collection-heading h3{font-size:19px;font-weight:400;letter-spacing:-.02em;margin:0;line-height:1.2}
.collection-heading>.tiny-label{font-size:8px;color:var(--muted);white-space:nowrap}
.collection-viewport{--stage-height:clamp(270px,25vw,350px);--card-height:min(51cqw,calc(var(--stage-height) - 76px));--card-step:min(30cqw,140px);position:relative;overflow:hidden;height:var(--stage-height);perspective:950px;perspective-origin:50% 45%;background:radial-gradient(ellipse at 50% 48%,#251333 0%,#120d1c 48%,#0c0911 85%);touch-action:pan-y}
.collection:not([data-collection="square"]) .collection-viewport{--card-height:calc(var(--stage-height) - 76px);--card-step:min(25cqw,110px)}
.collection-viewport:before{content:'';position:absolute;left:16%;right:16%;bottom:10px;height:42px;background:radial-gradient(ellipse,#b347ff3d,transparent 70%);filter:blur(13px);pointer-events:none}
.collection-slide{--card-angle:0deg;--card-z:0px;--card-scale:1;--card-x:0px;--tilt-x:0deg;--tilt-y:0deg;display:block;position:absolute;inset:auto;left:50%;top:50%;width:calc(var(--card-height) * var(--media-ratio,1));height:var(--card-height);padding:0;background:#100b18;border:1px solid #b56af8;border-radius:10px;overflow:visible;cursor:pointer;text-align:left;backface-visibility:hidden;transform:translate(-50%,-50%) translateX(var(--card-x)) translateZ(var(--card-z)) rotateX(var(--tilt-x)) rotateY(calc(var(--card-angle) + var(--tilt-y))) scale(var(--card-scale));box-shadow:0 0 5px #d397ffbd,0 0 16px #ad3dff6b,0 0 30px #922ee638,0 14px 26px #0009;transition:transform .72s cubic-bezier(.22,.8,.2,1),opacity .55s,border-color .45s,box-shadow .45s;outline-offset:6px}
.collection-slide[hidden]{display:none}
.collection-slide.is-active{--tilt-x:var(--pointer-tilt-x,0deg);--tilt-y:var(--pointer-tilt-y,0deg);border-color:#e7c5ff;box-shadow:0 0 3px 1px #f4dcff,0 0 12px #d38cffc9,0 0 27px #b348ff9c,0 0 50px #9f31ef45,0 18px 30px #000a;cursor:zoom-in}
.collection-slide.is-away{pointer-events:none}
.collection-slide:focus-visible{outline:2px solid #efceff}
.slide-backdrop{display:none}
.slide-artwork{position:absolute;inset:3px;display:block;overflow:hidden;border-radius:6px;pointer-events:none}
.slide-motion{display:block;position:relative;width:100%;height:100%}
.slide-motion>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.slide-artwork:after{content:'';position:absolute;inset:0;background:#13091f;opacity:.3;transition:opacity .55s;pointer-events:none}
.collection-slide.is-active .slide-artwork:after{opacity:0}
.collection-slide[data-depth="2"] .slide-artwork:after{opacity:.5}
.collection.no-card-transition .collection-slide{transition:none}
.collection.is-hovering .collection-slide.is-active{will-change:transform}
.collection-slide .play-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.play-mark>span{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:1px solid #ffffff9c;border-radius:50%;color:#fff;background:#17101bc9;backdrop-filter:blur(7px);padding-left:4px;font-size:22px;box-shadow:0 5px 25px #0005;transition:background .2s,transform .2s}
.collection-slide.is-active:hover .play-mark>span{background:#9f26dce8;transform:scale(1.04)}
.collection-slide:not(.is-active) .play-mark>span{width:34px;height:34px;font-size:13px}
.collection-footer{padding:15px 17px 16px}
.collection-caption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-height:35px}
.collection-current{font-size:14px;line-height:1.3;margin:0}
.collection-format{font:9px var(--mono);color:var(--muted);white-space:nowrap}
.collection-navigation{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:13px}
.carousel-arrows{display:flex;align-items:center;gap:10px}
.carousel-arrow{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);padding:0;background:transparent;font-size:21px;line-height:1;transition:background .2s}
.carousel-arrow:hover{background:var(--accent);border-color:var(--accent)}
.collection-counter{font:9px var(--mono);color:var(--muted);white-space:nowrap}
.carousel-dots,.case-pagination{display:flex;align-items:center;gap:5px}
.carousel-dots button,.case-navigation .case-pagination button{display:grid;place-items:center;width:21px;height:32px;padding:0;border:0;background:transparent}
.carousel-dots button:after,.case-pagination button:after{content:'';display:block;width:6px;height:6px;border-radius:10px;background:#605368;transition:width .2s,background .2s}
.carousel-dots button[aria-pressed="true"]:after,.case-pagination button[aria-pressed="true"]:after{width:16px;background:var(--accent)}
.carousel-dots button:focus-visible,.carousel-arrow:focus-visible,.case-pagination button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Media viewer. Only the selected video loads and plays. */
#project-dialog{width:min(1080px,calc(100% - 44px));max-height:calc(100svh - 36px);overscroll-behavior:contain}
#project-dialog[open]{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;height:calc(100svh - 36px)}
.case-heading{padding:24px 28px 22px}
.case-heading h2{font-size:clamp(26px,3.6vw,45px);letter-spacing:-.035em;line-height:1.1;margin:9px 0 0;overflow-wrap:anywhere}
.case-category{font-size:10px;color:var(--muted)}
.media-stage{display:flex;align-items:center;justify-content:center;background:#0a090d;padding:22px;position:relative;min-height:0}
.media-stage img,.media-stage video{display:block;width:auto;height:auto;max-width:100%;max-height:100%;min-height:0;object-fit:contain}
.media-stage video{background:#000}.media-error{color:var(--ink);font-size:13px;text-align:center}
.media-stage video,.motion-preview{-webkit-touch-callout:none}
.case-navigation{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 28px}
.case-navigation button{display:flex;align-items:center;gap:20px;border:1px solid var(--line);background:transparent;padding:12px 16px;font-size:12px;white-space:nowrap;transition:background .2s}
.case-navigation button:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.case-navigation button>span{font-size:18px;margin:0}.case-navigation .key-hint{font-size:9px;color:var(--muted)}

.services>div>div{flex:1;min-width:0}.services h3{font-size:22px}.services p{font-size:12px;line-height:1.5;color:var(--muted);margin:7px 0 0}
.about-main h2{font-size:clamp(35px,4.4vw,68px)}
.contact-section h2{font-size:clamp(54px,8.8vw,145px)}.contact-arrow{font-size:1.15em}.contact-placeholder small{opacity:1}
.wordmark .casino-chip{display:block;width:36px;height:36px;flex-shrink:0;margin-left:3px;filter:drop-shadow(0 2px 4px #0006);transform:translateY(-3px)}
.footer-logo{display:inline-flex;align-items:center;gap:6px;line-height:1}
.footer-logo .casino-chip{display:block;width:27px;height:27px;flex-shrink:0;filter:drop-shadow(0 2px 4px #0006);transform:translateY(-2px)}
.decor-chip{display:block;width:1em;height:1em;object-fit:contain;flex-shrink:0}.mini-cross{display:inline-flex;align-items:center;flex-shrink:0}
.ticker-star{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.ticker .decor-chip{transform:translateY(-0.08em)}

@media(max-width:1050px){
  .hero-copy{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:30px}.igaming-hero h1{font-size:7.8vw}.hero-description{font-size:14px}.hero-actions{gap:14px}

  .hero-bottom p{font-size:13px}.igaming-formats>div{gap:19px}.section-heading h2{font-size:30px}.filter{padding:10px 12px}

}
@media(min-width:701px) and (max-width:900px){.section-heading{align-items:flex-start;flex-direction:column;gap:18px}}
@media(max-width:700px){
  .hero-kicker{font-size:7px}.igaming-hero{margin-top:30px}.hero-copy{display:block}
  .igaming-hero h1{font-size:16.6vw;line-height:.91;margin-left:-2px}.igaming-hero h1 .hero-specialty{font-size:.47em;margin-top:17px}
  .hero-details{display:contents}
  .hero-illustration{width:100%;height:auto;aspect-ratio:788/936;margin:28px 0 24px}
  .hero-description{font-size:14px;max-width:350px;line-height:1.45;margin:20px 0}.hero-actions{gap:15px}
  .hero-details .hero-description{max-width:none;margin:0}
  .hero-details .hero-actions{margin-top:20px}
  .primary-link{font-size:12px;padding:13px 16px;gap:24px}.hero-actions>.tiny-label{font-size:7px}

  .igaming-formats{align-items:flex-start;flex-direction:column;margin-top:24px;gap:18px;padding-bottom:24px}
  .hero-bottom.igaming-formats>p{font-size:11px}.igaming-formats>div{gap:22px}.igaming-formats>div>span{font-size:9px;gap:8px}
  .ratio-tall{width:9px;height:16px}.ratio-square{width:12px;height:12px}.ratio-feed{width:12px;height:15px}
  .section-heading{gap:17px}.section-heading h2{font-size:28px}.filter{font-size:11px;padding:10px 14px}
  .filter span{font-size:8px;margin-left:4px}.filters{gap:3px;flex-wrap:wrap}



  .play-mark>span{width:48px;height:48px;font-size:19px}
  .about-main h2{font-size:37px;line-height:1.03}.services h3{font-size:19px}.services p{font-size:11px;margin-top:5px;line-height:1.5}
  .services>div{align-items:flex-start}.services>div>span:first-child{padding-top:3px}.services>div>span:last-child{font-size:18px}
  .contact-section h2{font-size:9.4vw;line-height:1.05;margin:29px 0}.contact-arrow{font-size:1.3em;top:-3px}
  #project-dialog{width:calc(100% - 20px);max-height:calc(100svh - 20px)}
  #project-dialog[open]{height:calc(100svh - 20px)}
  .case-heading{padding:20px 18px 18px}.case-heading h2{font-size:28px}.case-category{font-size:9px}
  .media-stage{padding:12px}.media-stage img,.media-stage video{max-height:100%;min-height:0}
  .case-navigation{gap:12px;padding:16px 18px;display:grid;grid-template-columns:1fr 1fr}.case-navigation .case-pagination{grid-column:1/-1;grid-row:2;justify-content:center}.case-navigation button{font-size:11px;padding:12px;gap:12px}
  .case-navigation .next-project{width:auto}
  .wordmark .casino-chip{width:30px;height:30px;margin-left:2px}.footer-logo .casino-chip{width:25px;height:25px}
}

@media(max-width:360px){
  .site-header{gap:8px}.wordmark{font-size:27px;letter-spacing:-1.5px;gap:3px}.wordmark .casino-chip{width:25px;height:25px}.desktop-nav{gap:10px;font-size:10px}.contact-link>span{font-size:21px}.hero-kicker{font-size:6px}.hero-actions{gap:12px}.hero-actions>.tiny-label{font-size:6px}
  .primary-link{font-size:11px;padding:12px 14px}.section-heading h2{font-size:25px}.filter{padding:8px 10px}.filter:first-child{padding-left:10px}
  .about-main h2{font-size:31px}.services h3{font-size:17px}.case-navigation button{gap:8px;padding:11px;font-size:10px}
}

@media(max-width:1050px){.collections{gap:16px}.collection-heading{padding:14px 12px;min-height:62px}.collection-heading h3{font-size:16px}.collection-heading>.tiny-label{font-size:7px}.collection-footer{padding:14px 12px}.collection-current{font-size:13px}.carousel-arrows{gap:7px}.carousel-arrow{width:31px;height:32px}.carousel-dots{gap:2px}}
@media(max-width:700px){.collections{margin-top:22px;grid-template-columns:1fr;gap:18px}.collection-heading{min-height:50px;padding:13px 16px}.collection-heading h3{font-size:18px}.collection-heading>.tiny-label{font-size:8px}.collection-viewport{--stage-height:290px}.collection-footer{padding:13px 16px 14px}.collection-caption{min-height:20px}.collection-current{font-size:14px}.collection-navigation{margin-top:10px}.carousel-arrow{width:35px;height:34px}.carousel-arrows{gap:10px}.carousel-dots{gap:5px}.case-navigation{padding:13px 14px;gap:9px}.case-navigation button{gap:8px;font-size:10px;padding:11px 10px}.case-navigation .case-pagination{gap:0}.case-navigation .case-pagination button{width:19px;padding:0}.case-pagination button[aria-pressed="true"]:after{width:12px}}
@media(prefers-reduced-motion:reduce){.collection-slide,.play-mark>span,.carousel-dots button:after,.case-pagination button:after{transition:none}}

@media(prefers-reduced-motion:reduce){.collection-slide{--pointer-tilt-x:0deg!important;--pointer-tilt-y:0deg!important;transition:none}.collection.is-hovering .play-mark>span{transform:none}}