.section--cards--card--body {
  padding-top: 28px !important;
  padding-bottom: 24px;
}

.btn--arrow svg {
  position: absolute;
  top: 36%;
  right: 24px;
}

svg g .arrow-primary { fill: #ffffff!important }
svg g .arrow-secondary { fill: #3EA9FC!important }
svg g .arrow-kale1 { fill: #D7FFC2!important }
svg g .arrow-avocado1 { fill: #004449!important }
svg g .arrow-snow1 { fill: #2A6367!important }
svg g .arrow-kale2 { fill: #AEFBD2!important }
svg g .arrow-lime1 { fill: #004449!important }
svg g .arrow-kaleoutline { fill: #004449!important }
svg g .arrow-avocadooutline { fill: #B3D5A2!important }
svg g .arrow-snowoutline { fill: #FFFFFF!important }
.btn--arrow:hover svg g .arrow-snowoutline { fill: #004449!important }
svg g .arrow-black1 { fill: #ffffff!important }
.btn--arrow:hover svg g .arrow-black1 { fill: #1C1D18!important }
svg g .arrow-cyan { fill: #1C1D18!important }
svg g .arrow-blueoutline { fill: #025965!important }
svg g .arrow-blackoutline { fill: #1C1D18!important }
svg g .arrow-blackinline { fill: #1C1D18!important }

.cta-right-start {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between;
}
.cta-right-end {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between;
}
.cta-right-centered {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
}
.cta-right-centered > :first-child,
.cta-right-start > :first-child,
.cta-right-end > :first-child {
  max-width: 70%;
}

/* -----------------------------------
   Cards hover (zoom + arrow)
----------------------------------- */

/* Image corner radius for this module */
.section--cards {
  --card-image-radius: 16px;
}

/* Make clickable cards feel clickable */
.section--cards .section--cards--card--body.is-clickable {
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

/* Lift */
.section--cards .section--cards--card--body.is-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* Image wrapper should allow arrow to sit "below" image */
.section--cards .section--cards--card--image {
  overflow: visible;
}

/* Clip only the image area (so zoom doesn't spill) */
.section--cards .section--cards--card--image .card-image-clip {
  overflow: hidden;
  border-radius: var(--card-image-radius);
}
.section--cards .section--cards--card--image .card-image-clip img {
  border-radius: 0 !important;
}

}

/* Smooth zoom for native img */
.section--cards .section--cards--card--body.is-clickable .section--cards--card--image .card-image-clip img {
  transition: transform 180ms ease;
  transform-origin: center;
}

/* Zoom on hover */
.section--cards .section--cards--card--body.is-clickable:hover .section--cards--card--image .card-image-clip img {
  transform: scale(1.03);
}

/* Smooth zoom for full background block */
.section--cards .section--cards--card--body.is-clickable .section--cards--card--image .card-image-clip {
  transition: transform 180ms ease;
  transform-origin: center;
}
.section--cards .section--cards--card--body.is-clickable:hover .section--cards--card--image .card-image-clip {
  transform: scale(1.02);
}

/* Arrow: black, appears just under the image */
.section--cards .section--cards--card--image {
  position: relative;
}

.section--cards .section--cards--card--image .card-hover-arrow {
  position: absolute;
  right: 20px;

  /* “below image” (outside the clipped area) */
  bottom: -32px;

  width: 16px;
  height: 16px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;

  /* force black */
  color: #000;
}

/* Draw arrow */
.section--cards .section--cards--card--image .card-hover-arrow {
  position: absolute;
  right: 20px;
  bottom: -40px;

  width: 25px;
  height: 25px;

  opacity: 0;
  transform: translateY(4px);
  transition: opacity 360ms ease, transform 360ms ease;
  pointer-events: none;

  /* Arrow styling */
  color: #000;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 25px 25px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%227%22%20y1%3D%2217%22%20x2%3D%2217%22%20y2%3D%227%22%2F%3E%3Cpolyline%20points%3D%227%207%2017%207%2017%2017%22%2F%3E%3C%2Fsvg%3E");
}


/* Reveal arrow on hover */
.section--cards .section--cards--card--body.is-clickable:hover .card-hover-arrow {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .section--cards .section--cards--card--body.is-clickable,
  .section--cards .section--cards--card--body.is-clickable * {
    transition: none !important;
    transform: none !important;
  }
}

/* Whole-card clickable overlay */
.section--cards .section--cards--card--body.is-clickable {
  position: relative;
}

.section--cards .cards-hover__overlay-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}

/* Keep arrow visible above overlay */
.section--cards .card-hover-arrow {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}