.case-band{position:relative}

/* The first dark band arrives on an editorial angle. */
.case-hero{padding-bottom:190px}
.case-challenge{margin-top:0;padding-top:165px}
.case-challenge:before{content:'';position:absolute;top:-85px;left:0;width:100%;height:85px;background:var(--ink);clip-path:polygon(0 100%,100% 0,100% 100%);pointer-events:none}

/* A second angle keeps the white-to-dark rhythm consistent without a hard seam. */
.case-challenge{padding-bottom:215px}
.case-approach{margin-top:0;padding-top:165px}
.case-approach:before{content:'';position:absolute;top:-85px;left:50%;width:100vw;height:85px;background:var(--paper);clip-path:polygon(0 100%,100% 0,100% 100%);transform:translateX(-50%);pointer-events:none}

/* Small directional marks signal the shift into the system architecture. */
.case-architecture{padding-top:165px}
.case-architecture:before{content:'+ > - / =';position:absolute;top:-48px;right:max(40px,calc((100% - 1240px)/2));color:var(--orange);font:500 18px var(--mono);letter-spacing:18px;white-space:pre;opacity:.5}

@media(max-width:900px){
  .case-hero{padding-bottom:105px}
  .case-challenge,.case-approach,.case-architecture{padding-top:125px}
  .case-challenge{padding-bottom:167px}
  .case-challenge:before{top:-42px;height:42px}
  .case-approach{padding-top:125px}
  .case-approach:before{top:-42px;height:42px}
  .case-architecture:before{right:25px;top:-38px;font-size:14px;letter-spacing:10px}
}