:root {
  --navy: #263a33;
  --blue: #c55f3d;
  --teal: #4f7d68;
  --amber: #e9a23b;
  --ink: #26312c;
  --muted: #6f7c75;
  --mist: #f6f1e8;
  --line: #e2d9cc;
  --white: #fffdf9;
  --danger: #b94b4b;
}

body { background: #e9e2d8; }
.phone { border-color: #29332e; box-shadow: 0 24px 70px #3b30231f; }
.phone::before { background: #29332e; }
.top { background: linear-gradient(145deg, #263a33, #395246); }
.top.light { background: #fffdf9; }
.search { color: #78837d; box-shadow: inset 0 0 0 1px #ffffff70; }
.service i { background: #fffaf3; }
.hero { background: linear-gradient(135deg, #c55f3d, #dc7b50); }
.btn { box-shadow: 0 8px 18px #c55f3d2b; }
.btn.compact { box-shadow: none; }
.btn.secondary { background: #f6e5dc; color: #a7482c; box-shadow: none; }
.card, .stat, .tab, .field { box-shadow: 0 5px 16px #5545340a; }
.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: #dfebe4;
  color: #356650;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}
.status.amber { background: #faebce; color: #8a5a0a; }
.tab.on { background: #263a33; border-color: #263a33; }
.avatar, .building-icon { background: #f4e3d9; color: #a7482c; }
.map { background: linear-gradient(35deg, #dfe7dd, #f3e6d3); color: #c55f3d; }
.timeline { border-color: #d6cabb; }
.timeline .done::before { background: #4f7d68; }
.nav .on, .link, .upload { color: #b55032; }
.steps b.on { background: #c55f3d; }
[style*="border-color:#176bff"] {
  border-color: #c55f3d !important;
  box-shadow: 0 0 0 2px #c55f3d20 !important;
}

.nav span::before {
  content: "";
  width: 21px;
  height: 21px;
  background: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.nav span:nth-child(1)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.5 12 4l9 7.5v8a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.5 12 4l9 7.5v8a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nav span:nth-child(2)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 3h8v4H8zM8 11h8M8 15h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 3h8v4H8zM8 11h8M8 15h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.nav span:nth-child(3)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7v5l3 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7v5l3 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nav span:nth-child(4)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M4.5 21a7.5 7.5 0 0 1 15 0' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M4.5 21a7.5 7.5 0 0 1 15 0' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.intro-brand { max-width: 690px; }
.brand-logo {
  display: block;
  width: 190px;
  height: 190px;
  object-fit: contain;
  margin-bottom: 18px;
  border-radius: 24px;
  box-shadow: 0 12px 36px #46372316;
}

@media (max-width: 600px) {
  .brand-logo { width: 150px; height: 150px; }
}
