@media (max-width: 700px) {
  body { background: #242723; }
  main#main {
    --mobile-surface: #30352f;
    --mobile-border: #626e5e;
    --paper: #30352f;
    --muted: #c5cbc0;
    color: #f3f5ef;
  }
  main#main > .section:not(.contact),
  main#main > .maintenance-intro,
  main#main .program-jump-links,
  main#main .question-finder {
    background: #242723;
    color: #f3f5ef;
    border-color: var(--mobile-border);
  }
  main#main .service,
  main#main .area-panel,
  main#main .review-card,
  main#main .verified,
  main#main .guide-card,
  main#main .program-overview,
  main#main .program-card,
  main#main .program-identify,
  main#main .program-notes,
  main#main .program-budget,
  main#main .cost-comparison article,
  main#main .question-finder .question-result {
    background: var(--mobile-surface);
    color: #f3f5ef;
    border-color: var(--mobile-border);
  }
  main#main .services-grid { gap: 18px; border: 0; }
  main#main .services-grid .service,
  main#main .guide-card,
  main#main .program-card,
  main#main .review-card {
    border: 1px solid var(--mobile-border);
    border-top: 3px solid var(--green);
    border-radius: 10px;
  }
  main#main .services-grid .service { padding: 22px; }
  main#main .area-panel { border-radius: 10px; }
  main#main .maintenance-intro { border-top: 3px solid var(--green); }
  main#main > .section:not(.contact) h2,
  main#main > .maintenance-intro h2,
  main#main .question-finder h2,
  main#main .service h3,
  main#main .area-panel h3,
  main#main .guide-card h3,
  main#main .program-card h3,
  main#main .program-overview caption,
  main#main .review-stars,
  main#main .rating strong span,
  main#main .services-grid .service > a:not(.jetting-logo),
  main#main .service-guide-link,
  main#main .question-result .question-priority,
  main#main .question-actions .button.outline {
    color: var(--green);
  }
  main#main .section .eyebrow,
  main#main .maintenance-intro .eyebrow,
  main#main .number,
  main#main .featured p,
  main#main .featured .number,
  main#main .area-note {
    color: var(--muted);
  }
  main#main .maintenance-intro-action > p strong { color: #f3f5ef; }
  main#main .program-jump-links a,
  main#main .program-overview th,
  main#main .program-overview td,
  main#main .coverage-list li,
  main#main details { border-color: var(--mobile-border); }
  main#main .question-entry input,
  main#main .question-finder .topic-links button {
    background: var(--mobile-surface);
    color: #f3f5ef;
    border-color: var(--mobile-border);
  }
  main#main .question-entry input::placeholder { color: var(--muted); }
  main#main .question-actions .button.outline { border-color: var(--green); }
  main#main .cost-comparison .replacement { background: var(--ink); }
  main#main .contact,
  main#main .service-strip { color: var(--ink); }
  main#main .contact a:focus-visible { outline-color: var(--ink); }
  main#main .program-card:target { outline-color: var(--green); }
}

@media (max-width: 700px) {
  main#main.filter-guide h2,
  main#main.filter-guide h3,
  main#main.filter-guide .guide-card dt {
    color: var(--green);
  }
}
@media (max-width: 700px) {
  html { scroll-padding-bottom: calc(78px + env(safe-area-inset-bottom)); }

  main#main .services-grid .service > a:not(.jetting-logo),
  main#main .services-grid .service .filter-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 10px;
    border-bottom: 0;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  main#main .services-grid .service h3 { line-height: 1.2; }
  main#main .services-grid .service p { margin-top: 10px; }

  main#main .county-grid {
    display: grid;
    gap: 12px;
  }
  main#main .county-grid > li,
  main#main .county-grid > .guide-card {
    margin: 0;
    padding: 15px;
    border: 1px solid var(--mobile-border);
    border-left: 3px solid var(--green);
    border-radius: 8px;
    background: var(--mobile-surface);
  }
  main#main .county-grid > li strong { color: var(--green); }
  main#main .county-grid h2 { margin-top: 0; font-size: 29px; }
  main#main .county-cta { margin-top: 18px; width: 100%; }

  .mobile-contact {
    gap: 10px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  }
  .mobile-contact a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid var(--green);
    border-radius: 6px;
  }
  .mobile-contact a + a { border-color: #b0bca9; }
  footer { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
}

main#main .services-grid .josh-service {
  --josh-logo-blue: #015bfe;
  background: #2d3440;
  color: #f3f5ef;
  border-color: var(--josh-logo-blue);
}
main#main .services-grid .josh-service h3 { color: #fff; }
main#main .services-grid .josh-service h3 span { color: var(--josh-logo-blue); }
main#main .services-grid .josh-service .filter-contact a {
  color: #fff;
}
main#main .services-grid .josh-service p strong {
  color: #fff;

}
main#main .services-grid .josh-service p { color: #c5cbc0; }