/* ============================================================
   TRUSTED PARTNERS — compact "live dashboard" cards. Clicking one
   expands a shared case-study window (see .window/.win-* in
   services.css — generic, reused here for the same open/close feel).
   ============================================================ */
/* Full-bleed product-canvas band — the same soft gradient the hero uses,
   spanning viewport edge to edge, with the live client cards floating on it.
   The 100vw + translateX(-50%) breaks out of the padded .wrap; #work clips
   any resulting horizontal overflow. */
.biz-band{
  width:100vw; margin-left:50%; transform:translateX(-50%);
  margin-top:16px; margin-bottom:16px;
  padding:clamp(30px,4vw,52px) var(--gutter);
  background:var(--product-canvas);
}
#work{overflow-x:clip}
.biz-track{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 12px;margin:0 -2px;
  max-width:var(--maxw);margin-left:auto;margin-right:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.biz-track::-webkit-scrollbar{display:none}

.pc{scroll-snap-align:center;flex:none;width:min(340px,86vw);cursor:pointer;
  border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel);
  box-shadow:var(--shadow-1);padding:20px 20px 18px;display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s,opacity .4s,filter .4s}
.pc:hover{box-shadow:var(--shadow-2);border-color:var(--line-2);transform:translateY(-3px)}
.pc.active{border-color:var(--biz-color,var(--ember))!important;transform:translateY(-3px)}

/* Rest of the row subtly dims when a case study is open */
.biz-track.dimmed .pc:not(.active):not(.pc-next){opacity:.4;filter:saturate(.65)}
.biz-track.dimmed .pc:not(.active):not(.pc-next):hover{opacity:.7}

.pc-top{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--biz-color,var(--ember-soft));font-weight:600;line-height:1.4;margin-bottom:13px}
.pc-live{display:inline-flex;align-items:center;gap:5px;color:var(--biz-color,var(--green-soft))}
.pc-live i{width:6px;height:6px;border-radius:50%;background:var(--biz-color,var(--green-soft));flex:none;
  box-shadow:0 0 8px var(--biz-glow,rgba(143,111,62,.5));animation:ledPulse 2.4s var(--ease) infinite}
.pc-name{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.pc-logo{display:block;height:32px;width:auto;object-fit:contain}
.pc-line{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin-top:8px}

/* Real-number proof — the same premium tile treatment as the main
   "Real activity, right now" board (css/sections/dashboard.css .snap):
   each number in its own bordered tile, big serif numeral, a pulsing
   "Live" indicator and an honest footnote. Reads as a genuine embedded
   dashboard, not a row of numbers. */
.pc-dash{margin-top:13px;padding:10px 10px 9px;border-radius:13px;
  background:var(--panel-2);border:1px solid var(--line)}
.pc-dash-head{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:8px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.pc-dash-head svg{width:10px;height:10px;stroke:var(--ink-faint);fill:none;stroke-width:2}
.pc-dash-live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-weight:600;
  color:var(--biz-color,var(--green-soft))}
.pc-dash-live i{width:6px;height:6px;border-radius:50%;background:var(--biz-color,var(--green-soft));flex:none;
  box-shadow:0 0 0 0 var(--biz-glow,rgba(143,111,62,.5));animation:ledPulse 2.4s var(--ease) infinite}
.pc-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.pc-stat{display:flex;flex-direction:column;gap:2px;min-width:0;padding:9px 11px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel)}
.pc-stat b{font-family:var(--font-serif);font-size:24px;font-weight:400;color:var(--ink);line-height:1}
.pc-stat span{font-size:8px;color:var(--ink-faint);line-height:1.25;text-transform:uppercase;letter-spacing:.04em}
.pc:hover .pc-stat b{color:var(--biz-color,var(--ember-soft));transition:color .3s var(--ease)}
.pc-dash-note{font-size:10px;color:var(--ink-faint);margin-top:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-stat-loading{grid-column:1/-1;align-items:center;text-align:center;padding:14px 8px;border-style:dashed}
.pc-stat-loading span{font-size:9px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;
  font-family:var(--font-mono)}

/* Team — real names, roles, an "online" dot. No implementation detail. */
.pc-h{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin:12px 0 7px}
.pc-team{display:flex;flex-direction:column;gap:5px}
.pc-member{display:flex;align-items:baseline;gap:7px;font-size:12px}
.pc-member b{color:var(--ink);font-weight:600}
.pc-member span{color:var(--ink-faint);font-size:11px}
.pc-dot{width:6px;height:6px;border-radius:50%;background:var(--biz-color,var(--green-soft));flex:none;align-self:center;
  box-shadow:0 0 0 0 var(--biz-glow,rgba(143,111,62,.5));transition:box-shadow .3s var(--ease)}
.pc:hover .pc-dot{animation:ledPulse 1.6s var(--ease) infinite}
.pc-team .pc-member:nth-child(2){transition-delay:.05s}
.pc-team .pc-member:nth-child(3){transition-delay:.1s}

.pc-open-row{margin-top:13px;padding-top:2px;font-size:11px;font-family:var(--font-mono);
  letter-spacing:.05em;color:var(--ink-faint);display:flex;align-items:center;gap:6px;
  transition:.3s var(--ease)}
.pc-open-row span{transition:transform .3s var(--ease)}
.pc:hover .pc-open-row,.pc.active .pc-open-row{color:var(--biz-color,var(--ember-soft))}
.pc:hover .pc-open-row span{transform:translate(2px,-2px)}

/* the "your business next" card */
.pc-next{cursor:default;border-style:dashed;background:var(--panel-2);justify-content:center;text-align:left}
.pc-next .pc-plus{font-family:var(--font-serif);font-size:36px;line-height:.9;color:var(--ember-soft);margin-bottom:12px}
.pc-next .pc-line{margin-top:9px}
.pc-next .pc-go{margin-top:20px;font-size:13px;font-weight:600;color:var(--ember-soft);
  display:inline-flex;align-items:center;gap:6px;transition:.22s var(--ease)}
.pc-next .pc-go:hover{gap:9px;color:var(--ember)}

/* ---- Case-study window — reuses services.css' generic .window/.win-* ---- */
.win-team{display:flex;flex-direction:column;gap:12px;margin-top:2px}
.win-team-item{display:flex;align-items:center;gap:12px}
.win-team-dot{width:8px;height:8px;border-radius:50%;background:var(--biz-color,var(--green-soft));flex:none;
  box-shadow:0 0 0 0 var(--biz-glow,rgba(143,111,62,.5));animation:ledPulse 2.4s var(--ease) infinite}
.win-team-item b{display:block;font-size:14px;color:var(--ink);font-weight:600}
.win-team-item span{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:1px}
/* Naming note — turns "she's called Gemma here" into the point: your ASORA
   takes your own brand's name. Quiet, sits under the team. */
.win-team-note{font-size:11.5px;color:var(--ink-faint);line-height:1.5;margin-top:9px;
  padding-left:11px;border-left:2px solid var(--biz-color,var(--line-2))}
/* Client testimonial — a real, spoken line from the owner (pending their
   sign-off). Editorial serif quote + a mono attribution in the brand colour. */
.win-quote{margin:16px 0 4px;padding:15px 18px;border-radius:12px;background:rgba(20,15,12,.03);
  border-left:3px solid var(--biz-color,var(--ember-soft));font-family:var(--font-serif);
  font-size:15.5px;line-height:1.55;color:var(--ink);font-style:italic}
.win-quote cite{display:block;margin-top:11px;font-family:var(--font-mono);font-style:normal;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:var(--biz-color,var(--ember-soft))}

/* "How this actually works" — the real, specific proof, not a checklist.
   Given more visual weight than the generic .win-deliver grid since this
   is the actual differentiated content in the whole card. */
.dd-block{background:var(--panel);border-color:var(--line-2);box-shadow:var(--shadow-1)}
.dd-block h5{color:var(--biz-color,var(--ember-soft))}
.dd-list{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.dd-item{padding-left:14px;border-left:2px solid var(--biz-color,var(--ember-soft))}
.dd-t{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.35}
.dd-d{font-size:12px;color:var(--ink-soft);line-height:1.55;margin-top:4px}

@media(max-width:560px){
  .biz-track{flex-wrap:nowrap;justify-content:flex-start;gap:14px}
  .pc{padding:18px 18px 16px}
  .pc-stats{gap:7px}
  .pc-stat{padding:10px 11px}
  .pc-stat b{font-size:23px}
}