:root {
  --ink: #142634;
  --navy: #071d2d;
  --blue: #0873a5;
  --cyan: #e89500;
  --paper: #f3f6f7;
  --line: #d8e1e5;
  --muted: #60727d;
}

body {
  color: var(--ink);
}

.site-header.scrolled {
  background: rgba(7, 29, 45, .96);
}

.hero-image {
  background:
    linear-gradient(90deg, rgba(5, 24, 38, .97) 0%, rgba(7, 39, 58, .82) 43%, rgba(4, 54, 78, .2) 78%),
    linear-gradient(0deg, rgba(4, 22, 34, .7), transparent 48%),
    url('https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=2200&q=88') center/cover;
}

.eyebrow span,
.btn-primary,
.service-card:hover,
.service-card.active {
  background: var(--blue);
}

.btn-primary:hover {
  background: #075e87;
}

.section-tag,
.text-link,
.case-info span,
.service-detail > span {
  color: var(--blue);
}

.section-tag.light,
.service-card > svg,
.strength-list svg {
  color: var(--cyan);
}

.hero-actions .btn-primary {
  background: var(--cyan);
  color: #fff;
}

.hero-actions .btn-primary:hover {
  background: #ca7e00;
}

.hero-stats div:first-child {
  border-left-color: var(--cyan);
}

.services {
  background: #071d2d;
}

.service-card:hover,
.service-card.active {
  border-color: var(--blue);
}

.service-card:hover > svg,
.service-card.active > svg {
  color: #fff;
}

.service-overview {
  background: #f1f5f7;
}

.service-tabs button.active {
  color: #123247;
  border-bottom-color: var(--cyan);
}

.service-detail li::before {
  background: var(--cyan);
}

.case-tabs button.active {
  background: #123247;
}

.photo-1 {
  background-image: url('assets/case-city-brain.jpg');
  background-position: center 56%;
  filter: saturate(.78) contrast(1.04);
}

.strength {
  background: #071d2d;
}

.contact {
  background: #0873a5;
}

.contact-bg {
  background:
    linear-gradient(112deg, rgba(4, 81, 119, .96), rgba(8, 115, 165, .88) 58%, rgba(232, 149, 0, .7)),
    url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1800&q=80') center/cover;
}

.btn-white {
  color: #0873a5;
}

footer {
  background: #04141f;
}

.mobile-nav {
  background: #071d2d;
}

@media (max-width: 560px) {
  .hero-image {
    background:
      linear-gradient(90deg, rgba(5, 24, 38, .96), rgba(7, 39, 58, .68)),
      linear-gradient(0deg, rgba(4, 22, 34, .68), transparent 45%),
      url('https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=1200&q=85') 60% center/cover;
  }
}