:root{
  --bg:#101010; --panel:#1d1d1a; --panel2:#262622; --hdr:#232320;
  --ink:#eceade; --dim:#a09c8e;
  --acc:#f5c518; --acc2:#ffe27a; --line:#403f36; --good:#7dd97a;
}
html[data-theme="light"]{
  --bg:#f2efe4; --panel:#ffffff; --panel2:#eae6d8; --hdr:#e8e4d4;
  --ink:#151410; --dim:#6d685c;
  --acc:#b9901f; --acc2:#8a6a12; --line:#d8d3c2; --good:#2f8c2c;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:'VT323',monospace; font-size:26px; line-height:1.55;
  overflow-x:hidden; cursor:none; transition:background .4s,color .4s;
}
@media (hover:none){ body{cursor:auto} }
h1,h2,h3,.px{font-family:'Press Start 2P',monospace; line-height:1.5}
a{color:inherit}
::selection{background:var(--acc); color:#000}
img,canvas{image-rendering:pixelated}

/* ---- pixel cursor ---- */
#cur{position:fixed;width:14px;height:14px;z-index:1000;pointer-events:none;display:none}
@media (hover:hover){ #cur{display:block} }
#cur::before{content:"";position:absolute;inset:0;
  background:
    linear-gradient(var(--acc),var(--acc)) 0 0/14px 4px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 0 0/4px 14px no-repeat;
  outline:2px solid var(--bg);}

/* ---- CRT scanlines (the old-screen soul, back by request) ---- */
#crt{position:fixed;inset:0;z-index:900;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 2px, transparent 2px 4px);
  mix-blend-mode:multiply; opacity:.45}
html[data-theme="light"] #crt{opacity:.15}

/* ---- boot screen ---- */
#boot{position:fixed;inset:0;z-index:2000;background:#000;color:#f5c518;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  font-family:'Press Start 2P',monospace;font-size:12px;transition:opacity .5s}
#boot.off{opacity:0;pointer-events:none}
#boot .bar{width:min(420px,70vw);height:22px;border:3px solid #f5c518;padding:3px}
#boot .fill{height:100%;width:0;background:#f5c518}
#boot small{font-size:8px;color:#7a6a2a;letter-spacing:2px}

/* ---- frame helpers ---- */
.pxframe{border:3px solid var(--ink); box-shadow:3px 3px 0 var(--acc); background:var(--panel)}
.pxbtn{display:inline-block;font-family:'Press Start 2P',monospace;font-size:11px;
  padding:14px 20px;background:var(--acc);color:#0a0a08;border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);text-decoration:none;cursor:none;transition:transform .08s, box-shadow .08s}
.pxbtn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.pxbtn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.pxbtn.ghost{background:transparent;color:var(--ink)}
.wrap{max-width:1150px;margin:0 auto;padding:0 22px}
.kick{font-family:'Press Start 2P',monospace;font-size:16px;color:var(--acc);letter-spacing:2px;margin-bottom:18px}
.h2{font-size:clamp(32px,6vw,62px);margin-bottom:14px}
.h2 .y{color:var(--acc)}
section{position:relative;padding:90px 0}
.blink{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .blink{animation:none} }

/* ---- nav ---- */
header{position:fixed;top:0;left:0;right:0;z-index:800;background:var(--hdr);
  border-bottom:3px solid var(--ink);display:flex;align-items:center;justify-content:space-between;
  padding:12px 22px;gap:10px;transition:background .4s}
header .logo{display:flex;align-items:center;gap:14px;text-decoration:none}
header .logo img{width:52px;height:52px;image-rendering:auto}
header .logo .t{font-family:'Press Start 2P',monospace;font-size:16px}
header .logo .t small{display:block;font-size:9px;color:var(--acc);margin-top:6px;letter-spacing:2px}
header nav{display:flex;gap:20px}
header nav a{font-family:'Press Start 2P',monospace;font-size:10px;text-decoration:none;padding:6px 2px;
  display:flex;align-items:center;gap:7px}
header nav a .ic{font-family:'VT323',monospace;font-size:19px;color:var(--acc);line-height:1}
header nav a:hover{color:var(--acc)}
.hbtns{display:flex;gap:10px;align-items:center}
.sqbtn{width:38px;height:38px;border:3px solid var(--ink);background:var(--panel);color:var(--ink);
  font-family:'Press Start 2P',monospace;font-size:12px;cursor:none;box-shadow:3px 3px 0 var(--ink)}
.sqbtn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
@media(max-width:920px){header nav{display:none}}

/* ---- hero ---- */
#hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding-top:120px;padding-bottom:70px;position:relative;overflow:clip}
#hero h1{font-size:clamp(30px,7.5vw,84px);letter-spacing:2px;cursor:none;
  transition:transform .18s steps(4), text-shadow .18s}
#hero h1:hover{transform:scale(1.09);
  text-shadow:0 0 18px rgba(245,197,24,.85), 0 0 46px rgba(245,197,24,.45)}
#hero h1 .y{color:var(--acc)}
#hero .sub{font-family:'Press Start 2P',monospace;font-size:clamp(9px,1.8vw,15px);color:var(--dim);margin:18px 0 6px}
#hero .byline{display:inline-block;margin-top:14px;padding:13px 22px;border:3px solid var(--acc);
  font-family:'Press Start 2P',monospace;font-size:14px;color:var(--acc);transform:rotate(-2deg)}
#skullbox{margin:34px auto 10px;position:relative;width:min(300px,64vw)}
#skullbox canvas{width:100%;height:auto;display:block}
#score{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--dim);margin-top:10px}
#score b{color:var(--acc)}
#hero .cta{margin-top:26px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
#duckwalk{position:absolute;bottom:8px;left:-80px;width:64px;height:56px;animation:walk 26s linear infinite}
@keyframes walk{from{left:-90px}to{left:105%}}
@media (prefers-reduced-motion:reduce){ #duckwalk{animation:none;left:20px} }
.press{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--dim);margin-top:34px;letter-spacing:2px}

/* ---- ticker (lives at the bottom of the hero) ---- */
#ticker{position:absolute;left:0;right:0;bottom:0;z-index:6;
  border-top:3px solid var(--ink);background:var(--acc);color:#0a0a08;
  overflow:hidden;padding:12px 0}
#ticker .track{display:inline-flex;align-items:center;white-space:nowrap;animation:tick 32s linear infinite;
  font-family:'Press Start 2P',monospace;font-size:11px}
#ticker .ti{display:inline-flex;align-items:center;gap:12px;margin:0 26px}
#ticker .ti i{font-style:normal;font-family:'VT323',monospace;font-size:22px;line-height:1;display:inline-flex;align-items:center}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ #ticker .track{animation:none} }

/* ---- about ---- */
#about .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:center}
#about p{color:var(--dim);font-size:21px;margin-bottom:14px}
#about .stamp{padding:26px;text-align:center}
#about .stamp .big{font-family:'Press Start 2P',monospace;font-size:13px;line-height:2}
#about .stamp .big .y{color:var(--acc)}
#about .stamp img{width:110px;height:auto;margin-bottom:8px}
@media(max-width:920px){#about .grid{grid-template-columns:1fr}}

/* ---- stats / xp ---- */
#stats .row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1000px){#stats .row{grid-template-columns:repeat(2,1fr)}}
.xp{padding:20px}
.xp .lbl{display:flex;justify-content:space-between;gap:10px;font-family:'Press Start 2P',monospace;font-size:10.5px;margin-bottom:12px}
.xp .lbl b{color:var(--acc);white-space:nowrap}
.xp .bar{height:20px;border:3px solid var(--ink);padding:3px;background:var(--panel2)}
.xp .fill{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--acc) 0 10px, var(--acc2) 10px 20px);
  transition:width 1.4s steps(14)}
@media(max-width:700px){#stats .row{grid-template-columns:1fr}}

/* ---- services inventory: even 4×6 grid, roomy, small shadows ---- */
#services .inv{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:44px}
@media(max-width:1100px){#services .inv{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){#services .inv{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){#services .inv{grid-template-columns:1fr}}
.item{padding:12px 12px 15px;text-align:center;cursor:none;position:relative;background:var(--panel);
  transition:transform .14s steps(4), box-shadow .14s steps(4);text-decoration:none;display:block;color:var(--ink)}
.item:hover{transform:translate(-3px,-3px) scale(1.06);box-shadow:5px 5px 0 var(--acc);z-index:5}
.item .ph{position:relative;aspect-ratio:4/3;overflow:hidden;border:3px solid var(--ink);background:#000}
.item .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .25s steps(5)}
.item:hover .ph img{transform:scale(1.12)}
.item:hover .nm{color:var(--acc)}
.item .nm{font-family:'Press Start 2P',monospace;font-size:11.5px;margin-top:12px;line-height:1.8;min-height:40px}
.item .lv{position:absolute;top:4px;inset-inline-end:7px;z-index:3;font-family:'Press Start 2P',monospace;font-size:7.5px;
  color:#0a0a08;background:var(--acc);padding:3px 5px;border:2px solid var(--ink)}
.item::before,.item::after{content:"✦";position:absolute;font-size:17px;opacity:0;z-index:6;transition:opacity .1s}
.item::before{top:-14px;inset-inline-start:-6px;color:var(--acc)}
.item::after{bottom:-14px;inset-inline-end:-6px;color:#0f0f0d;text-shadow:0 0 3px rgba(245,197,24,.5)}
.item:hover::before,.item:hover::after{opacity:1;animation:blink .45s steps(1) infinite}
.item .go{font-family:'Press Start 2P',monospace;font-size:6.5px;color:var(--dim);margin-top:5px;opacity:0;transition:opacity .15s}
.item:hover .go{opacity:1;color:var(--acc)}

/* ---- hero teeth (transparent render) ---- */
#teethbox{margin:40px auto 8px;position:relative;width:min(700px,88vw)}
#teethbox img{width:100%;display:block;image-rendering:auto;transition:transform .2s steps(4), filter .2s;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.5))}
#teethbox:hover img{transform:scale(1.05);
  filter:brightness(1.12) drop-shadow(0 0 26px rgba(245,197,24,.5))}
#teethbox .halo{position:absolute;inset:-30% -8%;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(245,197,24,.14), transparent 62%)}

/* ---- duck FX: glow, footprint trail, feathers ---- */
.bd-duck{filter:drop-shadow(0 0 11px rgba(245,197,24,.6))}
.duck-step{position:absolute;z-index:44;pointer-events:none;opacity:.85;
  animation:bd-step 1.2s steps(8) forwards}
.duck-step svg{display:block;width:16px;height:16px}
@keyframes bd-step{70%{opacity:.5}to{opacity:0}}
.duck-feather{position:absolute;width:16px;height:7px;background:#161612;border:2px solid var(--acc);
  z-index:46;pointer-events:none}
html[data-theme="light"] .duck-feather{background:#2a2a24}

/* ---- 3D stage: pixel cursor before start, real cursor once the viewer runs ---- */
body.in3d #cur{display:none !important}
body.in3d #stage3d, body.in3d #stage3d *{cursor:auto !important}

/* ---- custom pixel dropdowns ---- */
.pxsel{position:relative;margin-bottom:14px}
.pxsel select{display:none}
.sel-btn{width:100%;box-sizing:border-box;background:var(--panel2);border:3px solid var(--line);
  color:var(--ink);font-family:'VT323',monospace;font-size:24px;text-align:start;
  padding:12px 44px 12px 14px;cursor:none;position:relative;transition:border-color .15s}
.sel-btn:hover{border-color:var(--acc)}
.sel-btn.ph{color:var(--dim)}
.sel-btn::after{content:"▼";position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);
  color:var(--acc);font-size:13px;transition:transform .18s steps(3)}
.pxsel.open .sel-btn{border-color:var(--acc)}
.pxsel.open .sel-btn::after{transform:translateY(-50%) rotate(180deg)}
.sel-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:120;background:var(--panel);
  border:3px solid var(--ink);box-shadow:5px 5px 0 var(--acc);max-height:300px;overflow:auto;display:none}
.pxsel.open .sel-list{display:block}
.sel-opt{padding:11px 14px;font-family:'VT323',monospace;font-size:23px;cursor:none;
  border-bottom:2px solid var(--line);transition:background .08s, padding .08s}
.sel-opt:last-child{border-bottom:none}
.sel-opt:hover{background:var(--acc);color:#0a0a08;padding-inline-start:24px}
.sel-opt:active{background:var(--acc2)}
.sel-opt.sel{color:var(--acc)}
.sel-opt.sel:hover{color:#0a0a08}

/* ---- footer contacts + WA fab ---- */
.fcontact{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.fcontact a{display:inline-flex;align-items:center;gap:10px;color:var(--dim);text-decoration:none;
  font-size:24px;transition:color .15s, transform .12s steps(3)}
.fcontact a:hover{color:var(--acc);transform:translateY(-2px)}
.fcontact svg{width:20px;height:20px;fill:var(--acc)}
#wa{display:flex;align-items:center;justify-content:center;padding:12px}
#wa svg{width:28px;height:28px;fill:#0a0a08;display:block}

/* ---- hero teeth laugh ---- */
@keyframes bd-chatter{
  0%,100%{transform:translateY(0)}
  15%{transform:translateY(-16px)}
  30%{transform:translateY(3px)}
  45%{transform:translateY(-12px)}
  60%{transform:translateY(2px)}
  80%{transform:translateY(-8px)}
}
#teethbox.chatter img{animation:bd-chatter .55s steps(7) 4}

/* ---- 3D start gate ---- */
#stage3d .poster{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;text-align:center;
  background:radial-gradient(circle at center, #2c2c27, #1a1a17)}
#stage3d .poster .pt{font-family:'Press Start 2P',monospace;font-size:12px;color:var(--acc2);letter-spacing:1px}
#stage3d .poster .ps{font-family:'VT323',monospace;font-size:22px;color:var(--dim);max-width:520px;padding:0 20px}

/* ---- 3D case viewer ---- */
#viewer3d .chips{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 20px}
.chip3d{font-family:'Press Start 2P',monospace;font-size:9px;padding:12px 16px;background:var(--panel);
  color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:none;transition:.12s steps(3)}
.chip3d:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.chip3d.on{background:var(--acc);color:#0a0a08;box-shadow:4px 4px 0 var(--acc2)}
#stage3d{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
#stage3d iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#stage3d .hint{position:absolute;left:12px;bottom:12px;z-index:3;font-family:'Press Start 2P',monospace;font-size:8px;
  color:#ffe27a;background:rgba(0,0,0,.65);padding:8px 10px;letter-spacing:1px;pointer-events:none}
#stage3d .fs{position:absolute;top:10px;inset-inline-end:10px;z-index:3}
#stage3d .loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;
  font-family:'Press Start 2P',monospace;font-size:10px;color:var(--acc);background:#000;pointer-events:none;transition:opacity .3s}
#stage3d .loading.off{opacity:0}

/* ---- quest log (simple, airy) ---- */
#workflow .q{display:flex;gap:24px;align-items:flex-start;padding:26px 4px 30px;margin-bottom:8px;
  background:transparent;border:none;box-shadow:none;border-bottom:2px dashed var(--line)}
#workflow .chk{width:38px;height:38px;flex:none;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-family:'Press Start 2P',monospace;font-size:16px;color:var(--good);background:var(--panel)}
#workflow .q .tt{font-family:'Press Start 2P',monospace;font-size:14px;margin-bottom:10px}
#workflow .q .dd{color:var(--dim);font-size:1em}
#workflow .q.done .tt{color:var(--good)}

/* ---- gallery ---- */
#work .g,.g{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:36px}
.shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--panel2);
  transition:transform .14s steps(4), box-shadow .14s steps(4)}
.shot:hover{transform:translate(-3px,-3px) scale(1.04);box-shadow:5px 5px 0 var(--acc);z-index:4}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s steps(6)}
.shot:hover img{transform:scale(1.12)}
.shot .cap{position:absolute;left:0;right:0;bottom:0;z-index:3;background:rgba(0,0,0,.72);color:#ffe27a;
  font-family:'Press Start 2P',monospace;font-size:8px;padding:8px;letter-spacing:1px;transition:background .2s}
.shot:hover .cap{background:rgba(0,0,0,.9)}

/* ---- why / cards ---- */
#why .cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px}
#why .c{padding:26px}
#why .c h3{font-size:12px;color:var(--acc);margin-bottom:14px}
#why .c p{color:var(--dim)}
@media(max-width:800px){#why .cards{grid-template-columns:1fr}}

/* ---- join / contact ---- */
#join .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;margin-top:36px}
#join form,.member{padding:26px}
#join input,#join textarea,.member input{width:100%;margin-bottom:14px;background:var(--panel2);border:3px solid var(--ink);
  color:var(--ink);font-family:'VT323',monospace;font-size:20px;padding:10px 12px;outline:none}
#join input:focus,.member input:focus{border-color:var(--acc)}
.member{text-align:center}
.member img{width:80px;height:auto;margin:6px 0 12px}
.member h3{font-size:11px;margin-bottom:8px}
.member p{color:var(--dim);margin-bottom:14px}
@media(max-width:860px){#join .grid{grid-template-columns:1fr}}

/* ---- footer ---- */
footer{border-top:3px solid var(--ink);padding:40px 0 90px;text-align:center;color:var(--dim);position:relative;overflow:clip}
footer .px{font-size:8px;letter-spacing:2px;margin-top:10px}
#wa{position:fixed;inset-inline-end:20px;bottom:20px;z-index:850}

/* toast */
#toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,90px);z-index:960;
  font-family:'Press Start 2P',monospace;font-size:9px;background:var(--ink);color:var(--bg);
  padding:14px 20px;border:3px solid var(--acc);transition:transform .3s steps(6)}
#toast.on{transform:translate(-50%,0)}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .5s steps(8), transform .5s steps(8)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} }

/* ================= HOVER EVERYTHING ================= */
header nav a{position:relative}
header nav a::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--acc);transition:width .15s steps(3)}
header nav a:hover::after{width:100%}
header .logo{transition:transform .12s steps(3)}
header .logo:hover{transform:translateY(-2px)}
header .logo:hover .t{color:var(--acc)}
.xp{transition:transform .14s steps(3), box-shadow .14s steps(3)}
.xp:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--acc)}
.xp:hover .lbl span{color:var(--acc)}
#about .stamp{transition:transform .15s steps(3)}
#about .stamp:hover{transform:rotate(-2deg) scale(1.04)}
#about p{transition:color .2s}
#about p:hover{color:var(--ink)}
#workflow .q:hover .chk{background:var(--acc);color:#0a0a08;border-color:var(--acc)}
#workflow .q:hover .tt{color:var(--acc)}
#why .c{transition:transform .14s steps(3), box-shadow .14s steps(3)}
#why .c:hover{transform:translate(-2px,-2px) scale(1.02);box-shadow:5px 5px 0 var(--acc)}
#join form,.member{transition:transform .14s steps(3), box-shadow .14s steps(3)}
#join form:hover,.member:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--acc)}
#join input:hover,#join textarea:hover,.member input:hover{border-color:var(--dim)}
.member img,#about .stamp img{transition:transform .2s steps(4)}
.member:hover img,#about .stamp:hover img{transform:scale(1.12) rotate(-4deg)}
.meta .m{transition:transform .14s steps(3), box-shadow .14s steps(3)}
.meta .m:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--acc)}
.meta .m:hover .k{color:var(--ink)}
#svc-details li{transition:color .15s, padding .15s steps(3)}
#svc-details li:hover{color:var(--ink);padding-inline-start:12px}
#svc-hero .bigimg{transition:transform .15s steps(3), box-shadow .15s steps(3)}
#svc-hero .bigimg:hover{transform:translate(-3px,-3px) scale(1.02);box-shadow:10px 10px 0 var(--acc)}
#svc-hero .bigimg img{transition:transform .3s steps(6)}
#svc-hero .bigimg:hover img{transform:scale(1.08)}
#score{transition:color .2s}
#score:hover{color:var(--acc)}
.kick{transition:letter-spacing .2s steps(4)}
.kick:hover{letter-spacing:4px}
.h2{transition:transform .15s steps(3)}
.h2:hover{transform:translateX(4px)}
footer div{transition:color .2s}
footer div:hover{color:var(--ink)}
#hero h1{transition:text-shadow .15s}
#hero h1:hover{text-shadow:5px 5px 0 var(--acc)}
#hero .byline{transition:transform .15s steps(3), background .15s}
#hero .byline:hover{transform:rotate(2deg) scale(1.06);background:var(--acc);color:#0a0a08}
#skullbox{transition:transform .18s steps(4)}
#skullbox:hover{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){
  .item:hover,.shot:hover,.xp:hover,#workflow .q:hover,#why .c:hover,#skullbox:hover{transform:none}
}

/* ================= SERVICE DETAIL PAGE ================= */
#svc-hero{padding:150px 0 50px}
#svc-hero .top{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
#svc-hero .crumb{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--dim);margin-bottom:22px;display:inline-block;text-decoration:none}
#svc-hero .crumb:hover{color:var(--acc)}
#svc-hero h1{font-size:clamp(18px,4.4vw,42px)}
#svc-hero h1 .y{color:var(--acc)}
#svc-hero .desc{color:var(--dim);font-size:22px;margin-top:16px;max-width:520px}
#svc-hero .bigimg{aspect-ratio:4/3;position:relative;overflow:hidden}
#svc-hero .bigimg img{width:100%;height:100%;object-fit:cover}
#svc-hero .lvtag{position:absolute;top:10px;inset-inline-start:10px;font-family:'Press Start 2P',monospace;font-size:9px;
  background:var(--acc);color:#0a0a08;padding:6px 9px;border:3px solid var(--ink)}
@media(max-width:860px){#svc-hero .top{grid-template-columns:1fr}}
.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.meta .m{padding:16px;text-align:center}
.meta .m .k{font-family:'Press Start 2P',monospace;font-size:7.5px;color:var(--dim);letter-spacing:1px;margin-bottom:8px}
.meta .m .v{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--acc);line-height:1.7}
@media(max-width:860px){.meta{grid-template-columns:repeat(2,1fr)}}
#svc-details ul{list-style:none;margin-top:26px}
#svc-details li{padding:12px 0;border-bottom:2px dashed var(--line);color:var(--dim);font-size:21px}
#svc-details li::before{content:"▸ ";color:var(--acc);font-family:'Press Start 2P',monospace;font-size:11px}