/* Pixel layer: the blocky, Minecraft / Roblox look shared by every page.
   Linked after each page's own stylesheet, so these rules win where they overlap.
   The sprites, XP bar, footer character and click particles are added by js/site.js (section 7). */

:root{
  --px-ink:#111111;
  --px-grass:#5d9e3a;
  --px-grass-light:#7cc04b;
  --px-dirt:#866043;
  --px-dirt-dark:#5e4029;
  --px-diamond:#4aedd9;
  --px-gold:#f9d34b;
  --px-xp:#8fdc2a;
  --px-shadow:3px 3px 0 var(--px-ink);
}

/* Text selection in grass green. */
::selection{background:var(--px-grass);color:#ffffff}

/* Small uppercase labels (section eyebrows, card labels, metadata terms) use the pixel face. */
main section p.uppercase,
main dt.uppercase,
#site-footer p.uppercase{font-family:'Monocraft','IBM Plex Mono',monospace;letter-spacing:.12em}

/* ---------------------------------------------------------------- buttons
   Filled buttons become chunky game buttons: square corners, a black edge, a light bevel on the
   top-left, a dark bevel on the bottom-right and a hard drop shadow. Pressing pushes the
   button into its shadow. */
main a.bg-primary,
main button.bg-primary,
#site-header a.bg-primary,
#site-footer a.bg-primary,
main button[type="submit"]{
  font-family:'Monocraft','IBM Plex Mono',monospace;
  border-radius:0 !important;
  border:2px solid var(--px-ink) !important;
  box-shadow:inset 3px 3px 0 #ffffff66,inset -3px -3px 0 #00000033,var(--px-shadow);
  transition:transform .08s steps(2),box-shadow .08s steps(2),filter .18s ease-out;
}
main a.bg-primary:hover,
main button.bg-primary:hover,
#site-header a.bg-primary:hover,
#site-footer a.bg-primary:hover,
main button[type="submit"]:hover{
  transform:translate(-1px,-1px);
  box-shadow:inset 3px 3px 0 #ffffff66,inset -3px -3px 0 #00000033,4px 4px 0 var(--px-ink);
}
main a.bg-primary:active,
main button.bg-primary:active,
#site-header a.bg-primary:active,
#site-footer a.bg-primary:active,
main button[type="submit"]:active{
  transform:translate(3px,3px);
  box-shadow:inset 3px 3px 0 #00000033,inset -3px -3px 0 #ffffff44,0 0 0 var(--px-ink);
}

/* Outlined buttons (a bordered link with padding) pick up the same hard shadow on hover. */
main a.inline-flex.border:not(.bg-primary){border-radius:0;transition:transform .08s steps(2),box-shadow .08s steps(2),background-color .18s ease-out}
main a.inline-flex.border:not(.bg-primary):hover{transform:translate(-2px,-2px);box-shadow:var(--px-shadow)}
main a.inline-flex.border:not(.bg-primary):active{transform:translate(1px,1px);box-shadow:none}

/* Topic chips and filter pills turn into square tiles. */
main button.rounded-full,main li>span.rounded-full{border-radius:0 !important}

/* ---------------------------------------------------------------- cards
   Linked cards and bordered articles lift onto a block shadow when hovered. */
main a.group.border,
main article.border{transition:transform .12s steps(3),box-shadow .12s steps(3)}
main a.group.border:hover,
main article.border:hover{transform:translate(-3px,-3px);box-shadow:4px 4px 0 var(--px-ink)}

/* Image frames get stepped corners, like a sprite cut from a grid. */
main figure>div.border{
  clip-path:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,
    100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,
    8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));
}

/* ---------------------------------------------------------------- hero sprites */
.px-host{position:relative}
.px-sprite{position:absolute;z-index:6;pointer-events:none;image-rendering:pixelated;
  filter:drop-shadow(3px 3px 0 #00000026)}
.px-sprite svg{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:no-preference){
  .px-sprite{animation:px-bob 1.8s steps(2,jump-none) infinite}
  .px-sprite:nth-child(even){animation-duration:2.4s;animation-delay:-.6s}
}
@keyframes px-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* On phones the sprites sit behind the text and are smaller, so they never cover a word. */
@media (max-width:47.99rem){.px-sprite{z-index:0;opacity:.55;width:24px !important}.px-sprite.px-desktop{display:none}}

/* ---------------------------------------------------------------- XP bar
   A segmented green bar across the top of the window that fills as the page is read. */
.px-xp{position:fixed;inset:0 0 auto 0;z-index:60;height:6px;pointer-events:none;
  background:#1a1a1a;border-bottom:1px solid var(--px-ink)}
.px-xp>span{display:block;height:100%;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(var(--px-xp) 0 50%,#5fa818 50% 100%)}
.px-xp::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 calc(5% - 2px),var(--px-ink) calc(5% - 2px) 5%)}

/* ---------------------------------------------------------------- footer grass
   A strip of grass blocks along the top edge of the footer, with a blocky character on it. */
#site-footer{position:relative}
#site-footer::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' shape-rendering='crispEdges'%3E%3Crect width='32' height='16' fill='%23866043'/%3E%3Crect width='32' height='6' fill='%235d9e3a'/%3E%3Crect x='0' y='6' width='4' height='2' fill='%235d9e3a'/%3E%3Crect x='10' y='6' width='2' height='4' fill='%235d9e3a'/%3E%3Crect x='20' y='6' width='4' height='2' fill='%235d9e3a'/%3E%3Crect x='28' y='6' width='2' height='2' fill='%235d9e3a'/%3E%3Crect x='4' y='0' width='4' height='2' fill='%237cc04b'/%3E%3Crect x='16' y='2' width='2' height='2' fill='%237cc04b'/%3E%3Crect x='24' y='0' width='4' height='2' fill='%237cc04b'/%3E%3Crect x='6' y='10' width='2' height='2' fill='%235e4029'/%3E%3Crect x='16' y='12' width='4' height='2' fill='%235e4029'/%3E%3Crect x='26' y='10' width='2' height='4' fill='%235e4029'/%3E%3Crect x='2' y='14' width='2' height='2' fill='%23a07a55'/%3E%3Crect x='22' y='10' width='2' height='2' fill='%23a07a55'/%3E%3C/svg%3E");
  background-size:32px 16px;background-repeat:repeat-x;image-rendering:pixelated;
  border-top:2px solid var(--px-ink)}
.px-noob{position:absolute;right:clamp(16px,8vw,120px);top:-16px;width:36px;transform:translateY(-100%);
  pointer-events:none;image-rendering:pixelated}
.px-noob svg{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:no-preference){.px-noob{animation:px-hop 3.2s steps(1) infinite}}
@keyframes px-hop{0%,86%,100%{transform:translateY(-100%)}90%,94%{transform:translateY(calc(-100% - 6px))}}

/* ---------------------------------------------------------------- click particles */
.px-bit{position:fixed;z-index:70;width:6px;height:6px;pointer-events:none}

/* ---------------------------------------------------------------- scrollbar */
html{scrollbar-color:#3a3a3a #d4d4d4}
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:#d4d4d4;border-left:2px solid var(--px-ink)}
::-webkit-scrollbar-thumb{background:#3a3a3a;border:2px solid var(--px-ink);box-shadow:inset 2px 2px 0 #6a6a6a,inset -2px -2px 0 #1a1a1a}
::-webkit-scrollbar-thumb:hover{background:var(--px-grass)}

@media (prefers-reduced-motion:reduce){
  main a.bg-primary,main a.inline-flex.border,main a.group.border,main article.border{transition:none}
}

/* Home team rail: portraits sit in grayscale and fade to full colour on hover or keyboard focus.
   Touch screens cannot hover, so they always show the portraits in colour. */
#cards-container article img{transition:filter .35s ease-out}
#cards-container article:hover img,
#cards-container article:focus-within img{filter:none}
@media (prefers-reduced-motion:reduce){#cards-container article img{transition:none}}
@media (hover:none){#cards-container article img{filter:none}}

/* Home "Service architecture" intro: heading on the left, studio video on the right from
   large screens down to a stacked layout on phones. The video sits on a white LEGO plate:
   studs fill the border around it (background-repeat: space keeps every stud whole at any
   width), a red brick rests on the top edge and a blue one on the bottom corner. */
#studio-capabilities .studio-intro{display:grid;gap:2rem;align-items:center}
#studio-capabilities .studio-video{
  --brick-plate:#ffffff;--brick-red:#d01012;--brick-blue:#0d69ac;
  position:relative;margin-top:1.5rem;padding:24px;
  border:2px solid var(--px-ink);box-shadow:var(--px-shadow);
  background-color:var(--brick-plate);
  background-image:
    radial-gradient(circle at 42% 38%,#fff8 0 2px,transparent 2.5px),
    radial-gradient(circle,var(--brick-plate) 0 6.5px,#cfcfcf 7px 8px,#0006 8.5px 9px,transparent 9.5px);
  background-size:24px 24px;background-repeat:space;background-origin:border-box}
#studio-capabilities .studio-video iframe{display:block;width:100%;aspect-ratio:16/9;border:2px solid var(--px-ink);background:var(--px-ink)}
#studio-capabilities .studio-video::before,
#studio-capabilities .studio-video::after{
  content:"";position:absolute;pointer-events:none;
  filter:drop-shadow(2px 0 0 var(--px-ink)) drop-shadow(-2px 0 0 var(--px-ink)) drop-shadow(0 2px 0 var(--px-ink)) drop-shadow(0 -2px 0 var(--px-ink)) drop-shadow(3px 3px 0 var(--px-ink))}
/* A 3-stud red brick resting on the top edge. */
#studio-capabilities .studio-video::before{
  top:-40px;left:32px;width:84px;height:38px;
  background:
    linear-gradient(#fff5,#fff5) left 0 bottom 22px/100% 3px no-repeat,
    linear-gradient(var(--brick-red),var(--brick-red)) bottom/100% 28px no-repeat,
    repeating-linear-gradient(90deg,transparent 0 8px,var(--brick-red) 8px 20px,transparent 20px 28px) top/100% 10px no-repeat}
/* A 2-stud blue brick hooked over the bottom-right corner. */
#studio-capabilities .studio-video::after{
  bottom:-16px;right:28px;width:56px;height:38px;
  background:
    linear-gradient(#fff5,#fff5) left 0 bottom 22px/100% 3px no-repeat,
    linear-gradient(var(--brick-blue),var(--brick-blue)) bottom/100% 28px no-repeat,
    repeating-linear-gradient(90deg,transparent 0 8px,var(--brick-blue) 8px 20px,transparent 20px 28px) top/100% 10px no-repeat}
@media (min-width:64rem){#studio-capabilities .studio-intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.5rem}#studio-capabilities .studio-video{margin-top:0}}

/* Tablet widths: the footer email is longer than its column, and some decorative shapes reach
   past the right edge. Let the address wrap and clip anything that pokes out, so the page never
   scrolls sideways. clip (unlike hidden) keeps the sticky header working. */
#site-footer a[href^="mailto:"]{overflow-wrap:anywhere;max-width:100%}
html,body{overflow-x:clip}

/* Seven header links on tablet and laptop widths: tighter link and button spacing, and no thin
   divider lines, leave room for the studio name beside the logo. Below 1024px there is never
   room for the whole name, so the logo stands alone instead of showing a cut-off "CEK...".
   Wide screens keep the original spacing. */
@media (min-width:48rem) and (max-width:79.99rem){
  #site-header nav[aria-label="Primary"] a{padding-left:.22rem;padding-right:.22rem;letter-spacing:.12em}
  #site-header span[aria-hidden="true"].w-px{display:none!important}
  #site-header a[href$="contact/"].bg-primary{letter-spacing:.08em}
}
@media (min-width:48rem) and (max-width:63.99rem){
  #site-header a > span.truncate{display:none}
}