:root{--bg:#050505;--panel:#0e0e0e;--line:#242424;--orange:#ff8a00;--orange2:#e06f00;--text:#f4f4f4;--muted:#b5b5b5}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{background:var(--bg);color:var(--text);font-family:Barlow,Arial,sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
h1,h2,h3{line-height:1.08;font-weight:800}
h2{font-size:clamp(1.9rem,4vw,2.9rem);text-transform:uppercase}
h2 em{font-style:normal;color:var(--orange)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;font-weight:700;text-transform:uppercase;font-size:.88rem;letter-spacing:.05em;border:2px solid var(--orange);cursor:pointer;color:var(--text);background:transparent;border-radius:40px;transition:background .2s,color .2s}
.btn.solid{background:var(--orange);color:#111}
.btn:hover{background:var(--orange2);border-color:var(--orange2);color:#111}
.lead{color:var(--muted);max-width:620px;margin-top:14px;font-size:1.05rem}
/* header */
header{position:fixed;top:0;left:0;right:0;z-index:30;background:linear-gradient(#000c,#0000);transition:background .25s}
header.solid{background:rgba(5,5,5,.96);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.55rem;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.logo b{color:var(--orange)}
nav{display:flex;align-items:center;gap:30px}
nav a.l{font-size:.9rem;font-weight:600;padding:6px 0;border-bottom:2px solid transparent}
nav a.l:hover{color:var(--orange);border-color:var(--orange)}
nav .btn{padding:10px 20px;font-size:.82rem}
#menu{display:none;background:none;border:1px solid #444;color:#fff;padding:8px 13px;font-size:1.1rem;cursor:pointer;border-radius:8px}
/* hero slider */
.hero{position:relative;height:min(92vh,760px);min-height:560px;overflow:hidden;background:#000}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1s;background-size:cover;background-position:center}
.slide.on{opacity:1}
.hero .copy{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;max-width:620px;padding-top:60px}
.hero h1{font-size:clamp(2.5rem,6.4vw,4.6rem);text-transform:uppercase;margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero p{font-size:1.15rem;color:#ddd;margin-bottom:32px;max-width:500px}
.hero .btns{display:flex;gap:14px;flex-wrap:wrap}
.arc{position:absolute;z-index:2;left:-12%;top:-15%;width:62%;height:130%;border-right:6px solid var(--orange);border-radius:0 50% 50% 0;box-shadow:0 0 50px rgba(255,138,0,.25);pointer-events:none}
.dots{position:absolute;z-index:4;left:0;right:0;bottom:30px}
.dots .wrap{display:flex;gap:10px}
.dots button{width:46px;height:5px;border:0;background:#fff5;cursor:pointer;border-radius:3px}
.dots button.on{background:var(--orange)}
/* solutions */
section{padding:96px 0}
.sol{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:center;margin-top:48px}
.tabs{display:grid;gap:0;border-top:1px solid var(--line)}
.tab{background:none;border:0;border-bottom:1px solid var(--line);color:var(--muted);text-align:left;padding:22px 4px;cursor:pointer}
.tab h3{font-size:1.35rem;color:var(--text);display:flex;justify-content:space-between;align-items:center;text-transform:uppercase}
.tab h3::after{content:"+";color:var(--orange);font-size:1.6rem;font-weight:500}
.tab p{max-height:0;overflow:hidden;transition:max-height .35s,margin .35s;font-size:1rem}
.tab.on{color:var(--muted)}
.tab.on h3::after{content:"–"}
.tab.on p{max-height:140px;margin-top:10px}
.sol .pic{position:relative;aspect-ratio:4/3;border-radius:0 40px 0 40px;overflow:hidden;border:1px solid var(--line)}
.sol .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.sol .pic img.on{opacity:1}
/* why */
.why{background:var(--panel);border-block:1px solid var(--line)}
.why .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;margin-top:48px}
.why .it{padding:8px 30px 8px 0;border-left:3px solid var(--orange);padding-left:22px;margin-right:20px}
.why .it h3{font-size:1.2rem;text-transform:uppercase;margin-bottom:8px}
.why .it p{color:var(--muted);font-size:.98rem}
/* projects */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.cases{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;gap:22px 14px;margin-top:44px}
.case{width:100%;height:230px;position:relative;overflow:hidden;border:0;padding:0;cursor:zoom-in;background:#111;border-radius:6px}
.case img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.case:hover img{transform:scale(1.05)}
.case span{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;font-weight:600;font-size:.92rem;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.lb{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:24px;flex-direction:column;gap:12px}
.lb.on{display:flex}
.lb img{max-height:82vh;max-width:100%;object-fit:contain}
.lb p{color:var(--muted)}
.lb button{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;font-size:2.2rem;cursor:pointer}
/* cta */
.cta{background:linear-gradient(100deg,#ff8a00,#e06500);color:#111;padding:44px 0}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
.cta p{font-weight:500}
.cta .btn{background:#000;color:#fff;border-color:#000}
.cta .btn:hover{background:#222;color:#fff}
/* contact */
.contact .wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:60px}
.info{list-style:none;margin-top:32px;display:grid;gap:20px}
.info li{display:flex;gap:14px;align-items:flex-start}
.info i{flex:none;width:38px;height:38px;border-radius:50%;background:var(--orange);color:#111;display:grid;place-items:center;font-style:normal;font-weight:800}
.info small{display:block;color:var(--muted)}
form{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
form .full{grid-column:1/-1}
input,textarea,select{width:100%;background:#151515;border:1px solid var(--line);color:var(--text);padding:15px;font:inherit;border-radius:6px}
input:focus,textarea:focus,select:focus{border-color:var(--orange);outline:none}
textarea{min-height:140px;resize:vertical}
.hp{position:absolute;left:-9999px}
#status{grid-column:1/-1;font-weight:600;min-height:1.4em}
footer{background:var(--panel);border-top:1px solid var(--line);padding:60px 0 22px;font-size:.93rem}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:36px}
footer h4{color:var(--orange);text-transform:uppercase;font-size:.8rem;letter-spacing:.1em;margin-bottom:14px}
footer li{list-style:none;color:var(--muted);margin-bottom:8px}
footer li a:hover{color:var(--orange)}
footer .about{color:var(--muted);margin-top:14px;max-width:300px}
.copy2{text-align:center;color:var(--muted);border-top:1px solid var(--line);margin-top:40px;padding-top:18px;font-size:.85rem}
@media(max-width:960px){
 nav{display:none;position:absolute;top:76px;left:0;right:0;background:#050505;flex-direction:column;align-items:flex-start;padding:22px 28px;border-bottom:1px solid var(--line)}
 nav.open{display:flex}#menu{display:block}
 header{background:rgba(5,5,5,.96)}
 .arc{display:none}
 .sol,.contact .wrap{grid-template-columns:1fr}
 .sol .pic{order:-1}
 .cases{grid-template-columns:repeat(2,1fr)}
 .case{height:170px}
 footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){form{grid-template-columns:1fr}section{padding:68px 0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* slides, fit-to-frame slide, project cards */
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.88) 0,rgba(0,0,0,.6) 45%,rgba(0,0,0,.1) 100%)}
.slide.fit{background:#000}.slide.fit::after{display:none}
.fitimg{position:absolute;right:0;top:92px;bottom:64px;width:56%;background-repeat:no-repeat;background-position:center;background-size:contain}
@media(min-width:961px){.hero .copy{max-width:min(620px,46%)}}
@media(max-width:960px){
 .slide::after{background:rgba(0,0,0,.68)}
 .hero{height:700px}
 .hero.fitmode .copy{justify-content:flex-start;padding-top:96px}
 .hero.fitmode #hp{display:none}
 .fitimg{left:0;right:0;width:100%;top:auto;bottom:56px;height:250px}
}
.item{display:flex;flex-direction:column;scroll-margin-top:90px}
.item:target .case{outline:2px solid var(--orange)}
.go{align-self:flex-end;margin-top:8px;width:42px;height:42px;border:2px solid var(--orange);border-radius:50%;display:grid;place-items:center;color:var(--orange);font-size:1.25rem;font-weight:800;line-height:1;transition:background .2s,color .2s}
.go:hover{background:var(--orange);color:#111}
.page{padding-top:140px}
.back{display:inline-block;margin-bottom:18px;color:var(--orange);font-weight:600}