/* Vision & Mission — aligned with the existing TEBP design system. */

.vm-page {
  --vm-blue: var(--primary);
  --vm-ink: var(--black-tebp);
  --vm-muted: var(--p-text);
  --vm-line: color-mix(in srgb, var(--p-text) 18%, transparent);
  padding: 0;
  overflow: clip;
  background: var(--background);
}

.vm-page .vision-mission-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.vm-page .card-header-custom {
  margin: 0;
}

/* Vision */
.vm-page .vision-card {
  position: relative;
  isolation: isolate;
  margin: 0 0 72px;
  padding: clamp(30px, 4vw, 48px);
  overflow: hidden;
  color: var(--vm-ink);
  border: 1px solid #f0f0f0;
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--secondary) 42%, var(--background)) 0%,
      color-mix(in srgb, var(--secondary) 64%, var(--white)) 46%,
      color-mix(in srgb, var(--secondary) 28%, var(--background)) 100%
    );
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.vm-page .vision-card::before,
.vm-page .vision-card::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.vm-page .vision-card::before {
  z-index: -2;
  inset: -58% -24%;
  background:
    radial-gradient(ellipse 48% 35% at 18% 30%, color-mix(in srgb, var(--white) 90%, transparent) 0 24%, transparent 70%),
    radial-gradient(ellipse 52% 38% at 78% 25%, color-mix(in srgb, var(--primary) 20%, var(--secondary)) 0 20%, transparent 68%),
    radial-gradient(ellipse 50% 42% at 58% 76%, color-mix(in srgb, var(--white) 82%, var(--secondary)) 0 22%, transparent 72%),
    radial-gradient(ellipse 62% 48% at 24% 82%, color-mix(in srgb, var(--secondary) 78%, var(--white)) 0 24%, transparent 74%);
  filter: blur(26px) saturate(108%);
  transform-origin: 50% 50%;
  will-change: transform;
  animation: vm-efin-flow-main 16s cubic-bezier(0.45, 0.05, 0.2, 1) infinite alternate;
}

.vm-page .vision-card::after {
  z-index: -1;
  inset: -20% -18% -52%;
  background:
    radial-gradient(ellipse 58% 42% at 20% 62%, color-mix(in srgb, var(--background) 86%, transparent) 0 30%, transparent 72%),
    radial-gradient(ellipse 50% 40% at 76% 50%, color-mix(in srgb, var(--white) 74%, transparent) 0 26%, transparent 70%),
    radial-gradient(ellipse 72% 54% at 50% 100%, color-mix(in srgb, var(--primary) 14%, var(--secondary)) 0 30%, transparent 74%);
  filter: blur(34px);
  opacity: 0.86;
  transform-origin: 50% 70%;
  will-change: transform;
  animation: vm-efin-flow-soft 12s cubic-bezier(0.4, 0, 0.25, 1) infinite alternate;
}

.vm-page .vision-card > * {
  position: relative;
  z-index: 1;
}

@keyframes vm-efin-flow-main {
  0% {
    transform: translate3d(-3%, -2%, 0) rotate(-2deg) scale(1.02, 0.98);
  }

  42% {
    transform: translate3d(4%, 3%, 0) rotate(1.5deg) scale(1.08, 1.03);
  }

  72% {
    transform: translate3d(-1%, 6%, 0) rotate(3deg) scale(1.04, 1.1);
  }

  100% {
    transform: translate3d(5%, -1%, 0) rotate(-1deg) scale(1.1, 1.02);
  }
}

@keyframes vm-efin-flow-soft {
  0% {
    transform: translate3d(4%, 2%, 0) rotate(1deg) scale(1.04, 1);
  }

  50% {
    transform: translate3d(-5%, -5%, 0) rotate(-2deg) scale(1.12, 1.08);
  }

  100% {
    transform: translate3d(2%, -9%, 0) rotate(2deg) scale(1.06, 1.14);
  }
}

.vm-page .vm-vision-head {
  display: flex;
  margin: 0 0 30px;
  align-items: flex-start;
  justify-content: space-between;
}

.vm-page .section-title {
  margin: 0;
  color: var(--vm-ink);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
}

.vm-page .section-title.primary--color {
  color: var(--primary);
}

.vm-page .vm-vision-head .section-title {
  font-size: var(--size36);
  line-height: 48px;
}

.vm-page .vision-content {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(260px, 4fr);
  text-align: left;
  border-top: 1px solid var(--vm-line);
}

.vm-page .vision-copy {
  display: flex;
  min-width: 0;
  padding: 48px 56px 48px 0;
  flex-direction: column;
  justify-content: center;
}

.vm-page .vision-quote {
  max-width: 720px;
  margin: 0;
  color: var(--black-tebp);
  background: linear-gradient(
    131deg,
    var(--black-tebp) 0%,
    var(--primary-hover) 56%,
    var(--primary) 78%,
    var(--secondary) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 32px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -0.015em;
  text-wrap: balance;
  -webkit-text-fill-color: transparent;
}

.vm-page .vision-quote-en {
  max-width: 600px;
  margin: 24px 0 0;
  color: var(--p-text);
  font-size: var(--size18);
  font-weight: 500;
  line-height: 32px;
  text-wrap: balance;
}

.vm-page .vision-targets {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  margin-top: 32px;
  border-left: 1px solid var(--vm-line);
}

.vm-page .vision-target {
  display: flex;
  min-height: 148px;
  padding: 32px 0 32px 40px;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: center;
}

.vm-page .vision-target + .vision-target {
  border-top: 1px solid var(--vm-line);
}

.vm-page .vision-target-label {
  color: var(--vm-muted);
  font-size: var(--size14);
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.02em;
}

.vm-page .vision-target strong {
  color: var(--vm-blue);
  font-size: var(--size48);
  font-weight: 600;
  line-height: 56px;
  letter-spacing: -0.03em;
}

.vm-page .vision-target:last-child strong {
  color: var(--primary-hover);
}

/* Mission modular grid */
.vm-page .mission-card {
    margin: 0;
    padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.vm-page .mission-overview {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 88px);
  margin: 0 0 clamp(40px, 5vw, 64px);
  padding: 0;
  border-top: 0;
}

.vm-page .mission-heading-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.vm-page .mission-heading-row .section-title {
  margin: 0;
  font-size: var(--size36);
  font-weight: 600;
  line-height: 48px;
  letter-spacing: normal;
}

.vm-page .mission-intro {
  margin: 0;
  padding: 0;
  border-radius: 0;
}

.vm-page .mission-intro p {
  max-width: 790px;
  margin: 0;
  color: var(--p-text);
  font-size: var(--size18);
  font-weight: 400;
  line-height: 32px;
}

.vm-page .mission-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 0;
  background: transparent;
}

.vm-page .mission-item {
  --mission-icon-color: var(--primary);
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 470px;
  margin: 0;
  padding: 32px;
  overflow: hidden;
  flex-direction: column;
  color: var(--vm-ink);
  border: 1px solid #f0f0f0;
  border-radius: 24px;
  background: var(--white);
}

/* Decorative Material Symbols Rounded icons from Iconify (Apache 2.0).
   Filled, rounded shapes match the icon language used across the site.
   SVG assets are stored locally in images/icon. */
.vm-page .mission-item::after {
  position: absolute;
  z-index: 0;
  top: 28px;
  right: 28px;
  width: 88px;
  height: 88px;
  content: "";
  pointer-events: none;
  opacity: 0.09;
  background-color: var(--mission-icon-color);
  -webkit-mask: var(--mission-icon) center / contain no-repeat;
  mask: var(--mission-icon) center / contain no-repeat;
  transform-origin: center;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vm-page .mission-item > * {
  position: relative;
  z-index: 1;
}

.vm-page .mission-item:nth-child(1) {
  --mission-icon: url("../images/icon/mission-organic-waste.svg");
  --mission-icon-color: var(--white);
}

.vm-page .mission-item:nth-child(2) {
  --mission-icon: url("../images/icon/mission-growth.svg");
}

.vm-page .mission-item:nth-child(3) {
  --mission-icon: url("../images/icon/mission-clean-fuel.svg");
}

.vm-page .mission-item:nth-child(4) {
  --mission-icon: url("../images/icon/mission-innovation.svg");
}

.vm-page .mission-item:nth-child(5) {
  --mission-icon: url("../images/icon/mission-circular-economy.svg");
}

.vm-page .mission-item:nth-child(6) {
  --mission-icon: url("../images/icon/mission-biomaterials.svg");
}

.vm-page .mission-item:nth-child(7) {
  --mission-icon: url("../images/icon/mission-net-zero.svg");
}

.vm-page .mission-item:nth-child(8) {
  --mission-icon: url("../images/icon/mission-people.svg");
}

.vm-page .mission-item:nth-child(9) {
  --mission-icon: url("../images/icon/mission-governance.svg");
}

.vm-page .mission-number {
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 48px;
  align-items: initial;
  justify-content: initial;
  color: var(--vm-blue);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vm-page .mission-index {
  display: inline-block;
  font-size: var(--size48);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 56px;
  letter-spacing: -0.045em;
}

.vm-page .mission-text {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.vm-page .mission-text h4 {
  max-width: 400px;
  margin: 0;
  color: inherit;
  font-size: var(--size20);
  font-weight: 600;
  line-height: 32px;
  letter-spacing: normal;
}

.vm-page .mission-text p {
  max-width: 400px;
  margin: auto 0 0;
  padding-top: 32px;
  color: var(--p-text);
  font-size: var(--size18);
  font-weight: 400;
  line-height: 32px;
}

.vm-page .mission-item:nth-child(1) {
  color: var(--white);
  background: var(--vm-blue);
}

.vm-page .mission-item:nth-child(1) .mission-number,
.vm-page .mission-item:nth-child(1) .mission-text p {
  color: var(--white);
}

@media (hover: hover) and (pointer: fine) {
  .vm-page .mission-item:hover {
    --mission-icon-color: var(--white);
    color: var(--white);
    border-color: var(--primary-hover);
    background: var(--primary-hover);
  }

  .vm-page .mission-item:hover::after {
    opacity: 0.16;
    transform: rotate(-8deg) scale(1.12);
  }

  .vm-page .mission-item:hover .mission-number {
    color: var(--white);
    transform: translateY(-4px);
  }

  .vm-page .mission-item:hover .mission-text p {
    color: var(--white);
  }
}

@media (max-width: 1199.98px) {
  .vm-page .mission-item {
    min-height: 500px;
    padding: 32px;
  }
}

@media (max-width: 991.98px) {
  .vm-page .vision-content {
    grid-template-columns: minmax(0, 7fr) minmax(230px, 5fr);
  }

  .vm-page .vision-copy {
    padding-right: 32px;
  }

  .vm-page .mission-overview {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .vm-page .mission-intro {
    max-width: 800px;
  }

  .vm-page .mission-intro p,
  .vm-page .mission-text p {
    font-size: var(--size16);
    line-height: 24px;
  }

  .vm-page .mission-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vm-page .mission-item {
    min-height: 460px;
  }
}

@media (max-width: 767.98px) {
  .vm-page .vision-card {
    margin-bottom: 64px;
    padding: 24px;
    border-radius: 18px;
  }

  .vm-page .vm-vision-head {
    margin-bottom: 22px;
  }

  .vm-page .section-title {
    font-size: 21px;
  }

  .vm-page .vm-vision-head .section-title {
    font-size: 28px;
    line-height: 40px;
  }

  .vm-page .vision-content {
    grid-template-columns: 1fr;
  }

  .vm-page .vision-copy {
    padding: 32px 0;
  }

  .vm-page .vision-quote {
    font-size: 28px;
    line-height: 40px;
  }

  .vm-page .vision-quote-en {
    margin-top: 24px;
    font-size: 16px;
    line-height: 24px;
  }

  .vm-page .vision-targets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr;
    margin-top: 0;
    border-top: 1px solid var(--vm-line);
    border-left: 0;
  }

  .vm-page .vision-target {
    min-height: 132px;
    padding: 24px 16px 24px 0;
  }

  .vm-page .vision-target + .vision-target {
    padding-right: 0;
    padding-left: 24px;
    border-top: 0;
    border-left: 1px solid var(--vm-line);
  }

  .vm-page .vision-target strong {
    font-size: 40px;
    line-height: 48px;
  }

  .vm-page .mission-overview {
    gap: 32px;
    margin-bottom: 54px;
    padding-top: 0;
  }

  .vm-page .mission-heading-row .section-title {
    font-size: 28px;
    line-height: 40px;
  }

  .vm-page .mission-intro p {
    font-size: var(--size16);
    line-height: 24px;
  }

  .vm-page .mission-items {
    grid-template-columns: 1fr;
  }

  .vm-page .mission-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    min-height: 0;
    padding: 24px;
  }

  .vm-page .mission-number {
    margin: 0;
  }

  .vm-page .mission-index {
    font-size: 32px;
    line-height: 40px;
  }

  .vm-page .mission-text h4 {
    font-size: var(--size20);
    line-height: 32px;
  }

  .vm-page .mission-text p {
    margin-top: 24px;
    padding-top: 0;
    font-size: var(--size16);
    line-height: 24px;
  }
}

@media (max-width: 419.98px) {
  .vm-page .vision-targets {
    grid-template-columns: 1fr;
  }

  .vm-page .vision-target {
    padding: 20px 0;
  }

  .vm-page .vision-target + .vision-target {
    padding-left: 0;
    border-top: 1px solid var(--vm-line);
    border-left: 0;
  }

  .vm-page .mission-item {
    grid-template-columns: 48px minmax(0, 1fr);
    padding-right: 24px;
    padding-left: 24px;
  }
}

@media (max-width: 575.98px) {
  .vm-page .vision-quote {
    font-size: 24px;
    line-height: 32px;
  }

  .vm-page .vm-vision-head .section-title,
  .vm-page .mission-heading-row .section-title {
    font-size: 24px;
    line-height: 32px;
  }

  .vm-page .mission-intro p,
  .vm-page .mission-text p {
    font-size: var(--size14);
    line-height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vm-page .vision-card::before,
  .vm-page .vision-card::after {
    animation: none;
  }

  .vm-page .mission-item::after,
  .vm-page .mission-number {
    transition: none;
  }

  .vm-page .mission-item:hover::after,
  .vm-page .mission-item:hover .mission-number {
    transform: none;
  }
}