.ab-hero {
  position: relative;
  z-index: 1;
  height: 579px;
  color: var(--white);
}

.ab-hero__glow {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
  height: 720px;
  overflow: hidden;
  pointer-events: none;
}

.ab-hero__glow i {
  position: absolute;
  left: calc(50% - max(921px, 63.96%));
  border-radius: 50%;
}

.ab-hero__glow i:nth-child(1) {
  top: -329px;
  width: max(1842px, 127.92%);
  height: 842px;
  background: var(--sky);
  filter: blur(40px);
}

.ab-hero__glow i:nth-child(2) {
  top: -645px;
  width: max(1843px, 127.99%);
  height: 1056px;
  background: var(--blue-500);
  filter: blur(60px);
}

.ab-hero__glow i:nth-child(3) {
  left: calc(50% - max(913px, 63.4%));
  top: -375px;
  width: max(1842px, 127.92%);
  height: 598px;
  background: #000;
  filter: blur(75px);
}

.ab-hero__glow::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  mix-blend-mode: overlay;
  -webkit-mask-image: radial-gradient(921px 421px at 50% 92px, #000 70%, transparent 100%);
  mask-image: radial-gradient(921px 421px at 50% 92px, #000 70%, transparent 100%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ab-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 252px;
  text-align: center;
}

.ab-hero__eyebrow {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--surface);
}

.ab-hero__title {
  max-width: 700px;
  margin-top: 20px;
  font-size: 48px;
  line-height: 54px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.ab-hero__text {
  max-width: 480px;
  margin-top: 24px;
}

.ab-eyebrow {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--grey);
}

.ab-h2 {
  margin-top: 20px;
  font-size: 48px;
  line-height: 54px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--blue);
}

.ab-who {
  position: relative;
  z-index: 2;
  padding: 100px 0;
}

.ab-who__row {
  display: flex;
  align-items: center;
  gap: 56px;
}

.ab-who__col,
.ab-who__media {
  flex: 1 1 0;
  min-width: 0;
}

.ab-who__text {
  margin-top: 24px;
  color: var(--grey);
}

.ab-who__text p + p {
  margin-top: 8px;
}

.ab-who__media {
  position: relative;
  aspect-ratio: 572 / 420;
  overflow: hidden;
  background: #8fb4e2;
}

.ab-who__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1));
  will-change: transform;
}

.js .ab-who__media {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--ease);
}

.js .ab-who__media.is-in {
  clip-path: inset(0);
}

.ab-steps {
  --fade: 184px;
  position: relative;
  padding-top: 100px;
  overflow: hidden;
}

.ab-steps__inner {
  position: relative;
  height: 1396px;
}

.ab-steps__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #babbbe var(--fade));
}

.ab-steps__line--b {
  left: 52.33334%;
}

.ab-steps__line b {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 0;
  background: linear-gradient(180deg, rgba(8, 60, 150, 0) 0, var(--blue) var(--fade));
}

.ab-steps__head {
  position: absolute;
  left: 56px;
  top: 0;
  width: 560px;
}

.ab-step {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.ab-step--r {
  left: calc(52.33334% - 20px);
  width: min(488px, 47.6667% + 20px);
}

.ab-step--l {
  left: -20px;
  width: min(488px, 52.3333% - 20px);
}

.ab-step:nth-child(1) { top: 208px; }
.ab-step:nth-child(2) { top: 530px; }
.ab-step:nth-child(3) { top: 852px; }
.ab-step:nth-child(4) { top: 1174px; }

.ab-step__dot {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--grey-300);
  color: var(--blue);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.ab-step__dot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--blue);
  opacity: 0;
  pointer-events: none;
}

.ab-step.is-active .ab-step__dot {
  background: var(--blue);
  color: var(--white);
  box-shadow: inset 0 0 0 1px var(--blue), 0 0 0 6px rgba(8, 60, 150, 0.08);
}

.ab-step.is-active .ab-step__dot::after {
  animation: ab-ping 1.1s var(--ease) 1;
}

@keyframes ab-ping {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

.ab-step__body {
  display: flex;
  flex: 0 1 400px;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.ab-step__title {
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  color: var(--blue);
}

.ab-step__text {
  color: var(--grey);
}

.ab-steps__fog {
  position: absolute;
  left: 0;
  right: 0;
  top: 308px;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 24.66%, #fff 100%);
  pointer-events: none;
  will-change: transform;
}

.ab-impact {
  --vh: calc(100vh / var(--z, 1));
  position: relative;
  container-type: inline-size;
  background: var(--blue);
  color: var(--white);
}

@supports (height: 100svh) {
  .ab-impact {
    --vh: calc(100svh / var(--z, 1));
  }
}

.ab-impact__pin {
  --cw: min(1200px, 100cqw - 2 * var(--gutter));
  --u: calc(var(--cw) / 1200);
  --h: calc(800 * var(--u));
  --ah: max(16px, 24 * var(--u));
  position: relative;
  height: var(--h);
  overflow: clip;
}

.ab-impact__stage {
  position: relative;
  width: var(--cw);
  height: 100%;
  margin-inline: auto;
}

.ab-impact__title {
  position: absolute;
  left: calc(628 * var(--u));
  top: calc(100 * var(--u));
  width: calc(560 * var(--u));
  font-size: max(30px, 48 * var(--u));
  line-height: 1.125;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.ab-impact__base i {
  position: absolute;
  left: 0;
  right: calc((var(--cw) - 100cqw) / 2);
  top: calc(678 * var(--u));
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 4px, transparent 4px 8px);
}

.ab-impact__base b {
  position: absolute;
  left: -3px;
  top: calc(679 * var(--u) - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}

.ab-impact__base b + b {
  left: calc(var(--cw) - 3px);
}

.ab-impact__track {
  position: absolute;
  left: 0;
  top: calc(217 * var(--u));
  width: calc(1200 * var(--u));
  height: calc(462 * var(--u));
  will-change: transform;
}

.ab-impact__slide {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.ab-impact__slide + .ab-impact__slide {
  left: var(--cw);
}

.ab-impact__arc {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ab-impact__arc--m {
  display: none;
}

.ab-impact__arc path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1px;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}

.ab-impact__value {
  position: absolute;
  left: 0;
  top: calc(257 * var(--u));
  font-size: calc(128 * var(--u));
  line-height: calc(180 * var(--u));
  font-weight: 600;
  white-space: nowrap;
}

.ab-impact__label {
  position: absolute;
  left: 0;
  top: calc(100% + 21px);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
  opacity: var(--label-o, 1);
}

.ab-impact__slide + .ab-impact__slide .ab-impact__label {
  opacity: var(--label-o, 0.4);
}

.ab-impact__arrow {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ah);
  height: var(--ah);
  transform: translate(calc(1194.65 * var(--u) - var(--ah) / 2), calc(445.27 * var(--u) - var(--ah) / 2)) rotate(164.5deg);
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .js .ab-impact::after {
    content: "";
    display: block;
    height: calc(2.4 * var(--vh));
  }

  .js .ab-impact__pin {
    --mid: calc((var(--vh) - var(--h)) / 2);
    --lo: calc(80px - 100 * var(--u));
    --hi: calc(var(--vh) - 679 * var(--u) - 57px);
    position: sticky;
    top: max(min(var(--mid), var(--hi)), min(var(--lo), (var(--lo) + var(--hi)) / 2));
  }
}

@media (max-width: 1100px) and (min-width: 768px) {
  .ab-who__row {
    gap: 40px;
  }

  .ab-h2 {
    font-size: 40px;
    line-height: 46px;
  }

  .ab-steps__head {
    left: 40px;
    width: calc(52.3333% - 80px);
  }

  .ab-step {
    gap: 24px;
  }

  .ab-step__title {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (max-width: 900px) and (min-width: 768px) {
  .ab-who__row {
    flex-direction: column;
    align-items: stretch;
  }

  .ab-who__col,
  .ab-who__media {
    flex: none;
  }

  .ab-who__col {
    max-width: 572px;
  }
}

@media (max-width: 767px) {
  .ab-hero {
    height: auto;
    padding-bottom: 183px;
  }

  .ab-hero__glow {
    height: 760px;
  }

  .ab-hero__glow i:nth-child(1) {
    top: -379px;
  }

  .ab-hero__glow i:nth-child(2) {
    top: -725px;
  }

  .ab-hero__glow i:nth-child(3) {
    top: -395px;
  }

  .ab-hero__glow::after {
    -webkit-mask-image: radial-gradient(921px 421px at 50% 42px, #000 70%, transparent 100%);
    mask-image: radial-gradient(921px 421px at 50% 42px, #000 70%, transparent 100%);
  }

  .ab-hero__inner {
    padding-top: 218px;
  }

  .ab-hero__eyebrow {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.48px;
    color: var(--white);
  }

  .ab-hero__title {
    font-size: 32px;
    line-height: 36px;
  }

  .ab-h2 {
    font-size: 32px;
    line-height: 36px;
  }

  .ab-who {
    padding: 0 0 64px;
  }

  .ab-who__row {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .ab-who__col {
    flex: none;
  }

  .ab-who__media {
    flex: none;
    margin-inline: calc(-1 * var(--gutter));
    aspect-ratio: 390 / 200;
  }

  .ab-steps {
    --fade: 93px;
    padding: 64px 0 128px;
  }

  .ab-steps__inner {
    height: auto;
  }

  .ab-steps__line--b,
  .ab-steps__fog {
    display: none;
  }

  .ab-steps__head {
    position: relative;
    left: auto;
    width: auto;
  }

  .ab-steps__list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-top: 56px;
  }

  .ab-step,
  .ab-step--r,
  .ab-step--l {
    position: relative;
    top: auto !important;
    left: -16px;
    width: calc(100% + 16px);
    gap: 16px;
  }

  .ab-step__dot {
    width: 32px;
    height: 32px;
  }

  .ab-step__body {
    flex: 1 1 auto;
    gap: 16px;
    padding-top: 4px;
  }

  .ab-step__title {
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
  }

  .ab-impact {
    margin-bottom: 40px;
  }

  .ab-impact__pin {
    --cw: calc(100cqw - 2 * var(--gutter));
    --u: min(var(--cw) / 342, 1.5px);
    --h: calc(535px + 165 * var(--u));
  }

  .ab-impact__title {
    left: 0;
    top: 80px;
    width: 100%;
    font-size: 32px;
    line-height: 36px;
  }

  .ab-impact__base i {
    left: calc(-1 * var(--gutter));
    right: calc(-1 * var(--gutter));
    top: auto;
    bottom: 112px;
  }

  .ab-impact__base b {
    display: none;
  }

  .ab-impact__track {
    top: auto;
    bottom: 117px;
    width: calc(342 * var(--u));
    height: calc(165 * var(--u));
  }

  .ab-impact__arc--d {
    display: none;
  }

  .ab-impact__arc--m {
    display: block;
  }

  .ab-impact__value {
    top: auto;
    bottom: 0;
    font-size: calc(77.14 * var(--u));
    line-height: calc(108.5 * var(--u));
  }

  .ab-impact__label {
    top: calc(100% + 17px);
  }

  .js .ab-impact__slide + .ab-impact__slide .ab-impact__value {
    opacity: var(--peek-o, 0);
  }

  .ab-impact__arrow {
    transform: translate(calc(341.04 * var(--u) - var(--ah) / 2), calc(154.14 * var(--u) - var(--ah) / 2)) rotate(174.25deg);
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .js .ab-impact::after {
    height: calc(2.2 * var(--vh));
  }

  .js .ab-impact__pin {
    --lo: -4px;
    --hi: calc(var(--vh) - var(--h) + 64px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .ab-who__media {
    clip-path: none;
  }

  .ab-step.is-active .ab-step__dot::after {
    animation: none;
  }
}