/* ==========================================================================
   site.css -- additions layered on top of the template's style.css.
   Kept in a separate file so the vendored template CSS stays untouched and
   can still be swapped out wholesale.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

/* The template only ever rendered an opaque bar after scrolling past the
   single-page hero. Interior pages start at the top of their content, so the
   bar needs a background from the first pixel or the links sit on white. */
body:not(.has-hero) .navbar-fixed-top {
  background-color: #fff;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

.navbar-nav .nav-link.active {
  color: #1a8fe3;
  font-weight: 700;
}

.nav-cta {
  white-space: nowrap;
}

/* The template was built for five nav items. We have seven plus two buttons,
   which wraps the longer labels onto a second line at common laptop widths --
   so tighten spacing and keep each label on one line. */
@media (min-width: 992px) {
  .navbar-nav .nav-link {
    white-space: nowrap;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
}

@media (min-width: 992px) and (max-width: 1399px) {
  .navbar-nav .nav-link {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
    font-size: 0.9rem;
  }

  .navbar-brand img {
    width: 160px;
  }

  .nav-cta .btn {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    font-size: 0.9rem;
  }
}

/* --------------------------------------------------------------------------
   Service cards
   -------------------------------------------------------------------------- */

/* The template used these in a single row of three with near-identical copy,
   so ragged card heights never showed. Our grids have uneven text, so match
   each card to the tallest in its row. The height accounts for the card's own
   margin-top, including the smaller one the hover lift swaps in. */
@media (min-width: 768px) {
  .main-services {
    height: calc(100% - 40px);
  }

  .main-services:hover {
    height: calc(100% - 25px);
  }
}

/* --------------------------------------------------------------------------
   Interior page headers
   -------------------------------------------------------------------------- */

.page-header {
  padding: 160px 0 70px;
  background-color: #f7f9fc;
  text-align: center;
}

.page-header h1 {
  margin-bottom: 18px;
}

.page-header .lead {
  max-width: 780px;
  margin: 0 auto;
  font-size: 1.12rem;
  line-height: 1.75;
  color: #5a6b7c;
}

@media (max-width: 767px) {
  .page-header {
    padding: 120px 0 50px;
  }
}

/* --------------------------------------------------------------------------
   Content blocks
   -------------------------------------------------------------------------- */

.prose h3 {
  margin-top: 42px;
  margin-bottom: 16px;
}

.prose h3:first-child {
  margin-top: 0;
}

.prose p {
  line-height: 1.8;
  color: #5a6b7c;
}

/* Two-column checklist used for the service inventories. */
.service-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  columns: 2;
  column-gap: 40px;
}

.service-list li {
  padding: 7px 0 7px 30px;
  position: relative;
  line-height: 1.6;
  color: #5a6b7c;
  break-inside: avoid;
}

.service-list li::before {
  content: "\F26E"; /* bootstrap-icons check-circle-fill */
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 7px;
  color: #1a8fe3;
  font-size: 0.95rem;
}

@media (max-width: 767px) {
  .service-list {
    columns: 1;
  }
}

/* Copy that follows a checklist needs air, or it reads as another list item. */
.service-list + p,
.service-list + h3 {
  margin-top: 26px;
}

/* Numbered process steps. */
.step-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  counter-reset: step;
}

.step-list > li {
  position: relative;
  padding: 0 0 34px 72px;
  counter-increment: step;
}

.step-list > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #1a8fe3;
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Connecting line between step markers. */
.step-list > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 56px;
  bottom: 10px;
  width: 2px;
  background-color: #e3eaf2;
}

.step-list h4 {
  margin-bottom: 8px;
}

.step-list p {
  margin-bottom: 0;
  color: #5a6b7c;
  line-height: 1.75;
}

/* --------------------------------------------------------------------------
   Callout -- used for the Seller Central scope-of-access statement, which is
   the block an Amazon reviewer is most likely to be looking for.
   -------------------------------------------------------------------------- */

.callout {
  background-color: #f7f9fc;
  border-left: 4px solid #1a8fe3;
  border-radius: 6px;
  padding: 30px 34px;
  margin: 30px 0;
}

.callout h4 {
  margin-bottom: 14px;
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout.callout-limits {
  border-left-color: #f2994a;
}

/* --------------------------------------------------------------------------
   Success stories
   -------------------------------------------------------------------------- */

.story {
  background-color: #fff;
  border: 1px solid #e8eef4;
  border-radius: 10px;
  padding: 34px;
  margin-bottom: 30px;
}

.story-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a8fe3;
  margin-bottom: 10px;
}

.story h3 {
  font-size: 1.35rem;
  margin-bottom: 14px;
}

.story-context {
  color: #5a6b7c;
  line-height: 1.75;
  margin-bottom: 20px;
}

.story blockquote {
  border-left: 3px solid #e3eaf2;
  padding-left: 22px;
  margin: 0 0 18px;
  font-style: italic;
  color: #43535f;
  line-height: 1.8;
}

.story-author {
  font-weight: 700;
  margin-bottom: 0;
}

.story-author span {
  display: block;
  font-weight: 400;
  font-size: 0.9rem;
  color: #8a99a8;
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-details {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.contact-details li {
  padding: 14px 0 14px 42px;
  position: relative;
  border-bottom: 1px solid #eef3f7;
  line-height: 1.6;
}

.contact-details li:last-child {
  border-bottom: 0;
}

.contact-details i {
  position: absolute;
  left: 0;
  top: 16px;
  color: #1a8fe3;
  font-size: 1.15rem;
}

.contact-details .label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a99a8;
  font-weight: 700;
  margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   Footer -- the template footer was a single copyright row.
   -------------------------------------------------------------------------- */

.footer-top {
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 24px;
  text-align: left;
}

.footer-top h6 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  margin-bottom: 16px;
}

.footer-text {
  line-height: 1.75;
  max-width: 320px;
}

.footer-links {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 9px;
  line-height: 1.5;
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-bottom p {
  margin-bottom: 0;
}

.footer-disclaimer {
  font-size: 0.8rem;
  line-height: 1.7;
  opacity: 0.62;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 767px) {
  .footer-top > div {
    margin-bottom: 30px;
  }
}

/* --------------------------------------------------------------------------
   Small shared utilities
   -------------------------------------------------------------------------- */

.pricing-note {
  max-width: 860px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #6a7889;
}

.text-left-md {
  text-align: left;
}

/* The template's hero icon butts straight against the last word. */
.home-section h1 > i.bi {
  margin-left: 10px;
}