/* Photo carousel — quiet, full-bleed strip in the homepage palette. */
cjg-carousel { display: block; }
.cc { --cc-h: clamp(220px, 24vw, 340px); }

.cc-viewport {
  position: relative; overflow: hidden; cursor: grab; outline: none;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  /* Soft fade at both edges, matching the client-logo marquee. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cc-viewport.cc-grabbing { cursor: grabbing; }
.cc-viewport:focus-visible { box-shadow: inset 0 0 0 2px #8965B0; }

.cc-track { display: flex; gap: clamp(12px, 1.4vw, 20px); width: max-content; will-change: transform; }

.cc-item { margin: 0; height: var(--cc-h); flex: none; background: #EFEDEA; overflow: hidden; }
.cc-item img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.03);
  transition: opacity 900ms ease, transform 1400ms cubic-bezier(.2, .8, .2, 1);
  -webkit-user-drag: none;
}
.cc-item img.cc-in { opacity: 1; transform: none; }

.cc-controls {
  box-sizing: content-box; max-width: 1280px; margin: 0 auto; padding: 14px clamp(20px, 5.5vw, 80px) 0;
  display: flex; justify-content: flex-start;
}
.cc-toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; background: none; border: 0; cursor: pointer;
  font: 500 11px/1 'DM Sans', system-ui, sans-serif; letter-spacing: 0.26em; text-transform: uppercase; color: #5E5E66;
  transition: color 200ms;
}
.cc-toggle:hover { color: #8965B0; }
.cc-toggle:focus-visible { outline: 2px solid #8965B0; outline-offset: 3px; }
.cc-toggle[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cc-item img { transition: none; transform: none; }
}