/* ============ FONTS (self-hosted, OFL) ============ */
@font-face { font-family: "Pixelify"; src: url(../fonts/pixelify-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pixelify"; src: url(../fonts/pixelify-sans-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url(../fonts/silkscreen-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mozilla Headline"; src: url(../fonts/mozilla-headline-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mozilla Headline"; src: url(../fonts/mozilla-headline-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url(../fonts/bricolage-grotesque-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url(../fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url(../fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2"); font-weight: 800; font-display: swap; }

/* ============ TOKENS ============ */
:root {
  color-scheme: dark;
  --bg: #121212;
  --bg-2: #1b1b1b;
  --bg-3: #262626;
  --ink: #f4efe4;
  --cream: #efe7d6;
  --muted: #b4ada1;      /* 7.9:1 on bg */
  --lime: #d4ff3a;
  --lime-d: #9cc21a;
  --yellow: #ffc83d;
  --pink: #ff8fb4;
  --red: #ff4d4d;
  --blue: #3d8bff;
  --f-px: "Pixelify", "Silkscreen", ui-monospace, monospace;
  --f-ui: "Silkscreen", ui-monospace, monospace;
  --f-head: "Mozilla Headline", "Bricolage", system-ui, sans-serif;
  --gut: clamp(16px, 4vw, 48px);
  --b: 4px; /* pixel border */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.55 var(--f-head);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
canvas { display: block; }
a { color: var(--lime); }
a:hover { color: var(--ink); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--lime); color: #121212; padding: 10px 14px; font-family: var(--f-ui); }
.skip:focus { left: 8px; }
.pix { image-rendering: pixelated; image-rendering: crisp-edges; }
svg.pxa { display: block; overflow: visible; }
svg.pxa rect { transition: fill-opacity .15s ease-out; }
.br-d { display: none; }
@media (min-width: 900px) { .br-d { display: inline; } }

/* ============ TYPE ============ */
.h1, .h2 { font-family: var(--f-head); font-weight: 600; letter-spacing: -.015em; text-align: center; margin: 0 auto; text-wrap: balance; }
.h1 { font-size: clamp(40px, 6.4vw, 118px); line-height: 1.02; max-width: 15ch; }
.h2 { font-size: clamp(34px, 4.6vw, 96px); line-height: 1.05; max-width: 17ch; }
.h2--xl { font-size: clamp(38px, 6vw, 88px); max-width: 16ch; }
.sub { font-size: clamp(16px, 1.3vw, 24px); color: var(--muted); text-align: center; max-width: 54ch; margin: 22px auto 0; }
/* scramble: chars not yet revealed */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scr { font-family: var(--f-px); color: var(--lime); font-weight: 700; }
.hid { opacity: 0; }

/* ============ LOADER ============ */
.loader { position: fixed; inset: 0; z-index: 300; background: var(--bg); display: grid; place-items: center; transition: opacity .5s steps(5), visibility 0s .5s; }
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__box { width: min(320px, 80vw); text-align: center; }
.loader__title { font: 700 56px/1 var(--f-px); color: var(--lime); margin: 0 0 24px; text-shadow: 4px 4px 0 #4d5e10; }
.loader__bar { height: 20px; box-shadow: inset 0 0 0 var(--b) var(--cream); padding: 6px; }
.loader__bar i { display: block; height: 100%; width: 0; background: var(--lime); }
.loader__txt { font: 400 12px/1 var(--f-ui); color: var(--muted); margin: 16px 0 0; }

/* ============ TOP ============ */
.top { position: fixed; inset: 0 0 auto; z-index: 60; height: 96px; background: linear-gradient(var(--bg) 58%, rgba(18,18,18,0)); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.logo {
  pointer-events: auto; text-decoration: none;
  font: 700 clamp(30px, 3.4vw, 44px)/1 var(--f-px); letter-spacing: .04em;
  color: var(--lime); text-shadow: 3px 3px 0 #4d5e10, 6px 6px 0 rgba(0,0,0,.35);
}
.logo:hover { color: var(--lime); animation: jitter .3s steps(2) 2; }
@keyframes jitter { 50% { transform: translate(2px, -2px); } }
.top__nav { position: absolute; right: var(--gut); top: 50%; transform: translateY(-50%); display: flex; gap: 4px; align-items: center; pointer-events: auto; }
.top__nav a { font: 400 13px/1 var(--f-ui); color: var(--muted); text-decoration: none; padding: 14px 10px; }
.top__nav a:hover { color: var(--lime); }
.top__cta { margin-left: 8px; }
.top__cta, .pbtn {
  font: 400 13px/1 var(--f-ui); text-transform: uppercase; letter-spacing: .02em;
  background: var(--lime); color: #121212; border: 0; cursor: pointer;
  min-height: 44px; padding: 0 18px;
  box-shadow: inset -4px -4px 0 var(--lime-d), 4px 4px 0 #000;
  transition: transform .1s steps(2), box-shadow .1s steps(2);
}
.top__cta:hover, .pbtn:hover { transform: translate(-2px, -2px); box-shadow: inset -4px -4px 0 var(--lime-d), 6px 6px 0 #000; }
.top__cta:active, .pbtn:active { transform: translate(2px, 2px); box-shadow: inset -4px -4px 0 var(--lime-d), 0 0 0 #000; }
.pbtn--ghost { background: var(--cream); box-shadow: inset -4px -4px 0 #c9bfa9, 4px 4px 0 #000; }
.pbtn--ghost:hover { box-shadow: inset -4px -4px 0 #c9bfa9, 6px 6px 0 #000; }
.pbtn--lg { min-height: 56px; padding: 0 28px; font-size: 15px; }
.pbtn--block { width: 100%; }
@media (max-width: 720px) {
  .top { justify-content: flex-start; padding-left: var(--gut); }
  .top__nav a { display: none; }
}

/* ============ DOCK ============ */
.dock { position: fixed; left: 14px; bottom: 14px; z-index: 60; display: flex; flex-direction: column; gap: 6px; }
.dock__btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; padding: 0; cursor: pointer; }
.dock__btn canvas { width: 27px; height: 27px; image-rendering: pixelated; transition: transform .12s steps(2); }
.dock__btn:hover canvas { transform: scale(1.15); }
.dock__tip { position: absolute; left: 50px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 400 11px/1 var(--f-ui); background: var(--yellow); color: #121212; padding: 7px 9px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.dock__btn:hover .dock__tip, .dock__btn:focus-visible .dock__tip { opacity: 1; }
@media (max-width: 720px) { .dock { flex-direction: row; left: 50%; transform: translateX(-50%); bottom: 10px; background: rgba(18,18,18,.92); padding: 2px 6px; box-shadow: inset 0 0 0 2px #2c2c2c; } .dock__tip { display: none; } }

/* ============ SECTIONS ============ */
.sec { position: relative; padding: 140px var(--gut) 120px; }
.scene { position: relative; }
.stage {
  height: 100vh; height: 100svh; padding: 104px var(--gut) 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px;
  overflow: hidden;
}
.stage__art { position: relative; flex: 1; width: 100%; display: grid; place-items: center; min-height: 0; }
.stage__foot { margin-top: 0; }
.stage > .h2, .stage > .sub { position: relative; z-index: 5; }
.stage > .h2 { text-shadow: 0 0 24px var(--bg); }

/* ============ HERO ============ */
.hero {
  min-height: 100vh; min-height: 100svh; padding: 96px 0 0 clamp(56px, 6vw, 96px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(16px, 3vw, 48px);
  overflow: hidden;
}
.hero__art { position: relative; align-self: end; justify-self: center; width: min(46vw, calc((100svh - 96px) * .9), 900px); }
.pix--portrait { width: 100%; height: auto; }
.hero__text { padding-right: var(--gut); padding-bottom: 8vh; }
.hero .h1 { text-align: left; margin: 0; max-width: 15ch; font-size: clamp(40px, 4.7vw, 92px); line-height: 1.06; }
.hero .sub { text-align: left; margin: 22px 0 0; }
.bubble {
  position: absolute; right: 73%; top: -7%; z-index: 3; min-width: 2.6em; text-align: center;
  font: 400 clamp(20px, 2.3vw, 44px)/1 var(--f-px); color: var(--lime); white-space: nowrap;
  padding: .55em .75em; background: var(--bg);
  box-shadow: inset 0 0 0 var(--b) var(--cream), 4px 4px 0 #000;
}
.bubble::after { /* pixel tail, steps down-right toward the face */
  content: ""; position: absolute; left: 70%; bottom: -8px; width: 8px; height: 8px; background: var(--cream);
  box-shadow: 8px 8px 0 var(--cream), 16px 16px 0 var(--cream);
}
.bubble__caret { display: inline-block; width: .16em; height: 1em; background: var(--lime); margin-left: 4px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding: 96px var(--gut) 0; align-content: start; }
  .hero__text { order: -1; padding: 0; text-align: center; }
  .hero .h1, .hero .sub { text-align: center; margin-inline: auto; }
  .hero__art { width: min(84vw, 420px); margin-top: 40px; }
  .bubble { font-size: 13px; padding: 11px 12px; left: -2%; top: -12%; }
}

/* ============ FX LAYERS ============ */
.burst { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.swarm { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 55; pointer-events: none; mix-blend-mode: difference; }
main, .foot { position: relative; z-index: 2; }
.tracker { position: fixed; right: max(10px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); z-index: 58; width: 44px; }
.tracker__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.6vh, 16px); }
.tracker__dot { display: grid; place-items: center; width: 28px; height: 24px; }
.tracker__dot::before { content: ""; width: 10px; height: 10px; background: var(--yellow); box-shadow: 0 0 0 2px #000; clip-path: polygon(20% 0, 80% 0, 80% 20%, 100% 20%, 100% 80%, 80% 80%, 80% 100%, 20% 100%, 20% 80%, 0 80%, 0 20%, 20% 20%); transition: transform .2s, opacity .2s; }
.tracker__dot:hover::before { transform: scale(1.4); }
.tracker__dot.is-eaten::before, .tracker__dot.is-current::before { opacity: 0; transform: scale(0); }
.tracker__dot:focus-visible { outline: 2px solid var(--yellow); outline-offset: 0; }
.tracker__head { position: absolute; left: 50%; top: 0; width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .45s cubic-bezier(.3,.9,.3,1); }
.tracker__head canvas, .tracker__head img { width: 100%; height: 100%; image-rendering: pixelated; object-fit: contain; display: block; }
.tracker__head.chomp canvas, .tracker__head.chomp img { animation: chomp .4s steps(2) 2; }
@keyframes chomp { 50% { transform: scaleY(.8); } }
@media (max-width: 860px) { .tracker { display: none; } }
.glitch { position: absolute; z-index: 70; pointer-events: none; }
.rainbow { position: absolute; z-index: 54; pointer-events: none; image-rendering: pixelated; }
.glitch i { position: absolute; display: block; }

/* ============ PLAYER ============ */
.player { text-align: center; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 92px; padding-bottom: 40px; }
.char { margin: 28px auto 0; width: min(520px, 100%); }
.char__hud { display: flex; align-items: center; justify-content: space-between; width: min(300px, 100%); margin: 0 auto; font: 400 13px/1 var(--f-ui); color: var(--ink); }
.hud__hearts { display: flex; gap: 6px; }
.hud__hearts i { --p: 3px; display: block; width: calc(var(--p) * 7); height: calc(var(--p) * 6); background: #e8242c;
  clip-path: polygon(14.3% 0, 42.9% 0, 42.9% 16.7%, 57.1% 16.7%, 57.1% 0, 85.7% 0, 85.7% 16.7%, 100% 16.7%, 100% 50%, 85.7% 50%, 85.7% 66.7%, 71.4% 66.7%, 71.4% 83.3%, 57.1% 83.3%, 57.1% 100%, 42.9% 100%, 42.9% 83.3%, 28.6% 83.3%, 28.6% 66.7%, 14.3% 66.7%, 14.3% 50%, 0 50%, 0 16.7%, 14.3% 16.7%); }
.char__fig { width: 260px; height: clamp(220px, 36svh, 480px); display: grid; place-items: center; flex: none; }
.tglitch { position: absolute; left: 0; top: 0; z-index: 60; pointer-events: none; }
.tglitch i { position: absolute; opacity: 0; }
.char__stage { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 3vw, 40px); margin: 14px 0 18px; }
.pix--char { transform-origin: 50% 50%; }
.pix--char rect { transition: none !important; }

/* ============ STORY (one pinned stage) ============ */
.story { position: relative; }
.story__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.scene > .stage { position: sticky; top: 0; }
.story__stage > .chapter { position: absolute; inset: 0; visibility: hidden; opacity: 0; will-change: opacity, transform; }

/* ============ SPLIT STAGES (text + art) ============ */
.stage--split { flex-direction: row; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 80px); padding-left: clamp(64px, 7vw, 120px); padding-right: clamp(56px, 6vw, 110px); }
.split__text { flex: 1 1 0; min-width: 0; max-width: 560px; }
.split__text .h2, .split__text .sub { text-align: left; margin-left: 0; }
@media (max-width: 860px) {
  .stage--split { flex-direction: column; justify-content: space-between; padding-left: var(--gut); padding-right: var(--gut); }
  .split__text { flex: 0 0 auto; }
  .split__text .h2, .split__text .sub { text-align: center; margin-inline: auto; }
}

/* ============ DNA ============ */
.dna-col { flex: 0 0 auto; position: relative; align-self: stretch; width: min(34vw, 420px); margin: -104px 0 -56px; overflow: hidden; }
.dna-col svg { position: absolute; left: 50%; top: 0; transform: translateX(-50%); will-change: transform; }
@media (max-width: 860px) { .dna-col { width: 100%; flex: 1; margin: 0 0 76px; min-height: 0; } }

/* ============ CARDS ============ */
.deck { position: relative; width: min(64vw, 700px); height: min(46vh, 420px); }
.card { position: absolute; left: 50%; top: 50%; width: min(20vh, 15vw, 190px); height: auto; transform-origin: 50% 110%; will-change: transform; filter: drop-shadow(8px 8px 0 #000); }
@media (max-width: 720px) { .card { width: 26vw; } .deck { width: 94vw; } }

/* ============ HANDS ============ */
.hands { overflow: visible; }
.hand { position: absolute; top: 50%; width: min(28vw, 46vh, 380px); height: auto; will-change: transform; }
.hand--l { right: 50%; }
.hand--r { left: 50%; }
.spark { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; transform: translate(-50%, -50%); pointer-events: none; }

/* ============ EARTH ============ */
.earth { flex: 0 0 auto; width: min(40vw, 62vh, 560px); height: auto; aspect-ratio: 1; }
.stage--cta .cta__btns { align-items: flex-start; }
.stage--cta .socials { justify-content: flex-start; }
@media (max-width: 860px) { .earth { width: min(72vw, 40vh); } .stage--cta .cta__btns { align-items: center; } .stage--cta .socials { justify-content: center; } }

/* ============ IDEA ============ */
.pix--brain { width: min(98vw, 1300px, calc((100svh - 330px) * 3.0)); height: auto; }
.split-word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font: 700 clamp(30px, 5vw, 64px)/1 var(--f-px); color: var(--ink); white-space: nowrap; pointer-events: none; }

/* ============ LAUNCH ============ */
.stage__art--tall { overflow: hidden; }
.streaks { position: absolute; inset: 0; width: 100%; height: 100%; }
.rocket { position: relative; width: min(42vh, 46vw, 360px); display: flex; flex-direction: column; align-items: center; will-change: transform; }
.pix--rocket { width: 100%; height: auto; }
.pix--flame { width: 100%; height: auto; margin-top: -2px; }

/* ============ STORES ============ */
.pix--bag { width: min(44vh, 70vw, 400px); height: auto; position: relative; z-index: 2; }
.drops { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.drop { position: absolute; left: 50%; top: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; will-change: transform; }
.drop canvas { width: clamp(56px, 9vh, 88px); height: auto; image-rendering: pixelated; }
.drop span { font: 400 11px/1 var(--f-ui); color: #121212; background: var(--cream); padding: 6px 8px; white-space: nowrap; }
.cart { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); margin: 0; font: 400 12px/1 var(--f-ui); color: var(--muted); white-space: nowrap; }
.cart b { color: var(--lime); font-weight: 400; }

/* ============ CAMPAIGNS ============ */
.phone { position: relative; display: inline-block; }
.pix--phone { width: 100%; height: auto; }
.notes { list-style: none; margin: 0; padding: 0; position: absolute; left: 9%; right: 9%; top: 15%; display: flex; flex-direction: column; gap: 8px; }
.notes li { background: var(--cream); color: #121212; padding: 8px 10px; box-shadow: 3px 3px 0 #000; opacity: 0; will-change: transform; }
.notes b { display: block; font: 400 10px/1.2 var(--f-ui); color: #121212; }
.notes span { display: block; font: 400 12px/1.3 var(--f-head); }
.notes li:nth-child(1) b::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--lime-d); margin-right: 6px; }
.notes li:nth-child(2) b::before, .notes li:nth-child(5) b::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--pink); margin-right: 6px; }
.notes li:nth-child(3) b::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--blue); margin-right: 6px; }
.notes li:nth-child(4) b::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--yellow); margin-right: 6px; }
.hearts { position: absolute; inset: -20% -40% 0; pointer-events: none; }
.hearts canvas { position: absolute; bottom: 10%; width: 28px; image-rendering: pixelated; opacity: 0; }

/* ============ WORK ============ */
.worlds { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 40px auto 36px; }
.world { font: 400 13px/1 var(--f-ui); min-height: 44px; padding: 0 16px; cursor: pointer; border: 0; color: var(--muted); background: var(--bg-2); box-shadow: inset 0 0 0 3px #333; }
.world:hover { color: var(--ink); }
.world.is-on { background: var(--lime); color: #121212; box-shadow: 4px 4px 0 #000; }
.carts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 22px; max-width: 1180px; margin: 0 auto; }
.cartridge {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 14px 14px 18px; background: #2a2a2a;
  box-shadow: inset 0 0 0 var(--b) #3a3a3a, 6px 6px 0 #000;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  transition: transform .12s steps(2);
}
.cartridge:hover { transform: translate(-3px, -3px); }
.cartridge::before { /* grip ridges */
  content: ""; position: absolute; left: 14px; right: 34px; top: 6px; height: 4px;
  background: repeating-linear-gradient(90deg, #3a3a3a 0 8px, transparent 8px 12px);
}
.cartridge__label { margin-top: 10px; background: var(--c); color: #121212; padding: 14px 14px 16px; min-height: 118px; display: flex; flex-direction: column; }
.cartridge__label span { font: 400 11px/1 var(--f-ui); opacity: .75; }
.cartridge__label h3 { font: 700 26px/1.05 var(--f-px); margin: 8px 0 6px; }
.cartridge__label p { margin: auto 0 0; font: 600 14px/1.3 var(--f-head); }
.cartridge__desc { margin: 0; color: var(--muted); font-size: 15px; padding: 0 2px; }
.cartridge a { font: 400 12px/1 var(--f-ui); text-decoration: none; margin-top: auto; padding: 10px 2px 0; }
.cartridge--locked .cartridge__label { background: repeating-linear-gradient(45deg, #333 0 10px, #2a2a2a 10px 20px); color: var(--ink); }

/* ============ BOOT WINDOWS ============ */
.stage--boot { justify-content: center; }
.wins { position: relative; width: min(560px, 100%); height: min(640px, 78vh); }
.win {
  position: absolute; left: 0; width: min(440px, 88%);
  background: var(--bg); color: var(--ink);
  box-shadow: inset 0 0 0 var(--b) var(--cream), 6px 6px 0 #000;
  opacity: 0; will-change: transform;
}
.win__bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--cream); color: #121212; font: 400 12px/1 var(--f-ui); text-transform: uppercase; }
.win__bar i { width: 14px; height: 14px; background:
  linear-gradient(45deg, transparent 40%, #121212 40% 60%, transparent 60%),
  linear-gradient(-45deg, transparent 40%, #121212 40% 60%, transparent 60%); }
.win p { margin: 0; padding: 14px 16px 16px; font-size: 15px; color: var(--muted); }
.win--prompt { box-shadow: inset 0 0 0 var(--b) var(--lime), 8px 8px 0 #000; }
.win--prompt .win__bar { background: var(--lime); }
.win--prompt p { color: var(--ink); font-size: 17px; }
.win__btns { display: flex; justify-content: flex-end; gap: 12px; padding: 0 16px 16px; }
.win__nope { padding-top: 0 !important; font: 400 11px/1.4 var(--f-ui) !important; color: var(--lime) !important; }

/* ============ GAME ============ */
.game { text-align: center; }
.arcade { width: min(560px, 100%); margin: 44px auto 0; padding: 14px; background: #1e1e1e; box-shadow: inset 0 0 0 var(--b) var(--cream), 8px 8px 0 #000; }
.arcade__hud { display: flex; justify-content: space-between; align-items: center; font: 400 12px/1 var(--f-ui); padding: 4px 4px 12px; color: var(--muted); }
.arcade__hud b { color: var(--lime); font-weight: 400; }
#gLives { display: flex; gap: 4px; }
#gLives canvas { width: 21px; image-rendering: pixelated; }
.arcade__screen { position: relative; aspect-ratio: 4 / 3; background: #0c0c0c; box-shadow: inset 0 0 0 2px #333; }
#cvGame { width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; }
.arcade__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(12,12,12,.86); padding: 20px; }
.arcade__title { margin: 0; font: 700 clamp(30px, 5vw, 44px)/1 var(--f-px); color: var(--lime); text-shadow: 3px 3px 0 #4d5e10; }
.arcade__msg { margin: 0; font: 400 12px/1.5 var(--f-ui); color: var(--ink); max-width: 30ch; }

/* ============ CTA ============ */
.pix--plane { position: absolute; left: 0; top: 18%; width: clamp(90px, 12vw, 160px); height: auto; will-change: transform; }
.cta__btns { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 36px; }
.socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.socials a { font: 400 12px/1 var(--f-ui); color: var(--muted); text-decoration: none; padding: 12px 4px; display: inline-block; }
.socials a:hover { color: var(--lime); }

/* ============ FOOTER ============ */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 28px var(--gut) 28px 80px; border-top: 3px solid #262626; font-size: 14px; color: var(--muted); }
.foot p { margin: 0; }
@media (max-width: 720px) { .foot { padding: 24px var(--gut) 84px; } }

/* ============ MODAL ============ */
.modal { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 16px; }
.modal__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.term { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--bg); box-shadow: inset 0 0 0 var(--b) var(--cream), 10px 10px 0 #000; animation: pop .25s steps(4); }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
.term__bar { display: flex; align-items: center; justify-content: space-between; background: var(--cream); color: #121212; font: 400 13px/1 var(--f-ui); padding: 4px 4px 4px 16px; }
.term__x { width: 44px; height: 40px; border: 0; background: none; cursor: pointer; color: #121212; font-size: 18px; }
.term__body { padding: 20px 22px 24px; display: grid; gap: 6px; }
.term__lead { margin: 0 0 6px; font: 700 22px/1.2 var(--f-head); }
.term label { font: 400 11px/1 var(--f-ui); color: var(--muted); margin-top: 10px; }
.term input, .term textarea { width: 100%; border: 0; border-radius: 0; background: #0c0c0c; color: var(--ink); font: 400 16px/1.4 var(--f-head); padding: 12px 14px; min-height: 46px; box-shadow: inset 0 0 0 3px #333; }
.term input:focus, .term textarea:focus { outline: none; box-shadow: inset 0 0 0 3px var(--lime); }
.term textarea { resize: vertical; }
.term .pbtn { margin-top: 18px; }
.term__status { margin: 10px 0 0; min-height: 1em; font: 400 11px/1.4 var(--f-ui); color: var(--lime); }

/* ============ FADE (non-scramble reveals) ============ */
.fade { opacity: 0; transform: translateY(16px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.fade.is-in { opacity: 1; transform: none; }

/* ============ SMALL SCREENS ============ */
@media (max-width: 720px) {
  .sec { padding: 110px var(--gut) 90px; }
  .stage { padding: 88px var(--gut) 76px; }
  .hero__art { width: min(300px, 76vw); }
  .wins { height: min(560px, 70vh); }
  .win p { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fade { opacity: 1; transform: none; }
}

/* ============ STORE ============ */
.shop { position: relative; display: inline-block; }
.neon {
  position: absolute; left: 14%; top: 44%; margin: 0; z-index: 2;
  font: 700 calc(var(--u) * 1.15) / 1 var(--f-px); letter-spacing: .06em; white-space: nowrap;
  color: #ff5fa2; opacity: 0;
  text-shadow: 0 0 4px #ff5fa2, 0 0 14px #ff2d87, 0 0 32px #ff2d87;
}
.neon.on { animation: buzz 3.2s steps(1) infinite; }
@keyframes buzz { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .35; } 49% { opacity: 1; } 51% { opacity: .5; } 52% { opacity: 1; } }
.orders { list-style: none; margin: 0; padding: 0; position: absolute; left: 78%; top: 60%; z-index: 3; pointer-events: none; }
.orders li { position: absolute; left: 0; top: 0; white-space: nowrap; font: 400 12px/1 var(--f-ui); color: #121212; background: var(--lime); padding: 7px 9px; box-shadow: 3px 3px 0 #000; opacity: 0; }

/* ============ LAPTOP ============ */
.laptop { position: relative; display: inline-block; }
.laptop__screen { position: absolute; left: 0; top: 0; }

/* ============ PROJECTS WINDOW ============ */
.pwin { position: relative; width: min(1180px, 100%); height: min(760px, calc(100vh - 32px)); display: flex; flex-direction: column; background: var(--bg); border: var(--b) solid var(--cream); box-shadow: 12px 12px 0 #000; overflow: hidden; animation: pop .3s cubic-bezier(.2,.8,.2,1); }
.pwin__body { flex: 1; min-height: 0; display: flex; }
.pwin__side { flex: 0 0 300px; min-height: 0; padding: 22px 0 20px; border-right: 3px solid #262626; display: flex; flex-direction: column; gap: 16px; }
.pwin__who { padding: 0 22px; }
.pwin__name { margin: 0 0 6px; font: 700 28px/1 var(--f-px); color: var(--lime); }
.pwin__role { margin: 0; font: 400 11px/1.4 var(--f-ui); color: var(--ink); }
.pwin__cta { margin: auto 22px 0; align-self: flex-start; }
.pwin__main { flex: 1; min-width: 0; padding: 26px 26px 30px; overflow: auto; overscroll-behavior: contain; }
.pwin__main:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }
.ptabs { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; padding: 2px 12px; gap: 4px; scrollbar-width: thin; }
.ptab { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; text-align: left; min-height: 46px; padding: 6px 10px; border: 0; cursor: pointer;
  background: none; color: var(--muted); font: 600 15px/1.2 var(--f-head); }
.ptab:hover { color: var(--ink); background: #1b1b1b; }
.ptab.is-on { background: var(--lime); color: #121212; box-shadow: 4px 4px 0 #000; }
.ptab:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
.ptab__n { font: 400 11px/1 var(--f-ui); opacity: .7; }
.ptab__short { display: none; }
.ptab__count { font: 400 10px/1 var(--f-ui); padding: 5px 6px; box-shadow: inset 0 0 0 2px currentColor; opacity: .75; }
.ptab__count.is-soon { box-shadow: none; opacity: .55; }
.ptab.is-featured .ptab__name::after { content: " ★"; color: var(--lime); }
.ptab.is-featured.is-on .ptab__name::after { color: #121212; }
.ppanel__head { margin: 0 0 22px; max-width: 720px; }
.ppanel__title { margin: 0; font: 600 clamp(24px, 2.4vw, 34px)/1.1 var(--f-head); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ppanel__flag { font: 400 10px/1 var(--f-ui); background: var(--lime); color: #121212; padding: 6px 8px; }
.ppanel__blurb { margin: 10px 0 0; color: var(--muted); font-size: 16px; }
.pwin__main .carts { max-width: none; margin: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 20px; }
.cartridge__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-top: 10px; display: block; }
.cartridge__img + .cartridge__label { margin-top: 0; min-height: 0; }
.cartridge__tags { list-style: none; margin: 0; padding: 0 2px; display: flex; flex-wrap: wrap; gap: 6px; }
.cartridge__tags li { font: 400 10px/1 var(--f-ui); color: var(--muted); padding: 6px 7px; box-shadow: inset 0 0 0 2px #444; }
.cartridge__stats { margin: 0; padding: 0 2px; display: flex; flex-wrap: wrap; gap: 14px; }
.cartridge__stats dt { font: 700 24px/1 var(--f-px); color: var(--lime); }
.cartridge__stats dd { margin: 4px 0 0; font: 400 10px/1.3 var(--f-ui); color: var(--muted); }
@media (max-width: 860px) {
  #projects.modal { padding: 0; grid-template-columns: minmax(0, 1fr); }
  .pwin { width: 100%; max-width: 100vw; min-width: 0; height: 100dvh; box-shadow: none; border: 0; }
  .pwin__body, .pwin__side, .pwin__main { min-width: 0; max-width: 100%; }
  .pwin__body { flex-direction: column; }
  .pwin__side { flex: none; padding: 12px 0 0; gap: 10px; border-right: 0; border-bottom: 3px solid #262626; }
  .pwin__who { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 16px; }
  .pwin__name { font-size: 20px; margin: 0; }
  .pwin__role { font-size: 9px; text-align: right; }
  .ptabs { flex: none; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 4px 16px 12px; gap: 8px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ptabs::-webkit-scrollbar { display: none; }
  .ptab { flex: none; display: flex; gap: 8px; min-height: 44px; padding: 0 12px; font-size: 14px; white-space: nowrap; scroll-snap-align: center; background: var(--bg-2); box-shadow: inset 0 0 0 3px #333; }
  .ptab.is-on { box-shadow: 3px 3px 0 #000; }
  .ptab__name, .ptab__n { display: none; }
  .ptab__short { display: inline; }
  .ptab.is-featured .ptab__short::after { content: " ★"; }
  .pwin__cta { position: absolute; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 2; margin: 0; }
  .pwin__main { padding: 18px 16px calc(84px + env(safe-area-inset-bottom)); }
  .pwin__main .carts { grid-template-columns: 1fr; gap: 16px; }
  .cartridge__label { min-height: 0; }
}

/* =====================================================================
   DESKTOP COMPOSITIONS
   Measured from the reference at 1440×900: headings 55px / 600 / 1.1,
   copy 17px, 35px side margin, content starting ~100px from the top,
   and art that fills most of the frame. Each scene gets its own layout.
   ===================================================================== */
:root { --m: clamp(24px, 2.45vw, 56px); --mb: 96px; --mr: 88px; --t: clamp(100px, 12.4vh, 140px); --h2d: clamp(34px, 3.82vw, 78px); --subd: clamp(15px, 1.18vw, 21px); }
@media (min-width: 861px) {
  .h2 { font-size: var(--h2d); line-height: 1.1; font-weight: 600; letter-spacing: -.01em; }
  #story .chapter, #cta .stage { display: block; padding: 0; }
  #story .chapter .h2, #cta .h2 { text-align: left; margin: 0; max-width: none; text-shadow: none; }
  #story .chapter .sub, #cta .sub { font-size: var(--subd); line-height: 1.5; text-align: left; margin: 0; max-width: none; }
  #story .chapter .stage__art { position: absolute; display: grid; place-items: center; min-height: 0; width: auto; flex: none; }
  #story .cblock, #story .chapter > .h2, #story .chapter > .sub { position: absolute; z-index: 5; }
  #story .cblock .sub, #cta .split__text .sub { margin-top: 1.3em; }

  /* idea — heading top-left, brain large in the centre */
  .L-idea .cblock { left: var(--m); top: var(--t); width: min(24vw, 420px); }
  .L-idea .stage__art { left: var(--mb); right: var(--mr); top: 0; bottom: 0; }   /* brain sits in the centre of the screen */

  /* dna — helix runs the full height in a centre column, copy bottom-left */
  .L-dna .split__text { position: absolute; left: var(--m); top: var(--t); width: min(30vw, 540px); max-width: none; z-index: 5; }
  .L-dna .dna-col { position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); width: min(25vw, 400px); margin: 0; }

  /* cards — heading top-right, copy bottom-left, cards big centre-left */
  .L-cards > .h2 { right: var(--mr); top: var(--t); width: min(24vw, 440px); }
  .L-cards > .sub { left: var(--mb); bottom: 9vh; width: min(22vw, 380px); }
  .L-cards .stage__art { left: 10%; right: 30%; top: 11%; bottom: 6%; }
  .L-cards .deck { width: 100%; height: 100%; }
  .L-cards .card { width: min(20vw, 40vh, 400px); }

  /* launch — heading top centre, rocket centre, copy bottom centre */
  #story .L-launch > .h2 { left: 0; right: 0; top: var(--t); text-align: center; }
  #story .L-launch > .sub { left: 50%; bottom: 8vh; transform: translateX(-50%); width: min(32vw, 480px); text-align: center; }
  .L-launch .stage__art { left: 22%; right: 22%; top: 24%; bottom: 17%; }
  .L-launch .rocket { width: auto; }

  /* campaigns — copy left-middle, phone tall on the right */
  .L-camp .cblock { left: var(--m); top: 50%; transform: translateY(-50%); width: min(36vw, 620px); }
  .L-camp .stage__art { left: 46%; right: var(--mr); top: 14%; bottom: 5%; }

  /* code — heading top-right, laptop large and bleeding off the bottom-left */
  .L-code .cblock { right: var(--mr); top: var(--t); width: min(27vw, 480px); }
  .L-code .stage__art { left: var(--mb); right: 36%; top: 22%; bottom: -7%; place-items: end center; }

  /* contact — copy left-middle, globe large on the right */
  .L-cta { display: flex !important; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 calc(var(--m) + 40px) 0 var(--m) !important; }
  .L-cta .split__text { max-width: min(46vw, 760px); }
  .L-cta .earth { width: min(40vw, 74vh, 680px); }

  /* founder section */
  .player .h2 { max-width: 20ch; }
  .hero__text { padding-right: var(--mr); }
}

/* the sound icon bobs a few times after load, so visitors notice the site has sound */
@keyframes sound-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(-5px) scale(1.15); } }
@media (prefers-reduced-motion: no-preference) { #soundBtn[aria-pressed="false"] canvas { animation: sound-nudge .7s steps(3) 4s 6; } }


/* ----- glasses overlay + stacking blocks ----- */
.lens { position: absolute; inset: 0; z-index: 4; pointer-events: none; visibility: hidden; overflow: hidden; }
.lens svg { display: block; }
.lens svg rect { transition: none !important; }
.well { position: relative; box-shadow: 0 0 0 var(--b, 4px) var(--cream); background: #0c0c0c; line-height: 0; }
.well canvas { display: block; }
.well__msg { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; text-align: center; opacity: 0; pointer-events: none;
  font: 700 calc(var(--cell, 30px) * 1.15)/1.15 var(--f-px); color: var(--ink); text-shadow: 3px 3px 0 #000; }
.sbubble { position: relative; display: inline-block; min-width: 9ch; min-height: 2.6em; margin: 0 0 22px; padding: .7em .9em; font: 400 13px/1.2 var(--f-ui); color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--cream); }
.sbubble::after { content: ""; position: absolute; right: 14px; bottom: -9px; width: 9px; height: 9px; background: var(--cream); }
.stack__cta { margin-top: 26px; }
@media (min-width: 861px) {
  .L-look > .h2 { left: 50%; top: var(--t); transform: translateX(-50%); width: min(60vw, 900px); text-align: center !important; }
  .L-look > .sub { left: 50%; bottom: 9vh; transform: translateX(-50%); width: min(44vw, 560px); text-align: center !important; }
  .L-stack .stage__art { left: var(--mb); right: 52%; top: 13%; bottom: 8%; }
  .L-stack .cblock { left: 54%; top: 50%; transform: translateY(-50%); width: min(33vw, 560px); }
}
@media (max-width: 860px) {
  .L-stack .cblock { text-align: center; }
  .L-stack .sbubble { display: none; }
  .stack__cta { margin-top: 14px; }
}

/* ----- evolution line-up ----- */
.evo { list-style: none; margin: 0; padding: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-end; gap: var(--evo-gap, 8px);
  border-bottom: var(--b, 4px) solid var(--cream); }
.evo li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: none; position: relative; }
.evo li svg rect { transition: fill-opacity .12s ease-out; }
.evo li span { position: absolute; top: calc(100% + 14px); left: 50%; translate: -50% 0; white-space: nowrap; font: 400 10px/1 var(--f-ui); color: var(--muted); opacity: 0; }
.evo li:last-child span { color: var(--lime); }
.evo__now { display: none; }
@media (min-width: 861px) {
  .L-evo .cblock { left: 50%; top: var(--t); transform: translateX(-50%); width: min(62vw, 860px); text-align: center; }
  .L-evo .cblock .h2, .L-evo .cblock .sub { text-align: center !important; margin-left: auto; margin-right: auto; }
  #story .L-evo .stage__art { left: var(--mb); right: var(--mr); top: 34%; bottom: 12%; display: block; }
}
@media (max-width: 860px) {
  .L-evo .stage__art { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 96px; }
  .evo { height: 46%; gap: 0; }
  .evo li span { display: none; }
  .evo__now { display: block; margin: 12px 0 0; text-align: center; font: 400 10px/1 var(--f-ui); color: var(--lime); min-height: 1em; }
}

/* =========================================================
   WEBSITE CARDS + "READ MORE" DETAIL VIEW (projects window)
   ========================================================= */
.ptools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: -6px 0 22px; }
.ptools__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ptools__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 0; cursor: pointer; background: #1b1b1b; color: var(--muted);
  box-shadow: inset 0 0 0 2px #333; font: 600 14px/1 var(--f-head); }
.ptools__chip small { font: 400 10px/1 var(--f-ui); opacity: .7; }
.ptools__chip:hover { color: var(--ink); box-shadow: inset 0 0 0 2px #555; }
.ptools__chip.is-on { background: var(--lime); color: #121212; box-shadow: 3px 3px 0 #000; }
.ptools__chip:focus-visible, .ptools__search input:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
.ptools__search { flex: 1 1 200px; max-width: 320px; margin-left: auto; }
.ptools__search input { width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 0; background: #0c0c0c; color: var(--ink); box-shadow: inset 0 0 0 2px #333; font: 400 15px/1 var(--f-head); }
.ptools__search input::placeholder { color: #77736c; }
.ptools__count { flex-basis: 100%; margin: 0; font: 400 10px/1 var(--f-ui); color: var(--muted); }
.sites__none { color: var(--muted); }

.sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: 24px 18px; }
.site { display: flex; flex-direction: column; min-width: 0; background: #181818; box-shadow: inset 0 0 0 2px #2c2c2c; }

/* browser window around each screenshot */
.shot { position: relative; display: block; overflow: hidden; color: inherit; text-decoration: none; background: #0c0c0c; box-shadow: inset 0 0 0 2px #2c2c2c; }
.shot__bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; background: #232323; border-bottom: 2px solid #2c2c2c; }
.shot__bar i { width: 8px; height: 8px; background: #444; flex: none; }
.shot__bar i:nth-child(1) { background: #ff5f57; } .shot__bar i:nth-child(2) { background: #febc2e; } .shot__bar i:nth-child(3) { background: #28c840; }
.shot__bar span { flex: 1; min-width: 0; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 10px/1 var(--f-ui); color: #8f8a82; }
.shot__view { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.shot__view img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.shot__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--c) 18%, #121212) 0 12px, color-mix(in srgb, var(--c) 12%, #121212) 12px 24px); }
.shot__ph b { font: 700 clamp(22px, 2.4vw, 34px)/1.05 var(--f-px); color: var(--c); text-shadow: 3px 3px 0 #000; }
.shot__ph small { font: 400 10px/1 var(--f-ui); color: var(--ink); opacity: .7; }
.shot__go { position: absolute; right: 10px; bottom: 10px; padding: 8px 10px; background: var(--lime); color: #121212; font: 400 11px/1 var(--f-ui); box-shadow: 3px 3px 0 #000;
  opacity: 0; translate: 0 6px; transition: opacity .2s, translate .2s; }
a.shot:hover .shot__view img, a.shot:focus-visible .shot__view img { transform: scale(1.04); }
a.shot:hover .shot__go, a.shot:focus-visible .shot__go { opacity: 1; translate: 0 0; }
a.shot:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
@media (hover: none) { .shot__go { opacity: 1; translate: 0 0; } }

/* brand logo chip */
.plogo { flex: none; display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; background: #fbf7ef; box-shadow: 3px 3px 0 #000; }
.plogo img { width: 86%; height: 86%; object-fit: contain; }
.plogo.is-dark { background: #121212; box-shadow: inset 0 0 0 2px #333, 3px 3px 0 #000; }
.plogo.is-text { background: var(--c); color: #121212; font: 700 18px/1 var(--f-px); }
.plogo--lg { width: 76px; height: 76px; }
.plogo--lg.is-text { font-size: 26px; }

.site__body { display: flex; flex-direction: column; gap: 14px; padding: 0 16px 16px; flex: 1; }
.site__head { display: flex; align-items: flex-end; gap: 14px; margin-top: -22px; position: relative; z-index: 1; }
.site__txt { min-width: 0; padding-bottom: 2px; }
.site__txt h3 { margin: 0; font: 700 22px/1.05 var(--f-px); color: var(--ink); overflow-wrap: anywhere; }
.site__txt p { margin: 5px 0 0; font: 400 14px/1.3 var(--f-head); color: var(--muted); }
.site__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.site__tags li { font: 400 10px/1 var(--f-ui); color: var(--muted); padding: 6px 7px; box-shadow: inset 0 0 0 2px #3a3a3a; }
.site__tags li:last-child { color: var(--lime); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lime) 45%, transparent); }
.site__act { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.site__more { flex: 1; min-height: 42px; border: 0; cursor: pointer; background: var(--cream); color: #121212; font: 400 11px/1 var(--f-ui); box-shadow: 3px 3px 0 #000; }
.site__more:hover { background: var(--lime); }
.site__visit { display: inline-grid; place-items: center; min-height: 42px; padding: 0 14px; color: var(--lime); text-decoration: none; font: 400 11px/1 var(--f-ui); box-shadow: inset 0 0 0 2px #3a3a3a; }
.site__visit:hover { box-shadow: inset 0 0 0 2px var(--lime); }
.site__more:focus-visible, .site__visit:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }

/* detail view */
.pdet { max-width: 1040px; }
.pdet__back { min-height: 40px; padding: 0 12px; margin: 0 0 22px; border: 0; cursor: pointer; background: #1b1b1b; color: var(--ink); box-shadow: inset 0 0 0 2px #333; font: 400 11px/1 var(--f-ui); }
.pdet__back:hover { box-shadow: inset 0 0 0 2px var(--lime); color: var(--lime); }
.pdet__back:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.pdet__head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 0 24px; }
.pdet__ttl { flex: 1; min-width: 200px; }
.pdet__ttl h3 { margin: 0; font: 700 clamp(30px, 3.4vw, 46px)/1 var(--f-px); color: var(--ink); outline: none; overflow-wrap: anywhere; }
.pdet__ttl p { margin: 8px 0 0; color: var(--muted); font-size: 17px; }
.pdet__visit { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.pdet__media { position: relative; margin: 0 0 26px; }
.pdet__media.has-phone { padding-right: 15%; }
.shot--lg .shot__bar { height: 32px; }
.shot--lg .shot__bar span { font-size: 11px; }
.pdet__phone { position: absolute; right: 0; bottom: -18px; width: 19%; aspect-ratio: 390 / 844; overflow: hidden; background: #000; box-shadow: 0 0 0 6px #222, 8px 8px 0 6px #000; border-radius: 14px; }
.pdet__phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pdet__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; margin: 0 0 30px; background: #2c2c2c; box-shadow: 0 0 0 2px #2c2c2c; }
.pdet__facts div { background: #161616; padding: 14px 16px; }
.pdet__facts dt { font: 400 10px/1 var(--f-ui); color: var(--muted); margin: 0 0 8px; }
.pdet__facts dd { margin: 0; font: 600 15px/1.3 var(--f-head); color: var(--ink); overflow-wrap: anywhere; }
.pdet__body { display: grid; gap: 26px; max-width: 760px; margin: 0 0 36px; }
.pdet__sec h4 { margin: 0 0 10px; font: 600 22px/1.15 var(--f-head); color: var(--ink); }
.pdet__sec h4::before { content: "▸ "; color: var(--lime); }
.pdet__sec p { margin: 0 0 12px; color: #cfc8bb; font-size: 17px; line-height: 1.6; }
.pdet__sec ul { margin: 0 0 12px; padding-left: 20px; color: #cfc8bb; font-size: 17px; line-height: 1.6; }
.pdet__sec.is-soon p { color: var(--muted); font-style: italic; }
.pdet__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 22px; border-top: 2px solid #2c2c2c; }
.pdet__step { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-height: 64px; padding: 12px 14px; border: 0; cursor: pointer; text-align: left;
  background: #1b1b1b; color: var(--ink); box-shadow: inset 0 0 0 2px #333; }
.pdet__step:last-child { align-items: flex-end; text-align: right; }
.pdet__step small { font: 400 10px/1 var(--f-ui); color: var(--muted); }
.pdet__step span { font: 700 18px/1.1 var(--f-px); }
.pdet__step:hover { box-shadow: inset 0 0 0 2px var(--lime); }
.pdet__step:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }

@media (max-width: 860px) {
  .ptools { margin: -4px 0 16px; gap: 10px; }
  .ptools__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; max-width: calc(100% + 32px); }
  .ptools__chips::-webkit-scrollbar { display: none; }
  .ptools__chip { flex: none; }
  .ptools__search { max-width: none; margin-left: 0; flex-basis: 100%; }
  .sites { grid-template-columns: 1fr; gap: 20px; }
  .site__txt h3 { font-size: 20px; }
  .pdet__back { margin-bottom: 16px; }
  .pdet__head { gap: 14px; }
  .pdet__visit { width: 100%; text-align: center; }
  .pdet__media.has-phone { padding-right: 0; padding-bottom: 0; }
  .pdet__phone { display: none; }
  .pdet__nav { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pdet__step span { font-size: 15px; }
}

@media (max-width: 860px) {
  /* phone: "Start a project" sits in the header row instead of floating over the content */
  .pwin__side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
  .pwin__who { grid-column: 1; }
  .pwin__role { display: none; }
  .pwin__cta { position: static; grid-column: 2; grid-row: 1; margin: 0 16px 0 0; min-height: 36px; padding: 0 12px; font-size: 10px; }
  .ptabs { grid-column: 1 / -1; }
  .pwin__main { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}

/* industry filter + platform menu */
.ptools { flex-direction: column; align-items: stretch; }
.ptools__row { display: flex; gap: 10px; flex-wrap: wrap; }
.ptools__row .ptools__search { margin-left: 0; max-width: 360px; }
.ptools__sel { min-height: 40px; padding: 0 34px 0 12px; border: 0; border-radius: 0; background: #0c0c0c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23d4ff3a'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--ink); box-shadow: inset 0 0 0 2px #333; font: 400 15px/1 var(--f-head); appearance: none; cursor: pointer; }
.ptools__sel:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
.ptools__count { flex-basis: auto; display: flex; align-items: center; gap: 4px; }
.ptools__clear { border: 0; background: none; color: var(--lime); font: inherit; cursor: pointer; padding: 4px 2px; text-decoration: underline; }
@media (max-width: 860px) {
  .ptools__row { flex-wrap: nowrap; }
  .ptools__sel { flex: 0 0 auto; max-width: 44%; }
  .ptools__row .ptools__search { flex: 1 1 auto; max-width: none; }
}