/**
 * One hero design for every listed service page.
 * Reference: /technical-seo-services.
 * Each page still supplies its own image, heading, lede, checks, button, and badges.
 */
html body.page-hero-ref.page-service .hero {
  position: relative !important;
  box-sizing: border-box !important;
  /* At least one screen. Grows when zoom makes the copy taller than the viewport. */
  min-height: 100dvh !important;
  height: auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding-top: calc(84px + 24px) !important;
  padding-bottom: 64px !important;
  background-color: var(--ink, #0a1a22) !important;
  color: #fff !important;
  overflow: visible !important;
  text-align: left !important;
}
html body.page-hero-ref.page-service .hero .hero-bg {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-size: cover !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
}
html body.page-hero-ref.page-service .hero .hero-veil {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
/* Same box as the site logo (.nav-in): 1600px, centered, same side inset. */
html body.page-hero-ref.page-service .hero > .wrap {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: clamp(18px, 3.2vw, 40px) !important;
  padding-right: clamp(18px, 3.2vw, 40px) !important;
  box-sizing: border-box !important;
  text-align: left !important;
  flex: 0 0 auto !important;
}
html body.page-hero-ref.page-service .hero .hero-copy {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 760px !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}
html body.page-hero-ref.page-service .hero .breadcrumb,
html body.page-hero-ref.page-service .hero .crumbs {
  display: block !important;
  margin: 0 0 clamp(36px, 4vw, 52px) !important;
  padding-bottom: 0 !important;
}
html body.page-hero-ref.page-service .hero .hero-copy > .eyebrow,
html body.page-hero-ref.page-service .hero .hero-copy > .hero-eyebrow {
  display: none !important;
}
html body.page-hero-ref.page-service .hero h1 {
  margin: 0 0 14px !important;
  padding: 0 !important;
  max-width: none !important;
  font-size: clamp(2.35rem, 4.6vw, 3.4rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-align: left !important;
}
html body.page-hero-ref.page-service .hero h1 .hl,
html body.page-hero-ref.page-service .hero h1 .accent {
  color: var(--signal, #f47a1f) !important;
}
html body.page-hero-ref.page-service .hero .lede,
html body.page-hero-ref.page-service .hero p.sub,
html body.page-hero-ref.page-service .hero .hero-sub,
html body.page-hero-ref.page-service .hero .hero-copy > .sub {
  margin: 0 0 57px !important;
  max-width: 38rem !important;
  font-size: clamp(1.02rem, 1.35vw, 1.16rem) !important;
  line-height: 1.6 !important;
  color: #c6d7dd !important;
}
html body.page-hero-ref.page-service .hero .hero-trust.hero-trust-checks {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 22px !important;
  width: 100% !important;
  margin: 0 0 59px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html body.page-hero-ref.page-service .hero .hero-trust.hero-trust-checks span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: #9fb6be !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
}
html body.page-hero-ref.page-service .hero .hero-actions,
html body.page-hero-ref.page-service .hero .hero-cta {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 clamp(28px, 3.5vw, 44px) !important;
}
html body.page-hero-ref.page-service .hero .hero-badges.hero-trust {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 22px 40px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: clamp(40px, 4.5vw, 64px) !important;
  margin-bottom: clamp(36px, 5vw, 64px) !important;
  padding: clamp(26px, 3vw, 36px) 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-sizing: border-box !important;
}
html body.page-hero-ref.page-service .hero .hero-badges.hero-trust .hero-badge {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  text-align: left !important;
}
html body.page-hero-ref.page-service .hero .hero-badges.hero-trust .num {
  color: var(--signal, #f47a1f) !important;
  font-size: clamp(1.45rem, 2.2vw, 2rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
html body.page-hero-ref.page-service .hero .hero-badges.hero-trust .lbl {
  color: #9fb6be !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-top: 8px !important;
  white-space: nowrap !important;
}
@media (max-width: 1200px) {
  html body.page-hero-ref.page-service .hero > .wrap {
    padding-left: clamp(20px, 3.6vw, 36px) !important;
    padding-right: clamp(20px, 3.6vw, 36px) !important;
  }
}
@media (max-width: 900px) {
  html body.page-hero-ref.page-service .hero {
    min-height: 0 !important;
    height: auto !important;
    padding-top: calc(56px + 36px) !important;
    padding-bottom: 20px !important;
  }
  html body.page-hero-ref.page-service .hero .hero-badges.hero-trust {
    margin-bottom: 0 !important;
  }
  html body.page-hero-ref.page-service .hero .hero-actions,
  html body.page-hero-ref.page-service .hero .hero-cta {
    margin-bottom: 0 !important;
  }
  html body.page-hero-ref.page-service .hero > .wrap {
    padding-left: clamp(16px, 4vw, 28px) !important;
    padding-right: clamp(16px, 4vw, 28px) !important;
  }
  html body.page-hero-ref.page-service .hero .hero-badges.hero-trust {
    gap: 18px 28px !important;
  }
  html body.page-hero-ref.page-service .hero .hero-badges.hero-trust .lbl {
    white-space: normal !important;
  }
}
@media (max-width: 680px) {
  html body.page-hero-ref.page-service .hero h1 {
    font-size: clamp(1.85rem, 6.4vw, 2.45rem) !important;
  }
}
@media (max-width: 480px) {
  html body.page-hero-ref.page-service .hero > .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* Beat page CSS that sets its own hero padding. Nav is 72px, 56px below 900px. */
html body.page-hero-ref.page-service header.nav .nav-in {
  height: 72px !important;
}
html body.page-hero-ref.page-service section#top.hero {
  padding-top: calc(72px + 36px) !important;
}
html body.page-hero-ref.page-service section#top.hero > .wrap,
html body.page-hero-ref.page-service section#top.hero .hero-copy {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
html body.page-hero-ref.page-service section#top.hero .breadcrumb,
html body.page-hero-ref.page-service section#top.hero .crumbs {
  margin-top: 0 !important;
}
html body.page-hero-ref.page-service section#top.hero .hero-copy > .eyebrow,
html body.page-hero-ref.page-service section#top.hero .hero-copy > .hero-eyebrow {
  display: none !important;
}
@media (max-width: 900px) {
  html body.page-hero-ref.page-service header.nav .nav-in {
    height: 56px !important;
  }
  html body.page-hero-ref.page-service section#top.hero {
    padding-top: calc(56px + 36px) !important;
  }
}