/* ============================================================
   ZEROS.N1STUDIO — static site stylesheet
   Dark cinematic system: near-black, white type, neon green.
   Single theme (dark) — this IS the brand, no light mode.
   ============================================================ */

:root{
  --bg:#0A0A0B; --bg2:#141417; --card:#17171B; --line:rgba(255,255,255,.10);
  --txt:#F3F3F0; --dim:#9B9B96; --neon:#A8FF35; --neon-ink:#0A0A0B;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:"Space Grotesk",system-ui,sans-serif;min-height:100vh;margin:0}
.display{font-family:"Anton",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.01em;font-weight:400}
.mono{font-family:"Space Mono",ui-monospace,monospace}
.neon{color:var(--neon)}
.container{max-width:1180px;margin:0 auto;padding:0 22px}
.center{text-align:center}
.center-block{margin-left:auto;margin-right:auto}
.mt{margin-top:34px}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
button{font-family:inherit}
::selection{background:var(--neon);color:var(--neon-ink)}
[data-lucide]{display:inline-block;vertical-align:-3px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:"Space Mono",monospace;font-size:.8rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:.85em 1.3em;border:1.5px solid var(--neon);cursor:pointer;transition:transform .12s,background .2s,color .2s;border-radius:2px;background:transparent;color:var(--txt)}
.neon-btn{background:var(--neon);color:var(--neon-ink)}
.neon-btn:hover{transform:translateY(-2px);box-shadow:0 0 24px -4px var(--neon)}
.ghost-btn{background:transparent;color:var(--txt);border-color:var(--line)}
.ghost-btn:hover{border-color:var(--neon);color:var(--neon)}
.btn.lg{padding:1em 1.6em;font-size:.85rem}
.btn.sm{padding:.6em 1em;font-size:.72rem}
.btn.full{width:100%;justify-content:center}
.kicker{display:inline-block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--neon);margin-bottom:14px}

/* scroll progress */
.scroll-progress{position:absolute;left:0;bottom:-2px;height:2px;width:0%;background:var(--neon);box-shadow:0 0 10px -1px var(--neon);transition:width .08s linear;z-index:60}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,10,11,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{background:none;border:0;color:var(--txt);cursor:pointer;font-family:"Anton",sans-serif;font-size:1.15rem;letter-spacing:.04em;display:flex;align-items:center}
.brand .zero{display:inline-flex;align-items:center;justify-content:center;width:1.4em;height:1.4em;border:2px solid var(--neon);border-radius:50%;color:var(--neon);font-size:.7em;margin-right:.5em}
.links{display:flex;align-items:center;gap:24px}
.nlink{background:none;border:0;color:var(--dim);cursor:pointer;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;transition:color .2s;padding:4px 0}
.nlink:hover,.nlink.active{color:var(--neon)}
.nav-cta{padding:.55em 1em;font-size:.72rem}
.nav-right{display:flex;align-items:center;gap:8px}
.icon-btn{background:none;border:1px solid var(--line);color:var(--txt);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
.icon-btn:hover{border-color:var(--neon);color:var(--neon)}
.only-mobile{display:none}

/* hero */
.hero{position:relative;min-height:82vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:-8% 0 0 0;height:116%;z-index:0;background:linear-gradient(135deg,#141417,#0A0A0B);will-change:transform}
.hero-bg img{filter:grayscale(.3) brightness(.5) contrast(1.05);animation:slowzoom 26s ease-in-out infinite alternate}
.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.25) brightness(.5) contrast(1.08);opacity:0;transition:opacity 1s ease}
.hero-bg video.loaded{opacity:1}
@keyframes slowzoom{from{transform:scale(1.04)}to{transform:scale(1.16)}}
.hero-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.55),rgba(10,10,11,.3) 45%,var(--bg))}
.hero-tag{position:absolute;top:18px;right:22px;font-size:.66rem;color:#fff;display:flex;align-items:center;gap:7px;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.rec{width:8px;height:8px;border-radius:50%;background:var(--neon);display:inline-block;animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.hero-in{position:relative;z-index:2;padding:40px 22px}
.hero-h1{font-size:clamp(2.4rem,7.5vw,5.4rem);line-height:.94;margin:0 0 22px}
.hero-sub{max-width:48ch;color:var(--txt);font-size:clamp(1rem,2.2vw,1.18rem);opacity:.92}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.marquee{position:relative;z-index:2;border-top:1px solid var(--line);overflow:hidden;white-space:nowrap;background:rgba(10,10,11,.7)}
.run{display:inline-block;padding:14px 0;font-size:1.1rem;color:var(--dim);animation:run 24s linear infinite}
.run i{color:var(--neon);font-style:normal;margin:0 6px}
@keyframes run{to{transform:translateX(-50%)}}

/* blocks */
.block{padding:84px 0;border-bottom:1px solid var(--line)}
.block.alt{background:var(--bg2)}
.page-top{padding-top:64px}
.sechead{margin-bottom:42px}
.h2{font-size:clamp(2rem,5vw,3.3rem);line-height:.96;margin:0}
.h3{font-size:clamp(1.4rem,3vw,2rem);line-height:1;margin:0}
.note{display:block;margin-top:12px;font-size:.72rem;color:var(--dim);letter-spacing:.06em}
.lede{font-size:1.1rem;color:var(--txt);max-width:54ch;line-height:1.6;opacity:.92}

/* applications grid (replaces multi-discipline services grid) */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc-card{background:var(--card);border:1px solid var(--line);padding:26px 22px;display:flex;flex-direction:column;transition:transform .18s,border-color .2s,box-shadow .2s;border-radius:4px}
.svc-card:hover{transform:translateY(-5px);border-color:var(--neon);box-shadow:0 12px 40px -18px var(--neon)}
.svc-icon{color:var(--neon)}
.svc-title{font-size:1.4rem;margin:16px 0 8px}
.svc-blurb{color:var(--dim);font-size:.94rem;flex:1;line-height:1.5}
.svc-link{background:none;border:0;color:var(--txt);cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;margin-top:16px;transition:color .2s}
.svc-link:hover{color:var(--neon)}
.cta-card{background:linear-gradient(150deg,var(--card),var(--bg2));border-style:dashed}

/* masonry work */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:24px}
.fbtn{background:none;border:1px solid var(--line);color:var(--dim);padding:.5em .9em;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:.15s;border-radius:2px}
.fbtn:hover{color:var(--txt);border-color:var(--neon)}
.fbtn.on{background:var(--neon);color:var(--neon-ink);border-color:var(--neon)}
.masonry{columns:3;column-gap:16px}
.tile{position:relative;break-inside:avoid;margin:0 0 16px;border:1px solid var(--line);overflow:hidden;background:var(--bg2);cursor:pointer;border-radius:4px}
.tile .ph{background:linear-gradient(135deg,#2a2a30,#121214)}
.tile img{transition:transform .5s ease,filter .3s}
.tile:hover img{transform:scale(1.07)}
.dur{position:absolute;top:8px;right:8px;z-index:3;font-size:.6rem;background:rgba(10,10,11,.78);color:#fff;padding:2px 6px;border-radius:2px;letter-spacing:.05em}
.tmeta{position:absolute;inset:auto 0 0 0;padding:14px 12px 11px;background:linear-gradient(transparent,rgba(8,8,9,.9));display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.tt{color:#fff;font-size:1rem;line-height:1}
.tk{color:var(--neon);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase}

/* placeholder tile — empty slot in the 20-piece plan, waiting on real upload */
.tile.placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;border-style:dashed;border-color:var(--line);min-height:260px;background:var(--bg2);cursor:default}
.tile.placeholder:hover img{transform:none}
.tile.placeholder .ph-icon{color:var(--dim);opacity:.6}
.tile.placeholder .ph-label{color:var(--dim);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:0 18px}
.tile.placeholder .ph-cat{color:var(--neon);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}

/* process */
.proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.proc{border:1px solid var(--line);border-top:3px solid var(--neon);padding:28px 24px;background:var(--card);border-radius:4px}
.proc-n{font-size:2.6rem;color:var(--neon);line-height:1}
.proc-t{font-size:1.5rem;margin:8px 0 10px}
.proc-d{color:var(--dim);line-height:1.55}

/* about teaser */
.about-teaser{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.about-teaser .lede{margin:18px 0 26px}
.about-img{border:1px solid var(--line);overflow:hidden;aspect-ratio:7/8;border-radius:4px;background:linear-gradient(135deg,#2a2a30,#121214)}
.about-img img{filter:grayscale(.2) contrast(1.05)}

/* lead magnet */
.leadmagnet{padding:72px 0;background:radial-gradient(circle at 50% 0%,rgba(168,255,53,.10),transparent 60%),var(--bg2);border-bottom:1px solid var(--line)}
.lm-wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.lm-copy .lede{margin:14px 0 0}
.lm-form{border:1px solid var(--line);background:var(--card);padding:28px;border-radius:6px;display:flex;flex-direction:column;gap:14px}
.lm-form label{font-family:"Space Mono",monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.lm-form input{background:var(--bg);border:1px solid var(--line);color:var(--txt);padding:.9em 1em;font-family:"Space Grotesk",sans-serif;font-size:.95rem;border-radius:3px;outline:none;transition:border-color .2s;margin-top:7px}
.lm-form input:focus{border-color:var(--neon)}
.lm-note{font-size:.68rem;color:var(--dim);margin-top:2px}
.lm-sent{display:none;align-items:center;gap:10px;color:var(--neon);font-family:"Space Mono",monospace;font-size:.85rem}
.lm-sent.show{display:flex}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{border:1px solid var(--line);padding:26px 22px;background:var(--card);border-radius:4px}
.qmark{color:var(--neon);opacity:.8}
.qt{font-family:"Caveat",cursive;font-size:1.6rem;line-height:1.2;margin:12px 0 16px}
.qwho{font-size:.72rem;color:var(--dim);letter-spacing:.04em;text-transform:uppercase}

/* final cta */
.finalcta{padding:96px 0;text-align:center;background:radial-gradient(circle at 50% 0%,rgba(168,255,53,.12),transparent 60%),var(--bg)}
.final-h{font-size:clamp(2rem,6vw,4rem);line-height:.96;margin-bottom:18px}
.finalcta .lede{margin:0 auto 30px}

/* portfolio case study */
.casestudy{margin-top:54px;border:1px solid var(--line);border-left:3px solid var(--neon);padding:30px 26px;background:var(--card);border-radius:4px}
.cs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}
.cs-l{display:block;font-size:.66rem;color:var(--neon);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.cs-grid p{color:var(--dim);font-size:.9rem;margin:0}
.cs-note{margin-top:18px;font-size:.7rem;color:var(--dim)}

/* about page */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.about-copy p{color:var(--dim);line-height:1.65;margin-bottom:16px}
.about-copy .lede{color:var(--txt)}
.about-pillars{display:flex;gap:16px;margin:24px 0 26px;flex-wrap:wrap}
.pill{font-size:.85rem;letter-spacing:.04em;color:var(--txt)}
.about-portrait{position:relative;border:1px solid var(--line);overflow:hidden;aspect-ratio:4/5;border-radius:4px;background:linear-gradient(135deg,#2a2a30,#121214);display:flex;align-items:center;justify-content:center}
.about-portrait img{filter:grayscale(.25) contrast(1.05)}
.about-portrait .faceless-note{color:var(--dim);font-size:.72rem;text-align:center;padding:0 24px;letter-spacing:.04em}
.loc{position:absolute;left:12px;bottom:12px;font-size:.66rem;color:#fff;background:rgba(10,10,11,.7);padding:5px 9px;border-radius:3px;display:flex;align-items:center;gap:6px;letter-spacing:.06em}

/* contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.contact-btns{display:flex;flex-direction:column;gap:10px;margin-top:26px;max-width:280px}
.cbtn{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:.8em 1.1em;font-family:"Space Mono",monospace;font-size:.82rem;border-radius:3px;transition:.2s}
.cbtn:hover{border-color:var(--neon);color:var(--neon)}
.cform{display:flex;flex-direction:column;gap:16px;border:1px solid var(--line);padding:28px;background:var(--card);border-radius:6px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform label{display:flex;flex-direction:column;gap:7px;font-family:"Space Mono",monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.cform input,.cform select,.cform textarea{background:var(--bg);border:1px solid var(--line);color:var(--txt);padding:.8em .9em;font-family:"Space Grotesk",sans-serif;font-size:.95rem;border-radius:3px;outline:none;transition:border-color .2s}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--neon)}
.sent{border:1px solid var(--line);background:var(--card);padding:48px 32px;text-align:center;border-radius:6px;display:flex;flex-direction:column;align-items:center;gap:14px}
.sent p{color:var(--dim);max-width:42ch;margin:0}

/* footer */
.footer{background:var(--bg2);border-top:1px solid var(--line);padding-top:48px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr auto;gap:32px;align-items:start;padding-bottom:32px}
.foot-brand{font-size:1.1rem}
.foot-tag{color:var(--dim);font-size:.74rem;margin-top:12px;letter-spacing:.03em}
.foot-nav{display:flex;flex-direction:column;gap:8px}
.foot-nav a{background:none;border:0;color:var(--dim);text-align:left;cursor:pointer;text-transform:uppercase;font-size:.74rem;letter-spacing:.05em;transition:.2s}
.foot-nav a:hover{color:var(--neon)}
.foot-social{display:flex;gap:14px}
.foot-social a{color:var(--dim);transition:.2s}
.foot-social a:hover{color:var(--neon)}
.foot-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:18px 22px;font-size:.7rem;color:var(--dim);letter-spacing:.04em;max-width:1180px;margin:0 auto;flex-wrap:wrap;gap:8px}

/* reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.94);transition:opacity .8s ease,transform .8s ease}
.reveal-scale.in{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-26px);transition:opacity .8s ease,transform .8s ease}
.reveal-left.in{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(26px);transition:opacity .8s ease,transform .8s ease}
.reveal-right.in{opacity:1;transform:none}

/* responsive */
@media(max-width:900px){
  .svc-grid,.proc-grid,.quotes{grid-template-columns:1fr 1fr}
  .about-teaser,.about-grid,.contact-grid,.lm-wrap{grid-template-columns:1fr;gap:32px}
  .cs-grid{grid-template-columns:1fr 1fr}
  .masonry{columns:2}
  .nav-cta{display:none}
  .only-mobile{display:flex}
  .links{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;background:var(--bg2);border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .3s ease}
  .links.open{max-height:80vh}
  .nlink{width:100%;padding:16px 22px;border-top:1px solid var(--line)}
  .links .nav-cta{display:flex;margin:16px 22px;width:calc(100% - 44px);justify-content:center}
}
@media(max-width:560px){
  .svc-grid,.proc-grid,.quotes{grid-template-columns:1fr}
  .frow,.cs-grid{grid-template-columns:1fr}
  .masonry{columns:1}
  .foot-grid{grid-template-columns:1fr;gap:22px}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-bg img,.run,.rec{animation:none}
}