body {
  font-family: "Inter", sans-serif;
  margin: 0;
  background: #fde6d6 !important;
}

/* commons  */

/**
 * WebP plugins (WebP Express here) rewrite
 *   <img class="why-mark" src="x.png">
 * into
 *   <picture><source srcset="x.png.webp"><img class="why-mark" src="x.png"></picture>
 *
 * That injects an element between the flex container and the <img>. Since a
 * flex item is blockified, the injected <picture> becomes a block container,
 * so any `width: <percentage>` set directly on the <img> starts resolving
 * against the <picture> (whose own width is content-derived) instead of the
 * intended flex parent — and the <img>'s own `flex` shorthand stops applying,
 * because <picture> is now the flex item. Affected here: .why-mark,
 * .compare-photo and .compare-label img, which are the only images given a
 * non-100% percentage width directly on the <img>.
 *
 * `display: contents` drops the wrapper from the box tree, so the <img> is a
 * direct flex item again and percentages resolve against the original
 * container. WebP source selection is unaffected — that is an HTML-level
 * mechanism, not a layout one.
 *
 * The <source> rule is required, not optional: `display: contents` hoists ALL
 * of the <picture>'s children into the flex container, so each <source> becomes
 * a zero-width flex item and doubles the number of `gap`s in the row. In
 * .lead-to-icons that turned 4 gaps into 8 and pushed the row 228px past its
 * container. Taking the <source>s out of flow restores the correct gap count.
 */
picture {
  display: contents;
}

picture > source {
  display: none;
}

.desktop {
  display: block;

  @media screen and (max-width: 1024px) {
    & {
      display: none;
    }
  }
}

.mobile {
  display: none;

  @media screen and (max-width: 1024px) {
    & {
      display: block;
    }
  }
}

section {
  background: unset;
}

h2 {
  margin: 0px;
  font-size: 40px;
  color: #f58220;
  text-align: center;
  font-weight: 700;
  line-height: 54px;
  margin-bottom: 24px;
}

@media (max-width: 1024px) {
  h2 {
    font-size: 30px;
    line-height: 40px;
  }
}

p {
  margin: 0px;
  font-size: 20px !important;
  line-height: 31px !important;
  margin-bottom: 0 !important;
}

.container::after,
.container::before {
  content: unset;
}

.bold {
  font-weight: 700;
  text-transform: inherit !important;
}

/* Section 1 - Hero  */
.hero {
  height: 1200px;
  background-color: #f58220;
  padding: 120px 0px 402px 0px;

  .hero_container {
    .hero-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 4.6%;

      .left-section {
        width: 54.68%;

        h1 {
          margin: 0px;
          font-size: 64px;
          line-height: 80px;
          letter-spacing: 1.875px;
          font-weight: 900;
          color: #fff;
          overflow-wrap: break-word;
        }
      }

      .right-section {
        width: 40.73%;

        img {
          width: 100%;
          aspect-ratio: 505 / 480;
          object-fit: cover;
          border: 12px solid #fff;
          box-sizing: border-box;
          display: block;
        }
      }
    }

    .hero-subtitle {
      margin-top: 48px;
      font-size: 36px !important;
      line-height: 1.48 !important;
      letter-spacing: 1.0547px;
      font-weight: 500;
      color: #fff;
    }
  }

  @media (max-width: 1024px) {
    padding: 90px 0px 200px 0px;

    .hero_container {
      .hero-top {
        .left-section {
          h1 {
            font-size: 44px;
            line-height: 56px;
            letter-spacing: 1.2px;
          }
        }
      }

      .hero-subtitle {
        margin-top: 36px;
        font-size: 26px !important;
        letter-spacing: 0.7px;
      }
    }
  }

  @media (max-width: 768px) {
    height: 950px;
    padding: 80px 0px 243px 0px;

    .hero_container {
      padding-left: 20px;
      padding-right: 20px;

      .hero-top {
        flex-direction: column;
        gap: 24px;

        .left-section,
        .right-section {
          width: 100%;
        }

        .left-section {
          h1 {
            font-size: 32px;
            line-height: 40px;
            letter-spacing: 0.9375px;
          }
        }

        .right-section {
          img {
            aspect-ratio: 335 / 240;
            object-position: top;
            border-width: 8px;
          }
        }
      }

      .hero-subtitle {
        margin-top: 24px;
        font-size: 18px !important;
        letter-spacing: 0.5273px;
      }
    }
  }
}

/* Section 2 - Corrosion  */
.corrosion {
  position: relative;

  .corrosion-card {
    position: relative;
    z-index: 1;
    margin-top: -354px;
    padding: 60px 63px;
    background-color: #fff;
    border-radius: 24px;

    p {
      font-size: 24px !important;
      line-height: 1.48 !important;
      letter-spacing: 0.7031px;
      font-weight: 500;
      color: #000;
      margin-top: 24px;
    }

    .badge {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      padding: 0px 20px;
      border-radius: 8px;
      background-color: #f58220;
      font-size: 36px;
      line-height: 80px;
      letter-spacing: 1.0547px;
      font-weight: 900;
      color: #fff;
      white-space: nowrap;
    }

    .corrosion-title {
      margin: 0px;
      font-size: 48px;
      line-height: 80px;
      letter-spacing: 1.4063px;
      font-weight: 900;
      color: #f58220;
      text-align: left;
    }

    .corrosion-subtitle {
      margin: 8px 0px 0px;
      font-size: 36px;
      line-height: 42px;
      letter-spacing: 1.0547px;
      font-weight: 900;
      color: #000;
    }

    .corrosion-title + .corrosion-subtitle + p {
      margin-top: 32px;
    }

    .insight-row {
      display: flex;
      align-items: stretch;
      gap: 1.79%;
      margin-top: 48px;

      .left-section {
        width: 40.65%;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
      }

      .right-section {
        width: 57.56%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        border-radius: 16px;
        background-color: #fde6d2;

        p {
          margin-top: 0px;
        }
      }
    }

    .corrosion-divider {
      height: 1px;
      margin: 24px 0px 0px;
      border: 0px;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .why-row {
      display: flex;
      align-items: flex-start;
      margin-top: 44px;

      .why-text {
        flex: 0 0 auto;
        padding-top: 4px;

        h3 {
          margin: 12px 0px 0px;
          font-size: 36px;
          line-height: 1.48;
          letter-spacing: 1.0547px;
          font-weight: 900;
          color: #f58220;
          white-space: nowrap;
        }
      }

      .why-mark {
        width: 14.23%;
        aspect-ratio: 159 / 202;
        object-fit: contain;
        display: block;
      }
    }

    .lead-to {
      margin-top: 32px;
      padding: 24px;
      border-radius: 16px;
      background-color: #edeeee;

      .lead-to-title {
        margin-top: 0px;
        font-size: 24px !important;
        line-height: 32px !important;
        letter-spacing: 0.7031px;
        font-weight: 700;
        color: #f58220;
      }

      .lead-to-icons {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8.79%;
        margin-top: 24px;

        img {
          display: block;
          object-fit: cover;
        }

        /**
         * These icons are targeted by position, not by class. When a WebP
         * plugin wraps each <img> in <picture>, the flex child becomes the
         * <picture>, so `img:nth-child(N)` no longer matches anything and the
         * icons silently fall back to their intrinsic size — which is why they
         * render tiny on live but correctly on staging. Matching the positional
         * child *and* its inner <img> keeps both markups working.
         *
         * `flex: 0 0 <pct>` rather than `width: <pct>`: this container uses a
         * percentage `gap`, which combined with percentage item widths leaves
         * the main size indeterminate, so `width` was being ignored (measured:
         * width:141.6px still rendered 56px). flex-basis is the main-size
         * property for a flex item and resolves against the flex container
         * deterministically, in both the wrapped and unwrapped cases.
         */
        & > :nth-child(1),
        & > :nth-child(1) img {
          flex: 0 1 14.22%;
          aspect-ratio: 152 / 119;
        }

        & > :nth-child(2),
        & > :nth-child(2) img {
          flex: 0 1 11.13%;
          aspect-ratio: 119 / 86;
        }

        & > :nth-child(3),
        & > :nth-child(3) img {
          flex: 0 1 8.7%;
          aspect-ratio: 93 / 89;
        }

        & > :nth-child(4),
        & > :nth-child(4) img {
          flex: 0 1 9.26%;
          aspect-ratio: 99 / 89;
        }

        & > :nth-child(5),
        & > :nth-child(5) img {
          flex: 0 1 9.26%;
          aspect-ratio: 99 / 82;
        }
      }

      .lead-to-flow {
        display: flex;
        align-items: center;
        margin-top: 24px;
        padding-left: 0.75%;

        .flow-item {
          position: relative;
          flex: 0 0 auto;

          img {
            width: 100%;
            height: auto;
            display: block;
          }

          span {
            position: absolute;
            inset: 0px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-left: 15px;
            font-size: 20px;
            line-height: 49px;
            font-weight: 600;
            color: #fff;
            white-space: nowrap;
          }
        }

        .flow-item + .flow-item {
          margin-left: -0.75%;
        }

        .flow-item:nth-child(1) {
          width: 23.76%;
        }

        .flow-item:nth-child(2) {
          width: 19.27%;
        }

        .flow-item:nth-child(3),
        .flow-item:nth-child(4),
        .flow-item:nth-child(5) {
          width: 19.36%;
        }
      }
    }
  }

  @media (max-width: 1024px) {
    .corrosion-card {
      margin-top: -160px;
      padding: 40px 32px;

      p {
        font-size: 18px !important;
        margin-top: 20px;
      }

      .badge {
        font-size: 26px;
        line-height: 56px;
      }

      .corrosion-title {
        font-size: 36px;
        line-height: 52px;
      }

      .corrosion-subtitle {
        font-size: 26px;
        line-height: 34px;
      }

      .insight-row {
        margin-top: 32px;
      }

      .why-row {
        margin-top: 32px;

        .why-text {
          h3 {
            font-size: 26px;
          }
        }

        .why-mark {
          width: 20%;
        }
      }

      .lead-to {
        .lead-to-title {
          font-size: 18px !important;
          line-height: 26px !important;
        }

        .lead-to-flow {
          overflow-x: auto;

          .flow-item {
            span {
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  @media (max-width: 768px) {
    .corrosion-card {
      margin-top: -211px;
      padding: 20px;
      border-radius: 16px;

      p {
        font-size: 16px !important;
        letter-spacing: 0.4688px;
        margin-top: 12px;
      }

      .badge {
        font-size: 32px;
        line-height: 52px;
        letter-spacing: 0.9375px;
        padding: 0px 12px;
      }

      .corrosion-title {
        font-size: 32px;
        line-height: 44px;
        letter-spacing: 0.9375px;
      }

      .corrosion-subtitle {
        margin-top: 6px;
        font-size: 20px;
        line-height: 28px;
        letter-spacing: 0.5859px;
      }

      .corrosion-title + .corrosion-subtitle + p {
        margin-top: 16px;
      }

      .insight-row {
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;

        .left-section,
        .right-section {
          width: 100%;
        }

        .left-section {
          img {
            height: auto;
            aspect-ratio: 335 / 217;
          }
        }

        .right-section {
          gap: 12px;
          padding: 12px;
        }
      }

      .corrosion-divider {
        display: none;
      }

      .why-row {
        justify-content: space-between;
        margin-top: 20px;

        .why-text {
          flex: 0 1 auto;
          min-width: 0px;
          padding-top: 0px;

          h3 {
            font-size: 24px;
            letter-spacing: 0.7031px;
            white-space: normal;
          }
        }

        .why-mark {
          flex: 0 0 auto;
          width: 30.45%;
          max-width: 102px;
          aspect-ratio: 102 / 127;
        }
      }

      .lead-to {
        margin-top: 20px;
        padding: 6px 7px 11.28px;
        border-radius: 4.786px;

        .lead-to-title {
          font-size: 10px !important;
          line-height: 16px !important;
          letter-spacing: 0.293px;
        }

        .lead-to-icons {
          gap: 8.76%;
          margin-top: 8px;

          /* Same <picture>-wrapper-safe targeting as the desktop rules above. */
          & > :nth-child(1),
          & > :nth-child(1) img {
            flex: 0 1 14.19%;
          }

          & > :nth-child(2),
          & > :nth-child(2) img {
            flex: 0 1 11.07%;
          }

          & > :nth-child(3),
          & > :nth-child(3) img {
            flex: 0 1 8.65%;
          }

          & > :nth-child(4),
          & > :nth-child(4) img,
          & > :nth-child(5),
          & > :nth-child(5) img {
            flex: 0 1 9.23%;
          }
        }

        .lead-to-flow {
          margin-top: 7.24px;
          padding-left: 1.36%;

          .flow-item {
            span {
              padding-left: 4px;
              font-size: 6px;
              line-height: 14.66px;
            }
          }

          .flow-item + .flow-item {
            margin-left: -0.93%;
          }

          .flow-item:nth-child(1) {
            width: 23.67%;
          }

          .flow-item:nth-child(2),
          .flow-item:nth-child(3),
          .flow-item:nth-child(4),
          .flow-item:nth-child(5) {
            width: 19.34%;
          }
        }
      }
    }
  }
}

.orange-band {
  position: absolute;
  bottom: -150px;
  left: 0;
  width: 100vw;
  height: 220px;
  background: #F58220;
}

/* Section 3 - A Different Solution  */
.solution {
  position: relative;

  .solution-card {
    position: relative;
    margin-top: 80px;
    padding: 60px;
    background-color: #fff;
    border-radius: 24px;
    z-index: 1;

    p {
      font-size: 24px !important;
      line-height: 1.48 !important;
      letter-spacing: 0.7031px;
      font-weight: 500;
      color: #000;
    }

    .solution-title {
      margin: 0px;
      font-size: 48px;
      line-height: 80px;
      letter-spacing: 1.4063px;
      font-weight: 900;
      color: #f58220;
      text-align: left;
      white-space: nowrap;
    }

    .solution-intro {
      display: flex;
      align-items: flex-start;
      gap: 2.22%;
      margin-top: 24px;
      padding: 20px;
      border-radius: 16px;
      background-color: #fde6d2;

      .left-section {
        width: 54.54%;

        p + p {
          margin-top: 16px;
        }
      }

      .right-section {
        width: 43.24%;

        img {
          width: 100%;
          aspect-ratio: 467 / 349;
          object-fit: cover;
          display: block;
        }
      }
    }

    .solution-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80px;
      margin-top: 48px;
      padding: 0px 20px;
      border-radius: 8px;
      background-color: #f58220;
      font-size: 36px;
      line-height: 80px;
      letter-spacing: 1.0547px;
      font-weight: 900;
      color: #fff;
      white-space: nowrap;
    }

    .solution-paras {
      margin-top: 32px;

      p + p {
        margin-top: 16px;
      }
    }

    .compare-scroll {
      margin-top: 32px;
    }

    .compare-bar {
      display: none;
    }

    .compare {
      display: flex;
      align-items: flex-start;
      gap: 1.786%;

      .compare-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        width: 32.143%;
      }

      .compare-photo {
        width: 90%;
        aspect-ratio: 324 / 230;
        object-fit: cover;
        display: block;
      }

      .compare-panel {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
      }

      .compare-head {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 64px;
        padding: 0px 20px;
        font-size: 24px;
        line-height: 1.2;
        letter-spacing: 0.7031px;
        font-weight: 900;
        color: #fff;
        text-align: center;
      }

      .head-1 {
        background-color: #5d5d5d;
      }

      .head-2 {
        background-color: #f58220;
      }

      .head-3 {
        background-color: rgba(232, 126, 38, 0.6);
      }

      .body-1 {
        display: flex;
        flex-direction: column;
        padding: 12px;
        background-color: #efefef;

        .compare-label {
          display: flex;
          align-items: center;
          width: 100%;

          img {
            flex: 0 0 auto;
            object-fit: contain;
            display: block;
          }

          p {
            font-size: 20px !important;
            line-height: 49px !important;
            letter-spacing: normal;
            font-weight: 600;
          }
        }

        .compare-label:nth-child(1) {
          gap: 11.31%;

          img {
            width: 13.99%;
            aspect-ratio: 47 / 43;
          }
        }

        .compare-label:nth-child(2) {
          gap: 12.5%;
          padding-left: 2.38%;

          img {
            width: 10.71%;
            aspect-ratio: 36 / 37;
          }
        }

        .compare-label:nth-child(3) {
          gap: 11.31%;

          img {
            width: 13.99%;
            aspect-ratio: 47 / 52;
          }

          p {
            flex: 1 1 auto;
            line-height: 33px !important;
          }
        }

        .compare-label:nth-child(4) {
          gap: 7.74%;

          img {
            width: 17.86%;
            aspect-ratio: 60 / 50;
          }

          p {
            line-height: 33px !important;
          }
        }

        .compare-label:nth-child(5) {
          gap: 10.42%;

          img {
            width: 15.48%;
            aspect-ratio: 52 / 52;
          }
        }
      }

      .body-2,
      .body-3 {
        flex: 1 1 auto;
        padding: 20px 12px;
        text-align: center;

        p {
          font-size: 16px !important;
        }

        p + p {
          margin-top: 24px;
        }

        .grade {
          font-size: 24px !important;
          font-weight: 700;
        }
      }

      .body-2 {
        background-color: rgba(232, 126, 38, 0.22);
      }

      .body-3 {
        background-color: rgba(232, 126, 38, 0.1);

        p {
          line-height: 1.33 !important;
          letter-spacing: 0.4688px;
        }
      }
    }

    .solution-photo {
      margin-top: 48px;

      img {
        width: 100%;
        aspect-ratio: 1120 / 460;
        object-fit: cover;
        display: block;
      }
    }
  }

  @media (max-width: 1199px) {
    .solution-card {
      .solution-bar {
        font-size: 26px;
      }
    }
  }

  @media (max-width: 768px) {
    .solution-card {
      overflow: hidden;
      margin-top: 40px;
      padding: 20px;
      border-radius: 16px;

      p {
        font-size: 16px !important;
        letter-spacing: 0.4688px;
      }

      .solution-title {
        font-size: 32px;
        line-height: 44px;
        letter-spacing: 0.9375px;
        white-space: normal;
      }

      .solution-intro {
        flex-direction: column;
        gap: 16px;
        margin-top: 16px;
        padding: 12px;

        .left-section,
        .right-section {
          width: 100%;
        }

        .right-section {
          order: -1;

          img {
            aspect-ratio: 311 / 240;
          }
        }
      }

      .solution-bar {
        height: auto;
        margin-top: 20px;
        padding: 8px 12px;
        font-size: 12px;
        line-height: 24px;
        letter-spacing: 0.3516px;
      }

      .solution-paras {
        margin-top: 20px;
      }

      .compare-scroll {
        margin-top: 24px;
        margin-right: -20px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .compare-scroll::-webkit-scrollbar {
        display: none;
      }

      .compare {
        width: max-content;
        gap: 10.904px;

        .compare-col {
          width: 196.265px;
          gap: 13.084px;
        }

        .compare-panel {
          gap: 6.542px;
        }

        .compare-head {
          height: 34.892px;
          padding: 0px 10.904px;
          font-size: 13.084px;
          letter-spacing: 0.3833px;
        }

        .body-1 {
          padding: 6.542px;

          .compare-label {
            p {
              font-size: 10.904px !important;
              line-height: 26.714px !important;
            }
          }

          .compare-label:nth-child(3) {
            p {
              line-height: 17.991px !important;
            }
          }

          .compare-label:nth-child(4) {
            p {
              line-height: 17.991px !important;
            }
          }
        }

        .body-2,
        .body-3 {
          padding: 6.542px;

          p {
            font-size: 8.723px !important;
          }

          p + p {
            margin-top: 13.084px;
          }

          .grade {
            font-size: 13.084px !important;
          }
        }

        .body-2 {
          p {
            letter-spacing: 0.3833px;
          }
        }

        .body-3 {
          p {
            line-height: 1.48 !important;
            letter-spacing: 0.2556px;
          }
        }
      }

      .compare-bar {
        display: block;
        position: relative;
        height: 10px;
        margin-top: 16px;
        border-radius: 48px;
        background-color: #efefef;

        .compare-bar-thumb {
          position: absolute;
          left: 0px;
          top: 0px;
          width: 45.37%;
          height: 10px;
          border-radius: 48px;
          background-color: #f58220;
        }
      }

      .solution-photo {
        margin-top: 20px;

        img {
          aspect-ratio: 335 / 342;
        }
      }
    }
  }
}

/* Section 4 - Proof from the Field  */
.proof {
  .proof-card {
    position: relative;
    margin-top: 80px;
    padding: 60px;
    background-color: #fff;
    border-radius: 24px;
    z-index: 1;

    p {
      font-size: 24px !important;
      line-height: 1.48 !important;
      letter-spacing: 0.7031px;
      font-weight: 500;
      color: #000;
    }

    p + p {
      margin-top: 24px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      padding: 0px 20px;
      border-radius: 8px;
      background-color: rgba(245, 130, 32, 0.7);
      font-size: 36px;
      line-height: 80px;
      letter-spacing: 1.0547px;
      font-weight: 900;
      color: #fff;
      white-space: nowrap;
    }

    .proof-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;

      .left-section {
        flex: 0 1 auto;
        min-width: 0px;

        .proof-title {
          margin: 0px;
          font-size: 48px;
          line-height: 80px;
          letter-spacing: 1.4063px;
          font-weight: 900;
          color: #f58220;
          text-align: left;
          white-space: nowrap;
        }

        h3 {
          margin: 0px;
          font-size: 40px;
          line-height: 80px;
          letter-spacing: 1.4063px;
          font-weight: 800;
          color: #010101;
          white-space: nowrap;
        }

        .proof-place {
          display: block;
          font-size: 32px;
          line-height: 56px;
          letter-spacing: 1.4063px;
          font-weight: 800;
          color: #010101;
          white-space: nowrap;
        }
      }

      .right-section {
        width: 18.57%;

        img {
          width: 100%;
          aspect-ratio: 208 / 143;
          object-fit: contain;
          display: block;
        }
      }
    }

    .proof-cards {
      display: flex;
      align-items: stretch;
      gap: 2.143%;
      margin-top: 32px;

      .proof-item {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 48.93%;
        box-sizing: border-box;
        padding: 20px;
        border-radius: 16px;
        background-color: #fde6d2;
      }
    }

    .perf {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;

      .badge {
        align-self: center;
        background-color: #f58220;
      }

      .perf-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 16px;
        row-gap: 32px;
        width: 100%;

        .perf-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          min-width: 0px;
          box-sizing: border-box;

          img {
            display: block;
            width: auto;
            height: 80px;
            object-fit: contain;
          }

          p {
            margin-top: 21px;
            font-size: 20px !important;
            line-height: 26px !important;
            letter-spacing: 0px;
            font-weight: 400;
            color: #010101;
            text-align: center;
            white-space: nowrap;
          }
        }
      }
    }

    .perf-1 {
      margin-top: 79px;
    }

    .proof-divider {
      height: 1px;
      margin: 32px 0px 0px;
      border: 0px;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .proof-divider + .proof-block {
      margin-top: 48px;
    }

    .perf-2 {
      margin-top: 70px;
    }
  }

  @media (max-width: 768px) {
    .proof-card {
      overflow: hidden;
      margin-top: 40px;
      padding: 20px;
      border-radius: 16px;

      p {
        font-size: 16px !important;
        letter-spacing: 0.4688px;
      }

      .badge {
        padding: 0px 20px;
        font-size: 24px;
        line-height: 48px;
        letter-spacing: 0.7031px;
      }

      .proof-head {
        display: block;

        .left-section {
          .proof-title {
            font-size: 32px;
            line-height: 44px;
            letter-spacing: 0.9375px;
          }

          h3 {
            margin-top: 16px;
            font-size: 28px;
            line-height: 40px;
            white-space: normal;
          }

          .proof-place {
            font-size: 24px;
            line-height: 40px;
            white-space: normal;
          }
        }

        .right-section {
          display: none;
        }
      }

      .proof-cards {
        flex-direction: column;
        gap: 16px;
        margin-top: 16px;

        .proof-item {
          gap: 20px;
          width: 100%;
          padding: 12px;
        }
      }

      .perf {
        align-items: stretch;
        gap: 24px;

        .badge {
          align-self: stretch;
          justify-content: center;
          padding: 0px 12px;
          font-size: 32px;
          line-height: 52px;
          letter-spacing: 0.9375px;
        }

        .perf-grid {
          grid-template-columns: repeat(2, 1fr);
          column-gap: 8px;
          row-gap: 24px;

          .perf-item {
            img {
              height: 60px;
            }

            p {
              margin-top: 12px;
              font-size: 15px !important;
              line-height: 21px !important;
            }
          }
        }
      }

      .perf-1 {
        margin-top: 32px;
      }

      .proof-divider {
        margin-top: 32px;
      }

      .proof-divider + .proof-block {
        margin-top: 32px;
      }

      .perf-2 {
        margin-top: 73px;
        gap: 15px;
      }
    }
  }
}

/* Section 5 - Looking Beyond Initial Cost  */
.beyond {
  margin-bottom: 120px;

  .beyond-card {
    position: relative;
    margin-top: 80px;
    padding: 60px 60px 148px;
    background-color: #fff;
    border-radius: 24px;

    .beyond-intro {
      h2 {
        margin: 0px;
        font-size: 40px;
        line-height: 80px;
        letter-spacing: 1.1719px;
        font-weight: 800;
        color: #010101;
        text-align: left;
      }

      .beyond-lead {
        display: flex;
        align-items: center;
        gap: 18px;

        img {
          flex: 0 0 auto;
          width: 64px;
          height: 64px;
          display: block;
        }

        span {
          font-size: 48px;
          line-height: 80px;
          letter-spacing: 1.4063px;
          font-weight: 900;
          color: #f58220;
          white-space: nowrap;
        }
      }

      p {
        margin-top: 32px;
        font-size: 24px !important;
        line-height: 1.48 !important;
        letter-spacing: 0.7031px;
        font-weight: 500;
        color: #000;
      }
    }

    .beyond-note {
      position: relative;
      padding: 64px 20px 20px;
      border-radius: 16px;

      .beyond-tag {
        position: absolute;
        top: -59px;
        left: 50%;
        transform: translateX(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-width: 400px;
        padding: 0px 32px;
        border: 6px solid;
        border-radius: 48px;
        font-size: 36px;
        line-height: 80px;
        letter-spacing: 1.0547px;
        font-weight: 900;
        color: #fff;
        white-space: nowrap;
      }

      p {
        font-size: 32px !important;
        line-height: 1.48 !important;
        letter-spacing: 0.9375px;
        font-weight: 400;
      }

      p + p {
        margin-top: 1.48em;
      }
    }

    .beyond-note-1 {
      margin-top: 107px;
      background-color: #fde6d2;

      .beyond-tag {
        border-color: #c69056;
        background-color: #a7825a;
      }

      p {
        color: #000;
      }
    }

    .beyond-note-2 {
      margin-top: 131px;
      background-color: #f58220;

      .beyond-tag {
        border-color: #deaf88;
        background-color: #e6a165;
      }

      p {
        color: #fff;
      }
    }

    .beyond-questions {
      position: relative;
      margin-top: 48px;

      .left-section {
        position: relative;
        z-index: 1;

        h3 {
          width: 42.41%;
          margin: 0px;
          padding-bottom: 15px;
          border-bottom: 1px solid #e87e26;
          font-size: 40px;
          line-height: 80px;
          letter-spacing: 1.4063px;
          font-weight: 800;
          color: #010101;

          span {
            display: block;
            font-size: 32px;
            line-height: 56px;
          }
        }

        ul {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 16px;
          margin: 47px 0px 0px;
          padding: 0px;
          list-style: none;

          li {
            display: flex;
            align-items: center;
            padding: 12px 32px 12px 12px;
            border-radius: 8px;
            background-color: rgba(232, 126, 38, 0.6);
            box-shadow: 7px 7px 4px 0px rgba(0, 0, 0, 0.71);
            font-size: 24px;
            line-height: 1.48;
            letter-spacing: 0.7031px;
            color: #000;
            white-space: nowrap;
          }

          li::before {
            content: "";
            flex: 0 0 auto;
            width: 8px;
            height: 8px;
            margin: 0px 14px;
            border-radius: 50%;
            background-color: #000;
          }
        }
      }

      .right-section {
        position: absolute;
        top: 59px;
        right: 0px;
        width: 31.875%;

        img {
          width: 100%;
          height: auto;
          display: block;
        }
      }
    }

    .beyond-divider {
      height: 1px;
      margin: 60px 0px 0px;
      border: 0px;
      background-color: #e87e26;
    }

    .beyond-closing {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      margin-top: 48px;

      p {
        padding: 12px 20px;
        border-radius: 8px;
        background-color: #000;
        font-size: 32px !important;
        line-height: 1.48 !important;
        letter-spacing: 0.9375px;
        font-weight: 400;
        color: #fff;
        white-space: nowrap;
      }
    }
  }

  @media (max-width: 1199px) {
    margin-bottom: 30px;

    .beyond-card {
      .beyond-questions {
        .left-section {
          ul {
            max-width: 66%;

            li {
              white-space: normal;
            }
          }
        }
      }

      .beyond-closing {
        p {
          white-space: normal;
        }
      }
    }
  }

  @media (max-width: 768px) {
    .beyond-card {
      margin-top: 40px;
      padding: 20px;
      border-radius: 16px;

      .beyond-intro {
        h2 {
          font-size: 28px;
          line-height: 40px;
          letter-spacing: 0.8203px;
        }

        .beyond-lead {
          margin-top: 10px;

          img {
            width: 56px;
            height: 56px;
          }

          span {
            font-size: 32px;
            line-height: 44px;
            letter-spacing: 0.9375px;
          }
        }

        p {
          margin-top: 24px;
          font-size: 16px !important;
          letter-spacing: 0.4688px;
        }
      }

      .beyond-note {
        padding: 24px 12px 12px;
        border-radius: 8px;

        .beyond-tag {
          top: -23px;
          min-width: 0px;
          padding: 0px 16px;
          border-width: 2px;
          font-size: 16px;
          line-height: 32px;
          letter-spacing: 0.4688px;
        }

        p {
          font-size: 14px !important;
          letter-spacing: 0.4102px;
        }
      }

      .beyond-note-1 {
        margin-top: 45px;
      }

      .beyond-note-2 {
        margin-top: 39px;
      }

      .beyond-questions {
        margin-top: 32px;

        .left-section {
          h3 {
            width: 100%;
            padding-bottom: 16px;
            font-size: 28px;
            line-height: 40px;
            letter-spacing: 1.4063px;

            span {
              font-size: 24px;
              line-height: 40px;
            }
          }

          ul {
            max-width: 100%;
            gap: 12px;
            margin-top: 16px;

            li {
              align-items: flex-start;
              padding: 8px 12px 8px 8px;
              border-radius: 4px;
              box-shadow: 4px 3px 4px 0px rgba(0, 0, 0, 0.71);
              font-size: 14px;
              letter-spacing: 0.4102px;
              white-space: normal;
            }

            li::before {
              width: 6px;
              height: 6px;
              margin: 7px 10px;
            }
          }
        }

        .right-section {
          display: none;
        }
      }

      .beyond-divider {
        margin-top: 16px;
      }

      .beyond-closing {
        gap: 8px;
        margin-top: 16px;

        p {
          padding: 8px 12px;
          border-radius: 4px;
          font-size: 16px !important;
          letter-spacing: 0.4688px;
          white-space: normal;
        }
      }
    }
  }
}

html.csr-js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

html.csr-js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}