.interactive-diagram {
  position: relative;
  width: 100%;
  /*background-color: var(--primary-color-1);*/
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.25) 100%), linear-gradient(0deg, #004A33 0%, #004A33 100%);
  color: var(--mono1);
}

.interactive-diagram__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.interactive-diagram__bg-stack {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.interactive-diagram__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(7.5rem);
  opacity: 0;
  transition: opacity 0.7s ease;
  will-change: opacity;
  transform: scale(1);
}

.interactive-diagram__bg.is-active {
  opacity: 1;
}

.interactive-diagram__bg-tint {
  position: absolute;
  inset: 0;
  /*background-color: var(--primary-color-1);*/
  mix-blend-mode: multiply;
  opacity: 0.6;
}

.interactive-diagram__bg-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.01);
}

.interactive-diagram__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  /*display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8rem;
  gap: 6rem;*/
  max-width: 144rem;
  margin: 0 auto;
}

.interactive-diagram__static {
    background: var(--mono1);
    padding: 98px 0;
}
.interactive-diagram-static__diagram{
	margin: 0 auto;
  position: relative;
  width: 57rem;
  height: 57rem;
  flex-shrink: 0;
}

.interactive-diagram-static__diagram svg {
  width: 100%;
  height: 100%;
  display: block;
}

.interactive-diagram-static__diagram .o6-outer{
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1;
}

.interactive-diagram-static__diagram .o6-arc {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.interactive-diagram-static__diagram .o6-node {
  fill: transparent;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1;
  transition: fill 0.6s ease, stroke 0.6s ease;
}

.interactive-diagram-static__diagram .o6-label{
  font-family: var(--font-light);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.6rem;
  fill: var(--mono1);
  text-anchor: middle;
  dominant-baseline: central;
  transition: fill 0.6s ease;
  pointer-events: none;
}

.interactive-diagram-static__diagram .o6-center{
  font-family: var(--font-light);
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.6rem;
  fill: var(--mono1);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.interactive-diagram__diagram {
  position: relative;
  width: 60rem;
  height: 55.9rem;
  flex-shrink: 0;
}

.interactive-diagram__diagram svg {
  display: block;
  width: 100%;
  height: 100%;
}

.interactive-diagram__diagram .o6-node {
  fill: #ffffff;
  fill-opacity: 0.25;
  transition: fill-opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.interactive-diagram__diagram .o6-node.is-active {
  fill-opacity: 1;
}

.interactive-diagram__diagram .o6-label{
  font-family: var(--font-light);
  font-weight: 400;
  font-size: 2rem;
  line-height: 2rem;
  fill: var(--mono1);
  text-anchor: middle;
  dominant-baseline: central;
  transition: fill 0.6s ease;
  pointer-events: none;
}

.interactive-diagram__diagram .o6-center-disc {
  fill: #97ff8b;
}

.interactive-diagram__diagram .o6-center {
  font-family: var(--font-light);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2rem;
  fill: var(--primary-color-1);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

/*.interactive-diagram__diagram, .interactive-diagram-static__diagram {
  position: relative;
  width: 57rem;
  height: 57rem;
  flex-shrink: 0;
}

.interactive-diagram__diagram svg, .interactive-diagram-static__diagram svg {
  width: 100%;
  height: 100%;
  display: block;
}

.interactive-diagram__diagram .o6-outer, .interactive-diagram-static__diagram .o6-outer{
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1;
}

.interactive-diagram__diagram .o6-arc, .interactive-diagram-static__diagram .o6-arc {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.interactive-diagram__diagram .o6-node, .interactive-diagram-static__diagram .o6-node {
  fill: transparent;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 1;
  transition: fill 0.6s ease, stroke 0.6s ease;
}

.interactive-diagram__diagram .o6-node.is-active {
  fill: var(--mono1);
  stroke: var(--mono1);
}

.interactive-diagram__diagram .o6-label, .interactive-diagram-static__diagram .o6-label{
  font-family: var(--font-light);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.6rem;
  fill: var(--mono1);
  text-anchor: middle;
  dominant-baseline: central;
  transition: fill 0.6s ease;
  pointer-events: none;
}

.interactive-diagram__diagram .o6-label.is-active {
  fill: var(--primary-color-1);
}

.interactive-diagram__diagram .o6-center, .interactive-diagram-static__diagram .o6-center{
  font-family: var(--font-light);
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.6rem;
  fill: var(--mono1);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}*/




.interactive-diagram-static__diagram .o6-outer, .interactive-diagram-static__diagram .o6-node, .interactive-diagram-static__diagram .o6-arc{
	stroke: var(--primary-color-1);
}
.interactive-diagram-static__diagram .o6-label, .interactive-diagram-static__diagram .o6-center{
	fill: var(--primary-color-1);
}

.interactive-diagram__cards {
  position: relative;
  width: 100%;
  height: 100vh;
  flex-shrink: 0;
  overflow: hidden;
}

.interactive-diagram__card {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  top: 50%;
  transform: translateY(calc(-50% + var(--y, 0vh)));
  background-color: var(--mono1);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 1;
  pointer-events: auto;
  will-change: transform;
}

.interactive-diagram__card-image {
  width: 100%;
  height: 20rem;
  overflow: hidden;
  flex-shrink: 0;
}

.interactive-diagram__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.interactive-diagram__card-body {
  padding: 2.8rem;
  display: flex;
  flex-direction: column;
  color: var(--primary-color-1);
}

.interactive-diagram__card-title {
  margin: 0 0 10px 0;
  font-family: var(--font-light);
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.6rem;
  color: var(--primary-color-1);
}

.interactive-diagram__card-subtitle{
  margin: 0 0 10px 0;
  font-family: var(--font-light);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2rem;
  color: var(--primary-color-1);
}

.interactive-diagram__card-desc {
  margin: 0;
  font-family: var(--font-light);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2rem;
  color: var(--primary-color-6);
}

.interactive-diagram__card-desc p:last-child{
  margin-bottom: 0;
  font-weight: 400;
}

.interactive-diagram__card-link{
	margin-top: 28px;
}

.interactive-diagram__card-link .cta-arrow-link{
	padding: 0;
}

.interactive-diagram__card-link .cta-arrow-link .link_text ~ .icon{
	top: -2px;
    margin-left: 8px;
}
.interactive-diagram__card-link .cta-arrow-link .link_text ~ .icon:before{
	content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(/~/media/Images/B/Barratt-Developments-V2/icons/icon-arrow-right) no-repeat center;
    background-size: contain;
    vertical-align: middle;
}

body.ip3-edit .interactive-diagram__card{
	position: relative;
    top: auto;
    transform: none;
    left: auto;
    right: auto;
}

body.ip3-edit .interactive-diagram__sticky{
	position: relative;
}

body.ip3-edit .interactive-diagram__cards{
	overflow: scroll;
}



/* Responsive */
@media only screen and (max-width: 1279px) {
  .interactive-diagram__diagram, .interactive-diagram-static__diagram {
    width: 48rem;
    height: 48rem;
  }
  .interactive-diagram__inner{
    	padding:0 20px;
    }

}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.interactive-diagram {
      height: 460px;
    }
    .interactive-diagram__sticky {
      position: relative;
      height: 460px;
    }
    .interactive-diagram__inner > .container{
    	height: 100%;
    }
    .interactive-diagram__inner > .container > .row{
    	height: 100%;
    	flex-wrap: nowrap;
    }
    .interactive-diagram:has(.interactive-diagram__static){
    	height: auto;
    }
}

@media only screen and (max-width: 991px) {
  .interactive-diagram-static__diagram {
    width: 26.6rem;
    height: 26.6rem;
  }

  .interactive-diagram__diagram{
      width: 31rem;
      height: 31rem;
  }

  .interactive-diagram__card-image{
  	height: 14.8rem;
  }

  .interactive-diagram__cards {
    width: 100%;
    max-width: 26.5rem;
  }

  .interactive-diagram__card-body {
    padding: 2.17rem 2.149rem;
  }

  .interactive-diagram__card-title {
    font-size: 1.4rem;
    line-height: 1.9rem;
    font-weight: 400;
  }

  .interactive-diagram__card-desc {
    font-size: 1.2rem;
    line-height: 1.6rem;
    font-weight: 400;
  }
  .interactive-diagram__diagram .o6-label, .interactive-diagram-static__diagram .o6-label{
    font-size: 2.6rem;
    line-height: 2.6rem;
  }
  .interactive-diagram-static__diagram .o6-center{
    font-size: 2.8rem;
    line-height: 2.6rem;
  }
  .interactive-diagram__diagram .o6-center{
      font-size: 1.8rem;
      line-height: 2rem;
  }
  .interactive-diagram__card {
    border-radius: 2.14rem;
  }
  .interactive-diagram__static{
  	padding-bottom: 42px;
        padding-top: 42px;
  }
}

@media only screen and (max-width: 767px) {
  .interactive-diagram__sticky {
      position: relative;
      height: auto;
      padding: 5.6rem 0;
    }
    .interactive-diagram__inner{
    	padding:0 ;
    }
    .interactive-diagram__diagram, .interactive-diagram-static__diagram{
    	margin: 0 auto;
    }
    .interactive-diagram__inner > .container > .row{
    	gap: 5.2rem;
        flex-direction: column;
    }
    .interactive-diagram__cards {
    	max-width: 37rem;
    }
    .interactive-diagram__cards {
    	height: auto;
        display: flex;
        flex-direction: column;
        gap: 5.6rem;
    }
    .interactive-diagram__card {
      position: relative;
      inset: auto;
      width: 100%;
      height: auto;
      opacity: 1;
      transform: none;
      pointer-events: auto;
      border-radius: 18px;
    }
    .interactive-diagram__diagram .o6-node.is-active {
      fill: transparent;
      stroke: rgba(255, 255, 255, 0.95);
    }

    .interactive-diagram__diagram .o6-label.is-active {
      fill: var(--mono1);
    }
    .interactive-diagram__card-title{
    	margin-bottom: 1.4rem;
    }
    .interactive-diagram__card-body{
    	padding: 2.4rem 2.4rem 3.2rem;
    }
    .interactive-diagram__card-title {
        font-size: 1.8rem;
        line-height: 2.6rem;
        font-weight: 400;
    }
    .interactive-diagram__card-desc {
        font-size: 1.4rem;
        line-height: 2rem;
        font-weight: 400;
    }
    .interactive-diagram__card-image {
        height: 17.2rem;
    }
}

@media only screen and (max-width: 575px) {
  .interactive-diagram-static__diagram {
    width: 30rem;
    height: 30rem;
  }
  .interactive-diagram__diagram{
    width: 33rem;
    height: 33rem;
  }
  .interactive-diagram__diagram .o6-label, .interactive-diagram-static__diagram .o6-label{
    font-size: 2.6rem;
    line-height: 2.6rem;
  }
  .interactive-diagram-static__diagram .o6-center{
    font-size: 2.8rem;
    line-height: 2.6rem;
  }
}