:root{--red:#e30613;--dark:#101214;--dark2:#171a1d;--light:#f4f4f2;--muted:#aeb2b5;--white:#fff;--max:1836px;}
*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{font-family:Arial,Helvetica,sans-serif;background:var(--dark);color:var(--white);line-height:1.6}

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

.container{width:min(90%,var(--max));margin:auto}

header{position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(16,18,20,.9);backdrop-filter:blur(10px);border-bottom:1px solid #292d31}

.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}

.logo{height:48px;width:auto;object-fit:contain;padding:2px 8px;border-radius:3px}

nav{display:flex;gap:28px;align-items:center;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.05em}

nav a{opacity:.85} nav a:hover{color:var(--red);opacity:1}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;border-radius:3px;background:var(--red);font-weight:800;text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--red);transition:.2s}
.btn:hover{background:#b9000b;border-color:#b9000b;transform:translateY(-1px)}

.btn.alt{background:transparent;border-color:#555}

.hero{min-height:92vh;padding:150px 0 90px;display:flex;align-items:center;position:relative;overflow:hidden;background:
linear-gradient(90deg,rgba(16,18,20,.98) 0%,rgba(16,18,20,.82) 47%,rgba(16,18,20,.45) 100%),
radial-gradient(circle at 78% 42%,#4d5155 0,#24282b 26%,#111315 58%,#0b0c0e 100%)}

.hero:after{content:"";position:absolute;inset:0;opacity:.08;background:repeating-linear-gradient(135deg,transparent 0 22px,#fff 23px 24px)}

.hero-layout{position:relative;z-index:2;display:grid;grid-template-columns:minmax(300px, .9fr) minmax(0, 1.1fr);gap:70px;align-items:center}
.hero-media{height:min(64vh,620px);min-height:390px;overflow:hidden;border-left:6px solid var(--red);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.hero-media img{width:100%;height:100%;display:block;object-fit:cover}
.hero-content{position:relative;z-index:2;max-width:760px}

.kicker{color:var(--red);font-weight:900;text-transform:uppercase;letter-spacing:.16em;font-size:14px;margin-bottom:18px}

h1{font-size:clamp(48px,8vw,92px);line-height:.94;letter-spacing:-.04em;text-transform:uppercase;margin-bottom:24px}

h1 span{color:var(--red)}

.hero p{font-size:clamp(18px,2vw,22px);color:#d6d8da;max-width:650px;margin-bottom:34px}

.actions{display:flex;gap:12px;flex-wrap:wrap}

section{padding:100px 0}
.section-head{max-width:720px;margin-bottom:48px}
.section-head .kicker{margin-bottom:10px}

h2{font-size:clamp(34px,5vw,56px);line-height:1.02;text-transform:uppercase;letter-spacing:-.03em}

.lead{color:#444749;font-size:18px;margin-top:16px}

.services{background:var(--light);color:var(--dark)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid #ddd;padding:30px;min-height:230px;position:relative;overflow:hidden}
.card:before{content:"";position:absolute;top:0;left:0;width:5px;height:100%;background:var(--red)}
.number{font-size:14px;font-weight:900;color:var(--red);letter-spacing:.1em}
.card h3{font-size:25px;margin:18px 0 10px;text-transform:uppercase}
.card p{color:#555}

.projects{background:#121416}
.project-grid{display:grid;grid-template-columns:1.35fr .8fr .8fr;grid-auto-rows:240px;gap:12px}
.project{position:relative;overflow:hidden;min-height:220px;background:linear-gradient(135deg,#4b4e50,#16191b);cursor:zoom-in}
.project img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.project:hover img{transform:scale(1.06)}
.project.large{grid-row:span 2}
.project:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 65%)}
.project .label{position:absolute;z-index:2;left:20px;bottom:18px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}

.lightbox{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:30px;background:rgba(0,0,0,.88);opacity:0;pointer-events:none;transition:opacity .25s ease}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox img{max-width: min(92vw,1200px);max-height:85vh;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-close{position:absolute;top:22px;right:28px;border:0;background:transparent;color:#fff;font-size:38px;line-height:1;cursor:pointer}
.lightbox-close:hover{color:var(--red)}
body.lightbox-open{overflow:hidden}

.p1{background:linear-gradient(135deg,#626568,#1c2023 55%,#0e1012)}
.p2{background:linear-gradient(135deg,#202326,#767a7d)}
.p3{background:linear-gradient(135deg,#55595c,#17191b)}
.p4{background:linear-gradient(135deg,#151719,#5e6265)}
.p5{background:linear-gradient(135deg,#6b6e70,#24272a)}

.about{background:#f0f0ee;color:#111}
.about-wrap{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.about-box{border-left:7px solid var(--red);padding-left:28px}
.about-box h2{margin-bottom:18px}
.about-map{min-height:420px;height: -webkit-fill-available;border:1px solid #d9d9d9;overflow:hidden;background:#ddd;box-shadow:0 12px 30px rgba(0,0,0,.08);display:flex;flex-direction:column}
.about-map iframe{width:100%;height:auto;flex:1;border:0;display:block}
.about-map .map-link{background:var(--dark);color:#fff;padding:13px 18px;text-align:center;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.04em}
.about-map .map-link:hover{background:var(--red)}

.points{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.point{padding:18px;background:#fff;border:1px solid #ddd}
.point strong{display:block;text-transform:uppercase;margin-bottom:5px}

.contact{background:var(--red)}
.contact-wrap{display:grid;grid-template-columns:1fr .8fr;gap:60px;align-items:start}
.contact h2{color:#fff}
.contact p{margin-top:15px;max-width:600px}

.form{background:#fff;padding:28px;color:#111}
.form label{font-size:12px;font-weight:800;text-transform:uppercase;display:block;margin:0 0 6px}
.form input,.form textarea{width:100%;border:1px solid #ccc;padding:13px;margin-bottom:16px;font:inherit}
.form textarea{min-height:130px;resize:vertical}
.form .btn{width:100%;cursor:pointer}

footer{background:#0b0c0e;padding:28px 0;color:#92979b;font-size:14px}
.footer-wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

.mobile{display:none;border:0;background:transparent;color:var(--white);cursor:pointer;font-size:24px;line-height:1;padding:4px}

@media(max-width:850px){
.nav{position:relative}
nav{display:none}.mobile{display:block;font-size:24px}
.nav.menu-open nav{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:12px 5%;background:rgba(16,18,20,.98);border-top:1px solid #292d31}
.nav.menu-open nav a{padding:12px 0}
.grid{grid-template-columns:1fr 1fr}
.project-grid{grid-template-columns:1fr 1fr;grid-auto-rows:210px}
.project.large{grid-row:span 1}
.hero-layout{grid-template-columns:1fr;gap:38px}
.hero-media{height:360px;min-height:0;max-height:45vh}
.about-wrap,.contact-wrap{grid-template-columns:1fr;gap:35px}
.about-map{min-height:330px;height:330px}
}

@media(max-width:560px){
.nav{height:68px}.logo{height:40px}.hero{padding-top:125px;min-height:88vh}
.hero-layout{gap:28px}.hero-media{height:260px;max-height:none}
section{padding:75px 0}.grid,.project-grid,.points{grid-template-columns:1fr}
h1{font-size:52px}.project-grid{grid-auto-rows:190px}

.services-layout{grid-template-columns:1fr;gap:12px}
.main-stack{grid-template-columns:1fr;gap:12px;margin-left:0}
.secondary-grid{grid-template-columns:1fr;gap:12px}
.main-stack .service-image{height:260px}
.card h3{font-size:20px}
.card p{font-size:14px}
.about-map{min-height:260px;height:260px}
}