.detail-header { position: sticky; }

.baton-hero {
  min-height: 590px;
  display: flex;
  align-items: flex-end;
  padding: clamp(110px, 14vw, 170px) clamp(20px, 6vw, 84px) clamp(72px, 9vw, 105px);
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(23, 52, 31, 0.08), rgba(23, 52, 31, 0.82)),
    linear-gradient(90deg, rgba(23, 52, 31, 0.66), rgba(23, 52, 31, 0.05)),
    url("assets/life-baton-flyer-front-clean.png") center 32% / cover;
}
.baton-hero > div { width: min(1040px, 100%); margin: 0 auto; }
.baton-hero h1 { margin-bottom: 18px; font-size: clamp(42px, 7vw, 78px); line-height: 1.13; }
.baton-hero p:not(.eyebrow) { max-width: 760px; font-size: clamp(17px, 2vw, 21px); }

.baton-section { padding: clamp(76px, 9vw, 116px) clamp(20px, 5vw, 72px); }
.baton-soft { background: var(--green-100); }
.baton-heading { width: min(860px, 100%); margin: 0 auto 42px; text-align: center; }
.baton-heading h2 { font-size: clamp(34px, 5vw, 58px); }
#now .baton-heading h2 { font-size: clamp(15px, 3.2vw, 40px); white-space: nowrap; }

.baton-intro { display: grid; grid-template-columns: 1fr minmax(260px, 0.62fr); gap: clamp(30px, 6vw, 76px); width: min(1050px, 100%); margin: 0 auto; align-items: center; }
.baton-intro p { color: #45564a; font-size: 18px; }
.baton-intro figure, .emergence-card figure, .cycle-flyer { margin: 0; }
.baton-intro img { width: 100%; max-height: 610px; object-fit: contain; background: #fff; border-radius: 10px; box-shadow: var(--shadow); }
.baton-intro figcaption, .emergence-card figcaption, .cycle-flyer figcaption { padding-top: 9px; color: var(--muted); font-size: 13px; }
.baton-intro .certificate-thumb {
  float: right;
  width: min(250px, 46%);
  margin: 2px 0 16px 20px;
}
.baton-intro .certificate-thumb img {
  max-height: none;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(35, 64, 48, 0.12);
}
.baton-intro .certificate-thumb figcaption { padding-top: 6px; text-align: center; }
.name-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: min(820px, 100%); margin: 46px auto 0; }
.name-cards figure { margin: 0; padding: 12px; background: #f7f8ef; border: 1px solid var(--line); border-radius: 10px; }
.name-cards img { width: 100%; height: 260px; object-fit: cover; object-position: center; border-radius: 7px; }
.name-cards figcaption { padding: 10px 4px 2px; color: var(--green-900); font-size: 14px; font-weight: 800; text-align: center; }

.emergence-card { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 62px); width: min(1050px, 100%); margin: 0 auto; padding: clamp(25px, 4vw, 46px); background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); align-items: center; }
.emergence-card img { width: 100%; max-height: 480px; object-fit: cover; object-position: center 56%; border-radius: 10px; }
.emergence-card h3 { margin: 14px 0 16px; font-size: clamp(26px, 3.5vw, 40px); }
.emergence-card p:not(.project-status) { color: var(--muted); }
.project-status { display: inline-flex; margin: 0; padding: 6px 13px; color: var(--green-900); font-size: 13px; font-weight: 900; background: var(--yellow); border-radius: 999px; }

.baton-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; width: min(1100px, 100%); margin: 0 auto 46px; padding: 0; list-style: none; }
.baton-steps li { padding: 24px; background: #f7f8ef; border-top: 5px solid var(--orange); border-radius: 9px; }
.baton-steps span { display: block; margin-bottom: 12px; color: var(--orange); font-size: 24px; font-weight: 900; }
.baton-steps strong { color: var(--green-900); font-size: 18px; }
.baton-steps p { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.cycle-flyer { width: min(610px, 100%); margin: 0 auto; text-align: center; }
.cycle-flyer img { width: 100%; max-height: 820px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }

.baton-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.baton-links a { padding: 24px 18px; color: var(--green-900); font-weight: 900; text-align: center; background: var(--white); }

@media (max-width: 850px) {
  .baton-intro, .emergence-card { grid-template-columns: 1fr; }
  .baton-steps { grid-template-columns: repeat(2, 1fr); }
  .baton-intro figure { width: min(480px, 100%); margin: 0 auto; }
}

@media (max-width: 580px) {
  .detail-header .site-nav { display: none; }
  .baton-hero { min-height: 560px; }
  .baton-steps, .baton-links { grid-template-columns: 1fr; }
  .name-cards { grid-template-columns: 1fr; }
  .name-cards img { height: 230px; }
  .emergence-card { padding: 22px; }
  .baton-intro .certificate-thumb { float: none; width: min(300px, 100%); margin: 4px auto 20px; }
}