/* Hero visibility and metallic-silver design update. */

:root {
  --metal-dark: #4b4f52;
  --metal-mid: #9da1a4;
  --metal-light: #eceeef;
  --metal-bright: #ffffff;
}

.top-call-bar {
  background:
    linear-gradient(
      112deg,
      #55595c 0%,
      #d7d9da 23%,
      #8d9194 43%,
      #f1f2f2 62%,
      #777b7e 82%,
      #c8cbcd 100%
    );
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,0.48);
}

.top-call-bar > * + * {
  border-left-color: rgba(10,11,11,0.3);
}

.hero-copy {
  background:
    linear-gradient(105deg, rgba(7,8,8,0.9), rgba(7,8,8,0.52)),
    url("../images/jobsite-two-booms.jpeg") center / cover no-repeat;
}

.eyebrow span,
.rate-card.red::before {
  background: linear-gradient(90deg, var(--metal-dark), var(--metal-bright), var(--metal-mid));
}

.hero-contact-card {
  border-left-color: var(--metal-light);
  background: rgba(7,8,8,0.72);
  box-shadow: 0 16px 34px rgba(0,0,0,0.24);
}

.rate-card.silver::before,
.rate-card.green::before {
  background: linear-gradient(90deg, #626669, #f2f3f3 52%, #8d9194);
}

.service-card.red .service-image span,
.service-card.green .service-image span,
.service-card.silver .service-image span {
  background: linear-gradient(135deg, #4f5356, #f0f1f1 52%, #767a7d);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: 0 4px 14px rgba(0,0,0,0.24);
}

.text-link {
  border-bottom-color: var(--metal-light);
}

.contact-section {
  background:
    linear-gradient(
      116deg,
      #3f4346 0%,
      #bfc2c4 24%,
      #777b7e 46%,
      #e3e5e6 67%,
      #666a6d 84%,
      #c8cbcd 100%
    );
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,0.22);
}

.contact-section .section-kicker,
.contact-section > p:not(.section-kicker) {
  color: rgba(10,11,11,0.78);
}

.contact-section::after {
  border-color: rgba(255,255,255,0.18);
}

.contact-phone {
  color: white;
  text-shadow: none;
}

.button-light {
  border-color: rgba(10,11,11,0.32);
  background: rgba(255,255,255,0.78);
  color: var(--ink);
}

@media (max-width: 820px) {
  .hero-collage {
    order: -1;
    min-height: 360px;
  }

  .hero-copy {
    order: 0;
    min-height: auto;
    padding-top: 46px;
    padding-bottom: 46px;
  }
}

@media (max-width: 520px) {
  .hero-collage {
    min-height: 350px;
  }

  .hero-copy {
    min-height: auto;
    padding-top: 38px;
    padding-bottom: 40px;
  }

  .top-call-bar {
    background:
      linear-gradient(112deg, #676b6e 0%, #e4e5e6 42%, #929699 70%, #d5d7d8 100%);
  }
}