/* The supplied camera photograph continues through navigation and page one. */
body.services-page {
  --services-hero-height: clamp(650px, 61vw, 760px);
  --services-masthead-end: calc(88px + 60px + var(--services-hero-height));
  position: relative;
}

body.services-page::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: var(--services-masthead-end);
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 31, 63, .78) 0%, rgba(8, 31, 63, .25) 16%, transparent 34%),
    linear-gradient(90deg, rgba(8, 35, 73, .81) 0%, rgba(10, 43, 82, .61) 38%, rgba(13, 50, 89, .13) 68%, transparent 90%),
    linear-gradient(0deg, rgba(6, 27, 54, .42) 0%, transparent 30%),
    #6a8ab2 url('/assets/services-camera-hero.jpg') center 54% / cover no-repeat;
}

body.services-page > .site-header,
body.services-page > .page,
body.services-page > .contact-page { position: relative; z-index: 1; }

body.services-page .site-header {
  border-bottom: 1px solid rgba(255,255,255,.35);
  background: transparent;
}
body.services-page .brand,
body.services-page .nav a,
body.services-page .lang { color: #fff; text-shadow: 0 1px 10px rgba(5,28,57,.3); }
body.services-page .nav a:hover,
body.services-page .nav a[aria-current=page] { color: #fff; border-color: #fff; }
body.services-page .header-cta { background: #fff; color: #123d75; }
body.services-page .header-cta:hover { background: #eaf5ff; }

body.services-page .breadcrumb {
  min-height: 60px;
  padding: 0;
  color: #f0f8ff;
  text-shadow: 0 1px 8px rgba(5,28,57,.35);
}
body.services-page .breadcrumb a:hover { color: #fff; text-decoration: underline; }

body.services-page .page > .services-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: var(--services-hero-height);
  padding: clamp(35px, 4vw, 58px) 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
body.services-page .services-hero-copy { max-width: min(760px, 65%); }
body.services-page .services-hero .eyebrow { color: #fff; text-shadow: 0 1px 10px rgba(5,28,57,.45); }
body.services-page .services-hero h1 {
  max-width: 760px;
  margin: 33px 0 24px;
  color: #fff;
  font-size: clamp(48px, 5.25vw, 78px);
  line-height: 1.13;
  letter-spacing: -.04em;
  text-shadow: 0 3px 24px rgba(5,28,57,.32);
}
body.services-page .services-hero .lead {
  max-width: 680px;
  color: #f7fbff;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.85;
  text-shadow: 0 1px 12px rgba(5,28,57,.65);
}
body.services-page .services-hero .button-primary { background: #fff; color: #174776; }
body.services-page .services-hero .button-primary:hover { background: #eaf5ff; }
body.services-page .services-hero .button-outline { border-color: rgba(255,255,255,.8); color: #fff; background: rgba(18,48,82,.15); backdrop-filter: blur(5px); }
body.services-page .services-hero .button-outline:hover { background: rgba(255,255,255,.17); }

body.services-page .services-hero-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(14px, 2.2vw, 32px);
  width: 100%;
  margin-top: auto;
  padding-top: 25px;
  border-top: 1px solid rgba(255,255,255,.48);
  color: #f6fbff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .035em;
  text-shadow: 0 1px 10px rgba(5,28,57,.7);
}

@media (max-width: 1050px) {
  body.services-page { --services-masthead-end: calc(136px + 60px + var(--services-hero-height)); }
  body.services-page .services-hero-copy { max-width: min(700px, 72%); }
}
@media (max-width: 800px) {
  body.services-page::before {
    background:
      linear-gradient(180deg, rgba(8,31,63,.84) 0%, transparent 31%),
      linear-gradient(90deg, rgba(8,35,73,.86), rgba(10,43,82,.57) 68%, rgba(8,35,73,.18)),
      #6a8ab2 url('/assets/services-camera-hero.jpg') 64% center / cover no-repeat;
  }
  body.services-page .services-hero-copy { max-width: 80%; }
}
@media (max-width: 600px) {
  body.services-page {
    --services-hero-height: 690px;
    --services-masthead-end: calc(136px + 52px + var(--services-hero-height));
  }
  body.services-page::before {
    background:
      linear-gradient(180deg, rgba(8,35,73,.81), rgba(8,35,73,.69) 55%, rgba(8,35,73,.44)),
      #6a8ab2 url('/assets/services-camera-hero.jpg') 69% center / cover no-repeat;
  }
  body.services-page .breadcrumb { min-height: 52px; }
  body.services-page .page > .services-hero { padding: 25px 0; }
  body.services-page .services-hero-copy { max-width: 100%; }
  body.services-page .services-hero h1 { font-size: clamp(39px, 9vw, 58px); }
  body.services-page .services-hero-bottom { font-size: 10px; gap: 8px 18px; }
  body.services-page .nav { scrollbar-color: rgba(255,255,255,.5) transparent; }
}