/* Work shard family: 1:3 diagonals, shared fold, dominant / secondary / accent.
   SVGs retain their aspect ratio at every breakpoint, preserving the angles. */
.work-hero-band { position: relative; isolation: isolate; }
.work-shard-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
.work-edge-shard { position: absolute; height: auto; }
.work-edge-shard--left {
  left: -1px;
  top: 0;
  width: min(49vw, 740px);
}
.work-edge-shard--top {
  left: 46%;
  top: -1px;
  width: min(32vw, 500px);
}
.work-edge-shard--right {
  right: -1px;
  top: -30px;
  width: min(23vw, 340px);
}
.work-edge-shard path {
  stroke: #55647b;
  stroke-width: .65;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.work-shard-face { fill: #bacbe8; }
.work-shard-light { fill: #d4e0f1; }
.work-shard-blue { fill: #1e3aff; }
@media (min-width: 900px) and (max-height: 760px) {
  .work-edge-shard--left { width: min(43vw, 540px); top: -22px; }
  .work-edge-shard--top { width: min(30vw, 400px); }
  .work-edge-shard--right { width: min(18vw, 210px); }
}
@media (min-width: 700px) and (max-width:899.98px) {
  .work-edge-shard--left { width: min(47vw, 285px); }
  .work-edge-shard--top { width: 30vw; left: 44%; }
  .work-edge-shard--right { width: 180px; }
}
@media (max-width: 699px) {
  .work-edge-shard--left { width: min(57vw, 275px); }
  .work-edge-shard--top { display: none; }
  .work-edge-shard--right { width: min(24vw, 120px); top: -16px; }
}