/* ── RegenMat intro — differentiators ── */
.regenmat-intro {
  --regenmat-intro-content-max: min(1820px, 100%);
  --regenmat-intro-card-width: min(580px, 31.87%);
  --regenmat-intro-card-radius: clamp(0.875rem, 1.042vw, 1.25rem);
  --regenmat-intro-media-ratio: 580 / 640;
  --regenmat-intro-stage-min-height: clamp(72rem, 116.67vw, 140rem);
  --regenmat-intro-body-color: #333333;
  --regenmat-intro-sign-gap: clamp(0.75rem, 1.04vw, 1.25rem);

  overflow-x: clip;
  background-color: var(--color-warm);
}

.regenmat-intro__inner {
  width: var(--regenmat-intro-content-max);
  max-width: calc(100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-block: clamp(3rem, 10.42vw, 12.5rem);
}

.regenmat-intro__sign {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: var(--regenmat-intro-sign-gap);
}

.regenmat-intro__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.25rem, 0.52vw, 0.5rem);
  max-width: min(936px, 100%);
  margin-inline: auto;
  text-align: center;
}

.regenmat-intro__eyebrow {
  font-size: var(--text-subtitle);
  font-weight: 400;
  line-height: var(--text-subtitle-lh);
  letter-spacing: var(--letter-tight);
  color: var(--regenmat-intro-body-color);
  white-space: nowrap;
}

.regenmat-intro__eyebrow strong {
  font-weight: 700;
}

.regenmat-intro__title {
  font-size: var(--text-title-large);
  font-weight: 800;
  line-height: var(--text-title-large-lh);
  letter-spacing: var(--letter-tight);
  color: var(--regenmat-intro-body-color);
}

.regenmat-intro__stage {
  margin-top: clamp(2rem, 4.17vw, 5rem);
}

.regenmat-intro__lead {
  max-width: min(967px, 100%);
  margin-inline: auto;
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--text-h2-lh);
  letter-spacing: var(--letter-tight);
  text-align: center;
  color: var(--color-primary);
}

.regenmat-intro__timeline {
  position: relative;
  min-height: var(--regenmat-intro-stage-min-height);
  margin-top: clamp(1.5rem, 3.125vw, 3.75rem);
}

.regenmat-intro__line {
  position: absolute;
  top: 0;
  left: 50%;
  bottom: clamp(3rem, 8vw, 6rem);
  width: 0;
  border-left: 1px dashed var(--color-border);
  transform: translateX(-50%);
  pointer-events: none;
}

.regenmat-intro__cards {
  position: relative;
  min-height: inherit;
}

.regenmat-intro-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.04vw, 1.25rem);
  width: var(--regenmat-intro-card-width);
  min-width: 0;
}

.regenmat-intro-card--01 {
  top: 0;
  left: 14.84%;
}

.regenmat-intro-card--02 {
  top: 25.89%;
  left: 53.3%;
}

.regenmat-intro-card--03 {
  top: 51.79%;
  left: 14.84%;
}

.regenmat-intro-card__media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--regenmat-intro-card-radius);
  aspect-ratio: var(--regenmat-intro-media-ratio);
}

.regenmat-intro-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.regenmat-intro-card__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(217, 217, 217, 0) 68%,
    rgba(242, 106, 75, 0.4) 100%
  );
  pointer-events: none;
}

.regenmat-intro-card__title {
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: var(--text-h2-lh);
  letter-spacing: var(--letter-tight);
  color: var(--color-black);
}

.regenmat-intro-card__title-line {
  display: inline-block;
  white-space: nowrap;
}

.regenmat-intro-card__body {
  font-size: var(--text-subtitle);
  font-weight: 400;
  line-height: var(--text-subtitle-lh);
  letter-spacing: var(--letter-tight);
  color: var(--regenmat-intro-body-color);
}

@media (hover: hover) and (pointer: fine) {
  .regenmat-intro-card__media img {
    transform: scale(1);
    transform-origin: center center;
    backface-visibility: hidden;
    transition: transform var(--motion-image-zoom-out);
  }

  .regenmat-intro-card:hover .regenmat-intro-card__media img,
  .regenmat-intro-card:focus-within .regenmat-intro-card__media img {
    transform: scale(var(--motion-image-zoom-scale));
    transition: transform var(--motion-image-zoom-in);
  }

  .regenmat-intro-card__gradient {
    transition: opacity var(--motion-overlay-fade);
  }

  .regenmat-intro-card:hover .regenmat-intro-card__gradient,
  .regenmat-intro-card:focus-within .regenmat-intro-card__gradient {
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .regenmat-intro-card__media img,
  .regenmat-intro-card__gradient {
    transition: none;
  }
}

@media (max-width: 1024px) {
  .regenmat-intro__timeline {
    min-height: 0;
  }

  .regenmat-intro__line {
    display: none;
  }

  .regenmat-intro__cards {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 5vw, 3rem);
  }

  .regenmat-intro-card {
    position: static;
    width: min(580px, 100%);
    margin-inline: auto;
  }

  .regenmat-intro-card--02 {
    margin-inline-start: auto;
    margin-inline-end: 0;
  }

  .regenmat-intro-card--01,
  .regenmat-intro-card--03 {
    margin-inline-start: 0;
    margin-inline-end: auto;
  }
}

@media (max-width: 767px) {
  .regenmat-intro__inner {
    padding-block: clamp(2.5rem, 12vw, 3.5rem);
  }

  .regenmat-intro__eyebrow {
    white-space: normal;
  }

  .regenmat-intro-card__title-line {
    white-space: normal;
  }

  .regenmat-intro-card,
  .regenmat-intro-card--02 {
    width: 100%;
    margin-inline: auto;
  }
}