:root{
  --ground:#EAE7DE; --surface:#F6F4ED; --surface-2:#DEDACC;
  --ink:#23261F; --ink-soft:#565A4A; --ink-faint:#8B8F7C;
  --line:#CFC9B7;
  --accent:#4C6952; --accent-strong:#33473A; --accent-soft:#DBE3D4;
  --pad: clamp(20px, 6vw, 96px);
}

*{ box-sizing: border-box; }
html,body{ margin:0; }
body{
  background: var(--ground);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
a{ color: inherit; }
img,svg{ display:block; }

/* --- Nav --- */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem;
  padding: 1.1rem var(--pad);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.nav-brand{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--ink);
  font-weight:600; font-size:1rem;
}
.nav-emblem{ width:26px; height:26px; flex:none; }
.nav-links{ display:flex; gap:1.75rem; }
.nav-links a{ text-decoration:none; font-size:.95rem; color:var(--ink); }
.nav-links a.active{ font-weight:600; border-bottom:2px solid var(--accent-strong); }
@media (max-width:700px){
  .nav{ flex-direction:column; align-items:flex-start; gap:.6rem; }
  .nav-links{ flex-direction:column; gap:.35rem; }
}

/* --- Hero --- */
.hero{
  background: var(--ground);
  padding: clamp(56px,10vw,120px) var(--pad) clamp(48px,8vw,96px);
  display:flex; flex-direction:column; gap:1.3rem;
}
.kicker{ display:flex; align-items:center; gap:14px; }
.kicker svg{ width:44px; height:44px; }
.kicker span{
  font-family:'IBM Plex Mono', monospace; font-size:13px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
h1.brand-title{
  font-family:'Fraunces', Georgia, serif; font-weight:900;
  font-size: clamp(1.7rem, 7vw, 4.25rem);
  line-height:1; letter-spacing:-.01em; margin:0;
  white-space: nowrap;
}
.tagline{
  font-family:'Fraunces', Georgia, serif; font-weight:600; font-style:italic;
  font-size: clamp(1.15rem, 3.2vw, 1.625rem);
  color: var(--accent-strong); margin:0;
}
.lead{
  font-size:1.0625rem; line-height:1.55; color:var(--ink-soft);
  max-width:44ch; margin:0;
}

/* --- Buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 14px 28px; border-radius:4px;
  background: var(--accent-strong); color: var(--surface);
  font-family:'IBM Plex Sans', sans-serif; font-weight:600; font-size:1rem;
  text-decoration:none; width:fit-content;
}
.btn-inverse{ background: var(--surface); color: var(--accent-strong); }

/* --- Section shells --- */
.section{ padding: clamp(56px,9vw,88px) var(--pad); }
.section--surface{ background: var(--surface); }
.section--trust{ background: var(--accent-soft); }
.section--cta{
  background: var(--accent-strong); color: var(--surface);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem;
}
.section-title{
  font-family:'Fraunces', Georgia, serif; font-weight:700;
  font-size: clamp(1.6rem, 4vw, 2.125rem);
  margin:0 0 2rem;
}
.section--cta .section-title{ margin-bottom:0; color:var(--surface); }
.section--cta p{ color: var(--accent-soft); margin:0; max-width:40ch; }

/* --- Cards (services) --- */
.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:2rem; }
.card{
  background: var(--surface); border:1px solid var(--line); border-radius:4px;
  padding: 24px 22px; display:flex; flex-direction:column; gap:.75rem;
}
.card svg{ width:30px; height:30px; }
.card h3{
  font-family:'Fraunces', Georgia, serif; font-weight:700; font-size:1.1875rem; margin:0;
}
.card p{ font-size:.875rem; line-height:1.5; color:var(--ink-soft); margin:0; }

/* --- Points (how we work) --- */
.points{ display:grid; grid-template-columns: repeat(3, 1fr); gap:2rem; }
.point{ display:flex; flex-direction:column; gap:.6rem; }
.point .n{ font-family:'IBM Plex Mono', monospace; font-size:.9375rem; color:var(--accent-strong); }
.point h3{ font-family:'Fraunces', Georgia, serif; font-weight:700; font-size:1.1875rem; margin:0; }
.point p{ font-size:.875rem; line-height:1.5; color:var(--ink-soft); margin:0; }

/* --- Project cards (projektek page) --- */
.projects-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:2rem; }
.project-card{
  background: var(--surface); border:1px solid var(--line); border-radius:4px;
  padding: 26px; display:flex; flex-direction:column; gap:.75rem;
}
.project-card h3{ font-family:'Fraunces', Georgia, serif; font-weight:700; font-size:1.1875rem; margin:0; }
.project-card p{ font-size:.875rem; line-height:1.5; color:var(--ink-soft); margin:0; }
.status-pill{
  display:inline-flex; align-items:center; width:fit-content;
  padding:4px 10px; border-radius:20px; border:1px solid var(--line);
  font-family:'IBM Plex Mono', monospace; font-size:.6875rem; letter-spacing:.06em;
  color: var(--accent-strong);
}

/* --- Footer --- */
footer.site-footer{
  background: var(--surface); border-top:1px solid var(--line);
  padding: 1.75rem var(--pad); text-align:center;
  font-size:.875rem; color: var(--ink-faint);
}

/* --- Responsive overrides (must stay last to win the cascade) --- */
@media (max-width:700px){
  .cards, .points, .projects-grid{ grid-template-columns: 1fr; }
}