/* StepStone contour motif — light backgrounds */
.ss-motif-section { position: relative; overflow: hidden; isolation: isolate; }
.ss-motif {
  --ss-contour: #6b7d8c;  /* slate  */
  --ss-node:    #002233;  /* ink    */
  --ss-dawn:    #e6a957;  /* dawn   */
  position: absolute; top: -12%; right: -14%;
  width: min(68vw, 920px); height: auto;
  z-index: -1; pointer-events: none;
}
.ss-dark .ss-motif { --ss-node: #d3dee6; }  /* mist nodes on navy */
.ss-motif .ss-c   { fill: none; stroke: var(--ss-contour); stroke-width: 1.25; stroke-opacity: .55; vector-effect: non-scaling-stroke; }
.ss-motif .ss-hi  { fill: none; stroke: var(--ss-dawn); stroke-width: 1.75; vector-effect: non-scaling-stroke; }
.ss-motif .ss-ln  { fill: none; stroke: var(--ss-node); stroke-width: 1.25; stroke-opacity: .8; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.ss-motif .ss-n   { fill: var(--ss-node); }
.ss-motif .ss-d   { fill: var(--ss-dawn); }
.ss-motif .ss-ring{ fill: none; stroke: var(--ss-dawn); stroke-width: 1.5; }

/* Calm motion: the terrain drifts, the links flow */
.ss-motif .ss-terrain { transform-origin: 450px 300px; animation: ss-drift 40s ease-in-out infinite alternate; }
.ss-motif .ss-ln      { animation: ss-flow 6s linear infinite; }
.ss-motif .ss-ring    { transform-origin: 600px 235px; animation: ss-breathe 5s ease-in-out infinite; }
@keyframes ss-drift   { to { transform: rotate(4deg) scale(1.03) translate(-8px, 6px); } }
@keyframes ss-flow    { to { stroke-dashoffset: -20; } }
@keyframes ss-breathe { 50% { transform: scale(1.25); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .ss-motif * { animation: none !important; } }

/* Phones: move it below the headline so it never sits behind text */
@media (max-width: 700px) {
  .ss-motif { top: auto !important; bottom: -18%; right: -45% !important; width: 130vw !important; opacity: .7; }
}