.web-services-hero::before { content: none; }
.web-services-subtitle { margin: .6rem 0 1.4rem; color: #713a66; font-size: var(--text-h2); }
.web-services-image-placeholder { width: 100%; min-height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #766955; text-align: center; }
.web-services-image-placeholder span { font-size: 4rem; font-weight: 300; opacity: .35; }
.web-services-image-placeholder p { font-size: 1rem; }
.site-nav-web-services span { color: #713a66; }
.site-main-nav { flex-wrap: wrap; white-space: normal; overflow: visible; gap: .5rem 2rem; }
@media (max-width: 620px) { .site-main-nav { gap: .3rem 1rem; } .site-nav-item span { font-size: 1.15rem; } .web-services-image-placeholder { min-height: 220px; } }

/* Images remain original; precise vector overlays carry the tint and knockout. */
.web-services-art { display: block; position: relative; width: 100%; }
.web-services-art > img:not(.web-services-overlay) { width: 100%; height: auto; max-height: none; display: block; }
.web-services-art > img.web-services-overlay { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; pointer-events: none; }

/* The same outlined serif letters scattered through the header, like the existing heroes. */
.hosting-page-hero.web-services-hero::before {
  content: ""; opacity: .20; mix-blend-mode: multiply;
  background-image: url("/images/web-services/header-letters.svg?v=20260917");
  background-repeat: no-repeat; background-size: cover; background-position: center;
  transform: none;
}
@media (max-width: 720px) {
  .hosting-page-hero.web-services-hero::before { background-size: auto 100%; background-position: 38% center; opacity: .15; }
}

/* Contact action: homepage button geometry, service purple. */
#content .web-services-page .hosting-order-cta a.home-button,
#content .web-services-page .hosting-order-cta a.home-button:visited {
  display: inline-block;
  padding: .76rem 1.16rem;
  border: 0;
  border-radius: 3px;
  background: #713a66;
  color: #fff;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
#content .web-services-page .hosting-order-cta a.home-button:hover,
#content .web-services-page .hosting-order-cta a.home-button:focus-visible {
  background: #582d50;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
#content .web-services-page .hosting-order-cta a.home-button:focus-visible {
  outline: 2px solid #713a66;
  outline-offset: 4px;
}

/* Reveal the original artwork with a gentle zoom on pointer hover. */
.web-services-art {
  overflow: hidden;
}
.web-services-art > img:not(.web-services-overlay) {
  transition: transform .35s ease;
}
.web-services-art > img.web-services-overlay {
  transition: opacity .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .web-services-art:hover > img:not(.web-services-overlay) {
    transform: scale(1.08);
  }
  .web-services-art:hover > img.web-services-overlay {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .web-services-art > img {
    transition: none;
  }
}