:root{
  --ink:#0a0b1a; --panel:#131533; --line:#23264a; --line2:#3a2f6b;
  --text:#f4f1ff; --muted:#c9c4e6; --quiet:#a49fd0;
  --pink:#ff4fa3; --cyan:#2de2e6; --yellow:#ffd23f;
  --display:'Anton',Impact,sans-serif; --pixel:'Press Start 2P',monospace; --body:'Archivo',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font:400 18px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:var(--yellow)} a:hover{color:var(--pink)}
.wrap{max-width:1280px;margin:0 auto;padding-left:32px;padding-right:32px}
.skip{position:absolute;left:-999px;top:8px;background:var(--yellow);color:var(--ink);padding:10px 14px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.yellow{color:var(--yellow)} .pink{color:var(--pink)} .cyan{color:var(--cyan)}
.bg-yellow{background:var(--yellow)} .bg-pink{background:var(--pink)} .bg-cyan{background:var(--cyan)}
.muted{color:var(--muted)} .center{text-align:center}
.eyebrow{margin:0 0 16px;font:400 11px/1.6 var(--pixel);letter-spacing:1px;text-transform:uppercase}
.eyebrow--cyan{color:var(--cyan)} .eyebrow--yellow{color:var(--yellow)}
.pixel-type{font:400 10px/1.6 var(--pixel);text-transform:uppercase}

/* pixel slice */
.pix{display:grid;grid-template-columns:repeat(14,var(--p));grid-auto-rows:var(--p)}
.pix--sm{--p:3px} .pix--xs{--p:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font:700 17px/1 var(--body);padding:16px 26px;border-radius:6px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn--yellow{background:var(--yellow);color:var(--ink);box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--yellow)}
.btn--yellow:hover{color:var(--ink);background:#ffe066}
.btn--ghost{color:var(--text);border-color:var(--text);background:rgba(10,11,26,.45)}
.btn--ghost:hover{color:var(--ink);background:var(--text)}
.btn--sm{padding:12px 18px;font-size:15px}
@keyframes coin{0%,100%{box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--yellow),0 0 0 0 rgba(255,210,63,.5)}50%{box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--yellow),0 0 26px 8px rgba(255,210,63,.45)}}
.coin{animation:coin 1.6s ease-in-out infinite}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(10,11,26,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none}
.brand__word{font:400 28px/1 var(--display);letter-spacing:.5px}
.nav__links{display:flex;align-items:center;gap:30px}
.nav__links a:not(.btn){color:var(--text);text-decoration:none;font-weight:500;font-size:16px}
.nav__links a:not(.btn):hover{color:var(--yellow)}
.nav__toggle{display:none;background:none;border:2px solid var(--text);color:var(--text);font:700 15px var(--body);padding:10px 14px;border-radius:6px}

/* hero */
.hero{position:relative;overflow:hidden;min-height:min(860px,100svh);display:flex;flex-direction:column;background:var(--ink)}
.hero__media{position:absolute;inset:-2%;transition:transform .6s cubic-bezier(.2,.8,.2,1);will-change:transform}
.hero__img,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.hero__video{opacity:0;transition:opacity .8s}
.hero__video.is-ready{opacity:1}
.hero__glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;mix-blend-mode:screen;background:radial-gradient(440px circle at var(--gx,70%) var(--gy,40%),rgba(255,79,163,.22),rgba(45,226,230,.08) 40%,transparent 70%)}
.hero:hover .hero__glow{opacity:1}
.hero__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(10,11,26,.96) 0%,rgba(10,11,26,.82) 30%,rgba(10,11,26,.25) 52%,rgba(10,11,26,0) 66%),linear-gradient(0deg,rgba(10,11,26,.95) 0%,rgba(10,11,26,0) 28%)}
.hero__sparks{position:absolute;left:48%;width:44%;top:8%;height:52%;pointer-events:none}
.spark{position:absolute;bottom:0;opacity:0;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0) scale(1);opacity:0}12%{opacity:1}80%{opacity:.8}100%{transform:translateY(-300px) scale(.6);opacity:0}}
.hero__content{position:relative;flex:1;display:flex;align-items:center;padding-top:96px;padding-bottom:48px;width:100%}
.hero__copy{max-width:640px;width:100%;min-width:0}
.hero__title{margin:0;font:400 clamp(64px,12vw,184px)/.86 var(--display);letter-spacing:-1px;text-transform:uppercase;text-shadow:0 0 28px rgba(255,79,163,.6),0 4px 30px rgba(0,0,0,.6)}
.hero__title span{display:block}
@keyframes lineIn{from{transform:translateY(60%);opacity:0;filter:blur(6px)}to{transform:none;opacity:1;filter:none}}
.line1{animation:lineIn .9s cubic-bezier(.2,.8,.2,1) both}
.line2{animation:lineIn .9s .18s cubic-bezier(.2,.8,.2,1) both}
@keyframes flicker{0%,92%,100%{opacity:1}94%{opacity:.4}96%{opacity:.9}}
.flicker{animation:flicker 5s 1.5s infinite}
.hero__tag{margin:26px 0 0;font:400 clamp(30px,3vw,44px)/1.05 var(--display);color:var(--pink);text-transform:uppercase;text-shadow:0 2px 18px rgba(0,0,0,.7);animation:lineIn .8s .4s both}
.hero__tag span{color:var(--yellow)}
.hero__lede{margin:18px 0 0;font-size:20px;max-width:500px;color:#dcd8f2;text-shadow:0 1px 12px rgba(0,0,0,.8)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:36px}
.hero__tracker{position:relative;width:100%;padding-bottom:32px}
.tracker{background:rgba(10,11,26,.72);border:1px solid var(--line2);border-radius:12px;padding:16px 22px 14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tracker__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.tracker__id{font:400 10px var(--pixel);color:var(--quiet);text-transform:uppercase}
.tracker__step{display:flex;align-items:center;gap:8px;font:400 18px var(--display);text-transform:uppercase;color:#6f6a99;transition:color .4s}
.tracker__step::before{content:"";width:10px;height:10px;background:currentColor;transition:box-shadow .4s}
.tracker__step.is-done{color:var(--text)}
.tracker__step.is-on{color:var(--yellow)}
.tracker__step.is-on::before{box-shadow:0 0 10px var(--yellow)}
.tracker__note{margin-left:auto;font:400 10px var(--pixel);color:var(--cyan);text-transform:uppercase}
.tracker__bar{position:relative;height:6px;margin-top:14px;background:var(--line);border-radius:3px}
.tracker__fill{height:100%;width:8%;background:linear-gradient(90deg,var(--pink),var(--yellow));border-radius:3px;box-shadow:0 0 12px rgba(255,210,63,.6);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.tracker__rider{position:absolute;top:-9px;left:calc(8% - 12px);transition:left .5s cubic-bezier(.2,.8,.2,1)}

/* ticker */
.ticker{background:var(--pink);color:var(--ink);overflow:hidden;white-space:nowrap;padding:16px 0}
.ticker__track{display:inline-flex;gap:36px;font:400 26px var(--display);text-transform:uppercase;animation:ticker 38s linear infinite}
@keyframes ticker{to{transform:translateX(-50%)}}

/* sections */
.section{padding-top:112px;padding-bottom:16px}
.section__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:44px}
.section__head .muted{max-width:360px;margin:0}
.h2{margin:0 0 40px;font:400 clamp(48px,5vw,76px)/.95 var(--display);text-transform:uppercase}
.section__head .h2{margin:0}
.grid{display:grid;gap:20px}
.grid--5{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-6px);border-color:var(--pink);box-shadow:0 18px 40px rgba(255,79,163,.18)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card__body{padding:18px 20px 22px}
.card h3{margin:6px 0;font:400 26px var(--display);text-transform:uppercase;letter-spacing:.3px}
.card p{margin:0;font-size:15px;color:var(--muted)}
.num{font:400 10px var(--pixel)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px 0}
.steps li{padding-right:20px}
.steps__dot{width:52px;height:52px;display:flex;align-items:center;justify-content:center;font:400 14px var(--pixel);color:var(--ink);border-radius:50%;margin-bottom:22px;position:relative}
.steps__dot::after{content:"";position:absolute;left:60px;top:24px;width:calc(100% + 120px);height:4px;background:repeating-linear-gradient(90deg,var(--line2) 0 10px,transparent 10px 18px)}
.steps li:last-child .steps__dot::after{display:none}
.steps{overflow:hidden}
.steps h3{margin:0 0 8px;font:400 26px var(--display);text-transform:uppercase}
.steps p{margin:0;font-size:16px;color:var(--muted)}
.work{display:block;color:var(--text);text-decoration:none}
.work__img{position:relative;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:var(--panel)}
.work__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.work:hover .work__img img{transform:scale(1.06)}
.chip{position:absolute;top:14px;left:14px;font:400 9px var(--pixel);color:var(--ink);background:var(--yellow);padding:7px 9px;border-radius:4px;text-transform:uppercase}
.work h3{margin:18px 0 6px;font:400 30px var(--display);text-transform:uppercase}
.work p{margin:0;color:var(--muted)}
.work:hover h3{color:var(--yellow)}
.review{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:56px;display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.review__main{flex:999 1 520px;min-width:0}
.review__main blockquote{margin:0 0 22px;font:400 clamp(34px,3.6vw,52px)/1.05 var(--display);text-transform:uppercase}
.review__side{flex:1 1 280px;display:flex;flex-direction:column;gap:16px}
.review__side figure{margin:0;background:var(--ink);border-radius:12px;padding:20px 22px}
.review__side blockquote{margin:0;font-size:17px}
.review__side figcaption{margin-top:10px;font-size:14px;color:var(--quiet)}
.order{padding-bottom:120px}
.order__title{margin:18px 0 0;text-align:center;font:400 clamp(64px,8vw,128px)/.9 var(--display);text-transform:uppercase}
.order__lede{max-width:560px;margin:24px auto 40px;font-size:20px}
.form{max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:32px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:15px}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{font:400 17px var(--body);color:var(--text);background:var(--ink);border:1px solid var(--line2);border-radius:8px;padding:12px 14px}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 3px rgba(45,226,230,.25)}
.form__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:4px}
.hp{position:absolute;left:-9999px}
.foot{border-top:1px solid var(--line)}
.foot__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:28px;padding-bottom:28px;font-size:15px;color:var(--quiet)}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.is-in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* mobile */
@media (max-width:860px){
  .wrap{padding-left:16px;padding-right:16px}
  .nav__toggle{display:block}
  .nav__links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:18px;padding:20px 16px 24px;background:var(--ink);border-bottom:1px solid var(--line)}
  .nav__links.is-open{display:flex}
  .hero{min-height:760px}
  .hero__img,.hero__video{object-position:78% 50%}
  .hero__shade{background:linear-gradient(180deg,rgba(10,11,26,.25) 0%,rgba(10,11,26,.7) 45%,rgba(10,11,26,.96) 100%)}
  .hero__content{align-items:flex-end;padding-top:220px}
  .hero__title{font-size:min(22vw,120px)}
  .hero__ctas .btn{flex:1 1 auto;justify-content:center}
  .hero__sparks{left:30%;width:70%}
  .tracker__note{margin-left:0}
  .review{padding:28px}
  .form{grid-template-columns:1fr;padding:22px}
  .steps__dot::after{display:none}
}

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

/* Services: 80s commercial-still cards with featured strategy */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.svc .card{position:relative;display:flex;flex-direction:column}
.svc__pic{position:relative;overflow:hidden;margin:10px 10px 0;border-radius:10px;background:#000}
.svc__pic img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(1.05) contrast(1.03);transition:transform .5s,filter .3s}
.svc__pic::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.svc__ch{position:absolute;top:10px;left:10px;z-index:1;font:400 9px var(--pixel);color:#5dff9a;text-shadow:0 0 6px rgba(93,255,154,.7);background:rgba(10,11,26,.55);padding:5px 6px;border-radius:3px}
.svc__rec{position:absolute;top:10px;right:10px;z-index:1;font:400 8px var(--pixel);color:#fff;display:flex;align-items:center;gap:5px;background:rgba(10,11,26,.55);padding:5px 6px;border-radius:3px;opacity:0;transition:opacity .25s}
.svc__rec::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 6px #ff3b3b}
.svc .card:hover .svc__rec,.svc .card:focus-within .svc__rec{opacity:1}
.svc .card:hover .svc__pic img{transform:scale(1.04);filter:saturate(1.25) contrast(1.08)}
.svc .card__body{flex:1;display:flex;flex-direction:column}
.svc .num{text-transform:uppercase}
.svc .card h3{font-size:26px;line-height:1.02;margin:8px 0 8px}
.svc .card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent,var(--pink));box-shadow:0 0 14px var(--accent,var(--pink))}
/* featured strategy card: full width on top */
.card--special{grid-column:1/-1;display:grid !important;grid-template-columns:1.25fr 1fr;align-items:center;border-color:rgba(255,210,63,.55);box-shadow:0 0 0 1px rgba(255,210,63,.15),0 20px 50px rgba(255,210,63,.08)}
.card--special .svc__pic{margin:12px}
.card--special .svc__pic img{aspect-ratio:16/9;object-position:50% 40%}
.card--special .card__body{padding:28px 40px 32px 20px}
.card--special h3{font-size:clamp(40px,4vw,60px) !important;margin:10px 0 12px !important}
.card--special p{font-size:18px;color:var(--text);max-width:460px}
.special{position:absolute;left:24px;bottom:24px;z-index:2;font:400 10px var(--pixel);color:#0a0b1a;background:var(--yellow);padding:9px 11px;border-radius:4px;transform:rotate(-3deg);box-shadow:3px 3px 0 var(--pink);text-transform:uppercase}
.card--special ul{margin:18px 0 22px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.card--special li{font:400 9px var(--pixel);color:var(--yellow);border:1px solid #4a3d22;background:#1c1a2a;padding:7px 9px;border-radius:3px;text-transform:uppercase}
.card--special .go{align-self:flex-start;font-weight:700;color:#0a0b1a;background:var(--yellow);padding:13px 20px;border-radius:6px;text-decoration:none;box-shadow:0 0 0 3px #0a0b1a,0 0 0 5px var(--yellow)}
.card--special .go:hover{background:#fff3b0;color:#0a0b1a}
@media (max-width:1100px){.svc{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.svc{grid-template-columns:1fr}.card--special{display:flex !important}.card--special .card__body{padding:20px 22px 26px}.card--special .svc__pic{margin:10px 10px 0}.card--special .svc__pic img{aspect-ratio:4/3}.special{left:16px;bottom:16px}}
@media (prefers-reduced-motion:reduce){.svc__pic img{transition:none}}

/* H1 keyword kicker above the hero headline */
.hero__title .hero__kicker{display:block;margin:0 0 16px;max-width:560px;text-shadow:none;letter-spacing:1px;animation:none}

/* Order section: spray-can pizza graffiti wall, full screen width, rising from the footer.
   The mask is sized to the image itself so its top edge always fades to fully transparent. */
#order{position:relative;isolation:isolate;padding-bottom:360px}
#order::before{content:"";position:absolute;left:50%;width:100vw;margin-left:-50vw;top:0;bottom:0;z-index:-2;pointer-events:none;
  --art-h:42.86vw; /* 100vw wide x (576/1344) */
  background:url(/assets/img/work-graffiti.webp) center bottom/100vw auto no-repeat;opacity:.42;
  -webkit-mask:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.15) 18%,rgba(0,0,0,.6) 38%,#000 58%) center bottom/100% var(--art-h) no-repeat;
          mask:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.15) 18%,rgba(0,0,0,.6) 38%,#000 58%) center bottom/100% var(--art-h) no-repeat}
/* form panel lets a little of the art through; fields stay solid */
#order .form{background:rgba(19,21,51,.82);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
/* phones: zoom in and center the "PIXELS & PIZZA" lettering */
@media (max-width:760px){
  #order{padding-bottom:280px}
  #order::before{--art-h:62.6vw;background-size:146vw auto;background-position:99% bottom;opacity:.48}
}
/* A11y pass: bigger tap areas for small text links without moving layout */
.foot a{display:inline-block;padding:14px 4px;margin:-14px -4px}
.nav__toggle{min-height:44px}
/* Reassurance under the main order buttons */
.cta-note{margin:14px 0 0;font-size:15px;font-weight:600;color:var(--cyan);letter-spacing:.2px}
.cta-note.center{text-align:center;margin:0 0 22px}
.closer .cta-note{text-align:center}
/* Proof strip: trust right after the hero */
.proof{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:center;padding-top:56px;padding-bottom:8px}
.proof__stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.proof__stats li{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:18px 16px}
.proof__stats b{display:block;font:400 clamp(34px,4vw,52px)/1 var(--display);letter-spacing:.5px}
.proof__stats span{display:block;margin-top:8px;font-size:14px;line-height:1.4;color:var(--muted)}
.proof__quote{margin:0;padding:6px 0 6px 22px;border-left:4px solid var(--yellow)}
.proof__quote blockquote{margin:0;font:400 clamp(22px,2.2vw,30px)/1.15 var(--display);text-transform:uppercase;color:var(--text)}
.proof__quote figcaption{margin-top:12px;font-size:14px;color:var(--muted)}
.proof__quote a{display:inline-block;padding:12px 0;margin:-12px 0;font-weight:600}
@media (max-width:900px){.proof{grid-template-columns:1fr;gap:22px;padding-top:40px}}
@media (max-width:520px){.proof__stats{gap:8px}.proof__stats li{padding:14px 10px}.proof__stats b{font-size:30px}.proof__stats span{font-size:12.5px}}
.form__err{display:block;min-height:0;margin-top:6px;font-size:14px;font-weight:600;color:var(--pink)}
.form__err:empty{display:none}
.form [aria-invalid="true"]{border-color:var(--pink);box-shadow:0 0 0 2px rgba(255,79,163,.35)}
.proof__stats b{font-variant-numeric:tabular-nums}
/* Uniform mural spacing across pages: same gap between the last button and the footer */
#order{padding-bottom:170px}
@media (max-width:760px){#order{padding-bottom:190px}}
#order{padding-bottom:137px}
@media (max-width:760px){#order{padding-bottom:167px}}