/* "Who we work with" persona carousel, option D: template-parts/persona-cards.php (services hub 2026-09-28; reusable on
   SEO/PPC). Light framed panel, three photo-led cards per view (two under 1100px, one on phones), arrows outside the
   panel, dots under. Tokens only (--ss-*, inc/ss-glow.php). Motion <= 180ms (persona-cards.js), no entry animation. */
.pc-sec{--pc-gap:24px;--pc-per:3;position:relative;padding-block:104px;background:#fff;color:var(--ss-ink);font-family:inherit}
.pc-sec--ground{background:var(--ss-ground)}
.pc-w{max-width:1312px;margin:0 auto;padding-inline:64px;position:relative}

/* head: centred, stacked two-tone (ink line, then blue-shine line), no eyebrow */
.pc-head{display:grid;gap:16px;justify-items:center;text-align:center;margin-bottom:48px}
.pc-sec .pc-h2{margin:0;font-size:clamp(30px,3.6vw,46px);font-weight:700;line-height:1.1;color:var(--ss-navy-deep)}
.pc-h2 .hl{padding-bottom:.14em;margin-bottom:-.14em;padding-right:.06em;margin-right:-.06em;color:var(--ss-navy);background:var(--ss-blue-shine);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pc-sec .pc-lede{margin:0;max-width:62ch;font-size:18px;line-height:1.55;color:var(--ss-ink-2)}

/* the frame: one boxed unit on the band (Mike: "frame out just a bit more") */
.pc-panel{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding:32px;border-radius:28px;background:var(--ss-ground);border:1px solid var(--ss-line-strong);box-shadow:0 1px 2px rgba(var(--ss-navy-deep-rgb),.05),inset 0 1px 0 rgba(255,255,255,.7)}
.pc-sec--ground .pc-panel{background:#fff}
.pc-vp{grid-column:1/-1;grid-row:1;min-width:0}

/* track: native scroll + snap (swipe, trackpad); exactly --pc-per cards in view, nothing cut at rest.
   The padding / negative margin keeps the card shadows unclipped; the side pad (18px) is under the gap, so no neighbour peeks. */
.pc-sec .pc-track{display:flex;gap:var(--pc-gap);margin:-18px -18px -34px;padding:18px 18px 34px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:18px;scrollbar-width:none;-ms-overflow-style:none}
.pc-track::-webkit-scrollbar{display:none;height:0}
.pc-track.is-drag,.pc-track.is-anim{scroll-snap-type:none}
.pc-track.is-drag{cursor:grabbing;user-select:none}
.pc-track:focus-visible{outline:2px solid var(--ss-gold);outline-offset:-6px;border-radius:24px}

/* card */
.pc-card{flex:0 0 calc((100% - (var(--pc-per) - 1) * var(--pc-gap)) / var(--pc-per));scroll-snap-align:start;display:flex;flex-direction:column;min-width:0;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--ss-line-strong);box-shadow:0 2px 4px rgba(var(--ss-navy-deep-rgb),.04),0 14px 22px -6px rgba(var(--ss-navy-deep-rgb),.16);color:var(--ss-ink)}
.pc-ph{position:relative;aspect-ratio:4/3;background:var(--ss-navy-deep);overflow:hidden}
.pc-ph__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0} /* crops keep faces in the top third */
/* title strip: solid navy under the photo (Mike 2026-09-28: titles over the photo were unreadable); title + need = 2 lines */
.pc-strip{padding:14px 24px 15px;background:var(--ss-navy-deep)}
.pc-sec .pc-card__t{margin:0;font-size:20px;font-weight:700;line-height:1.2;color:#fff}
.pc-sec .pc-card__need{margin:3px 0 0;font-size:14.5px;font-weight:600;line-height:1.4;color:var(--ss-gold-pale)}
/* body: 2-sentence copy, divider, a 3-line quote, reviewer on one row (Mike 2026-09-29: cards were too tall) */
.pc-body{display:flex;flex-direction:column;flex:1;padding:18px 24px 20px}
.pc-sec .pc-card__copy{margin:0;font-size:14.5px;line-height:1.55;color:var(--ss-ink-2)}
.pc-q{display:flex;flex-direction:column;flex:1;margin:16px 0 0;padding-top:16px;border-top:1px solid var(--ss-line)}
.pc-q blockquote{margin:0;padding:0;border:0}
.pc-sec .pc-q__txt{margin:0;font-size:15px;line-height:1.5;font-weight:500;font-style:normal;color:var(--ss-ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.pc-q__txt::before{content:"\201C"}
.pc-q__txt::after{content:"\201D"}
.pc-sec .pc-q__txt.is-open{display:block;-webkit-line-clamp:unset}
.pc-more{align-self:flex-start;margin:4px 0 0;padding:0;border:0;background:none;font:inherit;font-size:13.5px;font-weight:700;color:var(--ss-blue-deep);cursor:pointer;text-decoration:underline;text-decoration-color:var(--ss-gold);text-underline-offset:3px}
.pc-by{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:14px}
.pc-by__av{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 25%;background:var(--ss-gold-soft)}
.pc-by__av--i{display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--ss-navy)}
.pc-by__who{display:grid;gap:0;min-width:0;flex:1;line-height:1.3}
.pc-by__who b{font-size:14.5px;font-weight:700;color:var(--ss-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-by__who span{font-size:12.5px;line-height:1.3;color:var(--ss-ink-3)}
.pc-by__src{flex:none;width:20px;height:20px}

/* arrows: round, outside the panel on wide screens, on its edge below that; hidden (not just dimmed) at either end */
.pc-arw{position:absolute;top:50%;z-index:3;width:52px;height:52px;margin:0;padding:0;border-radius:50%;border:1px solid var(--ss-line-strong);background:#fff;color:var(--ss-navy);box-shadow:0 6px 18px rgba(var(--ss-navy-deep-rgb),.16);display:grid;place-items:center;cursor:pointer;transform:translateY(-50%);transition:background-color .15s,border-color .15s,opacity .15s}
.pc-arw svg{width:18px;height:18px}
.pc-arw--prev{left:-26px}
.pc-arw--next{right:-26px}
.pc-arw--next svg{transform:scaleX(-1)}
.pc-arw:disabled{opacity:0;pointer-events:none}
.pc-arw:focus-visible,.pc-dot:focus-visible{outline:2px solid var(--ss-gold);outline-offset:3px}
@media (min-width:1360px){.pc-arw--prev{left:-82px}.pc-arw--next{right:-82px}}

/* dots: one per resting position */
.pc-dots{grid-column:1/-1;grid-row:2;display:flex;justify-content:center;align-items:center;gap:8px;margin-top:10px;min-height:8px}
.pc-dot{width:9px;height:9px;margin:0;padding:0;border:0;border-radius:50%;background:var(--ss-line-strong);cursor:pointer;transition:background-color .15s}
.pc-dot.is-on{background:var(--ss-gold)} /* all dots the same round size; the current one is gold (Mike) */
.pc-dots:empty{display:none}

@media (max-width:1100px){.pc-sec{--pc-per:2}}
@media (max-width:900px){.pc-w{padding-inline:24px}}
@media (max-width:700px){
  .pc-sec{--pc-per:1;--pc-gap:16px;padding-block:68px}
  .pc-head{margin-bottom:32px}
  .pc-panel{padding:16px 16px 18px;border-radius:22px}
  .pc-sec .pc-track{margin:-14px -14px -34px;padding:14px 14px 34px;scroll-padding-inline:14px}
  .pc-strip{padding:13px 20px 14px}
  .pc-body{padding:16px 20px 18px}
  /* [prev] dots [next] under the card */
  .pc-arw{position:static;transform:none;grid-row:2;width:42px;height:42px;margin-top:4px}
  .pc-arw--prev{grid-column:1}
  .pc-arw--next{grid-column:3}
  .pc-arw:disabled{opacity:.35;pointer-events:none}
  .pc-dots{grid-column:2;margin-top:4px;flex-wrap:wrap}
}
@media (max-width:560px){
  .pc-w{padding-inline:16px}
  .pc-sec .pc-lede{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.pc-arw,.pc-dot{transition:none}}