/* Continue the wet pavement under the hero and through the rest of the page. */
body {
  background-color: #09080a;
  background-image: linear-gradient(#09080a55, #09080a55), url('pavement-texture.png');
  background-size: 100% 100%, max(100%, 1000px) auto;
  background-position: center top;
  background-repeat: no-repeat, repeat-y;
  --muted: #c7c0c5;
  --line: #ffffff25;
}
.hero { background: transparent; }
.hero-image {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 65%, #000c 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 65%, #000c 78%, transparent 100%);
}
.hero-shade {
  background: linear-gradient(90deg, #09080aee 0%, #09080ab5 25%, #09080a40 48%, transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
}
#services { background: linear-gradient(#09080a10, #09080a50 65%, #09080a35); }
#faq { background: #09080a65; }
footer { background: #09080a80; }
.service, .service.extra, .service:hover { background: transparent; }
/* Keep the road visible, with a calmer surface beneath readable copy. */
body { font-family: Arial, Helvetica, sans-serif; --muted: #e0dce0; }
#services { background: linear-gradient(90deg, #09080abf, #09080aa8 55%, #09080abf); }
#faq { background: #09080abf; }
footer { background: #09080ac9; }
.service h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.25px;
  text-transform: none;
  color: #fff;
}
.service p, .section-heading > p, details p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: #e0dce0;
}
.service p { margin-top: 10px; }
.service { padding-block: 30px; }
.section-heading > p { max-width: 375px; }
summary { font-size: 16px; font-weight: 600; line-height: 1.5; }
.hero-inner > p { font-size: 18px; color: #efebee; line-height: 1.65; }
.hero .eyebrow { font-size: 14px; font-weight: 600; }
.footer-contact > span, .footer-bottom { font-size: 13px; color: #d7d0d6; }
.footer-text { font-size: 15px; }
.hero-inner > p, .service h3, .service p, .section-heading > p, summary, details p {
  text-shadow: 0 2px 5px #0009;
}
@media (max-width:760px) {
  body {
    /* Fit the whole texture on phones instead of cropping its red edges. */
    background-size: 100% 100%, 100% auto;
  }
  #services { background: #09080a70; }
  #faq, footer, .reviews-section, .request-section { background: #09080a85; }
  .service h3 { font-size: 22px; }
  .service p, .section-heading > p, details p { font-size: 16px; }
  .hero-inner > p { font-size: 16px; }
  .hero .eyebrow { font-size: 13px; }
  .hero { min-height: 660px; }
  .hero-image {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  }
  .hero-shade {
    background: linear-gradient(to bottom, #09080afa 0%, #09080af5 35%, #09080a90 52%, transparent 72%);
    -webkit-mask-image: none;
    mask-image: none;
  }
}
