/* About page — Figma frame 47:801, 1920 × 6457 (header/footer excluded here). */

.mi-about-page {
  --mi-about-s: var(--mi-s);
  --mi-about-canvas: calc(1920px * var(--mi-about-s));
  width: 100%;
  margin-top: calc(-1 * var(--mi-header-height));
  overflow: clip;
  color: var(--mi-color-inverse);
  background: var(--mi-color-surface-dark);
}

.mi-about-page,
.mi-about-page button,
.mi-about-page a {
  font-family: var(--mi-font);
}

.mi-about-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mi-about-hero,
.mi-about-team,
.mi-about-process,
.mi-about-reviews,
.mi-about-gratitude,
.mi-about-cta {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.mi-about-hero__canvas,
.mi-about-team__canvas,
.mi-about-process__canvas,
.mi-about-reviews__canvas,
.mi-about-gratitude__canvas,
.mi-about-cta__canvas {
  position: relative;
  width: var(--mi-about-canvas);
  height: 100%;
  margin-inline: auto;
}

/* Hero — 47:899 / 47:900 */

.mi-about-hero {
  height: calc(1145px * var(--mi-about-s));
  isolation: isolate;
  background: linear-gradient(180deg, #8db5d5 0%, #abd3f3 100%);
}

.mi-about-hero::before,
.mi-about-hero::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.mi-about-hero::before {
  top: 0;
  height: calc(213px * var(--mi-about-s));
  background: linear-gradient(180deg, #4a7ca3 0%, rgba(150, 187, 217, 0) 100%);
}

.mi-about-hero::after {
  bottom: 0;
  /* Starts 40px earlier to retain the soft overlap after the statue offset. */
  height: calc(489px * var(--mi-about-s));
  /* Figma 47:909 — preserves the soft fade over the lower statue edges. */
  background: linear-gradient(
    to bottom,
    rgba(237, 245, 253, 0) 0%,
    rgba(237, 245, 253, 0.6) 43.096%,
    #edf5fd 85.768%
  );
}

.mi-about-hero__world {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
}

.mi-about-hero__statues {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  will-change: transform;
}

.mi-about-hero__cloud {
  position: absolute;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.mi-about-hero__cloud--left {
  left: calc(-374px * var(--mi-about-s));
  top: calc(299px * var(--mi-about-s));
  width: calc(1616px * var(--mi-about-s));
  height: calc(658px * var(--mi-about-s));
}

.mi-about-hero__cloud--right {
  left: calc(922px * var(--mi-about-s));
  top: calc(326px * var(--mi-about-s));
  width: calc(1345px * var(--mi-about-s));
  height: calc(548px * var(--mi-about-s));
  transform: scaleX(-1);
}

.mi-about-hero__cloud--bottom {
  left: calc(-41px * var(--mi-about-s));
  top: calc(499px * var(--mi-about-s));
  width: calc(2031px * var(--mi-about-s));
  height: calc(827px * var(--mi-about-s));
}

.mi-about-hero__statue {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  transform-origin: 50% 100%;
}

.mi-about-hero__statue img {
  width: 100%;
  max-width: none;
  height: auto;
}

.mi-about-hero__statue--left {
  left: calc(-84px * var(--mi-about-s));
  top: calc(417px * var(--mi-about-s));
  width: calc(757px * var(--mi-about-s));
  height: calc(688px * var(--mi-about-s));
}

.mi-about-hero__statue--left img {
  transform: rotateY(180deg);
}

.mi-about-hero__statue--center {
  left: calc(602px * var(--mi-about-s));
  top: calc(373px * var(--mi-about-s));
  width: calc(716px * var(--mi-about-s));
  height: calc(732px * var(--mi-about-s));
}

.mi-about-hero__statue--right {
  left: calc(1248px * var(--mi-about-s));
  top: calc(417px * var(--mi-about-s));
  width: calc(749px * var(--mi-about-s));
  height: calc(688px * var(--mi-about-s));
}

.mi-about-breadcrumb {
  position: absolute;
  z-index: 8;
  left: calc(100px * var(--mi-about-s));
  top: calc(84px * var(--mi-about-s));
  display: flex;
  align-items: center;
  gap: calc(16px * var(--mi-about-s));
  height: calc(24px * var(--mi-about-s));
  font-size: calc(16px * var(--mi-about-s));
  font-weight: 300;
  line-height: 1.5;
  color: #fff;
}

.mi-about-breadcrumb a {
  transition: opacity var(--mi-duration) var(--mi-ease);
}

.mi-about-breadcrumb a:hover {
  opacity: 0.72;
}

.mi-about-hero__title {
  position: absolute;
  z-index: 7;
  left: calc(512px * var(--mi-about-s));
  top: calc(188px * var(--mi-about-s));
  width: calc(897px * var(--mi-about-s));
  font-size: calc(88px * var(--mi-about-s));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-align: center;
  color: #fff;
}

.mi-about-hero__title-line {
  display: block;
  white-space: nowrap;
}

.mi-about-hero__title [data-about-hero-word] {
  display: inline-block;
  will-change: opacity, transform, filter;
}

.mi-js .mi-about-hero:not(.is-composed) .mi-about-hero__title [data-about-hero-word],
.mi-js .mi-about-hero:not(.is-composed) .mi-about-hero__statue {
  opacity: 0;
}

.mi-about-hero.is-composed .mi-about-hero__title [data-about-hero-word] {
  opacity: 0;
  transform: translate3d(0, -10px, 0);
  filter: blur(4px);
}

.mi-about-hero.is-composed .mi-about-hero__statue {
  opacity: 1;
}

/* Team — 47:892 */

.mi-about-team {
  height: calc(972px * var(--mi-about-s));
  color: var(--mi-color-surface-dark);
  background: var(--mi-color-surface-soft);
}

.mi-about-team__intro {
  position: absolute;
  left: calc(393px * var(--mi-about-s));
  top: calc(120px * var(--mi-about-s));
  width: calc(1134px * var(--mi-about-s));
  text-align: center;
}

.mi-about-team__title {
  font-size: calc(64px * var(--mi-about-s));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.mi-about-team__lead {
  width: calc(882px * var(--mi-about-s));
  margin: calc(40px * var(--mi-about-s)) auto 0;
  font-size: calc(20px * var(--mi-about-s));
  font-weight: 300;
  line-height: 1.5;
}

.mi-about-team__stage {
  position: absolute;
  inset: calc(440px * var(--mi-about-s)) 0 0;
  touch-action: pan-y;
}

.mi-about-team__role {
  position: absolute;
  top: 0;
  width: calc(440px * var(--mi-about-s));
  height: calc(410px * var(--mi-about-s));
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(calc(180px * var(--mi-about-s)), 0, 0) scale(0.88);
  transition:
    left 2s cubic-bezier(0.25, 0.1, 0.25, 1),
    top 2s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 2s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 2s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: left, top, opacity, transform;
}

.mi-about-team__role[data-state="active"],
html:not(.mi-js) .mi-about-team__role:first-child {
  left: calc(740px * var(--mi-about-s));
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.mi-about-team__role[data-state="next"],
html:not(.mi-js) .mi-about-team__role:nth-child(2) {
  left: calc(1316px * var(--mi-about-s));
  top: calc(108px * var(--mi-about-s));
  opacity: 1;
  transform: none;
}

.mi-about-team__role[data-state="previous"] {
  left: calc(164px * var(--mi-about-s));
  top: calc(108px * var(--mi-about-s));
  opacity: 0.42;
  transform: none;
}

.mi-about-team:not(.is-running) .mi-about-team__role[data-state="previous"] {
  opacity: 0;
}

.mi-about-team__role-media {
  position: absolute;
  left: 50%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(384px * var(--mi-about-s));
  height: calc(244px * var(--mi-about-s));
  opacity: 0;
  transform: translateX(-50%) scale(0.62) rotate(-8deg);
  transform-origin: 50% 55%;
  transition:
    opacity 2s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 2s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: opacity, transform;
}

.mi-about-team__role-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mi-about-team__role-copy {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transition: top 2s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: top;
}

.mi-about-team__role[data-state="active"] .mi-about-team__role-media {
  opacity: 1;
  transform: translateX(-50%) scale(1) rotate(0deg);
}

.mi-about-team__role[data-state="previous"] .mi-about-team__role-media {
  transform: translateX(-50%) scale(0.62) rotate(8deg);
}

.mi-about-team__role[data-state="active"] .mi-about-team__role-copy {
  top: calc(264px * var(--mi-about-s));
}

.mi-about-team__role h3 {
  margin: 0;
  font-size: calc(40px * var(--mi-about-s));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.mi-about-team__role-description {
  margin-top: calc(10px * var(--mi-about-s));
  font-size: calc(20px * var(--mi-about-s));
  font-weight: 300;
  line-height: 1.5;
}

.mi-about-team__role-description > :first-child {
  margin-top: 0;
}

.mi-about-team__role-description > :last-child {
  margin-bottom: 0;
}

/* Idea / process — 47:829 */

.mi-about-process {
  height: calc(1124px * var(--mi-about-s));
  isolation: isolate;
  color: #fff;
  background: var(--mi-color-surface-dark);
}

.mi-about-process::before {
  content: "";
  position: absolute;
  /* Figma 47:883 — desktop bottom-gradient layer. */
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(745px * var(--mi-about-s));
  height: calc(379px * var(--mi-about-s));
  background: linear-gradient(
    to bottom,
    rgba(17, 35, 49, 0) 0%,
    rgba(17, 35, 49, 0.7) 53.739%,
    #112331 100%
  );
  pointer-events: none;
}

.mi-about-process__title {
  position: absolute;
  z-index: 7;
  left: calc(389px * var(--mi-about-s));
  top: calc(120px * var(--mi-about-s));
  width: calc(1142px * var(--mi-about-s));
  font-size: calc(88px * var(--mi-about-s));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-align: center;
  white-space: nowrap;
}

.mi-about-process__path {
  position: absolute;
  z-index: 0;
  left: calc(199px * var(--mi-about-s));
  top: calc(376px * var(--mi-about-s));
  width: calc(1522px * var(--mi-about-s));
  height: calc(883px * var(--mi-about-s));
  pointer-events: none;
}

.mi-about-process__ghost {
  position: absolute;
  z-index: 1;
  left: calc(682px * var(--mi-about-s));
  top: calc(432px * var(--mi-about-s));
  width: calc(556px * var(--mi-about-s));
  height: calc(267px * var(--mi-about-s));
  font-size: calc(240px * var(--mi-about-s));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.055em;
  text-align: center;
  color: rgba(67, 133, 187, 0.22);
  pointer-events: none;
  transform-origin: 50% 54%;
}

.mi-about-process__steps {
  position: absolute;
  z-index: 5;
  inset: 0;
}

.mi-about-process__step {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8px * var(--mi-about-s));
  width: calc(312px * var(--mi-about-s));
  height: calc(95px * var(--mi-about-s));
  font-size: calc(40px * var(--mi-about-s));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 calc(28px * var(--mi-about-s)) rgba(67, 133, 187, 0.55);
  transform-origin: center;
  will-change: opacity, transform, filter;
}

.mi-about-process__step img {
  flex: 0 0 auto;
  width: calc(51px * var(--mi-about-s));
  height: calc(95px * var(--mi-about-s));
}

.mi-about-process__wreath--right {
  transform: scaleX(-1);
}

.mi-about-process__step:nth-child(1) {
  left: calc(257px * var(--mi-about-s));
  top: calc(388px * var(--mi-about-s));
}

.mi-about-process__step:nth-child(2) {
  left: calc(150px * var(--mi-about-s));
  top: calc(566px * var(--mi-about-s));
}

.mi-about-process__step:nth-child(3) {
  left: calc(586px * var(--mi-about-s));
  top: calc(287px * var(--mi-about-s));
}

.mi-about-process__step:nth-child(4) {
  left: calc(1022px * var(--mi-about-s));
  top: calc(287px * var(--mi-about-s));
}

.mi-about-process__step:nth-child(5) {
  left: calc(1351px * var(--mi-about-s));
  top: calc(388px * var(--mi-about-s));
}

.mi-about-process__step:nth-child(6) {
  left: calc(1458px * var(--mi-about-s));
  top: calc(566px * var(--mi-about-s));
}

.mi-about-process__caption {
  position: absolute;
  z-index: 6;
  left: calc(650px * var(--mi-about-s));
  top: calc(504px * var(--mi-about-s));
  width: calc(619px * var(--mi-about-s));
  font-size: calc(40px * var(--mi-about-s));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
  color: #fff;
  will-change: opacity, transform, filter;
}

.mi-about-process__caption span {
  display: inline-block;
  will-change: opacity, transform, filter;
}

.mi-about-process__bowl {
  position: absolute;
  /* In the Figma layer order the bowl sits above the lower wash. */
  z-index: 4;
  left: calc(503px * var(--mi-about-s));
  top: calc(553px * var(--mi-about-s));
  width: calc(914px * var(--mi-about-s));
  height: calc(724px * var(--mi-about-s));
  overflow: hidden;
  opacity: 1;
  transform-origin: 50% 58%;
  will-change: opacity, transform, filter;
}

.mi-about-process__bowl img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-position: bottom;
}

.mi-js .mi-about-process:not(.is-composed) .mi-about-process__title,
.mi-js .mi-about-process:not(.is-composed) .mi-about-process__path,
.mi-js .mi-about-process:not(.is-composed) .mi-about-process__step,
.mi-js .mi-about-process:not(.is-composed) .mi-about-process__caption {
  opacity: 0;
}

.mi-about-process.is-composed .mi-about-process__title,
.mi-about-process.is-composed .mi-about-process__path {
  opacity: 1;
  transform: none;
  filter: none;
}

.mi-about-process.is-composed .mi-about-process__bowl {
  opacity: 1;
  transform: none;
  filter: none;
}

html.mi-process-scroll-locked,
html.mi-process-scroll-locked body {
  overflow: hidden;
}

.mi-about-process__ghost,
.mi-about-process.is-composed .mi-about-process__step,
.mi-about-process.is-composed .mi-about-process__caption {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Reviews — 47:885 */

.mi-about-reviews {
  height: calc(1028px * var(--mi-about-s));
  color: #fff;
  background: var(--mi-color-surface-dark);
}

.mi-about-reviews__title {
  position: absolute;
  left: calc(100px * var(--mi-about-s));
  top: calc(120px * var(--mi-about-s));
  width: calc(1341px * var(--mi-about-s));
  font-size: calc(88px * var(--mi-about-s));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.mi-about-reviews__list {
  position: absolute;
  left: calc(100px * var(--mi-about-s));
  top: calc(374px * var(--mi-about-s));
  display: grid;
  grid-template-columns: repeat(4, calc(400px * var(--mi-about-s)));
  gap: calc(40px * var(--mi-about-s));
}

.mi-about-reviews__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(400px * var(--mi-about-s));
  height: calc(574px * var(--mi-about-s));
  overflow: hidden;
  border-radius: calc(40px * var(--mi-about-s));
  color: var(--mi-color-surface-dark);
  background: #fff;
}

.mi-about-reviews__media {
  flex: 0 0 calc(250px * var(--mi-about-s));
  width: 100%;
  overflow: hidden;
  background: var(--mi-color-surface-soft);
}

.mi-about-reviews__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mi-about-reviews__body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  padding: calc(36px * var(--mi-about-s));
}

.mi-about-reviews__quote {
  font-size: calc(20px * var(--mi-about-s));
  font-weight: 300;
  line-height: 1.5;
}

.mi-about-reviews__quote > :first-child {
  margin-top: 0;
}

.mi-about-reviews__quote > :last-child {
  margin-bottom: 0;
}

.mi-about-reviews__person {
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--mi-about-s));
  margin-top: auto;
}

.mi-about-reviews__person strong {
  font-size: calc(20px * var(--mi-about-s));
  font-weight: 500;
  line-height: 1.3;
}

.mi-about-reviews__meta {
  display: flex;
  flex-direction: column;
  font-size: calc(16px * var(--mi-about-s));
  font-weight: 300;
  line-height: 1.4;
  color: rgba(17, 35, 49, 0.66);
}

/* Gratitude — 47:811 */

.mi-about-gratitude {
  height: calc(1277px * var(--mi-about-s));
  isolation: isolate;
  color: #fff;
  background: var(--mi-color-surface-dark);
}

.mi-about-gratitude::before,
.mi-about-gratitude::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.mi-about-gratitude::before {
  top: calc(120px * var(--mi-about-s));
  height: calc(379px * var(--mi-about-s));
  background: linear-gradient(180deg, #112331 0%, rgba(17, 35, 49, 0) 100%);
}

.mi-about-gratitude::after {
  bottom: 0;
  height: calc(251px * var(--mi-about-s));
  background: linear-gradient(180deg, rgba(17, 35, 49, 0) 0%, #112331 100%);
}

.mi-about-gratitude__shelves {
  position: absolute;
  z-index: 0;
  left: calc(12px * var(--mi-about-s));
  top: calc(120px * var(--mi-about-s));
  width: calc(1896px * var(--mi-about-s));
  height: calc(1157px * var(--mi-about-s));
  object-fit: cover;
  object-position: center top;
}

.mi-about-gratitude__heading {
  position: absolute;
  z-index: 3;
  left: 0;
  top: calc(120px * var(--mi-about-s));
  width: 100%;
  text-align: center;
}

.mi-about-gratitude__title {
  font-size: calc(88px * var(--mi-about-s));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.mi-about-gratitude__heading p {
  margin-top: calc(44px * var(--mi-about-s));
  font-size: calc(20px * var(--mi-about-s));
  font-weight: 300;
  line-height: 1.5;
}

.mi-about-gratitude__letters {
  position: absolute;
  z-index: 4;
  left: calc(262px * var(--mi-about-s));
  top: calc(464px * var(--mi-about-s));
  display: grid;
  grid-template-columns: repeat(3, calc(269.315px * var(--mi-about-s)));
  grid-auto-rows: calc(116px * var(--mi-about-s));
  justify-content: space-between;
  row-gap: calc(129px * var(--mi-about-s));
  width: calc(1395.315px * var(--mi-about-s));
}

.mi-about-gratitude__letters button {
  position: relative;
  isolation: isolate;
  display: block;
  width: calc(269.315px * var(--mi-about-s));
  height: calc(116px * var(--mi-about-s));
  padding: 0;
  border-radius: calc(12px * var(--mi-about-s));
}

.mi-about-gratitude__letter-overlay {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: calc(273.902px * var(--mi-about-s)) !important;
  height: calc(112.699px * var(--mi-about-s)) !important;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 0.2s ease;
}

.mi-about-gratitude__letters button:hover .mi-about-gratitude__letter-overlay,
.mi-about-gratitude__letters button:focus-visible .mi-about-gratitude__letter-overlay {
  opacity: 1;
}

.mi-about-gratitude__letters img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.mi-about-gratitude__letters img.mi-about-gratitude__letter-overlay {
  position: absolute;
  z-index: 0;
  object-fit: fill;
}

/* CTA — 47:803 */

.mi-about-cta {
  height: calc(603px * var(--mi-about-s));
  isolation: isolate;
  color: #fff;
  background: var(--mi-color-surface-dark);
}

.mi-about-cta__hand {
  position: absolute;
  z-index: 0;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.mi-about-cta__hand--left {
  left: calc(-182px * var(--mi-about-s));
  top: calc(-118px * var(--mi-about-s));
  width: calc(1260px * var(--mi-about-s));
  clip-path: inset(0 50% 0 0);
}

.mi-about-cta__hand--right {
  left: calc(762px * var(--mi-about-s));
  top: calc(-132px * var(--mi-about-s));
  width: calc(1420px * var(--mi-about-s));
  clip-path: inset(0 0 0 50%);
}

.mi-about-cta__content {
  position: absolute;
  z-index: 2;
  inset: 0;
  text-align: center;
}

.mi-about-cta__title {
  position: absolute;
  left: calc(511px * var(--mi-about-s));
  top: calc(120px * var(--mi-about-s));
  width: calc(898px * var(--mi-about-s));
  font-size: calc(88px * var(--mi-about-s));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.mi-about-cta__subtitle {
  position: absolute;
  left: calc(488px * var(--mi-about-s));
  top: calc(241px * var(--mi-about-s));
  width: calc(944px * var(--mi-about-s));
  font-size: calc(64px * var(--mi-about-s));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.mi-about-cta__lead {
  position: absolute;
  left: 0;
  top: calc(335px * var(--mi-about-s));
  width: 100%;
  font-size: calc(20px * var(--mi-about-s));
  font-weight: 300;
  line-height: 1.5;
}

.mi-about-cta__button {
  position: absolute;
  left: calc(834px * var(--mi-about-s));
  top: calc(405px * var(--mi-about-s));
  width: calc(252px * var(--mi-about-s));
  min-height: calc(78px * var(--mi-about-s));
}

/* Narrow layouts retain the composition while giving type and controls room. */

@media (max-width: 991px) {
  .mi-about-page {
    --mi-about-s: 1;
    margin-top: calc(-1 * var(--mi-header-height));
  }

  .mi-about-hero__canvas,
  .mi-about-team__canvas,
  .mi-about-process__canvas,
  .mi-about-reviews__canvas,
  .mi-about-gratitude__canvas,
  .mi-about-cta__canvas {
    width: 100%;
  }

  .mi-about-hero {
    height: 800px;
  }

  .mi-about-hero::before {
    height: 149px;
  }

  .mi-about-hero::after {
    top: 486px;
    bottom: auto;
    height: 314px;
    background: linear-gradient(to bottom, rgba(237, 245, 253, 0) 0%, rgba(237, 245, 253, 0.6) 27.588%, #edf5fd 61.306%);
  }

  .mi-about-breadcrumb {
    left: 0;
    top: 50px;
    gap: 10px;
    height: 48px;
    padding: 10px 16px;
    box-sizing: border-box;
    font-size: 12px;
  }

  .mi-about-hero__title {
    left: 16px;
    top: 149px;
    width: 328px;
    font-size: 32px;
  }

  .mi-about-hero__cloud--left {
    left: -540px;
    top: 75px;
    width: 803px;
    height: auto;
    opacity: 0.8;
  }

  .mi-about-hero__cloud--right {
    left: 74px;
    top: 135px;
    width: 769px;
    height: auto;
    opacity: 0.8;
  }

  .mi-about-hero__cloud--bottom {
    left: -460px;
    top: 205px;
    width: 1419px;
    height: auto;
  }

  .mi-about-hero__statue img {
    width: 100%;
    /* The supplied Figma frames crop the original portrait assets; forcing
       both dimensions squashes each statue into the mobile frame. */
    height: auto;
  }

  .mi-about-hero__statue--center {
    left: -24px;
    top: 285px;
    width: 408px;
    height: 417px;
  }

  .mi-about-hero__statue--left {
    left: -251px;
    top: 310px;
    width: 431px;
    height: 392px;
  }

  .mi-about-hero__statue--right {
    left: 196px;
    right: auto;
    top: 310px;
    width: 427px;
    height: 392px;
  }

  .mi-about-team {
    height: 671px;
    min-height: 0;
  }

  .mi-about-team__canvas {
    min-height: 671px;
    padding: 40px 16px 80px;
    box-sizing: border-box;
  }

  .mi-about-team__intro {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .mi-about-team__title {
    font-size: 28px;
    line-height: 1.1;
  }

  .mi-about-team__lead {
    width: 100%;
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.5;
  }

  .mi-about-team__stage {
    position: relative;
    inset: auto;
    height: 241px;
    margin-top: 40px;
  }

  .mi-about-team__role {
    left: 50%;
    top: 0;
    width: 252px;
    height: 241px;
    transform: translate3d(75%, 0, 0) scale(1);
  }

  .mi-about-team__role[data-state="active"],
  html:not(.mi-js) .mi-about-team__role:first-child {
    left: 50%;
    transform: translate3d(-50%, 0, 0);
  }

  .mi-about-team__role[data-state="next"],
  html:not(.mi-js) .mi-about-team__role:nth-child(2) {
    left: 50%;
    top: 70px;
    opacity: 0;
    transform: translate3d(75%, 0, 0) scale(0.9);
  }

  .mi-about-team__role[data-state="previous"] {
    left: 50%;
    top: 70px;
    opacity: 0;
    transform: translate3d(-175%, 0, 0) scale(0.9);
  }

  .mi-about-team__role-media {
    width: 220px;
    height: 140px;
  }

  .mi-about-team__role[data-state="active"] .mi-about-team__role-copy {
    top: 160px;
  }

  .mi-about-team__role h3 {
    margin: 0;
    font-size: 24px;
  }

  .mi-about-team__role p {
    margin-top: 10px;
    font-size: 14px;
  }

  .mi-about-process {
    height: 800px;
  }

  .mi-about-process::before {
    bottom: 0 !important;
    height: 300px !important;
    top: unset !important;
    /* Mobile process foreground wash. */
    background: linear-gradient(
      to bottom,
      rgba(17, 35, 49, 0) 0%,
      rgba(17, 35, 49, 0.7) 47.755%,
      #112331 89.803%
    ) !important;
  }

  .mi-about-process__title {
    left: 16px;
    top: 70px;
    width: 328px;
    font-size: 28px;
    white-space: normal;
  }

  .mi-about-process__path {
    left: -160px;
    top: 205px;
    width: 680px;
    height: 540px;
  }

  .mi-about-process__ghost {
    left: 34px;
    top: 455px;
    width: 292px;
    height: 140px;
    font-size: 120px;
  }

  .mi-about-process__step {
    left: calc(50% - 69px) !important;
    right: auto !important;
    gap: 4px;
    width: 138px;
    height: 37px;
    font-size: 18px;
  }

  .mi-about-process__step img {
    width: 20px;
    height: 37px;
  }

  .mi-about-process__step:nth-child(1) { top: 164px; }
  .mi-about-process__step:nth-child(2) { top: 221px; }
  .mi-about-process__step:nth-child(3) { top: 278px; }
  .mi-about-process__step:nth-child(4) { top: 335px; }
  .mi-about-process__step:nth-child(5) { top: 392px; }
  .mi-about-process__step:nth-child(6) { top: 449px; }

  .mi-about-process__caption {
    left: 50%;
    top: 503px;
    width: 289px;
    margin-left: -144.5px;
    font-size: 24px;
    line-height: 1.2;
  }

  .mi-about-process__bowl {
    left: 50%;
    top: 526px;
    width: 360px;
    height: 274px;
    margin-left: -180px;
  }

  .mi-about-reviews {
    height: 707px;
    min-height: 0;
  }

  .mi-about-reviews__canvas {
    padding: 60px 16px 80px;
    box-sizing: border-box;
  }

  .mi-about-reviews__title {
    position: relative;
    left: auto;
    top: auto;
    width: 328px;
    font-size: 28px;
    line-height: 1.1;
  }

  .mi-about-reviews__list {
    position: relative;
    left: auto;
    top: auto;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 308px;
    gap: 10px;
    width: calc(100vw - 16px);
    margin-top: 20px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .mi-about-reviews__list::-webkit-scrollbar {
    display: none;
  }

  .mi-about-reviews__card {
    width: 100%;
    height: 442px;
    aspect-ratio: auto;
    border-radius: 40px;
    scroll-snap-align: start;
  }

  .mi-about-reviews__media {
    flex-basis: 190px;
  }

  .mi-about-reviews__body {
    padding: 24px;
  }

  .mi-about-reviews__quote,
  .mi-about-reviews__person strong {
    font-size: 14px;
  }

  .mi-about-reviews__meta {
    font-size: 12px;
  }

  .mi-about-gratitude {
    height: 650px;
    min-height: 0;
  }

  .mi-about-gratitude::before {
    top: 172px;
    height: 96px;
    background: linear-gradient(
      to top,
      rgba(17, 35, 49, 0) 0%,
      rgba(17, 35, 49, 0.7) 53.739%,
      #112331 100%
    );
  }

  .mi-about-gratitude::after {
    height: 56px;
    background: linear-gradient(
      to bottom,
      rgba(17, 35, 49, 0) 0%,
      rgba(17, 35, 49, 0.7) 53.739%,
      #112331 100%
    );
  }

  .mi-about-gratitude__canvas {
    min-height: 650px;
    padding: 60px 16px 80px;
    box-sizing: border-box;
  }

  .mi-about-gratitude__shelves {
    left: 0;
    top: 172px;
    width: 100%;
    height: 435px;
    object-fit: cover;
    object-position: center top;
  }

  .mi-about-gratitude__heading {
    position: relative;
    left: auto;
    top: auto;
  }

  .mi-about-gratitude__title {
    font-size: 32px;
    line-height: 1.1;
  }

  .mi-about-gratitude__heading p {
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.5;
  }

  .mi-about-gratitude__letters {
    position: absolute;
    left: 31px;
    top: 264px;
    display: grid;
    grid-template-columns: repeat(2, 114px);
    grid-auto-rows: 49px;
    gap: 29px 71px;
    width: 299px;
    margin: 0;
  }

  .mi-about-gratitude__letters button {
    width: 114px;
    height: 49px;
    border-radius: 8px;
  }

  .mi-about-gratitude__letters li:nth-child(n + 9) {
    display: none;
  }

  .mi-about-cta {
    height: 567px;
  }

  .mi-about-cta__hand--left {
    left: -120px;
    top: 40px;
    width: 600px;
    height: 163px;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    clip-path: inset(0 50% 0 0);
    transform: none;
  }

  .mi-about-cta__hand--right {
    display: block;
    left: -94px;
    top: 40px;
    width: 600px;
    height: 163px;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    clip-path: inset(0 0 0 50%);
    transform: none;
  }

  .mi-about-cta__title,
  .mi-about-cta__subtitle,
  .mi-about-cta__lead,
  .mi-about-cta__button {
    left: 16px;
    width: 328px;
  }

  .mi-about-cta__title {
    top: 233px;
    font-size: 28px;
    line-height: 1.1;
  }

  .mi-about-cta__subtitle {
    top: 284px;
    font-size: 24px;
    line-height: 1.1;
    white-space: normal;
  }

  .mi-about-cta__lead {
    top: 362px;
    left: 63px;
    width: 234px;
    padding-inline: 0;
    font-size: 14px;
    line-height: 1.5;
  }

  .mi-about-cta__button {
    top: 434px;
    left: 92px;
    width: 176px;
    min-height: 53px;
    font-size: 14px;
  }
}

@media (max-width: 479px) {
  .mi-about-hero {
    height: 800px;
  }

  .mi-about-hero__title {
    top: 148px;
    font-size: 32px;
  }

  .mi-about-hero__statue--center {
    left: -24px;
    top: 285px;
    width: 408px;
    height: 417px;
  }

  .mi-about-hero__statue--left,
  .mi-about-hero__statue--right {
    top: 310px;
    width: 431px;
    height: 392px;
  }

  .mi-about-hero__statue--left {
    left: -251px;
  }

  .mi-about-hero__statue--right {
    left: 196px;
    right: auto;
  }

  .mi-about-team,
  .mi-about-team__canvas {
    min-height: 671px;
  }

  .mi-about-team__canvas {
    padding-top: 40px;
  }

  .mi-about-team__title {
    font-size: 28px;
  }

  .mi-about-process {
    height: 800px;
  }

  .mi-about-process__title {
    font-size: 28px;
  }

  .mi-about-process__step {
    width: 138px;
    font-size: 18px;
  }

}

/* The mobile Figma source is a 360px canvas. Scale its complete composition
   through the 320–430px range so artwork and its copy retain one shared axis. */
@media (max-width: 479px) {
  .mi-about-hero { height: 222.2222vw; }
  .mi-about-hero::before { height: 41.3889vw; }
  .mi-about-hero::after { top: 135vw; height: 87.2222vw; }
  .mi-about-hero__title {
    left: 4.7222vw;
    top: 41.3889vw;
    width: 90.8333vw;
    font-size: 8.8889vw;
  }
  .mi-about-hero__cloud--left { left: -150vw; top: 20.8333vw; width: 223.0556vw; }
  .mi-about-hero__cloud--right { left: 20.5556vw; top: 37.5vw; width: 213.6111vw; }
  .mi-about-hero__cloud--bottom { left: -127.7778vw; top: 56.9444vw; width: 394.1667vw; }
  .mi-about-hero__statue--center {
    left: -6.6667vw;
    top: 79.1667vw;
    width: 113.3333vw;
    height: 115.8333vw;
  }
  .mi-about-hero__statue--left {
    left: -69.7222vw;
    top: 72.1111vw;
    width: 119.7222vw;
    height: 122.8889vw;
  }
  .mi-about-hero__statue--right {
    left: 54.4444vw;
    top: 72.1111vw;
    width: 118.6111vw;
    height: 122.8889vw;
  }

  .mi-about-team,
  .mi-about-team__canvas { min-height: 186.3889vw; }
  .mi-about-team { height: 186.3889vw; }
  .mi-about-team__canvas { padding: 11.1111vw 4.4444vw 22.2222vw; }
  .mi-about-team__title { font-size: 7.7778vw; }
  .mi-about-team__lead { margin-top: 4.4444vw; font-size: 3.8889vw; }
  .mi-about-team__stage { height: 66.9444vw; margin-top: 11.1111vw; }
  .mi-about-team__role { width: 70vw; height: 66.9444vw; }
  .mi-about-team__role[data-state="next"],
  html:not(.mi-js) .mi-about-team__role:nth-child(2),
  .mi-about-team__role[data-state="previous"] { top: 19.4444vw; }
  .mi-about-team__role-media { width: 61.1111vw; height: 38.8889vw; }
  .mi-about-team__role[data-state="active"] .mi-about-team__role-copy { top: 44.4444vw; }
  .mi-about-team__role h3 { font-size: 6.6667vw; }
  .mi-about-team__role p { margin-top: 2.7778vw; font-size: 3.8889vw; }

  .mi-about-process { height: 222.2222vw; }
  .mi-about-process::before { top: 107.7778vw; height: 114.4444vw; }
  .mi-about-process__title {
    left: 4.4444vw;
    top: 19.4444vw;
    width: 91.1111vw;
    font-size: 7.7778vw;
  }
  .mi-about-process__path {
    left: 50%;
    top: 56.9444vw;
    width: 188.8889vw;
    height: 150vw;
    max-width: none;
    transform: translateX(-50%) !important;
  }
  .mi-about-process__ghost {
    left: 9.4444vw;
    top: 126.3889vw;
    width: 81.1111vw;
    height: 38.8889vw;
    font-size: 33.3333vw;
  }
  .mi-about-process__step {
    left: calc(50% - 19.1667vw) !important;
    width: 38.3333vw;
    height: 10.2778vw;
    gap: 1.1111vw;
    font-size: 5vw;
  }
  .mi-about-process__step img { width: 5.5556vw; height: 10.2778vw; }
  .mi-about-process__step:nth-child(1) { top: 45.5556vw; }
  .mi-about-process__step:nth-child(2) { top: 61.3889vw; }
  .mi-about-process__step:nth-child(3) { top: 77.2222vw; }
  .mi-about-process__step:nth-child(4) { top: 93.0556vw; }
  .mi-about-process__step:nth-child(5) { top: 108.8889vw; }
  .mi-about-process__step:nth-child(6) { top: 124.7222vw; }
  .mi-about-process__caption {
    top: 139.7222vw;
    width: 80.2778vw;
    margin-left: -40.1389vw;
    font-size: 6.6667vw;
  }
  .mi-about-process__bowl {
    left: 0;
    top: 146.1111vw;
    width: 100vw;
    height: 76.1111vw;
    margin-left: 0;
  }

  .mi-about-reviews { height: 196.3889vw; }
  .mi-about-reviews__canvas { padding: 16.6667vw 4.4444vw 22.2222vw; }
  .mi-about-reviews__title { width: 91.1111vw; font-size: 7.7778vw; }
  .mi-about-reviews__list {
    grid-auto-columns: 85.5556vw;
    gap: 2.7778vw;
    width: calc(100vw - 4.4444vw);
    margin-top: 5.5556vw;
  }
  .mi-about-reviews__card { height: 122.7778vw; border-radius: 11.1111vw; }
  .mi-about-reviews__media { flex-basis: 52.7778vw; }
  .mi-about-reviews__body { padding: 6.6667vw; }
  .mi-about-reviews__quote,
  .mi-about-reviews__person strong { font-size: 3.8889vw; }
  .mi-about-reviews__meta { font-size: 3.3333vw; }

  .mi-about-gratitude,
  .mi-about-gratitude__canvas { min-height: 180.5556vw; }
  .mi-about-gratitude { height: 180.5556vw; }
  .mi-about-gratitude::before { top: 47.7778vw; height: 26.6667vw; }
  .mi-about-gratitude::after { height: 15.5556vw; }
  .mi-about-gratitude__canvas { padding: 16.6667vw 4.4444vw 22.2222vw; }
  .mi-about-gratitude__shelves { top: 47.7778vw; height: 120.8333vw; }
  .mi-about-gratitude__title { font-size: 8.8889vw; }
  .mi-about-gratitude__heading p { margin-top: 4.4444vw; font-size: 3.3333vw; }
  .mi-about-gratitude__letters {
    left: 8.5764vw;
    top: 73.3333vw;
    grid-template-columns: repeat(2, 31.6667vw);
    grid-auto-rows: 13.6111vw;
    gap: 8.0556vw 19.7222vw;
    width: 83.0556vw;
  }
  .mi-about-gratitude__letters button { width: 31.6667vw; height: 13.6111vw; border-radius: 2.2222vw; }

  .mi-about-cta { height: 157.5vw; }
  .mi-about-cta__hand--left {
    left: -33.3333vw;
    top: 11.1111vw;
    width: 166.6667vw;
    height: 45.2778vw;
  }
  .mi-about-cta__hand--right {
    left: -26.1111vw;
    top: 11.1111vw;
    width: 166.6667vw;
    height: 45.2778vw;
  }
  .mi-about-cta__title,
  .mi-about-cta__subtitle,
  .mi-about-cta__lead,
  .mi-about-cta__button { left: 4.4444vw; width: 91.1111vw; }
  .mi-about-cta__title { top: 64.7222vw; font-size: 7.7778vw; }
  .mi-about-cta__subtitle { top: 78.8889vw; font-size: 6.6667vw; }
  .mi-about-cta__lead { left: 17.5vw; top: 100.5556vw; width: 65vw; font-size: 3.8889vw; }
  .mi-about-cta__button {
    left: 25.5556vw;
    top: 120.5556vw;
    width: 48.8889vw;
    min-height: 14.7222vw;
    font-size: 3.8889vw;
  }
}

/* Stable alternatives: all content remains available without motion. */

.mi-about-page.is-reduced-motion .mi-about-hero__title [data-about-hero-word],
.mi-about-page.is-reduced-motion .mi-about-hero__statue,
.mi-about-page.is-reduced-motion .mi-about-process__title,
.mi-about-page.is-reduced-motion .mi-about-process__path,
.mi-about-page.is-reduced-motion .mi-about-process__ghost,
.mi-about-page.is-reduced-motion .mi-about-process__step,
.mi-about-page.is-reduced-motion .mi-about-process__caption,
.mi-about-page.is-reduced-motion .mi-about-process__bowl {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.mi-about-page.is-reduced-motion .mi-about-hero__world {
  transform: none !important;
}

.mi-about-page.is-reduced-motion .mi-about-hero__statues {
  transform: none !important;
}

.mi-about-page.is-reduced-motion .mi-about-team {
  height: auto;
  min-height: calc(1260px * var(--mi-about-s));
}

.mi-about-page.is-reduced-motion .mi-about-team__canvas {
  min-height: calc(1260px * var(--mi-about-s));
}

.mi-about-page.is-reduced-motion .mi-about-team__stage {
  left: calc(100px * var(--mi-about-s));
  right: calc(100px * var(--mi-about-s));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(42px * var(--mi-about-s));
}

.mi-about-page.is-reduced-motion .mi-about-team__role,
.mi-about-page.is-reduced-motion .mi-about-team__role[data-state] {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  opacity: 1;
  transform: none;
}

.mi-about-page.is-reduced-motion .mi-about-team__role-media,
.mi-about-page.is-reduced-motion .mi-about-team__role[data-state] .mi-about-team__role-media {
  display: flex;
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: calc(150px * var(--mi-about-s));
  opacity: 1;
  transform: none;
  transition: none;
}

.mi-about-page.is-reduced-motion .mi-about-team__role-copy,
.mi-about-page.is-reduced-motion .mi-about-team__role[data-state] .mi-about-team__role-copy {
  position: relative;
  left: auto;
  top: auto;
  transition: none;
}

.mi-about-page.is-reduced-motion .mi-about-team__role h3,
.mi-about-page.is-reduced-motion .mi-about-team__role[data-state] h3 {
  margin-top: calc(14px * var(--mi-about-s));
  font-size: calc(28px * var(--mi-about-s));
}

.mi-about-page.is-reduced-motion .mi-about-team__role-description {
  font-size: calc(16px * var(--mi-about-s));
}

@media (max-width: 991px) {
  .mi-about-page.is-reduced-motion .mi-about-team,
  .mi-about-page.is-reduced-motion .mi-about-team__canvas {
    min-height: 0;
  }

  .mi-about-page.is-reduced-motion .mi-about-team__stage {
    left: auto;
    right: auto;
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 18px;
  }

  .mi-about-page.is-reduced-motion .mi-about-team__role-media,
  .mi-about-page.is-reduced-motion .mi-about-team__role[data-state] .mi-about-team__role-media {
    height: 140px;
  }

  .mi-about-page.is-reduced-motion .mi-about-team__role h3,
  .mi-about-page.is-reduced-motion .mi-about-team__role[data-state] h3 {
    margin-top: 12px;
    font-size: 25px;
  }

  .mi-about-page.is-reduced-motion .mi-about-team__role-description {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mi-about-team__role,
  .mi-about-gratitude__letters button {
    transition: none !important;
  }

  .mi-about-gratitude__letters button:hover,
  .mi-about-gratitude__letters button:focus-visible {
    transform: none;
  }
}