/* Layout: the SparkBeacon house style, rebranded. Paper ground on a blueprint grid, ink borders with hard offset
   shadows, pixel-font kickers, a stepped four-rung ladder, and page tints that change by chapter as you scroll.
   Neon64's own accent is the logo's purple > magenta > orange gradient, used on the checker band, buttons and highlights. */
:root{
  color-scheme:light;
  --paper:#f6f2ea;--bg2:#ffffff;--ink:#15161a;--mute:#5c6068;--line:rgba(21,22,26,.12);--line2:rgba(21,22,26,.28);
  --plum:#3c166b;--magenta:#e8175d;--magenta-2:#c8124f;--orange:#ff8a3d;
  --neon:linear-gradient(90deg,#3c166b 0%,#8a1e74 28%,#e8175d 58%,#ff8a3d 100%);
  --lilac:#e4d9ff;--rose:#ffd3e2;--peach:#ffd9c4;--sky:#cfe4ff;--mint:#cdeedc;--lemon:#fff0a8;
  --chapter:var(--paper);
  --f-display:"Space Grotesk","Inter",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-pixel:"Silkscreen","IBM Plex Mono",ui-monospace,Menlo,monospace;
}
html{background:var(--paper)}
body{margin:0;background:var(--chapter);color:var(--ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden;transition:background-color .7s ease;min-height:100vh;position:relative;font-size:15px}
*{box-sizing:border-box}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.mono{font-family:var(--f-pixel);font-weight:400}
.serif{font-family:var(--f-display);font-weight:700;letter-spacing:-.025em;line-height:1.0;text-wrap:balance}
.serif em{font-style:normal;background:linear-gradient(90deg,var(--lilac),var(--rose) 55%,var(--peach));box-shadow:.12em 0 0 var(--peach),-.12em 0 0 var(--lilac);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.fx{position:fixed;inset:0;pointer-events:none;z-index:0}
.fx-grid{background-image:linear-gradient(rgba(21,22,26,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(21,22,26,.05) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(80% 60% at 50% 0%,#000 0%,transparent 100%);-webkit-mask-image:radial-gradient(80% 60% at 50% 0%,#000 0%,transparent 100%)}
.wrap{position:relative;z-index:1;max-width:1480px;margin:0 auto;padding-left:max(clamp(20px,3vw,48px),env(safe-area-inset-left,0px));padding-right:max(clamp(20px,3vw,48px),env(safe-area-inset-right,0px))}

/* bar */
.bar{display:flex;align-items:center;gap:18px;padding-block:16px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.bar .brand{display:flex;align-items:center;text-decoration:none}
.bar .brand img{height:54px;width:auto;display:block}
.bar .tag{border:2px solid var(--ink);color:#fff;padding:4px 8px;font-size:9px;background:var(--neon);box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.bar .hr{flex:1;height:2px;background:var(--ink);opacity:.15}
.bar nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.bar nav a{color:var(--mute);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;padding-bottom:2px;font-family:var(--f-pixel);font-size:9px}
.bar nav a:hover{color:var(--ink);border-color:var(--magenta)}
@media(max-width:820px){.bar{flex-wrap:wrap}.bar .hr{display:none}.bar nav{flex-basis:100%}}

/* hero */
.hero{padding-block:clamp(30px,5vw,70px) clamp(26px,4vw,50px);display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero>*{min-width:0}
@media(max-width:900px){.hero{grid-template-columns:1fr}}
.kicker{font-family:var(--f-pixel);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.blink::after{content:"_";animation:blink 1s steps(1) infinite;margin-left:2px;color:var(--magenta)}
@keyframes blink{50%{opacity:0}}
.hero h1{font-size:clamp(38px,5.6vw,82px);margin:16px 0 0}
.hero .ent{font-size:clamp(15px,1.5vw,18px);color:var(--ink);margin:22px 0 0;line-height:1.7;max-width:62ch}
.hero .ent b{font-weight:700}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0;align-items:stretch}
.btn{display:inline-block;text-decoration:none;font-family:var(--f-pixel);font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  padding:15px 24px;border:2px solid var(--ink);color:#fff;background:var(--magenta);box-shadow:5px 5px 0 var(--ink);transition:transform .08s,box-shadow .08s;cursor:pointer}
.btn:hover{background:var(--plum)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn.ghost{background:var(--bg2);color:var(--ink)}
.btn.ghost:hover{background:var(--lemon)}

/* cards */
.card{background:var(--bg2);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink);min-width:0}
.card .hd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-bottom:2px solid var(--ink);font-family:var(--f-pixel);font-size:9px;text-transform:uppercase;color:var(--ink);background:var(--lemon)}
.card .hd.neon{background:var(--neon);color:#fff}
.card .hd b{font-weight:400}
.card .logo{padding:22px 22px 14px;border-bottom:2px solid var(--ink);display:grid;place-items:center;background:var(--paper)}
.card .logo img{width:100%;max-width:420px;height:auto;display:block}
.card table{width:100%;border-collapse:collapse;font-size:13.5px}
.card td{padding:11px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.card td:first-child{color:var(--mute);width:34%;font-family:var(--f-pixel);font-size:8.5px;text-transform:uppercase;padding-top:14px}
.card td b{font-weight:600}
.card .cap{display:block;padding:10px 14px;font-family:var(--f-pixel);font-size:9px;text-transform:uppercase;color:var(--ink);background:var(--rose)}
.card .pad{padding:16px 18px}

/* facts */
.facts{list-style:none;margin:8px 0 0;padding:14px 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 22px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.facts li{font-family:var(--f-pixel);font-size:9.5px;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.facts li b{color:var(--ink);font-weight:400;background:var(--lilac);padding:2px 5px;border:1px solid var(--ink)}
.facts li:nth-child(2n) b{background:var(--peach)}
.facts li::before{content:"";display:inline-block;width:6px;height:6px;background:var(--magenta);margin:0 9px 1px 0}
@media(max-width:520px){.facts li{white-space:normal}}

/* checker + ticker */
.checker{height:14px;background:repeating-conic-gradient(var(--ink) 0 25%,transparent 0 50%) 0 0/14px 14px,var(--neon);margin:0;position:relative;z-index:1}
.ticker{position:relative;z-index:1;overflow:hidden;border-bottom:2px solid var(--ink);background:var(--ink);color:#fff;font-family:var(--f-pixel);font-size:10px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.ticker .run{display:inline-block;padding-block:9px;animation:tick 38s linear infinite}
.ticker span{padding:0 18px}
.ticker i{font-style:normal;background:var(--neon);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes tick{to{transform:translateX(-50%)}}

/* sections */
.sec{padding-block:clamp(52px,8vw,110px) 0;position:relative}
.sec h2{font-size:clamp(32px,4.6vw,64px);margin:10px 0 0}
.sec .lede{font-size:clamp(14.5px,1.45vw,17px);color:var(--ink);margin:16px 0 0;line-height:1.7;max-width:70ch}

/* ladder */
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:34px 0 0;align-items:end}
@media(max-width:900px){.ladder{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ladder{grid-template-columns:1fr}}
.rung{background:var(--bg2);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:22px 20px 24px;position:relative;min-width:0}
.rung:nth-child(1){margin-top:72px}.rung:nth-child(2){margin-top:48px}.rung:nth-child(3){margin-top:24px}.rung:nth-child(4){margin-top:0;background:var(--rose)}
@media(max-width:900px){.rung{margin-top:0!important}}
.rung .n{font-family:var(--f-pixel);font-size:clamp(30px,3.6vw,46px);line-height:1;background:var(--neon);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.rung h3{font-size:clamp(22px,2.2vw,28px);margin:8px 0 0}
.rung .who{font-family:var(--f-pixel);font-size:8.5px;text-transform:uppercase;color:var(--mute);margin:8px 0 0}
.rung p{color:var(--mute);font-size:13.5px;line-height:1.6;margin:10px 0 0}
.rung .we{margin:12px 0 0;padding-top:12px;border-top:2px solid var(--ink);font-size:13.5px;line-height:1.6;color:var(--ink)}

/* strips */
.strip{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;margin:40px 0 0}
.strip>*{min-width:0}
.strip.flip>.card{order:2}
@media(max-width:900px){.strip{grid-template-columns:1fr}.strip.flip>.card{order:0}}
.copy h3{font-size:clamp(26px,3vw,40px);margin:0}
.copy p{color:var(--ink);margin:14px 0 0;font-size:15px;line-height:1.7;max-width:62ch}
.copy .n{font-family:var(--f-pixel);font-size:9px;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.chips li{font-family:var(--f-pixel);font-size:8.5px;text-transform:uppercase;border:2px solid var(--ink);padding:7px 10px;color:var(--ink);background:var(--bg2);box-shadow:3px 3px 0 var(--ink)}
.chips li:nth-child(3n+1){background:var(--lilac)}.chips li:nth-child(3n+2){background:var(--rose)}.chips li:nth-child(3n){background:var(--peach)}

/* bars */
.bars div{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:12.5px}
.bars span.l{width:140px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bars span.b{flex:1;height:12px;border:2px solid var(--ink);background:var(--bg2);position:relative;min-width:0}
.bars span.b i{position:absolute;left:0;top:0;bottom:0;background:var(--neon)}
.bars span.n{font-family:var(--f-pixel);font-size:8.5px;color:var(--mute);width:58px;text-align:right;flex:none}

/* tile grids */
.fn{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:30px 0 0}
@media(max-width:1000px){.fn{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.fn{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.fn{grid-template-columns:1fr}}
.fn>div{background:var(--bg2);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:18px 18px 20px;color:var(--ink);min-width:0;transition:opacity .35s steps(5,end),transform .35s steps(5,end)}
.fn.wait>div{opacity:0;transform:translateY(-40px)}
.fn .i{font-family:var(--f-pixel);font-size:9px;color:var(--mute)}
.fn h3{font-size:clamp(17px,1.7vw,21px);margin:8px 0 0;line-height:1.1}
.fn p{color:var(--mute);font-size:13px;line-height:1.55;margin:8px 0 0}
.fn.tint>div:nth-child(8n+1){background:var(--lilac)}.fn.tint>div:nth-child(8n+4){background:var(--peach)}.fn.tint>div:nth-child(8n+6){background:var(--rose)}.fn.tint>div:nth-child(8n+7){background:var(--sky)}
.grade{font-family:var(--f-pixel);font-size:7.5px;text-transform:uppercase;border:1px solid var(--ink);padding:2px 6px;margin-left:8px;vertical-align:middle;white-space:nowrap;background:var(--rose)}

.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px 0 0}
@media(max-width:760px){.figs{grid-template-columns:1fr}}
.figs>div{background:var(--bg2);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:22px 20px;min-width:0}
.figs>div:nth-child(1){background:var(--lilac)}.figs>div:nth-child(2){background:var(--rose)}.figs>div:nth-child(3){background:var(--peach)}
.figs .n{font-family:var(--f-pixel);font-size:clamp(26px,3.4vw,42px);line-height:1;color:var(--ink)}
.figs b{display:block;margin-top:10px;font-family:var(--f-pixel);font-size:8.5px;text-transform:uppercase;color:var(--ink);font-weight:400}
.figs p{color:var(--ink);font-size:13.5px;line-height:1.65;margin:8px 0 0}

.two{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;margin:34px 0 0}
.two>*{min-width:0}
@media(max-width:900px){.two{grid-template-columns:1fr}}
.two h3{font-size:clamp(22px,2.4vw,30px);margin:0}
.two ul{list-style:none;margin:14px 0 0;padding:0}
.two li{padding:9px 0;border-bottom:1px solid var(--line2);font-size:14.5px;line-height:1.6;color:var(--ink)}
.two li b{font-weight:700}
.two .off li::before{content:"\00d7";font-family:var(--f-pixel);color:var(--mute);margin-right:10px}
.two .on li::before{content:"\2605";color:var(--magenta);margin-right:10px}
.src{font-family:var(--f-pixel);font-size:8.5px;text-transform:uppercase;color:var(--mute);margin:18px 0 0;line-height:1.9}

.quote{margin:30px 0 0;padding:22px 26px;border:2px solid var(--ink);border-left-width:14px;border-left-color:var(--magenta);background:var(--bg2);box-shadow:8px 8px 0 var(--ink)}
.quote p{margin:0;font-family:var(--f-display);font-size:clamp(18px,2.1vw,25px);line-height:1.4;font-weight:600;max-width:60ch}

/* cta */
.cta{padding-block:clamp(48px,7vw,90px) clamp(26px,4vw,44px);text-align:center}
.cta h2{font-size:clamp(34px,5.4vw,72px);margin:12px auto 0;max-width:20ch}
.cta>p{color:var(--ink);margin:16px auto 0;font-size:15.5px;line-height:1.7;max-width:60ch}
.cta form{background:var(--bg2);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:26px;display:grid;gap:14px;max-width:560px;margin:30px auto 0;text-align:left}
.cta label{display:block;font-family:var(--f-pixel);font-size:8.5px;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.cta input,.cta select,.cta textarea{width:100%;border:2px solid var(--ink);background:var(--paper);padding:12px;font:inherit;font-size:15px;color:var(--ink);border-radius:0}
.cta textarea{min-height:96px;resize:vertical}
.cta input:focus,.cta select:focus,.cta textarea:focus{outline:none;background:var(--lemon)}
.cta .done{font-family:var(--f-pixel);font-size:9px;text-transform:uppercase;background:var(--mint);border:2px solid var(--ink);padding:12px;line-height:1.8}
.cta .addr{user-select:all;background:var(--lemon);padding:0 4px}

/* footer */
footer{position:relative;z-index:1;border-top:2px solid var(--ink);margin-top:30px;padding-block:18px 28px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;
  font-family:var(--f-pixel);font-size:8.5px;text-transform:uppercase;color:var(--mute)}
footer a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:2px}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badges span{display:inline-grid;place-items:center;width:88px;height:31px;border:2px solid var(--ink);font-size:7px;line-height:1.2;text-align:center;color:var(--ink);background:var(--bg2);box-shadow:2px 2px 0 var(--ink)}
.badges span:nth-child(1){background:var(--neon);color:#fff}
.badges span:nth-child(2){background:var(--lemon)}
.badges span:nth-child(3){background:var(--lilac)}

/* reveal: only for things below the first screen, so the page is complete at rest */
.rv{opacity:0;transform:translateY(20px);transition:opacity .45s steps(5,end),transform .45s steps(5,end)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv,.fn.wait>div{opacity:1!important;transform:none!important}body{transition:none}.ticker .run{animation:none}.blink::after{animation:none}}
/* our work */
.frame{border:2px solid var(--ink);background:var(--bg2);box-shadow:10px 10px 0 var(--ink);overflow:hidden;margin:0;min-width:0}
.frame img{display:block;width:100%;height:auto}
.frame figcaption{display:block;padding:10px 14px;border-top:2px solid var(--ink);font-family:var(--f-pixel);font-size:9px;text-transform:uppercase;color:var(--ink);background:var(--lemon)}
.work-hero{padding-block:clamp(30px,5vw,70px) clamp(10px,2vw,20px)}
.work-hero h1{font-size:clamp(38px,5.6vw,82px);margin:16px 0 0;max-width:18ch}
.work-hero .ent{font-size:clamp(15px,1.5vw,18px);margin:22px 0 0;line-height:1.7;max-width:62ch}
.proj-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:18px 0 0}
.proj-head img{height:64px;width:auto;background:var(--bg2);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:6px 10px}
.proj-head .tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.proj-head .tags li{font-family:var(--f-pixel);font-size:8.5px;text-transform:uppercase;border:2px solid var(--ink);padding:6px 9px;background:var(--bg2)}
.proj-head .tags li.live{background:var(--mint)}
.proj-head .tags li.live::before{content:"";display:inline-block;width:7px;height:7px;background:#1f9a55;margin-right:7px;animation:blink 1.4s steps(1) infinite}
.shot{margin:34px 0 0}
.pair{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start;margin:40px 0 0}
.pair>*{min-width:0}
@media(max-width:900px){.pair{grid-template-columns:1fr}}
.more{margin:40px 0 0;border:2px dashed var(--ink);padding:22px 24px;background:var(--bg2);font-family:var(--f-pixel);font-size:9.5px;text-transform:uppercase;color:var(--mute);line-height:1.9}