/* Services Hub v4.2 · Human-led, AI-enhanced: same v3.1 cards, icons and campaign brief, with room to breathe.
   Owner: "原版的设计更好 只是有点拥挤". Changes are spacing only:
   lane column removed (labels sit above their rows), wider team columns, taller row gap, roomier cards. */
@media(min-width:1001px){
  .sh .sh-handoff{--gap:20px;--row:64px;--top:40px;grid-template-columns:1fr;margin-top:clamp(52px,5vw,72px)}
  .sh .sh-handoff-lanes{display:none}
  .sh .sh-steps{grid-template-columns:minmax(0,.94fr) minmax(0,.94fr) minmax(0,1.08fr) minmax(0,1.1fr) minmax(0,.94fr);
    column-gap:var(--gap);row-gap:var(--row);padding-top:var(--top)}
  .sh .sh-step{padding:22px 22px 26px;gap:8px}
  .sh .sh-step strong{font-size:clamp(17px,1.4vw,20px);line-height:1.25;margin-top:4px}
  .sh .sh-step span:not(.sh-step-icon){font-size:15px;line-height:1.5}
  /* lane labels above each row */
  .sh .sh-step:nth-child(1)::before,.sh .sh-step:nth-child(3)::before{position:absolute;left:0;top:-34px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
  .sh .sh-step:nth-child(1)::before{content:"AI tools and agents";color:#8f8d93}
  .sh .sh-step:nth-child(3)::before{content:"Our team";color:#E84274}
  /* arrows centred in the wider gaps; the 02 → 03 turn spans the taller row gap */
  .sh .sh-step:not(.is-final)::after{right:calc(var(--gap) / -2 - 5px)}
  .sh .sh-step:nth-child(2)::after{bottom:calc(var(--row) / -2 - 5px);right:auto;left:calc(100% + var(--gap) / 2 - 5px)}
  /* campaign brief sits over the empty top-right of row 1 */
  .sh .sh-brief{top:var(--top);right:0;width:calc(56% - var(--gap));height:calc((100% - var(--top) - var(--row)) / 2);gap:28px}
  .sh .sh-brief-sheet{width:min(270px,58%)}
}
@media(min-width:1001px) and (max-width:1200px){.sh .sh-handoff{--gap:16px}.sh .sh-step{padding:18px 18px 22px}}
@media(max-width:1000px){.sh .sh-steps{row-gap:14px;column-gap:14px}.sh .sh-step{padding:20px}}
@media(min-width:1001px){
  /* 02 → 03: the turn arrow drops straight down from the middle of card 02 */
  .sh .sh-step:nth-child(2)::after{left:50%;margin-left:-5px;bottom:calc(var(--row) / -2 - 3px);transform:rotate(135deg)}
  /* brief starts exactly above card 03, so the handoff lines up */
  .sh .sh-brief{left:calc((100% - 4 * var(--gap)) * .376 + 2 * var(--gap));width:auto;justify-content:flex-start;padding:0 0 0 6px}
  .sh .sh-step strong{font-size:clamp(16px,1.3vw,18.5px)}
}
@media(min-width:1001px){
  /* flow reads 02 → brief ↓ 03 */
  .sh .sh-step:nth-child(2)::after{left:auto;margin-left:0;right:calc(var(--gap) / -2 - 5px);top:50%;bottom:auto;margin-top:-5px;transform:rotate(45deg);border-color:#E84274}
  .sh .sh-brief::after{content:"";position:absolute;left:44px;bottom:calc(var(--row) / -2 - 2px);width:10px;height:10px;border-top:2px solid #E84274;border-right:2px solid #E84274;transform:rotate(135deg)}
}
@media(min-width:1001px){.sh .sh-brief::after{left:min(170px,40%)}}