*, *::before, *::after { box-sizing: border-box; }
:root {
  --ink: #1c1b18;
  --amber: #e08a2c;
  --amber-2: #c56e14;
  --paper: #fff8ef;
  --muted: #5a564c;
  --line: #e6d8c4;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.06rem;
  line-height: 1.55;
  font-weight: 450;
}
a { color: var(--amber-2); }
:focus-visible { outline: 3px solid var(--amber-2); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 1.15rem; }
.bl-header { background: var(--ink); color: var(--paper); }
.bl-header .bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 4.1rem;
}
.bl-logo {
  color: var(--paper);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 1.2rem;
  text-transform: uppercase;
}
.bl-logo em { font-style: normal; color: var(--amber); }
.bl-header nav { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-weight: 700; font-size: 0.88rem; }
.bl-header nav a { color: var(--paper); text-decoration: none; }
.bl-header nav a:hover { color: var(--amber); }
.hero { padding: 3.2rem 0 2.8rem; }
.hero h1 {
  margin: 0;
  font-size: clamp(2.3rem, 7vw, 4.1rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  font-weight: 800;
  max-width: 14ch;
}
.hero .lead { margin: 1.1rem 0 0; max-width: 32rem; color: var(--muted); font-size: 1.12rem; }
.tag {
  display: inline-block;
  margin: 0 0 0.85rem;
  background: var(--amber);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
}
section { padding: 2.6rem 0; }
h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  font-weight: 800;
}
.services { display: grid; gap: 0.65rem; }
@media (min-width: 700px) { .services { grid-template-columns: 1fr 1fr; } }
.svc {
  background: #fff;
  border: 2px solid var(--ink);
  padding: 1rem 1.05rem;
}
.svc h3 { margin: 0 0 0.25rem; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.02em; }
.svc p { margin: 0; color: var(--muted); }
.work-row { display: grid; gap: 0.65rem; }
@media (min-width: 700px) { .work-row { grid-template-columns: 1fr 1fr 1fr; } }
.swatch {
  min-height: 8.5rem;
  border: 2px solid var(--ink);
  display: flex;
  align-items: flex-end;
  padding: 0.75rem 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
}
.swatch.a { background: repeating-linear-gradient(135deg, #f3d7b0, #f3d7b0 8px, #edd0a2 8px, #edd0a2 16px); }
.swatch.b { background: repeating-linear-gradient(90deg, #d9e0d4, #d9e0d4 10px, #cfd7c8 10px, #cfd7c8 20px); }
.swatch.c { background: repeating-linear-gradient(45deg, #e8e4dc, #e8e4dc 6px, #ddd7cc 6px, #ddd7cc 12px); }
.cta-band {
  background: var(--ink);
  color: var(--paper);
  padding: 2.4rem 0;
}
.cta-band p { margin: 0.6rem 0 0; color: #d9d2c5; max-width: 36rem; }
.phone {
  margin-top: 1rem;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--amber);
}
.foot { padding: 1.2rem 0 1.6rem; font-size: 0.88rem; color: var(--muted); }
.foot p { margin: 0; }