:root {
  --ink: #21242a;
  --blue: #9b7741;
  --cobalt: #73562f;
  --cream: #f2eadc;
  --paper: #fcfaf5;
  --coral: #c49a57;
  --gold: #d8b777;
  --line: #ddd3c2;
  --muted: #6f6a62;
}

body { background: linear-gradient(180deg, #fcfaf5 0%, #fffefa 48%, #f5efe4 100%); }
.site-header { background: rgba(252, 250, 245, .94); border-color: #e4dccf; }
.brand span { border: 1px solid rgba(216,183,119,.7); }
.brand-logo img { width: 148px; height: 70px; object-fit: contain; flex: 0 0 148px; border-radius: 0; }
.site-header .brand-logo b { font-size: 1rem; letter-spacing: .01em; }
footer .brand-logo img { width: 132px; height: 76px; flex-basis: 132px; }
.hero { background: radial-gradient(circle at 78% 18%, rgba(216,183,119,.16), transparent 30%), linear-gradient(135deg, #fffefa 0%, #f4ecdf 100%); }
.hero:before { border-color: #d7c39e; box-shadow: 0 0 0 80px rgba(155,119,65,.035), 0 0 0 160px rgba(216,183,119,.028); }
.hero-panel { background: rgba(255,253,249,.55); padding: 1.5rem; border: 1px solid rgba(217,205,191,.9); border-radius: 18px; box-shadow: 0 18px 50px rgba(65,42,30,.07); }
.hero-panel > p, .capability { padding-left: 0; }
.project-image, .legacy-art { border-radius: 16px; }
.project-image { box-shadow: 0 18px 45px rgba(53,38,30,.11); }
.tag { background: rgba(252,250,245,.95); color: #614925; box-shadow: 0 5px 18px rgba(50,35,27,.12); }
.filter { background: rgba(255,253,249,.72); }
.filter.active, .filter:hover { background: var(--ink); border-color: var(--ink); }
.services { background: #f1eadf; }
.service-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.service-grid article { min-height: 260px; padding: clamp(1.5rem,4vw,3rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,254,250,.7); transition: .25s; }
.service-grid article:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 18px 38px rgba(45,37,27,.08); }
.service-grid article>span { display: block; color: var(--blue); font-weight: 800; font-size: .75rem; letter-spacing: .12em; margin-bottom: 2.5rem; }
.service-grid h3 { font-size: clamp(1.6rem,2.5vw,2.35rem); letter-spacing: -.04em; margin-bottom: 1rem; }
.service-grid p { color: var(--muted); max-width: 520px; margin: 0; }
.service-cta { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-top: 2rem; padding: 1.5rem 0; }
.service-cta p { margin: 0; font-size: 1.05rem; }
.approach { background: linear-gradient(145deg, #21242a 0%, #332f29 100%); }
.process li:hover { background: rgba(216,135,94,.08); }
.about { background: #fffdfa; }
.about-number { color: var(--blue); font-family: Georgia, serif; font-style: italic; }
.contact { background: linear-gradient(135deg, #6d522c 0%, #9b7741 58%, #c29a58 100%); }
.contact h2 { font-size: clamp(3.1rem, 7vw, 7rem); }
footer {
  background: #eee4d4;
  color: #62594d;
  border-top: 1px solid #d8c9b3;
}
footer .brand { color: var(--ink); }

@media (max-width: 820px) {
  .hero-panel { padding: 1.25rem; }
  .service-grid { grid-template-columns: 1fr; }
  .service-cta { align-items: flex-start; flex-direction: column; }
  .brand-logo img { width: 124px; height: 64px; flex-basis: 124px; }
}

@media (max-width: 520px) {
  .site-header .brand-logo b { display: none; }
}