/* Services Hub · v3 owner-feedback pass (2026-10-22). Loaded after services-depth.css on /services/ only.
   Replaces: the What We Do device collage, the Human-led role lists, the $0/$49 comparison layout. */
.sh .sh-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;font-style:normal}

/* ---------- 07 · Human-led: one campaign, two lanes — AI prepares, people decide ---------- */
.sh .sh-human-ai>.wrap{grid-template-columns:1fr}
.sh .sh-human-ai .sh-human-ai-copy p{max-width:52ch}
.sh .sh-handoff{position:relative;margin-top:44px;display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:24px}
.sh .sh-handoff-lanes{display:grid;grid-template-rows:1fr 1fr;row-gap:12px}
.sh .sh-handoff-lanes span{display:flex;align-items:center;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:#8f8d93;border-top:1px solid #3a3a3f}
.sh .sh-handoff-lanes .is-team{color:#E84274;border-top-color:#E84274}
.sh .sh-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:1fr 1fr;row-gap:12px;column-gap:12px}
.sh .sh-step{display:grid;align-content:start;gap:6px;padding:18px 18px 20px;border-radius:12px;min-width:0}
.sh .sh-step.is-ai{grid-row:1;background:#232327;border:1px dashed #4a4a50}
.sh .sh-step.is-team{grid-row:2;background:#f4f2ed;color:#17171b}
.sh .sh-step.is-final{background:#E84274;color:#17171b}
.sh .sh-step:nth-child(1){grid-column:1}.sh .sh-step:nth-child(2){grid-column:2}.sh .sh-step:nth-child(3){grid-column:3}.sh .sh-step:nth-child(4){grid-column:4}.sh .sh-step:nth-child(5){grid-column:5}
.sh .sh-step b{font-size:12px;font-weight:600;color:#8f8d93}
.sh .sh-step.is-team b{color:#b92553}.sh .sh-step.is-final b{color:#17171b}
.sh .sh-step strong{font-size:clamp(17px,1.5vw,21px);line-height:1.2;letter-spacing:-.01em}
.sh .sh-step.is-ai strong{color:#e4e3e6;font-weight:500}
.sh .sh-step span{font-size:14.5px;line-height:1.45}
.sh .sh-step.is-ai span{color:#a9a7ad}
.sh .sh-step.is-team span{color:#55555a}.sh .sh-step.is-final span{color:#17171b}
/* the hand-off: the AI lane stops, the team lane takes over */
.sh .sh-step:nth-child(2)::after{content:"";position:absolute}
@media(max-width:1000px){
  .sh .sh-handoff{grid-template-columns:1fr}
  .sh .sh-handoff-lanes{display:none}
  .sh .sh-steps{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row}
  .sh .sh-step:nth-child(n){grid-row:auto;grid-column:auto}
  .sh .sh-step.is-final{grid-column:1/-1}
  .sh .sh-step b::after{content:" · AI tools";font-weight:500}
  .sh .sh-step.is-team b::after{content:" · Our team"}
}
@media(max-width:560px){.sh .sh-steps{grid-template-columns:1fr}.sh .sh-handoff{margin-top:28px}}

/* ---------- 10 · $0 / $49: two report covers, then one aligned comparison ---------- */
.sh .sh-offer{margin-top:36px;display:grid;gap:28px}
.sh .sh-offer-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.sh .sh-offer-card{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:center;padding:24px;border-radius:16px;background:#fff;box-shadow:0 1px 1px rgba(23,23,27,.05),0 16px 36px -24px rgba(23,23,27,.4)}
.sh .sh-offer-card.is-depth{background:#17171b;color:#f4f2ed}
.sh .sh-offer-card h3{margin:0 0 6px;font-size:clamp(20px,1.7vw,24px);line-height:1.15;letter-spacing:-.02em}
.sh .sh-offer-card p{margin:0}
.sh .sh-offer-price{font-size:clamp(40px,3.6vw,54px);line-height:1;font-weight:600;letter-spacing:-.05em;margin:6px 0 12px!important}
.sh .sh-offer-card.is-depth .sh-offer-price{color:#E84274}
.sh .sh-offer-price span{font-size:14px;font-weight:500;letter-spacing:0;color:#8f8d93}
.sh .sh-offer-purpose{font-size:17px;font-weight:500}
.sh .sh-offer-for{font-size:14px;color:#6e6c66;margin-top:4px!important}
.sh .sh-offer-card.is-depth .sh-offer-for{color:#a9a7ad}
.sh .sh-offer-cover{position:relative;aspect-ratio:3/4;border-radius:4px;background:#f4f1ea;border:1px solid #e2ddd3;padding:12px 10px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;box-shadow:0 10px 20px -14px rgba(23,23,27,.5)}
.sh .sh-offer-cover i{position:absolute;left:10px;right:10px;top:12px;height:34%;border-radius:2px;background:repeating-linear-gradient(180deg,#d9d3c8 0 3px,transparent 3px 9px)}
.sh .sh-offer-cover span{font-size:10px;font-weight:700;line-height:1.2;color:#17171b}
.sh .sh-offer-cover em{font-style:normal;font-size:9px;color:#b92553;font-weight:600}
.sh .sh-offer-cover.is-stack{background:#fff;box-shadow:5px 5px 0 -1px #f4f1ea,5px 5px 0 0 #d9d3c8,10px 10px 0 -1px #f4f1ea,10px 10px 0 0 #d9d3c8,0 14px 24px -14px rgba(0,0,0,.6)}
.sh .sh-offer-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;background:#fff;border-radius:16px;overflow:hidden}
.sh .sh-offer-table th,.sh .sh-offer-table td{text-align:left;vertical-align:top;padding:15px 22px;border-top:1px solid #ebe6dd}
.sh .sh-offer-table thead th{border-top:0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#6e6c66;padding-block:16px}
.sh .sh-offer-table tbody th{width:22%;font-weight:600;color:#17171b}
.sh .sh-offer-table td{width:39%;color:#3a3a40}
.sh .sh-offer-table td:last-child,.sh .sh-offer-table thead th:last-child{background:#fbf4f6}
.sh .sh-offer-table thead th:last-child{color:#b92553}
.sh .sh-offer-table td.is-none{color:#a5a29c}
.sh #market-analysis .sh-offer+.sh-small{border-top:0;padding-top:0;margin-top:20px}
@media(max-width:900px){.sh .sh-offer-card{grid-template-columns:84px minmax(0,1fr);gap:16px;padding:18px}}
@media(max-width:700px){
  .sh .sh-offer-cards{grid-template-columns:1fr;gap:14px}
  .sh .sh-offer-table,.sh .sh-offer-table tbody,.sh .sh-offer-table tr{display:block}
  .sh .sh-offer-table thead{display:none}
  .sh .sh-offer-table tr{padding:14px 16px;border-top:1px solid #ebe6dd}
  .sh .sh-offer-table tr:first-child{border-top:0}
  .sh .sh-offer-table th,.sh .sh-offer-table td{display:grid;grid-template-columns:76px 1fr;gap:10px;width:auto;padding:4px 0;border:0;background:none!important;font-size:14px}
  .sh .sh-offer-table tbody th{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#6e6c66;padding-bottom:6px}
  .sh .sh-offer-table td::before{content:"$0";font-weight:600;color:#17171b}
  .sh .sh-offer-table td:last-child::before{content:"$49";color:#b92553}
}
.sh .sh-offer-card .sh-offer-price{color:#17171b}
.sh .sh-offer-card.is-depth .sh-offer-purpose,.sh .sh-offer-card.is-depth h3{color:#fff}
.sh .sh-offer-card.is-depth .sh-offer-price{color:#ff6f9a}
@media(max-width:700px){.sh .sh-offer-table tbody th{display:block!important;grid-template-columns:none;width:auto!important}}
@media(max-width:900px){.sh .sh-offer-cover i{height:24%}.sh .sh-offer-cover span{font-size:9px}}

/* ---------- v3.1 · Human-led: icons, lane badges and the flow between steps ---------- */
.sh .sh-handoff-lanes span{gap:10px}
.sh .sh-handoff-lanes i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;flex:none;background:#2e2e33;color:#c9c7c2}
.sh .sh-handoff-lanes .is-team i{background:#E84274;color:#17171b}
.sh .sh-handoff-lanes .pp-icon{width:18px;height:18px}
.sh .sh-step{position:relative;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.sh .sh-step>strong,.sh .sh-step>span:not(.sh-step-icon){grid-column:1/-1}
.sh .sh-step-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;margin-bottom:8px}
.sh .sh-step-icon .pp-icon{width:22px;height:22px}
.sh .sh-step.is-ai .sh-step-icon{background:#2e2e33;color:#d8d6db;box-shadow:inset 0 0 0 1px #4a4a50}
.sh .sh-step.is-team .sh-step-icon{background:#17171b;color:#fff}
.sh .sh-step.is-final .sh-step-icon{background:#fff;color:#E84274}
.sh .sh-step b{align-self:start;justify-self:end;margin-top:4px}
/* flow: a small arrow after every step; the AI→team hand-off turns down into the team lane */
.sh .sh-step:not(.is-final)::after{content:"";position:absolute;right:-11px;top:50%;width:10px;height:10px;margin-top:-5px;border-top:2px solid #6e6c72;border-right:2px solid #6e6c72;transform:rotate(45deg);z-index:1}
.sh .sh-step.is-team:not(.is-final)::after{border-color:#E84274}
.sh .sh-step:nth-child(2)::after{top:auto;bottom:-14px;right:auto;left:calc(100% - 4px);transform:rotate(135deg);border-color:#E84274}
@media(max-width:1000px){
  .sh .sh-step:not(.is-final)::after{display:none}
  .sh .sh-step-icon{width:40px;height:40px}
}
/* the brief: what the AI lane hands over, sitting in the open space above the team lane (decorative) */
.sh .sh-handoff{--lane:150px}
.sh .sh-brief{position:absolute;top:0;right:0;width:calc((100% - var(--lane) - 24px) * .6 - 4px);height:calc(50% - 6px);display:flex;align-items:center;justify-content:center;gap:22px;padding:0 10px}
.sh .sh-brief-sheet{width:min(260px,62%);background:#fffdf8;color:#17171b;border-radius:6px;padding:16px 18px 12px;box-shadow:0 18px 40px -18px rgba(0,0,0,.7);transform:rotate(-2deg)}
.sh .sh-brief-k{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#b92553;font-weight:700;margin-bottom:10px}
.sh .sh-brief-sheet p{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:8px;margin:0;padding:7px 0;border-top:1px solid #ebe6dd;font-size:11.5px}
.sh .sh-brief-sheet i{display:block;height:6px;width:var(--w);border-radius:3px;background:#e2ddd3}
.sh .sh-brief-note{max-width:150px;font-size:13px;line-height:1.4;color:#a9a7ad}
@media(max-width:1000px){.sh .sh-brief{display:none}}
@media(min-width:1001px) and (max-width:1200px){.sh .sh-brief-note{display:none}}