/* About: centered Mission first view */
.mission-intro.company-hero {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: clamp(8rem, 14vh, 11rem) 0 clamp(5rem, 9vh, 7rem);
  text-align: left;
}

.mission-intro.company-hero::after { display: none; }

.mission-intro__inner {
  display: flex;
  width: min(calc(100% - 2rem), 61rem);
  flex-direction: column;
  align-items: flex-start;
}

.mission-intro__eyebrow {
  margin-bottom: clamp(1.2rem, 2.5vh, 1.8rem);
}

.mission-intro h1 {
  max-width: 100%;
  white-space: nowrap;
}

.mission-intro__statement {
  max-width: 61rem;
  margin: clamp(2.8rem, 6vh, 5rem) 0 0;
  text-wrap: pretty;
}

.mission-intro__statement p { margin: 0; }
.mission-intro__statement p + p { margin-top: 1.15em; }
.mission-intro__line { display: block; }

/* Mission: automatic opening sequence, based on the Recruit story motion. */
html.mission-sequence-pending,
html.mission-sequence-pending body {
  overflow: hidden;
  overscroll-behavior: none;
}

html.mission-sequence-pending [data-mission-write],
html.mission-sequence-pending .mission-intro__line,
html.mission-sequence-pending .mission-intro__gratitude {
  opacity: 0.06;
  clip-path: inset(0 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);
}

html.mission-sequence-pending [data-mission-write].is-mission-written,
html.mission-sequence-pending .mission-intro__line.is-mission-written,
html.mission-sequence-pending .mission-intro__gratitude.is-resolved {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
}

.mission-intro__gratitude {
  display: inline-block;
  min-width: 5em;
  color: var(--design-ink, #333333);
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  white-space: nowrap;
}

html.mission-sequence-pending .mvv-asset-stage {
  content-visibility: visible;
}

html.mission-sequence-pending .mvv-asset-figure {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translateY(1.25rem);
  transition:
    clip-path 1050ms cubic-bezier(0.2, 0.8, 0.25, 1),
    opacity 700ms ease,
    transform 900ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

html.mission-sequence-pending .mvv-asset-figure.is-mission-visible {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
}

/* About: static MVV artwork supplied by MoonJapan */
.mvv-asset-stage {
  overflow: hidden;
  padding: clamp(3rem, 6vw, 6rem) 0 clamp(7rem, 12vw, 12rem);
  content-visibility: auto;
  contain-intrinsic-size: auto 56rem;
}

.mvv-asset-figure {
  position: relative;
  width: min(100%, 82rem);
  aspect-ratio: 1920 / 803;
  margin: 0 auto;
  contain: layout paint;
}

.mvv-asset-figure picture {
  display: block;
  width: 100%;
  height: 100%;
}

.mvv-asset-image {
  display: block;
  width: 100%;
  height: auto;
}

/* About: lightweight section headings */
.about-section-heading {
  display: block;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

.about-section-heading .eyebrow {
  margin: 0;
}

.about-section-heading--profile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

@media (width >= 768px) {
  .company-profile-stage .company-profile-list > div {
    grid-template-columns: clamp(7.5rem, 10vw, 9rem) minmax(0, 1fr);
    column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
  }
}

@media (width >= 1200px) {
  .mission-intro.company-hero {
    min-height: 88svh;
    padding-bottom: clamp(2.5rem, 4vh, 3.5rem);
  }
}

@media (min-width: 861px) {
  .mvv-asset-stage {
    padding-top: clamp(0.75rem, 1.5vw, 1.5rem);
    padding-bottom: clamp(2.25rem, 4vw, 4rem);
  }
}

@media (width >= 768px) {
  .founder-stage.company-section {
    padding-top: clamp(3.5rem, 5vw, 5rem);
  }
}

@media (width < 768px) {
  .mission-intro.company-hero {
    min-height: auto;
    padding: 7.5rem 0 3rem;
    place-items: initial;
  }
  .mission-intro h1 {
    max-width: 100%;
    margin-inline: auto;
    line-height: 1.4;
  }
  .mission-intro__statement {
    width: min(100%, 22rem);
    margin: 2.5rem auto 0;
  }
}

@media (max-width: 600px) {
  .mvv-asset-stage {
    padding: 1.25rem 0 2rem;
    contain-intrinsic-size: auto 45rem;
  }
}

@media (width < 768px) {
  .mvv-asset-figure {
    width: min(100%, 29rem);
    aspect-ratio: 947 / 1525;
  }
  .mvv-asset-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

@media (width < 768px) {
  .founder-stage.company-section {
    padding-top: 3rem;
  }
}

@media (width < 768px) {
  .about-section-heading { margin-bottom: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  [data-mission-write],
  .mission-intro__line,
  .mvv-asset-figure {
    transition: none !important;
  }
}