:root {
    --block-padding: 70px;
    --block-padding-negative: -70px;
    --block-box-shadow-padding: 4rem;
  }

  .block-page-template .main-hero-area > .block-module .background {
    padding-top: var(--spacing-xl);
  }

  .block-module-group-background {
    background-repeat: no-repeat;
    background-size: cover;
  }

  .block-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    .sub-text-1 {
      margin-top: 1.5em;
    }
    .eyebrow-text {
      margin-bottom: 0.75em;
    }
    &.text-align-center {
      h1,
      h2,
      .header-1,
      .header-2,
      .sub-text-1,
      .sub-text-2 {
        padding-left: 10%;
        padding-right: 10%;
      }
    }
  }

  .block-module {
    .html-formatting {
      h1,
      .header-1,
      h2,
      .header-2 {
        margin-bottom: 0.5em;
      }
    }
    &.box-shadow .inner-spacing,
    &[class*="overlap-top"]:not(.swiper-module, .image-module) .inner-spacing {
      box-shadow: 0px 2px 14px 0px rgba(128, 135, 144, 0.18);
      border-radius: 10px;
      padding: var(--block-box-shadow-padding);
      width: calc(100% + calc(var(--block-box-shadow-padding) * 2));
      margin-left: calc(var(--block-box-shadow-padding) * -1);
    }
    /* Not needed?
    &.box-shadow .background { 
      padding-top: var(--block-box-shadow-padding);
      padding-bottom: var(--block-box-shadow-padding);
    }
    */
    &.wide-module .inner-spacing {
      width: calc(100% + calc(var(--block-box-shadow-padding) * 2));
      margin-left: calc(var(--block-box-shadow-padding) * -1);
    }
    .block-module-header {
      margin-bottom: var(--spacing-lg);
    }
    .background,
    .inner-background {
      background-size: cover;
    }
    &[class*="overlap-top"]:not(.swiper-module, .image-module, .esg-gateway) .inner-background {
      background-color: var(--color-n00);
    }
    .spacing {
      padding-top: var(--block-padding);
      padding-bottom: var(--block-padding);
    }
    .offset-background {
      height: 0;
      background-color: transparent;
    }

    &.overlap-top-sm {
      .inner-spacing {
        margin-top: calc((var(--block-padding) * 2) * -1);
      }
      .offset-background {
        height: calc((var(--block-padding) * 2));;
      }
    }
    
    &.overlap-top-md {
      .inner-spacing {
        margin-top: calc((var(--block-padding) * 4) * -1);
      }
      .offset-background {
        height: calc((var(--block-padding) * 4));
      }
    }

    &.overlap-top-lg {
      .inner-spacing {
        margin-top: calc((var(--block-padding) * 4) * -1);
      }
      .offset-background {
        height: calc((var(--block-padding) * 4));;
      }
    }

    &.offset-bottom-sm {
      .background {
        padding-bottom: calc((var(--block-padding) * 1));
      }
    }
    &.offset-bottom-md {
      .background {
        padding-bottom: calc((var(--block-padding) * 2));
      }
    }
    &.offset-bottom-lg {
      .background {
        padding-bottom: calc((var(--block-padding) * 3));
      }
    }
  }

  .main-hero-area {
    position: relative;
    overflow-y: hidden;
    >video {
      position:absolute;
      top: 0;
      left: 0;
    }
    .inner-background {
      background-image: none !important;
    }
    .spacing {
      padding-top: 100px;
    }
    .content > div > div.text:nth-child(1) {
      width: 60%;
    }
    .content > div > div.media-container:nth-child(2) {
      width: 28%;
    }
    .content > div.hubspot-form > div.text:nth-child(1) {
      width: 45%;
    }
    .content > div.hubspot-form > div.media-container:nth-child(2) {
      width: 45%;
    }
  }

  .hero-module {
    .background {
      background-color: var(--color-n00);
    }
    .image {
      max-width: 465px;
      margin-right: 7%;
      flex: 2;
      border-radius: 8px;
      .overlay {
        max-width: 70%;
        padding:40px;
        background: linear-gradient(191deg, rgba(42, 33, 49, 0.85) 40%, rgba(101, 147, 147, 0.43) 100%);
        border-radius: 8px 0 0 8px;
      }
    }
    .main-text {
      flex: 1 2;
    }
  }

  .swiper-module {
    .swiper {
      width:100%;
      height:400px;
    }
    /* messes with slidesPerView
    .swiper-slide {
      width: 315px !important;
    }*/
    .swiper-scrollbar {
      background-color: var(--color-g200);
      .swiper-scrollbar-drag {
        background-color: var(--color-n00);
      }
    }
    /* &:last-child {
      margin-bottom: var(--spacing-negative-lg);
    } */
  }

  .image-module {
    .overlay {
      min-width: 60%;
      max-width: 75%;
    }
  }

  .list-module {
    h3 {
      margin-bottom: 1em;
    }
    .bar {
      background: var(--colored-bar-vertical);
      width: 6px;
      margin-right: 2.5%;
      border-radius: 5px;
    }
    .text {
      flex-shrink: 2;
      max-width: 55%;
      margin-right: 10%;
      &:last-child {
        max-width: 100%;
        margin-right: 0;
      }
    }
    .image {
      margin-left: auto;
      max-width: 320px;
      align-self: center;
    }
    .content:not(:last-child) {
      margin-bottom: 7%;
      padding-bottom: 7%;
      border-bottom: 0.8px solid var(--color-section-border);
    }
  }

  .text-infobox-module {
    h2 {
      margin-bottom: 50px;
    }
    .info-square {
      min-width: 450px;
      margin-left: 15%;
    }
  }

  .info-squares-module {
    .info-square-container {
      gap: 31px;
    }
    .info-square {
      position: relative;
      align-self: stretch;
      width: 31%;
      min-height: 250px;
      h3 {
        font-weight: 700;
      }
      .html-formatting h3.tablet-header {
        padding:0;
      }
      .content {
        height: 100%;
        /* why was this here? 
        border: 1px solid var(--color-section-border); */
      }
      .icon {
        position: absolute;
        right: -40px;
        font-size: 18px;
        border: 1px solid var(--color-section-border);
        background-color: var(--color-n00);
        text-align: center;
        color: #B6BEC3;
        border-radius: 100px;
        width: 50px;
        height: 50px;
        z-index: 2000;
      }
      .divider {
        margin:30px 0;
      }
      ul {
        list-style-position: outside;
        list-style-type: '\f00c';
        margin-left: 15px;
        ::marker {
          text-rendering: auto;
          -webkit-font-smoothing: antialiased;
          font-family: "Font Awesome 6 Pro";
        }
      }
      li {
        font-weight: 400;
        margin:10px 0;
        padding-left: 10px;
      }
      &.full-image-display {
        .full-image {
          width: 100%;
          margin-bottom: 20px;
          max-width: fit-content;
          border-radius: 8px 8px 0 0;
        }
      }
    }
    .info-square:nth-child(1) {
      z-index: 1200;
    }
    .info-square:nth-child(2) {
      z-index: 1100;
    }
    .info-square:last-child {
      .icon {
        display: none !important;
      }
    }
    .arrow-container .info-square {
      width: 33%; 
    }
  }

  .media-block-module {
    .content > div > div:nth-child(1) {
      width: 40%;
      img:not(.icon-image) {
        width: 100%;
      }
    }
    .content > div > div:nth-child(2) {
      width: 55%;
    }
    .image-with-overlay {
      width: 100%;
    }
    .media-container:has(>img) {
      text-align: right;
    }

    .content > div {
      >.text:has( + .info-on-square) {
        width: 50%;
      }
      >div:is(.info-on-square) {
        width: 38%;
      }
    }
  }

  .numbers-block-module {
    sup {
      color: var(--color-sg800);
    }
    .number-block {
      >.font-size-number-counter {
        color: var(--color-dpMain);
      }
    }
    .number {
      font-weight: 800;
    }
    .numbers-container {
      gap: 80px;
      img {
        max-width: 350px;
        max-height: fit-content;
      }
      >div:nth-child(1) {
        width: 100%;
        .number-block {
          min-width:30%;
          h2 {
            font-weight: 800;
          }
        }
        .number-block:nth-child(2) {
          margin:0 3%;
          padding:0 3%;
          border-left:1px solid var(--color-section-border);
          border-right:1px solid var(--color-section-border);
        }
        .number-block:nth-child(2):last-child {
          margin-right: 0;
          padding-right: 0;
          border-right:none;
        }
        .divider {
          display: none;
        }
        &:has(>:last-child:nth-child(2)){
          justify-content: center !important;
        }
      }
      >div:nth-child(2) {
        flex-wrap: wrap;
        .number-block:nth-child(1),
        .number-block:nth-child(2) {
          width: 45%;
        }
        .font-size-number-counter {
          font-size: 3rem;
          letter-spacing: 0.05em;
        }
      }
    }
  }

  .testimonials-block-module {
    .content {
      border-radius: 0 10px 10px 0;
    }
    .client {
      padding:3.5rem 2.5rem;
      width: 30%;
      border-radius: 10px 0 0 10px;
      background-color: var(--color-ag400);
    }
    .quote {
      padding:3.5rem;
      width: 70%;
      blockquote {
        font-style: italic;
        margin-bottom: 1.5em;
      }
    }
    .fa-quote-left {
      display: block;
      font-size: 1.9rem;
      margin-bottom: 10px;
      color: var(--color-g200);
    }
  }

  .accordion-block-module {
    .accordion-container .iss-ac {
      border-bottom: 1px solid var(--color-section-border);
    }
    button {
      display: flex;
      justify-content: space-between;
      width: 100%;
      color: var(--color-g200);
      text-align: left;

      span {
        max-width: 75%;
      }
    }
  }

  .tabbed-block-module {
    .inner-background {
      /* static inner bgcolor for this block */
      background-color: var(--color-n00); 
    }
    .tabs {
      width: 38%;
    }
    li {
      padding:20px 0;
      border-bottom: 1px solid var(--color-section-border);
    }
    li.active {
      button {
        color: var(--color-dp200);
        justify-content: space-between;
      }
      button::after {
        content: "\f054";
        font-size: 0.8em;
        font-weight: 900;
        margin-left: 5px;
        opacity: 1;
      }
    }
    li.tab-indent {
      padding-left: 1.5em;
    }
    button {
      width: 100%;
      text-align: left;
      color: var(--color-g100);
    }
    button::after {
      opacity: 0;
    }
    .info-square {
      width: 95%;
      /* Removed background squares as per request
      .content {
        background-image: 
          url('../../images/background-squares-br.png'); 
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: contain;
      } */
    }
    .swiper-tabbed-block {
      overflow-y: hidden;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      overflow: hidden;
      list-style: none;
      padding:5px;
      z-index: 1;
      display: block;
    }
  }

  .awards-block-module {
    .award-container {
      gap: 80px;

      /* Removed background squares as per request
      background-image: 
      url('../../images/background-squares-br.png'), 
      url('../../images/background-squares-tl.png');
      background-repeat: no-repeat, no-repeat;
      background-position: bottom right, top left;
      background-size: contain, contain; */

      /* Removed background squares as per request
      &[style*="background-color"] {
        background-image: 
          url('../../images/background-squares-surface-br.png'), 
          url('../../images/background-squares-surface-tl.png');
      } */
    }
    figure {
      max-width: 220px;
    }
    .award-text {
      flex: 1 2 100%;
      .award-pretext {
        margin-bottom: 10px;
        letter-spacing: 0.2em;
      }
    }
    hr {
      width: 50%;
      max-width: 300px;
      margin:30px 0;
      border: none;
      border-bottom: 1px solid var(--color-section-border);
    }
    .info-square .content {
      padding: 4rem;
    }
  }

  .form-block-module {
    .inner-spacing {
      box-shadow: 0px 2px 14px 0px rgba(128, 135, 144, 0.18);
      border-radius: 10px;
    }
    .intro,
    .form {
      padding:var(--block-box-shadow-padding);
      width: 50%;
      max-width: 50%;
      .form-area {
        padding:0;
        box-shadow: none;
        .header-4 {
          margin-bottom: 1em;
        }
      }
    }
    .form {
      border-radius: 0 10px 10px 0;
    }
    .intro .header-2 {
      margin:10px 0;
    }
  }

  .info-points-block-module {
    header {
      margin-bottom: var(--spacing-md);
      padding-bottom: var(--spacing-md);
      gap: 40px;
      h2 {
        width: 40%;
        line-height: 1.2em;
      }
      >div {
        width: 60%;
      }
    }
    .info-square-container {
      gap: 45px;
      .info-square {
        width: 30%;
      }
    }
  }

  .blocks-navigation {
    position: sticky;
    top: 67px;
    z-index: 9000;
    margin-top: calc((var(--block-padding) * 1.25) * -1);
    /*margin-top: calc(var(--block-padding-negative) - 50px);*/
    &.isSticky {
     .isSticky-container  {
      width: fit-content;
      max-width: 100%;
      margin: 0 auto;
     }
     .inner-spacing {
      max-width: 100%;
      margin-left: 0;
      border-radius: 0;
      padding: 0;
     }
      >.container {
        max-width: 100%;
        width: 100%;
        padding: 0;
      }
    }
    .isSticky-container {
      width: auto;
      max-width: 100%;
      margin: 0 auto;
    }
    .inner-spacing {
      padding: 20px 40px !important;
      max-width: fit-content;
      background-color: var(--color-n50);
      border-bottom-right-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
    }
    h4 {
      color: var(--color-g100);
      font-weight: 700;
      margin: 0 ;
    }
    li {
      font-weight: 600;
      color: var(--color-gMain);
      margin:0 20px;
    }
  }

  .blocks-navigation:not(.mobile-view) + section {
    .spacing {
      padding-top: 0;
    }
    .inner-background {
      border-top-left-radius: 0 !important;
    }
    &[class*='overlap-top-'] {
      .inner-spacing {
        margin-top: 0 !important;
      }
      .offset-background {
        height: 0 !important;
      }
      .background {
        background-color: transparent !important;
      }
    }
  }

  /* offset for the block-nav moving up into hero */
  .main-hero-area:has( + .blocks-navigation) {
    .inner-spacing {
      padding-bottom: calc((var(--block-padding) * 2));
    }
  }

  .timeline-block-module {
    .timeline-dates {
      width: 75px !important;
      min-width: 75px !important;
      margin-right: 10%;
      border-right: 1px solid #d9d9d9;
      flex-shrink: 0;
      ul,
      ul li {
        width: 100%;
        line-height: 1em;
      }
      ul li {
        cursor: pointer;
        color: #808790;
        font-weight: 500;
      }
      ul li:not(:last-child) {
        margin-bottom: 25px;
      }
      .date-circle {
        background-color: #fff;
        border: 1px solid #B6BEC3;
        width: 1.2em;
        height: 1.2em;
        border-radius: 50%;
        position: relative;
        right: -0.60em;
        >div {
          width: 100%;
          height: 100%;
          background-color: #B6BEC3;
          border-radius: 50%;
          border: 4px solid #fff;
        }
      }
      ul li.active {
        color: var(--color-sg800);
      }
      ul li.active > .date-circle > div {
        background-color: var(--color-sg800);
      }
    }
    .timeline-content {
      position: relative;
      width:100%;
      flex-grow: 1;
      overflow-y: hidden;
      .html-formatting {
        font-weight: 400;
      }
      .timeline-slide-container {
        position: absolute;
        top: 0;
        >div {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .html-formatting {
            margin: 0;
          }
        }
      }
      
    }
    .content > div > div:nth-child(1) {
      width: 35%;
    }
    .content > div > div:nth-child(2) {
      width: 60%;
    }
  }

  /* Phone Breakpoint (phone & tablet) */
@media (min-width: 0px) AND (max-width: 992px) {
  .block-module{
    &.wide-module .inner-spacing {
      width: 100%;
      margin-left: auto;
    }

    &.box-shadow .inner-spacing,
    &[class*="overlap-top"]:not(.swiper-module, .image-module) .inner-spacing {
      width: 100%;
      margin-left: 0;
    }
  }

  .block-page-template {
    background-color: #fff;
  }

  .swiper-module .offset-background {
    background-color: transparent !important;
  }

  .blocks-navigation {
    width: 100%;
    /* position: fixed;
    top: 165px; */
    margin: 0;
    padding:0;
    background-color: var(--color-n50);
    [class*="fa"] {
      font-size: 0.9em;
      font-weight: 700;
      margin-left: 0.5em;
    }
    >.container {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    .blocks-navigation-header {
      width: 100%;
      padding: 10px 0;
      text-align: center;
      color: var(--color-gMain);
      font-weight: 600;
    }
    .inner-spacing {
      padding:0 !important;
      margin:0 auto !important;
      width: 100% !important;
      max-width: 100% !important;
      box-shadow: none !important;
      border-radius: 0 !important;
    }
    .isSticky-container  {
      width: 100% !important;
      max-width: 100% !important;
    }
    ul {
      max-height: 0;
      overflow: hidden;
      background-color: #fff;
      li {
        text-align: center;
        padding: 9px 0;
        color: var(--color-g200);
      }
    }
    &.active {
      ul {
        padding-top: 20px;
        padding-bottom: 20px;
      }
      [class*="fa"]  {
        transform: rotate(90deg);
      }
    }
  }

  /* UNDO offset for the block-nav moving up into hero */
  .main-hero-area:has( + .blocks-navigation) {
    .inner-spacing {
      padding-bottom:0;
    }
  }

  .hero-module{
    .image,
    .main-text {
      max-width: 100%;
      width: 100%;
      display: block;
    }

    .media-container div > div:first-child,
    .d-lg-flex > div:first-child {
      margin-bottom: 60px;
    }
  }

  .media-block-module {
    .content > div:not(.timeline-container) {
      flex-direction: column;
    }
    .content > div > div:nth-child(1):not(.timeline-container) {
      width:100%;
      img:not(.icon-image) {
        width: 100%;
      }
    }
    .content > div > div:nth-child(2):not(.timeline-container) {
      width: 100%;
    }
    .content {
      .media-container:has(>img) {
        text-align: right;
      }
      .media-container {
        order: 1 !important;
      }
      .text.html-formatting {
        order: 0 !important;
        margin-bottom: 40px;
      }
    }
    .image-with-overlay {
      width: 100%;
    }
    
  }

  .main-hero-area {
    .content > div > .text.html-formatting {
      order: 0 !important;
      margin-bottom: 0;
      &:not(:last-child) {
        margin-bottom: 60px;
      }
    }
    .content > div > .media-container {
      order: 1 !important;
    }
    .spacing {
        padding-top: 40px;
        padding-bottom: 80px;
    }
  }

  .main-hero-area {
    .content > div.hubspot-form > div.text:nth-child(1) {
      width: 100%;
    }
    .content > div.hubspot-form > div.media-container:nth-child(2) {
      width: 100%;
      max-width: 500px;
      align-self: center;
    }
  }
  
  .form-block-module {
    .intro,
    .form {
      width: 100%;
      max-width: 100%;
    }
    .form {
      position: relative;
      border-radius: 0 0 10px 10px;
      border: none;
      top: 1px;
    }
  }

  .info-points-block-module {
    header {
      h2 {
        width: 100%;
        margin-bottom: 15px;
      }
      >div {
        width: 100%;
      }
    }
    .info-square-container {
      flex-direction: column;
      gap: 30px;
      .info-square {
        width: 100%;
      }
    }
  }

  .numbers-block-module {
    img,
    .divider {
      display: none;
    }
    .numbers-container > div {
      flex-direction: column;
    }
    .numbers-container {
      display: block !important;
      >div,
      >div:nth-child(1) {
        .number-block {
          width:100%;
          margin: 0;
          padding: 0;
          &:not(:last-child){
            width: 100%;
            margin-bottom: 40px !important;
            padding-bottom: 40px !important;
            border-bottom: 1px solid #D1D9E2;
          }
        }
        .number-block:nth-child(2) {
          margin:0;
          padding:0;
          border-left:none;
          border-right:none;
        }
      }
    }
  }

  .timeline-block-module {
    .text {
      order: 0 !important;
      margin-bottom: 60px;
    }
    .media-container {
      order: 1 !important;
      margin-bottom: 0;
    }
  }

  .info-squares-module {
    min-height: 0;
    .info-square-container {
      flex-direction: column;
      .mobile-wrapper {
        min-width: 250px;
        margin-right: 20px;
        padding-right: 20px;
        border-right: 1px solid var(--color-section-border);
      }
      .info-square {
        width: 100%;
        max-width: 100%;
        min-height: 0;
        .divider {
          display: none !important;
        }
        &.full-image-display {
          .full-image {
            width: 100%;
            margin-bottom: 0;
            max-width: fit-content;
            border-radius: 8px 0 0 8px;
          }
          .content {
            align-items: center;
          }
          .mobile-wrapper {
            margin: 0;
            padding: 0;
            border-right: none;
          }
          .html-formatting {
            margin: 0;
          }
        }
      }
    }
  }
}

/* custom breakpoint to shrink wide modules when screen becomes too small to fit them */
@media (min-width: 0) AND (max-width: 1220px) {
  .block-module {
    &.box-shadow .inner-spacing, &[class*="overlap-top"]:not(.swiper-module, .image-module) .inner-spacing {
      width: auto;
      margin-left: 0;
    }
  }
  .block-module {
    &.wide-module .inner-spacing {
        width: auto;
        margin-left: 0;
    }
  }
}

/* Tablet only: */
@media (min-width: 768px) AND (max-width: 992px) {
  .numbers-block-module {
    .number-block {
      display: flex;
      align-items: center;
      justify-content: space-between;
      >div:nth-child(2) {
        width: 60%;
        margin-left: auto;
      }
    }
  }
  .main-hero-area .media-block-module {
    .content > div:not(.timeline-container, .hubspot-form) {
      flex-direction: row;
    }
    .content > div:not(.hubspot-form) > div:nth-child(1) {
      width:45%;
      img {
        width: 100%;
      }
    }
    
    .content > div:not(.hubspot-form) > div:nth-child(1):not(:has( + div)) {
      width:100%;
    }

    .content > div:not(.hubspot-form) > div:nth-child(2):not(.timeline-container) {
      width: 42%;
      margin-left: 5%;
    }
  
  }
}

  /* Phone Breakpoint (phone ONLY) */
@media (min-width: 0px) AND (max-width: 767px) {
  :root {
    --block-padding: 40px;
    --block-padding-negative: -40px;
    --block-box-shadow-padding: 2rem;
  }

  .blocks-navigation { 
    top: 160px;
  }

  .awards-block-module {
    .award-container {
      flex-direction: column;
      justify-content: center;
      gap: 30px;
    }
  }

  .testimonials-block-module {
    .swiper-slide {
      height: 100%;
      box-shadow: 0px 0px 10px 0px rgba(85, 90, 98, 0.12);
      border-radius: 0 0 10px 10px;
    }
    .client {
      width: 100%;
      border-radius: 10px 10px 0 0;
    }
    .quote {
      width: 100%;
      padding: 2.5rem 1.5rem;
      border-radius: 0 0 10px 10px;
      blockquote {
        margin: 0;
      }
    }
  }

  .info-squares-module {
    min-height: 0;
    .info-square-container {
      flex-direction: column;
      .mobile-wrapper {
        min-width: 100%;
        margin-right: 0;
        padding-right: 0;
        border-right: none;
      }
      .info-square {
        width: 100%;
        max-width: 100%;
        &.full-image-display {
          max-width: 350px;
          align-self: center;
          .full-image {
            border-radius: 8px 8px 0 0;
          }
          .content {
            padding-bottom: 20px;
          }
        }
        .divider {
          display: none !important;
        }
      }
    }
  }

  .list-module {
    .text {
      max-width: 100%;
      margin-right: 0;
      margin-bottom: 20px;
    }
    .image {
      margin: 0;
    }
  }
}