/* cams: the reference's team carousel, as camera cards. Center card large and sharp, side cards smaller, far cards blurred. */
.cams { overflow: hidden; }
.cm-head { display: grid; justify-items: center; gap: 34px; }
.cm-title { max-width: 900px; }
.cm-stage { position: relative; height: calc(var(--cw) * 1.25 + 120px); margin-top: clamp(48px, 5vw, 72px); --cw: clamp(236px, 22vw, 330px); touch-action: pan-y; outline: none; -webkit-user-select: none; user-select: none; }
.cm-stage:focus-visible { outline: 1px solid var(--blue-2); outline-offset: -2px; }
.cm-track { position: absolute; inset: 0; cursor: grab; }
.cm-track.is-drag { cursor: grabbing; }
.cm-card { position: absolute; left: 50%; top: 0; width: var(--cw); margin-left: calc(var(--cw) / -2); padding: 12px 12px 18px; border-radius: 6px; background: #1a1a1a; transform-origin: 50% 0; will-change: transform, filter, opacity; transition: background .5s var(--ease); }
.cm-card.is-center { background: #262626; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8); }
.cm-media { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: #0e0e0e; }
.cm-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 9s linear, filter .6s var(--ease); filter: brightness(.74) saturate(.9); pointer-events: none; }
.cm-card.is-center .cm-media img { transform: scale(1.06); filter: none; }
.cm-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cm-name { margin-top: 14px; font: 400 clamp(17px, 1.35vw, 20px)/1.2 var(--f-body); letter-spacing: -0.01em; color: var(--mist); transition: color .4s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-role { margin-top: 8px; font: 500 10.5px/1.3 var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; color: #6f6f6f; transition: color .4s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-card.is-center .cm-name { color: #fff; }
.cm-card.is-center .cm-role { color: var(--fg-2); }
.cm-ctl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 8px; }
.cm-arrow { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: #fff; cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease); }
.cm-arrow:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.4); }
.cm-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cm-count { min-width: 64px; text-align: center; font-size: 12px; letter-spacing: 0.08em; color: var(--mist); }
.cm-count b { color: #fff; font-weight: 500; }
.cm-prog { position: relative; width: 120px; height: 1px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.cm-prog i { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
@media (max-width: 700px) {
  .cm-stage { --cw: 232px; }
  .cm-prog { width: 64px; }
  .cm-role { white-space: normal; }
}