.scene04{
  position:relative;min-height:100vh;border-top:1px solid var(--osof-line);
  background:radial-gradient(circle at 76% 14%,rgba(37,99,235,.10),transparent 25%),
             linear-gradient(180deg,#07111f 0%,#091725 52%,#07111f 100%);
}
.scene04__hero{min-height:100vh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(560px,1.1fr)}
.scene04__hero-copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:104px 50px 82px max(32px,calc((100vw - 1440px)/2 + 32px));
}
.scene04__hero-title{
  margin:18px 0 54px;font-size:clamp(68px,9.4vw,144px);
  line-height:.84;letter-spacing:-.07em;
}
.scene04__hero-question{margin:0;color:#9fc7e9;font-size:clamp(18px,1.65vw,25px);line-height:1.4}
.scene04__hero-text{max-width:620px;margin:22px 0 0;color:#cbd5e1;font-size:18px;line-height:1.75}
.scene04__hero-media{
  position:relative;min-height:100vh;overflow:hidden;
  border-left:1px solid var(--osof-line);background:#0a1626;
}
.scene04__hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene04__hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,17,31,.20),transparent 36%),
             linear-gradient(0deg,rgba(7,17,31,.74),transparent 50%);
}
.scene04__hero-caption{position:absolute;z-index:2;left:28px;bottom:28px}
.scene04__hero-caption strong{display:block;margin-top:8px;font-size:24px;letter-spacing:-.025em}

.scene04__journey{
  max-width:1440px;margin:auto;display:grid;
  grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr);
  gap:64px;padding:120px 30px 140px;
}
.scene04__sticky{
  position:sticky;top:96px;align-self:start;min-height:calc(100vh - 140px);
  display:flex;flex-direction:column;justify-content:center;
}
.scene04__sticky h2{
  margin:16px 0 48px;font-size:clamp(54px,6.5vw,98px);
  line-height:.88;letter-spacing:-.06em;
}
.scene04__sticky p{max-width:430px;margin:0;color:var(--osof-muted);font-size:17px;line-height:1.75}
.scene04__progress{margin-top:38px;display:flex;align-items:center;gap:14px}
.scene04__progress strong{color:var(--osof-cyan);font-size:30px}
.scene04__progress span{width:70px;height:1px;background:var(--osof-line)}
.scene04__progress small{color:var(--osof-muted);font-size:11px;letter-spacing:.15em}

.scene04__cards{display:grid;gap:44px}
.scene04__card{
  position:relative;min-height:760px;overflow:hidden;
  border:1px solid var(--osof-line);border-radius:28px;background:#0a1626;
}
.scene04__card-media{position:absolute;inset:0}
.scene04__card-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 12s var(--osof-ease);
}
.scene04__card:hover .scene04__card-media img{transform:scale(1.025)}
.scene04__card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,17,31,.04),rgba(7,17,31,.15) 45%,rgba(7,17,31,.94)),
             linear-gradient(90deg,rgba(7,17,31,.58),transparent 62%);
}
.scene04__card-copy{position:absolute;z-index:2;left:42px;right:42px;bottom:40px;max-width:680px}
.scene04__index{color:var(--osof-cyan);font-size:12px;font-weight:800;letter-spacing:.16em}
.scene04__card-copy h3{
  margin:14px 0 18px;font-size:clamp(50px,5.6vw,82px);
  line-height:.92;letter-spacing:-.055em;
}
.scene04__card-copy p{margin:0;color:#d7e0eb;font-size:19px;line-height:1.72}
.scene04__card-copy .scene04__body{margin-top:10px;color:#aebaca;font-size:16px}
.scene04__rc-note{
  min-height:38vh;display:grid;place-items:center;text-align:center;
  border-top:1px solid var(--osof-line);
  background:radial-gradient(circle at 50% 50%,rgba(37,99,235,.14),transparent 34%);
}
.scene04__rc-note h2{margin:12px 0 24px;font-size:clamp(48px,7vw,98px);line-height:.9;letter-spacing:-.06em}
.scene04__rc-note p{margin:0;color:var(--osof-muted);font-size:16px}
.scene04__reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--osof-ease),transform .7s var(--osof-ease)}
.scene04__reveal.is-visible{opacity:1;transform:none}

@media(max-width:1080px){
  .scene04__hero{grid-template-columns:1fr}
  .scene04__hero-media{min-height:62vh;border-left:0;border-top:1px solid var(--osof-line)}
  .scene04__journey{grid-template-columns:1fr;gap:40px}
  .scene04__sticky{position:relative;top:auto;min-height:auto;padding-bottom:20px}
}
@media(max-width:720px){
  .scene04__hero-copy,.scene04__journey{padding-left:20px;padding-right:20px}
  .scene04__card{min-height:580px}
  .scene04__card-copy{left:24px;right:24px;bottom:28px}
}
@media(prefers-reduced-motion:reduce){
  .scene04__reveal{opacity:1;transform:none}
  .scene04__card-media img{transition:none}
}


/* Scene 04 RC2 */
.scene04__card[data-stage="SHARE"] .scene04__index,
.scene04__card[data-stage="MENTOR"] .scene04__index{
  color:#67e8f9;
}
.scene04__card[data-stage="MENTOR"]::after{
  background:
    linear-gradient(180deg,rgba(7,17,31,.08),rgba(7,17,31,.18) 45%,rgba(7,17,31,.95)),
    linear-gradient(90deg,rgba(7,17,31,.62),transparent 62%);
}


/* RC15.6 — Avoid duplicate top rule where Scene 03 already closes itself. */
.scene04{
  border-top:0 !important;
}


/* RC15.11 — People Journey supporting copy */
.scene04__sticky-copy{
  max-width:360px;
  margin:clamp(28px,2.4vw,36px) 0 0;
  color:#9fb0c2;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.75;
  letter-spacing:.01em;
}
.scene04__sticky-copy + .scene04__progress{
  margin-top:clamp(42px,4vw,58px);
}
@media(max-width:900px){
  .scene04__sticky-copy{
    max-width:560px;
    margin-top:26px;
  }
  .scene04__sticky-copy + .scene04__progress{
    margin-top:34px;
  }
}


/* RC15.13 — Unified 3-level typography across Growing Together / People Journey */
.scene04__hero-title,
.scene04__sticky h2{
  color:#f5f7fb !important;
}
.scene04__hero-question,
.scene04__sticky-lead{
  color:#67e8f9 !important;
}
.scene04__hero-text,
.scene04__sticky-copy{
  color:#e4edf6 !important;
}

/* People Journey follows the same spacing rhythm as the other hero scenes. */
.scene04__sticky-lead{
  max-width:390px;
  margin:clamp(30px,2.7vw,40px) 0 0;
  font-size:clamp(17px,1.35vw,21px);
  line-height:1.6;
  letter-spacing:-.01em;
}
.scene04__sticky-lead + .scene04__sticky-copy{
  margin-top:clamp(18px,1.6vw,24px);
}
.scene04__sticky-copy + .scene04__progress{
  margin-top:clamp(42px,4vw,58px);
}

@media(max-width:900px){
  .scene04__sticky-lead{
    max-width:560px;
    margin-top:26px;
  }
}