.section-opener-page.v4-page {
  --section-header-height: 80px;
  --section-opener-fill: #f3f7fd;
  --section-opener-title-size: clamp(32px, calc(7.9167vw - 82px), 70px);
  min-height: 100dvh;
  overflow: hidden;
  background: var(--section-opener-fill);
}

.section-opener-page .v4-section {
  text-decoration: none;
}

.section-opener-menu-link {
  cursor: pointer;
  text-decoration: none;
}

.section-opener-menu-link:focus-visible {
  border-radius: 4px;
  outline: 3px solid rgba(24, 77, 152, 0.24);
  outline-offset: 5px;
}

.section-opener-main {
  position: relative;
  width: 100%;
  height: calc(100dvh - var(--section-header-height));
  min-height: 680px;
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 62%);
  grid-template-areas: "copy visual";
  overflow: hidden;
  background: var(--section-opener-fill);
  isolation: isolate;
}

.section-opener-copy {
  position: static;
  z-index: 2;
  grid-area: copy;
  min-width: 0;
  padding: clamp(86px, 10vh, 130px) clamp(32px, 3.2vw, 62px) 72px clamp(58px, 5vw, 96px);
  align-self: start;
}

.section-opener-number {
  position: absolute;
  z-index: 0;
  top: clamp(24px, 3.7vh, 48px);
  right: clamp(24px, 3vw, 58px);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-report-display);
  font-size: clamp(128px, 12.8vw, 246px);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.06em;
  user-select: none;
}

.section-opener-page.v4-page .section-opener-title {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0;
  color: var(--v4-blue);
  font-family: var(--font-report-display);
  font-size: var(--section-opener-title-size) !important;
  font-weight: 700;
  line-height: 1.06 !important;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}

.section-opener-list {
  --report-bullet-marker-size: var(--approved-type-body-size);
  --report-bullet-marker-first-line-offset: calc((1lh - var(--report-bullet-marker-size)) / 2);
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: clamp(58px, 7vh, 86px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(18px, 2.2vh, 27px);
  list-style: none;
}

.section-opener-list li {
  min-width: 0;
  color: var(--v4-ink);
  font-family: var(--font-report-body);
  font-size: clamp(21px, 1.45vw, 28px);
  font-weight: 400;
  line-height: 1.26;
}

@media (min-width: 50.01rem) {
  .section-opener-list--full-toc {
    margin-top: clamp(36px, 4.4vh, 52px);
    gap: 12px;
  }

  .section-opener-list--full-toc li {
    font-family: var(--approved-type-body-family);
    font-size: var(--approved-type-body-size);
    font-weight: var(--approved-type-body-weight);
    line-height: var(--approved-type-body-leading);
  }
}

.section-opener-list__link,
.section-opener-list__item {
  position: relative;
  width: fit-content;
  max-width: 100%;
  display: grid;
  grid-template-columns: var(--report-bullet-marker-size) minmax(0, 1fr);
  align-items: start;
  gap: clamp(13px, 1.1vw, 20px);
}

.section-opener-list__link img,
.section-opener-list__item img {
  display: block;
}

.section-opener-list__link {
  padding-bottom: 8px;
  margin-bottom: -8px;
  color: inherit;
  text-decoration: none;
}

.section-opener-list__link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: calc(var(--report-bullet-marker-size) + clamp(13px, 1.1vw, 20px));
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--v4-orange), rgba(233, 78, 15, 0.28));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.section-opener-list__link img {
  transform-origin: center;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.section-opener-list__link:hover::after,
.section-opener-list__link:focus-visible::after {
  transform: scaleX(1);
}

.section-opener-list__link:hover img,
.section-opener-list__link:focus-visible img {
  transform: translate(2px, -2px) scale(1.06);
}

.section-opener-list__link:focus-visible {
  border-radius: 4px;
  outline: 3px solid rgba(24, 77, 152, 0.24);
  outline-offset: 5px;
}

.section-opener-visual {
  position: relative;
  z-index: 1;
  grid-area: visual;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: visible;
}

.section-opener-visual-art {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: min(122%, calc(170dvh - 136px));
  aspect-ratio: 1662 / 946;
  display: block;
  background-color: var(--section-opener-fill);
  background-image: url("/assets/review/03582f90d53f/01_2-left-lines-cleaned-v1.webp");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 100% 100%;
  background-blend-mode: multiply;
}

/*
 * The section-opener pulse intentionally reuses the approved cover motion:
 * the same source-derived alpha is rendered as a soft halo and a narrow bright
 * core, while a vertical reveal window travels from the lower board to the
 * upper/right routes. No synthetic path is drawn outside the approved mask.
 */
.section-opener-energy-wave {
  --v4-energy-wave-opacity: 0.8;
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: min(122%, calc(170dvh - 136px));
  aspect-ratio: 1662 / 946;
  display: block;
  object-fit: fill;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 16%;
  mask-size: 100% 16%;
  -webkit-mask-position: 50% 122%;
  mask-position: 50% 122%;
  will-change: opacity, -webkit-mask-position, mask-position;
  animation: v4-cover-energy-mask-wave 8.4s linear 620ms infinite both;
}

.section-opener-energy-wave--halo {
  --v4-energy-wave-opacity: 0.68;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.18) 14%, #000 42%, #000 58%, rgba(0, 0, 0, 0.18) 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.18) 14%, #000 42%, #000 58%, rgba(0, 0, 0, 0.18) 86%, transparent 100%);
  filter: sepia(1) saturate(4.2) hue-rotate(342deg) brightness(1.12) drop-shadow(0 0 9px rgba(255, 151, 35, 0.92));
}

.section-opener-energy-wave--core {
  --v4-energy-wave-opacity: 0.96;
  z-index: 3;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 35%, rgba(0, 0, 0, 0.42) 43%, #000 48%, #000 52%, rgba(0, 0, 0, 0.42) 57%, transparent 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 35%, rgba(0, 0, 0, 0.42) 43%, #000 48%, #000 52%, rgba(0, 0, 0, 0.42) 57%, transparent 65%, transparent 100%);
  filter: brightness(1.32) contrast(1.08) drop-shadow(0 0 4px rgba(255, 246, 190, 0.96));
}

@media (max-width: 86rem) {
  .section-opener-main {
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  }

  .section-opener-copy {
    padding: 72px 34px 64px 46px;
  }

  .section-opener-title {
    font-size: var(--section-opener-title-size) !important;
  }

  .section-opener-list {
    margin-top: 52px;
    gap: 17px;
  }

  .section-opener-list li {
    font-size: clamp(18px, 1.55vw, 22px);
  }

  .section-opener-visual-art {
    width: min(124%, calc(170dvh - 136px));
  }

  .section-opener-energy-wave {
    width: min(124%, calc(170dvh - 136px));
  }

}

@media (max-width: 68.75rem) {
  .section-opener-page.v4-page {
    --section-header-height: 72px;
  }

  .section-opener-main {
    min-height: 620px;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  }

  .section-opener-copy {
    padding: 58px 28px 58px 34px;
  }

  .section-opener-number {
    font-size: clamp(110px, 15vw, 168px);
  }

  .section-opener-title {
    font-size: var(--section-opener-title-size) !important;
  }

  .section-opener-list {
    margin-top: 42px;
    gap: 15px;
  }

  .section-opener-list li {
    font-size: clamp(17px, 1.95vw, 21px);
  }

  .section-opener-visual-art {
    width: min(128%, calc(170dvh - 122px));
  }

  .section-opener-energy-wave {
    width: min(128%, calc(170dvh - 122px));
  }
}

/*
 * Unified notebook profile for all six report section openers. At 2K/4K the
 * approved desktop composition remains unchanged; on 1200–1600 px canvases
 * the chapter title uses one compact line and the TOC stays inside one safe
 * left rail instead of entering the meaningful part of the illustration.
 */
@media (min-width: 75rem) and (max-width: 100rem) {
  .section-opener-page.v4-page .section-opener-main {
    grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  }

  .section-opener-page.v4-page .section-opener-copy {
    width: 100%;
    padding: clamp(58px, 7vh, 72px) 34px 56px clamp(46px, 4vw, 62px);
  }

  .section-opener-page.v4-page .section-opener-title {
    width: max-content;
    max-width: 72vw;
    margin-right: 0;
    font-size: var(--section-opener-title-size) !important;
    line-height: 1 !important;
    white-space: nowrap;
  }

  .section-opener-page.v4-page .section-opener-list {
    max-width: min(38vw, 560px);
    margin-top: clamp(32px, 4.5vh, 44px);
    gap: clamp(8px, 1vh, 12px);
  }

  .section-opener-page.v4-page .section-opener-list li {
    font-family: var(--approved-type-body-family);
    font-size: var(--approved-type-body-size);
    font-weight: var(--approved-type-body-weight);
    line-height: var(--approved-type-body-leading);
  }

  .section-opener-page.v4-page.esg-management-section-opener-page .esg-management-title-line {
    display: inline;
  }
}

@media (max-width: 50rem) {
  .section-opener-page.v4-page {
    --section-header-height: 68px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .section-opener-main {
    height: auto;
    min-height: calc(100dvh - var(--section-header-height));
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .section-opener-copy {
    position: relative;
    width: 100%;
    padding: 58px clamp(24px, 7vw, 52px) 42px;
  }

  .section-opener-number {
    top: 22px;
    right: 20px;
    font-size: clamp(104px, 30vw, 164px);
  }

  .section-opener-title {
    max-width: 82%;
    font-size: clamp(37px, 9.4vw, 56px);
  }

  .section-opener-list {
    max-width: none;
    margin-top: 42px;
    gap: 18px;
  }

  .section-opener-list__link,
  .section-opener-list__item {
    grid-template-columns: var(--report-bullet-marker-size) minmax(0, 1fr);
    gap: 14px;
  }

  .section-opener-list li {
    font-size: clamp(18px, 4.7vw, 23px);
  }

  .section-opener-list__link::after {
    left: calc(var(--report-bullet-marker-size) + 14px);
  }

  .section-opener-visual {
    width: 100%;
    height: clamp(360px, 73vw, 570px);
    flex: none;
  }

  .section-opener-visual-art {
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    background-size: contain;
  }

  .section-opener-energy-wave {
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: right bottom;
  }
}

@media (max-width: 30rem) {
  .section-opener-copy {
    padding-right: 20px;
    padding-left: 20px;
  }

  .section-opener-title {
    max-width: 88%;
    font-size: clamp(34px, 10vw, 46px);
  }

  .section-opener-list li {
    font-size: clamp(17px, 4.8vw, 21px);
  }

  .section-opener-visual {
    height: clamp(330px, 82vw, 460px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-opener-energy-wave {
    display: none;
    animation: none;
  }

  .section-opener-page * {
    scroll-behavior: auto;
  }

  .section-opener-list__link::after,
  .section-opener-list__link img {
    transition: none;
  }
}