/* Shared Vision notation: the exponent is |∞|, as in the supplied artwork. */
.vision-word {
  white-space: nowrap;
  ruby-position: over;
  ruby-align: center;
}

.vision-word rt {
  font-size: max(0.24em, 0.625rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.6;
}

.vision-word__power {
  display: inline-block;
  margin-left: 0.04em;
  font-size: 0.44em;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0;
  vertical-align: super;
}

.mission-intro__phrase { white-space: nowrap; }

/* Match the Mission's reading column, while giving Vision its own breathing room. */
.vision-intro.company-section {
  padding: clamp(4rem, 7vw, 7rem) 0 clamp(4.5rem, 8vw, 8rem);
}

.vision-intro__inner {
  width: min(calc(100% - 2rem), 61rem);
}

.vision-intro__eyebrow {
  margin: 0 0 clamp(1.8rem, 3vw, 2.5rem);
}

.vision-intro__statement {
  max-width: 42rem;
  margin-top: clamp(2.8rem, 6vh, 5rem);
  text-wrap: pretty;
}

.vision-intro__statement p { margin: 0; }
.vision-intro__statement p + p { margin-top: 1.15em; }

/* The same left-to-right reveal and gentle rise used by the Mission. */
.vision-intro.is-vision-motion-ready [data-vision-write] {
  opacity: 0.06;
  clip-path: inset(-1rem 100% 0 0);
  transform: translateY(1rem);
  transition:
    clip-path var(--design-motion-slow, 900ms) cubic-bezier(0.2, 0.8, 0.25, 1),
    opacity var(--design-motion-medium, 640ms) ease,
    transform var(--design-motion-slow, 900ms) cubic-bezier(0.2, 0.8, 0.25, 1);
}

.vision-intro.is-vision-motion-ready [data-vision-write].is-vision-written {
  opacity: 1;
  clip-path: inset(-1rem 0 0 0);
  transform: translateY(0);
}

/* The original transparent artwork supplies only its silhouette as a CSS mask.
   Text stays live, selectable and responsive instead of being baked into a PNG. */
.mvv-diagram {
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
  container-type: inline-size;
  color: white;
}

.mvv-diagram::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 30% 65% at 14% 32%, #ff7230 10%, #ff5c59 70%, transparent 100%),
    radial-gradient(ellipse 29% 70% at 91% 80%, #ffdb50 10%, #ffa550 70%, transparent 100%),
    linear-gradient(100deg, #ff5c59 22%, #004882 47%, #087785 63%, #ffaa51 82%);
  -webkit-mask: url('../images/about/mvv.png') center / 100% 100% no-repeat;
  mask: url('../images/about/mvv.png') center / 100% 100% no-repeat;
  content: '';
}

.mvv-diagram__item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mvv-diagram__item--vision { top: 12%; left: 5%; width: 33%; }
.mvv-diagram__item--mission { top: 44%; left: 34%; width: 30%; }
.mvv-diagram__item--value { top: 48%; left: 65%; width: 32%; }

.mvv-diagram__label {
  margin: 0;
  border: 0.16cqw solid currentColor;
  border-radius: 1.25cqw;
  padding: 0.6cqw 2.3cqw;
  color: inherit;
  font-size: 1.5cqw;
  font-weight: 650;
  letter-spacing: 0.13em;
  line-height: 1.2;
}

.mvv-diagram__item p {
  margin: 2.5cqw 0 0;
  color: inherit;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.4;
  white-space: nowrap;
}

.mvv-diagram__item .mvv-diagram__vision { margin-top: 4cqw; font-size: 4cqw; }
.mvv-diagram__mission { font-size: 3.1cqw; }
.mvv-diagram__value { font-size: 2.55cqw; }

@media (width < 768px) {
  .mission-intro h1 { margin-inline: 0; white-space: normal; }
  .mission-intro__opening { display: block; }
  .mission-intro__statement { width: 100%; margin-inline: 0; }
  .mission-intro__line { text-wrap: pretty; }
  .vision-intro.company-section { padding: 3.5rem 0 4rem; }
  .vision-intro__statement { font-size: 0.8rem; letter-spacing: 0.045em; line-height: 2.05; }
  .mvv-diagram::before {
    background:
      radial-gradient(ellipse at 14% 12%, #ff4776 0%, #ff5d33 22%, transparent 43%),
      radial-gradient(ellipse at 52% 92%, #ffdc4e 0%, #f09a58 22%, transparent 46%),
      linear-gradient(135deg, #ed5771 10%, #004485 46%, #057e84 64%, #ffb452 90%);
    -webkit-mask-image: url('../images/about/mvv_phone.png');
    mask-image: url('../images/about/mvv_phone.png');
  }
  .mvv-diagram__item--vision { top: 5.3%; left: 12%; width: 63%; }
  .mvv-diagram__item--mission { top: 41.3%; left: 28%; width: 65%; }
  .mvv-diagram__item--value { top: 76.7%; left: 6%; width: 63%; }
  .mvv-diagram__label {
    border-width: 0.32cqw;
    border-radius: 2.5cqw;
    padding: 1.2cqw 4.6cqw;
    font-size: 3cqw;
  }
  .mvv-diagram__item p { margin-top: 5cqw; }
  .mvv-diagram__item .mvv-diagram__vision { margin-top: 9cqw; font-size: 9cqw; }
  .mvv-diagram__mission { font-size: 6.5cqw; }
  .mvv-diagram__value { font-size: 5.3cqw; }
}

@media (prefers-reduced-motion: reduce) {
  .mission-intro__gratitude { transition: none !important; }
  .vision-intro.is-vision-motion-ready [data-vision-write] {
    opacity: 1;
    clip-path: none;
    transform: none;
    transition: none;
  }
}

@media print {
  .vision-intro.is-vision-motion-ready [data-vision-write] {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
}