:root {
  --navy: #102c39;
  --teal: #66dbce;
  --green: #159f99;
  --ink: #182f3a;
  --muted: #52636b;
  --line: #dce4e6;
  --gold: #66dbce;
  --pale: #daf3ef;
}

a:focus-visible { outline-color: #00958b; }
nav a:hover { color: #008d86; }
.nav-contact { border-color: var(--ink); }
.hero { background: #173a49; }
.hero-shade { background: linear-gradient(90deg, rgba(8,30,41,.97) 0%, rgba(8,30,41,.86) 39%, rgba(8,30,41,.15) 100%); }
.hero-image { background-image: url('hero-blueprint.png'); }
.eyebrow { color: #a8cccf; }
.eyebrow span { background: var(--teal); }
.intro { color: #dbe6ea; }
.button { background: var(--teal); color: var(--navy); }
.button:hover { background: #8ceadd; }
.dark { color: #327a80; }
.service-head { color: #38878a; }
.approach p:not(.eyebrow) { color: #bdd0d8; }
.text-link { border-color: #6b979c; color: var(--teal); }
.steps article > span { color: var(--teal); }
.about h3 span { color: #52747d; }
.experience > span { color: #5e727a; }
.experience i { color: #a0b5bd; }
.contact { background: #daf3ef; border-top-color: var(--teal); }
.contact-grid p { color: #3b646b; }
.dark-button { background: var(--navy); color: #fff; }
.dark-button:hover { background: #245369; }
footer p, footer > a:last-child { color: #60737c; }

@media (max-width: 650px) {
  .hero-shade { background: linear-gradient(90deg, rgba(8,30,41,.95), rgba(8,30,41,.58)); }
}