.capability-atlas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 0;
  margin-top: 72px;
  background: transparent;
  border: 1px solid rgba(19, 35, 31, .14);
}

.capability-atlas .cap-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 700px;
  padding: 46px 42px 40px;
  background: rgba(255, 255, 255, .58);
  border-right: 1px solid rgba(19, 35, 31, .12);
  border-bottom: 1px solid rgba(19, 35, 31, .12);
  transition: background .35s ease, transform .35s ease, box-shadow .35s ease;
}

.capability-atlas .cap-copy:nth-child(3n) {
  border-right: 0;
}

.capability-atlas .cap-copy:nth-child(n + 4) {
  border-bottom: 0;
}

.capability-atlas .cap-copy::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #168d80, #b7d94a);
  transition: width .45s cubic-bezier(.16, 1, .3, 1);
}

.capability-atlas .cap-copy:hover {
  z-index: 1;
  background: #fff;
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(19, 35, 31, .11);
}

.capability-atlas .cap-copy:hover::after {
  width: 100%;
}

.capability-atlas .cap-copy > span {
  min-height: 28px;
}

.capability-atlas .cap-copy h3 {
  font-size: clamp(27px, 2vw, 35px);
}

.capability-atlas .cap-copy p {
  font-size: 14px;
}

.cap-graphic {
  position: relative;
  flex: 0 0 150px;
  margin: 24px 0 18px;
  padding: 18px;
  color: #eef6f2;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    #102c26;
  background-size: 22px 22px;
  border: 1px solid rgba(19, 35, 31, .12);
  overflow: hidden;
}

.cap-graphic::after {
  content: "";
  position: absolute;
  inset: auto -35px -55px auto;
  width: 130px;
  height: 130px;
  border: 1px solid rgba(129, 200, 170, .12);
  border-radius: 50%;
}

.cap-graphic span,
.cap-graphic small {
  color: #7f9b92;
  font-size: 7px;
  letter-spacing: 1px;
}

.cap-graphic strong {
  font: 500 25px Manrope, sans-serif;
  letter-spacing: -1px;
}

.cap-graphic strong small {
  margin-left: 5px;
  color: #9bd1bd;
  font: 500 8px "DM Sans", sans-serif;
}

.graphic-scorecard {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 18px;
  align-items: end;
}

.graphic-scorecard div:first-child {
  display: grid;
  gap: 4px;
}

.graphic-scorecard div:first-child i {
  color: #b7d94a;
  font: 500 8px "DM Sans", sans-serif;
}

.graphic-scorecard > small {
  position: absolute;
  top: 14px;
  right: 15px;
}

.graphic-bars,
.forecast-stack {
  display: flex;
  align-items: end;
  gap: 5px;
  height: 72px;
}

.graphic-bars b,
.forecast-stack i {
  flex: 1;
  height: var(--h);
  background: linear-gradient(#b7d94a, #55a897);
  transform-origin: bottom;
  animation: atlas-bar 3.2s ease-in-out infinite alternate;
}

.graphic-bars b:nth-child(1) { --h: 32%; }
.graphic-bars b:nth-child(2) { --h: 48%; }
.graphic-bars b:nth-child(3) { --h: 44%; }
.graphic-bars b:nth-child(4) { --h: 67%; }
.graphic-bars b:nth-child(5) { --h: 76%; }
.graphic-bars b:nth-child(6) { --h: 93%; }

.graphic-finance,
.graphic-forecast {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  gap: 8px 18px;
  align-items: end;
}

.waterfall {
  display: flex;
  align-items: end;
  gap: 7px;
  height: 72px;
}

.waterfall i {
  width: 17%;
  height: 78%;
  background: #74beaa;
}

.waterfall i:nth-child(2) { height: 58%; background: #b99551; }
.waterfall i:nth-child(3) { height: 44%; background: #d0b16d; }
.waterfall i:nth-child(4) { height: 31%; background: #6ea598; }
.waterfall i:nth-child(5) { height: 66%; background: #b7d94a; }

.graphic-meta {
  display: flex;
  justify-content: space-between;
  grid-column: 1 / -1;
}

.graphic-revenue {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 5px 16px;
}

.pace-line {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  gap: 7px;
  height: 72px;
  border-bottom: 1px solid rgba(255,255,255,.16);
}

.pace-line i {
  flex: 1;
  height: 5px;
  margin-bottom: var(--y);
  background: #86cfbf;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(134,207,191,.1);
}

.pace-line i:nth-child(1) { --y: 8px; }
.pace-line i:nth-child(2) { --y: 13px; }
.pace-line i:nth-child(3) { --y: 18px; }
.pace-line i:nth-child(4) { --y: 15px; }
.pace-line i:nth-child(5) { --y: 30px; }
.pace-line i:nth-child(6) { --y: 43px; }
.pace-line i:nth-child(7) { --y: 57px; background: #b7d94a; }

.graphic-revenue em {
  grid-column: 1 / -1;
  color: #b7d94a;
  font: 500 7px "DM Sans", sans-serif;
  font-style: normal;
  letter-spacing: 1px;
}

.forecast-stack i:nth-child(1) { --h: 26%; }
.forecast-stack i:nth-child(2) { --h: 41%; }
.forecast-stack i:nth-child(3) { --h: 36%; }
.forecast-stack i:nth-child(4) { --h: 54%; }
.forecast-stack i:nth-child(5) { --h: 63%; }
.forecast-stack i:nth-child(6) { --h: 70%; }
.forecast-stack i:nth-child(7) { --h: 82%; }
.forecast-stack i:nth-child(8) { --h: 94%; }
.forecast-stack i:nth-child(n + 6) {
  background: linear-gradient(#d8bc76, #9d7e42);
}

.graphic-workforce {
  display: flex;
  align-items: center;
  gap: 25px;
}

.productivity-ring {
  display: grid;
  place-content: center;
  width: 104px;
  height: 104px;
  flex: 0 0 104px;
  text-align: center;
  border-radius: 50%;
  background: radial-gradient(circle, #102c26 57%, transparent 59%), conic-gradient(#b7d94a 0 78%, #315047 78%);
}

.productivity-ring strong {
  color: #fff;
  line-height: 1;
}

.workforce-metrics {
  display: grid;
  flex: 1;
  gap: 8px;
}

.workforce-metrics span {
  display: flex;
  justify-content: space-between;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.workforce-metrics b {
  color: #a7d55a;
  font-weight: 500;
}

.graphic-studio {
  display: grid;
  place-items: center;
}

.studio-mini-grid {
  position: absolute;
  inset: 17px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.studio-mini-grid i {
  border: 1px solid rgba(129,200,170,.28);
  background: rgba(129,200,170,.06);
}

.studio-mini-grid i:nth-child(2) { background: rgba(183,217,74,.09); }
.studio-mini-grid i:nth-child(3) { background: rgba(117,195,213,.08); }
.studio-mini-grid i:nth-child(4) { background: rgba(209,176,105,.08); }

.studio-mini-core {
  z-index: 1;
  display: grid;
  place-content: center;
  width: 76px;
  height: 76px;
  text-align: center;
  border: 1px solid rgba(157,209,189,.4);
  border-radius: 50%;
  background: #12372e;
  box-shadow: 0 0 0 9px rgba(16,44,38,.75);
}

.studio-mini-core strong {
  font-size: 13px;
  letter-spacing: 1px;
}

.graphic-studio > small {
  position: absolute;
  bottom: 7px;
  z-index: 2;
}

@keyframes atlas-bar {
  to { transform: scaleY(.72); opacity: .75; }
}

.capability-atlas .cap-copy ul {
  margin-top: auto;
}

.capability-atlas > .cap-visual {
  display: none !important;
}

@media (max-width: 1050px) {
  .capability-atlas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability-atlas .cap-copy,
  .capability-atlas .cap-copy:nth-child(3n),
  .capability-atlas .cap-copy:nth-child(n + 4) {
    border-right: 1px solid rgba(19, 35, 31, .12);
    border-bottom: 1px solid rgba(19, 35, 31, .12);
  }

  .capability-atlas .cap-copy:nth-child(2n) {
    border-right: 0;
  }

  .capability-atlas .cap-copy:nth-child(n + 5) {
    border-bottom: 0;
  }
}

@media (max-width: 650px) {
  .capability-atlas {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }

  .capability-atlas .cap-copy,
  .capability-atlas .cap-copy:nth-child(2n),
  .capability-atlas .cap-copy:nth-child(3n),
  .capability-atlas .cap-copy:nth-child(n + 4),
  .capability-atlas .cap-copy:nth-child(n + 5) {
    min-height: 0;
    padding: 38px 28px 32px;
    border-right: 0;
    border-bottom: 1px solid rgba(19, 35, 31, .12);
  }

  .capability-atlas .cap-copy:last-of-type {
    border-bottom: 0;
  }

  .cap-graphic {
    flex-basis: 145px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .graphic-bars b,
  .forecast-stack i {
    animation: none;
  }
}

/* Full-width capability story */
.capability-atlas {
  display: block;
  margin-top: 72px;
  border: 1px solid rgba(19, 35, 31, .14);
  overflow: hidden;
}

.capability-atlas .cap-copy,
.capability-atlas .cap-copy:nth-child(2n),
.capability-atlas .cap-copy:nth-child(3n),
.capability-atlas .cap-copy:nth-child(n + 4),
.capability-atlas .cap-copy:nth-child(n + 5) {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(420px, 1.14fr);
  grid-template-areas:
    "label graphic"
    "title graphic"
    "copy graphic"
    "list graphic";
  column-gap: clamp(55px, 7vw, 120px);
  align-items: start;
  min-height: 590px;
  padding: clamp(58px, 6vw, 90px);
  background: rgba(255, 255, 255, .68);
  border: 0;
  border-bottom: 1px solid rgba(19, 35, 31, .13);
  box-shadow: none;
  transform: none;
  overflow: hidden;
}

.capability-atlas .cap-copy:nth-child(even) {
  grid-template-columns: minmax(420px, 1.14fr) minmax(0, .86fr);
  grid-template-areas:
    "graphic label"
    "graphic title"
    "graphic copy"
    "graphic list";
  background: #eef0e9;
}

.capability-atlas .cap-copy:last-of-type {
  border-bottom: 0;
}

.capability-atlas .cap-copy:hover {
  background: rgba(255, 255, 255, .68);
  transform: none;
  box-shadow: none;
}

.capability-atlas .cap-copy:nth-child(even):hover {
  background: #eef0e9;
}

.capability-atlas .cap-copy::after {
  display: none;
}

.capability-atlas .cap-copy > span {
  grid-area: label;
  min-height: 0;
  margin-bottom: 42px;
}

.capability-atlas .cap-copy h3 {
  grid-area: title;
  max-width: 600px;
  margin: 0 0 26px;
  font-size: clamp(37px, 3.35vw, 58px);
  line-height: 1.02;
  letter-spacing: -2.6px;
}

.capability-atlas .cap-copy > p {
  grid-area: copy;
  max-width: 590px;
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
}

.capability-atlas .cap-copy > ul {
  grid-area: list;
  align-self: end;
  width: 100%;
  margin: 38px 0 0;
  padding-top: 25px;
}

.capability-atlas .cap-copy > li {
  font-size: 14px;
}

.capability-atlas .cap-graphic {
  grid-area: graphic;
  align-self: stretch;
  width: 100%;
  min-height: 410px;
  margin: 0;
  padding: clamp(30px, 3vw, 48px);
  border: 1px solid rgba(139, 205, 188, .2);
  box-shadow: 0 35px 80px rgba(9, 40, 33, .18);
}

.capability-atlas .graphic-scorecard,
.capability-atlas .graphic-finance,
.capability-atlas .graphic-revenue,
.capability-atlas .graphic-forecast,
.capability-atlas .graphic-workforce,
.capability-atlas .graphic-studio {
  transform: perspective(1000px) rotateY(-2deg);
}

.capability-atlas .cap-copy:nth-child(even) .cap-graphic {
  transform: perspective(1000px) rotateY(2deg);
}

.capability-atlas .graphic-bars,
.capability-atlas .forecast-stack,
.capability-atlas .waterfall,
.capability-atlas .pace-line {
  height: 235px;
}

.capability-atlas .graphic-scorecard strong,
.capability-atlas .graphic-finance > strong,
.capability-atlas .graphic-revenue > strong,
.capability-atlas .graphic-forecast > strong {
  font-size: clamp(34px, 3vw, 50px);
}

.capability-atlas .productivity-ring {
  width: 220px;
  height: 220px;
  flex-basis: 220px;
}

.capability-atlas .productivity-ring strong {
  font-size: 54px;
}

.capability-atlas .workforce-metrics {
  gap: 20px;
}

.capability-atlas .workforce-metrics span {
  padding-bottom: 16px;
  font-size: 10px;
}

.capability-atlas .studio-mini-core {
  width: 142px;
  height: 142px;
}

.capability-atlas .studio-mini-core strong {
  font-size: 22px;
}

.capability-atlas .restored-studio-visual {
  display: flex;
  align-self: start;
  min-height: 0;
  padding: clamp(26px, 2.6vw, 44px);
  transform: perspective(1000px) rotateY(2deg);
}

.capability-atlas .restored-studio-visual[hidden] {
  display: none;
}

.capability-atlas .restored-studio-visual .composition-stage {
  min-height: 330px;
}

.capability-atlas.is-motion-ready .cap-copy > span,
.capability-atlas.is-motion-ready .cap-copy h3,
.capability-atlas.is-motion-ready .cap-copy > p,
.capability-atlas.is-motion-ready .cap-copy > ul,
.capability-atlas.is-motion-ready .cap-copy .cap-graphic {
  opacity: 0;
  transition: opacity .9s ease, transform 1.05s cubic-bezier(.16, 1, .3, 1);
}

.capability-atlas.is-motion-ready .cap-copy > span,
.capability-atlas.is-motion-ready .cap-copy h3,
.capability-atlas.is-motion-ready .cap-copy > p,
.capability-atlas.is-motion-ready .cap-copy > ul {
  transform: translateX(-72px);
}

.capability-atlas.is-motion-ready .cap-copy:nth-child(even) > span,
.capability-atlas.is-motion-ready .cap-copy:nth-child(even) h3,
.capability-atlas.is-motion-ready .cap-copy:nth-child(even) > p,
.capability-atlas.is-motion-ready .cap-copy:nth-child(even) > ul {
  transform: translateX(72px);
}

.capability-atlas.is-motion-ready .cap-copy .cap-graphic {
  transform: translateX(90px) scale(.96);
}

.capability-atlas.is-motion-ready .cap-copy:nth-child(even) .cap-graphic {
  transform: translateX(-90px) scale(.96);
}

.capability-atlas.is-motion-ready .cap-copy.in-view > span,
.capability-atlas.is-motion-ready .cap-copy.in-view h3,
.capability-atlas.is-motion-ready .cap-copy.in-view > p,
.capability-atlas.is-motion-ready .cap-copy.in-view > ul,
.capability-atlas.is-motion-ready .cap-copy.in-view .cap-graphic {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.capability-atlas.is-motion-ready .cap-copy.in-view h3 { transition-delay: .07s; }
.capability-atlas.is-motion-ready .cap-copy.in-view > p { transition-delay: .14s; }
.capability-atlas.is-motion-ready .cap-copy.in-view > ul { transition-delay: .21s; }
.capability-atlas.is-motion-ready .cap-copy.in-view .cap-graphic { transition-delay: .1s; }

@media (max-width: 900px) {
  .capability-atlas .cap-copy,
  .capability-atlas .cap-copy:nth-child(even),
  .capability-atlas .cap-copy:nth-child(3n),
  .capability-atlas .cap-copy:nth-child(n + 4),
  .capability-atlas .cap-copy:nth-child(n + 5) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "title"
      "copy"
      "graphic"
      "list";
    gap: 0;
    min-height: 0;
    padding: 70px 34px;
  }

  .capability-atlas .cap-copy > span {
    margin-bottom: 30px;
  }

  .capability-atlas .cap-copy h3 {
    max-width: 680px;
  }

  .capability-atlas .cap-graphic {
    min-height: 350px;
    margin-top: 42px;
    transform: none;
  }
}

@media (max-width: 560px) {
  .capability-atlas .cap-copy,
  .capability-atlas .cap-copy:nth-child(even),
  .capability-atlas .cap-copy:nth-child(3n),
  .capability-atlas .cap-copy:nth-child(n + 4),
  .capability-atlas .cap-copy:nth-child(n + 5) {
    padding: 60px 23px;
  }

  .capability-atlas .cap-copy h3 {
    font-size: 36px;
    letter-spacing: -1.8px;
  }

  .capability-atlas .cap-graphic {
    min-height: 280px;
    padding: 24px;
  }

  .capability-atlas .graphic-bars,
  .capability-atlas .forecast-stack,
  .capability-atlas .waterfall,
  .capability-atlas .pace-line {
    height: 150px;
  }

  .capability-atlas .productivity-ring {
    width: 130px;
    height: 130px;
    flex-basis: 130px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .capability-atlas.is-motion-ready .cap-copy > span,
  .capability-atlas.is-motion-ready .cap-copy h3,
  .capability-atlas.is-motion-ready .cap-copy > p,
  .capability-atlas.is-motion-ready .cap-copy > ul,
  .capability-atlas.is-motion-ready .cap-copy .cap-graphic {
    opacity: 1;
    transform: none;
    transition: none;
  }
}