/* Black Silver Labs 2026: "The Drawing Board". Graphite, silver, hologram cyan. Self-hosted fonts, no external requests. */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(instrumentserif-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(instrumentserif-italic.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:300 700;font-display:swap;src:url(spacegrotesk-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:300 700;font-display:swap;src:url(inter-normal.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-weight:600 800;font-display:swap;src:url(cinzel-600.ttf) format('truetype')}

:root{
  --ink:#06070a;--g1:#0c0e12;--g2:#12151b;--g3:#1a1e26;
  --line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);
  --tx:#eef1f4;--mu:#98a0ab;--dim:#646c78;
  --cy:#5ef2e0;--cy2:#2bb8ff;--cyg:rgba(94,242,224,.35);
  --silver:linear-gradient(180deg,#fff 0%,#d6dae0 45%,#8b929c 100%);
  --serif:'Instrument Serif',Georgia,serif;--sans:'Space Grotesk','Inter',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;
  --r:20px;--w:1240px;--gut:clamp(18px,4vw,48px);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--tx);font:400 1rem/1.65 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(1200px 700px at 80% -10%,rgba(94,242,224,.07),transparent 60%),radial-gradient(900px 600px at -10% 40%,rgba(120,140,170,.08),transparent 60%),var(--ink)}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--cy);color:#001}
:focus-visible{outline:2px solid var(--cy);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:8px;background:var(--cy);color:#001;padding:8px 14px;border-radius:8px;z-index:2000}.skip:focus{left:8px}

/* type */
.eyebrow{font:600 .74rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--cy);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.7}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.01em}
h2.big{font-size:clamp(2.6rem,6.4vw,5.6rem);margin:18px 0 20px}
h2.big em,h1 em{font-style:italic;background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.lede{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--mu);max-width:56ch}
.silver{background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent}
section{position:relative}
.sec{padding:clamp(80px,12vw,160px) 0}

/* progress + cursor */
#prog{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--cy2),var(--cy));z-index:1500;box-shadow:0 0 12px var(--cy)}
#cur{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid var(--cy);border-radius:50%;pointer-events:none;z-index:1600;opacity:0;transition:width .25s,height .25s,margin .25s,background .25s,opacity .3s;mix-blend-mode:screen}
#cur.on{opacity:1}#cur.hv{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(94,242,224,.12)}
@media(hover:none),(pointer:coarse){#cur{display:none}}

/* nav */
#nav{position:fixed;top:0;left:0;right:0;z-index:1000;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
#nav.sc{background:rgba(6,7,10,.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-color:var(--line)}
#nav .in{max-width:var(--w);margin:0 auto;padding:0 var(--gut);height:74px;display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:12px;font:700 .95rem/1 'Cinzel',serif;letter-spacing:.2em;white-space:nowrap}
.logo svg{width:34px;height:34px;flex:none}
.logo b{font-weight:700;background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo small{display:block;font:500 .56rem/1 var(--sans);letter-spacing:.32em;color:var(--mu);margin-top:5px}
#nav nav{margin-left:auto;display:flex;gap:6px;align-items:center}
#nav nav a{font:500 .88rem/1 var(--sans);padding:10px 14px;border-radius:99px;color:var(--mu);transition:color .2s,background .2s}
#nav nav a:hover,#nav nav a[aria-current]{color:#fff;background:rgba(255,255,255,.07)}
#burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line2);border-radius:50%;position:relative}
#burger i{position:absolute;left:13px;right:13px;height:1.5px;background:#fff;transition:transform .3s,top .3s,opacity .2s}
#burger i:nth-child(1){top:17px}#burger i:nth-child(2){top:22px}#burger i:nth-child(3){top:27px}
#burger[aria-expanded=true] i:nth-child(1){top:22px;transform:rotate(45deg)}#burger[aria-expanded=true] i:nth-child(2){opacity:0}#burger[aria-expanded=true] i:nth-child(3){top:22px;transform:rotate(-45deg)}
@media(max-width:880px){
  #burger{display:block}
  #nav nav{position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:rgba(6,7,10,.96);backdrop-filter:blur(20px);padding:10px var(--gut) 28px;border-bottom:1px solid var(--line);transform:translateY(-12px);opacity:0;visibility:hidden;transition:.3s}
  #nav nav.open{transform:none;opacity:1;visibility:visible}
  #nav nav a{font-size:1.4rem;font-family:var(--serif);padding:16px 4px;border-bottom:1px solid var(--line);border-radius:0;color:#fff}
  #nav nav a.btn{margin-top:18px;text-align:center;font:600 1rem var(--sans);border:0}
}

/* buttons */
.btn{--bg:var(--cy);display:inline-flex;align-items:center;gap:10px;font:600 .95rem/1 var(--sans);padding:17px 28px;border-radius:99px;background:var(--bg);color:#001417;transition:transform .25s,box-shadow .25s;box-shadow:0 0 0 0 var(--cyg);position:relative;will-change:transform}
.btn:hover{box-shadow:0 0 38px 4px var(--cyg)}
.btn svg{width:18px;height:18px;transition:transform .25s}.btn:hover svg{transform:translateX(4px)}
.btn.ghost{background:rgba(255,255,255,.04);color:#fff;border:1px solid var(--line2)}
.btn.ghost:hover{background:rgba(255,255,255,.1);box-shadow:none}
#nav .btn{padding:12px 20px;font-size:.85rem;margin-left:8px}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.split .w>span{display:inline-block;transform:translateY(110%);transition:transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*70ms + var(--base,0ms))}
.split.in .w>span{transform:none}

/* hero */
.hero{min-height:100svh;display:flex;align-items:center;padding:120px 0 90px;overflow:hidden;isolation:isolate}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;opacity:.9}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,var(--ink) 4%,rgba(6,7,10,.82) 38%,rgba(6,7,10,.15) 80%),linear-gradient(0deg,var(--ink) 0,transparent 26%),linear-gradient(180deg,rgba(6,7,10,.7),transparent 22%)}
.grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(520px 520px at var(--mx,70%) var(--my,40%),#000,transparent 70%);-webkit-mask-image:radial-gradient(520px 520px at var(--mx,70%) var(--my,40%),#000,transparent 70%);opacity:.8}
.hero h1{font-size:clamp(3.4rem,10.5vw,9.6rem);line-height:.9;letter-spacing:-.025em;margin:26px 0 28px}
.hero h1 .l2{display:block;padding-left:clamp(0px,6vw,90px)}
.hero .lede{margin-bottom:38px;color:#b7bec8}
.cta{display:flex;flex-wrap:wrap;gap:14px}
.hero .meta{position:absolute;left:0;right:0;bottom:30px}
.hero .meta .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.scrollcue{display:flex;align-items:center;gap:12px;font:500 .72rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--mu)}
.scrollcue i{width:1px;height:46px;background:linear-gradient(var(--cy),transparent);animation:cue 2.2s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.chip{font:500 .76rem/1 var(--sans);padding:9px 14px;border:1px solid var(--line2);border-radius:99px;background:rgba(6,7,10,.5);backdrop-filter:blur(8px);color:var(--mu)}
.chip b{color:#fff;font-weight:600}
.live{display:inline-flex;align-items:center;gap:8px}.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cy);box-shadow:0 0 10px var(--cy);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
@media(max-width:700px){.hero .meta .chips{display:none}}

/* marquee */
.ticker{border-block:1px solid var(--line);overflow:hidden;padding:26px 0;background:var(--g1)}
.ticker .tr{display:flex;width:max-content;animation:tick 38s linear infinite}
.ticker span{font:400 clamp(2rem,5vw,4rem)/1 var(--serif);white-space:nowrap;padding-right:.9em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35);display:flex;align-items:center;gap:.9em}
.ticker span:nth-child(even){color:#fff;-webkit-text-stroke:0;font-style:italic}
.ticker span::after{content:"✦";font-size:.4em;color:var(--cy);-webkit-text-stroke:0}
@keyframes tick{to{transform:translateX(-50%)}}

/* services bento */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(40px,6vw,70px)}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.card{position:relative;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(160deg,var(--g2),var(--g1));padding:34px;overflow:hidden;isolation:isolate;transition:border-color .3s,transform .4s}
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--x,50%) var(--y,0%),rgba(94,242,224,.14),transparent 55%);opacity:0;transition:opacity .3s}
.card:hover{border-color:rgba(94,242,224,.35)}.card:hover::before{opacity:1}
.bento .card{grid-column:span 2;min-height:300px;display:flex;flex-direction:column}
.bento .card.w3{grid-column:span 3}.bento .card.w4{grid-column:span 4}
.card .ic{width:62px;height:62px;margin-bottom:auto;color:var(--cy)}
.ic path,.ic rect,.ic circle,.ic line,.ic polyline{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len,260);stroke-dashoffset:var(--len,260);transition:stroke-dashoffset 1.8s cubic-bezier(.3,.6,.2,1)}
.in .ic *,.ic.in *{stroke-dashoffset:0}
.card .n{position:absolute;top:30px;right:34px;font:500 .78rem var(--sans);color:var(--dim);letter-spacing:.14em}
.card h3{font-size:2.2rem;margin:34px 0 10px}
.card p{color:var(--mu);font-size:.97rem;max-width:42ch}
.card .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.tag{font:500 .72rem/1 var(--sans);padding:7px 11px;border-radius:99px;border:1px solid var(--line2);color:var(--mu);white-space:nowrap}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}.bento .card,.bento .card.w3,.bento .card.w4{grid-column:span 1;min-height:260px;padding:26px}}
@media(max-width:600px){.bento{grid-template-columns:1fr}}

/* stacked work */
.stack{display:grid;gap:0}
.proj{position:sticky;top:calc(88px + var(--k)*18px);margin-bottom:34px;border:1px solid var(--line2);border-radius:28px;overflow:hidden;background:linear-gradient(160deg,#14181f,#0b0d11);display:grid;grid-template-columns:.9fr 1.3fr;min-height:min(640px,80vh);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.proj .tx{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.proj .kind{font:600 .72rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--cy)}
.proj h3{font-size:clamp(2.4rem,4.4vw,4.2rem)}
.proj p{color:var(--mu)}
.proj .more{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:8px}
.proj .vis{position:relative;display:grid;place-items:center;padding:clamp(20px,3vw,44px);background:radial-gradient(600px 400px at 60% 40%,rgba(94,242,224,.12),transparent 70%),repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0 2px,transparent 2px 14px)}
.frame{width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:#000;box-shadow:0 40px 90px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04);transform:perspective(1400px) rotateY(-7deg) rotateX(3deg);transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}
.proj:hover .frame{transform:perspective(1400px) rotateY(-2deg) rotateX(1deg) scale(1.02)}
.frame .bar{height:30px;background:#1b1f27;display:flex;align-items:center;gap:7px;padding:0 12px;border-bottom:1px solid var(--line)}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:#3a404b}.frame .bar i:first-child{background:#ff5f57}.frame .bar i:nth-child(2){background:#febc2e}.frame .bar i:nth-child(3){background:#28c840}
.frame .bar u{margin-left:12px;flex:1;max-width:260px;height:17px;border-radius:99px;background:#0b0d11;text-decoration:none;font:500 .64rem/17px var(--sans);color:var(--dim);text-align:center}
.frame img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.proj .num{position:absolute;right:30px;bottom:6px;font:italic 9rem/1 var(--serif);color:rgba(255,255,255,.05);pointer-events:none}
@media(max-width:900px){.proj{grid-template-columns:1fr;position:relative;top:0;min-height:0}.proj .vis{order:-1}.frame{transform:none}.proj .num{display:none}}

/* lab wall */
.wall{background:var(--g1);border-block:1px solid var(--line);overflow:hidden;padding:clamp(80px,11vw,140px) 0 0}
.count{font:400 clamp(7rem,26vw,24rem)/.8 var(--serif);letter-spacing:-.04em;background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent;display:block}
.wall .top{position:relative;z-index:3}
.reel{height:min(860px,86vw);margin-top:-6vw;perspective:1200px;perspective-origin:50% 30%;overflow:hidden;mask-image:linear-gradient(180deg,transparent,#000 14%,#000 80%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 80%,transparent)}
.reel .tilt{transform:rotateX(34deg) rotateZ(-8deg) scale(1.25);transform-origin:50% 40%;display:grid;gap:18px;padding-top:6vw}
.lane{display:flex;gap:18px;width:max-content;animation:lane 70s linear infinite}
.lane:nth-child(even){animation-direction:reverse;animation-duration:85s}
.lane:nth-child(3n){animation-duration:100s}
.reel:hover .lane{animation-play-state:paused}
@keyframes lane{to{transform:translateX(-50%)}}
.tn{width:clamp(220px,24vw,340px);flex:none;border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:#000;position:relative;transition:transform .3s,border-color .3s}
.tn img{width:100%;aspect-ratio:16/10;object-fit:cover}
.tn:hover{transform:translateY(-8px) scale(1.04);border-color:var(--cy);z-index:2}
.tn span{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 9px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);font:500 .74rem var(--sans);opacity:0;transition:opacity .3s}.tn:hover span{opacity:1}
.wall .cta{position:relative;z-index:3;justify-content:center;margin:-10vw 0 0;padding-bottom:clamp(60px,9vw,110px)}

/* why */
.vs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:28px;overflow:hidden}
.vs>div{padding:clamp(26px,4vw,52px)}
.vs .them{background:var(--g1);color:var(--mu)}
.vs .us{background:linear-gradient(160deg,rgba(94,242,224,.1),rgba(43,184,255,.04) 60%,var(--g2));border-left:1px solid var(--line)}
.vs h3{font-size:2.4rem;margin-bottom:26px}
.vs li{list-style:none;display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line);align-items:baseline}
.vs li small{font:600 .68rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);width:74px;flex:none}
.vs .us li small{color:var(--cy)}
.vs .us li{color:#fff}
@media(max-width:800px){.vs{grid-template-columns:1fr}.vs .us{border-left:0;border-top:1px solid var(--line)}}

/* process */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.steps::before{content:"";position:absolute;left:0;right:0;top:34px;height:1px;background:var(--line2)}
.steps::after{content:"";position:absolute;left:0;top:34px;height:1px;width:calc(var(--p,0)*100%);background:var(--cy);box-shadow:0 0 14px var(--cy)}
.step{position:relative;padding-top:78px}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;width:68px;height:68px;border-radius:50%;background:var(--ink);border:1px solid var(--line2);display:grid;place-items:center;font:500 1rem var(--sans);color:var(--cy)}
.step h3{font-size:2rem;margin-bottom:8px}.step p{color:var(--mu);font-size:.95rem}
@media(max-width:800px){.steps{grid-template-columns:1fr 1fr;row-gap:44px}.steps::before,.steps::after{display:none}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}

/* team */
.team{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:16px}
.team .lead{display:flex;flex-direction:column;justify-content:center;padding-right:30px}
.person{min-height:340px;display:flex;flex-direction:column;justify-content:flex-end}
.avatar{position:absolute;top:30px;left:34px;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font:italic 3.2rem/1 var(--serif);color:#001417;background:conic-gradient(from 180deg,#fff,#8b929c,#fff,#6c747e,#fff);box-shadow:0 0 0 6px rgba(255,255,255,.05)}
.person .role{font:600 .7rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--cy);margin-bottom:8px}
.person h3{margin:0 0 10px}
@media(max-width:900px){.team{grid-template-columns:1fr 1fr}.team .lead{grid-column:1/-1;padding:0 0 20px}}
@media(max-width:560px){.team{grid-template-columns:1fr}}

/* contact */
.contact{padding:clamp(90px,13vw,180px) 0;overflow:hidden;text-align:center;background:radial-gradient(800px 500px at 50% 100%,rgba(94,242,224,.14),transparent 70%),var(--g1);border-top:1px solid var(--line)}
.contact h2{font-size:clamp(3.4rem,13vw,12rem);line-height:.88;letter-spacing:-.03em;margin:22px 0 26px}
.contact h2 em{font-style:italic;background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.contact .lede{margin:0 auto 44px}
form.msg{max-width:720px;margin:0 auto;text-align:left;display:grid;grid-template-columns:1fr 1fr;gap:14px}
form.msg label{font:600 .7rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mu);display:grid;gap:8px}
form.msg .full{grid-column:1/-1}
form.msg input,form.msg textarea,form.msg select{width:100%;font:400 1rem var(--body);color:#fff;background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:14px;padding:16px 18px;transition:border-color .2s,background .2s}
form.msg select option{background:#12151b}
form.msg input:focus,form.msg textarea:focus,form.msg select:focus{outline:0;border-color:var(--cy);background:rgba(94,242,224,.05)}
form.msg textarea{min-height:140px;resize:vertical}
form.msg .row{grid-column:1/-1;display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:space-between}
form.msg .row p{font-size:.84rem;color:var(--dim);max-width:44ch}
.mail{display:inline-block;margin-top:34px;font:italic clamp(1.4rem,3vw,2.2rem) var(--serif);border-bottom:1px solid var(--line2);padding-bottom:4px}.mail:hover{color:var(--cy);border-color:var(--cy)}
@media(max-width:600px){form.msg{grid-template-columns:1fr}}

/* footer */
footer{border-top:1px solid var(--line);padding:56px 0 40px;background:var(--ink)}
footer .in{display:flex;gap:40px;justify-content:space-between;flex-wrap:wrap;align-items:flex-start}
footer img{width:170px;border-radius:6px;opacity:.95}
footer nav{display:flex;gap:44px;flex-wrap:wrap}
footer nav div{display:grid;gap:10px;align-content:start}
footer h4{font:600 .7rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
footer a{color:var(--mu);font-size:.92rem}footer a:hover{color:#fff}
footer .fine{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);color:var(--dim);font-size:.82rem;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* sub pages */
.phero{padding:170px 0 70px;position:relative;overflow:hidden}
.phero h1{font-size:clamp(3.2rem,9vw,8rem);line-height:.92;letter-spacing:-.025em;margin:22px 0 22px}
.phero .grid{z-index:-1}

/* work page */
.sidenav{position:sticky;top:74px;z-index:50;background:rgba(6,7,10,.8);backdrop-filter:blur(16px);border-block:1px solid var(--line)}
.sidenav .in{display:flex;gap:8px;overflow-x:auto;padding:12px var(--gut);max-width:var(--w);margin:0 auto;scrollbar-width:none}
.sidenav a{flex:none;font:500 .84rem var(--sans);padding:10px 16px;border-radius:99px;color:var(--mu);border:1px solid transparent;transition:.2s}
.sidenav a:hover{color:#fff}.sidenav a.on{color:#001417;background:var(--cy)}
.cs{padding:clamp(60px,9vw,120px) 0;border-bottom:1px solid var(--line);scroll-margin-top:130px}
.cs .grid2{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:start}
.cs h2{font-size:clamp(2.8rem,6vw,5.4rem);margin:16px 0 18px}
.cs .about p{color:var(--mu);margin-bottom:14px;max-width:58ch}
.cs ul.f{margin:26px 0;display:grid;gap:0;list-style:none}
.cs ul.f li{padding:13px 0 13px 30px;border-top:1px solid var(--line);position:relative;color:#d3d8de;font-size:.95rem}
.cs ul.f li::before{content:"";position:absolute;left:2px;top:21px;width:12px;height:1px;background:var(--cy)}
.cs .ptags{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}
.shots{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.shots figure{position:relative;border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:#000;cursor:zoom-in;transition:transform .4s,border-color .3s}
.shots figure:first-child{grid-column:1/-1}
.shots figure:hover{transform:translateY(-4px);border-color:var(--cy)}
.shots img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.shots figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 11px;font:500 .78rem var(--sans);background:linear-gradient(0deg,rgba(0,0,0,.88),transparent)}
.shots.sq img{aspect-ratio:auto;object-fit:contain;background:#0b0d11;padding:18px;max-height:340px}
.shots.phones{grid-template-columns:repeat(4,1fr)}
.shots.phones figure:first-child{grid-column:auto}.shots.phones img{aspect-ratio:9/16;object-fit:cover}
.sticky{position:sticky;top:150px}
.note{font-size:.84rem;color:var(--dim);margin-top:14px}
@media(max-width:900px){.cs .grid2{grid-template-columns:1fr}.sticky{position:static}.shots.phones{grid-template-columns:1fr 1fr}}
#lb{position:fixed;inset:0;z-index:2000;background:rgba(3,4,6,.92);backdrop-filter:blur(10px);display:none;place-items:center;padding:30px;cursor:zoom-out}
#lb.on{display:grid}#lb img{max-height:88vh;max-width:94vw;border-radius:12px;box-shadow:0 30px 100px #000;border:1px solid var(--line2)}
#lb p{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:var(--mu);font:500 .9rem var(--sans)}

/* lab page */
.tools{position:sticky;top:74px;z-index:60;background:rgba(6,7,10,.86);backdrop-filter:blur(16px);border-block:1px solid var(--line)}
.tools .in{max-width:var(--w);margin:0 auto;padding:14px var(--gut);display:grid;gap:12px}
.search{position:relative}
.search input{width:100%;font:400 1.05rem var(--body);color:#fff;background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:99px;padding:16px 22px 16px 54px}
.search input:focus{outline:0;border-color:var(--cy)}
.search svg{position:absolute;left:20px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--mu)}
.cats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;align-items:center}
.cats button{flex:none;font:500 .84rem var(--sans);padding:10px 16px;border-radius:99px;border:1px solid var(--line2);color:var(--mu);transition:.2s;white-space:nowrap}
.cats button:hover{color:#fff}.cats button.on{background:var(--cy);border-color:var(--cy);color:#001417}
.cats button small{opacity:.6;margin-left:6px}
.tools .st{font:500 .8rem var(--sans);color:var(--dim)}
.gal{padding:50px 0 120px}
.gal h2{font-size:clamp(2rem,4vw,3.2rem);margin:56px 0 6px}
.gal h2:first-child{margin-top:0}
.gal .blurb{color:var(--mu);margin-bottom:24px;max-width:70ch}
.dg{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.dc{display:block;text-align:left;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--g1);transition:transform .35s,border-color .3s,box-shadow .35s;width:100%}
.dc:hover{transform:translateY(-6px);border-color:rgba(94,242,224,.5);box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 40px rgba(94,242,224,.08)}
.dc .im{overflow:hidden;aspect-ratio:16/10;background:#000}
.dc img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}.dc:hover img{transform:scale(1.08)}
.dc .tt{padding:14px 16px 16px}.dc b{display:block;font:600 1rem var(--sans)}.dc small{font:500 .7rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--cy)}
.dc p{color:var(--mu);font-size:.86rem;line-height:1.5;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.empty{text-align:center;color:var(--mu);padding:80px 0;font:italic 2rem var(--serif);display:none}
#pv{position:fixed;inset:0;z-index:2000;background:rgba(3,4,6,.94);backdrop-filter:blur(12px);display:none;flex-direction:column}
#pv.on{display:flex}
#pv .pb{display:flex;align-items:center;gap:14px;padding:12px var(--gut);border-bottom:1px solid var(--line);flex-wrap:wrap}
#pv .pb h3{font:600 1.05rem var(--sans);flex:1;min-width:140px}#pv .pb h3 small{display:block;font:500 .68rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--cy);margin-bottom:4px}
#pv .seg{display:flex;border:1px solid var(--line2);border-radius:99px;overflow:hidden}
#pv .seg button{padding:9px 16px;font:500 .8rem var(--sans);color:var(--mu)}#pv .seg button.on{background:rgba(255,255,255,.1);color:#fff}
#pv .x{width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);font-size:1.2rem}
#pv .pb a.btn{padding:11px 18px;font-size:.82rem}
#pv .stage{flex:1;display:flex;justify-content:center;align-items:stretch;padding:18px;min-height:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0 2px,transparent 2px 14px)}
#pv iframe{width:100%;height:100%;border:1px solid var(--line2);border-radius:12px;background:#fff;transition:width .4s,height .4s}
#pv.phone iframe{width:390px;max-width:100%;border-radius:30px;border-width:6px;border-color:#2a2f38}
#pv .nv{display:flex;gap:8px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.split .w>span{opacity:1;transform:none;transition:none}
  .lane,.ticker .tr,.scrollcue i,.live::before{animation:none}
  .ic *{stroke-dashoffset:0;transition:none}
}

@media(max-width:700px){
  .hero::before{background:linear-gradient(180deg,rgba(6,7,10,.75),rgba(6,7,10,.55) 40%,var(--ink) 96%)}
  .hero h1 .l2{padding-left:0}
  .count{font-size:clamp(6rem,38vw,12rem)}
}

/* nav button: was grey text on cyan (nav link colour won over .btn); now a clean silver pill */
#nav nav a.btn,#nav nav a.btn:hover{background:linear-gradient(180deg,#fff,#c9ced6);color:#0a0c10;font-weight:600;box-shadow:none}
#nav nav a.btn:hover{background:#fff;box-shadow:0 0 28px rgba(255,255,255,.28)}
@media(max-width:880px){#nav nav a.btn{color:#0a0c10;font-family:var(--sans)}}

/* videos: click to play */
.vsub{font-size:2.2rem;margin:56px 0 8px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.vid h4{font:600 1rem/1.35 var(--sans);margin:14px 0 4px}.vid p{color:var(--mu);font-size:.84rem}
.vf{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:#000;transition:border-color .3s,transform .3s}
.vf:hover{border-color:var(--cy);transform:translateY(-4px)}
.vf img{width:100%;height:100%;object-fit:cover}
.vf .pl{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 60%)}
.vf .pl::after{content:"";width:62px;height:62px;border-radius:50%;background:rgba(6,7,10,.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.500v11l9-5.500z' fill='%235ef2e0'/%3E%3C/svg%3E") center/32px no-repeat;border:1px solid var(--cy);box-shadow:0 0 30px var(--cyg)}
.vf.on{cursor:default}.vf.on:hover{transform:none}.vf iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ===== Logo trial: palette and marks from the new brand sheet (teal, graphite, silver, cream, peach glow) ===== */
:root{--cy:#35e0c9;--cy2:#1b8f9a;--cyg:rgba(53,224,201,.38);--cream:#f3efe6;--peach:#f0b98a}
body::before{background:radial-gradient(1200px 700px at 80% -10%,rgba(53,224,201,.08),transparent 60%),radial-gradient(800px 500px at 10% 100%,rgba(240,185,138,.06),transparent 60%),radial-gradient(900px 600px at -10% 40%,rgba(120,140,170,.07),transparent 60%),var(--ink)}
.logo{gap:12px}
.logo img{width:auto;height:44px;filter:drop-shadow(0 0 14px rgba(53,224,201,.35))}
.logo b{font:500 .92rem/1 var(--sans);letter-spacing:.3em;background:none;color:#fff;-webkit-text-fill-color:#fff}
.logo small{font:500 .7rem/1 var(--sans);letter-spacing:.62em;color:var(--cy);margin-top:6px}
#nav nav a.btn,#nav nav a.btn:hover{background:rgba(53,224,201,.06);color:#fff;border:1px solid var(--cy);box-shadow:none;font-weight:600;letter-spacing:.06em}
#nav nav a.btn{display:inline-flex;gap:8px;align-items:center}
#nav nav a.btn:hover{background:var(--cy);color:#00201c;box-shadow:0 0 30px var(--cyg)}
#nav nav a.btn svg{width:16px;height:16px}
@media(max-width:880px){#nav nav a.btn{color:#fff;font-family:var(--sans)}}
.btn:not(.ghost){background:linear-gradient(135deg,#1fb5a4,#0e6f6f 70%,#0b4d57);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 0 var(--cyg)}
.btn:not(.ghost):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 40px 4px var(--cyg)}
.silver,h2.big em,h1 em,.contact h2 em{background-image:linear-gradient(180deg,#fff 0%,var(--cream) 40%,#8f9aa0 100%)}
.waves{position:absolute;left:0;right:0;bottom:0;height:52%;opacity:.85;pointer-events:none;z-index:0;overflow:hidden;mask-image:linear-gradient(180deg,transparent,#000 40%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%)}
.waves svg{position:absolute;left:-5%;width:110%;height:100%}
.waves .w1{animation:wv1 16s ease-in-out infinite alternate;transform-origin:50% 50%}
.waves .w2{animation:wv2 22s ease-in-out infinite alternate;transform-origin:50% 50%}
@keyframes wv1{from{transform:translateX(-3%) scaleY(.92)}to{transform:translateX(3%) scaleY(1.08)}}
@keyframes wv2{from{transform:translateX(4%) scaleY(1.1)}to{transform:translateX(-4%) scaleY(.9)}}
.contact>.wrap{position:relative;z-index:2}
.bigmark{position:absolute;left:50%;top:50%;width:min(620px,80vw);transform:translate(-50%,-52%);opacity:.09;filter:blur(1px) drop-shadow(0 0 80px var(--cy));pointer-events:none;z-index:0;animation:fl 9s ease-in-out infinite alternate}
@keyframes fl{to{transform:translate(-50%,-48%) rotate(2deg)}}
.vals{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.vals ul{list-style:none;border-left:2px solid var(--cy);padding-left:clamp(20px,3vw,40px);display:grid;gap:0}
.vals li{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.vals li:last-child{border-bottom:0}
.vals b{font:500 clamp(.95rem,1.6vw,1.2rem)/1 var(--sans);letter-spacing:.32em;text-transform:uppercase}
.vals li span{color:var(--mu);font-size:.92rem;text-align:right}
@media(max-width:800px){.vals{grid-template-columns:1fr}.vals li{flex-direction:column;gap:6px}.vals li span{text-align:left}}
@media(prefers-reduced-motion:reduce){.waves .w1,.waves .w2,.bigmark{animation:none}}

/* contact readability: waves sit lower and dimmer, small text brighter with a soft shadow */
.waves{height:40%;opacity:.5;mask-image:linear-gradient(180deg,transparent,#000 60%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 60%)}
.bigmark{opacity:.06}
.contact .lede{color:#d5dbe2;text-shadow:0 1px 14px rgba(6,7,10,.9)}
form.msg label{color:#d5dbe2}
form.msg input,form.msg textarea,form.msg select{background:rgba(10,13,18,.78);border-color:rgba(255,255,255,.22)}
form.msg input::placeholder,form.msg textarea::placeholder{color:#8e98a4}
form.msg .row p{color:#c3cad3;text-shadow:0 1px 10px rgba(6,7,10,.95)}
.mail{color:#fff;text-shadow:0 2px 16px rgba(6,7,10,.95);border-color:rgba(255,255,255,.4)}
.contact{padding-bottom:clamp(110px,14vw,200px)}

/* quote: small margin note in the Lab section */
.lq{margin:38px 0 0;padding-left:20px;border-left:2px solid var(--cy);max-width:380px;text-align:left}
.lq p{font:italic 400 clamp(1.1rem,1.7vw,1.35rem)/1.4 var(--serif);color:#d5dbe2}
.lq p em{color:#fff}
.lq cite{display:block;margin-top:10px;font:500 .68rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--cy);font-style:normal}

/* quote variants */
.lq-after{margin-top:34px;grid-column:1/-1;max-width:none}
.vals>.lq{grid-column:1/-1;margin:10px 0 0}
.lq-c{margin:34px auto 38px;border-left:0;padding:0;text-align:center;max-width:520px}
.lq-c cite{justify-content:center}
.phero .lq{margin-top:36px}
.about .lq{margin:26px 0 0}

/* hero: video lives on the right so the headline never covers the drawing */
@media(min-width:1000px){
  .hero video,.hero .poster{left:auto;right:0;width:64%;opacity:1;object-position:50% 50%;mask-image:linear-gradient(90deg,transparent 0,#000 30%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
  .hero::before{background:linear-gradient(0deg,var(--ink) 0,transparent 22%),linear-gradient(180deg,rgba(6,7,10,.7),transparent 22%)}
  .hero>.wrap>*:not(.meta){max-width:min(640px,48%)}
  .hero h1{font-size:clamp(3.4rem,7.4vw,7.4rem)}
  .hero h1 .l2{padding-left:0}
  .hero .lede{max-width:46ch}
}
@media(max-width:999px){
  .hero{align-items:flex-end;padding-top:0}
  .hero video,.hero .poster{height:56%;bottom:auto;top:0;object-position:60% 50%;mask-image:linear-gradient(180deg,#000 55%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent)}
  .hero::before{background:linear-gradient(0deg,var(--ink) 0,rgba(6,7,10,.55) 45%,transparent 70%),linear-gradient(180deg,rgba(6,7,10,.6),transparent 18%)}
  .hero>.wrap{padding-top:50vh;padding-bottom:90px}
  .hero h1{font-size:clamp(3rem,12vw,6rem)}
}

/* footer logo links to Black Silver Holdings; tighter gap between email and footer */
.flogo{display:inline-block;transition:transform .3s,filter .3s}
.flogo:hover{transform:translateY(-3px);filter:drop-shadow(0 0 18px rgba(255,255,255,.25))}
.contact{padding-bottom:clamp(50px,7vw,90px)}
.mail{margin-top:26px}

/* ===== Silverworx Labs brand: logo files and palette from the brand board (#00E5C6, #007A6E, #0B1A1C, #2C6C6C, #F7F9EF, #FDFCF8) ===== */
:root{--ink:#061315;--g1:#0b1a1c;--g2:#102427;--g3:#163035;--cy:#00e5c6;--cy2:#007a6e;--cyg:rgba(0,229,198,.38);--cream:#fdfcf8;--line:rgba(255,255,255,.09)}
body::before{background:radial-gradient(1200px 700px at 80% -10%,rgba(0,229,198,.09),transparent 60%),radial-gradient(800px 500px at 10% 100%,rgba(240,185,138,.05),transparent 60%),radial-gradient(900px 600px at -10% 40%,rgba(44,108,108,.14),transparent 60%),var(--ink)}
.logo{gap:14px}
.logo .lm{height:46px;width:auto;filter:drop-shadow(0 0 14px rgba(0,229,198,.4))}
.logo .lw{height:30px;width:auto}
.logo img{display:block}
@media(max-width:560px){.logo .lm{height:38px}.logo .lw{height:22px}}
.btn:not(.ghost){background:linear-gradient(135deg,#00c7ad,#007a6e 70%,#0b4d52);color:#fff}
#nav.sc{background:rgba(6,19,21,.74)}
#nav nav{}
@media(max-width:880px){#nav nav{background:rgba(6,19,21,.97)}}
footer{background:var(--ink)}
.flogo img{width:150px}