/* The smooothy carousel that replaces BetterCarousel in the hero. Same geometry as the live site:
   first card 160 px from the left on desktop and tablet, 600 px cards, 8 px between them. */
.hc {
  --hc-left: 160px;
  --hc-scale: 1;
  --hc-skew: 0deg;
  display: flex;
  overflow: hidden;
  padding-left: var(--hc-left);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  outline: none;
}
.hc:focus-visible { outline: 2px solid #1a1b1c; outline-offset: 4px; }
.hc__slide {
  flex-shrink: 0;
  width: 608px;
  padding-right: 8px;
  box-sizing: border-box;
}
.hc__slide > * {
  transform: translateX(var(--hc-x, 0px)) scale(var(--hc-scale)) skewX(var(--hc-skew));
  transform-origin: 50% 50%;
}
/* The card's media frame clips, so the parallax shift of the video stays inside it. */
.hc [data-framer-name="Video"] { overflow: hidden; }
.hc [data-framer-name="Video"] video { will-change: transform; }
.hc a, .hc video { -webkit-user-drag: none; }