/* The process section's artwork, kept quiet behind readable content. */
:root {
  --strandit-section-art: linear-gradient(to bottom, #f3f8ff 0, #f3f8ff 48px, #f3f8ffd4 200px, #f3f8ffd4 calc(100% - 200px), #f3f8ff calc(100% - 48px), #f3f8ff 100%), url('../images/strandit-hero-background.png');
}
/* Match the canvas too, so fractional section heights cannot leave a hairline. */
body:has(> #home) { background-color: #f3f8ff; }
#services, #about, #work, #testimonials, #contact {
  box-shadow: inset 0 2px 0 #f3f8ff, inset 0 -2px 0 #f3f8ff;
}
#contact { border-bottom: 0; }
body.services-page { background-color: #f3f8ff; }
body.services-page main > section:is(.hero,.overview,.service,.process,.cta,.service-directory) {
  background-color: #f3f8ff;
  background-image: var(--strandit-section-art);
  background-position: center, center;
  background-size: 100% 100%, cover;
  background-repeat: no-repeat;
  border-block: 0;
  box-shadow: inset 0 2px 0 #f3f8ff, inset 0 -2px 0 #f3f8ff;
}
body.services-page main > .hero::before { display: none; }
#services,
#about,
#work,
#contact,
main > .overview,
main > .service,
main > .process,
main > .packages,
main > .roles,
main > .apply {
  background-color: #f3f8ff;
  background-image: var(--strandit-section-art);
  background-position: center, center;
  background-size: 100% 100%, cover;
  background-repeat: no-repeat;
}
/* Every light section meets at exactly the same opaque colour. */
#trust-bar,
#process,
#testimonials {
  background-color: #f3f8ff;
}
#process::before,
#testimonials::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent 48px, #000 200px, #000 calc(100% - 200px), transparent calc(100% - 48px));
  mask-image: linear-gradient(to bottom, transparent 48px, #000 200px, #000 calc(100% - 200px), transparent calc(100% - 48px));
}
#process::after { display: none; }
/* Project articles use the same texture outside their client-specific previews. */
body:has(> main.wrap) {
  background-color: #f3f8ff;
  background-image: var(--strandit-section-art);
  background-position: center top;
  background-size: 100% auto;
  background-repeat: repeat-y;
}
@media (prefers-contrast: more) {
  body.services-page main > section:is(.hero,.overview,.service,.process,.cta,.service-directory) { background-image: none; }
  #services, #about, #work, #contact,
  main > .overview, main > .service, main > .process,
  main > .packages, main > .roles, main > .apply,
  body:has(> main.wrap) { background-image: none; }
}