/* ── ECM section01 — intro / what is ECM ── */
.ecm--01 {
  --ecm-01-content-max: min(1320px, 100%);
  --ecm-01-figure-max: min(1160px, 100%);
  --ecm-01-question-max: min(460px, 100%);
  --ecm-01-body-max: min(1232px, 100%);
  --ecm-01-detail-border: clamp(3px, 0.26vw, 5px);

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

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

.ecm__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ecm--01 .ecm__eyebrow {
  max-width: none;
  white-space: nowrap;
  font-size: var(--text-subtitle);
  font-weight: 400;
  line-height: var(--text-subtitle-lh);
  letter-spacing: var(--letter-tight);
  color: var(--color-dark);
}

.ecm__title {
  margin-top: clamp(0.5rem, 0.52vw, 0.625rem);
  max-width: 100%;
  font-size: var(--text-title-large);
  font-weight: 800;
  line-height: var(--text-title-large-lh);
  letter-spacing: var(--letter-tight);
  color: var(--color-dark);
}

.ecm__title-line {
  display: block;
}

.ecm__title-accent {
  color: var(--color-primary);
}

.ecm__question {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--ecm-01-question-max);
  margin-top: clamp(1.5rem, 5.21vw, 6.25rem);
  margin-inline: auto;
  text-align: center;
}

.ecm__question .scroll-indicator {
  flex-shrink: 0;
}

.ecm__question-title {
  margin-top: clamp(0.75rem, 1.04vw, 1.25rem);
  font-size: var(--text-title-large);
  font-weight: 800;
  line-height: var(--text-title-large-lh);
  letter-spacing: var(--letter-tight);
  color: var(--color-dark);
}

.ecm__figure {
  position: relative;
  width: var(--ecm-01-figure-max);
  margin-top: clamp(1rem, 3.125vw, 3.75rem);
  margin-inline: auto;
  aspect-ratio: 1160 / 646;
}

.ecm__figure-main {
  position: absolute;
  left: 0;
  top: 0;
  width: 80.862%;
  height: 91.64%;
  object-fit: cover;
}

.ecm__figure-callout {
  position: absolute;
  left: 16.121%;
  top: 31.268%;
  width: 64.914%;
  height: 68.421%;
  pointer-events: none;
}

.ecm__figure-detail {
  position: absolute;
  left: 61.724%;
  top: 31.268%;
  width: 38.276%;
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--ecm-01-detail-border) solid var(--color-primary);
  border-radius: 50%;
  background-color: var(--color-warm);
}

.ecm__figure-detail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ecm__body {
  max-width: var(--ecm-01-body-max);
  margin-top: clamp(1rem, 1.61vw, 1.9375rem);
  margin-inline: auto;
  font-size: var(--text-subtitle);
  font-weight: 400;
  line-height: var(--text-subtitle-lh);
  letter-spacing: var(--letter-tight);
  color: var(--color-dark);
  text-align: center;
}

.ecm__body strong {
  font-weight: 700;
}

@media (max-width: 767px) {
  .ecm--01 {
    --ecm-01-detail-border: max(2px, 0.53vw);
  }

  .ecm--01 .ecm__inner {
    padding-block: clamp(2.5rem, 12vw, 3.5rem);
  }

  .ecm--01 .ecm__eyebrow {
    white-space: normal;
  }
}