/* Fetchly Testimonial Spotlight. Values mirror the approved DesignOps quote
   band build (designops-tst_* classes): 1.1fr / 1fr grid, 2.5rem quote,
   3.375rem avatar, 3rem logo, 464/383 visual, 48px round arrows. The root is
   transparent so the section behind it sets the band color. */

:host {
  display: block;
  width: 100%;
}

.WQmyqiVng2Wh38iXDCjY {
  /* Prop overrides (--tsp-*) → site variables → brand hex fallbacks */
  --_text: var(--tsp-text, var(--_primitives---colors--neutral-darkest, #050b0d));
  --_muted: var(--tsp-muted, var(--_primitives---colors--neutral-darker, #1e2325));
  --_star: var(--tsp-star, var(--_text));
  --_arrow-bg: var(--tsp-arrow-bg, var(--_primitives---colors--neutral-lightest, #fffefa));
  --_arrow: var(--tsp-arrow, var(--_text));
  --_arrow-hover: var(--tsp-arrow-hover, var(--_primitives---colors--malibu, #69e5fb));
  --_tile: var(--tsp-tile, #e5e4df);
  --_bg: var(--tsp-bg, transparent);
  --_radius: var(--tsp-radius, 16px);
  --_ratio: var(--tsp-ratio, 464 / 383);
  --_font-body: var(--_typography---font-styles--body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --_font-quote: var(--_typography---font-styles--heading, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --_ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  box-sizing: border-box;
  width: 100%;
  background: var(--_bg);
  color: var(--_text);
  font-family: var(--_font-body);
  font-weight: 400;
  outline: none;
  /* Container queries below size the layout by the width the component
     actually gets, so it stays readable in narrow columns on any viewport. */
  container-type: inline-size;
  container-name: tsp;
}

.mQA1d60cQNzRICM1aOab {
  --_font-quote: var(--_typography---font-styles--neo-heading, "Marjorie", Georgia, "Times New Roman", serif);
}

.WQmyqiVng2Wh38iXDCjY *,
.WQmyqiVng2Wh38iXDCjY *::before,
.WQmyqiVng2Wh38iXDCjY *::after {
  box-sizing: border-box;
}

/* Type and spacing scale per breakpoint. Desktop values here; the container
   and viewport queries at the end override them for tablet, mobile landscape
   and mobile portrait. */
.mJeNTw43x4HOtKqPph5L {
  --_quote-size: 2.5rem;
  --_score-size: 2.5rem;
  --_name-size: 1rem;
  --_role-size: 0.75rem;
  --_link-size: 1.125rem;
  --_counter-size: 1rem;
  --_star-size: 1.375rem;
  --_avatar-size: 3.375rem;
  --_logo-h: 3rem;
  --_logo-w: 9.75rem;
  --_content-gap: 5rem;
  --_slide-gap: 3rem;
  --_attrib-gap: 1.5rem;
  --_arrow-size: 48px;
  --_controls-pt: 2.5rem;
  --_columns: 1.1fr 1fr;
  --_columns-left: 1fr 1.1fr;
  width: 100%;
}

.fkMW6eRt4f5tWVNrGvCQ {
  margin: 0;
  padding: 1.5rem;
  border: 1px dashed var(--_tile);
  border-radius: var(--_radius);
  font-size: 0.875rem;
  color: var(--_muted);
}

/* Only the active slide sits in normal flow, so the stage hugs its height.
   Inactive slides overlay it absolutely for the crossfade; the JS eases the
   stage height between slides. */
.wOFDwjNaoqpLlN5iDQY5 {
  position: relative;
  width: 100%;
  touch-action: pan-y;
  overflow: clip;
  overflow-clip-margin: 8px;
}

.buKmlb6nfUtL_Dz0aBr4 {
  display: grid;
  grid-template-columns: var(--_columns);
  grid-template-rows: auto;
  align-items: center;
  gap: var(--_slide-gap);
  width: 100%;
  min-width: 0;
}

.TlRF3HKaLke77YKkwInN {
  position: relative;
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

/* The leaving slide fades out quickly while the entering one plays its reveal */
.hRWRXwa7THa24EdbnbLJ {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 260ms ease,
    visibility 0s linear 260ms;
}

.h3kppfPgxz6GG8Yj9Twy {
  grid-template-columns: 1fr;
}

.n3cC6eabHJpozyRLCLK8 .buKmlb6nfUtL_Dz0aBr4 {
  grid-template-columns: var(--_columns-left);
}

.n3cC6eabHJpozyRLCLK8 .Le0AQrMUlvmkZQGBr_x_ {
  order: -1;
}

.n3cC6eabHJpozyRLCLK8 .h3kppfPgxz6GG8Yj9Twy {
  grid-template-columns: 1fr;
}

.Bqtc2EugqAxnQeDjEsmS {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--_content-gap);
  width: 100%;
  min-width: 0;
}

.M4E2L8jzfo7t4dLwXarP {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.NuPfMC5Xm7IHpZgttJe_ {
  font-size: var(--_score-size);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--_text);
  font-variant-numeric: tabular-nums;
}

.wZUZbtgWxaHW2gXbJ1Jj {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--_star);
}

.BQ0QC9teATfvs_TMbBbK {
  width: var(--_star-size);
  height: var(--_star-size);
  flex-shrink: 0;
}

.ZklbfcEbSRVjfYAC8Qc4 {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--_font-quote);
  font-size: var(--_quote-size);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--_text);
  overflow-wrap: break-word;
}

/* No quotation marks are added: whatever the author types is what shows. */
.G6nq8LOhZVIsK_YVklKf {
  display: inline-block;
}

.zeJwChG5hNrGsgfkyWFg {
  display: inline;
}

.zeJwChG5hNrGsgfkyWFg p,
.zeJwChG5hNrGsgfkyWFg div {
  display: inline;
  margin: 0;
}

.mW66K7fH2RDWsRViesVL {
  display: flex;
  flex-direction: column;
  gap: var(--_attrib-gap);
  width: 100%;
}

.GPIXvzWxoOZrjtktJG6E {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  column-gap: 2rem;
  row-gap: 1rem;
}

.vzzZeoUOe4eeuH9IHMh3 {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.Dy3Q307a7rCDkM1JSCRd {
  width: var(--_avatar-size);
  height: var(--_avatar-size);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--_tile);
  object-fit: cover;
}

.NVChommzIfLjLFCba6y1 {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.nqq3B4NVwYKKiJnTTCJo {
  margin: 0;
  font-size: var(--_name-size);
  line-height: 1.25;
  color: var(--_muted);
}

.xW2uOMlLYfUSEeQ7_lSE {
  margin: 0;
  font-size: var(--_role-size);
  line-height: 1.25;
  color: var(--_muted);
}

.T7C20FeU8psqvLpXw_aX {
  width: auto;
  height: var(--_logo-h);
  max-width: var(--_logo-w);
  flex-shrink: 0;
  object-fit: contain;
  object-position: 100% 50%;
}

.y1ufWIS4yKsn2B1LV3WC {
  align-self: flex-start;
  font-size: var(--_link-size);
  line-height: 1.5;
  color: var(--_text);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 150ms ease;
}

.y1ufWIS4yKsn2B1LV3WC:hover {
  text-decoration-thickness: 2px;
}

.Le0AQrMUlvmkZQGBr_x_ {
  width: 100%;
  min-width: 0;
}

.mhcMq06HTJDwldUn7Nv8 {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--_ratio);
  border-radius: var(--_radius);
  background: var(--_tile);
  object-fit: cover;
}

/* Fallback tile when a slide has a logo but no photo or visual */
.lWW0hpWwxjJb_YD3jcRA {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: var(--_ratio);
  padding: 18%;
  border-radius: var(--_radius);
  background: var(--_tile);
}

.lWW0hpWwxjJb_YD3jcRA img {
  display: block;
  width: 100%;
  max-width: 16rem;
  max-height: 100%;
  object-fit: contain;
}

.Ex1_iQGm0RtqWkZoN0Hc {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding-top: var(--_controls-pt);
}

.m2MTXKskX9rDSb1bB1CV {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--_arrow-size);
  height: var(--_arrow-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--_arrow-bg);
  color: var(--_arrow);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    background-color 200ms ease,
    transform 200ms ease;
}

.m2MTXKskX9rDSb1bB1CV svg {
  width: 20px;
  height: 20px;
}

.m2MTXKskX9rDSb1bB1CV:hover {
  background: var(--_arrow-hover);
}

.m2MTXKskX9rDSb1bB1CV:active {
  transform: scale(0.96);
}

.m2MTXKskX9rDSb1bB1CV:focus-visible,
.y1ufWIS4yKsn2B1LV3WC:focus-visible,
.QX4IQpWr4g2m9rSQ3M6C:focus-visible {
  outline: 2px solid var(--_text);
  outline-offset: 2px;
}

.i7JjJsQZJgwLb0XLB8og {
  min-width: 3.5rem;
  text-align: center;
  font-size: var(--_counter-size);
  line-height: 1.5;
  color: var(--_text);
  font-variant-numeric: tabular-nums;
}

.a3Tm2ogRVhkSoSN6wAr3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: auto;
}

.QX4IQpWr4g2m9rSQ3M6C {
  width: 0.625rem;
  height: 0.625rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--_text);
  opacity: 0.25;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    opacity 200ms ease,
    width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.FnD7cVkVqfYIiJUm6DAG {
  width: 1.75rem;
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   Entrance choreography
   data-entry="pending": hold the active slide invisible until it scrolls in.
   data-entry="armed":   play the reveal for whichever slide is active. Because
   the animation lives under .slideActive, every slide that becomes active
   plays it again. Order: words + visual first, then score, stars, attribution,
   link, and (first time only) the controls.
   --------------------------------------------------------------------------- */
@keyframes HcbazNxrt3NMKmXixWfa {
  from {
    opacity: 0;
    transform: translateY(0.5em);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes abiVVIpjegYJ1kLLBNOU {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0 round var(--_radius));
    transform: scale(1.06);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round var(--_radius));
    transform: scale(1);
  }
}

@keyframes n6vzpNbDRQXPE1mVRl_a {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fmL4Wbvl33zeiiBxFcwk {
  from {
    opacity: 0;
    transform: scale(0.4);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.WQmyqiVng2Wh38iXDCjY[data-entry="pending"] .TlRF3HKaLke77YKkwInN .G6nq8LOhZVIsK_YVklKf,
.WQmyqiVng2Wh38iXDCjY[data-entry="pending"] .TlRF3HKaLke77YKkwInN .zeJwChG5hNrGsgfkyWFg,
.WQmyqiVng2Wh38iXDCjY[data-entry="pending"] .TlRF3HKaLke77YKkwInN .wmy0FZf6lxs15vKBq7ZZ,
.WQmyqiVng2Wh38iXDCjY[data-entry="pending"] .TlRF3HKaLke77YKkwInN .KhOdWgsW6541ByVkNnRG,
.WQmyqiVng2Wh38iXDCjY[data-entry="pending"] .TlRF3HKaLke77YKkwInN .WBtY_fvltddwFk5bJUsw,
.WQmyqiVng2Wh38iXDCjY[data-entry="pending"] .TlRF3HKaLke77YKkwInN .zRtj2EW9BDlVpCM2L3kq,
.WQmyqiVng2Wh38iXDCjY[data-entry="pending"] .Ex1_iQGm0RtqWkZoN0Hc {
  opacity: 0;
}

.WQmyqiVng2Wh38iXDCjY[data-entry="armed"] .TlRF3HKaLke77YKkwInN .G6nq8LOhZVIsK_YVklKf {
  animation: HcbazNxrt3NMKmXixWfa 720ms var(--_ease) both;
  animation-delay: calc(var(--i, 0) * var(--tsp-wd, 28ms));
}

.WQmyqiVng2Wh38iXDCjY[data-entry="armed"] .TlRF3HKaLke77YKkwInN .zeJwChG5hNrGsgfkyWFg {
  animation: HcbazNxrt3NMKmXixWfa 900ms var(--_ease) both;
}

.WQmyqiVng2Wh38iXDCjY[data-entry="armed"] .TlRF3HKaLke77YKkwInN .wmy0FZf6lxs15vKBq7ZZ {
  animation: abiVVIpjegYJ1kLLBNOU 1100ms var(--_ease) 60ms both;
}

.WQmyqiVng2Wh38iXDCjY[data-entry="armed"] .TlRF3HKaLke77YKkwInN .KhOdWgsW6541ByVkNnRG .NuPfMC5Xm7IHpZgttJe_ {
  animation: n6vzpNbDRQXPE1mVRl_a 640ms var(--_ease) 420ms both;
}

.WQmyqiVng2Wh38iXDCjY[data-entry="armed"] .TlRF3HKaLke77YKkwInN .KhOdWgsW6541ByVkNnRG .BQ0QC9teATfvs_TMbBbK {
  animation: fmL4Wbvl33zeiiBxFcwk 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(500ms + var(--s, 0) * 60ms);
}

.WQmyqiVng2Wh38iXDCjY[data-entry="armed"] .TlRF3HKaLke77YKkwInN .WBtY_fvltddwFk5bJUsw {
  animation: n6vzpNbDRQXPE1mVRl_a 680ms var(--_ease) 560ms both;
}

.WQmyqiVng2Wh38iXDCjY[data-entry="armed"] .TlRF3HKaLke77YKkwInN .zRtj2EW9BDlVpCM2L3kq {
  animation: n6vzpNbDRQXPE1mVRl_a 680ms var(--_ease) 660ms both;
}

.WQmyqiVng2Wh38iXDCjY.p_l5fbp60Wqh1XszvZsg .Ex1_iQGm0RtqWkZoN0Hc {
  animation: n6vzpNbDRQXPE1mVRl_a 700ms var(--_ease) 760ms both;
}

/* ---------------------------------------------------------------------------
   Responsive scale. Thresholds are the Webflow breakpoints (tablet 991, mobile
   landscape 767, mobile portrait 479) minus the site's padding-global, applied
   to the component's own width via container queries. The viewport queries
   after them are the fallback for browsers without container query support.
   --------------------------------------------------------------------------- */
/* Viewport fallbacks first so the container queries below win in the cascade
   whenever they are supported. */
@media (max-width: 991px) {
  .mJeNTw43x4HOtKqPph5L {
    --_quote-size: 2rem;
    --_score-size: 2rem;
    --_link-size: 1rem;
    --_star-size: 1.25rem;
    --_logo-h: 2.5rem;
    --_logo-w: 8.5rem;
    --_content-gap: 3rem;
    --_slide-gap: 2.5rem;
  }
}

@media (max-width: 767px) {
  .mJeNTw43x4HOtKqPph5L {
    --_quote-size: 1.75rem;
    --_score-size: 1.75rem;
    --_star-size: 1.125rem;
    --_avatar-size: 3rem;
    --_logo-h: 2.25rem;
    --_logo-w: 7.5rem;
    --_content-gap: 2rem;
    --_slide-gap: 2rem;
    --_attrib-gap: 1.25rem;
    --_arrow-size: 44px;
    --_controls-pt: 1.5rem;
    --_columns: 1fr;
    --_columns-left: 1fr;
  }

  .n3cC6eabHJpozyRLCLK8 .Le0AQrMUlvmkZQGBr_x_ {
    order: 0;
  }
}

@media (max-width: 479px) {
  .mJeNTw43x4HOtKqPph5L {
    --_quote-size: 1.5rem;
    --_score-size: 1.5rem;
    --_name-size: 0.9375rem;
    --_link-size: 0.9375rem;
    --_counter-size: 0.9375rem;
    --_star-size: 1rem;
    --_avatar-size: 2.75rem;
    --_logo-h: 2rem;
    --_logo-w: 6.5rem;
    --_content-gap: 1.5rem;
    --_slide-gap: 1.5rem;
    --_attrib-gap: 1rem;
    --_arrow-size: 40px;
    --_controls-pt: 1.25rem;
  }
}

@container tsp (max-width: 940px) {
  .mJeNTw43x4HOtKqPph5L {
    --_quote-size: 2rem;
    --_score-size: 2rem;
    --_link-size: 1rem;
    --_star-size: 1.25rem;
    --_logo-h: 2.5rem;
    --_logo-w: 8.5rem;
    --_content-gap: 3rem;
    --_slide-gap: 2.5rem;
  }
}

@container tsp (max-width: 690px) {
  .mJeNTw43x4HOtKqPph5L {
    --_quote-size: 1.75rem;
    --_score-size: 1.75rem;
    --_star-size: 1.125rem;
    --_avatar-size: 3rem;
    --_logo-h: 2.25rem;
    --_logo-w: 7.5rem;
    --_content-gap: 2rem;
    --_slide-gap: 2rem;
    --_attrib-gap: 1.25rem;
    --_arrow-size: 44px;
    --_controls-pt: 1.5rem;
    --_columns: 1fr;
    --_columns-left: 1fr;
  }

  .n3cC6eabHJpozyRLCLK8 .Le0AQrMUlvmkZQGBr_x_ {
    order: 0;
  }
}

@container tsp (max-width: 420px) {
  .mJeNTw43x4HOtKqPph5L {
    --_quote-size: 1.5rem;
    --_score-size: 1.5rem;
    --_name-size: 0.9375rem;
    --_link-size: 0.9375rem;
    --_counter-size: 0.9375rem;
    --_star-size: 1rem;
    --_avatar-size: 2.75rem;
    --_logo-h: 2rem;
    --_logo-w: 6.5rem;
    --_content-gap: 1.5rem;
    --_slide-gap: 1.5rem;
    --_attrib-gap: 1rem;
    --_arrow-size: 40px;
    --_controls-pt: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hRWRXwa7THa24EdbnbLJ,
  .m2MTXKskX9rDSb1bB1CV,
  .QX4IQpWr4g2m9rSQ3M6C,
  .y1ufWIS4yKsn2B1LV3WC {
    transition: none;
  }

  .WQmyqiVng2Wh38iXDCjY[data-entry="pending"] .TlRF3HKaLke77YKkwInN .G6nq8LOhZVIsK_YVklKf,
  .WQmyqiVng2Wh38iXDCjY[data-entry="pending"] .TlRF3HKaLke77YKkwInN .zeJwChG5hNrGsgfkyWFg,
  .WQmyqiVng2Wh38iXDCjY[data-entry="pending"] .TlRF3HKaLke77YKkwInN .wmy0FZf6lxs15vKBq7ZZ,
  .WQmyqiVng2Wh38iXDCjY[data-entry="pending"] .TlRF3HKaLke77YKkwInN .KhOdWgsW6541ByVkNnRG,
  .WQmyqiVng2Wh38iXDCjY[data-entry="pending"] .TlRF3HKaLke77YKkwInN .WBtY_fvltddwFk5bJUsw,
  .WQmyqiVng2Wh38iXDCjY[data-entry="pending"] .TlRF3HKaLke77YKkwInN .zRtj2EW9BDlVpCM2L3kq,
  .WQmyqiVng2Wh38iXDCjY[data-entry="pending"] .Ex1_iQGm0RtqWkZoN0Hc {
    opacity: 1;
  }

  .WQmyqiVng2Wh38iXDCjY[data-entry="armed"] .TlRF3HKaLke77YKkwInN .G6nq8LOhZVIsK_YVklKf,
  .WQmyqiVng2Wh38iXDCjY[data-entry="armed"] .TlRF3HKaLke77YKkwInN .zeJwChG5hNrGsgfkyWFg,
  .WQmyqiVng2Wh38iXDCjY[data-entry="armed"] .TlRF3HKaLke77YKkwInN .wmy0FZf6lxs15vKBq7ZZ,
  .WQmyqiVng2Wh38iXDCjY[data-entry="armed"] .TlRF3HKaLke77YKkwInN .KhOdWgsW6541ByVkNnRG .NuPfMC5Xm7IHpZgttJe_,
  .WQmyqiVng2Wh38iXDCjY[data-entry="armed"] .TlRF3HKaLke77YKkwInN .KhOdWgsW6541ByVkNnRG .BQ0QC9teATfvs_TMbBbK,
  .WQmyqiVng2Wh38iXDCjY[data-entry="armed"] .TlRF3HKaLke77YKkwInN .WBtY_fvltddwFk5bJUsw,
  .WQmyqiVng2Wh38iXDCjY[data-entry="armed"] .TlRF3HKaLke77YKkwInN .zRtj2EW9BDlVpCM2L3kq,
  .WQmyqiVng2Wh38iXDCjY.p_l5fbp60Wqh1XszvZsg .Ex1_iQGm0RtqWkZoN0Hc {
    animation: none;
  }
}