@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper: #F2F3EE;
  --surface: #E7E5D9;
  --ink: #17191B;
  --ink-soft: #4A4D47;
  --blueprint: #2A4F8F;
  --redline: #C23B2A;
  --line: #C7C5BA;
  --line-strong: #9B9A8E;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
}

.mono{ font-family:'IBM Plex Mono', monospace; }
.display{ font-family:'Archivo', sans-serif; }

a{ color:inherit; }

/* ---------- corner ticks / registration marks ---------- */
.plate{
  position:relative;
  border:1px solid var(--line);
}
.plate::before, .plate::after,
.plate .tick-br, .plate .tick-bl{
  content:"";
  position:absolute;
  width:9px; height:9px;
  border-color:var(--line-strong);
  border-style:solid;
}
.plate::before{ top:-1px; left:-1px; border-width:1px 0 0 1px; }
.plate::after{ top:-1px; right:-1px; border-width:1px 1px 0 0; }
.plate .tick-bl{ bottom:-1px; left:-1px; border-width:0 0 1px 1px; }
.plate .tick-br{ bottom:-1px; right:-1px; border-width:0 1px 1px 0; }

/* ---------- header / titleblock nav ---------- */
.titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 32px;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:rgba(242,243,238,0.94);
  backdrop-filter:blur(6px);
  z-index:50;
}
.logo{
  display:flex; align-items:baseline; gap:8px;
}
.logo .k{
  font-family:'Archivo', sans-serif;
  font-weight:800;
  font-size:20px;
  letter-spacing:0.02em;
}
.logo .c{
  font-family:'Archivo', sans-serif;
  font-weight:500;
  font-size:20px;
  color:var(--ink-soft);
  letter-spacing:0.02em;
}
.logo .tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.14em;
  color:var(--line-strong);
  margin-left:6px;
  border-left:1px solid var(--line);
  padding-left:8px;
}
nav{ display:flex; align-items:center; gap:28px; }
nav a{
  text-decoration:none;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.08em;
  color:var(--ink-soft);
  transition:color .15s ease;
}
nav a:hover, nav a:focus-visible{ color:var(--redline); outline:none; }
.lang-toggle{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--line-strong);
  border:1px solid var(--line);
  padding:5px 10px;
  border-radius:2px;
}
.lang-toggle span{ color:var(--ink); font-weight:500; }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); padding:7px 9px; cursor:pointer; }
.nav-toggle span{ display:block; width:16px; height:1.5px; background:var(--ink); margin:3px 0; }

/* ---------- hero ---------- */
.hero{
  max-width:1240px;
  margin:0 auto;
  padding:64px 32px 40px;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:48px;
  align-items:center;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.16em;
  color:var(--redline);
  text-transform:uppercase;
  margin-bottom:18px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--redline);
  display:inline-block;
}
h1{
  font-family:'Archivo', sans-serif;
  font-weight:800;
  font-size:clamp(34px, 4.4vw, 56px);
  line-height:1.04;
  letter-spacing:-0.01em;
  margin:0 0 22px;
}
h1 em{
  font-style:normal;
  color:var(--blueprint);
}
.hero p.lead{
  font-size:17px;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:46ch;
  margin:0 0 32px;
}
.cta-row{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  padding:14px 22px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.1em;
  border:1px solid var(--ink);
  transition:background .15s ease, color .15s ease;
}
.btn:hover, .btn:focus-visible{ background:var(--redline); border-color:var(--redline); outline:none; }
.link-quiet{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.06em;
  color:var(--ink-soft);
  text-decoration:none;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:2px;
}
.link-quiet:hover{ color:var(--blueprint); border-color:var(--blueprint); }

/* hero drawing */
.hero-art{ position:relative; }
.hero-art svg{ width:100%; height:auto; display:block; }
.draw-line{ stroke-dasharray:1; stroke-dashoffset:1; }
.scale-note{
  position:absolute;
  bottom:8px; left:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.08em;
  color:var(--line-strong);
}
.compass{
  position:absolute; top:10px; right:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  color:var(--line-strong);
  text-align:center;
}

/* ---------- section shell ---------- */
section{ max-width:1240px; margin:0 auto; padding:88px 32px; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding-bottom:18px; margin-bottom:44px;
  flex-wrap:wrap; gap:12px;
}
.section-head .sheet{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.12em;
  color:var(--line-strong);
}
h2{
  font-family:'Archivo', sans-serif;
  font-weight:700;
  font-size:clamp(24px, 2.6vw, 34px);
  margin:0;
  letter-spacing:-0.01em;
}

/* ---------- services grid ---------- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.service-card{
  background:var(--paper);
  padding:30px 26px 26px;
  min-height:230px;
  display:flex;
  flex-direction:column;
  transition:background .18s ease;
}
.service-card:hover{ background:var(--surface); }
.service-code{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--redline);
  letter-spacing:0.08em;
  margin-bottom:16px;
}
.service-icon{ margin-bottom:16px; }
.service-icon svg{ width:34px; height:34px; }
.service-card h3{
  font-family:'Archivo', sans-serif;
  font-weight:700;
  font-size:17px;
  margin:0 0 10px;
  line-height:1.25;
}
.service-card p{
  font-size:13.5px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0;
  flex-grow:1;
}

/* ---------- process ---------- */
.process{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
}
.process-step{ position:relative; padding-left:0; }
.process-num{
  font-family:'Archivo', sans-serif;
  font-weight:800;
  font-size:13px;
  color:var(--blueprint);
  letter-spacing:0.06em;
  margin-bottom:14px;
  display:block;
}
.process-step h3{
  font-family:'Archivo', sans-serif;
  font-size:18px;
  margin:0 0 10px;
}
.process-step p{
  font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin:0;
}
.process-line{
  height:1px; background:var(--line); margin-top:20px; position:relative;
}
.process-line::after{
  content:"→";
  position:absolute; right:-4px; top:-9px;
  color:var(--line-strong); font-size:12px;
}

/* ---------- projects gallery ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:20px;
}
.gallery-item{
  background:var(--surface);
  padding:0;
  overflow:hidden;
}
.gallery-item .frame{
  aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--line);
  padding:0;
  overflow:hidden;
}
.gallery-item svg{ width:100%; height:100%; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-cap{ padding:16px 18px 18px; }
.gallery-cap .code{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  color:var(--line-strong);
  letter-spacing:0.08em;
  display:block;
  margin-bottom:6px;
}
.gallery-cap h4{
  font-family:'Archivo', sans-serif;
  font-size:15px;
  margin:0;
  font-weight:700;
}
.gallery-note{
  margin-top:20px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--line-strong);
  letter-spacing:0.02em;
}

/* ---------- cta ---------- */
.cta-section{
  background:var(--ink);
  color:var(--paper);
  padding:0;
}
.cta-inner{
  max-width:1240px; margin:0 auto;
  padding:90px 32px;
  text-align:center;
}
.cta-inner .eyebrow{ justify-content:center; color:#E7A093; }
.cta-inner .eyebrow::before{ background:#E7A093; }
.cta-inner h2{
  color:var(--paper);
  font-size:clamp(26px, 3.4vw, 42px);
  max-width:18ch;
  margin:0 auto 18px;
  line-height:1.1;
}
.cta-inner p{
  color:#B9BAB4;
  max-width:52ch;
  margin:0 auto 34px;
  font-size:15.5px;
  line-height:1.6;
}
.cta-inner .btn{
  background:var(--redline);
  border-color:var(--redline);
  color:var(--paper);
}
.cta-inner .btn:hover{ background:#E04E38; border-color:#E04E38; }

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:52px 32px 28px;
}
.footer-inner{
  max-width:1240px; margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:36px;
}
.footer-col h5{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--line-strong);
  margin:0 0 14px;
  text-transform:uppercase;
}
.footer-col p, .footer-col a{
  font-size:13.5px;
  line-height:1.8;
  color:var(--ink-soft);
  text-decoration:none;
  display:block;
}
.footer-col a:hover{ color:var(--blueprint); }
.footer-bottom{
  max-width:1240px; margin:0 auto;
  border-top:1px solid var(--line);
  padding-top:20px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  color:var(--line-strong);
  letter-spacing:0.04em;
  flex-wrap:wrap; gap:10px;
}

/* ---------- responsive ---------- */
@media (max-width:880px){
  nav{ display:none; }
  .nav-toggle{ display:block; }
  .lang-toggle{ display:none; }
  .hero{ grid-template-columns:1fr; padding-top:44px; }
  .hero-art{ order:-1; max-width:340px; margin:0 auto; }
  .services-grid{ grid-template-columns:1fr 1fr; }
  .process{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .services-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; }
  .titlebar{ padding:14px 18px; }
  section{ padding:64px 18px; }
  .hero{ padding:36px 18px 30px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .draw-line{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; }
}