/* heinschultz.com — design "A" */
:root{
  --ink:#16130F; --muted:#3D3830; --paper:#FFFFFF; --soft:#F2EFE8;
  --yellow:#FFC93C; --coral:#FF6B4A; --blue:#3355FF; --lilac:#E9E4FF; --mint:#D7F5E3; --butter:#FFF1C7; --green:#1F9D55;
  --display:'Bricolage Grotesque', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --body:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad:32px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5}
img,video{max-width:100%;display:block}
a{color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;z-index:10}
.skip:focus{left:8px}

/* header */
.site-header{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding-top:28px;padding-bottom:28px}
.logo{display:inline-block;text-decoration:none;color:inherit;line-height:1}

/* ===== Animated logo (hein.schultz motion works) ===== */
.hs-logo{
  --hs-size:30px; --hs-ink:#161616; --hs-dot:#F6C445;
  font-family:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  font-size:var(--hs-size);color:var(--hs-ink);
  display:inline-grid;grid-template-columns:auto auto auto;align-items:baseline;line-height:1;user-select:none
}
.hs-word{display:inline-block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;font-weight:800;letter-spacing:-.03em}
.hs-word>span{display:inline-block}
.hs-dot{display:inline-block;width:.19em;height:.19em;margin:0 .035em 0 .02em;border-radius:50%;background:var(--hs-dot);transform-origin:50% 100%}
.hs-row2{grid-column:3;font-weight:500;font-size:.38em;margin-top:.3em;white-space:nowrap}
.hs-row2>span{display:inline-block}
.hs-logo.hs-play .hs-dot{animation:hs-drop 1.5s linear both}
.hs-logo.hs-play .hs-l>span{animation:hs-out-left .75s .66s cubic-bezier(.2,.9,.25,1) both}
.hs-logo.hs-play .hs-r>span{animation:hs-out-right .75s .66s cubic-bezier(.2,.9,.25,1) both}
.hs-logo.hs-play .hs-row2{animation:hs-wipe .6s .82s cubic-bezier(.6,0,.2,1) both}
/* Before the script starts the animation, hold the pieces at their starting positions (no flash of the finished logo) */
.js .hs-logo:not(.hs-ready) .hs-dot{opacity:0}
.js .hs-logo:not(.hs-ready) .hs-l>span{transform:translateX(105%)}
.js .hs-logo:not(.hs-ready) .hs-r>span{transform:translateX(-105%)}
.js .hs-logo:not(.hs-ready) .hs-row2{clip-path:inset(0 100% 0 0)}
@keyframes hs-drop{
  0%{transform:translateY(-2.8em) scale(1,1);opacity:0;animation-timing-function:cubic-bezier(.75,0,1,1)}
  5%{opacity:1}
  20%{transform:translateY(-.8em) scale(.95,1.07);animation-timing-function:linear}
  25%{transform:translateY(0) scale(.82,1.22);animation-timing-function:cubic-bezier(0,0,.3,1)}
  31%{transform:translateY(0) scale(1.45,.58);animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  36%{transform:translateY(0) scale(.86,1.18);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  45%{transform:translateY(-.45em) scale(1,1);animation-timing-function:cubic-bezier(.6,0,.9,.6)}
  58%{transform:translateY(0) scale(.94,1.07);animation-timing-function:cubic-bezier(0,0,.3,1)}
  66%{transform:translateY(0) scale(1.14,.89);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  79%{transform:translateY(0) scale(.97,1.03);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  100%{transform:translateY(0) scale(1,1)}
}
@keyframes hs-out-left{from{transform:translateX(105%)}to{transform:translateX(0)}}
@keyframes hs-out-right{from{transform:translateX(-105%)}to{transform:translateX(0)}}
@keyframes hs-wipe{from{clip-path:inset(0 100% 0 0);transform:translateX(-.4em)}to{clip-path:inset(0 -1em 0 0);transform:translateX(0)}}
@media (max-width:640px){.site-header .hs-logo{--hs-size:24px}}
@media (prefers-reduced-motion:reduce){
  .hs-logo.hs-play *{animation:none !important}
  .js .hs-logo .hs-dot{opacity:1 !important}
  .js .hs-logo .hs-l>span,.js .hs-logo .hs-r>span{transform:none !important}
  .js .hs-logo .hs-row2{clip-path:none !important}
}
/* ===== end animated logo ===== */
.site-nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.navlink{position:relative;padding:12px 16px;font-weight:500;text-decoration:none}
.navlink::after{content:"";position:absolute;left:16px;right:16px;bottom:8px;height:3px;border-radius:3px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.navlink:hover::after{transform:scaleX(1)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:16px 28px;font-weight:700;font-size:17px;text-decoration:none;border-radius:999px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;font-family:var(--body);transition:transform .18s ease, box-shadow .18s ease}
.btn:hover{transform:translate(-3px,-3px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:none;box-shadow:none}
.btn-dark{background:var(--ink);color:#fff}
.btn-yellow{background:var(--yellow)}
.btn-small{padding:12px 22px;font-size:16px}

/* hero */
.hero{display:flex;flex-wrap:wrap;gap:48px;align-items:center;padding-top:56px;padding-bottom:40px}
.hero-copy{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:28px}
.status{display:inline-flex;align-self:flex-start;gap:10px;align-items:center;padding:8px 16px;border:2px solid var(--ink);border-radius:999px;font-weight:500;font-size:15px}
.status i{width:10px;height:10px;border-radius:50%;background:var(--green)}
.status.busy i{background:var(--coral)}
h1,h2,h3{font-family:var(--display);margin:0}
.hero h1{font-weight:800;font-size:clamp(46px,8vw,88px);line-height:.95;letter-spacing:-.03em}
.hl{background:var(--yellow);padding:0 .14em;border-radius:.18em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lede{margin:0;font-size:clamp(18px,2vw,21px);line-height:1.5;max-width:34em;color:var(--muted)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.hero-art{flex:1 1 420px;min-width:0;position:relative;height:480px}
.blob{position:absolute;transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.b1{left:6%;top:4%;width:300px;height:300px;border-radius:50%;background:var(--yellow);animation:float1 6s ease-in-out infinite}
.b2{right:4%;top:18%;width:220px;height:220px;border-radius:40px;background:var(--blue);animation:float2 7s ease-in-out infinite}
.b3{left:22%;bottom:4%;width:260px;height:160px;border-radius:999px;background:var(--coral);animation:float3 5s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-14px)}}
@keyframes float2{0%,100%{transform:rotate(12deg)}50%{transform:rotate(22deg) translateY(10px)}}
@keyframes float3{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-2deg) translateX(-12px)}}
.hero-art:hover .b1{animation:none;transform:translate(-30px,-24px) scale(1.08)}
.hero-art:hover .b2{animation:none;transform:rotate(100deg) translate(20px,-10px)}
.hero-art:hover .b3{animation:none;transform:rotate(-20deg) translate(-10px,24px) scale(1.1)}
.hero-card{position:absolute;inset:22% 18%;border:3px solid var(--ink);border-radius:28px;background:#fff;overflow:hidden;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.hero-card img,.hero-card video{width:100%;height:100%;object-fit:cover}
.hero-art:hover .hero-card{transform:rotate(-3deg) scale(1.03)}

/* ticker */
.ticker-wrap{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--ink);color:#fff;overflow:hidden}
.ticker{display:flex;width:max-content;gap:40px;padding:20px 0;font-family:var(--display);font-weight:700;font-size:clamp(20px,2.4vw,28px);white-space:nowrap;animation:marquee 28s linear infinite}
.ticker b{color:var(--yellow);font-weight:700}
.ticker-wrap:hover .ticker{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* showreel */
.reel-section{padding-top:80px;padding-bottom:40px}
.reel{position:relative;aspect-ratio:16/9;border:3px solid var(--ink);border-radius:32px;background:var(--butter);box-shadow:10px 10px 0 var(--ink);overflow:hidden;transition:transform .3s ease, box-shadow .3s ease}
.reel:hover{transform:translate(-4px,-4px) rotate(-.5deg);box-shadow:16px 16px 0 var(--ink)}
.reel-poster{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;font:700 18px var(--body);color:var(--ink)}
.reel-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-poster span{position:relative}
.play{position:relative;width:clamp(68px,9vw,104px);height:clamp(68px,9vw,104px);border-radius:50%;border:3px solid var(--ink);background:var(--yellow);display:flex;align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.play svg{width:36%;height:36%}
.reel:hover .play{transform:scale(1.15)}
.reel iframe,.reel video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* sections */
.section{padding-top:60px;padding-bottom:60px}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:36px}
.section-head h2,.h2{font-weight:800;font-size:clamp(38px,5.5vw,64px);letter-spacing:-.03em;line-height:1}
.section-head p{margin:0;font-size:18px;color:var(--muted);max-width:380px}

/* work grid */
.grid{display:flex;flex-wrap:wrap;gap:28px}
.tile{flex:1 1 360px;min-width:0;text-decoration:none;display:flex;flex-direction:column;gap:14px}
.tile.large{flex-basis:560px}
/* Work grid: fixed columns so tiles never stretch to fill a leftover gap.
   Desktop: wide tiles 2 per row, square tiles 3 per row. Tablet: wide tiles full row, squares 2 per row. Phone: 1 per row. */
#work .grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px}
#work .grid .tile{grid-column:span 2}
#work .grid .tile.large{grid-column:span 3}
@media (max-width:999px){
  #work .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #work .grid .tile{grid-column:span 1}
  #work .grid .tile.large{grid-column:span 2}
}
@media (max-width:640px){#work .grid{grid-template-columns:1fr;gap:24px}#work .grid .tile,#work .grid .tile.large{grid-column:auto}}
.thumb{position:relative;aspect-ratio:1/1;border-radius:28px;border:3px solid var(--ink);overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease}
.tile.large .thumb{aspect-ratio:16/10}
.thumb img,.thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb .ph{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.02em;padding:24px;text-align:center;line-height:1}
.c0{background:var(--blue);color:#fff}.c1{background:var(--coral)}.c2{background:var(--yellow)}.c3{background:var(--lilac)}.c4{background:var(--mint)}
.badge{position:absolute;left:16px;top:16px;z-index:1;padding:6px 12px;border-radius:999px;background:#fff;color:var(--ink);font-size:13px;font-weight:700}
.mini-play{position:absolute;right:16px;bottom:16px;z-index:1;width:52px;height:52px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;transform:scale(.6);opacity:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s ease}
.tile:hover .thumb{transform:translate(-6px,-6px) rotate(-1.2deg);box-shadow:10px 10px 0 var(--ink)}
.tile:hover .mini-play,.tile:focus-visible .mini-play{transform:scale(1);opacity:1}
.tile-meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.tile-meta strong{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.15}
.tile.large .tile-meta strong{font-size:26px}
.tile-meta span{font-size:15px;color:var(--muted);text-align:right}
.arrow{display:inline-block;transition:transform .25s ease}
.tile:hover .arrow{transform:translateX(6px)}
.more{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;justify-content:center}

/* services */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px}
.svc{flex:1 1 260px;min-width:0;padding:28px;border:2px solid var(--ink);border-radius:28px;display:flex;flex-direction:column;gap:12px;transition:transform .25s ease, background-color .25s ease}
.svc:hover{transform:translateY(-6px);background-color:#FFF8E1}
.svc h3{font-size:26px}
.svc p{margin:0;line-height:1.55;color:var(--muted)}
.ico{width:56px;height:56px;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.svc:hover .ico{transform:rotate(180deg) scale(1.1)}
.i0{border-radius:16px;background:var(--blue)}
.i1{border-radius:50% 50% 50% 8px;background:var(--yellow)}
.i2{border-radius:16px;background:var(--coral);transform:rotate(45deg)}
.svc:hover .i2{transform:rotate(225deg) scale(1.1)}
.i3{border-radius:28px 28px 4px 28px;background:var(--green)}

/* about */
.about{max-width:860px;display:flex;flex-direction:column;gap:22px}
.about-head{display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.me{flex:0 0 auto;width:112px;height:112px;border-radius:50%;border:3px solid var(--ink);background:var(--yellow);overflow:hidden;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.me img{width:100%;height:100%;object-fit:cover}
.me:hover{transform:scale(1.12) rotate(8deg)}
.about-head h2{flex:1 1 260px;font-weight:800;font-size:clamp(34px,5vw,56px);line-height:1;letter-spacing:-.03em}
.about p{margin:0;font-size:19px;line-height:1.6;color:var(--muted);max-width:40em}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:8px 16px;border-radius:999px;background:var(--soft);font-weight:500;transition:transform .2s ease, background-color .2s ease}
.chip:hover{transform:translateY(-3px) rotate(-3deg);background-color:var(--yellow)}

/* contact */
.contact{margin-top:40px;padding-bottom:48px}
.cta-box{background:var(--yellow);border:3px solid var(--ink);border-radius:40px;padding:72px 48px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.cta-box h2{font-weight:800;font-size:clamp(38px,6vw,72px);line-height:1;letter-spacing:-.03em}
.cta-box p{margin:0;font-size:20px;max-width:30em}
.cta-mail{display:inline-block;padding:18px 32px;background:var(--ink);color:#fff;font-weight:700;font-size:clamp(17px,2vw,20px);text-decoration:none;border-radius:999px;word-break:break-word}
.cta-mail:hover{animation:jiggle .45s ease}
@keyframes jiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg) scale(1.05)}75%{transform:rotate(3deg) scale(1.05)}}
.site-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:32px;font-size:15px;color:var(--muted)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:20px}
.site-footer a{display:inline-block;transition:transform .2s ease}
.site-footer a:hover{transform:translateY(-3px)}

/* project page */
.project-head{padding-top:24px;padding-bottom:32px;display:flex;flex-direction:column;gap:18px}
.back{align-self:flex-start;font-weight:700;text-decoration:none;padding:10px 0}
.project-head h1{font-weight:800;font-size:clamp(42px,7vw,80px);line-height:.98;letter-spacing:-.03em}
.facts{display:flex;flex-wrap:wrap;gap:10px}
.media{position:relative;border:3px solid var(--ink);border-radius:32px;overflow:hidden;box-shadow:10px 10px 0 var(--ink);background:var(--butter)}
.media.wide{aspect-ratio:16/9}
.media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.media video,.media img{width:100%;height:auto}
.media.wide video,.media.wide img{position:absolute;inset:0;height:100%;object-fit:cover}
.media .ph{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;font-family:var(--display);font-weight:800;font-size:clamp(32px,5vw,64px);padding:24px;text-align:center}
.project-body{display:flex;flex-wrap:wrap;gap:40px;padding-top:56px;padding-bottom:40px}
.project-body .text{flex:2 1 480px;min-width:0;display:flex;flex-direction:column;gap:18px}
.project-body .text p{margin:0;font-size:19px;line-height:1.65;color:var(--muted);max-width:38em}
.project-body aside{flex:1 1 240px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.gallery{display:flex;flex-wrap:wrap;gap:20px;padding-bottom:40px}
.gallery figure{flex:1 1 320px;margin:0;border:3px solid var(--ink);border-radius:24px;overflow:hidden}
.gallery img,.gallery video{width:100%;height:100%;object-fit:cover}
.next{padding-top:40px;padding-bottom:20px}
.next .tile{flex:0 1 560px}

/* phone */
@media (max-width:640px){
  :root{--pad:20px}
  .navlink{display:none}
  .hero{padding-top:24px;gap:28px}
  .hero-art{height:300px}
  .b1{width:190px;height:190px}
  .b2{width:140px;height:140px;border-radius:28px}
  .b3{width:170px;height:104px}
  .reel-section{padding-top:48px}
  .section{padding-top:40px;padding-bottom:40px}
  .cta-box{padding:48px 24px;border-radius:28px}
  .media{box-shadow:6px 6px 0 var(--ink);border-radius:24px}
}

/* touch screens: tiles and cards pop into place as they scroll in */
@media (hover:none){
  .js .reveal{opacity:0;transform:translateY(28px) rotate(-1.5deg) scale(.97);transition:opacity .5s ease, transform .6s cubic-bezier(.34,1.56,.64,1)}
  .js .reveal.in{opacity:1;transform:none}
  .mini-play{transform:scale(1);opacity:1}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .reveal{opacity:1 !important;transform:none !important}
}

/* YouTube thumbnails: homepage mosaic and project-page video grid */
.thumb .mosaic{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;background:var(--ink)}
.thumb .mosaic.one{grid-template-columns:1fr;grid-template-rows:1fr}
.thumb .mosaic span{position:relative;overflow:hidden;background:var(--soft)}
.thumb .mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
img.lb{transform:scale(1.12)} /* standard thumbnails have letterbox bars: zoom past them */
.media.wide img.lb{transform:none}
.media:hover .play,.vcard:hover .play{transform:scale(1.15)}
.vcap{margin:14px 4px 0;font-weight:700;font-size:17px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:32px;padding-bottom:48px}
.vgrid figure{margin:0;min-width:0}
.vgrid .media{box-shadow:6px 6px 0 var(--ink);border-radius:24px}
.vgrid figcaption{margin:14px 4px 0;font-weight:700;font-size:17px}
@media (max-width:640px){.vgrid{grid-template-columns:1fr;gap:24px}}
.thumb .mosaic.two{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.thumb .mosaic.three{grid-template-columns:2fr 1fr}
.thumb .mosaic.three span:first-child{grid-row:span 2}
@media (min-width:641px){.vgrid.n1{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.vgrid.n2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Client logo strip */
.clients{padding-top:72px}
.clients-h{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--muted);margin:0 0 28px}
.clients-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.clients-track{display:flex;width:max-content;animation:marquee 60s linear infinite}
.clients-marquee:hover .clients-track{animation-play-state:paused}
.clients-group{display:flex;align-items:center;gap:88px;padding:8px 88px 8px 0;margin:0;list-style:none}
.client{flex:0 0 auto;display:flex;align-items:center;height:56px}
.client img{display:block;width:auto;height:calc(var(--h) * 1px * var(--logo-scale,1));max-width:none;filter:brightness(0);opacity:.6}
.client-name{font-family:var(--display);font-weight:700;font-size:calc(22px * var(--logo-scale,1));letter-spacing:-.02em;color:var(--ink);opacity:.6;white-space:nowrap}
@media (max-width:640px){.clients{padding-top:48px}.clients-group{gap:56px;padding-right:56px}.clients-marquee{--logo-scale:.8}}
@media (prefers-reduced-motion:reduce){
  .clients-track{animation:none;width:auto}
  .clients-group{flex-wrap:wrap;justify-content:center;row-gap:24px;column-gap:56px;padding:8px var(--pad)}
  .clients-group[aria-hidden],.clients-group li[aria-hidden]{display:none}
  .clients-marquee{-webkit-mask-image:none;mask-image:none}
}

/* Games ("Side quests"): dark band after Selected work */
.new-tag{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:var(--yellow);border:2px solid var(--ink);font-size:12px;font-weight:700;line-height:1.4;vertical-align:2px}
.games-band{background:var(--ink);color:#fff;padding:96px 0 104px;margin-top:40px}
.games-band a{color:#fff}
.games-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px}
.games-head>div{display:flex;flex-direction:column;gap:20px;flex:1 1 480px;min-width:0}
.games-head h2{margin:0;font-weight:800;font-size:clamp(42px,6vw,76px);line-height:.95;letter-spacing:-.03em}
.games-head h2 .hl{color:var(--ink)}
.games-head p{margin:0;font-size:18px;line-height:1.55;color:#D9D3C7;max-width:400px}
.status.on-dark{border-color:#fff;color:#fff}
.status.on-dark i{background:var(--yellow)}
.games-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.game{display:flex;flex-direction:column;gap:14px;text-decoration:none;min-width:0}
.game-thumb{position:relative;aspect-ratio:4/5;border-radius:28px;border:3px solid #fff;overflow:hidden;background:#000;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}
.game-thumb img,.game-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.game-thumb .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:32px}
.game:hover .game-thumb,.game:focus-visible .game-thumb{transform:translate(-6px,-6px) rotate(-1.2deg);box-shadow:10px 10px 0 var(--yellow)}
.game:hover .arrow{transform:translateX(6px)}
.game .tile-meta strong{font-size:28px}
.game .tile-meta span{color:#D9D3C7}
.game p{margin:0;font-size:17px;line-height:1.55;color:#D9D3C7}
.game-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:auto;padding-top:4px}
.play-pill{padding:11px 20px;border-radius:999px;background:var(--yellow);color:var(--ink);border:2px solid #fff;font-weight:700;font-size:16px;transition:transform .18s ease,box-shadow .18s ease}
.game:hover .play-pill{transform:translate(-2px,-2px);box-shadow:3px 3px 0 #fff}
.ctrl{font-size:14px;color:#D9D3C7}
.brand-demo{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center;margin-top:56px;padding:20px 28px 20px 20px;border:2px solid #fff;border-radius:28px}
.demo-thumb{position:relative;flex:0 0 auto;width:88px;aspect-ratio:4/5;border-radius:16px;border:2px solid #fff;overflow:hidden}
.demo-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.demo-thumb .badge{display:none}
.brand-demo p{margin:0;flex:1 1 360px;min-width:0;font-size:17px;line-height:1.5;color:#D9D3C7}
.brand-demo p strong{display:block;margin-bottom:4px;font-family:var(--display);font-weight:700;font-size:23px;color:#fff}
.btn-ondark{background:var(--ink);color:#fff;border-color:#fff}
.btn-ondark:hover{box-shadow:4px 4px 0 var(--yellow)}
@media (max-width:860px){
  /* Phones and small tablets: swipe through the games instead of a long stack */
  .games-band{padding:72px 0 80px}
  .games-grid{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--pad));padding:8px var(--pad) 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .games-grid::-webkit-scrollbar{display:none}
  .game{flex:0 0 min(78%,340px);scroll-snap-align:start;scroll-margin-left:var(--pad)}
  .game:hover .game-thumb{transform:none;box-shadow:none}
  .brand-demo{margin-top:40px;padding:20px}
  .brand-demo .btn{width:100%;justify-content:center}
}
@media (max-width:640px){.games-head{margin-bottom:32px}.game .tile-meta strong{font-size:24px}}

/* 5th service icon (Web games): a little chomping arcade shape */
.i4{border-radius:50%;background:conic-gradient(from 60deg,transparent 0 60deg,var(--blue) 60deg)}
.svc:hover .i4{transform:rotate(-30deg) scale(1.1)}

/* About: text and tool chips line up with the heading, not the photo (photo 112px + 24px gap).
   On phones the heading drops under the photo, so everything stays flush left there. */
@media (min-width:641px){
  .about{max-width:996px}
  .about>p,.about>.chips{margin-left:136px}
}

/* Headline hover effects: "move" drifts its highlight, "wiggle" wiggles, "explain" talks */
.hero h1{isolation:isolate}
.fx{display:inline-block;position:relative;cursor:default}
.fx-move{background:none;padding:0 .14em}
.fx-move::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--yellow);border-radius:.18em}
.fx-move:hover::before,.fx-move.fx-on::before{animation:hl-drift 1.6s ease-in-out infinite}
@keyframes hl-drift{
  0%,100%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(.07em,-.05em) rotate(-1.6deg)}
  50%{transform:translate(-.05em,.03em) rotate(1deg)}
  75%{transform:translate(.03em,.05em) rotate(-.6deg)}
}
.fx-wiggle>span>span{display:inline-block;transform-origin:50% 80%}
.fx-wiggle:hover>span>span,.fx-wiggle.fx-on>span>span{animation:wiggle .55s ease-in-out infinite;animation-delay:calc(var(--i) * .06s)}
@keyframes wiggle{
  0%,100%{transform:translateY(0) rotate(0)}
  25%{transform:translateY(-.07em) rotate(-7deg)}
  75%{transform:translateY(.03em) rotate(6deg)}
}
.fx-explain .speech{position:absolute;left:calc(100% + .12em);top:.12em;width:.74em;height:.74em;overflow:visible;fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;pointer-events:none}
.fx-explain .speech path{stroke-dasharray:14;stroke-dashoffset:14;opacity:0}
.fx-explain:hover .speech path,.fx-explain.fx-on .speech path{animation:speak 1.1s cubic-bezier(.2,.8,.3,1) infinite}
.fx-explain .speech path:nth-child(2){animation-delay:.08s}
.fx-explain .speech path:nth-child(3){animation-delay:.16s}
@keyframes speak{
  0%{stroke-dashoffset:14;opacity:1}
  45%,60%{stroke-dashoffset:0;opacity:1}
  85%,100%{stroke-dashoffset:-14;opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .fx-move::before,.fx-wiggle>span>span,.fx-explain .speech path{animation:none!important}
  .fx-explain:hover .speech path{stroke-dashoffset:0;opacity:1}
}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}