/* ── Needs section01 — intro cards ── */
.needs--intro {
  --needs-card-radius: clamp(0.875rem, 1.042vw, 1.25rem);
  --needs-grid-gap: clamp(1.25rem, 2.083vw, 2.5rem);
  --needs-grid-row-gap: clamp(1.5rem, 3.281vw, 3.9375rem);
  --needs-intro-sign-gap: clamp(0.75rem, 1.04vw, 1.25rem);

  background-color: var(--color-warm);
}

.needs--intro .needs__inner {
  padding-block: clamp(3rem, 10.42vw, 12.5rem) clamp(3rem, 8vw, 6rem);
}

.needs__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.needs__sign {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: var(--needs-intro-sign-gap);
}

.needs__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: min(1021px, 100%);
  margin-inline: auto;
  font-size: var(--text-title-large);
  font-weight: 800;
  line-height: var(--text-title-large-lh);
  letter-spacing: var(--letter-tight);
  color: var(--color-black);
  text-align: center;
}

.needs__title-line {
  display: block;
  white-space: nowrap;
}

.needs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--needs-grid-gap);
  row-gap: var(--needs-grid-row-gap);
  margin-top: clamp(1.5rem, 3.125vw, 3.75rem);
}

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

.needs-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--needs-card-radius);
  aspect-ratio: 761 / 400;
}

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

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

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

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

.needs-card--tone-dark .needs-card__title,
.needs-card--tone-dark .needs-card__body {
  color: var(--color-dark);
}

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

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

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

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

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

@media (max-width: 767px) {
  .needs__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(var(--needs-grid-row-gap) * 2);
  }

  .needs__title-line {
    white-space: normal;
  }
}