/*
* Global button styling
*/
/*
* MEDIA QUERIES
* Breakpoints for responsive sites
*/
/*
* Breakpoint debugging
*/
/*
* SASS Parent append
* Useful if you want to add an append to the parent without writing it out again
* Usage: @include parent-append(":hover")
* Source: https://codepen.io/imkremen/pen/RMVBvq
*/
/*
* Skew
* Useful mixing to create skewed edges
* Usage: @include angle-edge(bottomright, 3deg, topleft, 3deg, #fff);
* Source: http://www.hongkiat.com/blog/skewed-edges-css/
*/
.block-business-model {
  position: relative;
  background: var(--wp--preset--color--light-green);
  padding: var(--wp--preset--spacing--medium);
}
.block-business-model .desktop {
  position: relative;
}
@media (orientation: portrait) {
  .block-business-model .desktop {
    display: none;
  }
}
.block-business-model .desktop .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.block-business-model .desktop .overlay .circle {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1em;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 21.67%;
  border-radius: 50%;
  z-index: 2;
  text-align: center;
  line-height: 1.1;
  -webkit-transition: width 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transition: width 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-delay: 300ms;
          transition-delay: 300ms;
  aspect-ratio: 1;
  cursor: pointer;
}
.block-business-model .desktop .overlay .circle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  z-index: -1;
  -webkit-transition: 450ms;
  transition: 450ms;
  -webkit-transition-delay: 650ms;
          transition-delay: 650ms;
}
.block-business-model .desktop .overlay .circle__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.block-business-model .desktop .overlay .circle__title span {
  display: inline-block;
  font-weight: 700;
  color: inherit;
  max-width: 140px;
  margin: auto;
  font-size: clamp(1.4rem, 1.4vw, 2.2rem);
  -webkit-transition: 650ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 650ms cubic-bezier(0.4, 0, 0.2, 1);
}
.block-business-model .desktop .overlay .circle__inner {
  display: grid;
  place-content: center;
  grid-template-rows: 0fr 0fr;
  -webkit-transition: 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transition: 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.block-business-model .desktop .overlay .circle__content {
  overflow: hidden;
}
.block-business-model .desktop .overlay .circle__content--inner {
  padding-top: 1em;
  max-width: 200px;
}
.block-business-model .desktop .overlay .circle__content--inner p,
.block-business-model .desktop .overlay .circle__content--inner ul {
  font-size: 14px;
  font-weight: 300;
  color: inherit;
  opacity: 0;
  -webkit-transition: 300ms ease;
  transition: 300ms ease;
  margin: 0;
}
@media (max-width: 1024px) {
  .block-business-model .desktop .overlay .circle__content--inner p,
  .block-business-model .desktop .overlay .circle__content--inner ul {
    font-size: 12px;
  }
}
.block-business-model .desktop .overlay .circle__content--inner ul {
  padding: 0;
  text-align: left;
  max-width: 180px;
}
.block-business-model .desktop .overlay .circle__content--inner ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--wp--preset--spacing--x-small);
  font-size: 14px;
  font-weight: 300;
}
.block-business-model .desktop .overlay .circle__content--inner ul svg {
  max-height: 25px;
  max-width: 28px;
}
.block-business-model .desktop .overlay .circle.purpose {
  top: 49%;
  left: 49.2%;
  color: #000;
  z-index: 3;
}
.block-business-model .desktop .overlay .circle.purpose::before {
  opacity: 1;
}
.block-business-model .desktop .overlay .circle.purpose .circle__title span {
  -webkit-transform: translate(0) !important;
          transform: translate(0) !important;
}
@media (max-width: 1024px) {
  .block-business-model .desktop .overlay .circle.purpose .circle__title span {
    max-width: 80px;
  }
}
.block-business-model .desktop .overlay .circle.purpose .circle__content--inner p {
  font-weight: 600;
}
.block-business-model .desktop .overlay .circle.purpose .circle__indicator {
  margin-top: 0.3em;
}
.block-business-model .desktop .overlay .circle.purpose .circle__indicator svg {
  max-width: 14px;
}
.block-business-model .desktop .overlay .circle.purpose .circle__indicator svg g {
  -webkit-transition: 200ms;
  transition: 200ms;
}
.block-business-model .desktop .overlay .circle.sub {
  width: 29.7%;
  color: #fff;
  -webkit-transition-delay: 200ms;
          transition-delay: 200ms;
}
.block-business-model .desktop .overlay .circle.sub > * {
  pointer-events: none;
}
.block-business-model .desktop .overlay .circle.sub .circle__title span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5em;
  font-size: var(--wp--preset--font-size--small);
}
.block-business-model .desktop .overlay .circle.sub .circle__title span svg {
  max-width: 12px;
  -webkit-transition: 200ms;
  transition: 200ms;
}
.block-business-model .desktop .overlay .circle.sub .circle__title span svg g {
  stroke: #fff;
}
@media (max-width: 1024px) {
  .block-business-model .desktop .overlay .circle.sub .circle__title span {
    font-size: var(--wp--preset--font-size--x-small);
  }
}
.block-business-model .desktop .overlay .circle.sub .circle__indicator {
  height: 0px;
  -webkit-transition: 450ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 450ms cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0.3em;
}
.block-business-model .desktop .overlay .circle.sub .circle__indicator svg {
  max-width: 14px;
}
.block-business-model .desktop .overlay .circle.sub .circle__indicator svg g {
  stroke: #fff;
  opacity: 0;
  -webkit-transition: 450ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 450ms cubic-bezier(0.4, 0, 0.2, 1);
}
.block-business-model .desktop .overlay .circle.vision {
  top: 49.4%;
  left: 34.4%;
}
.block-business-model .desktop .overlay .circle.vision::before {
  background: linear-gradient(135deg, #e54103 0%, var(--wp--preset--color--secondary) 100%);
}
.block-business-model .desktop .overlay .circle.vision .circle__title span {
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.block-business-model .desktop .overlay .circle.values {
  top: 26.4%;
  left: 56.7%;
}
.block-business-model .desktop .overlay .circle.values::before {
  background: var(--wp--preset--gradient--green);
}
.block-business-model .desktop .overlay .circle.values .circle__title span {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.block-business-model .desktop .overlay .circle.strategy {
  top: 72.4%;
  left: 56.7%;
}
.block-business-model .desktop .overlay .circle.strategy::before {
  background: var(--wp--preset--gradient--green-reverse);
}
.block-business-model .desktop .overlay .circle.strategy .circle__title span {
  -webkit-transform: translate(0%, 100%);
          transform: translate(0%, 100%);
}
.block-business-model .desktop .overlay .circle:hover {
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
  width: 240px;
}
.block-business-model .desktop .overlay .circle:hover::before {
  opacity: 1;
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
}
.block-business-model .desktop .overlay .circle:hover.sub {
  width: 300px;
}
.block-business-model .desktop .overlay .circle:hover.sub .circle__title svg {
  opacity: 0;
}
.block-business-model .desktop .overlay .circle:hover .circle__indicator {
  height: 14px;
  opacity: 0;
}
.block-business-model .desktop .overlay .circle:hover .circle__indicator svg .outline {
  opacity: 0;
}
.block-business-model .desktop .overlay .circle:hover .circle__indicator svg g {
  opacity: 0;
}
.block-business-model .desktop .overlay .circle:hover .circle__indicator svg .cross {
  opacity: 0;
  -webkit-transform: rotate(45deg) translate(3px, -7px);
          transform: rotate(45deg) translate(3px, -7px);
}
.block-business-model .desktop .overlay .circle:hover .circle__title span {
  -webkit-transform: translateX(calc(15px - 0.5em));
          transform: translateX(calc(15px - 0.5em));
}
.block-business-model .desktop .overlay .circle:hover .circle__inner {
  grid-template-rows: 0fr 1fr;
}
.block-business-model .desktop .overlay .circle:hover .circle__content--inner ul,
.block-business-model .desktop .overlay .circle:hover .circle__content--inner p {
  opacity: 1;
  -webkit-transition-delay: 450ms;
          transition-delay: 450ms;
}
@media (orientation: landscape) {
  .block-business-model .mobile {
    display: none;
  }
}