/* ==========================================================================
   SIGMA BROOKS - "How we work" process (home section 05)
   Copy rule: no em-dashes.
   ========================================================================== */

.sbpr {
  --pr-wrap: 1760px;          /* same width as header, hero, services, tools */
  --pr-navy: #071C33;
  --pr-orange: #FF851B;
  --pr-blue: #1473E6;
  --pr-text: #58687A;
  --pr-line: #E3EAF1;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 88px 0 100px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  color: var(--pr-navy);
}

/* ---------- decoration ---------- */
.sbpr-curve { position: absolute; left: 0; top: 0; width: min(24%, 420px); height: auto; z-index: -1; pointer-events: none; }
.sbpr-dots { position: absolute; z-index: -1; pointer-events: none; width: 170px; height: 320px;
  background: radial-gradient(circle, rgba(7, 28, 51, .16) 1px, transparent 1.5px) 0 0 / 18px 18px; }
.sbpr-dots--l { left: 0; top: 150px; -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); }
.sbpr-dots--r { right: 0; bottom: 30px; -webkit-mask-image: linear-gradient(270deg, #000, transparent); mask-image: linear-gradient(270deg, #000, transparent); }
.sbpr-mesh { position: absolute; right: 0; bottom: 60px; width: min(20%, 360px); height: auto; z-index: -1; pointer-events: none; }

/* ---------- header ---------- */
.sbpr-inner { max-width: var(--pr-wrap); margin-inline: auto; padding-inline: var(--sb-gutter); }
.sbpr-head { text-align: center; max-width: 60rem; margin: 0 auto 56px; }
.sbpr-eyebrow { display: inline-flex; align-items: center; gap: 18px; margin-bottom: 22px; font: 600 .8125rem/1 var(--sb-font-body); letter-spacing: .3em; text-transform: uppercase; color: #3C4A5E; }
.sbpr-eyebrow span { width: 46px; height: 2px; border-radius: 2px; background: var(--pr-orange); }
.sbpr-title { font-family: var(--sb-font-heading); font-stretch: 106%; font-weight: 800; font-size: clamp(2.375rem, 4vw, 4rem); line-height: 1.06; letter-spacing: -.035em; color: var(--pr-navy); }
.sbpr-title strong { font-weight: 800; color: var(--pr-orange); }
.sbpr-lede { margin: 22px auto 0; max-width: 40rem; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.55; color: var(--pr-text); text-wrap: balance; }

/* ---------- steps ---------- */
.sbpr-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px; max-width: 1640px; margin: 0 auto; padding: 0; list-style: none; }
.sbpr-step { position: relative; display: flex; flex-direction: column; min-width: 0; }
.sbpr-step:not(:last-child)::after { content: ""; position: absolute; top: 23px; left: 60px; right: -28px; height: 1px; background: #D3DCE6; }
.sbpr-node { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid #D3DCE6; background: #FFFFFF; font: 700 .9375rem/1 var(--sb-font-body); font-variant-numeric: tabular-nums; color: var(--pr-navy); transition: border-color .22s, color .22s, box-shadow .22s; }
.sbpr-step__title { margin-top: 18px; font-family: var(--sb-font-heading); font-stretch: 100%; font-weight: 700; font-size: clamp(1.375rem, 1.7vw, 1.75rem); line-height: 1.15; letter-spacing: -.02em; color: var(--pr-navy); }
.sbpr-time { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 1rem; color: #3E4F63; }
.sbpr-time i { font-size: 1rem; color: #7A899B; }
.sbpr-text { margin-top: 16px; font-size: 1.0625rem; line-height: 1.55; color: var(--pr-text); max-width: 21rem; }
.sbpr-out { display: flex; align-items: flex-start; gap: 16px; min-height: 98px; margin-top: auto; padding: 20px 20px; border-radius: 10px; border: 1px solid var(--pr-line); background: rgba(255, 255, 255, .9); transition: border-color .22s, box-shadow .22s, transform .22s; }
.sbpr-text + .sbpr-out { margin-top: 24px; }
.sbpr-out i { font-size: 1.375rem; color: var(--pr-blue); width: 26px; text-align: center; margin-top: 4px; flex-shrink: 0; }
.sbpr-out span { display: block; font: 600 .6875rem/1 var(--sb-font-body); letter-spacing: .2em; text-transform: uppercase; color: #8A98A9; }
.sbpr-out p { margin-top: 8px; font-size: 1.0625rem; line-height: 1.4; color: var(--pr-navy); }

/* active step (01 by default); hovering another step takes over the highlight */
.sbpr-step.is-active .sbpr-node, .sbpr-step:hover .sbpr-node { border: 2px solid var(--pr-orange); color: var(--pr-orange); box-shadow: 0 0 0 5px rgba(255, 133, 27, .1); }
.sbpr-step.is-active .sbpr-out i, .sbpr-step:hover .sbpr-out i { color: var(--pr-orange); }
.sbpr-step:hover .sbpr-out { border-color: #D3DCE6; box-shadow: 0 16px 30px -24px rgba(7, 28, 51, .35); transform: translateY(-2px); }
.sbpr-steps:hover .sbpr-step.is-active:not(:hover) .sbpr-node { border: 1.5px solid #D3DCE6; color: var(--pr-navy); box-shadow: none; }
.sbpr-steps:hover .sbpr-step.is-active:not(:hover) .sbpr-out i { color: var(--pr-blue); }

/* ---------- responsive ---------- */
@media (max-width: 1400px) {
  .sbpr-steps { gap: 28px; }
  .sbpr-step:not(:last-child)::after { right: -20px; }
  .sbpr-out { padding: 16px; gap: 12px; }
  .sbpr-out p, .sbpr-text { font-size: 1rem; }
}
@media (max-width: 1100px) {
  /* vertical timeline */
  .sbpr-steps { grid-template-columns: 1fr; gap: 0; max-width: 720px; }
  .sbpr-step { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 24px; padding-bottom: 36px; }
  .sbpr-step > *:not(.sbpr-node) { grid-column: 2; }
  .sbpr-node { grid-row: 1 / span 2; }
  .sbpr-step__title { margin-top: 8px; }
  .sbpr-step:not(:last-child)::after { top: 52px; bottom: 4px; left: 23px; right: auto; width: 1px; height: auto; }
  .sbpr-text { max-width: none; }
  .sbpr-text + .sbpr-out { margin-top: 18px; }
}
@media (max-width: 767px) {
  .sbpr { padding: 64px 0 64px; }
  .sbpr-head { margin-bottom: 40px; }
  .sbpr-eyebrow { font-size: .6875rem; letter-spacing: .22em; gap: 12px; }
  .sbpr-step { grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; }
  .sbpr-node { width: 40px; height: 40px; font-size: .875rem; }
  .sbpr-step:not(:last-child)::after { left: 20px; top: 46px; }
  .sbpr-curve, .sbpr-dots, .sbpr-mesh { opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  .sbpr-node, .sbpr-out { transition: none; }
  .sbpr-step:hover .sbpr-out { transform: none; }
}
@media (max-width: 767px) { .sbpr-title br { display: none; } .sbpr-out { min-height: 0; } }

/* desktop: steps share row tracks (subgrid) so titles, text and outcome cards line up across columns */
@media (min-width: 1101px) {
  .sbpr-steps { grid-template-rows: repeat(5, auto); row-gap: 0; }
  .sbpr-step { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; }
  .sbpr-step > .sbpr-node { justify-self: start; }
  .sbpr-out { align-self: stretch; min-height: 0; }
}