.section-cb_callout {
  z-index: 50;
  position: relative;
  transform: translateZ(0);
}

.cb_callout {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
}
.cb_callout .button__container {
  margin-top: 36px;
}

.cb_callout__header {
  background-color: var(--purple);
}
.cb_callout__header .site__inner {
  position: relative;
  padding-top: 75px;
  padding-bottom: 56px;
}
@supports (padding: clamp(1em, 1vw, 1em)) {
  .cb_callout__header .site__inner {
    padding-top: clamp(75px, 12.3611111111vw, 178px);
    padding-bottom: clamp(56px, 8.6111111111vw, 124px);
  }
}

.cb_callout__heading {
  letter-spacing: 0.05em;
  font-weight: 900;
  font-size: 24px;
  line-height: 1.1666666667;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--white);
}
@supports (font-size: clamp(1em, 1vw, 1em)) {
  .cb_callout__heading {
    font-size: clamp(24px, 3vw, 42px);
  }
}
@media (max-width: 768px) {
  .cb_callout__heading {
    text-align: center;
  }
}
@media (min-width: 769px) {
  .cb_callout__heading {
    margin-left: 50px;
  }
  @supports (margin: clamp(1em, 1vw, 1em)) {
    .cb_callout__heading {
      margin-left: clamp(20px, 3.4722222222vw, 50px);
    }
  }
}

.cb_callout__header__donut {
  position: absolute;
  top: 0;
  right: 17.6%;
  width: 15.7333333333%;
  transform: translateY(-50%);
  color: var(--white);
}
@media (min-width: 769px) {
  .cb_callout__header__donut {
    right: 13.2876712329%;
    width: 8.9726027397%;
  }
}
.cb_callout__header__donut svg {
  display: block;
  width: 100%;
  height: auto;
}

.cb_callout__header__accent {
  position: absolute;
  bottom: -92.8571428571%;
  right: 5.4794520548%;
  width: 47.9452054795%;
  filter: blur(50px);
  color: var(--purple);
}
@media (max-width: 768px) {
  .cb_callout__header__accent {
    display: none;
  }
}
.cb_callout__header__accent svg {
  display: block;
  width: 100%;
  height: auto;
}

.cb_callout__background {
  position: relative;
  margin-top: -30px;
}
@supports (margin: clamp(1em, 1vw, 1em)) {
  .cb_callout__background {
    margin-top: calc(-30px - clamp(0px, 2.7777777778vw, 40px));
  }
}

.cb_callout__background__image__primary {
  display: block;
  height: auto;
  border-radius: 20px;
}
@media (max-width: 768px) {
  .cb_callout__background__image__primary {
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 769px) {
  .cb_callout__background__image__primary {
    border-radius: 50px;
    max-width: 800px;
  }
}

.cb_callout__background__image__secondary {
  z-index: 5;
  position: relative;
  display: block;
  width: 28.8%;
  height: auto;
  aspect-ratio: 108/77;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
  filter: drop-shadow(0 8px 20px var(--black_16));
}
@media (max-width: 768px) {
  .cb_callout__background__image__secondary {
    margin-top: -10%;
    margin-left: 13.3333333333%;
  }
}
@media (min-width: 769px) {
  .cb_callout__background__image__secondary {
    position: absolute;
    top: 7.4380165289%;
    left: 72.5490196078%;
    width: 23.7254901961%;
  }
}

.cb_callout__background__accent {
  z-index: 10;
  position: absolute;
  top: 40%;
  left: -10%;
  width: 21.3333333333%;
  color: var(--purple);
}
@media (min-width: 769px) {
  .cb_callout__background__accent {
    top: 55.9440559441%;
    left: -8.8235294118%;
    width: 14.0196078431%;
  }
}
.cb_callout__background__accent svg {
  display: block;
  width: 100%;
  height: auto;
}

.cb_callout__content {
  position: relative;
  margin-top: 40px;
}
@media (min-width: 769px) {
  .cb_callout__content {
    max-width: 800px;
  }
  @supports (margin: clamp(1em, 1vw, 1em)) {
    .cb_callout__content {
      margin-top: clamp(40px, 3.8888888889vw, 56px);
      padding-left: clamp(20px, 3.4722222222vw, 50px);
    }
  }
}

.cb_callout__content__accent {
  position: absolute;
  bottom: 7.3746312684%;
  right: -8.8495575221%;
  width: 23.5416666667%;
  color: var(--purple);
}
@media (max-width: 768px) {
  .cb_callout__content__accent {
    display: none;
  }
}
.cb_callout__content__accent svg {
  display: block;
  width: 100%;
  max-width: 339px;
  height: auto;
}

.cb_callout__copy.site__copy h3 {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  text-wrap: pretty;
  color: var(--black);
}
@supports (font-size: clamp(1em, 1vw, 1em)) {
  .cb_callout__copy.site__copy h3 {
    font-size: clamp(20px, 1.7142857143vw, 24px);
  }
}
.cb_callout__copy.site__copy h3 + p {
  margin-top: 0.6125em;
}
.cb_callout__copy.site__copy p, .cb_callout__copy.site__copy li {
  font-size: 16px;
  line-height: 1.5;
}
@supports (font-size: clamp(1em, 1vw, 1em)) {
  .cb_callout__copy.site__copy p, .cb_callout__copy.site__copy li {
    font-size: clamp(16px, 1.2857142857vw, 18px);
  }
}
.cb_callout__copy.site__copy a {
  text-decoration-color: transparent;
  color: var(--purple);
}
.cb_callout__copy.site__copy a:hover, .cb_callout__copy.site__copy a:focus {
  text-decoration-color: currentColor;
  color: var(--purple_dark);
}