:root {
  --ink: #172b45;
  --brand: #1e416b;
  --surface: #f1f4f8;
  --accent: #ffd166;
  --radius: 7px;
}
.contractor-hero {
  background: #172b45;
  color: #fff;
}
.contractor-hero .eyebrow {
  color: #ffd166;
}
.contractor-hero p {
  color: #b7c8da;
}
.contractor-intro {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 65px;
}
.project-note {
  border-left: 1px solid #54708c;
  padding-left: 40px;
  margin-top: 25px;
}
.project-note span {
  font-size: 12px;
  letter-spacing: 2px;
  color: #ffd166;
}
.project-note strong {
  display: block;
  font-size: 32px;
  line-height: 1.2;
  margin: 20px 0;
}
.contractor-hero .searchbar {
  color: var(--ink);
  box-shadow: none;
}
.contractor-hero .searchbar button {
  background: #ffd166;
  border-color: #ffd166;
  color: #172b45;
}
.theme-contractors .cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.theme-contractors .card {
  display: grid;
  grid-template-columns: 140px 1fr;
}
.theme-contractors .card-image {
  height: 100%;
  min-height: 200px;
  background: #e6edf4;
}
.theme-contractors .initials {
  color: #34567c;
}
@media (max-width: 700px) {
  .contractor-intro {
    grid-template-columns: 1fr;
  }
  .theme-contractors .cards {
    grid-template-columns: 1fr;
  }
  .theme-contractors .card {
    grid-template-columns: 105px 1fr;
  }
}