*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{

  --black:#0b0b0b;--dark:#111;--dark2:#181818;--dark3:#222;--dark4:#2a2a2a;

  --yellow:#e8ff00;--yellow-dim:rgba(232,255,0,.1);--yellow-glow:0 0 30px rgba(232,255,0,.12);

  --white:#eee;--gray:#eee;--gray-dark:#888;

  --head:'Bebas Neue',sans-serif;--body:'DM Sans',sans-serif;

}

html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}

body{font-family:var(--body);background:var(--black);color:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}

body.no-scroll{overflow:hidden}

a{color:inherit;text-decoration:none}

::selection{background:var(--yellow);color:var(--black)}

img{display:block}



/* CURSOR */

@media(pointer:fine){

  body,a,button,.clickable{cursor:none}

  .cur{position:fixed;width:8px;height:8px;background:var(--yellow);border-radius:50%;pointer-events:none;z-index:99999;transition:transform .2s,opacity .15s;transform:translate(-50%,-50%)}

}



/* LOADER */

.ld{position:fixed;inset:0;z-index:9000;background:var(--black);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.5rem;transition:opacity .5s .3s,visibility .5s .3s}

.ld.done{opacity:0;visibility:hidden;pointer-events:none}

.ld-logo{height:36px;width:auto;animation:fu .6s ease forwards;opacity:0;transform:translateY(15px)}

@keyframes fu{to{opacity:1;transform:translateY(0)}}

.ld-bar{width:140px;height:2px;background:var(--dark3);border-radius:2px;overflow:hidden}

.ld-bar-in{height:100%;width:0;background:var(--yellow);animation:bf 1.2s ease forwards}

@keyframes bf{to{width:100%}}



/* NAV */

nav{position:fixed;top:0;left:0;right:0;z-index:5000;padding:1.2rem 4vw;display:flex;align-items:center;justify-content:space-between;transition:all .3s}

nav.sc{background:rgba(11,11,11,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--dark2)}

.logo-img{height:26px;width:auto;opacity:.9;transition:opacity .2s}

.logo-img:hover{opacity:1}

.nl{display:flex;gap:3rem;align-items:center}

.nl a{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);transition:color .2s}

.nl a:hover{color:var(--yellow)}

.nl .ncta:hover{color:#000}

.nl .ncta{padding:.6rem 1.4rem;background:var(--yellow);color:#000;font-size:.7rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;border:none;transition:all .2s;text-shadow:none}

.ncta:hover{box-shadow:var(--yellow-glow);transform:translateY(-1px);color:#000}

.bur{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:4px}

.bur span{display:block;width:24px;height:2px;background:var(--white);transition:all .3s}

.mn{position:fixed;inset:0;z-index:4999;background:var(--black);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;opacity:0;visibility:hidden;transition:all .3s}

.mn.open{opacity:1;visibility:visible}

.mn a{font-family:var(--head);font-size:2.5rem;letter-spacing:.04em;transition:color .2s}

.mn a:hover{color:var(--yellow)}



/* HERO */

.hero{position:relative;height:100vh;display:flex;align-items:flex-end;overflow:hidden}

.hero-video{position:absolute;inset:0;z-index:0}

.hero-video iframe{position:absolute;top:50%;left:50%;width:120vw;height:120vh;transform:translate(-50%,-50%);pointer-events:none}

.hero-video::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,var(--black) 0%,rgba(11,11,11,.35) 35%,rgba(11,11,11,.5) 100%);z-index:1}

.hc{position:relative;z-index:2;width:100%;padding:0 4vw 8vh;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}

.hl{max-width:700px}

.hero h1{font-family:var(--head);font-size:clamp(4.5rem,11vw,10rem);line-height:.86;letter-spacing:.02em}

.hero h1 .y{color:var(--yellow)}

.hdesc{margin-top:1rem;font-size:.9rem;color:var(--white);line-height:1.6;max-width:400px;font-weight:400;text-shadow:0 1px 4px rgba(0,0,0,.5),0 0 12px rgba(0,0,0,.3)}

.hbtns{display:flex;gap:.8rem;margin-top:2rem;flex-wrap:wrap}

.btn{display:inline-block;padding:.85rem 2.2rem;background:var(--yellow);color:var(--black);font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border:none;transition:all .2s;position:relative}

.btn:hover{box-shadow:var(--yellow-glow);transform:translateY(-2px)}

.btn-o{background:transparent;border:1.5px solid rgba(255,255,255,.2);color:var(--white)}

.btn-o:hover{border-color:var(--yellow);color:var(--yellow);background:transparent;box-shadow:none}

.hr{display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;text-align:right}

.hnum{font-family:var(--head);font-size:3.5rem;line-height:1;color:var(--yellow)}

.hlab{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--white);text-shadow:0 1px 4px rgba(0,0,0,.5),0 0 12px rgba(0,0,0,.3)}

.scr{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.4rem}

.scr span{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gray-dark)}

.scr-l{width:1px;height:35px;background:var(--yellow);opacity:.3;animation:pls 2s ease infinite}

@keyframes pls{0%,100%{opacity:.15;transform:scaleY(.5)}50%{opacity:.6;transform:scaleY(1)}}



/* UTILITY */

section{padding:7rem 4vw}

.lab{font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-bottom:.8rem}

.stl{font-family:var(--head);font-size:clamp(2.5rem,5vw,4rem);line-height:1;letter-spacing:.02em;margin-bottom:.6rem}

.stl .dim{color:var(--gray-dark)}

.stl .y{color:var(--yellow)}

.sdesc{font-size:.85rem;color:var(--gray);max-width:450px;line-height:1.6;font-weight:300}

.line{width:40px;height:2px;background:var(--yellow);margin:1.2rem 0}



/* MARQUEE */

.mq{padding:1.2rem 0;border-top:1px solid var(--dark2);border-bottom:1px solid var(--dark2);overflow:hidden}

.mqi{display:flex;gap:2.5rem;animation:mqs 22s linear infinite;width:max-content}

.mqi span{font-family:var(--head);font-size:.9rem;letter-spacing:.12em;color:var(--white);white-space:nowrap}

.mqi .dot{color:var(--yellow);font-size:.5rem}

@keyframes mqs{from{transform:translateX(0)}to{transform:translateX(-20%)}}



/* ─── FULLSCREEN PORTFOLIO ─── */

.work-section{padding-bottom:0}

.work-filter{display:flex;gap:1.2rem;margin:2rem 0 2.5rem;flex-wrap:wrap}

.wf-btn{padding:.5rem 1.3rem;background:transparent;border:1px solid var(--dark3);color:var(--gray);font-family:var(--body);font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:all .2s}

.wf-btn.active,.wf-btn:hover{border-color:var(--yellow);color:var(--black);background:var(--yellow)}

a.fp{display:block;color:inherit;text-decoration:none}

.fp{position:relative;width:100%;height:50vh;overflow:hidden;cursor:pointer;margin-bottom:3px}

.fp[data-cat="auto"]:first-of-type,.fp[data-cat="real"]:first-of-type{margin-top:0}

.fp[data-cat="web"]+.fp[data-cat="auto"],.fp[data-cat="auto"]+.fp[data-cat="real"]{margin-top:1.5rem}

.fp.hidden{display:none}

.fp-img-wrap{position:absolute;inset:-20px;transition:transform .15s ease-out;will-change:transform}

.fp-img-wrap picture{display:contents}

.fp-img-wrap img{width:100%;height:100%;object-fit:cover;object-position:center center;transition:transform .6s,filter .5s;filter:brightness(.75) saturate(.9)}

.fp:hover .fp-img-wrap img{transform:scale(1.03);filter:brightness(.2) saturate(.7)}

.fp-content{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;padding:3rem 4vw;pointer-events:none}

.fp-inner{display:flex;justify-content:space-between;align-items:flex-end;width:100%}

.fp-cat{font-size:.55rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-bottom:.4rem;opacity:0;transform:translateY(10px);transition:all .4s}

.fp-name{font-family:var(--head);font-size:clamp(2.5rem,5vw,4.5rem);letter-spacing:.02em;line-height:1;opacity:0;transform:translateY(10px);transition:all .4s .05s}

.fp-sub{font-size:.8rem;color:var(--gray);font-weight:300;margin-top:.3rem;opacity:0;transform:translateY(10px);transition:all .4s .1s}

.fp:hover .fp-cat,.fp:hover .fp-name,.fp:hover .fp-sub{opacity:1;transform:translateY(0)}

.fp-num{font-family:var(--head);font-size:8rem;line-height:1;color:var(--yellow);opacity:.3;position:absolute;top:2rem;right:4vw;z-index:1}

.fp-badge{position:absolute;top:1.5rem;left:2rem;background:var(--yellow);color:#000;font-family:var(--head);font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;padding:.4rem 1rem;z-index:4}

.fp-arrow{width:50px;height:50px;border:1.5px solid var(--yellow);color:var(--yellow);display:flex;align-items:center;justify-content:center;font-size:1.2rem;opacity:0;transform:translate(15px,0);transition:all .4s .1s;pointer-events:none}

.fp:hover .fp-arrow{opacity:1;transform:translate(0,0)}

.fp::after{content:'';position:absolute;bottom:0;left:0;width:0;height:3px;background:var(--yellow);transition:width .6s cubic-bezier(.16,1,.3,1);z-index:3}

.fp:hover::after{width:100%}



/* ─── PROJECT DETAIL ─── */

.proj-detail{position:fixed;inset:0;z-index:8000;background:var(--black);overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}

.proj-detail.open{opacity:1;visibility:visible}

.pd-close{position:fixed;top:1.5rem;right:4vw;z-index:8001;width:44px;height:44px;border:none;background:none;display:flex;align-items:center;justify-content:center;color:var(--yellow);font-size:1.6rem;font-weight:700;cursor:pointer;transition:opacity .2s}

.pd-close:hover{opacity:.7}

.pd-hero{position:relative;width:100%;aspect-ratio:21/9;overflow:hidden}

.pd-hero img{width:100%;height:100%;object-fit:cover;filter:brightness(.35)}

.pd-hero img.contain{object-fit:contain;background:var(--black);padding:2rem 4rem;filter:brightness(.5)}

.pd-hero-ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:3rem 4vw calc(33% - 500px) calc(4vw + 100px);background:linear-gradient(to top,var(--black),transparent 60%)}

.pd-hero-cat{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-bottom:.4rem}

.pd-hero-name{font-family:var(--head);font-size:clamp(3rem,6vw,5.4rem);letter-spacing:.02em;line-height:1}

.pd-body{padding:3rem 4vw 5rem;max-width:1400px;margin:0 auto}

.pd-meta{display:flex;gap:3rem;margin-bottom:3rem;flex-wrap:wrap}

.pd-mi{border-left:2px solid var(--yellow);padding-left:1rem}

.pd-mv{font-family:var(--head);font-size:1.6rem;color:var(--yellow);line-height:1}

.pd-ml{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--white);margin-top:.2rem}

.pd-desc{font-size:.9rem;color:var(--gray);line-height:1.7;font-weight:400;max-width:650px;margin-bottom:3rem;text-align:justify;text-wrap:pretty}

.pd-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

.pd-photos.c2{grid-template-columns:repeat(2,1fr)}

.pd-ph{overflow:hidden;background:var(--dark);cursor:pointer}

.pd-ph.wide{grid-column:1/-1}

.pd-ph img{width:100%;display:block;transition:transform .5s}

.pd-ph:hover img{transform:scale(1.03)}

.pd-webs{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:2rem}

.pd-web-card{position:relative;background:var(--dark2);border:1px solid var(--dark3);overflow:hidden;cursor:pointer;transition:border-color .3s,transform .3s}

.pd-web-card:hover{border-color:var(--yellow);transform:translateY(-4px)}

.pd-web-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;filter:brightness(.8);transition:filter .3s}

.pd-web-card:hover img{filter:brightness(1)}

.pd-web-info{padding:1rem 1.2rem}

.pd-web-name{font-family:var(--head);font-size:1.1rem;letter-spacing:.02em}

.pd-web-url{font-size:.7rem;color:var(--white);margin-top:.3rem}

.pd-web-badge{position:absolute;top:.8rem;right:.8rem;background:var(--yellow);color:#000;font-size:.6rem;font-weight:900;letter-spacing:.1em;padding:.25rem .6rem;text-transform:uppercase}

.web-viewer{position:fixed;inset:0;z-index:9000;background:var(--black);display:none;flex-direction:column}

.web-viewer.open{display:flex;cursor:auto}

.web-viewer.open *{cursor:auto}

.web-viewer.open~.cur,.web-viewer.open+.cur{display:none!important}

body.wv-open .cur{display:none!important}

body.wv-open,body.wv-open *{cursor:auto!important}

.web-viewer-bar{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1.5rem;background:var(--dark);border-bottom:1px solid var(--dark3);flex-shrink:0}

.web-viewer-title{font-family:var(--head);font-size:.9rem;letter-spacing:.04em}

.web-viewer-close{background:none;border:1px solid var(--gray-dark);color:var(--white);padding:.4rem 1rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;font-family:var(--body);transition:all .2s}

.web-viewer-close:hover{border-color:var(--yellow);color:var(--yellow)}

.web-viewer iframe{flex:1;width:100%;border:0}

.pd-video{position:relative;width:100%;padding-bottom:56.25%;margin-bottom:2rem;background:var(--dark)}

.pd-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.pd-video-native{width:100%;max-width:360px;margin:0 auto 2rem}

.pd-video-native video{width:100%;display:block;border-radius:4px}

.pd-videos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:2rem}

.pd-videos video{width:100%;display:block;border-radius:4px}

.pd-back{display:inline-flex;align-items:center;gap:.5rem;margin-top:3rem;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);cursor:pointer;transition:color .2s}

.pd-back:hover{color:var(--yellow)}



/* LIGHTBOX */

.lb{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.95);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .3s;cursor:zoom-out}

.lb.open{opacity:1;visibility:visible}

.lb img{max-width:92vw;max-height:90vh;object-fit:contain}

.lb-close{position:absolute;top:1.5rem;right:1.5rem;width:40px;height:40px;border:1px solid rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;background:none;transition:all .2s}

.lb-close:hover{border-color:var(--yellow);color:var(--yellow)}

.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;cursor:pointer;background:rgba(0,0,0,.4);transition:all .2s}

.lb-nav:hover{border-color:var(--yellow);color:var(--yellow)}

.lb-prev{left:1.5rem}

.lb-next{right:1.5rem}



/* ─── SERVICES (redesigned) ─── */

.svc-section{position:relative;overflow:hidden;padding:8rem 4vw}

.svc-section::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--dark) 0%,var(--black) 100%)}

.svc-content{position:relative;z-index:1}

.svc-head{margin-bottom:4rem}

.svc-title{font-family:var(--head);font-size:clamp(3rem,6vw,5.5rem);line-height:.95;letter-spacing:.02em;margin-bottom:1rem}

.svc-title .y{color:var(--yellow)}

.svc-title .dim{color:var(--gray-dark)}

.svc-sub{font-size:1rem;color:var(--gray);max-width:500px;line-height:1.7;font-weight:300}

.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;max-width:900px;margin:0 auto}

.sv{padding:3rem 2.5rem;border:1px solid var(--dark2);border-right:none;transition:all .3s;position:relative;overflow:hidden}

.sv:last-child{border-right:1px solid var(--dark2)}

.sv::before{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--yellow);transition:width .5s}

.sv:hover::before{width:100%}

.sv:hover{background:rgba(232,255,0,.02)}

.sv-num{font-family:var(--head);font-size:3.5rem;color:var(--yellow);opacity:.5;line-height:1;margin-bottom:1.5rem}

.sv h3{font-family:var(--head);font-size:clamp(1.56rem,2.4vw,2.16rem);letter-spacing:.03em;margin-bottom:.8rem}

.sv h3 .y{color:var(--yellow)}

.sv p{font-size:.9rem;color:var(--gray);line-height:1.7;font-weight:500}



/* ─── AI TRANSITIONS SECTION ─── */

.ai-section{position:relative;overflow:hidden;padding:8rem 4vw;background:var(--dark)}

.ai-inner{display:grid;grid-template-columns:auto auto;gap:2.5rem;align-items:center;max-width:1200px;margin:0 auto;justify-content:center}

.ai-video-wrap{position:relative;height:70vh;aspect-ratio:9/16;border:1px solid var(--dark3);overflow:hidden;border-radius:12px;flex-shrink:0}

.ai-video-wrap video{width:100%;height:100%;object-fit:cover}

.ai-badge{position:absolute;top:1rem;left:1rem;padding:.35rem 1rem;background:var(--yellow);color:var(--black);font-size:.55rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:4px}

.ai-text{}

.ai-text .lab{margin-bottom:1rem}

.ai-title{font-family:var(--head);font-size:clamp(2.5rem,5vw,4.5rem);letter-spacing:.02em;line-height:.95;margin-bottom:1.5rem}

.ai-title .y{color:var(--yellow)}

.ai-desc{font-size:.9rem;color:var(--gray);line-height:1.7;font-weight:300;max-width:450px;margin-bottom:2rem}

.ai-features{display:flex;flex-direction:column;gap:1rem}

.ai-feat{display:flex;align-items:center;gap:1rem}

.ai-feat-dot{width:8px;height:8px;background:var(--yellow);border-radius:50%;flex-shrink:0}

.ai-feat span{font-size:.82rem;color:var(--gray);font-weight:400}



/* ─── TECHNIKA (bigger video) ─── */

.tech-section{position:relative;overflow:hidden;padding:8rem 4vw}

.tech-inner{display:grid;grid-template-columns:auto auto;gap:2.5rem;align-items:center;max-width:1400px;margin:0 auto;justify-content:center}

.tech-text{}

.tech-equip{margin-top:2rem;display:flex;flex-direction:column;gap:.6rem}

.te-item{display:flex;align-items:center;gap:.8rem;font-size:.82rem;color:var(--gray);font-weight:400}

.te-item .te-dot{width:5px;height:5px;background:var(--yellow);border-radius:50%;flex-shrink:0}

.te-item strong{color:var(--white);font-weight:600}

.te-more{font-size:.75rem;color:var(--gray-dark);font-style:italic;margin-top:.5rem;padding-left:1.3rem}

.tech-video-wrap{position:relative;width:100%;max-width:380px;aspect-ratio:9/16;border:1px solid var(--dark3);overflow:hidden;border-radius:12px;justify-self:center}

.tech-video-wrap video{width:100%;height:100%;object-fit:cover}

.tech-badge{position:absolute;top:1rem;left:1rem;padding:.35rem 1rem;background:var(--yellow);color:var(--black);font-size:.55rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:4px}



/* PROCESS */

.proc-section{background:var(--dark)}

.proc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:3rem;max-width:900px;margin:3rem auto 0}

.ps{padding:3rem 2.5rem;border:1px solid var(--dark2);border-right:none;position:relative;overflow:hidden;transition:all .3s}

.ps:last-child{border-right:1px solid var(--dark2)}

.ps::before{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--yellow);transition:width .5s}

.ps:hover::before{width:100%}

.ps:hover{background:rgba(232,255,0,.02)}

.ps-num{font-family:var(--head);font-size:3.5rem;color:var(--yellow);opacity:.5;line-height:1;margin-bottom:1.5rem;position:relative}

.ps-dot{display:none}

.ps h3{font-family:var(--head);font-size:clamp(1.56rem,2.4vw,2.16rem);letter-spacing:.03em;margin-bottom:.8rem;position:relative}

.ps p{font-size:.9rem;color:var(--gray);line-height:1.7;font-weight:500;position:relative}



/* ABOUT */

.ab-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;margin-top:2.5rem}

.ab-text p{font-size:.88rem;color:var(--gray);line-height:1.7;margin-bottom:1.1rem;font-weight:500}

.ab-text strong{color:var(--white);font-weight:600}

.ab-box{background:var(--dark);border-left:2px solid var(--yellow);padding:1.8rem 2rem;margin-bottom:2px}

.ab-box h3{font-family:var(--head);font-size:1.15rem;letter-spacing:.03em;margin-bottom:.4rem}

.ab-box p{font-size:.8rem;color:var(--gray);line-height:1.6;font-weight:500}

.ab-img{width:100%;display:block;border-radius:8px;margin-bottom:2rem}

.ab-heading{font-family:var(--head);font-size:1.4rem;letter-spacing:.03em;margin-bottom:.6rem;color:var(--yellow)}

.tags{display:flex;gap:.5rem;margin-top:1.5rem;flex-wrap:wrap}

.tag{padding:.4rem 1rem;border:1px solid var(--dark3);font-size:.65rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);transition:all .2s}

.tag:hover{border-color:var(--yellow);color:var(--yellow)}



/* ─── INSTAGRAM ─── */

.ig-section{background:var(--dark);text-align:center;padding:6rem 4vw}

.ig-handle{font-family:var(--head);font-size:clamp(1.5rem,3vw,2.5rem);letter-spacing:.03em;margin-bottom:1rem}

.ig-handle a{color:var(--yellow);transition:opacity .2s}

.ig-handle a:hover{opacity:.7}

.ig-follow{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 2rem;border:1px solid var(--dark3);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);transition:all .2s}

.ig-follow:hover{border-color:var(--yellow);color:var(--yellow)}

.ig-follow svg{width:18px;height:18px}



/* CTA */

.cta{text-align:center;padding:8rem 4vw;position:relative}

.cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,var(--yellow-dim) 0%,transparent 60%)}

.cta h2{font-family:var(--head);font-size:clamp(3rem,7vw,6rem);letter-spacing:.02em;line-height:.95;margin-bottom:1rem;position:relative}

.cta .y{color:var(--yellow)}

.cta p{color:var(--gray);font-size:.9rem;margin-bottom:2.5rem;position:relative;font-weight:300}



/* FAQ */

.faq-section{background:var(--dark)}

.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:3rem}

.fq{background:var(--black);overflow:hidden}

.fq-head{padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background .2s;user-select:none;background:none;border:none;color:inherit;width:100%;text-align:left}

.fq-head:hover{background:var(--dark2)}

.fq-head h3,.fq-head h4{font-family:var(--head);font-size:1.1rem;letter-spacing:.02em}

.fq-toggle{width:28px;height:28px;border:1px solid var(--dark3);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--yellow);transition:transform .3s,border-color .3s;flex-shrink:0}

.fq.open .fq-toggle{transform:rotate(45deg);border-color:var(--yellow)}

.fq-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1)}

.fq.open .fq-body{max-height:300px}

.fq-body p{padding:0 2rem 1.5rem;font-size:.8rem;color:var(--gray);line-height:1.65;font-weight:300}



/* CONTACT */

.cg{display:grid;grid-template-columns:1fr 1fr;gap:5rem;margin-top:2.5rem}

.cb{margin-bottom:2rem}

.cb h3{font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-dark);margin-bottom:.4rem}

.cb a,.cb p{font-size:1.1rem;font-weight:400;transition:color .2s}

.cb a:hover{color:var(--yellow)}

.socs{display:flex;gap:.6rem;margin-top:1.5rem}

.soc{width:40px;height:40px;border:1px solid var(--dark3);display:flex;align-items:center;justify-content:center;transition:all .2s}

.soc:hover{border-color:var(--yellow);background:var(--yellow-dim)}

.soc svg{width:16px;height:16px}

.frm{display:flex;flex-direction:column;gap:1.3rem}

.fd label{display:block;font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--white);margin-bottom:.3rem}

.fd input,.fd textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--dark3);padding:.7rem 0;color:var(--white);font-family:var(--body);font-size:.9rem;outline:none;transition:border-color .2s;font-weight:300}

.fd input:focus,.fd textarea:focus{border-color:var(--yellow)}

.fd textarea{resize:none;min-height:90px}

.fd input::placeholder,.fd textarea::placeholder{color:var(--white)}



footer{padding:2.5rem 4vw;border-top:1px solid var(--dark2);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}

.fl-img{height:20px;width:auto;opacity:.5;transition:opacity .2s;margin-bottom:1rem}

.fl-img:hover{opacity:1}

.fc{font-size:.65rem;color:var(--gray-dark)}

.fk{display:flex;gap:1.5rem}

.fk a{font-size:.65rem;color:var(--gray-dark);letter-spacing:.07em;text-transform:uppercase;transition:color .2s}

.fk a:hover{color:var(--yellow)}



/* NAV DROPDOWN */

.nav-drop{position:relative;display:flex;align-items:center}

.nav-drop-trigger{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);transition:color .2s;cursor:pointer}

.nav-drop-trigger:hover{color:var(--yellow)}

.nav-drop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:180px;background:rgba(17,17,17,.97);backdrop-filter:blur(10px);border:1px solid var(--dark3);padding:.5rem 0;opacity:0;visibility:hidden;transition:all .25s;margin-top:.8rem;z-index:5001}

.nav-drop:hover .nav-drop-menu{opacity:1;visibility:visible;margin-top:.5rem}

.nav-drop-menu a{display:block;padding:.5rem 1.2rem;font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--gray);transition:all .2s;white-space:nowrap}

.nav-drop-menu a:hover{color:var(--yellow);background:rgba(232,255,0,.04)}



/* MOBILE SUB-LINKS */

.mn-sub{display:flex;flex-direction:column;gap:.4rem;margin:-.8rem 0 .4rem}

.mn-sub-link{font-family:var(--body)!important;font-size:.8rem!important;letter-spacing:.08em!important;color:var(--gray-dark)!important;transition:color .2s!important}

.mn-sub-link:hover{color:var(--yellow)!important}



/* SERVICE LINK */

.sv-link{display:inline-block;margin-top:1rem;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow);transition:opacity .2s}

.sv-link:hover{opacity:.7}



/* FOOTER NEW */

.ft-new{padding:4rem 4vw 0;border-top:1px solid var(--dark2)}

.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}

.ft-col{display:flex;flex-direction:column}

.ft-desc{font-size:.78rem;color:var(--gray-dark);line-height:1.7;font-weight:400}

.ft-heading{font-family:var(--head);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow);margin-bottom:1rem}

.ft-link{font-size:.75rem;color:var(--gray);margin-bottom:.5rem;transition:color .2s;font-weight:400}

.ft-link:hover{color:var(--yellow)}

.ft-loc{font-size:.75rem;color:var(--gray-dark);line-height:1.6;margin-top:.5rem}

.ft-socs{display:flex;gap:.6rem;margin-top:1rem}

.ft-bottom{border-top:1px solid var(--dark2);padding:1.5rem 0;text-align:center}

.ft-bottom .fc{font-size:.65rem;color:var(--gray-dark)}



/* BACK TO TOP */

.btt{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;background:var(--yellow);color:var(--black);display:flex;align-items:center;justify-content:center;font-size:1.1rem;border:none;cursor:pointer;z-index:4000;opacity:0;transform:translateY(10px);transition:all .3s;pointer-events:none}

.btt.show{opacity:1;transform:none;pointer-events:auto}

.btt:hover{box-shadow:var(--yellow-glow)}



.rv{opacity:0;transform:translateY(25px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}

.rv.v{opacity:1;transform:none}

.d1{transition-delay:.1s}.d2{transition-delay:.18s}.d3{transition-delay:.26s}



@media(max-width:1024px){

  .svc-grid{grid-template-columns:1fr 1fr}.sv{border-right:1px solid var(--dark2)}.sv:nth-child(2n){border-right:1px solid var(--dark2)}

  .ab-grid,.cg{grid-template-columns:1fr;gap:3rem}

  .proc-grid{grid-template-columns:repeat(2,1fr)}

  .faq-grid{grid-template-columns:1fr}

  .hr{display:none}

  .ai-inner{grid-template-columns:1fr;gap:2rem}

  .ai-video-wrap{height:60vh;justify-self:center}

  .tech-inner{grid-template-columns:1fr;gap:2rem}

  .tech-video-wrap{max-width:320px;justify-self:center}

  .pd-photos{grid-template-columns:repeat(2,1fr)}

  .fp{height:55vh}

  .ft-grid{grid-template-columns:1fr 1fr;gap:2rem}

}

@media(max-width:768px){

  nav{padding:1rem 5vw}.nl{display:none}.bur{display:flex}

  section{padding:5rem 5vw}

  .fp{height:45vh}

  .svc-grid{grid-template-columns:1fr}.sv{border-right:1px solid var(--dark2)}

  .proc-grid{grid-template-columns:1fr}.ps{border-right:none;border-bottom:1px solid var(--dark2)}

  .pd-hero{aspect-ratio:16/9}

  .pd-photos,.pd-photos.c2{grid-template-columns:1fr}.pd-ph.wide{grid-column:span 1}

  .pd-webs{grid-template-columns:1fr}

  .ig-section{padding:4rem 4vw}

  .ft-grid{grid-template-columns:1fr;gap:2rem;text-align:center}

  .ft-col{align-items:center}

  .ft-socs{justify-content:center}

  .cur{display:none!important}body,a,button,.clickable{cursor:auto}

  .hero-video iframe{width:200vw;height:200vh}

  .ai-video-wrap{height:50vh}

  .tech-video-wrap{max-width:280px}

  .svc-section,.ai-section,.tech-section,.cta{padding-top:5rem;padding-bottom:5rem}

  .proc-section{padding-top:5rem;padding-bottom:5rem}

  .web-viewer-bar{padding:.5rem .8rem;padding-top:calc(.5rem + env(safe-area-inset-top,0px))}

  .web-viewer-title{font-size:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 120px)}

  .web-viewer-close{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:.3rem .7rem;flex-shrink:0}

}



/* ─── BREADCRUMBS ─── */

.breadcrumbs{padding:6rem 4vw 0;font-size:.7rem}

.breadcrumbs a{color:var(--gray-dark);transition:color .2s}

.breadcrumbs a:hover{color:var(--yellow)}

.breadcrumbs span{color:var(--gray-dark);margin:0 .5rem}

.breadcrumbs .current{color:var(--yellow)}



/* ─── SERVICE HERO ─── */

.svc-hero{padding:2rem 4vw 4rem;max-width:900px}

.svc-hero h1{font-family:var(--head);font-size:clamp(3rem,7vw,5.5rem);letter-spacing:.02em;line-height:.95;margin-bottom:1.5rem}

.svc-hero h1 .y{color:var(--yellow)}

.svc-hero-desc{font-size:1rem;color:var(--gray);line-height:1.7;font-weight:300;max-width:650px}



/* ─── SERVICE CONTENT ─── */

.svc-detail{padding:4rem 4vw}

.svc-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;max-width:1200px;margin:0 auto}

.svc-detail-text h2{font-family:var(--head);font-size:clamp(1.8rem,3vw,2.5rem);letter-spacing:.02em;margin-bottom:1rem}

.svc-detail-text h2 .y{color:var(--yellow)}

.svc-detail-text p{font-size:.88rem;color:var(--gray);line-height:1.7;font-weight:400;margin-bottom:1rem}

.svc-detail-text ul{list-style:none;padding:0;margin:1.5rem 0}

.svc-detail-text li{display:flex;align-items:center;gap:.8rem;padding:.6rem 0;font-size:.85rem;color:var(--gray);font-weight:400;border-bottom:1px solid var(--dark2)}

.svc-detail-text li::before{content:'';width:6px;height:6px;background:var(--yellow);border-radius:50%;flex-shrink:0}



/* ─── SERVICE PORTFOLIO ─── */

.svc-portfolio{padding:5rem 4vw;background:var(--dark)}

.svc-portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:2.5rem}

.svc-portfolio-item{overflow:hidden;cursor:pointer;position:relative}

.svc-portfolio-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:brightness(.8);transition:all .4s}

.svc-portfolio-item:hover img{filter:brightness(1);transform:scale(1.03)}



/* ─── SERVICE FAQ ─── */

.svc-faq{padding:5rem 4vw}

.svc-faq .faq-grid{max-width:900px}



/* ─── RELATED SERVICES ─── */

.related-svc{padding:5rem 4vw;background:var(--dark)}

.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:2.5rem}

.related-card{background:var(--black);padding:2.5rem 2rem;transition:all .3s;position:relative;overflow:hidden}

.related-card::before{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--yellow);transition:width .5s}

.related-card:hover::before{width:100%}

.related-card:hover{background:rgba(232,255,0,.02)}

.related-card h3{font-family:var(--head);font-size:1.2rem;letter-spacing:.03em;margin-bottom:.5rem}

.related-card h3 .y{color:var(--yellow)}

.related-card p{font-size:.8rem;color:var(--gray);line-height:1.6;font-weight:400;margin-bottom:1rem}

.related-card .sv-link{margin-top:auto}



/* ─── SERVICE RESPONSIVE ─── */

@media(max-width:1024px){

  .svc-detail-grid{grid-template-columns:1fr}

  .svc-portfolio-grid{grid-template-columns:repeat(2,1fr)}

  .related-grid{grid-template-columns:1fr 1fr}

}

@media(max-width:768px){

  .svc-portfolio-grid{grid-template-columns:1fr}

  .related-grid{grid-template-columns:1fr}

  .breadcrumbs{padding-top:5rem}

}



/* ─── UTILITY CLASSES ─── */

.hero-div{width:40px;height:1px;background:var(--dark3);margin:.4rem 0}

.ig-sub{color:var(--gray);font-size:.95rem;max-width:500px;margin:0 auto 2.5rem;line-height:1.6}

.btn-submit{align-self:flex-start;border:none;font-family:var(--body);cursor:pointer}