/* MVV — Figma 467:614. The 1440 × 1678 composition sits on the
   existing ABOUT US canvas; this stylesheet is loaded after about.css. */
.sfix-about .sfix-mvv {
  height: calc(1678 * var(--about-unit));
  min-height: 0;
  isolation: isolate;
  overflow: clip;
  border-radius: calc(100 * var(--about-unit)) calc(100 * var(--about-unit)) 0 0;
  color: #fff;
}
.sfix-about .sfix-mvv::before {
  display: none;
  content: none;
}
.sfix-about .sfix-mvv-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
  -webkit-mask-image: url(../preview/optimized/mvv-background-shape-v2-w2880-b912173812.webp);
  -webkit-mask-position: top center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: url(../preview/optimized/mvv-background-shape-v2-w2880-b912173812.webp);
  mask-position: top center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-mode: alpha;
  pointer-events: none;
}
.sfix-about .sfix-mvv-background-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.4;
  --mvv-background-tilt: 0.35deg;
  transform: scale(1.06);
  transform-origin: 50% 50%;
  animation: sfix-mvv-background-sway 24s ease-in-out infinite;
}
.sfix-about .sfix-mvv[data-mvv-background-active="false"] .sfix-mvv-background-photo {
  animation-play-state: paused;
}
.sfix-about .sfix-mvv-head {
  top: calc(113 * var(--about-unit));
  z-index: 2;
}
.sfix-about .sfix-mvv-diagram {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.sfix-about .sfix-mvv-diagram > article { position: absolute; }
.sfix-about .sfix-mvv-mission {
  top: calc(382 * var(--about-unit));
  left: calc(306 * var(--about-unit));
  width: calc(477 * var(--about-unit));
  height: calc(477 * var(--about-unit));
}
.sfix-about .sfix-mvv-vision {
  top: calc(560 * var(--about-unit));
  left: calc(683 * var(--about-unit));
  width: calc(554 * var(--about-unit));
  height: calc(554 * var(--about-unit));
}
.sfix-about .sfix-mvv-value {
  top: calc(810 * var(--about-unit));
  left: calc(233 * var(--about-unit));
  width: calc(680 * var(--about-unit));
  height: calc(619 * var(--about-unit));
}
.sfix-about .sfix-mvv-circle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.sfix-about .sfix-mvv-mission .sfix-mvv-circle { width: calc(477 * var(--about-unit)); }
.sfix-about .sfix-mvv-vision .sfix-mvv-circle { width: calc(554 * var(--about-unit)); }
.sfix-about .sfix-mvv-value .sfix-mvv-circle {
  top: calc(5 * var(--about-unit));
  left: 0;
  width: calc(568 * var(--about-unit));
}
.sfix-about .sfix-mvv-copy {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%;
  margin: 0;
  font-size: calc(28 * var(--about-unit));
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
}
.sfix-about .sfix-mvv-mission .sfix-mvv-copy {
  top: calc(123 * var(--about-unit));
  font-size: calc(28 * var(--about-unit));
}
.sfix-about .sfix-mvv-vision .sfix-mvv-copy {
  top: calc(141 * var(--about-unit));
  left: calc(0.5 * var(--about-unit));
  font-size: calc(28 * var(--about-unit));
  font-weight: 400;
}
.sfix-about .sfix-mvv-label {
  position: absolute;
  z-index: 2;
  width: fit-content;
  margin: 0;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-size: calc(100 * var(--about-unit));
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sfix-about .sfix-mvv-mission .sfix-mvv-label {
  top: calc(239 * var(--about-unit));
  left: calc(-167 * var(--about-unit));
  letter-spacing: 0;
  background-image: linear-gradient(268.7230773714151deg, rgb(140, 80, 15) 0.41322%, rgb(255, 198, 137) 50.477%, rgb(242, 138, 26) 99.587%);
}
.sfix-about .sfix-mvv-vision .sfix-mvv-label {
  top: calc(348 * var(--about-unit));
  left: calc(277 * var(--about-unit));
  background-image: linear-gradient(269.54783762121224deg, rgb(129, 51, 75) 0.17959%, rgb(255, 169, 196) 48.084%, rgb(231, 91, 134) 99.82%);
}
.sfix-about .sfix-mvv-value .sfix-mvv-label {
  top: calc(407 * var(--about-unit));
  left: calc(342 * var(--about-unit));
  background-image: linear-gradient(89.93964355215637deg, rgb(24, 175, 168) 0%, rgb(164, 255, 251) 49.039%, rgb(10, 73, 70) 99.974%);
}
.sfix-about .sfix-mvv-values {
  position: absolute;
  top: calc(125 * var(--about-unit));
  left: calc(122 * var(--about-unit));
  z-index: 1;
  display: grid;
  gap: 0;
  width: calc(324 * var(--about-unit));
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: calc(24 * var(--about-unit));
  font-weight: 400;
  line-height: calc(43 * var(--about-unit));
  letter-spacing: calc(1.92 * var(--about-unit));
  white-space: nowrap;
}
.sfix-about .sfix-mvv-values li { display: block; }
/* Keep the source's single space for 0/1 and double space for 2–5. */
.sfix-about .sfix-mvv-values li:nth-child(n + 3) > span:last-child::before {
  content: " ";
  white-space: pre;
}
.sfix-about .sfix-mvv-value-number {
  color: #18afa8;
  font-size: inherit;
  line-height: inherit;
}

/* Cards are in normal flow on smaller screens. Each SVG and its copy share
   one grid cell, retaining the original circle proportions without offsets. */
@media (max-width: 1000px) {
  .sfix-about .sfix-mvv {
    height: auto;
    min-height: 0;
    /* Keep the last circle above the mask's highest diagonal cut. */
    padding-bottom: clamp(180px, 45vw, 280px);
  }
  .sfix-about .sfix-mvv-background-photo { --mvv-background-tilt: 0.15deg; }
  .sfix-about .sfix-mvv-head { top: auto; }
  .sfix-about .sfix-mvv-diagram {
    position: relative;
    inset: auto;
    display: grid;
    gap: clamp(48px, 6.4vw, 64px);
    width: calc(100% - 2 * var(--about-gutter));
    max-width: 640px;
    margin: 8px auto 0;
  }
  .sfix-about .sfix-mvv-diagram > article {
    position: relative;
    top: auto;
    left: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "label" "circle";
    gap: 16px;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .sfix-about .sfix-mvv-mission { max-width: 500px; }
  .sfix-about .sfix-mvv-vision { max-width: 560px; }
  .sfix-about .sfix-mvv-value { max-width: 568px; }
  .sfix-about .sfix-mvv-diagram .sfix-mvv-circle {
    position: static;
    grid-area: circle;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .sfix-about .sfix-mvv-diagram .sfix-mvv-label {
    position: static;
    grid-area: label;
    justify-self: center;
    font-size: clamp(36px, 8vw, 56px);
    line-height: 1.2;
    text-align: center;
  }
  .sfix-about .sfix-mvv-diagram .sfix-mvv-copy {
    position: static;
    grid-area: circle;
    align-self: center;
    justify-self: center;
    width: 88%;
    font-size: clamp(18px, 3.3vw, 24px);
    line-height: 1.8;
    white-space: normal;
  }
  .sfix-about .sfix-mvv-mission .sfix-mvv-copy { font-size: clamp(20px, 4.5vw, 28px); }
  .sfix-about .sfix-mvv-vision .sfix-mvv-copy { font-size: clamp(16px, 2.8vw, 21px); }
  .sfix-about .sfix-mvv-values {
    position: static;
    grid-area: circle;
    align-self: center;
    justify-self: center;
    width: 80%;
    font-size: clamp(14px, 2.4vw, 18px);
    line-height: 1.8;
    letter-spacing: 0.04em;
    white-space: normal;
  }
  .sfix-about .sfix-mvv-value-number { font-size: inherit; }
  .sfix-about .sfix-mvv-values li > span:last-child { min-width: 0; }
}


/* User-directed motion: quick turns draw the rings, then their gradients
   keep circulating gently. Layout and copy stay stationary. */
.sfix-about .sfix-mvv-mission {
  --mvv-draw-offset: 1;
  --mvv-draw-duration: 2.4s;
  --mvv-draw-delay: 0s;
  --mvv-start-angle: 720deg;
  --mvv-idle-angle: -360deg;
  --mvv-idle-duration: 24s;
}
.sfix-about .sfix-mvv-vision {
  --mvv-draw-offset: -1;
  --mvv-draw-duration: 2.6s;
  --mvv-draw-delay: 0.16s;
  --mvv-start-angle: -540deg;
  --mvv-idle-angle: 360deg;
  --mvv-idle-duration: 28s;
}
.sfix-about .sfix-mvv-value {
  --mvv-draw-offset: 1;
  --mvv-draw-duration: 2.8s;
  --mvv-draw-delay: 0.32s;
  --mvv-start-angle: 810deg;
  --mvv-idle-angle: -360deg;
  --mvv-idle-duration: 32s;
}
.sfix-about .sfix-mvv-spin {
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.sfix-about .sfix-mvv-stroke {
  stroke-linecap: round;
}
.sfix-about .sfix-mvv-circle[data-mvv-motion="pending"] .sfix-mvv-spin {
  transform: rotate(var(--mvv-start-angle));
}
.sfix-about .sfix-mvv-circle[data-mvv-motion="pending"] .sfix-mvv-stroke {
  opacity: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: var(--mvv-draw-offset);
}
.sfix-about .sfix-mvv-circle[data-mvv-motion="running"] .sfix-mvv-spin {
  animation:
    sfix-mvv-turn-in var(--mvv-draw-duration) cubic-bezier(0.16, 0.65, 0.28, 1) var(--mvv-draw-delay) both,
    sfix-mvv-circulate var(--mvv-idle-duration) linear calc(var(--mvv-draw-duration) + var(--mvv-draw-delay)) infinite;
}
.sfix-about .sfix-mvv-circle[data-mvv-motion="running"] .sfix-mvv-stroke {
  stroke-dasharray: 1;
  animation: sfix-mvv-draw var(--mvv-draw-duration) cubic-bezier(0.3, 0, 0.2, 1) var(--mvv-draw-delay) both;
}
.sfix-about .sfix-mvv-circle[data-mvv-motion="done"] .sfix-mvv-spin {
  animation: sfix-mvv-circulate var(--mvv-idle-duration) linear infinite;
}
.sfix-about .sfix-mvv-circle[data-mvv-in-view="false"] .sfix-mvv-spin,
.sfix-about .sfix-mvv-circle[data-mvv-in-view="false"] .sfix-mvv-stroke {
  animation-play-state: paused;
}
@keyframes sfix-mvv-turn-in {
  from { transform: rotate(var(--mvv-start-angle)); }
  to { transform: rotate(0deg); }
}
@keyframes sfix-mvv-draw {
  0% { opacity: 0; stroke-dashoffset: var(--mvv-draw-offset); }
  4% { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes sfix-mvv-circulate {
  from { transform: rotate(0deg); }
  to { transform: rotate(var(--mvv-idle-angle)); }
}
/* Drift the photo inside its stationary crop, with enough overscan at
   every point to cover the corners as it tilts. The cycle closes exactly. */
@keyframes sfix-mvv-background-sway {
  0%, 100% {
    transform: translate3d(-0.7%, -0.35%, 0) rotate(calc(-1 * var(--mvv-background-tilt))) scale(1.06);
  }
  25% {
    transform: translate3d(0.35%, -0.6%, 0) rotate(calc(0.35 * var(--mvv-background-tilt))) scale(1.07);
  }
  50% {
    transform: translate3d(0.7%, 0.4%, 0) rotate(var(--mvv-background-tilt)) scale(1.06);
  }
  75% {
    transform: translate3d(-0.2%, 0.6%, 0) rotate(calc(-0.28 * var(--mvv-background-tilt))) scale(1.07);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sfix-about .sfix-mvv-background-photo {
    animation: none;
    transform: none;
  }
  .sfix-about .sfix-mvv-diagram .sfix-mvv-circle .sfix-mvv-spin {
    animation: none;
    transform: none;
  }
  .sfix-about .sfix-mvv-diagram .sfix-mvv-circle .sfix-mvv-stroke {
    animation: none;
    opacity: 1;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}