.c-rotating-carousel{
  --item-height: 11rem;
  --row-height: var(--item-height);
  /* Top/bottom space on each row, so this is the gap between one item and
     the next. module.js grows --row-height to fit the tallest item, so
     content can no longer eat into this padding. Desktop sets it higher,
     which also adds scroll depth between items (left images change more
     slowly).
     Must carry a unit. This is fed to calc() in .c-rotating-carousel__row,
     and a plain 0 cannot be added to a length — that made the whole height
     declaration invalid, so rows below 1024px collapsed to their content
     height and each word sat right on top of the one before it. */
  --row-padding-y: 2rem;
  /* Multiplier on scroll distance per item. 1 = row height only. Desktop
     raises this so left images hold longer without extra visual padding. */
  --scroll-speed-mult: 1;
  --visible-rows: 3;
  --neighbor-blur: 2px;
  --neighbor-opacity: 0.65;
  --neighbor-font-mult: 0.82;
  --active-font-mult: 2;
  --detail-gap: 1.5rem;
  --section-min-height: 50vh;
  --section-padding-y: 2rem;
  --section-padding-bottom: calc(var(--section-padding-y) * 0.5);
  --center-ratio: 0.5;
  --stage-rows: var(--visible-rows);
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: visible;
}

/* Section overflow is handled in css/objects/_containers-dnd.css */

/* Taller rows so each word carries its own text + CTA */
.c-rotating-carousel.has-detail{
  --row-height: 22rem;
  --stage-rows: 2.5;
}

/* Pull the active word up when a module heading sits above the stage */
.c-rotating-carousel.has-heading{
  --visible-rows: 2;
  --stage-rows: 1.5;
  --center-ratio: 0.3;
  --section-min-height: auto;
  --section-padding-y: 1.5rem;
  --section-padding-bottom: calc(var(--section-padding-y) * 0.5);
}

.c-rotating-carousel.has-heading.has-detail{
  --stage-rows: 1.45;
  --center-ratio: 0.36;
}

/* Word size options (module field "Word Size").
   The active word's font size is --active-font-mult x the clamp on
   .c-rotating-carousel__item, so one variable controls the whole thing.
   Large is the original size, so .word-size--large needs no rule.
   module.js reads --active-font-mult at runtime, so it picks these up too. */
.c-rotating-carousel.word-size--medium{
  --active-font-mult: 1.5;
}

.c-rotating-carousel.word-size--small{
  --active-font-mult: 1.1;
}

.c-rotating-carousel__inner{
  min-height: var(--section-min-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--section-padding-y) 0 var(--section-padding-bottom);
  overflow: visible;
}

.c-rotating-carousel.has-heading .c-rotating-carousel__inner{
  align-items: flex-start;
  justify-content: center;
}

.c-rotating-carousel__heading{
  width: 100%;
  margin: 0 0 1rem;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: var(--demo-ink);
}

.c-rotating-carousel.has-heading .c-rotating-carousel__stage{
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 88%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 88%,
    transparent 100%
  );
}

/* Keep the active word fully opaque — has-detail mask fades the top 14% */
.c-rotating-carousel.has-heading.has-detail .c-rotating-carousel__stage{
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 92%,
    transparent 100%
  );
}

.c-rotating-carousel__content{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: min(56rem, 96vw);
  overflow: visible;
}

.c-rotating-carousel__stage{
  position: relative;
  display: block;
  width: 100%;
  height: calc(var(--row-height) * var(--stage-rows));
  overflow: visible;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 20%,
    black 80%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 20%,
    black 80%,
    transparent 100%
  );
}

.c-rotating-carousel.has-detail .c-rotating-carousel__stage{
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 14%,
    black 88%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 14%,
    black 88%,
    transparent 100%
  );
}

.c-rotating-carousel__drum{
  display: block;
  width: 100%;
  will-change: transform;
}

.c-rotating-carousel__row{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Padding is added on top of --row-height so the word + detail keep their
     current content box. JS reads the full offsetHeight for scroll distance. */
  height: calc(var(--row-height) + (var(--row-padding-y) * 2));
  padding-top: var(--row-padding-y);
  padding-bottom: var(--row-padding-y);
  width: 100%;
}

.c-rotating-carousel__item{
  --item-font-mult: 1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  font-size: clamp(
    calc(1.2rem * var(--item-font-mult)),
    calc(4.5vw * var(--item-font-mult)),
    calc(2rem * var(--item-font-mult))
  );
  font-weight: 100;
  color: var(--demo-ink);
  /* Long words must be allowed to wrap. This used to be nowrap, but a word
     that does not fit has nowhere to go: a flex item will not shrink below
     its own no-wrap width, so the copy column was forced wider than its 40%
     and pushed the image column out of shape. On mobile the word was simply
     clipped by the stage instead. module.js measures the real word height,
     so a word on two lines is positioned correctly either way. */
  white-space: normal;
  text-align: center;
  will-change: opacity, filter;
}

.c-rotating-carousel__link{
  color: inherit;
  font: inherit;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

.c-rotating-carousel__link:hover,
.c-rotating-carousel__link:focus-visible{
  color: var(--karman-blue);
  text-decoration: underline;
}

/* Text + CTA scroll with their word */
.c-rotating-carousel__detail{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: min(36rem, 92%);
  margin-top: var(--detail-gap);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform;
  pointer-events: none;
}

.c-rotating-carousel__detail.is-active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.c-rotating-carousel__text{
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  line-height: 1.6;
  color: var(--demo-ink);
  white-space: normal;
  /* Scale/blur are driven by JS closeness; 1 = current (full) size */
  transform-origin: center center;
  will-change: transform, filter;
}

.c-rotating-carousel__text p:last-child{
  margin-bottom: 0;
}

.c-rotating-carousel__button{
  display: flex;
  justify-content: center;
  /* Scale/blur are driven by JS closeness; 1 = current (full) size */
  transform-origin: center center;
  will-change: transform, filter;
}

.c-rotating-carousel__button .c-button{
  white-space: nowrap;
}

.c-rotating-carousel__row:first-child .c-rotating-carousel__item{
  --item-font-mult: var(--active-font-mult);
}

.c-rotating-carousel__row:not(:first-child) .c-rotating-carousel__item{
  --item-font-mult: var(--neighbor-font-mult);
  opacity: var(--neighbor-opacity);
  filter: blur(var(--neighbor-blur));
}

@media (max-width: 640px){
  .c-rotating-carousel{
    --item-height: 7rem;
    --active-font-mult: 1.45;
    --section-min-height: auto;
    --section-padding-y: 1.5rem;
    --section-padding-bottom: 0.75rem;
  }

  /* Mobile word sizes. On a phone the clamp resolves to its minimum
     (1.2rem x this multiplier), so small was only 19px against 35px on
     desktop. 1.25 brings a phone up to 24px. Medium is kept just above it,
     and both stay above --neighbor-font-mult (0.82) so the active word still
     reads bigger than the ones either side. */
  .c-rotating-carousel.word-size--medium{
    --active-font-mult: 1.35;
  }

  .c-rotating-carousel.word-size--small{
    --active-font-mult: 1.25;
  }

  .c-rotating-carousel.has-detail{
    --row-height: 21rem;
    --detail-gap: 0.75rem;
    --stage-rows: 1;
  }

  .c-rotating-carousel.has-heading{
    --center-ratio: 0.5;
    --section-padding-y: 1rem;
    --section-padding-bottom: 0.5rem;
    --stage-rows: 1;
  }

  .c-rotating-carousel.has-heading.has-detail{
    --stage-rows: 1;
    --center-ratio: 0.5;
  }

  /* The stage is sized from --row-height, but the row is that plus its
     padding. Once an item fills the content box, the CTA sat on the bottom
     edge of the stage and faded out. Adding the padding back onto the stage,
     and only at this breakpoint, keeps the button clear of the fade without
     stretching the desktop stage. */
  .c-rotating-carousel.has-detail .c-rotating-carousel__stage{
    height: calc(var(--row-height) * var(--stage-rows) + var(--row-padding-y));
  }

  /* Clip neighbor rows so they don't bleed behind the CTA.
     The fade is a fixed strip rather than a percentage. The stage is only one
     row tall here, so a percentage fade scaled up with the row and reached
     far enough in to wash out the active item's CTA button. */
  .c-rotating-carousel__stage,
  .c-rotating-carousel.has-heading .c-rotating-carousel__stage,
  .c-rotating-carousel.has-heading.has-detail .c-rotating-carousel__stage{
    overflow: hidden;
    mask-image: linear-gradient(
      to bottom,
      black 0,
      black calc(100% - 1rem),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0,
      black calc(100% - 1rem),
      transparent 100%
    );
  }

  .c-rotating-carousel__heading{
    margin-bottom: 0.75rem;
  }

  .c-rotating-carousel__item{
    line-height: 1.15;
  }

  .c-rotating-carousel__detail{
    gap: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .c-rotating-carousel__stage{
    height: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .c-rotating-carousel__row{
    display: none;
    height: auto;
  }

  .c-rotating-carousel__row:first-child{
    display: flex;
  }

  .c-rotating-carousel__row:first-child .c-rotating-carousel__item{
    --item-font-mult: var(--active-font-mult);
    filter: none !important;
    opacity: 1 !important;
  }

  .c-rotating-carousel__detail{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Keep text/button at full size with no blur when motion is reduced */
  .c-rotating-carousel__text,
  .c-rotating-carousel__button{
    transform: none !important;
    filter: none !important;
  }
}


/* Image & stat */
.c-rotating-carousel__stats{
  display: none;
}
.c-rotating-carousel__stat-item{
  gap: 20px;
  align-items: center;
}
.c-rotating-carousel__stat-image{
  /* Keep the laptop under the glass quote when they overlap. */
  position: relative;
  z-index: 0;
}
.c-rotating-carousel__stat-image img{
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
}
.c-rotating-carousel__stat-quote{
  gap: 15px;
  border-radius: 60px;
  /* Light glass — same recipe as the header on light sections
     (Figma 4343:910): 40% white fill, 4px frost, thin dark rim. */
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  backdrop-filter: blur(4px) saturate(120%);
  background: rgba(255, 255, 255, 0.40);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
  isolation: isolate;
  padding: 20px;
  min-height: 100px;
  align-items: center;
  max-width: 100%;
  width: 100%;
}
/* No backdrop-filter support — heavier fill so quote text stays legible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .c-rotating-carousel__stat-quote{
    background: rgba(255, 255, 255, 0.85);
  }
}
.c-rotating-carousel__stat-quote.with-image{
  padding: 15px;
}
.c-rotating-carousel__stat-author-image{
  flex: 0 0 87px;
}
.c-rotating-carousel__stat-author-image img{
  display: block;
  width: 87px;
  height: 87px;
  border-radius: 100%;
  object-fit: cover;
  box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.10);
}
.c-rotating-carousel__stat-text{
  color: var(--karman-text-grey, #313131);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 23px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.c-rotating-carousel__stat-company{
  color: var(--karman-text-grey, #313131);
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 6px;
}
@media(min-width: 1024px){
  /* More space above/below each right-column item. The taller rows also
     increase ScrollTrigger distance, so the left image holds longer. */
  .c-rotating-carousel{
    --row-padding-y: 3.5rem;
    --scroll-speed-mult: 2;
  }
  .c-rotating-carousel.has-detail{
    --row-padding-y: 5rem;
  }
  /* The stage multiplier (1.45) only equals one padded row while
     --row-height is the default 22rem: 22rem x 1.45 = 22rem + 10rem.
     On a narrower desktop the copy wraps and the row grows to fit, but the
     stage kept growing 1.45 times as fast and the spare height sat under the
     last item. Matching the stage to the row removes that. At 22rem the two
     are equal, so a wide screen is unchanged. */
  .c-rotating-carousel.has-heading.has-detail .c-rotating-carousel__stage{
    height: calc(var(--row-height) + (var(--row-padding-y) * 2));
  }
  .c-rotating-carousel__stats{
    /* Stack every slide in one cell so this column is as tall as
       the tallest image + quote. The grey panel then fills that box. */
    display: grid;
    flex: 0 0 calc(60% - 20px);
    isolation: isolate;
    padding-bottom: 1.5rem;
    position: relative;
  }
  .c-rotating-carousel__stats:before{
    content: '';
    position: absolute;
    /* Keep the current content-based height. Width is 50% of this
       60% column, so the grey reads as about 30% of the row. */
    top: 0;
    bottom: 0;
    left: -5000px;
    width: calc(5000px + 50%);
    border-radius: 0 20px 20px 0;
    background: var(--Karman-Grey, #EFEFEF);
    z-index: -1;
  }
  .c-rotating-carousel__stat-item{
    grid-area: 1 / 1;
    width: 100%;
    opacity: 0;
    animation-fill-mode: both;
    gap: 0;
    /* Quote is absolutely placed on the image, so the item is the image box. */
    position: relative;
  }
  /* Quote sits 200px up from the image bottom so it overlaps the laptop
     without shrinking the item box (negative margin was letting the
     image spill out of the grey panel). */
  .c-rotating-carousel__stat-quote{
    align-self: stretch;
    max-width: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: calc(100% - 150px);
    margin-top: 0;
    z-index: 2;
    padding: 2em;
  }
  /* Extra width sits in the left grey bleed so the laptop grows
     without crowding the copy column. */
  .c-rotating-carousel__stat-image{
    width: 112%;
    max-width: none;
    margin-left: -12%;
  }
  .c-rotating-carousel__stat-image img{
    max-height: 62vh;
  }
  .c-rotating-carousel__inner{
    gap: 40px;
  }
  .c-rotating-carousel__content{
    flex: 0 0 calc(40% - 20px);
  }
  .c-rotating-carousel__row{
    align-items: start;
    justify-content: center;
    text-align: left;
  }
  /* justify-content puts the word block at the left of the row, but the
     block itself still inherited the centred text from the base styles.
     That centred any word that ran onto a second line, so it no longer
     lined up with the heading and copy. Force left instead. */
  .c-rotating-carousel__item{
    justify-content: start;
    text-align: left;
  }
  .c-rotating-carousel__heading{
    text-align: left;
  }
  .c-rotating-carousel__detail{
    text-align: left;
    align-items: start;
  }
  /* Scale from the left edge so text and button do not drift right-to-left.
     The parent detail still handles the bottom-to-top y motion. */
  .c-rotating-carousel__text,
  .c-rotating-carousel__button{
    transform-origin: left center;
  }
}
@media(min-width: 1300px){
  .c-rotating-carousel__stat-quote{
    padding: 24px 60px;
  }
  .c-rotating-carousel__stat-quote.with-image{
    padding: 15px 2em 15px 15px;
  }
}