:root{
  --base:#E8E5E1;
  --surface:#FFFFFF;
  --surface-2:#F1EFEC;
  --line:#D5D0CA;
  --ink:#1E2A38;
  --ink-dim:#5A6B7C;
  --accent:#D96B43;
  --accent-dim:#B55A38;
  --status-live:#00E6A5;
  --footer:#1E2A38;
  --footer-ink:#E8E5E1;
  --done-bg:#DDF4E5;
  --done-ink:#1F7A4D;
  --progress-bg:#FBE3D9;
  --progress-ink:#B55A38;
  --pending-bg:#ECE9E5;
  --pending-ink:#6B6F73;
  --font-display:'Archivo',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --font-body:'Archivo',sans-serif;
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--base);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  font-size:16px;
}

body.no-scroll{overflow:hidden;}

a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}

.mono{font-family:var(--font-mono);}

.wrap{max-width:1200px;margin:0 auto;padding-left:48px;padding-right:48px;}

header.site{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 48px;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
  background:var(--base);
}

.brand{display:flex;align-items:center;gap:12px;color:var(--accent);}
.brand .mark{width:28px;height:28px;flex-shrink:0;}
.brand .word{display:flex;align-items:baseline;gap:8px;color:var(--ink);}
.brand .word b{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:0.02em;}
.brand .word span{font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.16em;color:var(--ink-dim);}

nav.main{display:flex;gap:30px;align-items:center;}
nav.main a{font-family:var(--font-mono);font-size:0.88rem;color:var(--ink-dim);transition:color 0.2s ease;}
nav.main a:hover{color:var(--accent);}
.nav-close{display:none;background:none;border:none;color:var(--ink);font-size:1.6rem;line-height:1;}

.actions{display:flex;align-items:center;gap:18px;}

.lang{display:flex;border:1px solid var(--ink-dim);}
.lang button{
  background:none;border:none;color:var(--ink-dim);
  font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.06em;
  padding:6px 11px;transition:background 0.2s ease,color 0.2s ease;
}
.lang button + button{border-left:1px solid var(--ink-dim);}
.lang button:hover{color:var(--accent);}
.lang button.active{background:var(--accent);color:#FFFFFF;}

.hamburger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;padding:6px;
}
.hamburger span{width:22px;height:2px;background:var(--ink);transition:transform 0.2s ease,opacity 0.2s ease;}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:0.88rem;
  padding:12px 22px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#FFFFFF;
  transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease;
}
.btn:hover{background:var(--accent-dim);border-color:var(--accent-dim);color:#FFFFFF;}
.btn.ghost{background:transparent;border-color:var(--ink-dim);color:var(--ink);}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--accent);color:var(--accent);}
.btn.solid{background:var(--accent);border-color:var(--accent);color:#FFFFFF;}
.btn.solid:hover{background:var(--footer);border-color:var(--footer);color:#FFFFFF;}

.hero{
  padding:90px 48px 80px;
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:center;
  max-width:1200px;margin:0 auto;
}
.hero-label{
  font-family:var(--font-mono);color:var(--accent);font-size:0.85rem;margin-bottom:18px;
  display:flex;align-items:center;gap:10px;
}
.hero-label::before{content:'';width:22px;height:1px;background:var(--accent);}
.hero h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.3rem,4.6vw,3.6rem);line-height:1.05;letter-spacing:-0.015em;max-width:16ch;
}
.hero p.lead{margin-top:22px;max-width:50ch;color:var(--ink-dim);font-size:1.05rem;}
.hero .actions{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap;}
.hero-graphic{aspect-ratio:1/1;}
.hero-graphic svg{width:100%;height:100%;}

.tag{font-family:var(--font-mono);color:var(--accent);font-size:0.85rem;letter-spacing:0.08em;text-transform:uppercase;}

.section-head{padding:60px 48px 24px;max-width:1200px;margin:0 auto;}
.section-head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3vw,2.4rem);margin-top:10px;}
.section-head .count{font-family:var(--font-mono);color:var(--ink-dim);font-size:0.85rem;margin-top:12px;}

.about{
  padding:80px 48px;max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:0.4fr 0.6fr;gap:48px;
  border-top:1px solid var(--line);
}
.about h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3vw,2.4rem);}
.about p{max-width:60ch;color:var(--ink-dim);margin-top:16px;font-size:1.02rem;}
.about p:last-child{margin-top:10px;}

.services{border-top:1px solid var(--line);padding-bottom:80px;}
.services-grid{
  max-width:1200px;margin:34px auto 0;
  padding:0 48px;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.card.svc{
  background:var(--surface);
  border:1px solid var(--line);
  padding:26px;
  display:flex;flex-direction:column;gap:14px;
  transition:border-color 0.2s ease,transform 0.2s ease;
}
.card.svc:hover{border-color:var(--accent-dim);transform:translateY(-3px);}
.card.svc .svc-icon{width:30px;height:30px;color:var(--accent);}
.card.svc h3{font-family:var(--font-display);font-weight:700;font-size:1.2rem;}
.card.svc .desc{color:var(--ink-dim);font-size:0.96rem;}

.projects{border-top:1px solid var(--line);}

.filters{
  max-width:1200px;margin:30px auto 0;
  display:flex;gap:10px;flex-wrap:wrap;
  padding:0 48px;
}
.filter{
  border:1px solid var(--line);background:none;color:var(--ink-dim);
  font-family:var(--font-mono);font-size:0.82rem;
  padding:9px 18px;
  transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease;
}
.filter:hover{border-color:var(--accent-dim);color:var(--ink);}
.filter.active{background:var(--accent);border-color:var(--accent);color:var(--base);}

.grid{
  max-width:1200px;margin:34px auto 0;
  padding:0 48px 90px;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:border-color 0.2s ease,transform 0.2s ease;
}
.card:hover{border-color:var(--accent-dim);transform:translateY(-3px);}
.card .thumb{
  aspect-ratio:16/10;background:var(--surface-2);
  position:relative;overflow:hidden;cursor:pointer;
}
.card .thumb img{width:100%;height:100%;object-fit:cover;}
.card .thumb:hover img{transform:scale(1.03);}
.card .thumb img{transition:transform 0.3s ease;}
.card .ref{
  font-family:var(--font-mono);font-size:0.7rem;color:var(--ink);
  position:absolute;top:10px;left:10px;
  background:var(--base);padding:3px 8px;
}
.badge{
  font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.05em;text-transform:uppercase;
  padding:3px 9px;
}
.badge.status-done{background:var(--done-bg);color:var(--done-ink);border:1px solid #bfe3cb;}
.badge.status-inprogress{background:var(--progress-bg);color:var(--progress-ink);border:1px solid #eec6b4;}
.badge.status-pending{background:var(--pending-bg);color:var(--pending-ink);border:1px solid var(--line);}
.card .thumb .badge{position:absolute;top:10px;right:10px;}
.card h3{font-family:var(--font-body);font-weight:600;font-size:1.15rem;padding:18px 20px 0;}
.card p.desc{color:var(--ink-dim);font-size:0.94rem;padding:8px 20px 20px;}

.contact{
  padding:80px 48px;max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:0.45fr 0.55fr;gap:56px;
  border-top:1px solid var(--line);
}
.contact h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3vw,2.4rem);margin-top:10px;}
.contact-sub{color:var(--ink-dim);margin-top:14px;max-width:42ch;}
.info-list{margin-top:30px;display:flex;flex-direction:column;gap:16px;}
.info-item{display:flex;flex-direction:column;gap:4px;}
.info-label{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent-dim);}
.info-item a{color:var(--ink);font-size:1rem;font-family:var(--font-mono);transition:color 0.2s ease;}
.info-item a:hover{color:var(--accent);}
.info-item .social{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);}
.info-item .social svg{width:18px;height:18px;}

form.contact-form{display:flex;flex-direction:column;gap:18px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-family:var(--font-mono);font-size:0.8rem;color:var(--ink-dim);}
.field input,.field textarea{
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  padding:13px 14px;font-family:var(--font-body);font-size:0.98rem;
  transition:border-color 0.2s ease;
}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);}
.form-msg{font-size:0.9rem;min-height:1.2em;}
.form-msg.ok{color:var(--done-ink);}
.form-msg.err{color:var(--progress-ink);}
form.contact-form .btn{align-self:flex-start;}

footer.site{
  padding:28px 48px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:0.8rem;color:var(--footer-ink);
  background:var(--footer);
  border-top:1px solid var(--footer);
  max-width:1200px;margin:0 auto;
}

.lightbox{
  position:fixed;inset:0;z-index:50;
  background:rgba(20,18,14,0.9);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;visibility:hidden;transition:opacity 0.2s ease,visibility 0.2s ease;
}
.lightbox.open{opacity:1;visibility:visible;}
.lb-content{
  max-width:760px;width:100%;
  background:var(--surface);border:1px solid var(--line);
  overflow:hidden;max-height:90vh;overflow-y:auto;
}
.lb-content img{width:100%;display:block;object-fit:cover;max-height:60vh;}
.lb-content figcaption{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;}
.lb-content figcaption .badge{align-self:flex-start;}
.lb-content figcaption h3{font-family:var(--font-display);font-weight:700;font-size:1.4rem;}
.lb-content figcaption p{color:var(--ink-dim);}
.lb-close{
  position:absolute;top:18px;right:22px;
  background:none;border:none;color:#FFFFFF;
  font-size:2rem;line-height:1;
  transition:color 0.2s ease;
}
.lb-close:hover{color:var(--accent);}

@media (max-width:900px){
  header.site{padding:16px 22px;}
  .hero{padding:60px 22px;grid-template-columns:1fr;}
  .about{padding:60px 22px;grid-template-columns:1fr;}
  .section-head{padding:50px 22px 20px;}
  .services-grid{padding:26px 22px;grid-template-columns:1fr;}
  .filters{padding:26px 22px;}
  .grid{padding:26px 22px 70px;grid-template-columns:1fr;}
  .contact{padding:60px 22px;grid-template-columns:1fr;}
  footer.site{padding:22px;}

  .hamburger{display:flex;}
  nav.main{
    position:fixed;inset:0;z-index:30;
    flex-direction:column;justify-content:center;gap:28px;
    background:var(--base);
    padding:24px;
    opacity:0;visibility:hidden;transition:opacity 0.2s ease,visibility 0.2s ease;
  }
  nav.main.open{opacity:1;visibility:visible;}
  nav.main a{font-size:1.15rem;}
  .nav-close{display:block;position:absolute;top:20px;right:22px;}
}