:root {
  --mission-blue: #0668b7;
  --mission-blue-deep: #06579a;
  --mission-orange: #f18952;
  --mission-white: #fff;
}

.mission-values-page {
  background: var(--mission-blue-deep);
}

.mission-values-main {
  position: relative;
  isolation: isolate;
  min-height: max(100svh, 1540px);
  overflow: hidden;
  color: var(--mission-white);
  background:
    radial-gradient(circle at 71% 29%, rgba(0, 158, 229, .34), transparent 38%),
    linear-gradient(118deg, #07508d 0%, #006ab9 55%, #0782cf 100%);
}

.mission-values-current {
  position: relative;
  isolation: isolate;
  min-height: max(100svh, 1540px);
  overflow: hidden;
}

.mission-values-canvas,
.mission-values-rail {
  position: relative;
  z-index: 2;
}

/*
 * Web layout uses the approved 1440 / 1288 shell. The mission is a complete
 * full-rail introduction; values and principles continue below as two equal
 * semantic columns.
 */
.mission-values-rail {
  display: block;
  padding-top: clamp(68px, 5.8vw, 92px);
  padding-bottom: clamp(570px, 43vw, 700px);
}

.mission-values-intro {
  display: block;
  width: 100%;
}

.mission-values-intro__title-block {
  width: 100%;
}

.mission-values-intro h1 {
  max-width: 760px;
  margin: 0;
  font-family: var(--font-report-display);
  font-size: clamp(52px, 4vw, 60px);
  font-weight: 700;
  line-height: .97;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.mission-values-intro h1 span {
  display: block;
}

@media (min-width: 1121px) {
  .mission-values-intro h1 span:first-child {
    white-space: nowrap;
  }
}

.mission-values-glow {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  height: clamp(58px, 4.8vw, 72px);
  margin-top: clamp(26px, 2.5vw, 38px);
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  pointer-events: none;
  isolation: isolate;
}

.mission-values-glow .glow-specimen__figure {
  width: calc(100% + 28px);
  height: 100%;
  margin: 0 0 0 -14px;
  overflow: visible;
}

.mission-values-glow .glow-specimen__figure--blue {
  background: transparent;
}

.mission-values-glow .glow-specimen__stage {
  overflow: visible;
}

.mission-values-mission {
  width: 100%;
  margin-top: clamp(26px, 2.8vw, 44px);
  padding: 0;
}

.mission-values-heading {
  display: flex;
  align-items: center;
  gap: clamp(18px, 1.7vw, 28px);
}

.mission-values-heading__main-icon {
  width: clamp(62px, 5vw, 78px);
  height: clamp(62px, 5vw, 78px);
  object-fit: contain;
  flex: 0 0 auto;
}

.mission-values-heading__main-icon--wide {
  width: clamp(74px, 6vw, 94px);
}

.mission-values-heading h2 {
  margin: 0;
  font-family: var(--font-report-display);
  font-size: clamp(36px, 3vw, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.mission-values-slogan {
  width: 100%;
  max-width: none;
  margin: clamp(24px, 2.2vw, 34px) 0 0;
  font-family: var(--font-report-body);
  font-size: clamp(18px, 1.53vw, 22px);
  font-weight: 500;
  line-height: 1.56;
  letter-spacing: .006em;
  text-transform: uppercase;
}

.mission-values-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(56px, 6vw, 96px);
  align-items: start;
  margin-top: clamp(82px, 7vw, 112px);
}

.mission-values-heading--column {
  min-height: 84px;
  margin-bottom: clamp(30px, 2.8vw, 44px);
}

.mission-values-list {
  display: grid;
  gap: clamp(32px, 2.8vw, 44px);
}

.mission-values-list--principles {
  gap: clamp(24px, 2.15vw, 34px);
}

.mission-value-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(44px, 3.7vw, 58px);
  gap: clamp(16px, 1.6vw, 26px);
  align-items: start;
}

.mission-value-card h3 {
  margin: 0 0 clamp(10px, .9vw, 14px);
  font-family: var(--font-report-display);
  font-size: clamp(21px, 1.72vw, 26px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
}

.mission-value-card p {
  margin: 0;
  font-family: var(--font-report-body);
  font-size: clamp(15px, 1.06vw, 16.5px);
  font-weight: 400;
  line-height: 1.38;
  text-align: left;
  text-wrap: pretty;
}

.mission-value-card > img {
  width: 100%;
  max-height: 62px;
  object-fit: contain;
}

.mission-values-background {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: clamp(720px, 82vw, 1200px);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .25) 10%, rgba(0, 0, 0, .72) 30%, #000 48%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .25) 10%, rgba(0, 0, 0, .72) 30%, #000 48%);
}

.mission-values-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5, 109, 185, .76) 0%, rgba(5, 109, 185, .35) 28%, transparent 54%);
}

.mission-values-background img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center bottom;
}

.mission-elements {
  position: relative;
  z-index: 3;
  isolation: isolate;
  min-height: clamp(900px, 69vw, 1040px);
  overflow: hidden;
  color: var(--mission-white);
  background: #087bc8;
}

.mission-elements__background {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.mission-elements__background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #087bc8 0%, #087bc8 14%, rgba(8, 123, 200, .82) 18%, rgba(8, 123, 200, .24) 23%, transparent 27%, transparent 92%, rgba(0, 20, 33, .08) 100%);
}

.mission-elements__background img {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center bottom;
}

@media (min-width: 1121px) {
  .mission-elements {
    min-height: max(
      clamp(1180px, 86vw, 1250px),
      calc(67.94vw + 80px)
    );
  }

  .mission-elements__background img {
    right: auto;
    left: 50%;
    width: 100vw;
    max-width: none;
    transform: translateX(-50%);
  }

  .mission-elements__rail {
    padding-top: clamp(76px, 5.2vw, 96px);
  }
}

.mission-elements__canvas,
.mission-elements__rail {
  position: relative;
}

.mission-elements__rail {
  padding-top: clamp(48px, 4.4vw, 68px);
  padding-bottom: clamp(76px, 6.5vw, 104px);
}

.mission-elements__heading-block {
  width: min(610px, 100%);
}

#mission-elements-title {
  margin: 0;
  color: var(--mission-white);
  font-size: var(--approved-type-page-heading-size) !important;
  line-height: var(--approved-type-page-heading-leading) !important;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.mission-elements__glow {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  height: clamp(58px, 4.8vw, 72px);
  margin: clamp(16px, 1.6vw, 24px) 0 0 -14px;
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  pointer-events: none;
  isolation: isolate;
}

.mission-elements__glow .glow-specimen__figure {
  width: calc(100% + 28px);
  height: 100%;
  margin: 0;
  overflow: visible;
}

.mission-elements__glow .glow-specimen__figure--blue {
  background: transparent;
}

.mission-elements__glow .glow-specimen__stage {
  overflow: visible;
}

.mission-elements__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: clamp(14px, 1.3vw, 20px);
  margin-top: clamp(12px, 1.2vw, 18px);
}

.mission-element-card {
  position: relative;
  width: 100%;
  min-height: 0;
  padding: clamp(104px, 46%, 142px) 8.5% clamp(18px, 1.6vw, 24px);
  overflow: hidden;
  color: #111;
  background: rgba(233, 238, 249, .78);
  border-radius: 0 clamp(14px, 1.35vw, 20px) 0 clamp(14px, 1.35vw, 20px);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

.mission-element-card__vector {
  position: absolute;
  z-index: 0;
  inset: 0 auto auto 50%;
  width: min(100%, 307px);
  height: auto;
  display: block;
  object-fit: contain;
  transform: translateX(-50%);
  pointer-events: none;
}

.mission-element-card__content {
  position: relative;
  z-index: 1;
  inset: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mission-element-card__content h3 {
  margin: 0 0 clamp(9px, .8vw, 12px);
  color: #07579d;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.mission-element-card__list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0px, .2vw, 3px);
  list-style: none;
  color: #111;
}

.mission-element-card__list li {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.mission-element-card__list li > img {
  width: 15px;
  height: 15px;
  margin-top: 4px;
  display: block;
}

.mission-element-card__list span {
  min-width: 0;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

@media (min-width: 761px) and (max-width: 1300px) {
  .mission-elements__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(30px, 4vw, 46px) clamp(20px, 3vw, 34px);
  }
}

@media (max-width: 1120px) {
  .mission-values-main {
    min-height: 1840px;
  }

  .mission-values-rail {
    padding-bottom: 590px;
  }

  .mission-values-background {
    height: clamp(620px, 82vw, 900px);
  }

  .mission-values-mission {
    margin-top: 30px;
  }

  .mission-values-intro h1 {
    font-size: clamp(48px, 5.2vw, 58px);
  }

  .mission-values-columns {
    gap: 52px;
    margin-top: 82px;
  }

  .mission-elements__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(30px, 4vw, 46px) clamp(20px, 3vw, 34px);
  }

  .mission-elements__background img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
    transform: none;
  }

  .mission-element-card {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .mission-values-main {
    min-height: auto;
  }

  .mission-values-rail {
    padding-top: 46px;
    padding-bottom: clamp(480px, 96vw, 650px);
  }

  .mission-values-intro,
  .mission-values-columns {
    grid-template-columns: 1fr;
  }

  .mission-values-intro {
    gap: 0;
  }

  .mission-values-intro h1 {
    max-width: 650px;
    font-size: clamp(44px, 11.6vw, 58px);
  }

  .mission-values-glow {
    margin-top: 24px;
  }

  .mission-values-mission {
    margin-top: 26px;
  }

  .mission-values-columns {
    gap: 82px;
    margin-top: 88px;
  }

  .mission-values-heading--column {
    min-height: 0;
  }

  .mission-values-background {
    height: clamp(460px, 105vw, 640px);
  }

  .mission-elements__rail {
    padding-top: 52px;
    padding-bottom: 96px;
  }

  .mission-elements__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    justify-items: center;
    gap: 36px;
    margin-top: 24px;
  }

  .mission-element-card {
    max-width: 520px;
  }
}

@media (max-width: 520px) {
  .mission-values-rail {
    padding-top: 36px;
    padding-bottom: 430px;
  }

  .mission-values-intro h1 {
    font-size: clamp(40px, 11vw, 52px);
  }

  .mission-values-heading {
    gap: 16px;
  }

  .mission-values-heading__main-icon {
    width: 58px;
    height: 58px;
  }

  .mission-values-heading__main-icon--wide {
    width: 72px;
  }

  .mission-values-heading h2 {
    font-size: 34px;
  }

  .mission-values-slogan {
    font-size: 17px;
    line-height: 1.52;
  }

  .mission-values-columns {
    gap: 72px;
    margin-top: 76px;
  }

  .mission-values-list {
    gap: 34px;
  }

  .mission-values-list--principles {
    gap: 30px;
  }

  .mission-value-card {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 16px;
  }

  .mission-value-card h3 {
    font-size: 22px;
  }

  .mission-value-card p {
    font-size: 15.5px;
  }

  .mission-values-background {
    height: 420px;
  }

  .mission-elements__rail {
    padding-top: 44px;
    padding-bottom: 78px;
  }

  .mission-elements__heading-block h2 {
    max-width: 340px;
  }

  .mission-elements__glow {
    width: min(380px, 104%);
    margin-top: 18px;
  }

  .mission-elements__grid {
    gap: 36px;
    margin-top: 18px;
  }

  .mission-element-card__content h3 {
    margin-bottom: 14px;
  }

  .mission-element-card__list {
    gap: 4px;
  }
}

/*
 * Mission & Values reveal candidate. Hidden states exist only after the page
 * script opts in, so no-JS and reduced-motion presentations stay complete.
 */
@media (prefers-reduced-motion: no-preference) {
  .mission-values-motion-ready .mission-motion-title,
  .mission-values-motion-ready .mission-motion-mission .mission-values-heading,
  .mission-values-motion-ready .mission-motion-mission .mission-values-slogan,
  .mission-values-motion-ready .mission-motion-column-heading,
  .mission-values-motion-ready .mission-motion-value-card,
  .mission-values-motion-ready .mission-motion-elements-heading h2,
  .mission-values-motion-ready .mission-motion-element-card,
  .mission-values-motion-ready .mission-motion-element-card .mission-element-card__vector,
  .mission-values-motion-ready .mission-motion-element-card .mission-element-card__content h3,
  .mission-values-motion-ready .mission-motion-element-card .mission-element-card__list li {
    opacity: 0;
  }

  .mission-values-motion-ready .mission-motion-title {
    transform: translate3d(0, 24px, 0);
  }

  .mission-values-motion-ready .mission-motion-mission .mission-values-heading,
  .mission-values-motion-ready .mission-motion-column-heading {
    transform: translate3d(0, 18px, 0);
  }

  .mission-values-motion-ready .mission-motion-mission .mission-values-slogan {
    transform: translate3d(0, 16px, 0);
  }

  .mission-values-motion-ready .mission-motion-value-card,
  .mission-values-motion-ready .mission-motion-element-card {
    transform: translate3d(0, 24px, 0);
  }

  .mission-values-motion-ready .mission-motion-value-card > img,
  .mission-values-motion-ready .mission-motion-element-card .mission-element-card__vector {
    transform-origin: center;
  }

  .mission-values-motion-ready .mission-motion-element-card .mission-element-card__vector {
    transform: translate3d(-50%, 12px, 0) scale(0.84);
  }

  .mission-values-motion-ready .mission-motion-element-card .mission-element-card__content h3,
  .mission-values-motion-ready .mission-motion-element-card .mission-element-card__list li {
    transform: translate3d(0, 14px, 0);
  }

  .mission-values-motion-ready .mission-motion-title.is-visible {
    animation: mission-values-title-enter 920ms cubic-bezier(0.16, 1, 0.3, 1) var(--mission-motion-delay, 0ms) both;
  }

  .mission-values-motion-ready .mission-motion-mission.is-visible .mission-values-heading {
    animation: mission-values-fade-rise 840ms cubic-bezier(0.16, 1, 0.3, 1) var(--mission-motion-delay, 0ms) both;
  }

  .mission-values-motion-ready .mission-motion-mission.is-visible .mission-values-slogan {
    animation: mission-values-fade-rise 820ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--mission-motion-delay, 0ms) + 190ms) both;
  }

  .mission-values-motion-ready .mission-motion-column-heading.is-visible {
    animation: mission-values-fade-rise 840ms cubic-bezier(0.16, 1, 0.3, 1) var(--mission-motion-delay, 0ms) both;
  }

  .mission-values-motion-ready .mission-motion-value-card.is-visible {
    animation: mission-values-object-enter 780ms cubic-bezier(0.16, 1, 0.3, 1) var(--mission-motion-delay, 0ms) both;
  }

  .mission-values-motion-ready .mission-motion-value-card.is-visible > img {
    animation: mission-values-icon-settle 860ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--mission-motion-delay, 0ms) + 70ms) both;
  }

  .mission-values-motion-ready .mission-motion-elements-heading.is-visible h2 {
    animation: mission-values-title-enter 920ms cubic-bezier(0.16, 1, 0.3, 1) var(--mission-motion-delay, 0ms) both;
  }

  .mission-values-motion-ready .mission-motion-element-card.is-visible {
    animation: mission-values-object-enter 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--mission-motion-delay, 0ms) both;
  }

  .mission-values-motion-ready .mission-motion-element-card.is-visible .mission-element-card__vector {
    animation: mission-values-vector-enter 920ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--mission-motion-delay, 0ms) + 80ms) both;
  }

  .mission-values-motion-ready .mission-motion-element-card.is-visible .mission-element-card__content h3 {
    animation: mission-values-fade-rise 760ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--mission-motion-delay, 0ms) + 210ms) both;
  }

  .mission-values-motion-ready .mission-motion-element-card.is-visible .mission-element-card__list li {
    animation: mission-values-list-enter 660ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--mission-motion-delay, 0ms) + var(--mission-list-delay, 330ms)) both;
  }
}

@keyframes mission-values-title-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mission-values-fade-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mission-values-object-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mission-values-icon-settle {
  from {
    transform: translate3d(0, 8px, 0) scale(0.86);
  }
  to {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes mission-values-vector-enter {
  from {
    opacity: 0;
    transform: translate3d(-50%, 12px, 0) scale(0.84);
  }
  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}

@keyframes mission-values-list-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mission-values-page *,
  .mission-values-page *::before,
  .mission-values-page *::after {
    scroll-behavior: auto !important;
  }
}