/* Scroll-led education chapter, adapted to the site's existing brand palette. */
.management-section {
  position: relative;
  isolation: isolate;
  background: #fff;
  --management-wash: 0;
}

.management-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--management-wash);
  background:
    radial-gradient(ellipse at 78% 30%, #f7cfc9 0%, #fff0ed 38%, transparent 68%),
    linear-gradient(180deg, #fff 0%, #fff8f7 17%, #f9dfda 61%, #fff 100%);
}

.management-content { position: relative; z-index: 1; }
.management-curve {
  display: block;
  width: min(100%, 900px);
  height: auto;
  margin: 33px auto 0;
  color: var(--red);
  overflow: visible;
}
.management-story { display: flow-root; padding-bottom: clamp(90px, 18vh, 170px); }
.management-card {
  position: sticky;
  top: clamp(82px, 13vh, 128px);
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  min-height: clamp(270px, 43vh, 390px);
  margin: 0 0 clamp(185px, 43vh, 390px);
  border: 1px solid #f0ddda;
  border-radius: clamp(24px, 3vw, 36px);
  background: #fff;
  box-shadow: 0 20px 55px #78463d1c, 0 2px 9px #78463d0d;
}
.management-card:nth-child(2) {
  top: calc(clamp(82px, 13vh, 128px) + 16px);
  z-index: 2;
  background: #fff9f8;
}
.management-card:nth-child(3) {
  top: calc(clamp(82px, 13vh, 128px) + 32px);
  z-index: 3;
  margin-bottom: 0;
  background: #fcefeb;
}
.management-card-inner {
  box-sizing: border-box;
  display: flex;
  min-height: inherit;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(28px, 5vw, 62px);
}
.management-card-index {
  display: inline-block;
  color: var(--red);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.5;
}
.management-card h3 {
  margin: 15px 0 0;
  font-family: BrainSerif, serif;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.25;
  letter-spacing: .03em;
}
.management-card p {
  max-width: 35em;
  margin: 22px 0 0;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.8;
}
.management-content > .management-photo { margin-top: 6px; }

@media (max-width: 767px) {
  .management-curve { margin-top: 23px; }
  .management-story {
    display: flex;
    flex-direction: column;
    gap: 36dvh;
    padding-bottom: 0;
  }
  .management-story::after { content: ""; display: block; flex: none; height: 180px; margin-top: -36dvh; }
  .management-card {
    top: clamp(78px, 14vh, 108px);
    min-height: min(55dvh, 340px);
    flex: none;
    margin-bottom: 0;
    border-radius: 26px;
  }
  /* Leave a numbered header visible above each following card. */
  /* All cards release at the same boundary while painted offsets preserve the three headers. */
  .management-card:nth-child(2) { top: clamp(78px, 14vh, 108px); transform: translateY(56px); }
  .management-card:nth-child(3) { top: clamp(78px, 14vh, 108px); transform: translateY(112px); }
  .management-card-inner { justify-content: flex-start; padding: 15px 24px 24px; }
  .management-card h3 { margin-top: 22px; font-size: 29px; }
  .management-card p { margin-top: 16px; font-size: 16px; line-height: 1.75; }
  .management-content > .management-photo { margin-top: 206px; }
}

@media (prefers-reduced-motion: reduce) {
  .management-section { --management-wash: 1; }
  .management-story { gap: 0; padding-bottom: 0; }
  .management-story::after { display: none; }
  .management-card,
  .management-card:nth-child(2),
  .management-card:nth-child(3) {
    position: relative;
    top: auto;
    transform: none;
    margin-bottom: 16px;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .management-content > .management-photo { margin-top: 26px; }
}