/* Ensures the white C remains visible wherever the transparent mark sits on a light header. */
.brand img[src*="webcincture-logo-transparent-white-c.png"] {
  background: #061b3d;
  border-radius: 50%;
}

/* SaaS architecture refinement: these class combinations exist only on the SaaS service page. */
.architecture .arch-grid {
  grid-template-columns: 1fr .93fr 1fr !important;
  gap: 18px !important;
}

.architecture .arch-column {
  min-height: 460px !important;
  padding: 32px !important;
}

.architecture .arch-column:nth-child(2) {
  text-align: left !important;
  justify-content: flex-start !important;
}

.architecture .arch-column:nth-child(2) h3 {
  font-size: 31px !important;
  line-height: 1.02 !important;
  max-width: 250px !important;
}

.architecture .arch-column:nth-child(2) p {
  max-width: 260px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.architecture .arch-column:nth-child(2) .nodes {
  gap: 8px !important;
  margin-top: 18px !important;
}

.architecture .arch-column:nth-child(2) .node {
  padding: 11px 12px !important;
}

/* Keep the SaaS hero image cinematic without the navy colour wash. */
body:has(.architecture) .hero img {
  opacity: 1 !important;
}

body:has(.architecture) .hero::after {
  background: transparent !important;
}

/* SaaS page header sits directly on the hero image. */
body:has(.architecture) .nav {
  position: absolute !important;
  inset: 0 0 auto;
  z-index: 10;
  background: transparent !important;
}

body:has(.architecture) .nav .brand,
body:has(.architecture) .nav .back {
  color: #fff !important;
}

body:has(.architecture) .nav .back {
  border-color: rgba(255,255,255,.75) !important;
}

body:has(.architecture) .hero .shell {
  padding-top: 174px !important;
}

@media (max-width: 760px) {
  body:has(.architecture) .hero .shell {
    padding-top: 148px !important;
  }
}

@media (max-width: 760px) {
  .architecture .arch-grid {
    grid-template-columns: 1fr !important;
  }

  .architecture .arch-column {
    min-height: 0 !important;
    padding: 26px !important;
  }
}