@charset "UTF-8";
:root {
  scroll-behavior: smooth;
  --on-font-1: "Inter", sans-serif;
  --on-font-2: "Mona Sans", sans-serif;
  --on-clr-pr-1: #BEFF6B;
  --on-clr-pr-2: #2A5CFF;
  --on-clr-pr-3: #45FC91;
  --on-clr-h-1: #023D3F;
  --on-clr-h-2: #050519;
  --on-clr-h-3: #141C14;
  --on-clr-p-1: #525D5D;
  --on-clr-p-2: #363637;
  --on-clr-p-3: #4F504F;
  --on-cube-1: .3s ;
}

body {
  font-family: var(--on-font-1);
  font-size: 18px;
  font-weight: 400;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  line-height: 28px;
  color: #000;
  overflow-x: hidden;
  font-optical-sizing: auto;
  font-feature-settings: "liga" off, "clig" off;
}

.img, img {
  max-width: 100%;
}

a:focus,
.button:focus {
  text-decoration: none;
  outline: none;
}

a, span {
  display: inline-block;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  text-transform: inherit;
  text-decoration: none;
  line-height: inherit;
  transition: inherit;
}

button {
  border: none;
  outline: none;
}

a:focus,
a:hover {
  color: inherit;
  text-decoration: none;
}

h1 {
  font-size: 55px;
}

h2 {
  font-size: 55px;
}

h3 {
  font-size: 42px;
}

h4 {
  font-size: 27px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}

::-moz-selection {
  background-color: #3065D0;
  color: white;
  text-shadow: none;
}

::-moz-selection {
  background-color: #3065D0;
  color: white;
  text-shadow: none;
}

::selection {
  background-color: #3065D0;
  color: white;
  text-shadow: none;
}

input, textarea {
  outline: none;
}
input::placeholder, textarea::placeholder {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  font-family: inherit;
}

input:focus::placeholder, textarea:focus::placeholder {
  opacity: 0;
}

@media (min-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px) {
  ::-webkit-scrollbar {
    width: 7px;
    background: #fff;
    box-shadow: none;
    border: none;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
    box-shadow: none;
    border: none;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--on-clr-pr-1);
    border-radius: 6px;
  }
}
.swiper-notification {
  display: none;
}

/*
    global-css-end
*/
/*
    02. utility
*/
/*
    margin-&-padding_variable-start
*/
.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-25 {
  margin-top: 25px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-35 {
  margin-top: 35px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-45 {
  margin-top: 45px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-55 {
  margin-top: 55px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-65 {
  margin-top: 65px;
}

.mt-70 {
  margin-top: 70px;
}

.mt-75 {
  margin-top: 75px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-85 {
  margin-top: 85px;
}

.mt-90 {
  margin-top: 90px;
}

.mt-95 {
  margin-top: 95px;
}

.mt-100 {
  margin-top: 100px;
}

.mt-105 {
  margin-top: 105px;
}

.mt-110 {
  margin-top: 110px;
}

.mt-115 {
  margin-top: 115px;
}

.mt-120 {
  margin-top: 120px;
}

.mt-125 {
  margin-top: 125px;
}

.mt-130 {
  margin-top: 130px;
}

.mt-135 {
  margin-top: 135px;
}

.mt-140 {
  margin-top: 140px;
}

.mt-145 {
  margin-top: 145px;
}

.mt-150 {
  margin-top: 150px;
}

.mt-155 {
  margin-top: 155px;
}

.mt-160 {
  margin-top: 160px;
}

.mt-165 {
  margin-top: 165px;
}

.mt-170 {
  margin-top: 170px;
}

.mt-175 {
  margin-top: 175px;
}

.mt-180 {
  margin-top: 180px;
}

.mt-185 {
  margin-top: 185px;
}

.mt-190 {
  margin-top: 190px;
}

.mt-195 {
  margin-top: 195px;
}

.mt-200 {
  margin-top: 200px;
}

.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-35 {
  margin-bottom: 35px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-45 {
  margin-bottom: 45px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-55 {
  margin-bottom: 55px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-65 {
  margin-bottom: 65px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-75 {
  margin-bottom: 75px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-85 {
  margin-bottom: 85px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mb-95 {
  margin-bottom: 95px;
}

.mb-100 {
  margin-bottom: 100px;
}

.mb-105 {
  margin-bottom: 105px;
}

.mb-110 {
  margin-bottom: 110px;
}

.mb-115 {
  margin-bottom: 115px;
}

.mb-120 {
  margin-bottom: 120px;
}

.mb-125 {
  margin-bottom: 125px;
}

.mb-130 {
  margin-bottom: 130px;
}

.mb-135 {
  margin-bottom: 135px;
}

.mb-140 {
  margin-bottom: 140px;
}

.mb-145 {
  margin-bottom: 145px;
}

.mb-150 {
  margin-bottom: 150px;
}

.mb-155 {
  margin-bottom: 155px;
}

.mb-160 {
  margin-bottom: 160px;
}

.mb-165 {
  margin-bottom: 165px;
}

.mb-170 {
  margin-bottom: 170px;
}

.mb-175 {
  margin-bottom: 175px;
}

.mb-180 {
  margin-bottom: 180px;
}

.mb-185 {
  margin-bottom: 185px;
}

.mb-190 {
  margin-bottom: 190px;
}

.mb-195 {
  margin-bottom: 195px;
}

.mb-200 {
  margin-bottom: 200px;
}

.pt-5 {
  padding-top: 5px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-15 {
  padding-top: 15px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-25 {
  padding-top: 25px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-35 {
  padding-top: 35px;
}

.pt-40 {
  padding-top: 40px;
}

.pt-45 {
  padding-top: 45px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-55 {
  padding-top: 55px;
}

.pt-60 {
  padding-top: 60px;
}

.pt-65 {
  padding-top: 65px;
}

.pt-70 {
  padding-top: 70px;
}

.pt-75 {
  padding-top: 75px;
}

.pt-80 {
  padding-top: 80px;
}

.pt-85 {
  padding-top: 85px;
}

.pt-90 {
  padding-top: 90px;
}

.pt-95 {
  padding-top: 95px;
}

.pt-100 {
  padding-top: 100px;
}

.pt-105 {
  padding-top: 105px;
}

.pt-110 {
  padding-top: 110px;
}

.pt-115 {
  padding-top: 115px;
}

.pt-120 {
  padding-top: 120px;
}

.pt-125 {
  padding-top: 125px;
}

.pt-130 {
  padding-top: 130px;
}

.pt-135 {
  padding-top: 135px;
}

.pt-140 {
  padding-top: 140px;
}

.pt-145 {
  padding-top: 145px;
}

.pt-150 {
  padding-top: 150px;
}

.pt-155 {
  padding-top: 155px;
}

.pt-160 {
  padding-top: 160px;
}

.pt-165 {
  padding-top: 165px;
}

.pt-170 {
  padding-top: 170px;
}

.pt-175 {
  padding-top: 175px;
}

.pt-180 {
  padding-top: 180px;
}

.pt-185 {
  padding-top: 185px;
}

.pt-190 {
  padding-top: 190px;
}

.pt-195 {
  padding-top: 195px;
}

.pt-200 {
  padding-top: 200px;
}

.pb-5 {
  padding-bottom: 5px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-15 {
  padding-bottom: 15px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-25 {
  padding-bottom: 25px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-35 {
  padding-bottom: 35px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pb-45 {
  padding-bottom: 45px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pb-55 {
  padding-bottom: 55px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pb-65 {
  padding-bottom: 65px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pb-75 {
  padding-bottom: 75px;
}

.pb-80 {
  padding-bottom: 80px;
}

.pb-85 {
  padding-bottom: 85px;
}

.pb-90 {
  padding-bottom: 90px;
}

.pb-95 {
  padding-bottom: 95px;
}

.pb-100 {
  padding-bottom: 100px;
}

.pb-105 {
  padding-bottom: 105px;
}

.pb-110 {
  padding-bottom: 110px;
}

.pb-115 {
  padding-bottom: 115px;
}

.pb-120 {
  padding-bottom: 120px;
}

.pb-125 {
  padding-bottom: 125px;
}

.pb-130 {
  padding-bottom: 130px;
}

.pb-135 {
  padding-bottom: 135px;
}

.pb-140 {
  padding-bottom: 140px;
}

.pb-145 {
  padding-bottom: 145px;
}

.pb-150 {
  padding-bottom: 150px;
}

.pb-155 {
  padding-bottom: 155px;
}

.pb-160 {
  padding-bottom: 160px;
}

.pb-165 {
  padding-bottom: 165px;
}

.pb-170 {
  padding-bottom: 170px;
}

.pb-175 {
  padding-bottom: 175px;
}

.pb-180 {
  padding-bottom: 180px;
}

.pb-185 {
  padding-bottom: 185px;
}

.pb-190 {
  padding-bottom: 190px;
}

.pb-195 {
  padding-bottom: 195px;
}

.pb-200 {
  padding-bottom: 200px;
}

.pb-205 {
  padding-bottom: 205px;
}

.pb-210 {
  padding-bottom: 210px;
}

.pb-215 {
  padding-bottom: 215px;
}

.pb-220 {
  padding-bottom: 220px;
}

.pb-225 {
  padding-bottom: 225px;
}

.pb-230 {
  padding-bottom: 230px;
}

.pb-235 {
  padding-bottom: 235px;
}

.pb-240 {
  padding-bottom: 240px;
}

.pb-245 {
  padding-bottom: 245px;
}

.pb-250 {
  padding-bottom: 250px;
}

.pb-255 {
  padding-bottom: 255px;
}

.pb-260 {
  padding-bottom: 260px;
}

.pb-265 {
  padding-bottom: 265px;
}

.pb-270 {
  padding-bottom: 270px;
}

.pb-275 {
  padding-bottom: 275px;
}

.pb-280 {
  padding-bottom: 280px;
}

.pb-285 {
  padding-bottom: 285px;
}

.pb-290 {
  padding-bottom: 290px;
}

.pb-295 {
  padding-bottom: 295px;
}

.pb-300 {
  padding-bottom: 300px;
}

/*
    margin-&-padding_variable-end
*/
.mb-24 {
  margin-bottom: 24px;
}

.wa-fix {
  overflow: hidden;
}

.wa-ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.wa-img-cover img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.wa-video-cover video {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.wa-bg-default {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.flaticon {
  display: inline-block;
  line-height: 0.65;
}

.wa-z-index-3 {
  position: relative;
  z-index: 3;
}

.wa-p-absolute {
  position: absolute;
}

.wa-p-relative {
  position: relative;
  z-index: 1;
}

.z-index-3 {
  position: relative;
  z-index: 3;
}

.wa-origin-left {
  transform-origin: left;
}

.wa-origin-right {
  transform-origin: right;
}

.wa-fw-400 {
  font-weight: 400;
}

.wa-fw-500 {
  font-weight: 500;
}

.wa-fw-600 {
  font-weight: 600;
}

.wa-fw-700 {
  font-weight: 700;
}

.wa-fw-800 {
  font-weight: 800;
}

.wa-fw-900 {
  font-weight: 900;
}

.wa-ml-auto {
  margin-left: auto;
}

.wa-mr-auto {
  margin-right: auto;
}

.mr-0 {
  margin-right: 0 !important;
}

.wa-line-limit {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.wa-line-limit:is(.has-line-1) {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.wa-line-limit:is(.has-line-2) {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.wa-line-limit:is(.has-line-3) {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.wa-line-limit:is(.has-line-4) {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.wa-line-limit:is(.has-line-5) {
  -webkit-line-clamp: 5;
  line-clamp: 5;
}
.wa-line-limit:is(.has-line-6) {
  -webkit-line-clamp: 6;
  line-clamp: 6;
}
.wa-line-limit:is(.has-line-7) {
  -webkit-line-clamp: 7;
  line-clamp: 7;
}
.wa-line-limit:is(.has-line-8) {
  -webkit-line-clamp: 8;
  line-clamp: 8;
}
.wa-line-limit:is(.has-line-9) {
  -webkit-line-clamp: 9;
  line-clamp: 9;
}
.wa-line-limit:is(.has-line-10) {
  -webkit-line-clamp: 10;
  line-clamp: 10;
}

.wa-will-change {
  will-change: transform, opacity;
}

.wa-no-ani-tf {
  transform: none !important;
}

.text-right {
  text-align: right;
}

.wa-parallax-img {
  will-change: object-position;
}

.wa-parallax-bg {
  will-change: background-position;
}

.wa-origin-center {
  transform-origin: center;
}

/*
    components
*/
/*
    custom-container-start
*/
@media (min-width: 1600px) {
  .container.on-container-1 {
    max-width: 1424px;
  }
}
/*
    custom-container-end
*/
/*
    typography-start
*/
.on-p-1 {
  font-family: var(--on-font-1);
  font-weight: 400;
  font-size: 18px;
  color: var(--on-clr-p-1);
  line-height: 1.555;
  margin-bottom: 0;
}

.on-p-2 {
  font-family: var(--on-font-1);
  font-weight: 400;
  font-size: 18px;
  color: var(--on-clr-p-2);
  line-height: 1.555;
  margin-bottom: 0;
}

.on-h-1 {
  font-family: var(--on-font-2);
  font-weight: 600;
  color: var(--on-clr-h-1);
  line-height: 1.083;
  margin-bottom: 0;
}

.on-subtitle-1 {
  font-family: var(--on-font-2);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  color: var(--on-clr-h-1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border: 1px solid rgba(2, 61, 63, 0.2);
  border-radius: 100px;
  margin-bottom: 14px;
  /* the lime pip that brackets the label on either side */
}
.on-subtitle-1::before, .on-subtitle-1::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--on-clr-pr-1);
}
.on-subtitle-1 {
  /* on the deep green bands the frame and the label go white */
}
.on-subtitle-1:is(.has-v2) {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.24);
}
@media (max-width: 767px) {
  .on-subtitle-1 {
    font-size: 14px;
    padding: 7px 10px;
  }
}

.on-subtitle-2 {
  font-family: var(--on-font-2);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1%;
  display: inline-flex;
  align-items: center;
  background: linear-gradient(276.69deg, rgba(16, 236, 176, 0.2) 0%, rgba(246, 186, 29, 0.2) 48.08%, rgba(42, 92, 255, 0.2) 100%);
  backdrop-filter: blur(12px);
  border-radius: 6px;
  gap: 6px;
  padding: 6px 10px;
  color: var(--on-clr-h-2);
  margin-bottom: 12px;
}

.on-p-3 {
  font-family: var(--on-font-1);
  font-weight: 400;
  font-size: 18px;
  color: var(--on-clr-p-3);
  line-height: 1.555;
  margin-bottom: 0;
}

.on-h-3 {
  font-family: var(--on-font-2);
  font-weight: 600;
  color: var(--on-clr-h-3);
  line-height: 1.083;
  margin-bottom: 0;
}

/* mint chip, a currentColor dot on either side of the label — the ring is a
   gradient, so it's painted as a masked ::before rather than a plain border */
.on-subtitle-3 {
  position: relative;
  font-family: var(--on-font-2);
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: #0CB351;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  margin-bottom: 16px;
  /* fills only the 1px ring: full box minus its content-box, via mask-composite */
}
.on-subtitle-3::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, #99F5BD 0%, rgba(255, 255, 255, 0) 50%, #99F5BD 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.on-subtitle-3 .dot-elm {
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: currentColor;
}
@media (max-width: 767px) {
  .on-subtitle-3 {
    font-size: 14px;
    padding: 7px 10px;
  }
}

.on-sec-title-1 {
  font-family: var(--on-font-2);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.083;
  color: var(--on-clr-h-1);
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-sec-title-1 {
    font-size: 44px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-sec-title-1 {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-sec-title-1 {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  .on-sec-title-1 {
    font-size: 28px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .on-sec-title-1 {
    font-size: 32px;
  }
}

.ot-subtitle-1 {
  font-family: var(--ot-font-1);
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
  color: var(--ot-clr-pr-1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 11px;
  border: 1px solid rgba(13, 38, 101, 0.12);
  border-radius: 4px;
  margin-bottom: 12px;
  /* the two dots that bracket the label */
}
.ot-subtitle-1::before, .ot-subtitle-1::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: currentColor;
}
.ot-subtitle-1 {
  /* on dark sections the frame goes white */
}
.ot-subtitle-1:is(.has-v2) {
  border-color: rgba(255, 255, 255, 0.12);
}
.ot-subtitle-1 {
  /* solid mint chip, used on the deep navy bands */
}
.ot-subtitle-1:is(.has-v3) {
  padding: 3px 10px;
  border-color: transparent;
  background-color: var(--ot-clr-sd-1);
  color: var(--ot-clr-h-1);
}

.ot-sec-title-1 {
  font-family: var(--ot-font-2);
  font-weight: 500;
  color: var(--ot-clr-h-1);
  font-size: 48px;
  line-height: 1.083;
  margin-bottom: 0;
  letter-spacing: -2%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ot-sec-title-1 {
    font-size: 44px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ot-sec-title-1 {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ot-sec-title-1 {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  .ot-sec-title-1 {
    font-size: 28px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .ot-sec-title-1 {
    font-size: 32px;
  }
}

.on-sec-title-3 {
  font-family: var(--on-font-2);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.083;
  color: var(--on-clr-h-3);
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-sec-title-3 {
    font-size: 44px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-sec-title-3 {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-sec-title-3 {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  .on-sec-title-3 {
    font-size: 28px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .on-sec-title-3 {
    font-size: 32px;
  }
}

.on-sec-title-2 {
  font-family: var(--on-font-2);
  font-weight: 600;
  color: var(--on-clr-h-2);
  line-height: 1.076;
  font-size: 52px;
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-sec-title-2 {
    font-size: 48px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-sec-title-2 {
    font-size: 42px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-sec-title-2 {
    font-size: 38px;
  }
}
@media (max-width: 767px) {
  .on-sec-title-2 {
    font-size: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .on-sec-title-2 {
    font-size: 34px;
  }
}

/*
    typography-end
*/
/*
    button-start
*/
.ot-offcanvas-btn-1 {
  background: transparent;
  color: #FFE900;
  padding: 0;
  font-size: 30px;
}

.on-pr-btn-1 {
  /*
      hover palette — every place this pill is re-coloured can flip these four
      rather than restate the whole animation
  */
  --on-btn-flood: var(--on-clr-h-1);
  --on-btn-hover-clr: #fff;
  --on-btn-disc: var(--on-clr-pr-1);
  --on-btn-disc-clr: var(--on-clr-h-1);
  position: relative;
  z-index: 1;
  overflow: hidden;
  font-family: var(--on-font-2);
  font-size: 16px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--on-clr-pr-1);
  border-radius: 100px;
  padding: 8px;
  padding-right: 24px;
  transition: color 0.4s ease;
  /*
      the flood grows out of the disc itself rather than wiping across, so the
      mark reads as the origin of the colour
  */
}
.on-pr-btn-1::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  z-index: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--on-btn-flood);
  transform: translateY(-50%) scale(0);
  transition: transform 0.55s cubic-bezier(0.62, 0.05, 0.01, 0.99);
  pointer-events: none;
  z-index: -1;
}
.on-pr-btn-1 .icon,
.on-pr-btn-1 .text {
  position: relative;
  z-index: 1;
}
.on-pr-btn-1 .icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 100%;
  overflow: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
}
.on-pr-btn-1 .icon i {
  transition: transform 0.45s cubic-bezier(0.62, 0.05, 0.01, 0.99);
}
.on-pr-btn-1 .icon {
  /*
      a second mark parked off to the left — the pair slide together so
      the arrow leaves and arrives instead of snapping back. The box spans
      the whole disc, so it has to centre its own glyph or the arrow lands
      against the left edge instead of the middle
  */
}
.on-pr-btn-1 .icon::after {
  content: "\f102";
  font-family: flaticon_optivanox;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  line-height: 1;
  text-align: center;
  transform: translate(-120%, -50%);
  transition: transform 0.45s cubic-bezier(0.62, 0.05, 0.01, 0.99);
}
.on-pr-btn-1 {
  /*
      doubled class on purpose. The sections that recolour this pill (header,
      hero, price, testimonial) are single-class rules that land later in the
      cascade, so a plain :hover ties with them on weight and loses — the
      label and the disc would hold their resting colour through the whole
      animation. This outranks them without touching each section.
  */
}
.on-pr-btn-1.on-pr-btn-1:hover {
  color: var(--on-btn-hover-clr);
  /* the flood starts at the disc, so the label is covered late — hold the
     colour back until it actually arrives, or the text flashes */
  transition: color 0.3s ease 0.18s;
}
.on-pr-btn-1.on-pr-btn-1:hover::after {
  transform: translateY(-50%) scale(11);
}
.on-pr-btn-1.on-pr-btn-1:hover .icon {
  background: var(--on-btn-disc);
  color: var(--on-btn-disc-clr);
}
.on-pr-btn-1.on-pr-btn-1:hover .icon i {
  transform: translateX(220%);
}
.on-pr-btn-1.on-pr-btn-1:hover .icon::after {
  transform: translate(0, -50%);
}
.on-pr-btn-1 {
  /* deep green pill for use on light panels */
}
.on-pr-btn-1:is(.has-v2) {
  --on-btn-flood: var(--on-clr-pr-1);
  --on-btn-hover-clr: var(--on-clr-h-1);
  --on-btn-disc: var(--on-clr-h-1);
  --on-btn-disc-clr: var(--on-clr-pr-1);
  background-color: var(--on-clr-h-1);
  color: #fff;
}
.on-pr-btn-1:is(.has-v2) .icon {
  background: #016c6e;
  color: #fff;
}

/* same lime pill, but the mark trails the label in a dark disc */
.on-pr-btn-2 {
  font-family: var(--on-font-2);
  font-size: 16px;
  font-weight: 500;
  color: var(--on-clr-h-1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--on-clr-pr-1);
  border-radius: 100px;
  padding: 8px;
  padding-left: 20px;
}
.on-pr-btn-2 .icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--on-clr-h-1);
  color: var(--on-clr-pr-1);
  border-radius: 100%;
  font-size: 14px;
}
.on-pr-btn-2 {
  /* outline pill for use on dark, frosted panels */
}
.on-pr-btn-2:is(.has-v2) {
  background-color: transparent;
  color: var(--on-clr-pr-2);
  border: 1px solid var(--on-clr-pr-2);
  border-radius: 8px;
  padding: 14px 24px;
}

/*
    a skewed panel wipes the full fill on a diagonal and the mark spins out
    with an overshoot — bigger and livelier than a simple colour swap
*/
.on-pr-btn-3 {
  /* re-coloured variants (frosted, dark panels) just flip these two —
     --on-btn-bg is the rest colour (also what the wipe layer blends into
     so it's invisible until hover), --on-btn-flood is what hover reveals */
  --on-btn-bg: var(--on-clr-pr-2);
  --on-btn-flood: var(--on-clr-h-2);
  position: relative;
  z-index: 1;
  overflow: hidden;
  font-family: var(--on-font-2);
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--on-btn-bg);
  border-radius: 8px;
  padding: 14px 27px;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}
.on-pr-btn-3 .btn-bg-clr {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  display: flex;
  flex-direction: column;
}
.on-pr-btn-3 .btn-bg-clr span {
  background-color: var(--on-btn-bg);
  height: 100% !important;
  width: 100%;
  transition: var(--on-cube-1);
  transform-origin: bottom center;
}
.on-pr-btn-3 .icon,
.on-pr-btn-3 .text {
  position: relative;
  z-index: 1;
}
.on-pr-btn-3 .text {
  transition: transform 0.35s ease;
}
.on-pr-btn-3 .icon {
  font-size: 20px;
  display: inline-flex;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.on-pr-btn-3 {
  /* doubled class — sections that re-colour this pill land later in the
     cascade at equal weight and would otherwise win the tie, see §11 */
}
.on-pr-btn-3.on-pr-btn-3:hover {
  color: #fff;
  background-color: var(--on-btn-flood);
}
.on-pr-btn-3.on-pr-btn-3:hover .btn-bg-clr span {
  transform: scaleY(0);
}
.on-pr-btn-3.on-pr-btn-3:hover .text {
  transform: translateX(-2px);
}
.on-pr-btn-3.on-pr-btn-3:hover .icon {
  transform: translate(5px, 0px) rotate(45deg);
}
.on-pr-btn-3:is(.has-v2) {
  /* the wipe layer would otherwise sit opaque over the frosted panel */
  --on-btn-bg: transparent;
  --on-btn-flood: var(--on-clr-pr-2);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  border-radius: 8px;
}

.on-pr-btn-4 {
  font-family: var(--on-font-2);
  display: inline-flex;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: var(--on-clr-h-3);
  position: relative;
  z-index: 1;
  transition: var(--on-cube-1);
  align-items: center;
}
.on-pr-btn-4 .text {
  padding: 18px 20px;
  transition: var(--on-cube-1);
}
.on-pr-btn-4 .icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  position: relative;
  z-index: 1;
  transition: var(--on-cube-1);
}
.on-pr-btn-4 .icon i {
  transition: var(--on-cube-1);
}
.on-pr-btn-4::after {
  content: "";
  width: calc(100% - 56px);
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(270deg, rgba(69, 252, 145, 0) 0%, rgba(41, 150, 86, 0.5) 100%), #45FC91;
  border: 2px solid #45FC91;
  border-radius: 12px;
  z-index: -1;
  transition: var(--on-cube-1);
}
.on-pr-btn-4::before {
  content: "";
  width: 56px;
  height: 56px;
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(270deg, rgba(41, 150, 86, 0.5) 0%, rgba(69, 252, 145, 0) 100%), #45FC91;
  border: 2px solid #45FC91;
  border-radius: 12px;
  z-index: -1;
  transition: var(--on-cube-1);
}
.on-pr-btn-4 .bg-shape-1 {
  position: absolute;
  right: 0;
  top: 0;
  height: 100% !important;
  width: 23px;
  background: #45fc91;
  border-radius: 0 12px 12px 0;
  z-index: -4;
}
.on-pr-btn-4 .bg-shape-2 {
  position: absolute;
  right: 10px;
  top: 0;
  height: 100% !important;
  width: 25px;
  background: #39d077;
  border-radius: 0 12px 12px 0;
  z-index: -3;
}
.on-pr-btn-4:hover::after {
  width: calc(100% - 20px);
}
.on-pr-btn-4:hover::before {
  transform: translateX(-20px);
  opacity: 0;
}
.on-pr-btn-4:hover .icon {
  transform: translateX(-20px);
}
.on-pr-btn-4:hover .icon i {
  transform: rotate(45deg);
}

/*
    button-end
*/
/*
    breadcrumb-1-start — shared top banner for every inner page: a short
    eyebrow, the page's own <h1>, and a Home / current trail
*/
.on-breadcrumb-1-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #ecf8f1;
  padding: 200px 0 90px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-breadcrumb-1-area {
    padding: 170px 0 76px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-breadcrumb-1-area {
    padding: 150px 0 60px;
  }
}
@media (max-width: 767px) {
  .on-breadcrumb-1-area {
    padding: 130px 0 44px;
  }
}
.on-breadcrumb-1 {
  /* soft lime pool behind the title — the same accent footer-1 sits on */
}
.on-breadcrumb-1-glow {
  position: absolute;
  z-index: -1;
  width: 460px;
  height: 460px;
  right: -8%;
  top: -35%;
  border-radius: 50%;
  background-color: var(--on-clr-pr-1);
  opacity: 0.3;
  filter: blur(120px);
  pointer-events: none;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-breadcrumb-1-glow {
    width: 300px;
    height: 300px;
  }
}
.on-breadcrumb-1-content {
  text-align: center;
}
.on-breadcrumb-1-title {
  font-size: 52px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-breadcrumb-1-title {
    font-size: 44px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-breadcrumb-1-title {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  .on-breadcrumb-1-title {
    font-size: 28px;
  }
}
.on-breadcrumb-1-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.on-breadcrumb-1-nav li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  color: rgba(2, 61, 63, 0.64);
}
.on-breadcrumb-1-nav a {
  color: inherit;
  transition: var(--on-cube-1);
}
.on-breadcrumb-1-nav a:hover {
  color: var(--on-clr-h-1);
}
.on-breadcrumb-1-nav li:is(.taBcrumb-end) span{
  color: var(--on-clr-h-1);
  font-weight: 500;
}
@media (max-width: 767px) {
  .on-breadcrumb-1-nav li {
    font-size: 14px;
  }
}

/*
    breadcrumb-1-end
*/
/*
    offcanvas-start
*/
.wa-offcanvas-area {
  position: fixed;
  right: 0;
  top: 0;
  background: #fff;
  z-index: 9;
  max-width: 450px;
  width: 100%;
  height: 100% !important;
  overflow: scroll;
  opacity: 1;
  padding: 50px 50px;
  transition: 0.5s ease-in-out;
  transform: translateX(105%);
  visibility: hidden;
  opacity: 0;
}
.wa-offcanvas-area:is(.active) {
  transform: translateX(0%);
  visibility: visible;
  opacity: 1;
  transition: transform 0.5s ease-in-out, opacity 0.2s ease-in-out;
}
.wa-offcanvas-area::-webkit-scrollbar {
  display: none;
}
.wa-offcanvas-close {
  display: flex;
  flex: 0 0 auto;
  width: 25px;
  background: transparent;
  height: 25px;
  justify-content: center;
  align-items: center;
  transition: 300ms;
  gap: 10px;
  flex-direction: column;
  position: relative;
}
.wa-offcanvas-close span {
  transition: 300ms;
  width: 100%;
  height: 3px;
  background: #000;
  position: absolute;
}
.wa-offcanvas-close span:nth-child(1) {
  transform: rotate(45deg);
}
.wa-offcanvas-close span:nth-child(2) {
  transform: rotate(-45deg);
}
.wa-offcanvas-close:hover span {
  transform: rotate(0);
}
.wa-offcanvas-top {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 50px;
}
.wa-offcanvas-top-logo {
  flex: 0 0 auto;
  max-width: 150px;
  width: 100%;
}
.wa-offcanvas-social-title {
  color: #000;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
}
.wa-offcanvas-social-flex {
  gap: 10px;
}
.wa-offcanvas-social-link {
  display: flex;
  width: 40px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  height: 40px;
  color: #000;
  font-size: 18px;
  transition: 400ms;
  justify-content: center;
  align-items: center;
}
.wa-offcanvas-social-link:hover {
  background: #000;
  color: #fff;
  opacity: 1;
}
.wa-offcanvas-gallery {
  margin-bottom: 50px;
}
.wa-offcanvas-gallery-title {
  color: #000;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
}
.wa-offcanvas-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 767px) {
  .wa-offcanvas-gallery-grid {
    grid-template-columns: 1fr;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .wa-offcanvas-gallery-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.wa-offcanvas-gallery-item {
  height: 200px;
}
.wa-offcanvas-gallery-item img {
  transition: 0.3s;
}
.wa-offcanvas-gallery-item:hover img {
  transform: scale(102%);
}

.wa-overly {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 4;
  transform: scaleX(0);
  transform-origin: right;
  transition: opacity 0.5s;
  opacity: 0;
}
.wa-overly:is(.active) {
  transform: scaleX(1);
  transition: opacity 0.5s;
  opacity: 1;
}

/*
    header-menu-customization-start
*/
.mobile-main-navigation ul li {
  position: relative;
  padding: 0px 0;
}
.mobile-main-navigation ul li:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.mobile-main-navigation ul li a {
  font-family: var(--on-font-2);
  text-transform: capitalize;
  font-size: 20px;
  font-weight: 500;
  width: 100%;
  line-height: 1;
  transition: 300ms;
  padding: 20px 0;
}
.mobile-main-navigation ul li .dropdown-btn {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  width: 100%;
  height: 69px;
  display: flex;
  align-items: center;
  justify-content: end;
  background: transparent;
  font-size: 18px;
  color: #000;
  transition: 300ms;
}
.mobile-main-navigation ul li .dropdown-btn i {
  transition: 300ms;
}
.mobile-main-navigation ul li .dropdown-btn:is(.active) i {
  transform: rotate(90deg);
}
.mobile-main-navigation ul li:hover > a {
  color: var(--on-clr-pr-1);
}
.mobile-main-navigation ul li:hover > .dropdown-btn {
  color: var(--on-clr-pr-1);
}
.mobile-main-navigation ul li .dropdown-menu {
  border-radius: 0;
  background-color: transparent;
  border: none;
  margin-left: 30px;
  padding: 0;
}
.mobile-main-navigation ul li .dropdown-menu li {
  padding: 0px 0;
}
.mobile-main-navigation ul li .dropdown-menu li a {
  font-size: 18px;
}
.mobile-main-navigation ul li .dropdown-menu li .dropdown-btn {
  height: 55px;
  font-size: 16px;
}

/*
    header-menu-customization-start
*/
/*
    offcanvas-end
*/
/*
    search-box-css-start
*/
.wa-search-box {
  padding-top: 56px;
  padding-bottom: 56px;
  background-color: rgb(255, 255, 255);
  position: fixed;
  display: flex;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9;
  align-items: center;
  transition: 500ms;
  transform-origin: top;
  transform: scaleY(0);
  visibility: hidden;
  box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.05);
}
.wa-search-box-close {
  height: 40px;
  width: 40px;
  font-size: 18px;
  border: none;
  outline: none;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.1);
  color: #000;
  flex: 0 0 auto;
  transition: all 0.3s ease-in-out;
  position: absolute;
  right: 40px;
  top: 35px;
  line-height: 1;
}
@media (max-width: 767px) {
  .wa-search-box-close {
    right: 20px;
    top: 15px;
  }
}
.wa-search-box-close i {
  font-weight: 400;
  line-height: 1;
}
.wa-search-box-close:hover {
  background: #000;
  color: #fff;
}
.wa-search-box.active {
  top: 0;
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
}
.wa-search-box.active .wa-search-form::after {
  transform: scaleX(1);
  transition-delay: 0.3s;
}
.wa-search-container {
  width: 100%;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.wa-search-title {
  font-size: 23px;
  line-height: 1;
  margin-bottom: 18px;
}
.wa-search-form {
  position: relative;
  z-index: 1;
}
.wa-search-form-input {
  width: 100%;
  margin: 0;
  border: none;
  outline: none;
  text-align: center;
  font-size: 16px;
  color: #888888;
  font-weight: 300;
  padding: 3px 10px;
  background: transparent;
}
.wa-search-form::after {
  content: "";
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  position: absolute;
  background-color: #6D6D6D;
  transition: all 0.5s ease-in-out;
  transform: scaleX(0);
  transition-delay: 0s;
}
.wa-search-tag {
  gap: 8px;
  justify-content: center;
}
.wa-search-tag-title {
  font-size: 16px;
  font-weight: 400;
  color: #5D5D5D;
  margin-bottom: 12px;
}
.wa-search-tag-item {
  flex: 0 0 auto;
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: #454545;
  border: 1px solid #DFE1E5;
  line-height: 1;
  padding: 9px 17px;
  transition: all 0.2s ease-in-out;
}
.wa-search-tag-item:hover {
  background: #000;
  color: #fff;
}

/*
    search-box-css-end
*/
/*
    preloader-1-start
*/
/* the mark and the meta row drift up into place while the count runs */
@keyframes on-preloader-1-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.on-preloader-1 {
  position: fixed;
  inset: 0;
  z-index: 99999;
  /*
      the panel itself carries no ground — the curtain columns below do, so
      they can leave one after another instead of the whole screen fading
  */
  background: transparent;
}
.on-preloader-1:is(.loaded) {
  pointer-events: none;
}
.on-preloader-1 {
  /*
      five columns of deep teal standing side by side. A hair of overlap on
      each keeps a seam from showing through at fractional viewport widths
  */
}
.on-preloader-1-curtain {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
}
.on-preloader-1-curtain span {
  flex: 1;
  margin-right: -1px;
  background-color: var(--on-clr-h-1);
  transform: scaleY(1);
  transform-origin: center top;
  transition: transform 0.9s cubic-bezier(0.62, 0.05, 0.01, 0.99);
}
.on-preloader-1-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 60px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-preloader-1-inner {
    padding: 0 20px;
  }
}
.on-preloader-1 .logo-elm {
  width: 240px;
  animation: on-preloader-1-rise 0.9s cubic-bezier(0.62, 0.05, 0.01, 0.99) both;
}
.on-preloader-1 .logo-elm img {
  width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-preloader-1 .logo-elm {
    width: 200px;
  }
}
@media (max-width: 767px) {
  .on-preloader-1 .logo-elm {
    width: 170px;
  }
}
.on-preloader-1 {
  /*
      the count sits on the foot of the screen behind a hairline that fills
      left to right — the rule is the progress, the number only reads it out
  */
}
.on-preloader-1-bottom {
  position: absolute;
  left: 60px;
  right: 60px;
  bottom: 48px;
  z-index: 2;
  animation: on-preloader-1-rise 0.9s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0.15s both;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-preloader-1-bottom {
    left: 30px;
    right: 30px;
    bottom: 34px;
  }
}
@media (max-width: 767px) {
  .on-preloader-1-bottom {
    left: 20px;
    right: 20px;
    bottom: 28px;
  }
}
.on-preloader-1 .bar-elm {
  position: relative;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.16);
}
.on-preloader-1 .bar-elm span {
  position: absolute;
  inset: 0;
  background-color: var(--on-clr-pr-1);
  transform: scaleX(0);
  transform-origin: left center;
}
.on-preloader-1 .meta-elm {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
}
.on-preloader-1 .label-elm {
  font-family: var(--on-font-1);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 767px) {
  .on-preloader-1 .label-elm {
    font-size: 12px;
    letter-spacing: 0.1em;
  }
}
.on-preloader-1 .count-elm {
  font-family: var(--on-font-2);
  font-size: 80px;
  font-weight: 500;
  line-height: 0.8;
  color: #fff;
  /* the digits are re-written every frame, so they need a fixed advance */
  font-variant-numeric: tabular-nums;
}
.on-preloader-1 .count-elm sup {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  top: -2.4em;
  margin-left: 6px;
  color: var(--on-clr-pr-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-preloader-1 .count-elm {
    font-size: 68px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-preloader-1 .count-elm {
    font-size: 56px;
  }
  .on-preloader-1 .count-elm sup {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .on-preloader-1 .count-elm {
    font-size: 44px;
  }
  .on-preloader-1 .count-elm sup {
    font-size: 14px;
    margin-left: 4px;
  }
}
.on-preloader-1 {
  /*
      exit — the count leaves first, then the columns pull up one after the
      other from the left, so the page underneath is uncovered in strips
  */
}
.on-preloader-1:is(.loaded) .on-preloader-1-inner,
.on-preloader-1:is(.loaded) .on-preloader-1-bottom {
  /* the entry keyframes hold both values with fill both — release
     them or the exit has nothing to transition from */
  animation: none;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.on-preloader-1:is(.loaded) .on-preloader-1-curtain span {
  transform: scaleY(0);
}
.on-preloader-1:is(.loaded) .on-preloader-1-curtain span:nth-child(1) {
  transition-delay: 0.35s;
}
.on-preloader-1:is(.loaded) .on-preloader-1-curtain span:nth-child(2) {
  transition-delay: 0.43s;
}
.on-preloader-1:is(.loaded) .on-preloader-1-curtain span:nth-child(3) {
  transition-delay: 0.51s;
}
.on-preloader-1:is(.loaded) .on-preloader-1-curtain span:nth-child(4) {
  transition-delay: 0.59s;
}
.on-preloader-1:is(.loaded) .on-preloader-1-curtain span:nth-child(5) {
  transition-delay: 0.67s;
}

/* nothing scrolls while the curtain is still standing */
body:has(.on-preloader-1:not(.loaded)) {
  overflow: hidden;
}

/*
    preloader-1-end
*/
/*
    wow-plus-start
*/
/*
    loop-animations
*/
@keyframes wa-rotated {
  to {
    transform: rotate(360deg);
  }
}
@keyframes wa-rotated-minus {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes wa-fade-in-out {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/*
    wow-entrance-animations
*/
@keyframes fadeInUp2 {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInDown2 {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInLeft2 {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInRight2 {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInUp2 {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInDown2 {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* opens from nothing rather than from animate.css's .3 — for shapes and dots */
@keyframes zoomIn2 {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slideInUp3 {
  0% {
    visibility: visible;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUp2,
.fadeInDown2,
.fadeInLeft2,
.fadeInRight2 {
  animation-duration: 700ms;
  animation-timing-function: var(--on-cube-1);
  animation-fill-mode: both;
}

.slideInUp2,
.slideInDown2,
.animate__slideInUp3 {
  animation-duration: 1000ms;
  animation-timing-function: var(--on-cube-1);
  animation-fill-mode: both;
}

.zoomIn2 {
  animation-name: zoomIn2;
  animation-duration: 1100ms;
  animation-timing-function: cubic-bezier(0.62, 0.05, 0.01, 0.99);
  animation-fill-mode: both;
}

.fadeInUp2 {
  animation-name: fadeInUp2;
}

.fadeInDown2 {
  animation-name: fadeInDown2;
}

.fadeInLeft2 {
  animation-name: fadeInLeft2;
}

.fadeInRight2 {
  animation-name: fadeInRight2;
}

.slideInUp2 {
  animation-name: slideInUp2;
}

.slideInDown2 {
  animation-name: slideInDown2;
}

.animate__slideInUp3 {
  animation-name: slideInUp3;
}

/*
    split-title — the second SplitText pass wraps each line in .wa-split-mask,
    which is the window; .wa-split-line is the line that travels through it
*/
.wa-split-mask {
  display: block;
  overflow: hidden;
  /*
      the mask cuts on the line box, so descenders (g, y, p) would lose their
      tails — open the window a touch and pull the extra height back
  */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.wa-split-line {
  display: block;
  will-change: transform;
}

/*
    wow-plus-end
*/
/*
    elements-start
*/
/*
    elements-end
*/
/*
    start-back-to-top
*/
.wa-back-to-top {
  position: fixed;
  right: 1.5%;
  bottom: -12.5%;
  z-index: 4;
  width: 35px;
  height: 40px;
  background-color: var(--on-clr-pr-1);
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
}
@media (max-width: 767px) {
  .wa-back-to-top {
    right: 3%;
  }
}
.wa-back-to-top svg {
  transition: 0.3s;
}
.wa-back-to-top svg * {
  fill: #000;
  transition: 0.3s;
}
.wa-back-to-top:hover {
  height: 35px;
}
.wa-back-to-top:hover svg {
  transform: translateY(-20px);
  mix-blend-mode: difference;
}
.wa-back-to-top:hover svg * {
  fill: var(--on-clr-pr-1);
}
.wa-back-to-top:is(.active) {
  bottom: 2.5%;
}

/*
    start-back-to-end
*/
/*
    layout
*/
/*
    header-1-start
*/
.on-header-1-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
}
.on-header-1-container {
  max-width: 1855px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}
.on-header-1-top {
  position: relative;
  z-index: 1;
  background-color: #fff;
  padding: 8px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-header-1-top {
    display: none;
  }
}
.on-header-1-top::after {
  content: "";
  width: 37.15%;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: var(--on-clr-pr-1);
  border-right: 3px solid var(--on-clr-h-1);
  border-radius: 0 100px 0 0;
}
.on-header-1-top-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.on-header-1-top-phone .text-elm {
  font-size: 14px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}
.on-header-1-top-phone .text-elm::after {
  content: "";
  width: 1px;
  height: 44px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 26px;
  background-color: #F0F7F3;
}
.on-header-1-top-phone .text-elm a, .on-header-1-top-phone .text-elm i {
  color: var(--on-clr-h-1);
  font-weight: 600;
}
.on-header-1-top-phone .text-elm i {
  margin-right: 24px;
}
.on-header-1-top-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.on-header-1-top-social {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-left: 16px;
  position: relative;
  z-index: 1;
}
.on-header-1-top-social::after {
  content: "";
  width: 1px;
  height: 44px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0px;
  background-color: #F0F7F3;
}
.on-header-1-top-social .link-elm {
  font-size: 16px;
  color: var(--on-clr-h-1);
  transition: var(--on-cube-1);
}
.on-header-1-top-social .link-elm:hover {
  color: #016c6e;
}
.on-header-1-top-join {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 16px;
  position: relative;
  z-index: 1;
}
.on-header-1-top-join::after {
  content: "";
  width: 1px;
  height: 44px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0px;
  background-color: #F0F7F3;
}
.on-header-1-top-join {
  cursor: pointer;
  transition: var(--on-cube-1);
}
.on-header-1-top-join span {
  color: var(--on-clr-h-1);
  font-weight: 600;
  transition: var(--on-cube-1);
}
.on-header-1-top-join i {
  color: var(--on-clr-h-1);
  transition: var(--on-cube-1);
}
.on-header-1-top-join {
  /* the whole line lifts together, mark and label included */
}
.on-header-1-top-join:hover {
  color: #016c6e;
}
.on-header-1-top-join:hover span,
.on-header-1-top-join:hover i {
  color: #016c6e;
}
.on-header-1-top-search {
  padding: 0;
  font-size: 14px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 16px;
  position: relative;
  z-index: 1;
}
.on-header-1-top-search::after {
  content: "";
  width: 1px;
  height: 44px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0px;
  background-color: #F0F7F3;
}
.on-header-1-top-search {
  cursor: pointer;
  transition: var(--on-cube-1);
}
.on-header-1-top-search i {
  color: var(--on-clr-h-1);
  transition: var(--on-cube-1);
}
.on-header-1-top-search:hover {
  color: #016c6e;
}
.on-header-1-top-search:hover i {
  color: #016c6e;
}
.on-header-1-bottom {
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-header-1-bottom {
    padding: 10px 0;
  }
}
.on-header-1-bottom::after {
  content: "";
  width: 63%;
  height: 100% !important;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  background-color: var(--on-clr-h-1);
  border-left: 3px solid var(--on-clr-pr-1);
  border-radius: 0 0 0 100px;
}
.on-header-1-bottom-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.on-header-1-bottom-flex .menu-x-action {
  display: flex;
  align-items: center;
  max-width: 1080px;
  width: 100%;
  justify-content: space-between;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-header-1-bottom-flex .menu-x-action {
    justify-content: end;
  }
}
.on-header-1-action-link {
  display: flex;
  align-items: center;
  gap: 28px;
}
.on-header-1-action-link .on-pr-btn-1 {
  /* already a dark pill, so the flood comes back the other way */
  --on-btn-flood: var(--on-clr-pr-1);
  --on-btn-hover-clr: var(--on-clr-h-1);
  --on-btn-disc: var(--on-clr-h-1);
  --on-btn-disc-clr: var(--on-clr-pr-1);
  background-color: #016C6E;
  padding: 6px;
  padding-right: 20px;
  color: #fff;
}
@media (max-width: 767px) {
  .on-header-1-action-link .on-pr-btn-1 {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .on-header-1-action-link .on-pr-btn-1 {
    display: inline-flex;
  }
}
.on-header-1-action-link .on-pr-btn-1 .icon {
  width: 36px;
  height: 36px;
  color: var(--on-clr-h-1);
}

.on-main-navigation .navbar-nav {
  display: flex;
  flex-direction: row;
  gap: 56px;
  justify-content: center;
}
.on-main-navigation .navbar-nav li a {
  position: relative;
  z-index: 1;
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  color: #fff;
  padding: 28px 0px;
  display: inline-flex;
  align-items: center;
  transition: var(--on-cube-1);
}
.on-main-navigation .navbar-nav li:is(.dropdown) > a {
  padding-right: 15px;
}
.on-main-navigation .navbar-nav li:is(.dropdown) > a::before {
  content: "\f107";
  font-family: "Font Awesome 6 free";
  font-weight: 700;
  position: absolute;
  font-size: 12px;
  right: 0;
  top: 50%;
  color: #fff;
  transform: translateY(-50%);
  transition: var(--on-cube-1);
  color: var(--on-clr-pr-1);
}
.on-main-navigation .navbar-nav li:hover > a {
  opacity: 1;
  color: var(--on-clr-pr-1);
}
.on-main-navigation .navbar-nav li:hover > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
}
.on-main-navigation .navbar-nav li .dropdown-menu {
  left: 0;
  top: 100%;
  z-index: 100;
  padding: 10px 0px;
  height: auto;
  min-width: 200px;
  display: block;
  position: absolute;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0);
  transform-origin: top;
  border-radius: 0;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
  background: var(--on-clr-h-1);
  border-top: 1px solid var(--on-clr-pr-1);
  background-color: var(--on-clr-h-1);
  transition: var(--on-cube-1);
}
.on-main-navigation .navbar-nav li .dropdown-menu li {
  display: block;
  margin: 0;
  transition: var(--on-cube-1);
}
.on-main-navigation .navbar-nav li .dropdown-menu li a {
  position: relative;
  width: 100%;
  display: block;
  padding: 9px 20px;
  padding-left: 30px;
  font-size: 16px;
  opacity: 1;
  transition: var(--on-cube-1);
  /*
      a lime rule that unrolls down the left edge — the
      30px of left padding was already holding room for it
  */
}
.on-main-navigation .navbar-nav li .dropdown-menu li a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100% !important;
  background-color: var(--on-clr-pr-1);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.35s cubic-bezier(0.62, 0.05, 0.01, 0.99);
}
.on-main-navigation .navbar-nav li .dropdown-menu li:is(.dropdown) > a {
  padding-right: 13px;
}
.on-main-navigation .navbar-nav li .dropdown-menu li:is(.dropdown) > a::before {
  right: 20px;
}
.on-main-navigation .navbar-nav li .dropdown-menu li {
  /* the row lights, the label steps clear of the rule */
}
.on-main-navigation .navbar-nav li .dropdown-menu li:hover {
  background-color: rgba(255, 255, 255, 0.04);
}
.on-main-navigation .navbar-nav li .dropdown-menu li:hover > a {
  color: var(--on-clr-pr-1);
  padding-left: 38px;
}
.on-main-navigation .navbar-nav li .dropdown-menu li:hover > a::after {
  transform: scaleY(1);
}
.on-main-navigation .navbar-nav li .dropdown-menu li .dropdown-menu {
  top: 0;
  left: 100%;
}

/*
    header-1-end
*/
/*
    header-2-start
*/
.on-header-2-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
}
.on-header-2-top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-header-2-top {
    display: none;
  }
}
.on-header-2-top .on-header-1-top-flex {
  padding: 7px 0;
}
.on-header-2-top .on-header-1-top-phone .text-elm {
  color: #fff;
}
.on-header-2-top .on-header-1-top-phone .text-elm::after {
  background-color: #fff;
  opacity: 24%;
}
.on-header-2-top .on-header-1-top-phone .text-elm i {
  color: #fff;
}
.on-header-2-top .on-header-1-top-phone .text-elm a {
  color: #fff;
}
.on-header-2-top .on-header-1-top-phone .text-elm a:hover {
  color: var(--on-clr-pr-2);
}
.on-header-2-top .on-header-1-top-search {
  color: rgba(255, 255, 255, 0.52);
}
.on-header-2-top .on-header-1-top-search i {
  color: #fff;
}
.on-header-2-top .on-header-1-top-search::after {
  background-color: #fff;
  opacity: 24%;
}
.on-header-2-top .on-header-1-top-search:hover {
  color: var(--on-clr-pr-2);
}
.on-header-2-top .on-header-1-top-search:hover i {
  color: var(--on-clr-pr-2);
}
.on-header-2-top .on-header-1-top-join {
  color: #fff;
}
.on-header-2-top .on-header-1-top-join span, .on-header-2-top .on-header-1-top-join i {
  color: #fff;
}
.on-header-2-top .on-header-1-top-join::after {
  background-color: #fff;
  opacity: 24%;
}
.on-header-2-top .on-header-1-top-join:hover {
  color: var(--on-clr-pr-2);
}
.on-header-2-top .on-header-1-top-join:hover span, .on-header-2-top .on-header-1-top-join:hover i {
  color: var(--on-clr-pr-2);
}
.on-header-2-top .on-header-1-top-social::after {
  background-color: #fff;
  opacity: 24%;
}
.on-header-2-top .on-header-1-top-social .link-elm {
  color: #fff;
}
.on-header-2-top .on-header-1-top-social .link-elm:hover {
  color: var(--on-clr-pr-2);
}
.on-header-2-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 12px;
}
.on-header-2-bottom .menu-x-action {
  display: flex;
  align-items: center;
  gap: 48px;
  padding-right: 8px;
  padding-left: 24px;
  position: relative;
  z-index: 1;
  border-radius: 9px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-header-2-bottom .menu-x-action {
    padding: 6px;
  }
}
.on-header-2-bottom .menu-x-action::after {
  content: "";
  width: 100%;
  height: 100% !important;
  top: 0;
  left: 0;
  position: absolute;
  background: rgba(54, 97, 119, 0.2);
  backdrop-filter: blur(22px);
  border-radius: 9px;
  z-index: -2;
}
.on-header-2-bottom .menu-x-action::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 9px;
  background: linear-gradient(90.28deg, #2A5CFF 0%, rgba(255, 255, 255, 0.2) 19.76%, rgba(255, 255, 255, 0.12) 100%);
  padding: 2px;
  z-index: -1;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.on-header-2-menu .on-main-navigation .navbar-nav {
  gap: 48px;
}
.on-header-2-menu .on-main-navigation .navbar-nav li a {
  padding: 17px 0px;
}
.on-header-2-menu .on-main-navigation .navbar-nav li:is(.dropdown) > a {
  padding-right: 15px;
}
.on-header-2-menu .on-main-navigation .navbar-nav li:is(.dropdown) > a::before {
  color: var(--on-clr-pr-2);
}
.on-header-2-menu .on-main-navigation .navbar-nav li:hover > a {
  color: var(--on-clr-pr-2);
}
.on-header-2-menu .on-main-navigation .navbar-nav .dropdown-menu {
  background-color: #142639;
  border: none;
}
.on-header-2-menu .on-main-navigation .navbar-nav .dropdown-menu li a::after {
  background-color: var(--on-clr-pr-2);
}
.on-header-2-menu .on-main-navigation .navbar-nav .dropdown-menu li:hover > a {
  color: var(--on-clr-pr-2);
}
.on-header-2-action-link {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (min-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-header-2-action-link .ot-offcanvas-btn-1 {
    display: none;
  }
}
.on-header-2-action-link .on-pr-btn-3 {
  padding: 8px 16px;
  /* the wipe layer reads this too, so the rest state stays flat
     instead of flashing the component's default blue underneath */
  --on-btn-bg: #366177;
}
@media (max-width: 767px) {
  .on-header-2-action-link .on-pr-btn-3 {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .on-header-2-action-link .on-pr-btn-3 {
    display: inline-flex;
  }
}

/*
    header-2-end
*/
/*
    header-3-start
*/
.on-header-3-area {
  background: linear-gradient(180deg, rgba(12, 179, 81, 0.28) 0%, rgba(20, 28, 20, 0) 100%);
  border-bottom: 1px solid rgba(20, 28, 20, 0.28);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
}
.on-header-3-container {
  max-width: 1886px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.on-header-3-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-header-3-wrap {
    padding: 10px 0;
  }
}
.on-header-3-menu .on-main-navigation .navbar-nav {
  gap: 48px;
}
.on-header-3-menu .on-main-navigation .navbar-nav li a {
  padding: 24px 0px;
  color: #000;
}
.on-header-3-menu .on-main-navigation .navbar-nav li:is(.dropdown) > a {
  padding-right: 15px;
}
.on-header-3-menu .on-main-navigation .navbar-nav li:is(.dropdown) > a::before {
  color: var(--on-clr-h-3);
}
.on-header-3-menu .on-main-navigation .navbar-nav li .dropdown-menu {
  background: linear-gradient(180deg, rgba(12, 179, 81, 0.28) 0%, rgb(255, 255, 255) 100%);
  border: 1px solid rgba(20, 28, 20, 0.18);
}
.on-header-3-menu .on-main-navigation .navbar-nav li .dropdown-menu li a {
  color: #000;
}
.on-header-3-menu .on-main-navigation .navbar-nav li .dropdown-menu li a::after {
  background-color: #000;
}
.on-header-3-action-link {
  display: flex;
  align-items: center;
  gap: 35px;
  margin-left: auto;
}
.on-header-3-action-link .on-pr-btn-4 .text {
  padding: 15px 17px;
}
.on-header-3-action-link .on-pr-btn-4 .icon {
  width: 46px;
  height: 46px;
}
.on-header-3-action-link .on-pr-btn-4::before {
  width: 46px;
  height: 46px;
}
.on-header-3-action-link .on-pr-btn-4::after {
  width: calc(100% - 46px);
}
.on-header-3-action-link .on-pr-btn-4:hover::after {
  width: calc(100% - 20px);
}
@media (max-width: 767px) {
  .on-header-3-action-link .on-pr-btn-4 {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .on-header-3-action-link .on-pr-btn-4 {
    display: inline-flex;
  }
}
.on-header-3-action-link .on-header-1-top-search {
  padding: 0;
}
.on-header-3-action-link .on-header-1-top-search i {
  font-size: 18px;
}
.on-header-3-action-link .on-header-1-top-search::after {
  display: none;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-header-3-action-link .on-header-1-top-search {
    display: none;
  }
}

/*
    header-3-end
*/
/*
    sticky-header-css-start
*/
.wa_sticky_header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  transition: 400ms ease-in-out;
  z-index: 8;
}
.wa_sticky_header:is(.wa_sticky) {
  transform: translateY(-190%);
}
.wa_sticky_header:is(.wa_sticky):is(.wa_sticky_show) {
  transform: translateY(0%);
}
.wa_sticky_header:is(.ag-header-1-area) {
  top: 12px;
}
.wa_sticky_header:is(.ag-header-1-area):is(.wa_sticky_show) {
  animation: none;
}

/*
    sticky-header-css-end
*/
/*
    hero-1-start
*/
/* the ring the feature icons throw off while they are hovered */
@keyframes on-hero-1-icon-ripple {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  70% {
    opacity: 0;
    transform: scale(1.85);
  }
  100% {
    opacity: 0;
    transform: scale(1.85);
  }
}
.on-hero-1-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #013031;
  padding-bottom: 24px;
}
@media (max-width: 767px) {
  .on-hero-1-area {
    padding-bottom: 15px;
  }
}
.on-hero-1-container {
  max-width: 1900px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.on-hero-1 {
  /* the photo only reads as a texture — the deep green underneath does the work */
}
.on-hero-1-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.on-hero-1-bg img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  opacity: 0.15;
}
.on-hero-1 {
  /* fades the lower third back to solid so the feature cards stay readable */
}
.on-hero-1-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 536px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(to top, #013031 0%, #013031 44%, rgba(1, 48, 49, 0.8) 70%, rgba(1, 48, 49, 0) 100%);
}
@media only screen and (min-width: 1600px) and (max-width: 1799px) {
  .on-hero-1-fade {
    height: 480px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-hero-1-fade {
    height: 440px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-hero-1-fade {
    height: 400px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-hero-1-fade {
    height: 420px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-hero-1-fade {
    height: 320px;
  }
}
@media (max-width: 767px) {
  .on-hero-1-fade {
    height: 260px;
  }
}
.on-hero-1 {
  /* two quarter-discs cut out of a 500px square — the curve is a full-size corner radius */
}
.on-hero-1-shape-img {
  position: absolute;
  z-index: 2;
  width: 480px;
  height: 480px;
  overflow: hidden;
}
.on-hero-1-shape-img:is(.has-v1) {
  left: 18%;
  top: 635px;
  border-radius: 0 0 0 100%;
  opacity: 80%;
}
.on-hero-1-shape-img:is(.has-v2) {
  left: 55.68%;
  top: 154px;
  border-radius: 0 100% 0 0;
}
@media only screen and (min-width: 1600px) and (max-width: 1799px) {
  .on-hero-1-shape-img {
    width: 440px;
    height: 440px;
  }
  .on-hero-1-shape-img:is(.has-v1) {
    top: 560px;
  }
  .on-hero-1-shape-img:is(.has-v2) {
    top: 110px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-hero-1-shape-img {
    width: 380px;
    height: 380px;
  }
  .on-hero-1-shape-img:is(.has-v1) {
    top: 480px;
  }
  .on-hero-1-shape-img:is(.has-v2) {
    top: 100px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-hero-1-shape-img {
    width: 320px;
    height: 320px;
  }
  .on-hero-1-shape-img:is(.has-v1) {
    left: 15%;
    top: 400px;
  }
  .on-hero-1-shape-img:is(.has-v2) {
    left: 57%;
    top: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-hero-1-shape-img {
    display: none;
  }
}
.on-hero-1-main-img {
  position: absolute;
  left: 34.68%;
  top: 165px;
  z-index: 4;
  width: 663px;
}
@media only screen and (min-width: 1600px) and (max-width: 1799px) {
  .on-hero-1-main-img {
    width: 580px;
    top: 150px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-hero-1-main-img {
    width: 510px;
    top: 150px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-hero-1-main-img {
    width: 440px;
    top: 150px;
  }
}
.on-hero-1-main-img {
  /* no room left beside the text — park it on the right edge */
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-hero-1-main-img {
    left: auto;
    right: 0;
    top: 190px;
    width: 340px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-hero-1-main-img {
    display: none;
  }
}
.on-hero-1 {
  /*
      content
  */
}
.on-hero-1-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  padding: 310px 12.57% 95px;
}
@media only screen and (min-width: 1600px) and (max-width: 1799px) {
  .on-hero-1-content {
    padding: 280px 12.57% 85px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-hero-1-content {
    padding: 250px 12.57% 75px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-hero-1-content {
    padding: 210px 8% 65px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-hero-1-content {
    display: block;
    padding: 180px 0 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-hero-1-content {
    display: block;
    padding: 140px 0 50px;
  }
}
@media (max-width: 767px) {
  .on-hero-1-content {
    display: block;
    padding: 140px 0 50px;
  }
}
.on-hero-1-title {
  font-family: var(--on-font-2);
  color: #fff;
  margin-bottom: 0;
}
.on-hero-1-title .pre-elm,
.on-hero-1-title .lg-elm,
.on-hero-1-title .sm-elm {
  display: block;
  position: relative;
}
.on-hero-1-title {
  /* sits behind the cut-out figure, same as the lime line under it */
}
.on-hero-1-title .pre-elm,
.on-hero-1-title .lg-elm {
  z-index: 3;
}
.on-hero-1-title .pre-elm {
  font-size: 34px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 0.16em;
  margin-bottom: -4px;
}
.on-hero-1-title .lg-elm {
  font-size: 160px;
  font-weight: 700;
  line-height: 164px;
  letter-spacing: -3px;
  color: var(--on-clr-pr-1);
}
.on-hero-1-title {
  /* the only headline line that crosses in front of the figure */
}
.on-hero-1-title .sm-elm {
  z-index: 6;
  font-size: 134px;
  font-weight: 600;
  line-height: 140px;
  letter-spacing: -1px;
  margin-top: -15px;
  margin-left: 106px;
}
@media only screen and (min-width: 1600px) and (max-width: 1799px) {
  .on-hero-1-title .pre-elm {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: 12px;
    margin-bottom: 20px;
  }
  .on-hero-1-title .lg-elm {
    font-size: 140px;
    line-height: 144px;
    letter-spacing: -2px;
  }
  .on-hero-1-title .sm-elm {
    font-size: 118px;
    line-height: 124px;
    margin-top: -13px;
    margin-left: 92px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-hero-1-title .pre-elm {
    font-size: 26px;
    line-height: 32px;
    letter-spacing: 10px;
    margin-bottom: 18px;
  }
  .on-hero-1-title .lg-elm {
    font-size: 122px;
    line-height: 126px;
    letter-spacing: -2px;
  }
  .on-hero-1-title .sm-elm {
    font-size: 102px;
    line-height: 108px;
    margin-top: -11px;
    margin-left: 80px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-hero-1-title .pre-elm {
    font-size: 22px;
    line-height: 28px;
    letter-spacing: 8px;
    margin-bottom: 16px;
  }
  .on-hero-1-title .lg-elm {
    font-size: 104px;
    line-height: 108px;
    letter-spacing: -2px;
  }
  .on-hero-1-title .sm-elm {
    font-size: 88px;
    line-height: 92px;
    margin-top: -9px;
    margin-left: 66px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-hero-1-title .pre-elm {
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 6px;
    margin-bottom: 14px;
  }
  .on-hero-1-title .lg-elm {
    font-size: 96px;
    line-height: 100px;
    letter-spacing: -2px;
  }
  .on-hero-1-title .sm-elm {
    font-size: 82px;
    line-height: 86px;
    margin-top: -8px;
    margin-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-hero-1-title .pre-elm {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 5px;
    margin-bottom: 12px;
  }
  .on-hero-1-title .lg-elm {
    font-size: 76px;
    line-height: 80px;
    letter-spacing: -2px;
  }
  .on-hero-1-title .sm-elm {
    font-size: 64px;
    line-height: 68px;
    margin-top: -6px;
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .on-hero-1-title .pre-elm {
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 3px;
    margin-bottom: 10px;
  }
  .on-hero-1-title .lg-elm {
    font-size: 48px;
    line-height: 52px;
    letter-spacing: -1px;
  }
  .on-hero-1-title .sm-elm {
    font-size: 40px;
    line-height: 44px;
    margin-top: -4px;
    margin-left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .on-hero-1-title .lg-elm {
    font-size: 60px;
    line-height: 64px;
  }
  .on-hero-1-title .sm-elm {
    font-size: 50px;
    line-height: 54px;
  }
}
.on-hero-1-content-right {
  position: relative;
  z-index: 6;
  flex: 0 0 auto;
  width: 428px;
  margin-top: 369px;
}
.on-hero-1-content-right .text-elm {
  color: #fff;
  margin-bottom: 32px;
}
.on-hero-1-content-right .on-pr-btn-1 {
  color: var(--on-clr-h-1);
}
.on-hero-1-content-right .on-pr-btn-1::after {
  transform: translateY(-50%) translateX(0%) scale(0);
}
.on-hero-1-content-right .on-pr-btn-1:hover::after {
  transform: translateY(-50%) translateX(75%) scale(11);
}
@media only screen and (min-width: 1600px) and (max-width: 1799px) {
  .on-hero-1-content-right {
    width: 400px;
    margin-top: 320px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-hero-1-content-right {
    width: 370px;
    margin-top: 275px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-hero-1-content-right {
    width: 330px;
    margin-top: 235px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-hero-1-content-right {
    width: 100%;
    max-width: 520px;
    margin-top: 32px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-hero-1-content-right {
    width: 100%;
    max-width: 560px;
    margin-top: 28px;
  }
}
@media (max-width: 767px) {
  .on-hero-1-content-right {
    width: 100%;
    margin-top: 24px;
  }
  .on-hero-1-content-right .text-elm {
    font-size: 16px;
    margin-bottom: 24px;
  }
}
.on-hero-1 {
  /*
      features
  */
}
.on-hero-1-features {
  position: relative;
  z-index: 7;
  display: flex;
  align-items: flex-start;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-hero-1-features {
    display: block;
  }
}
.on-hero-1-features-video {
  flex: 0 0 auto;
  width: 393px;
  height: 319px;
  border-radius: 16px;
}
@media only screen and (min-width: 1600px) and (max-width: 1799px) {
  .on-hero-1-features-video {
    width: 360px;
    height: 300px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-hero-1-features-video {
    width: 330px;
    height: 280px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-hero-1-features-video {
    width: 300px;
    height: 250px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-hero-1-features-video {
    width: 100%;
    height: 240px;
    margin-bottom: -1px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-hero-1-features-video {
    width: 100%;
    height: 200px;
    margin-bottom: -1px;
  }
}
@media (max-width: 767px) {
  .on-hero-1-features-video {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    margin-bottom: -1px;
  }
}
.on-hero-1-features {
  /* the card borders are shared, so every neighbour pulls back a pixel */
}
.on-hero-1-features-right {
  flex: 1;
  min-width: 0;
  margin-left: -1px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-hero-1-features-right {
    margin-left: 0;
  }
}
.on-hero-1-features-grid {
  display: flex;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-hero-1-features-grid {
    display: block;
  }
}
.on-hero-1-features-item {
  flex: 1 1 0;
  min-width: 0;
  height: 240px;
  padding: 35px 40px;
  border: 1px solid #486a6a;
  border-radius: 16px;
}
.on-hero-1-features-item + .on-hero-1-features-item {
  margin-left: -1px;
}
.on-hero-1-features-item .icon-elm {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 28px;
}
.on-hero-1-features-item .icon-elm::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.14);
  transition: transform 0.5s cubic-bezier(0.62, 0.05, 0.01, 0.99), background-color 0.4s ease;
}
.on-hero-1-features-item .icon-elm {
  /* the ring only exists while the card is hovered */
}
.on-hero-1-features-item .icon-elm::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--on-clr-pr-1);
  opacity: 0;
}
.on-hero-1-features-item .icon-elm i {
  position: absolute;
  left: 12px;
  top: 12px;
  font-size: 44px;
  line-height: 1;
  color: var(--on-clr-pr-1);
  transition: transform 0.5s cubic-bezier(0.62, 0.05, 0.01, 0.99), color 0.4s ease;
}
.on-hero-1-features-item {
  /* the disc opens, the mark tips into it, and a ring keeps pulsing out */
}
.on-hero-1-features-item:hover .icon-elm::before {
  transform: scale(1.22);
  background-color: rgba(190, 255, 107, 0.22);
}
.on-hero-1-features-item:hover .icon-elm::after {
  animation: on-hero-1-icon-ripple 1.8s cubic-bezier(0.62, 0.05, 0.01, 0.99) infinite;
}
.on-hero-1-features-item:hover .icon-elm i {
  transform: translateY(-6px) rotate(-6deg);
}
.on-hero-1-features-item .title-elm {
  font-family: var(--on-font-1);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: #fff;
  margin-bottom: 10px;
}
.on-hero-1-features-item .text-elm {
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #fff;
  margin-bottom: 0;
  opacity: 80%;
}
@media only screen and (min-width: 1600px) and (max-width: 1799px) {
  .on-hero-1-features-item {
    height: 230px;
    padding: 30px 32px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-hero-1-features-item {
    height: 225px;
    padding: 28px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-hero-1-features-item {
    height: 220px;
    padding: 24px;
  }
  .on-hero-1-features-item .title-elm {
    font-size: 18px;
  }
  .on-hero-1-features-item .text-elm {
    font-size: 15px;
    line-height: 22px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-hero-1-features-item {
    height: auto;
    min-height: 210px;
    padding: 26px 24px;
  }
  .on-hero-1-features-item .icon-elm {
    margin-bottom: 22px;
  }
  .on-hero-1-features-item .title-elm {
    font-size: 18px;
  }
  .on-hero-1-features-item .text-elm {
    font-size: 15px;
    line-height: 22px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-hero-1-features-item {
    height: auto;
    padding: 24px;
  }
  .on-hero-1-features-item + .on-hero-1-features-item {
    margin-left: 0;
    margin-top: -1px;
  }
  .on-hero-1-features-item .icon-elm {
    margin-bottom: 20px;
  }
  .on-hero-1-features-item .title-elm {
    font-size: 18px;
  }
  .on-hero-1-features-item .text-elm {
    font-size: 15px;
    line-height: 22px;
  }
}
@media (max-width: 767px) {
  .on-hero-1-features-item {
    padding: 20px;
  }
  .on-hero-1-features-item .icon-elm {
    width: 48px;
    height: 48px;
  }
  .on-hero-1-features-item .icon-elm::before {
    width: 40px;
    height: 40px;
  }
  .on-hero-1-features-item .icon-elm i {
    left: 8px;
    top: 8px;
    font-size: 36px;
  }
  .on-hero-1-features-item .title-elm {
    font-size: 17px;
  }
  .on-hero-1-features-item .text-elm {
    font-size: 14px;
  }
}
.on-hero-1 {
  /*
      brand-marquee-x-author
  */
}
.on-hero-1-brand {
  display: flex;
  align-items: center;
  gap: 23px;
  height: 80px;
  padding: 16px 28px;
  border: 1px solid #486a6a;
  border-radius: 16px;
  margin-top: -1px;
}
.on-hero-1-brand-marquee {
  flex: 1;
  min-width: 0;
  /* the loop dissolves into the panel instead of ending on a hard edge */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 31%, #000 65%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 31%, #000 65%, transparent 100%);
}
.on-hero-1-brand-logo {
  display: inline-block;
  vertical-align: middle;
  margin-right: 80px;
}
.on-hero-1-brand-logo img {
  opacity: 0.75;
}
.on-hero-1-brand-author {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.on-hero-1-brand-author .text-elm {
  font-family: var(--on-font-2);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #fff;
  text-align: right;
  width: 142px;
  margin-bottom: 0;
}
.on-hero-1-brand-author .author-img {
  display: flex;
  align-items: center;
}
.on-hero-1-brand-author .author-img > * {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #003030;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.on-hero-1-brand-author .author-img > * + * {
  margin-left: -14px;
}
.on-hero-1-brand-author .author-img .add-elm {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #024748;
  color: #fff;
  font-size: 20px;
}
@media only screen and (min-width: 1600px) and (max-width: 1799px) {
  .on-hero-1-brand {
    padding: 16px 24px;
    gap: 20px;
  }
  .on-hero-1-brand .on-hero-1-brand-logo {
    margin-right: 70px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-hero-1-brand {
    padding: 14px 20px;
    gap: 16px;
  }
  .on-hero-1-brand .on-hero-1-brand-logo {
    margin-right: 60px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-hero-1-brand {
    padding: 14px 18px;
    gap: 14px;
  }
  .on-hero-1-brand .on-hero-1-brand-logo {
    margin-right: 50px;
  }
  .on-hero-1-brand .on-hero-1-brand-author {
    gap: 12px;
  }
  .on-hero-1-brand .on-hero-1-brand-author .text-elm {
    width: 130px;
  }
  .on-hero-1-brand .on-hero-1-brand-author .author-img > * {
    width: 44px;
    height: 44px;
  }
  .on-hero-1-brand .on-hero-1-brand-author .author-img > * + * {
    margin-left: -12px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-hero-1-brand {
    padding: 14px 20px;
    gap: 14px;
  }
  .on-hero-1-brand .on-hero-1-brand-logo {
    margin-right: 50px;
  }
  .on-hero-1-brand .on-hero-1-brand-author {
    gap: 12px;
  }
  .on-hero-1-brand .on-hero-1-brand-author .text-elm {
    width: 120px;
  }
  .on-hero-1-brand .on-hero-1-brand-author .author-img > * {
    width: 44px;
    height: 44px;
  }
  .on-hero-1-brand .on-hero-1-brand-author .author-img > * + * {
    margin-left: -12px;
  }
}
.on-hero-1-brand {
  /* the row can no longer hold both — the logos take their own line */
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-hero-1-brand {
    flex-wrap: wrap;
    justify-content: center;
    height: auto;
    padding: 16px;
    gap: 14px;
  }
  .on-hero-1-brand .on-hero-1-brand-marquee {
    order: 2;
    flex: 0 0 100%;
    width: 100%;
  }
  .on-hero-1-brand .on-hero-1-brand-logo {
    margin-right: 40px;
  }
  .on-hero-1-brand .on-hero-1-brand-author {
    order: 1;
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 767px) {
  .on-hero-1-brand {
    padding: 14px;
  }
  .on-hero-1-brand .on-hero-1-brand-author {
    gap: 10px;
  }
  .on-hero-1-brand .on-hero-1-brand-author .text-elm {
    font-size: 14px;
    line-height: 20px;
    width: auto;
    max-width: 120px;
  }
  .on-hero-1-brand .on-hero-1-brand-author .author-img > * {
    width: 40px;
    height: 40px;
  }
  .on-hero-1-brand .on-hero-1-brand-author .author-img > * + * {
    margin-left: -12px;
  }
  .on-hero-1-brand .on-hero-1-brand-author .add-elm {
    font-size: 16px;
  }
}

/*
    hero-1-end
*/
/*
    hero-2-start
*/
.on-hero-2-title {
  font-size: 80px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  letter-spacing: -2%;
  max-width: 870px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-hero-2-title {
    font-size: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-hero-2-title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-hero-2-title {
    font-size: 50px;
  }
}
@media (max-width: 767px) {
  .on-hero-2-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .on-hero-2-title {
    font-size: 45px;
  }
}
.on-hero-2-disc {
  color: #fff;
  max-width: 630px;
  opacity: 80%;
}
.on-hero-2-content-btn {
  /* z-index:auto here wouldn't open its own stacking context, so
     the line's negative z-index would escape past this wrap and
     compare against unrelated ancestors instead of just the
     buttons sitting next to it */
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 20px;
  flex-wrap: wrap;
}
@media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-hero-2-content-btn {
    padding: 30px 30px;
  }
}
.on-hero-2-content-btn-line {
  position: absolute;
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0.32);
  z-index: -1;
}
@media (min-width: 1800px) {
  .on-hero-2-content-btn-line {
    transform: scaleX(1.3);
  }
}
.on-hero-2-content-btn-line .dot-shape {
  width: 15px;
  height: 20px;
  position: absolute;
  top: -10px;
  left: -8px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.on-hero-2-content-btn-line .dot-shape span:nth-child(1) {
  width: 9px;
  height: 11px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 14%;
  position: absolute;
}
.on-hero-2-content-btn-line .dot-shape span:nth-child(2) {
  width: 5px;
  height: 6px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
}
.on-hero-2-content-btn-line .dot-shape:nth-child(2) {
  left: auto;
  right: -8px;
}
.on-hero-2-item {
  min-height: 980px;
  display: flex;
  align-items: end;
  padding-bottom: 80px;
}
@media (max-width: 767px) {
  .on-hero-2-item {
    min-height: 760px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .on-hero-2-item {
    min-height: 860px;
  }
}
.on-hero-2-item .bg-img {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.on-hero-2-item .bg-clr {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 31%;
}

/*
    hero-2-end
*/
/*
    hero-3-start
*/
.on-hero-3-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #F4F7F3;
  padding-top: 250px;
  padding-bottom: 290px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-hero-3-area {
    padding-top: 180px;
    padding-bottom: 180px;
  }
}
.on-hero-3-area::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(69, 252, 145, 0) 0%, #45FC91 53.85%, rgba(69, 252, 145, 0) 100%);
}
.on-hero-3-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.on-hero-3-bg::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 100% !important;
  background: linear-gradient(270deg, rgba(244, 247, 243, 0) 30%, #F4F7F3 75%);
  bottom: 0;
  left: 0;
  z-index: -2;
}
.on-hero-3-bg .img-elm {
  position: absolute;
  right: 0;
  top: 0;
  width: 88%;
  height: 100% !important;
  z-index: -3;
}
.on-hero-3-bg {
  /* pre-blurred glow assets, cheaper than a live CSS blur filter */
}
.on-hero-3-bg .glow-elm {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.on-hero-3-bg .glow-elm:is(.has-v1) {
  left: 0;
  top: 0%;
  width: 29%;
}
.on-hero-3-bg .glow-elm:is(.has-v2) {
  right: 0;
  bottom: 0;
  width: 38%;
  text-align: right;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-hero-3-bg .glow-elm {
    display: none;
  }
}
.on-hero-3-content {
  position: relative;
  z-index: 1;
  max-width: 652px;
}
.on-hero-3-title {
  font-size: 64px;
  line-height: 1.125;
  margin-bottom: 20px;
}
@media only screen and (min-width: 1600px) and (max-width: 1799px) {
  .on-hero-3-title {
    font-size: 58px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-hero-3-title {
    font-size: 52px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-hero-3-title {
    font-size: 46px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-hero-3-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-hero-3-title {
    font-size: 38px;
  }
}
@media (max-width: 767px) {
  .on-hero-3-title {
    font-size: 36px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .on-hero-3-title {
    font-size: 32px;
  }
}
.on-hero-3-disc {
  max-width: 670px;
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-hero-3-disc {
    margin-bottom: 24px;
  }
}

/*
    hero-3-end
*/
/*
    about-1-start
*/
.on-about-1-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #e7f5ed;
}
.on-about-1-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.on-about-1-bg img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-about-1 {
  /* the photo column runs past the container on the right, as in the design */
}
.on-about-1-wrap {
  display: flex;
  align-items: flex-start;
  gap: 58px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-about-1-wrap {
    gap: 48px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-about-1-wrap {
    gap: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-about-1-wrap {
    display: block;
  }
}
.on-about-1-left {
  flex: 1;
  min-width: 0;
}
.on-about-1-sec-title {
  max-width: 660px;
  margin-bottom: 63px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-about-1-sec-title {
    max-width: 600px;
    margin-bottom: 55px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-about-1-sec-title {
    margin-bottom: 48px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-about-1-sec-title {
    margin-bottom: 42px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-about-1-sec-title {
    max-width: 100%;
    margin-bottom: 38px;
  }
}
@media (max-width: 767px) {
  .on-about-1-sec-title {
    max-width: 100%;
    margin-bottom: 32px;
  }
  .on-about-1-sec-title .on-subtitle-1 {
    margin-bottom: 12px;
  }
}
.on-about-1 {
  /* the framed photo sits on the same baseline as the copy beside it */
}
.on-about-1-left-inner {
  display: flex;
  align-items: flex-end;
  gap: 48px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-about-1-left-inner {
    align-items: start;
    flex-direction: column;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-about-1-left-inner {
    gap: 32px;
    align-items: start;
    flex-direction: column;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-about-1-left-inner {
    gap: 32px;
    align-items: start;
    flex-direction: column;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-about-1-left-inner {
    align-items: start;
    flex-direction: column;
  }
}
.on-about-1 {
  /*
      author-box
  */
}
.on-about-1-author-box {
  position: relative;
  z-index: 1;
  flex: 0 0 331px;
  width: 331px;
  height: 426px;
  border-radius: 20px;
  overflow: hidden;
}
.on-about-1-author-box > img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-about-1-author-box-content {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 13px;
  padding: 20px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.on-about-1-author-box-content .counter-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.on-about-1-author-box-content .number-elm {
  font-family: var(--on-font-1);
  font-size: 36px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -2px;
  color: #024748;
  margin-bottom: 0;
}
.on-about-1-author-box-content .author-img {
  display: flex;
  align-items: center;
}
.on-about-1-author-box-content .author-img img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 2.5px solid #fff;
  object-fit: cover;
}
.on-about-1-author-box-content .author-img img + img {
  margin-left: -12px;
}
.on-about-1-author-box-content .text-elm {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -1px;
  color: var(--on-clr-h-1);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-about-1-author-box {
    flex: 0 0 300px;
    width: 300px;
    height: 400px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-about-1-author-box {
    flex: 0 0 260px;
    width: 260px;
    height: 370px;
  }
  .on-about-1-author-box-content {
    padding: 16px;
  }
  .on-about-1-author-box-content .number-elm {
    font-size: 30px;
  }
  .on-about-1-author-box-content .author-img img {
    width: 38px;
    height: 38px;
  }
  .on-about-1-author-box-content .author-img img + img {
    margin-left: -10px;
  }
  .on-about-1-author-box-content .text-elm {
    font-size: 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-about-1-author-box {
    flex: 0 0 331px;
    width: 331px;
    height: 426px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-about-1-author-box {
    width: 100%;
    max-width: 400px;
    height: 380px;
  }
}
@media (max-width: 767px) {
  .on-about-1-author-box {
    width: 100%;
    height: 340px;
  }
  .on-about-1-author-box-content {
    padding: 16px;
  }
  .on-about-1-author-box-content .number-elm {
    font-size: 30px;
  }
  .on-about-1-author-box-content .author-img img {
    width: 38px;
    height: 38px;
  }
  .on-about-1-author-box-content .author-img img + img {
    margin-left: -10px;
  }
  .on-about-1-author-box-content .text-elm {
    font-size: 15px;
  }
}
.on-about-1-left-inner-right {
  flex: 1;
  min-width: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-about-1-left-inner-right {
    margin-top: 40px;
  }
}
@media (max-width: 767px) {
  .on-about-1-left-inner-right {
    margin-top: 32px;
  }
}
.on-about-1-text {
  margin-bottom: 32px;
}
@media (max-width: 767px) {
  .on-about-1-text {
    font-size: 16px;
    margin-bottom: 24px;
  }
}
.on-about-1 {
  /*
      feature-accordion — each pane laps 18px under the one before it, so the
      9px radius reads as a corner tucked behind its neighbour rather than a
      seam. Closed panes show a 60px sliver; the open one takes the rest.
  */
}
.on-about-1-feature {
  display: flex;
  height: 272px;
  margin-top: 60px;
}
.on-about-1-feature-item {
  position: relative;
  flex: 0 0 78px;
  margin-left: -18px;
  /* stretch, so the closed panes match whichever one is open */
  align-self: stretch;
  border-radius: 9px;
  overflow: hidden;
  cursor: pointer;
  /*
      the plate color belongs to the state, not the topic — any of
      the three can end up closed, and a closed pane has to carry the
      white mark and label on a dark ground
  */
  background-color: var(--on-clr-h-1);
  /*
      grow is a plain number, so it tweens — a basis going to `auto`
      is what made the old version jump
  */
  flex-grow: 0;
  transition: flex-grow 0.45s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s ease;
}
.on-about-1-feature-item:first-child {
  flex-basis: 60px;
  margin-left: 0;
}
.on-about-1-feature-item {
  /* front-to-back, so every pane laps the next one */
}
.on-about-1-feature-item:nth-child(1) {
  z-index: 3;
}
.on-about-1-feature-item {
  /* the middle plate lifts a shade, as the design has it */
}
.on-about-1-feature-item:nth-child(2) {
  z-index: 2;
  background-color: #599ea1;
}
.on-about-1-feature-item:nth-child(3) {
  z-index: 1;
}
.on-about-1-feature-item {
  /* closed pane — pinned to the visible sliver on the right */
}
.on-about-1-feature-item .head-elm {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0;
  opacity: 0.72;
  color: #fff;
  transition: opacity 0.25s ease 0.2s;
}
.on-about-1-feature-item .icon-elm {
  width: 28px;
  height: 28px;
  background-color: currentColor;
}
.on-about-1-feature-item .label-elm {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--on-font-2);
  font-size: 15px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0;
}
.on-about-1-feature-item {
  /*
      the lapped 18px is dead space, so the copy is inset past it.
      A closed pane is taken out of flow: left in it, its paragraph
      would stack up inside a 50px sliver and push the whole row
      taller than the open panel
  */
}
.on-about-1-feature-item .body-elm {
  position: absolute;
  inset: 0;
  padding: 32px 32px 40px 50px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s 0.2s;
}
.on-about-1-feature-item:first-child .body-elm {
  padding-left: 32px;
}
.on-about-1-feature-item {
  /* open pane — the copy is held back until the width has settled, so
     the paragraph never re-wraps in front of the reader */
}
.on-about-1-feature-item:is(.active) {
  flex-grow: 1;
  background-color: #fff;
}
.on-about-1-feature-item:is(.active) .head-elm {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0s 0.18s;
}
.on-about-1-feature-item:is(.active) {
  /* back into flow — the open panel is what sets the row height */
}
.on-about-1-feature-item:is(.active) .body-elm {
  position: relative;
  inset: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease 0.4s, visibility 0s 0s;
}
.on-about-1-feature {
  /* panel head: label + rule on the left, the outline mark on the right */
}
.on-about-1-feature-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.on-about-1-feature-head-left {
  flex: 1;
  min-width: 0;
  max-width: 220px;
}
.on-about-1-feature-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.on-about-1-feature-line {
  position: relative;
  display: flex;
  align-items: center;
  height: 17px;
  /* the hairline the mark sits on */
}
.on-about-1-feature-line::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 0;
  top: 8px;
  height: 1px;
  border-radius: 30px;
  background-color: rgba(5, 5, 25, 0.16);
}
.on-about-1-feature-line svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 14px;
  height: 17px;
}
.on-about-1-feature-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  background-color: var(--on-clr-h-1);
  opacity: 0.68;
}
.on-about-1-feature-text {
  font-size: 16px;
  line-height: 28px;
  margin-bottom: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-about-1-feature {
    height: 260px;
    margin-top: 50px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-about-1-feature {
    height: 250px;
    margin-top: 44px;
  }
  .on-about-1-feature .on-about-1-feature-item {
    flex-basis: 74px;
  }
  .on-about-1-feature .on-about-1-feature-item:first-child {
    flex-basis: 56px;
  }
  .on-about-1-feature .on-about-1-feature-item .head-elm {
    width: 56px;
  }
  .on-about-1-feature .on-about-1-feature-item .body-elm {
    padding: 32px 24px 32px 42px;
  }
  .on-about-1-feature .on-about-1-feature-item:first-child .body-elm {
    padding-left: 24px;
  }
  .on-about-1-feature .on-about-1-feature-icon {
    width: 34px;
    height: 34px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-about-1-feature {
    height: 260px;
    margin-top: 40px;
  }
  .on-about-1-feature .on-about-1-feature-item {
    flex-basis: 70px;
  }
  .on-about-1-feature .on-about-1-feature-item:first-child {
    flex-basis: 52px;
  }
  .on-about-1-feature .on-about-1-feature-item .head-elm {
    width: 52px;
  }
  .on-about-1-feature .on-about-1-feature-item .body-elm {
    padding: 30px 24px 30px 42px;
  }
  .on-about-1-feature .on-about-1-feature-item:first-child .body-elm {
    padding-left: 24px;
  }
  .on-about-1-feature .on-about-1-feature-icon {
    width: 34px;
    height: 34px;
  }
}
.on-about-1-feature {
  /* the copy no longer fits a fixed pane — let it set its own height */
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-about-1-feature {
    height: auto;
    min-height: 320px;
    margin-top: 36px;
  }
  .on-about-1-feature .on-about-1-feature-item {
    flex-basis: 70px;
  }
  .on-about-1-feature .on-about-1-feature-item:first-child {
    flex-basis: 52px;
  }
  .on-about-1-feature .on-about-1-feature-item .head-elm {
    width: 52px;
  }
  .on-about-1-feature .on-about-1-feature-item .body-elm {
    padding: 28px 24px 28px 42px;
  }
  .on-about-1-feature .on-about-1-feature-item:first-child .body-elm {
    padding-left: 24px;
  }
  .on-about-1-feature .on-about-1-feature-icon {
    width: 32px;
    height: 32px;
  }
}
@media (max-width: 767px) {
  .on-about-1-feature {
    min-height: 300px;
    margin-top: 30px;
  }
  .on-about-1-feature .on-about-1-feature-item {
    flex-basis: 62px;
  }
  .on-about-1-feature .on-about-1-feature-item:first-child {
    flex-basis: 44px;
  }
  .on-about-1-feature .on-about-1-feature-item .head-elm {
    width: 44px;
    padding: 18px 0;
  }
  .on-about-1-feature .on-about-1-feature-item .icon-elm {
    width: 22px;
    height: 22px;
  }
  .on-about-1-feature .on-about-1-feature-item .label-elm {
    font-size: 13px;
    letter-spacing: 0.05em;
  }
  .on-about-1-feature .on-about-1-feature-item .body-elm {
    padding: 24px 20px 24px 38px;
  }
  .on-about-1-feature .on-about-1-feature-item:first-child .body-elm {
    padding-left: 20px;
  }
  .on-about-1-feature .on-about-1-feature-title {
    font-size: 16px;
    letter-spacing: 0.05em;
  }
  .on-about-1-feature .on-about-1-feature-icon {
    width: 28px;
    height: 28px;
  }
  .on-about-1-feature .on-about-1-feature-text {
    font-size: 15px;
    line-height: 26px;
  }
}
.on-about-1 {
  /*
      right
  */
}
.on-about-1-right {
  position: relative;
  z-index: 1;
  max-width: 592px;
  width: 100%;
  margin-right: -151px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-about-1-right {
    max-width: 520px;
    margin-right: 0px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-about-1-right {
    max-width: 450px;
    margin-right: 0px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-about-1-right {
    width: 100%;
    margin-top: 50px;
    margin-right: 0px;
  }
}
@media (max-width: 767px) {
  .on-about-1-right {
    margin-top: 40px;
    margin-right: 0px;
  }
}
.on-about-1-right-img {
  position: relative;
  z-index: 1;
  height: 746px;
  border-radius: 24px;
  overflow: hidden;
}
.on-about-1-right-img > img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-about-1-right-img {
  /* the pale petal tucked into the bottom corner of the frame */
}
.on-about-1-right-img .shape-elm {
  position: absolute;
  right: 2%;
  bottom: 6%;
  width: 40%;
  line-height: 0;
  transform: rotate(-30deg);
  transform-origin: top right;
}
.on-about-1-right-img .shape-elm svg {
  width: 100%;
  height: auto;
}
.on-about-1-right-img .shape-elm {
  /* wow hands this the reveal as the frame scrolls into view */
}
.on-about-1-right-img .shape-elm:is(.rotateIn2) {
  animation-name: on-about-1-shape-in;
  animation-duration: 1200ms;
  animation-timing-function: cubic-bezier(0.62, 0.05, 0.01, 0.99);
  animation-fill-mode: both;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-about-1-right-img {
    height: 660px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-about-1-right-img {
    height: 570px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-about-1-right-img {
    height: 500px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-about-1-right-img {
    height: 420px;
  }
}
@media (max-width: 767px) {
  .on-about-1-right-img {
    height: 340px;
    border-radius: 16px;
  }
}
.on-about-1 {
  /*
      experience-badge
  */
}
.on-about-1-experience {
  position: absolute;
  left: -102px;
  top: 40px;
  z-index: 2;
  width: 204px;
  height: 204px;
  border-radius: 50%;
  background-color: #024748;
  display: flex;
  align-items: center;
  justify-content: center;
  /* the ring of set type turns behind the plate */
}
.on-about-1-experience .circle-text {
  position: absolute;
  left: 18px;
  top: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
  animation: on-about-1-spin 20s linear infinite;
}
.on-about-1-experience .number-elm {
  position: relative;
  z-index: 1;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background-color: #edf4f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--on-font-2);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  color: var(--on-clr-h-1);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-about-1-experience {
    left: -90px;
    top: 34px;
    width: 180px;
    height: 180px;
  }
  .on-about-1-experience .number-elm {
    width: 96px;
    height: 96px;
    font-size: 38px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-about-1-experience {
    left: -80px;
    top: 30px;
    width: 160px;
    height: 160px;
  }
  .on-about-1-experience .circle-text {
    left: 14px;
    top: 14px;
    width: calc(100% - 28px);
    height: calc(100% - 28px);
  }
  .on-about-1-experience .number-elm {
    width: 86px;
    height: 86px;
    font-size: 34px;
  }
}
.on-about-1-experience {
  /* full-width photo below the copy — the badge moves inside the frame */
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .on-about-1-experience {
    left: 40px;
    top: 40px;
    width: 150px;
    height: 150px;
  }
  .on-about-1-experience .circle-text {
    left: 13px;
    top: 13px;
    width: calc(100% - 26px);
    height: calc(100% - 26px);
  }
  .on-about-1-experience .number-elm {
    width: 80px;
    height: 80px;
    font-size: 32px;
  }
}
@media (max-width: 767px) {
  .on-about-1-experience {
    left: 20px;
    top: 20px;
    width: 120px;
    height: 120px;
  }
  .on-about-1-experience .circle-text {
    left: 10px;
    top: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
  }
  .on-about-1-experience .number-elm {
    width: 64px;
    height: 64px;
    font-size: 26px;
  }
}

@keyframes on-about-1-spin {
  to {
    transform: rotate(360deg);
  }
}
/*
    the petal swings in from behind the corner of the frame and settles at the
    tilt it rests on — the end value has to be that -30deg, not 0
*/
@keyframes on-about-1-shape-in {
  0% {
    opacity: 0;
    transform: rotate(-125deg);
  }
  45% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: rotate(-30deg);
  }
}
/*
    about-1-end
*/
/*
    about-2-start
*/
.on-about-2-area {
  position: relative;
  z-index: 1;
  /* the photo column and the mission rules bleed past the container */
  overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-about-2-area {
    padding-top: 120px;
  }
}
.on-about-2-wrap {
  display: flex;
  align-items: flex-start;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-about-2-wrap {
    display: block;
  }
}
.on-about-2 {
  /* the copy column starts 112px below the photo top, as in the design */
}
.on-about-2-left {
  position: relative;
  z-index: 1;
  flex: 0 0 870px;
  padding-top: 112px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-about-2-left {
    flex: 0 0 700px;
    padding-top: 60px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-about-2-left {
    flex: 0 0 620px;
    padding-top: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-about-2-left {
    width: 100%;
    padding-top: 0;
  }
}
.on-about-2-sec-title {
  margin-bottom: 28px;
}
.on-about-2-sec-title .on-sec-title-2 {
  margin-bottom: 16px;
}
.on-about-2-sec-title .on-p-2 {
  max-width: 684px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-about-2-sec-title {
    max-width: 100%;
    margin-bottom: 36px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-about-2-sec-title {
    max-width: 100%;
    margin-bottom: 32px;
  }
}
@media (max-width: 767px) {
  .on-about-2-sec-title {
    max-width: 100%;
    margin-bottom: 28px;
  }
}
.on-about-2 {
  /*
      mission-vision — the rules run 252px past the container to the screen
      edge at 1920, and the 25px pip sits on the text column's right edge
  */
}
.on-about-2-mission {
  max-width: 684px;
  margin-bottom: 28px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .on-about-2-mission {
    margin-bottom: 36px;
  }
}
@media (max-width: 767px) {
  .on-about-2-mission {
    margin-bottom: 28px;
  }
}
.on-about-2-line {
  position: relative;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.on-about-2-line::before {
  content: "";
  position: absolute;
  left: -252px;
  right: 12px;
  top: 50%;
  height: 1px;
  background-color: var(--on-clr-pr-2);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-about-2-line::before {
    left: 0;
  }
}
.on-about-2-line svg {
  position: relative;
  z-index: 1;
  display: block;
}
.on-about-2-line:first-child {
  margin-bottom: 28px;
}
.on-about-2-mission-item {
  display: flex;
  gap: 80px;
}
.on-about-2-mission-item .title-elm {
  flex: 0 0 125px;
  font-family: var(--on-font-2);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--on-clr-h-2);
  margin-bottom: 0;
}
.on-about-2-mission-item .text-elm {
  font-size: 18px;
  line-height: 28px;
  color: var(--on-clr-p-2);
  opacity: 0.8;
  max-width: 489px;
  margin-bottom: 0;
}
.on-about-2-mission-item + .on-about-2-mission-item {
  margin-top: 32px;
}
.on-about-2-mission-item {
  /* the last item before the closing rule keeps the 28px rhythm */
}
.on-about-2-mission-item:nth-child(3) {
  margin-bottom: 28px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-about-2-mission-item {
    gap: 40px;
  }
}
@media (max-width: 767px) {
  .on-about-2-mission-item {
    display: block;
  }
  .on-about-2-mission-item .title-elm {
    margin-bottom: 8px;
  }
  .on-about-2-mission-item .text-elm {
    max-width: 100%;
  }
}
.on-about-2 {
  /* button + social-proof row, spread across the text column */
}
.on-about-2-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 684px;
}
@media (max-width: 767px) {
  .on-about-2-btn-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
}
.on-about-2-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.on-about-2-author .author-img {
  display: flex;
  align-items: center;
}
.on-about-2-author .author-img img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid #fff;
  object-fit: cover;
}
.on-about-2-author .author-img img + img {
  margin-left: -22px;
}
.on-about-2-author .text-elm {
  font-size: 18px;
  line-height: 24px;
  color: var(--on-clr-h-2);
  margin-bottom: 2px;
  font-weight: 400;
}
.on-about-2-author .rating-elm {
  display: flex;
  align-items: center;
  gap: 6px;
}
.on-about-2-author .rating-elm .text {
  font-family: var(--on-font-2);
  font-size: 18px;
  line-height: 24px;
  color: var(--on-clr-h-2);
  font-weight: 400;
}
.on-about-2-author .rating-elm .star {
  display: flex;
  gap: 2px;
  line-height: 0;
}
.on-about-2 {
  /* spinning badge parked in the gap between copy and photo — desktop only */
}
.on-about-2-circle-text {
  position: absolute;
  left: 757px;
  top: 257px;
  z-index: 2;
  width: 138px;
  height: 138px;
}
.on-about-2-circle-text::before, .on-about-2-circle-text::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(2, 61, 63, 0.28);
}
.on-about-2-circle-text::before {
  inset: 0;
}
.on-about-2-circle-text::after {
  inset: 28.5px;
}
.on-about-2-circle-text .text-elm {
  position: absolute;
  left: 13.5px;
  top: 14.5px;
  width: 111px;
  height: 109px;
  animation: on-about-2-spin 20s linear infinite;
}
.on-about-2-circle-text .icon-elm {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 47px;
  transform: translate(-50%, -50%);
}
.on-about-2-circle-text {
  /* below the 1424 container it would land on the photo */
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-about-2-circle-text {
    display: none;
  }
}
.on-about-2 {
  /*
      right
  */
}
.on-about-2-right {
  position: relative;
  z-index: 1;
  flex: 0 0 630px;
  width: 630px;
  max-width: 100%;
  margin-left: auto;
  /* the photo runs to 8px off the screen edge at 1920 */
  margin-right: -252px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-about-2-right {
    flex: 0 0 560px;
    width: 560px;
    margin-right: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-about-2-right {
    flex: 0 0 460px;
    width: 460px;
    margin-right: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .on-about-2-right {
    width: 630px;
    margin: 60px auto 0;
  }
}
@media (max-width: 767px) {
  .on-about-2-right {
    width: 100%;
    margin: 44px 0 0;
  }
}
.on-about-2-right-img {
  height: 728px;
  border-radius: 20px;
  overflow: hidden;
}
.on-about-2-right-img > img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-about-2-right-img {
    height: 640px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-about-2-right-img {
    height: 560px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-about-2-right-img {
    height: 520px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-about-2-right-img {
    height: 440px;
  }
}
@media (max-width: 767px) {
  .on-about-2-right-img {
    height: 360px;
    border-radius: 16px;
  }
}
.on-about-2 {
  /*
      counter-box — straddles the photo's left edge; the white frame is a
      spread shadow so it follows the 20px radius like Figma's outside stroke
  */
}
.on-about-2-counter {
  position: absolute;
  left: -195px;
  top: 422px;
  z-index: 2;
  width: 351px;
  padding: 48px;
  border-radius: 20px;
  background-color: #050518;
  overflow: hidden;
  border: 8px solid #fff;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-about-2-counter {
    left: 0px;
    top: 380px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-about-2-counter {
    left: 0px;
    top: 320px;
    width: 320px;
    padding: 36px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-about-2-counter {
    left: 24px;
    top: 300px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-about-2-counter {
    left: 20px;
    top: 240px;
    width: 330px;
    padding: 36px;
  }
}
.on-about-2-counter {
  /* no room to straddle on phones — tuck it under the photo instead */
}
@media (max-width: 767px) {
  .on-about-2-counter {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    margin: -70px 16px 0;
    padding: 30px 28px;
  }
}
.on-about-2-counter-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
.on-about-2-counter-item .number-elm {
  font-family: var(--on-font-2);
  font-size: 80px;
  font-weight: 500;
  line-height: 64px;
  letter-spacing: -0.03em;
  color: #f7f5ef;
  margin-bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.on-about-2-counter-item .plus-elm {
  font-size: 45px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #f6ba1d;
  padding-bottom: 6px;
}
.on-about-2-counter-item .label-elm {
  flex: 0 0 112px;
  font-size: 20px;
  line-height: 24px;
  color: #f7f5ef;
  margin-bottom: 0;
}
.on-about-2-counter-item + .on-about-2-counter-item {
  margin-top: 56px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-about-2-counter-item .number-elm {
    font-size: 64px;
    line-height: 52px;
  }
  .on-about-2-counter-item .plus-elm {
    font-size: 36px;
  }
  .on-about-2-counter-item .label-elm {
    flex: 0 0 100px;
    font-size: 18px;
    line-height: 22px;
  }
  .on-about-2-counter-item + .on-about-2-counter-item {
    margin-top: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-about-2-counter-item .number-elm {
    font-size: 58px;
    line-height: 48px;
  }
  .on-about-2-counter-item .plus-elm {
    font-size: 32px;
  }
  .on-about-2-counter-item .label-elm {
    font-size: 17px;
    line-height: 21px;
  }
  .on-about-2-counter-item + .on-about-2-counter-item {
    margin-top: 36px;
  }
}
@media (max-width: 767px) {
  .on-about-2-counter-item .number-elm {
    font-size: 58px;
    line-height: 48px;
  }
  .on-about-2-counter-item .plus-elm {
    font-size: 32px;
  }
  .on-about-2-counter-item .label-elm {
    font-size: 17px;
    line-height: 21px;
  }
  .on-about-2-counter-item + .on-about-2-counter-item {
    margin-top: 36px;
  }
}
.on-about-2-contact {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 10px;
}
.on-about-2-contact .text-elm {
  text-align: right;
}
.on-about-2-contact .text-1 {
  display: block;
  font-size: 15px;
  line-height: 24px;
  color: var(--on-clr-p-2);
  opacity: 0.64;
  margin-bottom: 4px;
}
.on-about-2-contact .text-2 {
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: var(--on-clr-h-2);
}
.on-about-2-contact .icon-elm {
  position: relative;
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* the two faint halo rings around the handset plate */
}
.on-about-2-contact .icon-elm::before, .on-about-2-contact .icon-elm::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.on-about-2-contact .icon-elm::before {
  inset: 0;
  border: 1px solid rgba(246, 186, 29, 0.08);
}
.on-about-2-contact .icon-elm::after {
  inset: 12px;
  border: 1px solid rgba(246, 186, 29, 0.32);
}
.on-about-2-contact .icon-elm svg {
  position: relative;
  z-index: 1;
  display: block;
}
@media (max-width: 767px) {
  .on-about-2-contact {
    justify-content: flex-start;
    margin-top: 28px;
  }
  .on-about-2-contact .icon-elm {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
  }
  .on-about-2-contact .icon-elm::after {
    inset: 9px;
  }
  .on-about-2-contact .icon-elm svg {
    width: 30px;
    height: 30px;
  }
}

@keyframes on-about-2-spin {
  to {
    transform: rotate(360deg);
  }
}
/*
    about-2-end
*/
/*
    about-3-start
*/
.on-about-3-area {
  position: relative;
  z-index: 1;
}
.on-about-3 {
  /* faded skyscraper photo, bled off the right edge of the section */
}
.on-about-3-bg {
  position: absolute;
  right: -8%;
  top: 0;
  z-index: -1;
  width: 58%;
  height: 112%;
  opacity: 0.6;
}
.on-about-3-bg img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-about-3-wrap {
  display: flex;
  align-items: flex-start;
  gap: 54px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-about-3-wrap {
    flex-direction: column;
    gap: 60px;
  }
}
.on-about-3-left {
  flex: 0 0 56%;
  min-width: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-about-3-left {
    flex-basis: auto;
    width: 100%;
  }
}
.on-about-3-sec-title {
  margin-bottom: 48px;
}
.on-about-3-sec-title .on-sec-title-3 {
  margin-bottom: 16px;
}
.on-about-3-sec-title .sec-disc {
  margin-bottom: 32px;
}
.on-about-3 {
  /* small photo + checklist, sitting under the copy */
}
.on-about-3-inner {
  display: flex;
  align-items: center;
  gap: 48px;
}
.on-about-3-inner .img-elm {
  flex: 0 0 41.6%;
  height: 349px;
  border-radius: 12px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-about-3-inner {
    gap: 32px;
  }
  .on-about-3-inner .img-elm {
    height: 300px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-about-3-inner {
    gap: 24px;
  }
  .on-about-3-inner .img-elm {
    height: 260px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-about-3-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  .on-about-3-inner .img-elm {
    flex-basis: auto;
    height: 280px;
  }
}
.on-about-3-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.on-about-3-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 500;
  color: var(--on-clr-h-3);
}
.on-about-3-list li img {
  flex: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-about-3-list {
    gap: 16px;
  }
}
.on-about-3-right {
  position: relative;
  flex: 1;
  min-width: 0;
}
.on-about-3-right .img-elm {
  height: 772px;
  border-radius: 20px;
  mask-size: 100% 100%;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-about-3-right .img-elm {
    height: 680px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-about-3-right .img-elm {
    height: 600px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-about-3-right .img-elm {
    height: 520px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-about-3-right .img-elm {
    height: 480px;
  }
}
@media (max-width: 767px) {
  .on-about-3-right .img-elm {
    height: 380px;
  }
}
.on-about-3 {
  /* spinning badge, centred on the seam of the photo pair */
}
.on-about-3-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 208px;
  height: 208px;
  border-radius: 50%;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.on-about-3-badge .circle-text {
  position: absolute;
  inset: 0;
  animation: on-about-3-spin 18s linear infinite;
}
.on-about-3-badge .circle-text text {
  font-family: var(--on-font-2);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  fill: #000;
}
.on-about-3-badge .medal-elm {
  position: relative;
  z-index: 1;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #45FC91;
  display: flex;
  align-items: center;
  justify-content: center;
}
.on-about-3-badge .medal-elm img {
  width: 32px;
  height: 32px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-about-3-badge {
    width: 180px;
    height: 180px;
  }
  .on-about-3-badge .medal-elm {
    width: 70px;
    height: 70px;
  }
  .on-about-3-badge .medal-elm img {
    width: 28px;
    height: 28px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-about-3-badge {
    width: 160px;
    height: 160px;
  }
  .on-about-3-badge .circle-text text {
    font-size: 11px;
  }
  .on-about-3-badge .medal-elm {
    width: 64px;
    height: 64px;
  }
  .on-about-3-badge .medal-elm img {
    width: 26px;
    height: 26px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-about-3-badge {
    width: 140px;
    height: 140px;
  }
  .on-about-3-badge .circle-text text {
    font-size: 10px;
  }
  .on-about-3-badge .medal-elm {
    width: 56px;
    height: 56px;
  }
  .on-about-3-badge .medal-elm img {
    width: 22px;
    height: 22px;
  }
}
.on-about-3 {
  /* stat card floating over the bottom of the photo pair */
}
.on-about-3-author {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 4%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background-color: #F4F7F3;
  border-radius: 20px;
}
.on-about-3-author .author-img {
  display: flex;
  align-items: center;
  flex: none;
}
.on-about-3-author .author-img img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #F4F7F3;
  object-fit: cover;
}
.on-about-3-author .author-img img + img {
  margin-left: -14px;
}
.on-about-3-author .title-elm {
  font-size: 20px;
  margin-bottom: 6px;
}
.on-about-3-author .text-elm {
  font-size: 14px;
}
.on-about-3-author .text-elm .highlight-elm {
  color: #0CB351;
  font-weight: 600;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-about-3-author {
    padding: 16px 20px;
  }
  .on-about-3-author .author-img img {
    width: 36px;
    height: 36px;
  }
  .on-about-3-author .title-elm {
    font-size: 17px;
  }
  .on-about-3-author .text-elm {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .on-about-3-author {
    flex-wrap: wrap;
    border-radius: 14px;
  }
}

@keyframes on-about-3-spin {
  to {
    transform: rotate(360deg);
  }
}
/*
    about-3-end
*/
/*
    partner-2-start
*/
.on-partner-2-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--on-clr-h-2);
}
.on-partner-2 {
  /* faint handshake photo, luminosity-blended over the solid navy */
}
.on-partner-2-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.on-partner-2-bg img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  mix-blend-mode: luminosity;
}
.on-partner-2-wrap {
  position: relative;
  z-index: 2;
}
.on-partner-2-sec-title {
  max-width: 490px;
  margin-bottom: 60px;
}
.on-partner-2-sec-title .on-subtitle-2 {
  color: #fff;
}
.on-partner-2-sec-title .on-sec-title-2 {
  color: #fff;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-partner-2-sec-title {
    max-width: 100%;
    margin-bottom: 40px;
  }
}
.on-partner-2 {
  /*
      floats over the marquee below it — the wrap only carries the title's
      own height, so the card (out of flow) overlaps the sibling marquee
      without needing negative margins
  */
}
.on-partner-2-card {
  position: absolute;
  top: 43%;
  right: 0;
  z-index: 3;
  width: 354px;
  min-height: 444px;
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(94px);
  border-radius: 20px;
}
.on-partner-2-card .text-elm {
  color: #fff;
}
.on-partner-2-card .on-pr-btn-2 {
  width: 100%;
  justify-content: center;
}
.on-partner-2-card .on-pr-btn-2:hover {
  background-color: var(--on-clr-pr-2);
  color: #fff;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-partner-2-card {
    width: 320px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-partner-2-card {
    position: static;
    width: 100%;
    min-height: unset;
    margin-top: 40px;
  }
}
@media (max-width: 767px) {
  .on-partner-2-card {
    padding: 32px 24px;
  }
}
.on-partner-2 {
  /* breaks out of the container to span the full section width */
}
.on-partner-2-marquee {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  display: flex;
  flex-direction: column;
  margin-top: 74px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-partner-2-marquee {
    margin-top: 32px;
  }
}
.on-partner-2-marquee-row {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.on-partner-2-marquee-row:not(:first-child) {
  margin-top: -1px;
}
.on-partner-2-logo-wrap {
  display: flex;
}
.on-partner-2-logo {
  width: 264px;
  height: 108px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: -1px;
  border: 1px solid #363642;
  vertical-align: top;
  border-left: none;
}
.on-partner-2-logo img {
  max-width: 136px;
  max-height: 54px;
  width: auto;
  height: auto;
  opacity: 0.5;
  filter: brightness(0) invert(1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-partner-2-logo {
    width: 180px;
    height: 80px;
  }
  .on-partner-2-logo img {
    max-width: 100px;
    max-height: 40px;
  }
}

/*
    partner-2-end
*/
/*
    partner-3-start
*/
.on-partner-3-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.on-partner-3-sec-title {
  max-width: 939px;
  margin: 0 auto 40px;
}
.on-partner-3-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 7px;
  row-gap: 24px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-partner-3-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-partner-3-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .on-partner-3-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 16px;
  }
}
.on-partner-3 {
  /*
      the four crosshair ticks sit on the cell's own corners, so a
      neighbouring cell's tick meets this one and reads as a single "+" at
      every shared intersection, an "L" wherever there's no neighbour
  */
}
.on-partner-3-cell {
  position: relative;
  padding: 7px;
  aspect-ratio: 274/122;
  /* each leg is a stub of the box's own edge, poked out past its corner
     into the gutter — the vertex sits on the box, not on the cell edge */
}
.on-partner-3-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(#0cb351, #0cb351) left 0 top 7px/7px 1px no-repeat, linear-gradient(#0cb351, #0cb351) left 7px top 0/1px 7px no-repeat, linear-gradient(#0cb351, #0cb351) right 0 top 7px/7px 1px no-repeat, linear-gradient(#0cb351, #0cb351) right 7px top 0/1px 7px no-repeat, linear-gradient(#0cb351, #0cb351) left 0 bottom 7px/7px 1px no-repeat, linear-gradient(#0cb351, #0cb351) left 7px bottom 0/1px 7px no-repeat, linear-gradient(#0cb351, #0cb351) right 0 bottom 7px/7px 1px no-repeat, linear-gradient(#0cb351, #0cb351) right 7px bottom 0/1px 7px no-repeat;
}
.on-partner-3-cell .box-elm {
  width: 100%;
  height: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(20, 28, 20, 0.16);
  background-color: #fff;
}
.on-partner-3-cell {
  /* the logo art is a flat #646769 mark on a transparent PNG, painted
     here as a mask so its colour can move on hover instead of being
     baked into the file */
}
.on-partner-3-cell .logo-elm {
  display: block;
  width: 100px;
  height: 100% !important;
  background-color: #646769;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.3s ease;
}
.on-partner-3-cell:hover .box-elm {
  background: radial-gradient(circle, #45fc91 0%, #299656 100%);
}
.on-partner-3-cell:hover .logo-elm {
  background-color: var(--on-clr-h-3);
}

/*
    partner-3-end
*/
/*
    services-1-start
*/
.on-services-1-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #fff;
}
.on-services-1-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  mix-blend-mode: luminosity;
}
.on-services-1-bg img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-services-1-sec-title {
  max-width: 758px;
  margin: 0 auto 40px;
  text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-services-1-sec-title {
    margin-bottom: 34px;
  }
}
@media (max-width: 767px) {
  .on-services-1-sec-title {
    margin-bottom: 28px;
  }
}
.on-services-1 {
  /*
      the rows share one fixed column, so the open row can take the height the
      two closed ones give up — a grow tween rather than a height jump
  */
}
.on-services-1-list {
  display: flex;
  flex-direction: column;
  max-width: 1132px;
  height: 796px;
  margin: 0 auto;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-services-1-list {
    height: 740px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-services-1-list {
    height: auto;
  }
}
.on-services-1-item {
  position: relative;
  z-index: 1;
  flex: 0 0 168px;
  flex-grow: 0;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  background-color: #e6ecec;
  transition: flex-grow 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease;
  /* the closed plates alternate a shade, whichever pair is closed */
}
.on-services-1-item:nth-child(even) {
  background-color: #ccd8d8;
}
.on-services-1-item {
  /*
      desaturated behind the closed rows, full colour once the row opens;
      the mask lets it dissolve into the plate instead of butting up to it
  */
}
.on-services-1-item .img-elm {
  position: absolute;
  right: 0;
  top: 0;
  width: 44%;
  height: 100% !important;
  mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}
.on-services-1-item .img-elm img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-services-1-item {
  /* tilted gradient plate with the mark riding on it */
}
.on-services-1-item .icon-elm {
  position: absolute;
  left: 29px;
  top: 50%;
  z-index: 3;
  width: 96px;
  height: 126px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* closed plates lean the other way; opening flips the tilt */
  transform: translateY(-50%) rotate(-5deg);
  transition: width 0.4s ease, height 0.4s ease;
}
.on-services-1-item .icon-elm::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, #beff6b, #023d3f);
  opacity: 0.4;
  transition: opacity 0.4s ease;
}
.on-services-1-item .icon-elm i {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--on-clr-h-1);
  color: var(--on-clr-pr-1);
  font-size: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: width 0.4s ease, height 0.4s ease, font-size 0.4s ease;
}
.on-services-1-item .title-elm {
  position: absolute;
  left: 170px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  font-family: var(--on-font-2);
  font-size: 32px;
  font-weight: 500;
  line-height: 36px;
  color: var(--on-clr-h-1);
  margin-bottom: 0;
  transition: color 0.4s ease;
}
.on-services-1-item {
  /*
      the white panel is out of flow, so a closed row never pays for the
      copy folded up inside it
  */
}
.on-services-1-item .body-elm {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 65%;
  height: 314px;
  padding: 66px 32px 32px;
  border-radius: 24px;
  background-color: #fff;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s 0.25s;
  /* the two blurred pools the design floats under the copy */
}
.on-services-1-item .body-elm::before, .on-services-1-item .body-elm::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  opacity: 0.4;
  filter: blur(52px);
}
.on-services-1-item .body-elm::before {
  left: -97px;
  top: 45px;
  width: 199px;
  height: 482px;
  background-color: #06595b;
}
.on-services-1-item .body-elm::after {
  left: 82%;
  top: 80%;
  width: 199px;
  height: 209px;
  background-color: var(--on-clr-pr-1);
}
.on-services-1-item-text {
  position: relative;
  z-index: 1;
  max-width: 672px;
  margin-bottom: 24px;
}
.on-services-1-item-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.on-services-1-item-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--on-font-1);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--on-clr-h-1);
}
.on-services-1-item-list .check-elm {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.72);
  color: var(--on-clr-h-1);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.on-services-1-item .on-pr-btn-2 {
  position: absolute;
  right: 32px;
  bottom: 32px;
  z-index: 2;
  transition: background-color 0.4s ease;
  /* the pill alone lights up — the label and the mark stay put */
}
.on-services-1-item .on-pr-btn-2:hover {
  background-color: #fff;
}
.on-services-1-item {
  /* open row */
}
.on-services-1-item:is(.active) {
  flex-grow: 1;
  background-color: var(--on-clr-h-1);
}
.on-services-1-item:is(.active) .img-elm {
  width: 50%;
  mix-blend-mode: normal;
}
.on-services-1-item:is(.active) .icon-elm {
  top: 25px;
  width: 120px;
  height: 158px;
  transform: rotate(5deg);
}
.on-services-1-item:is(.active) .icon-elm::before {
  opacity: 1;
}
.on-services-1-item:is(.active) .icon-elm i {
  width: 84px;
  height: 84px;
  font-size: 48px;
}
.on-services-1-item:is(.active) .title-elm {
  left: 195px;
  top: 54px;
  transform: none;
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
  color: #fff;
}
.on-services-1-item:is(.active) {
  /* held back until the row has finished opening */
}
.on-services-1-item:is(.active) .body-elm {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease 0.35s, visibility 0s 0s;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-services-1-item {
    flex-basis: 160px;
  }
  .on-services-1-item .icon-elm {
    left: 24px;
    width: 88px;
    height: 116px;
  }
  .on-services-1-item .icon-elm i {
    width: 58px;
    height: 58px;
    font-size: 28px;
  }
  .on-services-1-item .title-elm {
    left: 148px;
    font-size: 28px;
    line-height: 34px;
  }
  .on-services-1-item .body-elm {
    height: 300px;
    padding: 58px 28px 28px;
  }
  .on-services-1-item:is(.active) .icon-elm {
    width: 108px;
    height: 142px;
  }
  .on-services-1-item:is(.active) .icon-elm i {
    width: 76px;
    height: 76px;
    font-size: 42px;
  }
  .on-services-1-item:is(.active) .title-elm {
    left: 168px;
    top: 48px;
    font-size: 32px;
    line-height: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-services-1-item {
    flex-basis: 150px;
  }
  .on-services-1-item .icon-elm {
    left: 20px;
    width: 78px;
    height: 102px;
  }
  .on-services-1-item .icon-elm i {
    width: 52px;
    height: 52px;
    font-size: 26px;
  }
  .on-services-1-item .title-elm {
    left: 122px;
    font-size: 26px;
    line-height: 32px;
  }
  .on-services-1-item .body-elm {
    width: 72%;
    height: 290px;
    padding: 52px 24px 24px;
  }
  .on-services-1-item-text {
    font-size: 17px;
    margin-bottom: 20px;
  }
  .on-services-1-item-list li {
    font-size: 17px;
  }
  .on-services-1-item .on-pr-btn-2 {
    right: 24px;
    bottom: 24px;
  }
  .on-services-1-item:is(.active) .icon-elm {
    top: 20px;
    width: 96px;
    height: 126px;
  }
  .on-services-1-item:is(.active) .icon-elm i {
    width: 66px;
    height: 66px;
    font-size: 36px;
  }
  .on-services-1-item:is(.active) .title-elm {
    left: 140px;
    top: 40px;
    font-size: 30px;
    line-height: 38px;
  }
}
.on-services-1-item {
  /*
      no room for the photo beside the copy — the open row unstacks into
      a band, a heading and a full-width panel
  */
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-services-1-item {
    flex: none;
    min-height: 130px;
  }
  .on-services-1-item .icon-elm {
    left: 20px;
    width: 70px;
    height: 92px;
  }
  .on-services-1-item .icon-elm i {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  .on-services-1-item .title-elm {
    left: 110px;
    right: 20px;
    font-size: 24px;
    line-height: 30px;
  }
  .on-services-1-item .img-elm {
    width: 40%;
  }
  .on-services-1-item:is(.active) {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .on-services-1-item:is(.active) .img-elm {
    position: relative;
    right: auto;
    width: 100%;
    height: 200px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .on-services-1-item:is(.active) .icon-elm {
    position: absolute;
    left: 20px;
    top: 232px;
    width: 84px;
    height: 110px;
  }
  .on-services-1-item:is(.active) .icon-elm i {
    width: 58px;
    height: 58px;
    font-size: 30px;
  }
  .on-services-1-item:is(.active) .title-elm {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    padding: 32px 24px 28px 120px;
    font-size: 26px;
    line-height: 34px;
  }
  .on-services-1-item:is(.active) .body-elm {
    position: relative;
    bottom: auto;
    width: 100%;
    height: auto;
    padding: 28px 24px;
  }
  .on-services-1-item:is(.active) .on-pr-btn-2 {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 24px;
  }
}
@media (max-width: 767px) {
  .on-services-1-item {
    min-height: 110px;
    border-radius: 16px;
  }
  .on-services-1-item .icon-elm {
    left: 14px;
    width: 56px;
    height: 74px;
  }
  .on-services-1-item .icon-elm i {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .on-services-1-item .title-elm {
    left: 82px;
    right: 14px;
    font-size: 20px;
    line-height: 26px;
  }
  .on-services-1-item .img-elm {
    width: 38%;
  }
  .on-services-1-item-text {
    font-size: 16px;
    margin-bottom: 18px;
  }
  .on-services-1-item-list {
    gap: 10px;
  }
  .on-services-1-item-list li {
    font-size: 16px;
    line-height: 24px;
  }
  .on-services-1-item:is(.active) .img-elm {
    height: 160px;
  }
  .on-services-1-item:is(.active) .icon-elm {
    top: 186px;
    left: 14px;
    width: 68px;
    height: 90px;
  }
  .on-services-1-item:is(.active) .icon-elm i {
    width: 46px;
    height: 46px;
    font-size: 24px;
  }
  .on-services-1-item:is(.active) .title-elm {
    padding: 26px 20px 22px 96px;
    font-size: 22px;
    line-height: 30px;
  }
  .on-services-1-item:is(.active) .body-elm {
    padding: 24px 20px;
    border-radius: 16px;
  }
}
.on-services-1 {
  /*
      all-btn
  */
}
.on-services-1-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.on-services-1-all-btn .link-elm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--on-font-2);
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  color: #024748;
  text-decoration: underline;
  transition: var(--on-cube-1);
}
.on-services-1-all-btn .link-elm i {
  font-size: 14px;
  transition: var(--on-cube-1);
}
.on-services-1-all-btn .link-elm:hover {
  text-decoration: none;
}
.on-services-1-all-btn .link-elm:hover i {
  transform: rotate(45deg);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-services-1-all-btn {
    margin-top: 28px;
  }
}
@media (max-width: 767px) {
  .on-services-1-all-btn {
    gap: 8px;
    margin-top: 24px;
    text-align: center;
  }
  .on-services-1-all-btn .text-elm {
    font-size: 16px;
  }
  .on-services-1-all-btn .link-elm {
    font-size: 16px;
  }
}

/*
    services-1-end
*/
/*
    services-2-start
*/
.on-services-2-bg-shape {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.on-services-2 {
  /*
      main — the wrap holds still while the runway under it scrolls past,
      which is what lets the fanned cards below pull apart into this grid
  */
}
.on-services-2-trigger-height {
  height: 200vh;
  position: relative;
  z-index: 1;
  /* the effect is off down here, so the runway must not reserve height */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-services-2-trigger-height {
    height: auto;
  }
}
.on-services-2-trigger-pin {
  position: sticky;
  top: 40px;
  /* the runway has collapsed, so there is nothing left to hold against */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-services-2-trigger-pin {
    position: static;
  }
}
.on-services-2-wrap {
  /* the fan-out math in main.js reads each card's offsetTop/offsetLeft,
     which are measured against the nearest positioned ancestor — without
     this, that's trigger-pin (sticky), so the title sitting above the
     wrap in there inflates every card's offsetTop by the title's own
     height and the whole stack launches that far too high */
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
  margin-left: -70px;
  margin-right: -70px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-services-2-wrap {
    margin-left: 0px;
    margin-right: 0px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-services-2-wrap {
    margin-left: 0px;
    margin-right: 0px;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-services-2-wrap {
    margin-left: 0;
    margin-right: 0;
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-services-2-wrap {
    margin-left: 0;
    margin-right: 0;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 767px) {
  .on-services-2-wrap {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-right: 0;
  }
}
.on-services-2-card {
  position: relative;
  z-index: 1;
  min-height: 480px;
  border-radius: 20px;
  display: flex;
  align-items: end;
  padding: 12px;
  /*
      the js sets this once on load — a card with no js still has
      somewhere sane to sit, it just skips the fan-out
  */
  transform-origin: center center;
}
.on-services-2-card .btn-elm {
  display: flex;
  width: 100%;
  font-size: 22px;
  color: var(--on-clr-h-2);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-services-2-card .btn-elm {
    font-size: 18px;
  }
}
.on-services-2-card .btn-elm .icon {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--on-clr-pr-2);
  border-radius: 12px;
  border: 2px solid #fff;
  font-size: 26px;
  color: #fff;
  flex: 0 0 auto;
}
.on-services-2-card .btn-elm .text {
  background-color: #fff;
  width: 100%;
  border-radius: 12px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  transition: var(--on-cube-1);
}
.on-services-2-card .btn-elm:hover .text {
  color: var(--on-clr-pr-2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-services-2-card {
    min-height: 400px;
  }
}
@media (max-width: 767px) {
  .on-services-2-card {
    min-height: 360px;
  }
  .on-services-2-card .btn-elm {
    font-size: 18px;
  }
}
.on-services-2-bottom-disc .btn-elm {
  color: var(--on-clr-pr-2);
  font-weight: 500;
}
.on-services-2-bottom-disc .btn-elm .text {
  line-height: 1;
  border-bottom: 2px solid var(--on-clr-pr-2);
  transition: var(--on-cube-1);
}
.on-services-2-bottom-disc .btn-elm .icon {
  transform: translateY(4px) rotate(0deg);
  transition: var(--on-cube-1);
}
.on-services-2-bottom-disc .btn-elm:hover .text {
  border-color: transparent;
}
.on-services-2-bottom-disc .btn-elm:hover .icon {
  transform: translateY(4px) rotate(45deg);
}

/*
    services-2-end
*/
/*
    services-3-start
*/
.on-services-3-area {
  background-color: var(--on-clr-h-3);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  /* the pin is off down here, so this goes back to an ordinary padded section */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-services-3-area {
    height: auto;
    padding: 100px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-services-3-area {
    padding: 70px 0;
  }
}
.on-services-3-sec-title .on-sec-title-3 {
  color: #fff;
}
.on-services-3-wrap {
  display: grid;
  grid-template-columns: auto 1fr 1.18fr;
  gap: 20px;
  /* the rail is dropped, so the two remaining columns share the row */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-services-3-wrap {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-services-3-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.on-services-3-scroll {
  width: 3px;
  height: 100% !important;
  position: relative;
  z-index: 1;
  margin-right: 10px;
}
.on-services-3-scroll .scroll-bar {
  width: 3px;
  height: 20%;
  background: var(--on-clr-pr-3);
  border-radius: 20px;
  transition: var(--on-cube-1);
}
.on-services-3-scroll::after {
  content: "";
  width: 1px;
  height: 100% !important;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 1px;
  opacity: 24%;
  z-index: -1;
}
.on-services-3-scroll {
  /* the fill only ever means something while the scrub is running */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-services-3-scroll {
    display: none;
  }
}
.on-services-3-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.on-services-3-item-single {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 26px;
  color: rgba(255, 255, 255, 0.68);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 35px 36px;
  backdrop-filter: blur(6px);
  font-weight: 500;
  transition: var(--on-cube-1);
}
.on-services-3-item-single .number {
  font-size: 18px;
  color: var(--on-clr-pr-3);
  transition: var(--on-cube-1);
}
.on-services-3-item-single span {
  color: var(--on-clr-pr-3);
}
.on-services-3-item-single:is(.active) {
  background: #141C14;
  box-shadow: inset 0px 0px 10px #45FC91;
  backdrop-filter: blur(6px);
  color: #fff;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-services-3-item-single {
    font-size: 22px;
    padding: 28px 30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-services-3-item-single {
    font-size: 20px;
    padding: 24px 22px;
    gap: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-services-3-item-single {
    font-size: 18px;
    padding: 20px 22px;
    gap: 8px;
  }
  .on-services-3-item-single .number {
    font-size: 15px;
  }
}
.on-services-3-item-img {
  height: 324px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.on-services-3-item-img .single-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  border-radius: 20px;
}
.on-services-3-item-img .single-img:is(.active) {
  transform: translateY(0%);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-services-3-item-img {
    height: 290px;
  }
}
.on-services-3-item-img {
  /* every service's image shows as its own stacked card once the scrub is off */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-services-3-item-img {
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .on-services-3-item-img .single-img {
    position: relative;
    inset: auto;
    width: 100%;
    height: 260px;
    transform: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-services-3-item-img .single-img {
    height: 320px;
  }
}
@media (max-width: 767px) {
  .on-services-3-item-img .single-img {
    height: 220px;
  }
}
.on-services-3-item-disc {
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 194px;
  border-radius: 20px;
}
.on-services-3-item-disc .single-box {
  background: #313831;
  border-radius: 20px;
  text-align: center;
  padding: 26px 50px;
  position: absolute;
  top: 0;
  left: 0;
}
.on-services-3-item-disc .single-box:is(.active) {
  transform: translateY(0%);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-services-3-item-disc .single-box {
    padding: 22px 28px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-services-3-item-disc .single-box {
    padding: 20px 22px;
  }
}
.on-services-3-item-disc {
  /* every service's description shows as its own card once the scrub is off */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-services-3-item-disc {
    min-height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .on-services-3-item-disc .single-box {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    transform: none;
  }
}
.on-services-3-item-disc .disc {
  color: #fff;
  opacity: 100%;
  margin-bottom: 20px;
}
.on-services-3-item-disc .item-btn {
  font-family: var(--on-font-2);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  padding-left: 12px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  transition: var(--on-cube-1);
}
.on-services-3-item-disc .item-btn .icon {
  width: 28px;
  height: 28px;
  background: #45FC91;
  background: linear-gradient(130deg, rgb(69, 252, 145) 0%, rgb(20, 28, 20) 30%, rgb(0, 0, 0) 70%, rgb(69, 252, 145) 100%);
  border-radius: 6px;
  color: var(--on-clr-pr-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.on-services-3-item-disc .item-btn:hover {
  background: var(--on-clr-pr-3);
  color: var(--on-clr-h-3);
}
.on-services-3-all-btn {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}
.on-services-3-all-btn .btn-elm {
  color: var(--on-clr-pr-3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
@media (max-width: 767px) {
  .on-services-3-all-btn {
    font-size: 15px;
  }
}
.on-services-3-bg-glow-1 {
  width: 47%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.on-services-3-bg-glow-2 {
  text-align: right;
  width: 38%;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.on-services-3-bg {
  /* decorative only — not worth the bandwidth or the layout risk on phones */
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-services-3-bg-glow-1, .on-services-3-bg-glow-2 {
    display: none;
  }
}

.on-services-3 {
  /*
      main — the wrap holds still while the height div under it scrolls past,
      which is what lets the rail, image and description step through
  */
}
.on-services-3-height {
  height: 400vh;
  position: relative;
  z-index: 1;
  /* the effect is off down here, so it must not reserve scroll height */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-services-3-height {
    height: auto;
  }
}
.on-services-3-pin {
  position: sticky;
  top: 0;
  /* the height div has collapsed, so there is nothing left to hold against */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-services-3-pin {
    position: static;
  }
}

/*
    services-3-end
*/
/*
    team-3-start
*/
.on-team-3-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #F4F7F3;
  padding: 120px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-team-3-area {
    padding: 100px 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-team-3-area {
    padding: 90px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-team-3-area {
    padding: 70px 0;
  }
}
@media (max-width: 767px) {
  .on-team-3-area {
    padding: 60px 0;
  }
}
.on-team-3-bg-img {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 47.5%;
  height: 920px;
  mix-blend-mode: luminosity;
  opacity: 0.64;
}
.on-team-3-bg-img img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-team-3-bg-img {
  /* the card row no longer overlaps it at this width, so it's just a
     collage risk for no benefit */
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-team-3-bg-img {
    display: none;
  }
}
.on-team-3-sec-title {
  max-width: 650px;
  margin-bottom: 92px;
}
.on-team-3-sec-title .on-sec-title-3 {
  margin-bottom: 23px;
}
.on-team-3-sec-title .on-p-3 {
  margin-bottom: 32px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-team-3-sec-title {
    margin-bottom: 56px;
  }
}
@media (min-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-team-3-swiper {
    margin-right: -280px;
  }
}
.on-team-3-swiper .swiper-slide {
  max-width: 392px;
  width: 100%;
}
.on-team-3-card {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 480px;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--on-clr-h-3);
}
.on-team-3-card .img-elm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
}
.on-team-3-card .img-elm img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-team-3-card .img-elm::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 176px;
  background: linear-gradient(180deg, rgba(20, 28, 20, 0) 0%, rgba(20, 28, 20, 0.85) 100%);
}
.on-team-3-card {
  /* resting state — name + role centred over the scrim */
}
.on-team-3-card .body-elm {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 0 24px 28px;
  text-align: center;
  transition: var(--on-cube-1);
}
.on-team-3-card .body-elm .name-elm {
  color: #fff;
  margin-bottom: 7px;
}
.on-team-3-card .body-elm .role-elm {
  display: block;
  font-family: var(--on-font-1);
  font-size: 18px;
  color: var(--on-clr-pr-3);
}
.on-team-3-card {
  /*
      hover panel — inset dark card holding the full bio; parked just
      off its resting spot and faded out, so it arrives with a slight
      rise instead of popping in place
  */
}
.on-team-3-card .hover-elm {
  position: absolute;
  inset: 12px;
  z-index: 2;
  border-radius: 16px;
  background-color: var(--on-clr-h-3);
  overflow: hidden;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: var(--on-cube-1);
  /* the two blurred pools the design floats behind the copy */
}
.on-team-3-card .hover-elm::before, .on-team-3-card .hover-elm::after {
  content: "";
  position: absolute;
  width: 199px;
  height: 199px;
  border-radius: 50%;
  background-color: var(--on-clr-pr-3);
  opacity: 0.7;
  filter: blur(80px);
  pointer-events: none;
}
.on-team-3-card .hover-elm::before {
  left: -60px;
  top: -40px;
}
.on-team-3-card .hover-elm::after {
  right: -70px;
  bottom: 0;
}
.on-team-3-card .hover-elm .bg-icon-elm {
  position: absolute;
  right: -37px;
  bottom: 100px;
  z-index: -1;
  width: 167px;
  opacity: 0.05;
  pointer-events: none;
}
.on-team-3-card .hover-elm .content-elm {
  position: relative;
  z-index: 1;
  margin-bottom: auto;
}
.on-team-3-card .hover-elm .content-elm .name-elm {
  color: #fff;
  margin-bottom: 7px;
}
.on-team-3-card .hover-elm .content-elm .role-elm {
  display: block;
  font-family: var(--on-font-1);
  font-size: 18px;
  color: var(--on-clr-pr-3);
  margin-bottom: 20px;
}
.on-team-3-card .hover-elm .content-elm .text-elm {
  color: rgba(255, 255, 255, 0.8);
}
.on-team-3-card .hover-elm .social-elm {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.on-team-3-card .hover-elm .social-elm a {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: var(--on-cube-1);
}
.on-team-3-card .hover-elm .social-elm a:hover {
  background-color: var(--on-clr-pr-3);
  color: var(--on-clr-h-3);
}
.on-team-3-card:hover .body-elm {
  opacity: 0;
  visibility: hidden;
}
.on-team-3-card:hover .hover-elm {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.on-team-3-card {
  /* nothing to hover with a finger — the resting name/role is enough */
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-team-3-card .hover-elm {
    display: none;
  }
}

/*
    team-3-end
*/
/*
    features-1-start
*/
.on-features-1-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--on-clr-h-1);
  padding: 100px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-features-1-area {
    padding: 90px 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-features-1-area {
    padding: 85px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-features-1-area {
    padding: 75px 0;
  }
}
@media (max-width: 767px) {
  .on-features-1-area {
    padding: 60px 0;
  }
}
.on-features-1-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.on-features-1-bg img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-features-1-overlay {
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
}
.on-features-1-overlay:is(.has-top) {
  top: 0;
  height: 264px;
  background: linear-gradient(180deg, rgba(2, 61, 63, 0.85) 0%, rgba(2, 61, 63, 0) 100%);
}
.on-features-1-overlay:is(.has-bottom) {
  bottom: 0;
  height: 588px;
  background: linear-gradient(0deg, rgba(2, 61, 63, 0.92) 0%, rgba(2, 61, 63, 0) 100%);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-features-1-overlay:is(.has-top) {
    height: 45%;
  }
  .on-features-1-overlay:is(.has-bottom) {
    height: 70%;
  }
}
.on-features-1 {
  /* the long drop is deliberate — it is the band where the photo reads clean */
}
.on-features-1-sec-title {
  max-width: 838px;
  margin: 0 auto 330px;
  text-align: center;
}
.on-features-1-sec-title .on-sec-title-1 {
  font-weight: 700;
  color: #fff;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-features-1-sec-title {
    margin-bottom: 280px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-features-1-sec-title {
    margin-bottom: 240px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-features-1-sec-title {
    margin-bottom: 180px;
  }
}
@media (max-width: 767px) {
  .on-features-1-sec-title {
    margin-bottom: 120px;
  }
}
.on-features-1-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 110px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-features-1-grid {
    gap: 80px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-features-1-grid {
    gap: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-features-1-grid {
    gap: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-features-1-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}
@media (max-width: 767px) {
  .on-features-1-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
.on-features-1 {
  /*
      icon-box — a 64px plate with two smaller squares stepping away from its
      bottom-left corner
  */
}
.on-features-1-icon {
  position: relative;
  width: 94px;
  height: 94px;
}
.on-features-1-icon .plate-elm {
  position: absolute;
  left: 30px;
  top: 0;
  width: 64px;
  height: 64px;
  background-color: #016c6e;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.4s ease;
}
.on-features-1-icon .icon-elm {
  width: 36px;
  height: 36px;
  background-color: #fff;
  transition: background-color 0.4s ease, transform 0.55s cubic-bezier(0.62, 0.05, 0.01, 0.99);
}
.on-features-1-icon::before, .on-features-1-icon::after {
  content: "";
  position: absolute;
  background-color: #016c6e;
  transition: transform 0.55s cubic-bezier(0.62, 0.05, 0.01, 0.99), background-color 0.4s ease, opacity 0.4s ease;
}
.on-features-1-icon::before {
  left: 10px;
  top: 64px;
  width: 20px;
  height: 20px;
  opacity: 0.32;
}
.on-features-1-icon::after {
  left: 0;
  top: 84px;
  width: 10px;
  height: 10px;
}
.on-features-1-item:hover .on-features-1-icon .plate-elm {
  background-color: var(--on-clr-pr-1);
}
.on-features-1-item:hover .on-features-1-icon .icon-elm {
  background-color: var(--on-clr-h-1);
  transform: rotate(-8deg) scale(1.06);
}
.on-features-1-item:hover .on-features-1-icon::before {
  transform: translate(10px, -10px);
  background-color: var(--on-clr-pr-1);
  opacity: 0.5;
  transition-delay: 0.06s;
}
.on-features-1-item:hover .on-features-1-icon::after {
  transform: translate(20px, -20px);
  background-color: var(--on-clr-pr-1);
  transition-delay: 0.12s;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-features-1-icon {
    width: 84px;
    height: 84px;
    margin-bottom: 28px;
  }
  .on-features-1-icon .plate-elm {
    left: 26px;
    width: 58px;
    height: 58px;
  }
  .on-features-1-icon .icon-elm {
    width: 32px;
    height: 32px;
  }
  .on-features-1-icon::before {
    left: 9px;
    top: 58px;
    width: 17px;
    height: 17px;
  }
  .on-features-1-icon::after {
    top: 75px;
    width: 9px;
    height: 9px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-features-1-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
  }
  .on-features-1-icon .plate-elm {
    left: 24px;
    width: 56px;
    height: 56px;
  }
  .on-features-1-icon .icon-elm {
    width: 30px;
    height: 30px;
  }
  .on-features-1-icon::before {
    left: 8px;
    top: 56px;
    width: 16px;
    height: 16px;
  }
  .on-features-1-icon::after {
    top: 72px;
    width: 8px;
    height: 8px;
  }
}
.on-features-1-item .line-elm {
  display: block;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.16);
  margin-bottom: 23px;
}
.on-features-1-item .title-elm {
  font-family: var(--on-font-1);
  font-size: 22px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 18px;
}
.on-features-1-item .text-elm {
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-features-1-item .line-elm {
    margin-bottom: 28px;
  }
  .on-features-1-item .title-elm {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 22px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-features-1-item .line-elm {
    margin-bottom: 24px;
  }
  .on-features-1-item .title-elm {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 18px;
  }
  .on-features-1-item .text-elm {
    font-size: 15px;
  }
}

/*
    features-1-end
*/
/*
    features-2-start
*/
.on-features-2-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.on-features-2-wrap {
  display: flex;
  align-items: stretch;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-features-2-wrap {
    flex-direction: column;
  }
}
.on-features-2 {
  /* editorial blue panel — the photo is confined to its left half and
     fades into the flat brand blue past that, via the ::after gradient */
}
.on-features-2-left {
  position: relative;
  z-index: 1;
  flex: 0 0 48.65%;
  overflow: hidden;
  background-color: var(--on-clr-pr-2);
  padding: 100px;
}
.on-features-2-left::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(42, 92, 255, 0) 0%, var(--on-clr-pr-2) 62%);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-features-2-left {
    padding: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-features-2-left {
    flex-basis: auto;
    padding: 60px 24px;
  }
}
.on-features-2-bg-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 20%;
}
.on-features-2-bg-img img {
  width: 60%;
  height: 100% !important;
  object-fit: cover;
}
.on-features-2-dots {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 36%;
  pointer-events: none;
}
.on-features-2-dots img {
  width: 100%;
  height: auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-features-2-dots {
    display: none;
  }
}
.on-features-2-sec-title {
  position: relative;
  z-index: 2;
  max-width: 582px;
  margin-bottom: 150px;
}
.on-features-2-sec-title .on-subtitle-2 {
  color: #fff;
}
.on-features-2-sec-title .on-sec-title-2 {
  color: #fff;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-features-2-sec-title {
    margin-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-features-2-sec-title {
    margin-bottom: 60px;
  }
}
.on-features-2-desc {
  position: relative;
  z-index: 2;
  max-width: 457px;
  margin-left: 277px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-features-2-desc {
    margin-left: 0px;
  }
}
.on-features-2-desc .text-elm {
  color: #fff;
  margin-bottom: 32px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-features-2-desc {
    margin-left: 120px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-features-2-desc {
    margin-left: 0;
  }
}
.on-features-2-right {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
@media (max-width: 767px) {
  .on-features-2-right {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
}
.on-features-2-photo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 48px;
}
.on-features-2-photo-cell img {
  max-width: 100%;
  height: auto;
}
.on-features-2-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 48px;
  background-color: #e5ebff;
}
.on-features-2-card:is(.has-v2) {
  background-color: #f7f9ff;
}
.on-features-2-card {
  /* soft concentric glow bleeding off the top-right corner */
}
.on-features-2-card::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  z-index: -1;
  width: 192px;
  height: 192px;
}
.on-features-2-card .icon-elm {
  display: block;
  max-height: 100px;
  width: auto;
  margin-bottom: 56px;
  transition: var(--on-cube-1);
}
.on-features-2-card .title-elm {
  font-family: var(--on-font-2);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.272;
  color: var(--on-clr-h-2);
  margin-bottom: 12px;
}
.on-features-2-card .text-elm {
  font-family: var(--on-font-1);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.555;
  color: var(--on-clr-p-2);
}
.on-features-2-card:hover .icon-elm {
  transform: translateY(-6px) rotate(-6deg);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-features-2-card {
    padding: 36px;
  }
  .on-features-2-card .icon-elm {
    max-height: 80px;
    margin-bottom: 36px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-features-2-card {
    padding: 28px;
  }
  .on-features-2-card .icon-elm {
    max-height: 70px;
    margin-bottom: 24px;
  }
  .on-features-2-card .title-elm {
    font-size: 20px;
  }
}

/*
    features-2-end
*/
/*
    core-features-start
*/
.on-core-features-3-area {
  position: relative;
  z-index: 1;
  padding: 8px 0;
}
.on-core-features-3-container {
  max-width: 1904px;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: auto;
  margin-right: auto;
}
.on-core-features-3-wrap {
  display: grid;
  grid-template-columns: 1fr 1.85fr 1fr;
  gap: 8px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-core-features-3-wrap {
    gap: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-core-features-3-wrap {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.on-core-features-3-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  min-height: 360px;
}
.on-core-features-3-item .content-elm {
  position: relative;
  z-index: 2;
  padding: 32px 28px 0;
}
.on-core-features-3-item .title-elm {
  font-size: 22px;
  margin-bottom: 10px;
}
.on-core-features-3-item {
  /* bordered card shared by v1 (photo) and v3 (graph) */
}
.on-core-features-3-item:is(.has-v1, .has-v3) {
  border: 2px solid rgba(20, 28, 20, 0.08);
}
.on-core-features-3-item:is(.has-v2) {
  background-color: #F1F6EF;
  overflow: visible;
}
.on-core-features-3-item:is(.has-v2) .title-elm {
  font-size: 26px;
  max-width: 360px;
}
.on-core-features-3-item {
  /* the desc sits low, next to the photo/rate-card rather than under the title */
}
.on-core-features-3-item:is(.has-v2) .text-elm {
  margin-top: 97px;
  max-width: 380px;
}
.on-core-features-3-item {
  /* v1 — photo pinned to the bottom edge */
}
.on-core-features-3-item:is(.has-v1) .img-elm {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 160px;
  border-radius: 8px;
  background-color: var(--on-clr-h-3);
}
.on-core-features-3-item:is(.has-v1) .img-elm img {
  mix-blend-mode: luminosity;
}
.on-core-features-3-item {
  /* v2 — photo pinned to the right edge, full height */
}
.on-core-features-3-item:is(.has-v2) .img-elm {
  position: absolute;
  right: 14px;
  top: 14px;
  bottom: 14px;
  width: 42%;
  border-radius: 8px;
}
.on-core-features-3-item:is(.has-v3) {
  background-color: #fff;
}
.on-core-features-3-item:is(.has-v3) .text-elm {
  max-width: 280px;
}
.on-core-features-3-item {
  /* the success-rate widget is a single pre-built graphic, floated over
     the seam between the copy and the photo */
}
.on-core-features-3-item .rate-elm {
  position: absolute;
  left: 47%;
  top: 24%;
  z-index: 1;
  width: 28%;
  filter: drop-shadow(7px 10px 44px rgba(0, 0, 0, 0.16));
}
.on-core-features-3-item .rate-elm img {
  width: 100%;
  display: block;
}
.on-core-features-3-item {
  /* v3 — the line-chart graphic plus the real axis numbers and callout,
     kept as text so they stay in the buyer's markup, not baked into the PNG */
}
.on-core-features-3-item .graph-elm {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 19px;
}
.on-core-features-3-item .graph-elm img {
  width: 100%;
  display: block;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-core-features-3-item {
    min-height: 320px;
  }
  .on-core-features-3-item:is(.has-v2) .text-elm {
    margin-top: 90px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-core-features-3-item {
    min-height: 300px;
  }
  .on-core-features-3-item:is(.has-v1) .img-elm {
    height: 140px;
  }
  .on-core-features-3-item:is(.has-v2) .text-elm {
    margin-top: 75px;
  }
  .on-core-features-3-item .rate-elm {
    top: 20%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-core-features-3-item {
    min-height: 280px;
  }
  .on-core-features-3-item .content-elm {
    padding: 22px 22px 0;
  }
  .on-core-features-3-item .title-elm {
    font-size: 19px;
  }
  .on-core-features-3-item:is(.has-v1) .img-elm {
    left: 8px;
    right: 8px;
    bottom: 8px;
    height: 110px;
  }
  .on-core-features-3-item:is(.has-v2) .title-elm {
    font-size: 22px;
  }
  .on-core-features-3-item:is(.has-v2) .text-elm {
    margin-top: 30px;
  }
  .on-core-features-3-item .rate-elm {
    width: 36%;
    min-width: 0;
  }
}
.on-core-features-3-item {
  /* stacked layout — every element drops back into normal flow so
     nothing needs a fixed card height to sit against */
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-core-features-3-item {
    min-height: auto;
    padding-bottom: 24px;
  }
  .on-core-features-3-item .content-elm {
    padding: 24px 24px 0;
  }
  .on-core-features-3-item:is(.has-v2) .title-elm, .on-core-features-3-item:is(.has-v2) .text-elm {
    max-width: 100%;
  }
  .on-core-features-3-item:is(.has-v2) .text-elm {
    margin-top: 16px;
  }
  .on-core-features-3-item:is(.has-v1) .img-elm {
    position: relative;
    inset: auto;
    width: auto;
    height: 200px;
    margin: 20px 20px 0;
  }
  .on-core-features-3-item:is(.has-v2) .img-elm {
    position: relative;
    inset: auto;
    width: auto;
    height: 260px;
    margin: 20px 20px 0;
  }
  .on-core-features-3-item .rate-elm {
    position: relative;
    left: auto;
    top: auto;
    width: 220px;
    max-width: 60%;
    margin: -60px 0 0 20px;
  }
  .on-core-features-3-item .graph-elm {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin: 20px 20px 0;
  }
}
@media (max-width: 767px) {
  .on-core-features-3-item .rate-elm {
    max-width: 70%;
    margin-top: -40px;
  }
}

/*
    core-features-end
*/
/*
    step-2-start
*/
.on-step-2-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--on-clr-h-2);
  padding: 438px 0 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-step-2-area {
    padding: 160px 0 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-step-2-area {
    padding: 130px 0 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-step-2-area {
    padding: 60px 0 50px;
  }
}
.on-step-2-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: var(--on-clr-h-2);
}
.on-step-2-bg img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  opacity: 90%;
}
.on-step-2-glow {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 37%;
  pointer-events: none;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-step-2-glow {
    display: none;
  }
}
.on-step-2 {
  /* oversized display type, deliberately cropped by the section's own
     overflow:hidden — only its bottom sliver shows */
}
.on-step-2-title {
  position: absolute;
  top: -92px;
  left: 0;
  z-index: 1;
  width: 100%;
  pointer-events: none;
  text-align: center;
}
.on-step-2-title h2 {
  font-family: var(--on-font-2);
  font-weight: 700;
  font-size: 180px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  margin-bottom: 0;
  letter-spacing: -2%;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-step-2-title h2 {
    font-size: 150px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-step-2-title h2 {
    font-size: 128px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-step-2-title {
    display: none;
  }
}
.on-step-2-figure {
  position: absolute;
  left: -40px;
  bottom: -40px;
  z-index: -2;
  width: 26.4%;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-step-2-figure {
    display: none;
  }
}
.on-step-2-cards {
  position: relative;
  z-index: 2;
}
.on-step-2 {
  /* the diagonal stagger is just each card shifted right + down from the
     last, in percentages so it scales with the container instead of
     needing its own breakpoint math */
}
.on-step-2-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 49.7%;
  min-height: 142px;
  padding: 20px 24px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(32px);
  transition: var(--on-cube-1);
}
.on-step-2-card:nth-child(2) {
  margin-top: 8px;
  margin-left: 25.14%;
}
.on-step-2-card:nth-child(3) {
  margin-top: 8px;
  margin-left: 50.28%;
}
.on-step-2-card .head-elm {
  flex: 0 0 220px;
}
.on-step-2-card .num-elm {
  display: block;
  font-family: var(--on-font-2);
  font-size: 16px;
  font-weight: 500;
  color: #f6ba1d;
  margin-bottom: 6px;
}
.on-step-2-card .title-elm {
  font-family: var(--on-font-2);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.09;
  color: #fff;
  margin-bottom: 0;
}
.on-step-2-card .text-elm {
  flex: 1;
  max-width: 376px;
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
}
.on-step-2-card:hover {
  background-color: var(--on-clr-pr-2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-step-2-card {
    gap: 16px;
  }
  .on-step-2-card .head-elm {
    flex-basis: 170px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-step-2-card {
    width: 100%;
    flex-wrap: wrap;
    gap: 12px;
  }
  .on-step-2-card:nth-child(2), .on-step-2-card:nth-child(3) {
    margin-top: 16px;
    margin-left: 0;
  }
  .on-step-2-card .head-elm {
    flex-basis: 100%;
  }
}

/*
    step-2-end
*/
/*
    step-3-start
*/
.on-step-3-area {
  position: relative;
  z-index: 1;
  background-color: #F4F7F3;
}
.on-step-3-sec-title {
  max-width: 894px;
  margin: 0 auto 60px;
  text-align: center;
}
.on-step-3-sec-title .on-subtitle-3 {
  justify-content: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-step-3-sec-title {
    margin-bottom: 44px;
  }
}
.on-step-3-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .on-step-3-cards {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 48px;
  }
}
@media (max-width: 767px) {
  .on-step-3-cards {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
}
.on-step-3-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* connector to the next step — sized to exactly span the grid gap,
     so one card only ever needs to know about the card after it */
}
.on-step-3-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 34px;
  left: 69%;
  width: 74%;
  height: 1px;
  background-color: #141C14;
  opacity: 60%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-step-3-card:not(:last-child)::after {
    display: none;
  }
}
.on-step-3-card .icon-elm {
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(0deg, var(--on-clr-h-3) 0%, #0CB351 100%);
  margin-bottom: 28px;
}
.on-step-3-card .icon-elm img {
  width: 26px;
}
.on-step-3-card .title-elm {
  font-size: 24px;
  margin-bottom: 16px;
}
.on-step-3-card .text-elm {
  margin-bottom: 0;
}

/*
    step-3-end
*/
/*
    price-1-start
*/
.on-price-1-sec-title {
  max-width: 706px;
  margin-left: auto;
  margin-right: auto;
}
.on-price-1-sec-title .sec-disc {
  margin-top: 22px;
}
.on-price-1-wrap {
  max-width: 1344px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-price-1-wrap {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 767px) {
  .on-price-1-wrap {
    grid-template-columns: 1fr;
  }
}
.on-price-1 {
  /* the plate is the frame; the white body sits inside its 4px lip */
}
.on-price-1-card {
  background-color: #eaf0ee;
  border-radius: 20px;
  padding: 4px;
  transition: var(--on-cube-1);
}
.on-price-1-card .title-x-number {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  padding: 20px 28px;
}
.on-price-1-card .title {
  font-size: 26px;
  transition: var(--on-cube-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-price-1-card .title {
    font-size: 22px;
  }
}
.on-price-1-card .hr-line {
  background: #d3ddda;
  height: 1px;
  width: 100%;
  transition: var(--on-cube-1);
}
.on-price-1-card .number {
  color: var(--on-clr-h-1);
  font-style: italic;
  transition: var(--on-cube-1);
}
.on-price-1-card .card-bd {
  border-radius: 18px;
  background-color: #fff;
  padding: 24px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-price-1-card .card-bd {
    padding: 24px 17px;
  }
}
.on-price-1-card .price {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 18px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-price-1-card .price {
    font-size: 40px;
  }
}
.on-price-1-card .price span {
  font-size: 18px;
  opacity: 72%;
  font-weight: 400;
}
.on-price-1-card .disc {
  margin-bottom: 20px;
}
.on-price-1-card {
  /*
      full-width block button — the source project drove this off a ::after
      wipe that has no counterpart here, so it is a plain color swap
  */
}
.on-price-1-card .card-btn {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-family: var(--on-font-2);
  font-size: 16px;
  font-weight: 500;
  color: var(--on-clr-h-1);
  background-color: #eaf0ee;
  border-radius: 100px;
  padding: 16px 10px;
  margin-bottom: 28px;
  transition: var(--on-cube-1);
}
.on-price-1-card .card-btn:hover {
  background-color: var(--on-clr-h-1);
  color: #fff;
}
.on-price-1-card .subtitle {
  font-size: 20px;
  font-weight: 600;
  opacity: 32%;
  margin-bottom: 18px;
}
.on-price-1-card .price-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.on-price-1-card .price-list li {
  color: var(--on-clr-h-1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.on-price-1-card .price-list li i {
  font-size: 20px;
  opacity: 52%;
}
.on-price-1-card {
  /* the plate under the pointer — wa_hover_class_toggle moves this along */
}
.on-price-1-card:is(.active) {
  background-color: var(--on-clr-h-1);
}
.on-price-1-card:is(.active) .title {
  color: #fff;
}
.on-price-1-card:is(.active) .number {
  color: var(--on-clr-pr-1);
}
.on-price-1-card:is(.active) .hr-line {
  opacity: 50%;
}
.on-price-1-card:is(.active) .card-btn {
  background-color: var(--on-clr-h-1);
  color: #fff;
}
.on-price-1-content {
  position: relative;
  border-radius: 20px;
  padding: 4px;
  padding-right: 20px;
  border: 4px solid #eaf0ee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  overflow: hidden;
  max-width: 1344px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 16px;
}
@media (max-width: 767px) {
  .on-price-1-content {
    padding: 12px;
    gap: 20px;
  }
}
.on-price-1-content {
  /* decorative watermark, so it sits under the copy and drops out first */
}
.on-price-1-content .support-icon {
  position: absolute;
  top: 50%;
  left: 63%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-price-1-content .support-icon {
    display: none;
  }
}
.on-price-1-content .btn-wrap {
  position: relative;
}
.on-price-1-content .on-pr-btn-1 {
  background: #EBF0F0;
}
.on-price-1-content .on-pr-btn-1 .icon {
  background-color: var(--on-clr-h-1);
  color: #fff;
}
.on-price-1-support {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
}
@media (max-width: 767px) {
  .on-price-1-support {
    gap: 16px;
  }
}
.on-price-1-support .img-elm {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 15px;
}
.on-price-1-support .title {
  font-size: 22px;
  margin-bottom: 6px;
}
@media (max-width: 767px) {
  .on-price-1-support .title {
    font-size: 18px;
  }
}
.on-price-1-support .title a {
  color: #016c6e;
  font-style: italic;
  transition: var(--on-cube-1);
}
.on-price-1-support .title a:hover {
  color: var(--on-clr-h-1);
}
.on-price-1-support .disc {
  font-size: 16px;
}

/*
    price-1-end
*/
/*
    faqs-1-start
*/
.on-faqs-1 {
  /*
      the figure stands 137px proud of the band, so this one section is not
      clipped — every other layer is pinned inside it instead
  */
}
.on-faqs-1-area {
  position: relative;
  z-index: 1;
  padding: 113px 0 80px;
}
@media (min-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1799px) {
  .on-faqs-1-area {
    margin-top: 120px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-faqs-1-area {
    padding: 90px 0 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-faqs-1-area {
    padding: 80px 0 70px;
  }
}
@media (max-width: 767px) {
  .on-faqs-1-area {
    padding: 60px 0 50px;
  }
}
.on-faqs-1-container {
  max-width: 1790px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}
.on-faqs-1-bg {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: -3;
  bottom: 0;
  height: 100% !important;
}
.on-faqs-1-bg img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-faqs-1-bg-right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -2;
  width: 917px;
  max-width: 55%;
}
.on-faqs-1-bg-right img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-faqs-1-dot {
  position: absolute;
  left: 40.6%;
  top: 69px;
  z-index: -1;
  width: 547px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-faqs-1-dot {
    width: 470px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-faqs-1-dot {
    width: 400px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-faqs-1-dot {
    width: 340px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-faqs-1-dot {
    display: none;
  }
}
.on-faqs-1-main-img {
  position: absolute;
  left: 39.9%;
  bottom: 0;
  z-index: 1;
  max-width: 32%;
}
@media only screen and (min-width: 1600px) and (max-width: 1799px) {
  .on-faqs-1-main-img {
    width: 540px;
    top: -110px;
    display: flex;
    align-items: end;
    justify-content: center;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-faqs-1-main-img {
    width: 470px;
    top: -95px;
    display: flex;
    align-items: end;
    justify-content: center;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-faqs-1-main-img {
    left: 44%;
    width: 400px;
    top: -80px;
    display: flex;
    align-items: end;
    justify-content: center;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-faqs-1-main-img {
    display: none;
  }
}
.on-faqs-1-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-faqs-1-wrap {
    display: block;
  }
}
.on-faqs-1 {
  /*
      left
  */
}
.on-faqs-1-left {
  position: relative;
  flex: 0 0 656px;
  width: 656px;
}
@media only screen and (min-width: 1600px) and (max-width: 1799px) {
  .on-faqs-1-left {
    flex-basis: 600px;
    width: 600px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-faqs-1-left {
    flex-basis: 540px;
    width: 540px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-faqs-1-left {
    flex-basis: 480px;
    width: 480px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-faqs-1-left {
    flex: 0 0 56%;
    width: 56%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-faqs-1-left {
    width: 100%;
  }
}
.on-faqs-1 {
  /* the oversized word sits behind the stack as a watermark */
}
.on-faqs-1-big-title {
  position: absolute;
  left: 0;
  top: -80px;
  z-index: -1;
  font-family: var(--on-font-2);
  font-size: 160px;
  font-weight: 700;
  line-height: 117px;
  color: var(--on-clr-h-1);
  opacity: 0.08;
  margin-bottom: 0;
  pointer-events: none;
  /*
      wow hands this the reveal on scroll. The word rests at 8%, so the
      last keyframe has to land there — fill-mode holds whatever it ends on
  */
}
.on-faqs-1-big-title:is(.riseIn2) {
  animation-name: on-faqs-1-title-in;
  animation-duration: 1200ms;
  animation-timing-function: cubic-bezier(0.62, 0.05, 0.01, 0.99);
  animation-fill-mode: both;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-faqs-1-big-title {
    font-size: 130px;
    line-height: 96px;
    top: -66px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-faqs-1-big-title {
    font-size: 110px;
    line-height: 82px;
    top: -56px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-faqs-1-big-title {
    font-size: 90px;
    line-height: 68px;
    top: -46px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-faqs-1-big-title {
    font-size: 80px;
    line-height: 60px;
    top: -40px;
  }
}
@media (max-width: 767px) {
  .on-faqs-1-big-title {
    font-size: 56px;
    line-height: 42px;
    top: -28px;
  }
}
.on-faqs-1 {
  /*
      the stack is held at the height of "one pane open", so opening or
      closing never resizes the section — the bg and the figure are pinned to
      the section box, and they used to slide every time an answer moved
  */
}
.on-faqs-1-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 516px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-faqs-1-list {
    min-height: 560px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-faqs-1-list {
    min-height: 0;
  }
}
.on-faqs-1-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 0 30px;
  transition: background-color 0.4s ease;
}
@media (max-width: 767px) {
  .on-faqs-1-item {
    padding: 0 20px;
  }
}
.on-faqs-1-item .head-elm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 0;
  cursor: pointer;
}
.on-faqs-1-item .title-elm {
  font-family: var(--on-font-2);
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--on-clr-h-1);
  margin-bottom: 0;
  transition: color 0.4s ease;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-faqs-1-item .title-elm {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .on-faqs-1-item .title-elm {
    font-size: 17px;
    line-height: 26px;
  }
}
.on-faqs-1-item {
  /* the twin chevrons flip up once the answer is out */
}
.on-faqs-1-item .icon-elm {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--on-clr-h-1);
  opacity: 0.32;
  transition: var(--on-cube-1);
}
.on-faqs-1-item .icon-elm svg {
  display: block;
  width: 100%;
  height: 100% !important;
}
.on-faqs-1-item {
  /*
      a 0fr/1fr row animates the real height. max-height had to guess a
      ceiling, so the open ran out early and the close sat still before
      dropping — that stutter is what the images were echoing
  */
}
.on-faqs-1-item .body-elm {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}
.on-faqs-1-item .body-elm > * {
  overflow: hidden;
}
.on-faqs-1-item .text-elm {
  font-family: var(--on-font-1);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
  /*
      a border-box is never shorter than its own padding, so parking
      the 16px here left every closed row standing 16px tall. It is
      dealt in with the row instead
  */
  padding-bottom: 0;
  transition: padding-bottom 0.4s ease;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-faqs-1-item .text-elm {
    font-size: 16px;
    line-height: 26px;
  }
}
@media (max-width: 767px) {
  .on-faqs-1-item .text-elm {
    font-size: 16px;
    line-height: 26px;
  }
}
.on-faqs-1-item:is(.active) {
  background-color: var(--on-clr-h-1);
}
.on-faqs-1-item:is(.active) .title-elm {
  font-weight: 600;
  color: #fff;
}
.on-faqs-1-item:is(.active) .icon-elm {
  color: var(--on-clr-pr-1);
  opacity: 1;
  transform: rotate(180deg);
}
.on-faqs-1-item:is(.active) .body-elm {
  grid-template-rows: 1fr;
}
.on-faqs-1-item:is(.active) .text-elm {
  padding-bottom: 16px;
}
.on-faqs-1 {
  /*
      quote
  */
}
.on-faqs-1-quote {
  flex: 0 0 404px;
  width: 404px;
  margin-top: 77px;
  margin-right: 27px;
}
.on-faqs-1-quote .icon-elm {
  display: block;
  width: 42px;
  margin-bottom: 34px;
}
.on-faqs-1-quote .icon-elm svg {
  display: block;
  width: 100%;
  height: auto;
}
.on-faqs-1-quote .text-elm {
  font-family: var(--on-font-2);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  line-height: 32px;
  color: #fff;
  margin-bottom: 12px;
}
.on-faqs-1-quote {
  /* the lime thread that drops from the quote to the byline */
}
.on-faqs-1-quote .line-elm {
  position: relative;
  display: block;
  width: 1.5px;
  height: 66px;
  margin-left: 50px;
  background: linear-gradient(to bottom, rgba(190, 255, 107, 0), var(--on-clr-pr-1));
}
.on-faqs-1-quote .line-elm::after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: 0;
  width: 10px;
  height: 10px;
  background-color: var(--on-clr-pr-1);
  clip-path: polygon(100% 0%, 50% 100%, 0% 0%);
}
.on-faqs-1-quote .line-elm {
  /*
      drawn top down by a clip rather than scaled — scaling would take
      the arrow head with it and squash it flat on the way
  */
}
.on-faqs-1-quote .line-elm:is(.drawDown2) {
  animation-name: on-faqs-1-line-draw;
  animation-duration: 900ms;
  animation-timing-function: cubic-bezier(0.62, 0.05, 0.01, 0.99);
  animation-fill-mode: both;
}
.on-faqs-1-quote .author-elm {
  width: 275px;
  max-width: 100%;
  padding: 14px 18px;
  border-radius: 7px;
  background-color: rgba(255, 255, 255, 0.1);
}
.on-faqs-1-quote .name-elm {
  font-family: var(--on-font-1);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 2px;
}
.on-faqs-1-quote .role-elm {
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 0;
}
@media only screen and (min-width: 1600px) and (max-width: 1799px) {
  .on-faqs-1-quote {
    flex-basis: 380px;
    width: 380px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-faqs-1-quote {
    flex-basis: 340px;
    width: 340px;
    margin-right: 0;
    margin-top: 60px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-faqs-1-quote {
    flex-basis: 300px;
    width: 300px;
    margin-right: 0;
    margin-top: 50px;
  }
  .on-faqs-1-quote .text-elm {
    font-size: 19px;
    line-height: 29px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-faqs-1-quote {
    flex: 0 0 38%;
    width: 38%;
    margin-right: 0;
    margin-top: 40px;
  }
  .on-faqs-1-quote .icon-elm {
    margin-bottom: 24px;
  }
  .on-faqs-1-quote .text-elm {
    font-size: 18px;
    line-height: 28px;
  }
  .on-faqs-1-quote .line-elm {
    height: 48px;
  }
}
.on-faqs-1-quote {
  /*
      off the teal panel now, so the block carries its own ground or the
      white type has nothing to sit on
  */
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-faqs-1-quote {
    width: 100%;
    margin: 40px 0 0;
    padding: 32px 28px;
    border-radius: 12px;
    background-color: var(--on-clr-h-1);
  }
  .on-faqs-1-quote .icon-elm {
    margin-bottom: 22px;
  }
  .on-faqs-1-quote .text-elm {
    font-size: 19px;
    line-height: 30px;
  }
  .on-faqs-1-quote .line-elm {
    height: 44px;
  }
  .on-faqs-1-quote .author-elm {
    background-color: rgba(255, 255, 255, 0.12);
  }
}
@media (max-width: 767px) {
  .on-faqs-1-quote {
    margin-top: 32px;
    padding: 24px 20px;
  }
  .on-faqs-1-quote .text-elm {
    font-size: 17px;
    line-height: 28px;
  }
  .on-faqs-1-quote .name-elm {
    font-size: 17px;
  }
  .on-faqs-1-quote .role-elm {
    font-size: 15px;
  }
}

@keyframes on-faqs-1-line-draw {
  0% {
    clip-path: inset(0 0 100% 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes on-faqs-1-title-in {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 0.08;
    transform: translateY(0);
  }
}
/*
    faqs-1-end
*/
/*
    industry-1-start
*/
.ot-industry-1-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.ot-industry-1-area .bg-img-left,
.ot-industry-1-area .bg-img-right {
  position: absolute;
  top: 0;
  z-index: -1;
  pointer-events: none;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ot-industry-1-area .bg-img-left,
  .ot-industry-1-area .bg-img-right {
    display: none;
  }
}
.ot-industry-1-area .bg-img-left {
  left: 0;
}
.ot-industry-1-area .bg-img-right {
  right: 0;
}
.ot-industry-1-top {
  display: flex;
  align-items: center;
  gap: 46px;
  margin-bottom: 52px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ot-industry-1-top {
    flex-direction: column;
    gap: 40px;
    margin-bottom: 40px;
  }
}
.ot-industry-1-img {
  flex: 0 1 684px;
  width: 684px;
  max-width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ot-industry-1-img {
    flex: unset;
  }
}
.ot-industry-1-img .img-elm {
  aspect-ratio: 684/383;
  border-radius: 16px;
}
.ot-industry-1-title-wrap {
  flex: 0 1 745px;
  width: 670px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ot-industry-1-title-wrap {
    flex: unset;
  }
}
.ot-industry-1-title-wrap .on-sec-title-1 {
  margin-bottom: 32px;
  letter-spacing: -2%;
}
.ot-industry-1-title {
  max-width: 644px;
}
.ot-industry-1-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  column-gap: 60px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ot-industry-1-tabs {
    column-gap: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .ot-industry-1-tabs {
    column-gap: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .ot-industry-1-tabs {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}
.ot-industry-1-tabs .single-tab {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 97px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  border: 0;
  border-radius: 150px;
  text-align: left;
  background-color: transparent;
  transition: var(--on-cube-1);
  /* hairline between the rows — dark in the middle, faded at both ends */
}
.ot-industry-1-tabs .single-tab::before, .ot-industry-1-tabs .single-tab::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  opacity: 32%;
  background: linear-gradient(90deg, #fff 0%, #023D3F 32.5%, #023D3F 67.5%, #fff 100%);
}
.ot-industry-1-tabs .single-tab::before {
  top: 0;
}
.ot-industry-1-tabs .single-tab::after {
  bottom: 0;
  opacity: 0;
}
.ot-industry-1-tabs .single-tab:nth-child(3n)::after {
  opacity: 32%;
}
.ot-industry-1-tabs .single-tab .number {
  flex: 0 0 118px;
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: var(--on-clr-h-1);
}
.ot-industry-1-tabs .single-tab .number span {
  opacity: 48%;
}
.ot-industry-1-tabs .single-tab .text-elm {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  font-family: var(--on-font-2);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3636;
  letter-spacing: 0.01em;
  color: var(--on-clr-h-1);
}
.ot-industry-1-tabs .single-tab .text-elm i {
  font-size: 28px;
  line-height: 1;
  opacity: 60%;
  transition: var(--on-cube-1);
}
.ot-industry-1-tabs .single-tab .arrow {
  font-size: 24px;
  line-height: 1;
  color: var(--on-clr-h-1);
}
.ot-industry-1-tabs .single-tab:is(.active) {
  padding: 0 40px;
  background-color: var(--on-clr-h-1);
  box-shadow: 0px 10px 25px rgba(2, 61, 63, 0.42);
}
.ot-industry-1-tabs .single-tab:is(.active)::before, .ot-industry-1-tabs .single-tab:is(.active)::after {
  opacity: 0;
}
.ot-industry-1-tabs .single-tab:is(.active) + .single-tab::before {
  opacity: 0;
}
.ot-industry-1-tabs .single-tab:is(.active) .number {
  flex-basis: 102px;
}
.ot-industry-1-tabs .single-tab:is(.active) .number,
.ot-industry-1-tabs .single-tab:is(.active) .arrow {
  color: #fff;
}
.ot-industry-1-tabs .single-tab:is(.active) .text-elm {
  font-weight: 500;
  color: #fff;
}
.ot-industry-1-tabs .single-tab:is(.active) .text-elm i {
  opacity: 1;
  color: var(--on-clr-pr-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .ot-industry-1-tabs .single-tab {
    padding: 0 20px;
  }
  .ot-industry-1-tabs .single-tab .number {
    flex-basis: 90px;
  }
  .ot-industry-1-tabs .single-tab .text-elm {
    font-size: 20px;
  }
  .ot-industry-1-tabs .single-tab:is(.active) {
    padding: 0 30px;
  }
  .ot-industry-1-tabs .single-tab:is(.active) .number {
    flex-basis: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .ot-industry-1-tabs .single-tab {
    height: 84px;
    padding: 0 16px;
  }
  .ot-industry-1-tabs .single-tab .number {
    flex-basis: 56px;
  }
  .ot-industry-1-tabs .single-tab .text-elm {
    gap: 10px;
    font-size: 18px;
  }
  .ot-industry-1-tabs .single-tab .text-elm i {
    font-size: 24px;
  }
  .ot-industry-1-tabs .single-tab:is(.active) {
    padding: 0 26px;
  }
  .ot-industry-1-tabs .single-tab:is(.active) .number {
    flex-basis: 46px;
  }
}
@media (max-width: 767px) {
  .ot-industry-1-tabs .single-tab {
    height: 76px;
    padding: 0 12px;
  }
  .ot-industry-1-tabs .single-tab .number {
    flex: 0 0 42px;
    font-size: 14px;
  }
  .ot-industry-1-tabs .single-tab .text-elm {
    gap: 8px;
    font-size: 16px;
  }
  .ot-industry-1-tabs .single-tab .text-elm i {
    font-size: 22px;
  }
  .ot-industry-1-tabs .single-tab .arrow {
    font-size: 18px;
  }
  .ot-industry-1-tabs .single-tab:is(.active) {
    padding: 0 20px;
  }
  .ot-industry-1-tabs .single-tab:is(.active) .number {
    flex-basis: 34px;
  }
}

/*
    industry-1-end
*/
/*
    industry-2-start
*/
.on-industry-2-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #010128;
  height: 809px;
  display: flex;
  align-items: flex-end;
  padding-bottom: 120px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-industry-2-area {
    height: 700px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-industry-2-area {
    height: 620px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-industry-2-area {
    height: auto;
    padding: 80px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-industry-2-area {
    height: auto;
    padding: 60px 0;
  }
}
.on-industry-2 {
  /* left-aligned rather than full-bleed — a strip of plain navy shows past
     its right edge, which is where the masked collage sits */
}
.on-industry-2-bg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -3;
  width: 87.24%;
  height: 100% !important;
}
.on-industry-2-bg img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  opacity: 90%;
}
.on-industry-2-bg {
  /* fades the photo into the navy along its bottom and right edges,
     so the copy and the ticker never fight the picture underneath */
}
.on-industry-2-bg::before, .on-industry-2-bg::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.on-industry-2-bg::before {
  left: 0;
  right: 0;
  bottom: 0;
  height: 61%;
  background: linear-gradient(to top, #010128 0%, rgba(1, 1, 40, 0) 100%);
}
.on-industry-2-bg::after {
  right: 0;
  top: 0;
  bottom: 0;
  width: 10%;
  background: linear-gradient(to right, rgba(1, 1, 40, 0) 0%, #010128 100%);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-industry-2-bg {
    display: none;
  }
}
.on-industry-2 {
  /* two soft blue glows bleeding off opposite corners — decorative only */
}
.on-industry-2-glow {
  position: absolute;
  z-index: -2;
  pointer-events: none;
  opacity: 0.8;
}
.on-industry-2-glow:is(.has-v1) {
  left: 0;
  bottom: 0;
  width: 36%;
  z-index: -2;
}
.on-industry-2-glow:is(.has-v2) {
  right: 0;
  top: 0;
  width: 26%;
  z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-industry-2-glow {
    display: none;
  }
}
.on-industry-2 {
  /* one photo, cropped into a four-lobed clover by the mask png */
}
.on-industry-2-collage {
  position: absolute;
  right: 4.4%;
  top: 52px;
  z-index: -1;
  width: 349px;
  opacity: 0.7;
  mix-blend-mode: luminosity;
}
.on-industry-2-collage img {
  width: 100%;
  height: auto;
  display: block;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-industry-2-collage {
    width: 280px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-industry-2-collage {
    display: none;
  }
}
.on-industry-2-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-industry-2-wrap {
    gap: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-industry-2-wrap {
    display: block;
  }
}
.on-industry-2-sec-title {
  flex: 0 0 554px;
  width: 554px;
  padding: 40px 40px;
  border-radius: 22px;
  border: 2px solid rgba(255, 255, 255, 0.35);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-industry-2-sec-title {
    flex-basis: 460px;
    width: 460px;
    padding: 32px 34px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-industry-2-sec-title {
    flex-basis: 380px;
    width: 380px;
    padding: 28px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-industry-2-sec-title {
    width: 100%;
    margin-bottom: 32px;
  }
}
@media (max-width: 767px) {
  .on-industry-2-sec-title {
    padding: 24px;
  }
}
.on-industry-2-sec-title .on-subtitle-2 {
  margin-bottom: 20px;
  color: #fff;
}
.on-industry-2-sec-title .on-sec-title-2 {
  color: #fff;
}
.on-industry-2 {
  /*
      the two rows run opposite directions, and both dissolve into
      transparency at their ends instead of clipping mid-chip
  */
}
.on-industry-2-marquee {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 1800px) {
  .on-industry-2-marquee {
    margin-right: -210px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-industry-2-marquee {
    gap: 12px;
  }
}
.on-industry-2-marquee-row {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 80%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 80%, transparent 100%);
}
.on-industry-2-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-right: 16px;
  padding: 8px 24px 8px 8px;
  border-radius: 100px;
  background-color: #b3c1f2;
}
.on-industry-2-chip .icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #fff;
  color: var(--on-clr-pr-2);
}
.on-industry-2-chip .icon svg {
  width: 20px;
  height: 20px;
}
.on-industry-2-chip .text {
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 500;
  color: var(--on-clr-h-2);
  opacity: 0.8;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-industry-2-chip {
    gap: 8px;
    padding: 6px 18px 6px 6px;
  }
  .on-industry-2-chip .icon {
    width: 36px;
    height: 36px;
  }
  .on-industry-2-chip .icon svg {
    width: 16px;
    height: 16px;
  }
  .on-industry-2-chip .text {
    font-size: 14px;
  }
}

/*
    industry-2-end
*/
/*
    industry-3-start
*/
.on-industry-3-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.on-industry-3-content {
  position: relative;
  z-index: 1;
  max-width: 633px;
}
.on-industry-3-sec-title {
  margin-bottom: 120px;
}
.on-industry-3-sec-title .on-sec-title-3 {
  margin-bottom: 32px;
}
.on-industry-3-sec-title .on-p-3 {
  margin-bottom: 32px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-industry-3-sec-title {
    margin-bottom: 56px;
  }
}
.on-industry-3 {
  /* phone badge + link sitting below the CTA */
}
.on-industry-3-contact {
  display: flex;
  align-items: center;
  gap: 20px;
}
.on-industry-3-contact .badge-elm {
  position: relative;
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* two faint rings behind the solid disc, pulsing outward like a
     call signal — staggered so the second wave trails the first */
}
.on-industry-3-contact .badge-elm::before, .on-industry-3-contact .badge-elm::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid #ddd;
  animation: on-industry-3-badge-pulse 2s ease-out infinite;
}
.on-industry-3-contact .badge-elm::before {
  inset: 0;
}
.on-industry-3-contact .badge-elm::after {
  inset: 10px;
  animation-delay: 0.6s;
}
.on-industry-3-contact .badge-elm i {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--on-clr-pr-3);
  color: var(--on-clr-h-3);
  font-size: 18px;
}
.on-industry-3-contact .text-elm {
  font-family: var(--on-font-1);
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 0;
  color: rgba(0, 0, 0, 0.7);
}
.on-industry-3-contact .text-elm a {
  text-decoration: underline;
  color: #000;
  font-weight: 600;
  transition: var(--on-cube-1);
}
.on-industry-3-contact .text-elm a:hover {
  color: var(--on-clr-pr-3);
}
.on-industry-3 {
  /*
      graph — photo + three nested arcs + a floating stat card, all placed
      from one shared Figma frame; scaled as a single unit at each
      breakpoint instead of repositioning every piece by hand
  */
}
.on-industry-3-graph {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 61%;
  transform-origin: top right;
  pointer-events: none;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-industry-3-graph {
    transform: scale(0.87);
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-industry-3-graph {
    transform: scale(0.72);
  }
}
.on-industry-3-graph {
  /* the composition is too dense to shrink further and still read */
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-industry-3-graph {
    display: none;
  }
}
.on-industry-3-bg-photo {
  position: absolute;
  top: 0;
  right: -5%;
  z-index: -3;
  width: 31%;
  filter: grayscale(1);
  opacity: 15%;
}
.on-industry-3 {
  /* three quarter-arcs sharing one bottom-left anchor, largest at back */
}
.on-industry-3-arcs {
  position: absolute;
  left: 0;
  bottom: 118px;
  max-width: 899px;
  height: 455px;
  width: 100%;
}
.on-industry-3-arcs img {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
}
.on-industry-3-arcs .has-v1 {
  width: 384px;
  z-index: 3;
}
.on-industry-3-arcs .has-v2 {
  width: 608px;
  z-index: 2;
}
.on-industry-3-arcs .has-v3 {
  width: 899px;
  z-index: 1;
}
.on-industry-3-cart {
  position: absolute;
  right: 43%;
  top: 120px;
  z-index: 4;
  width: 296px;
}
.on-industry-3-cart img:nth-child(1) {
  border-radius: 16px;
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.12), inset 0px 0px 10px rgba(0, 0, 0, 0.16);
}
.on-industry-3-cart-line {
  position: absolute;
  left: 100%;
  bottom: 0;
  top: 40%;
}

@keyframes on-industry-3-badge-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}
/*
    industry-3-end
*/
/*
    cta-3-start
*/
.on-cta-3-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: 998px;
  display: flex;
  align-items: flex-end;
  padding-bottom: 100px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-cta-3-area {
    height: 820px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-cta-3-area {
    height: 680px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-cta-3-area {
    height: auto;
    padding: 260px 0 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-cta-3-area {
    display: block;
    height: auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-cta-3-area {
    padding: 200px 0 60px;
  }
}
@media (max-width: 767px) {
  .on-cta-3-area {
    padding: 150px 0 50px;
  }
}
.on-cta-3 {
  /* the office photo, tinted and faded to black where the copy sits */
}
.on-cta-3-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -3;
  height: 732px;
  background: linear-gradient(0deg, rgba(202, 210, 198, 0) 0%, rgba(202, 210, 198, 0.3) 34.62%, #CAD2C6 100%);
}
.on-cta-3-bg img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-cta-3-bg {
    height: 620px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-cta-3-bg {
    height: 520px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-cta-3-bg {
    height: 100% !important;
  }
}
.on-cta-3 {
  /* giant name run, sitting behind the photo on the plain black band */
}
.on-cta-3-marquee {
  position: absolute;
  left: 0;
  top: 130px;
  z-index: -2;
  width: 100%;
  pointer-events: none;
}
.on-cta-3-marquee .text-elm {
  font-family: var(--on-font-2);
  font-weight: 700;
  font-size: 200px;
  line-height: 1;
  color: #cad2c6;
  white-space: nowrap;
  margin: 0 40px 0 0;
  text-transform: uppercase;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-cta-3-marquee {
    top: 100px;
  }
  .on-cta-3-marquee .text-elm {
    font-size: 160px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-cta-3-marquee {
    top: 76px;
  }
  .on-cta-3-marquee .text-elm {
    font-size: 120px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-cta-3-marquee {
    top: 56px;
  }
  .on-cta-3-marquee .text-elm {
    font-size: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-cta-3-marquee {
    display: none;
  }
}
.on-cta-3-photo {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  text-align: center;
  width: 100%;
}
.on-cta-3-photo img {
  display: inline-block;
  width: 78%;
}
.on-cta-3-photo::after {
  content: "";
  width: 100%;
  position: absolute;
  height: 428px;
  background: linear-gradient(180deg, rgba(202, 210, 198, 0) 0%, #141C14 100%);
  bottom: 0;
  left: 0;
  z-index: 1;
}
.on-cta-3-sec-title {
  position: relative;
  z-index: 1;
  max-width: 660px;
}
.on-cta-3-sec-title .on-sec-title-3 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 36px;
}
.on-cta-3 {
  /* pill + angled offcut tab, pinned to the section's own corner */
}
.on-cta-3-contact {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
}
.on-cta-3-contact .box-elm {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 30px;
  background-color: #10ECB0;
}
.on-cta-3-contact .icon {
  flex: 0 0 auto;
  color: #000;
  font-size: 18px;
}
.on-cta-3-contact .icon i {
  margin-top: 5px;
}
.on-cta-3-contact .text-elm {
  font-family: var(--on-font-1);
  font-size: 18px;
  color: var(--on-clr-h-3);
  margin-bottom: 0;
  white-space: nowrap;
}
.on-cta-3-contact .text-elm .num-elm {
  font-weight: 600;
}
.on-cta-3-contact .tab-elm {
  flex: 0 0 60px;
  width: 60px;
  background-color: #097759;
  clip-path: polygon(0 0, 100% 100%, 0% 100%);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-cta-3-contact .box-elm {
    padding: 20px 24px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-cta-3-contact {
    position: static;
    margin-top: 40px;
  }
  .on-cta-3-contact .box-elm {
    padding: 18px 22px;
  }
  .on-cta-3-contact .text-elm {
    font-size: 15px;
    white-space: normal;
  }
  .on-cta-3-contact .tab-elm {
    display: none;
  }
}

/*
    cta-3-end
*/
/*
    choose-1-start
*/
.on-choose-1-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.on-choose-1 {
  /* the bento runs almost edge to edge — 16px of air either side at 1920 */
}
.on-choose-1-container {
  max-width: 1918px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}
.on-choose-1-sec-title {
  max-width: 762px;
  margin: 0 auto 40px;
  text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-choose-1-sec-title {
    margin-bottom: 34px;
  }
}
@media (max-width: 767px) {
  .on-choose-1-sec-title {
    margin-bottom: 28px;
  }
}
.on-choose-1 {
  /*
      two bands rather than one grid — the row boundaries in the design do not
      line up, so a shared column track would fight both
  */
}
.on-choose-1-row {
  display: grid;
  gap: 8px;
}
.on-choose-1-row:is(.has-v1) {
  grid-template-columns: 1fr 1fr;
}
.on-choose-1-row:is(.has-v2) {
  grid-template-columns: 700fr 472fr 700fr;
}
.on-choose-1-row + .on-choose-1-row {
  margin-top: 8px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-choose-1-row:is(.has-v2) {
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-choose-1-row:is(.has-v1) {
    grid-template-columns: 1fr;
  }
  .on-choose-1-row:is(.has-v2) {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 767px) {
  .on-choose-1-row:is(.has-v1), .on-choose-1-row:is(.has-v2) {
    grid-template-columns: 1fr;
  }
}
.on-choose-1 {
  /*
      card-01 — figure behind, gradient sweep over it, pills stepped in front
  */
}
.on-choose-1-card-1 {
  position: relative;
  z-index: 1;
  height: 620px;
  border-radius: 20px;
  overflow: hidden;
  background-color: #024748;
}
.on-choose-1-card-1 .bg-img {
  position: absolute;
  left: 150px;
  top: 0;
  z-index: -2;
  width: 790px;
  height: 100% !important;
  mix-blend-mode: luminosity;
  opacity: 72%;
}
.on-choose-1-card-1 .bg-img img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-choose-1-card-1 {
  /* washes the photo back into the plate so the pills stay readable */
}
.on-choose-1-card-1 .overlay-elm {
  position: absolute;
  left: 150px;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 540px;
  background: linear-gradient(to right, #024748 0%, #024748 40%, rgba(2, 71, 72, 0) 100%);
}
.on-choose-1-card-1 .circle-elm {
  position: absolute;
  left: 368px;
  top: -174px;
  z-index: -1;
  width: 974px;
  opacity: 0.72;
  pointer-events: none;
  /*
      wow turns it into place on scroll. It rests at 72%, so that is
      where the last keyframe has to land — fill-mode holds it there
  */
}
.on-choose-1-card-1 .circle-elm:is(.rotateIn3) {
  animation-name: on-choose-1-circle-in;
  animation-duration: 1200ms;
  animation-timing-function: cubic-bezier(0.62, 0.05, 0.01, 0.99);
  animation-fill-mode: both;
}
@media only screen and (min-width: 1600px) and (max-width: 1799px) {
  .on-choose-1-card-1 {
    height: 560px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-choose-1-card-1 {
    height: 520px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-choose-1-card-1 {
    height: 470px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-choose-1-card-1 {
    height: 520px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-choose-1-card-1 {
    height: 480px;
  }
}
@media (max-width: 767px) {
  .on-choose-1-card-1 {
    height: auto;
    padding: 40px 0;
  }
  .on-choose-1-card-1 .bg-img,
  .on-choose-1-card-1 .overlay-elm {
    left: 40%;
  }
}
.on-choose-1-feature {
  position: absolute;
  left: 48px;
  top: 85px;
  z-index: 2;
  width: 522px;
  max-width: calc(100% - 60px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.on-choose-1-feature-item {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 447px;
  max-width: 100%;
  padding: 22px;
  border-radius: 150px;
  background-color: #016c6e;
  /* the outer two step in, the middle one sits proud */
}
.on-choose-1-feature-item:is(.has-offset) {
  margin-left: 75px;
}
.on-choose-1-feature-item .icon-elm {
  flex: 0 0 auto;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #024748;
  color: var(--on-clr-pr-1);
  font-size: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.on-choose-1-feature-item .title-elm {
  font-family: var(--on-font-2);
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  color: #fff;
  margin-bottom: 8px;
}
.on-choose-1-feature-item .text-elm {
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #fff;
  margin-bottom: 0;
  opacity: 80%;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-choose-1-feature {
    top: 60px;
    gap: 18px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-choose-1-feature {
    left: 30px;
    top: 44px;
    gap: 14px;
  }
  .on-choose-1-feature-item {
    gap: 14px;
    padding: 16px;
  }
  .on-choose-1-feature-item:is(.has-offset) {
    margin-left: 46px;
  }
  .on-choose-1-feature-item .icon-elm {
    width: 70px;
    height: 70px;
    font-size: 32px;
  }
  .on-choose-1-feature-item .title-elm {
    font-size: 18px;
    margin-bottom: 4px;
  }
  .on-choose-1-feature-item .text-elm {
    font-size: 15px;
    line-height: 22px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .on-choose-1-feature {
    left: 30px;
    top: 50px;
    gap: 16px;
  }
  .on-choose-1-feature-item {
    gap: 14px;
    padding: 16px;
  }
  .on-choose-1-feature-item:is(.has-offset) {
    margin-left: 40px;
  }
  .on-choose-1-feature-item .icon-elm {
    width: 70px;
    height: 70px;
    font-size: 32px;
  }
  .on-choose-1-feature-item .title-elm {
    font-size: 18px;
    margin-bottom: 4px;
  }
  .on-choose-1-feature-item .text-elm {
    font-size: 15px;
    line-height: 22px;
  }
}
@media (max-width: 767px) {
  .on-choose-1-feature {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    gap: 14px;
  }
  .on-choose-1-feature-item {
    width: 100%;
    gap: 12px;
    padding: 14px;
  }
  .on-choose-1-feature-item:is(.has-offset) {
    margin-left: 0;
  }
  .on-choose-1-feature-item .icon-elm {
    width: 60px;
    height: 60px;
    font-size: 28px;
  }
  .on-choose-1-feature-item .title-elm {
    font-size: 17px;
    margin-bottom: 4px;
  }
  .on-choose-1-feature-item .text-elm {
    font-size: 14px;
    line-height: 21px;
  }
}
.on-choose-1 {
  /*
      card-02 — the chart is one exported plate, labels and tooltip included
  */
}
.on-choose-1-card-2 {
  height: 620px;
  border-radius: 20px;
  background-color: #ebf0f0;
  padding: 40px;
  display: flex;
  flex-direction: column;
}
.on-choose-1-card-2 .title-elm {
  font-family: var(--on-font-2);
  font-size: 40px;
  font-weight: 500;
  line-height: 44px;
  color: var(--on-clr-h-1);
  margin-bottom: 20px;
}
.on-choose-1-card-2 .text-elm {
  font-family: var(--on-font-1);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: #525d5d;
  max-width: 736px;
  margin-bottom: 31px;
}
.on-choose-1-card-2 .graph-elm {
  flex: 1;
  min-height: 0;
  border-radius: 12px;
  background-color: #fff;
  overflow: hidden;
}
.on-choose-1-card-2 .graph-elm img {
  width: 100%;
  height: 100% !important;
  object-fit: contain;
  object-position: left top;
}
@media only screen and (min-width: 1600px) and (max-width: 1799px) {
  .on-choose-1-card-2 {
    height: 560px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-choose-1-card-2 {
    height: 520px;
    padding: 32px;
  }
  .on-choose-1-card-2 .title-elm {
    font-size: 34px;
    line-height: 40px;
  }
  .on-choose-1-card-2 .text-elm {
    margin-bottom: 24px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-choose-1-card-2 {
    height: 470px;
    padding: 28px;
  }
  .on-choose-1-card-2 .title-elm {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 14px;
  }
  .on-choose-1-card-2 .text-elm {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-choose-1-card-2 {
    height: 520px;
    padding: 28px;
  }
  .on-choose-1-card-2 .title-elm {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 14px;
  }
  .on-choose-1-card-2 .text-elm {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-choose-1-card-2 {
    height: auto;
    padding: 28px;
  }
  .on-choose-1-card-2 .title-elm {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 14px;
  }
  .on-choose-1-card-2 .text-elm {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 20px;
  }
  .on-choose-1-card-2 .graph-elm {
    flex: none;
  }
}
@media (max-width: 767px) {
  .on-choose-1-card-2 {
    height: auto;
    padding: 24px 20px;
    border-radius: 16px;
  }
  .on-choose-1-card-2 .title-elm {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 12px;
  }
  .on-choose-1-card-2 .text-elm {
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 18px;
  }
  .on-choose-1-card-2 .graph-elm {
    flex: none;
  }
}
.on-choose-1 {
  /*
      card-03 — the dotted map is flat art, so the markers are placed over it
  */
}
.on-choose-1-card-3 {
  position: relative;
  z-index: 1;
  height: 428px;
  border-radius: 12px;
  overflow: hidden;
  background-color: #e8ecc8;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.on-choose-1-card-3 .map-elm {
  position: absolute;
  left: 248px;
  top: 52px;
  z-index: -1;
  width: 452px;
}
.on-choose-1-card-3 .map-elm img {
  width: 100%;
  height: auto;
}
.on-choose-1-card-3 .map-elm {
  /*
      the pins keep dropping onto the map. Each runs the same cycle on
      its own clock — the durations share no common factor, so the five
      never fall back into step and the pattern reads as random
  */
}
.on-choose-1-card-3 .map-elm i {
  position: absolute;
  font-size: 32px;
  line-height: 1;
  color: var(--on-clr-h-1);
  /* the tip is what sits on the map, so it scales from there */
  transform-origin: bottom center;
  animation: on-choose-1-pin-drop 4.6s ease-in-out infinite;
}
.on-choose-1-card-3 .map-elm i:nth-of-type(1) {
  left: 15%;
  top: 11.3%;
  animation-duration: 4.3s;
  animation-delay: 0s;
}
.on-choose-1-card-3 .map-elm i:nth-of-type(2) {
  left: 37.2%;
  top: 27.6%;
  animation-duration: 5.1s;
  animation-delay: 0.9s;
}
.on-choose-1-card-3 .map-elm i:nth-of-type(3) {
  left: 92.9%;
  top: 8.7%;
  animation-duration: 3.7s;
  animation-delay: 1.8s;
}
.on-choose-1-card-3 .map-elm i:nth-of-type(4) {
  left: 66.2%;
  top: 0;
  animation-duration: 4.9s;
  animation-delay: 2.5s;
}
.on-choose-1-card-3 .map-elm i:nth-of-type(5) {
  left: 56.4%;
  top: 63.7%;
  animation-duration: 5.8s;
  animation-delay: 0.4s;
}
.on-choose-1-card-3 .label-elm {
  font-family: var(--on-font-1);
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  color: var(--on-clr-h-1);
  margin: 18px 0 0;
}
.on-choose-1-card-3 .text-elm {
  font-family: var(--on-font-1);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: #525d5d;
  max-width: 392px;
  margin-bottom: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-choose-1-card-3 {
    height: 400px;
    padding: 40px 32px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-choose-1-card-3 {
    height: 380px;
    padding: 32px 28px;
  }
  .on-choose-1-card-3 .map-elm {
    left: 45%;
    width: 60%;
  }
  .on-choose-1-card-3 .text-elm {
    font-size: 16px;
    line-height: 26px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .on-choose-1-card-3 {
    height: 400px;
    padding: 32px 28px;
  }
  .on-choose-1-card-3 .map-elm {
    left: 45%;
    width: 60%;
  }
  .on-choose-1-card-3 .text-elm {
    font-size: 16px;
    line-height: 26px;
  }
}
@media (max-width: 767px) {
  .on-choose-1-card-3 {
    height: auto;
    padding: 24px 20px;
  }
  .on-choose-1-card-3 .map-elm {
    left: 40%;
    top: 30px;
    width: 65%;
  }
  .on-choose-1-card-3 .map-elm i {
    font-size: 22px;
  }
  .on-choose-1-card-3 .label-elm {
    font-size: 18px;
    margin-top: 12px;
  }
  .on-choose-1-card-3 .text-elm {
    font-size: 15px;
    line-height: 24px;
    margin-top: 90px;
  }
}
.on-choose-1 {
  /*
      card-04
  */
}
.on-choose-1-card-4 {
  position: relative;
  z-index: 1;
  height: 428px;
  border-radius: 12px;
  overflow: hidden;
  background-color: #024748;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* drained to luminosity so the plate colour still governs */
}
.on-choose-1-card-4 .bg-img {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  mix-blend-mode: luminosity;
}
.on-choose-1-card-4 .bg-img img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-choose-1-card-4 .head-elm {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.on-choose-1-card-4 .title-elm {
  font-family: var(--on-font-2);
  font-size: 26px;
  font-weight: 500;
  line-height: 32px;
  color: #fff;
  margin-bottom: 0;
}
.on-choose-1-card-4 .rating-elm {
  flex: 0 0 auto;
  text-align: right;
}
.on-choose-1-card-4 .star-elm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 22px;
  background-color: var(--on-clr-pr-1);
  color: var(--on-clr-h-1);
  font-size: 12px;
  line-height: 1;
  margin-bottom: 12px;
}
.on-choose-1-card-4 {
  /* the pip-and-rule that opens the closing line */
}
.on-choose-1-card-4 .line-elm {
  position: relative;
  display: block;
  height: 11px;
  margin-bottom: 12px;
}
.on-choose-1-card-4 .line-elm::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: #45fc91;
}
.on-choose-1-card-4 .line-elm::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 5px;
  width: 281px;
  max-width: calc(100% - 6px);
  height: 1px;
  background: linear-gradient(to right, #45fc91 0%, rgba(69, 252, 145, 0) 100%);
}
.on-choose-1-card-4 .text-elm {
  font-family: var(--on-font-1);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-choose-1-card-4 {
    height: 400px;
    padding: 32px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-choose-1-card-4 {
    height: 380px;
    padding: 28px;
  }
  .on-choose-1-card-4 .title-elm {
    font-size: 22px;
    line-height: 28px;
  }
  .on-choose-1-card-4 .text-elm {
    font-size: 16px;
    line-height: 26px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .on-choose-1-card-4 {
    height: 400px;
    padding: 28px;
  }
  .on-choose-1-card-4 .title-elm {
    font-size: 22px;
    line-height: 28px;
  }
  .on-choose-1-card-4 .text-elm {
    font-size: 16px;
    line-height: 26px;
  }
}
@media (max-width: 767px) {
  .on-choose-1-card-4 {
    height: auto;
    padding: 24px 20px;
    gap: 40px;
  }
  .on-choose-1-card-4 .title-elm {
    font-size: 20px;
    line-height: 26px;
  }
  .on-choose-1-card-4 .text-elm {
    font-size: 15px;
    line-height: 24px;
  }
}
.on-choose-1 {
  /*
      card-05 — two plates stacked inside one bento cell
  */
}
.on-choose-1-card-5 {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  height: 428px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-choose-1-card-5 {
    height: 400px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-choose-1-card-5 {
    height: 380px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .on-choose-1-card-5 {
    height: 400px;
    grid-column: 1/-1;
  }
}
@media (max-width: 767px) {
  .on-choose-1-card-5 {
    height: auto;
    grid-template-rows: auto auto;
  }
}
.on-choose-1-count-card {
  border: 3px solid #ccd8d8;
  border-radius: 12px;
  background-color: #fff;
  padding: 33px 37px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.on-choose-1-count-card .text-elm {
  font-family: var(--on-font-1);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: #525d5d;
  margin: 39px 0 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .on-choose-1-count-card {
    padding: 24px 26px;
  }
  .on-choose-1-count-card .text-elm {
    font-size: 16px;
    line-height: 26px;
    margin-top: 22px;
  }
}
@media (max-width: 767px) {
  .on-choose-1-count-card {
    padding: 20px;
  }
  .on-choose-1-count-card .text-elm {
    font-size: 15px;
    line-height: 24px;
    margin-top: 16px;
  }
}
.on-choose-1 {
  /* the office frame is flush to the plate edge and drained of colour */
}
.on-choose-1-team-card {
  position: relative;
  z-index: 1;
  border: 3px solid #ccd8d8;
  border-radius: 12px;
  background-color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 24px;
}
.on-choose-1-team-card .img-elm {
  width: 234px;
  border-radius: 9px 0 0 9px;
  overflow: hidden;
  mix-blend-mode: luminosity;
  position: absolute;
  top: 0;
  left: 0;
  height: 100% !important;
  z-index: -1;
}
.on-choose-1-team-card .img-elm img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-choose-1-team-card .wrap-elm {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-right: 37px;
  padding-left: 98px;
}
@media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-choose-1-team-card .wrap-elm {
    padding-right: 20px;
    padding-left: 20px;
  }
}
.on-choose-1-team-card .author-elm {
  display: flex;
  align-items: center;
}
.on-choose-1-team-card .author-elm img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #fff;
  object-fit: cover;
}
.on-choose-1-team-card .author-elm img + img {
  margin-left: -25px;
}
.on-choose-1-team-card .count-wrap {
  flex: 0 0 auto;
  text-align: right;
}
.on-choose-1-team-card .label-elm {
  font-family: var(--on-font-1);
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  color: var(--on-clr-h-1);
  margin: 28px 0 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-choose-1-team-card {
    gap: 16px;
  }
  .on-choose-1-team-card .img-elm {
    width: 190px;
  }
  .on-choose-1-team-card .author-elm img {
    width: 64px;
    height: 64px;
  }
  .on-choose-1-team-card .author-elm img + img {
    margin-left: -20px;
  }
  .on-choose-1-team-card .wrap-elm {
    padding-right: 26px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .on-choose-1-team-card {
    gap: 14px;
  }
  .on-choose-1-team-card .img-elm {
    width: 150px;
  }
  .on-choose-1-team-card .author-elm img {
    width: 52px;
    height: 52px;
    border-width: 2px;
  }
  .on-choose-1-team-card .author-elm img + img {
    margin-left: -16px;
  }
  .on-choose-1-team-card .wrap-elm {
    padding-right: 22px;
  }
  .on-choose-1-team-card .label-elm {
    font-size: 17px;
    line-height: 22px;
    margin-top: 16px;
  }
}
@media (max-width: 767px) {
  .on-choose-1-team-card {
    display: block;
  }
  .on-choose-1-team-card .img-elm {
    width: 100%;
    height: 160px;
    border-radius: 9px 9px 0 0;
  }
  .on-choose-1-team-card .wrap-elm {
    padding: 20px;
  }
  .on-choose-1-team-card .author-elm img {
    width: 46px;
    height: 46px;
    border-width: 2px;
  }
  .on-choose-1-team-card .author-elm img + img {
    margin-left: -14px;
  }
  .on-choose-1-team-card .label-elm {
    font-size: 16px;
    line-height: 22px;
    margin-top: 12px;
  }
}
.on-choose-1 {
  /*
      the big figures — the trailing unit is set smaller and raised, and on
      most of them it drops to the pale grey the design uses
  */
}
.on-choose-1-count {
  font-family: var(--on-font-2);
  font-size: 80px;
  font-weight: 500;
  line-height: 52px;
  letter-spacing: -0.01em;
  color: var(--on-clr-h-1);
  margin-bottom: 0;
  display: block;
}
.on-choose-1-count .unit-elm {
  color: #ccd8d8;
}
.on-choose-1-count {
  /* card-03 keeps its unit in the same ink as the figure */
}
.on-choose-1-count .unit-elm:is(.has-v2) {
  color: inherit;
}
.on-choose-1-count:is(.has-v2) {
  font-size: 48px;
  line-height: 52px;
  color: #fff;
}
.on-choose-1-count:is(.has-v2) .unit-elm {
  color: rgba(255, 255, 255, 0.5);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-choose-1-count {
    font-size: 68px;
    line-height: 46px;
  }
  .on-choose-1-count:is(.has-v2) {
    font-size: 44px;
    line-height: 46px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .on-choose-1-count {
    font-size: 54px;
    line-height: 40px;
  }
  .on-choose-1-count:is(.has-v2) {
    font-size: 38px;
    line-height: 40px;
  }
}
@media (max-width: 767px) {
  .on-choose-1-count {
    font-size: 46px;
    line-height: 36px;
  }
  .on-choose-1-count:is(.has-v2) {
    font-size: 34px;
    line-height: 36px;
  }
}
.on-choose-1 {
  /* the 32+ plate sets its figure beside the label rather than above it */
}
.on-choose-1-count-row {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}
.on-choose-1-count-row .label-elm {
  font-family: var(--on-font-1);
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  color: var(--on-clr-h-1);
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .on-choose-1-count-row {
    gap: 12px;
  }
  .on-choose-1-count-row .label-elm {
    font-size: 17px;
    line-height: 22px;
  }
}
@media (max-width: 767px) {
  .on-choose-1-count-row {
    gap: 10px;
  }
  .on-choose-1-count-row .label-elm {
    font-size: 16px;
    line-height: 21px;
  }
}

@keyframes on-choose-1-circle-in {
  0% {
    opacity: 0;
    transform: rotate(-135deg) scale(0.92);
  }
  100% {
    opacity: 0.72;
    transform: rotate(0) scale(1);
  }
}
/* drops in, holds while it is read, then lifts back off the map */
@keyframes on-choose-1-pin-drop {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.4);
  }
  12% {
    opacity: 1;
    transform: translateY(0) scale(1.12);
  }
  20% {
    transform: translateY(0) scale(1);
  }
  68% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  82%, 100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.5);
  }
}
/*
    choose-1-end
*/
/*
    choose-2-start
*/
.on-choose-2-area {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 12px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-choose-2-area {
    flex-direction: column;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-choose-2-area {
    flex-direction: column;
  }
}
.on-choose-2-left {
  position: relative;
  z-index: 1;
  flex: 0 0 54.6%;
  overflow: hidden;
  background-color: #e5ebff;
  padding: 130px 88px 130px 260px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-choose-2-left {
    padding: 110px 60px 110px 160px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-choose-2-left {
    padding: 90px 40px 90px 110px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-choose-2-left {
    padding: 80px 40px 80px 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-choose-2-left {
    flex-basis: auto;
    padding: 60px 24px;
  }
}
.on-choose-2 {
  /* the line bleeds edge to edge across the panel, ignoring its padding */
}
.on-choose-2-divider {
  position: absolute;
  left: 0;
  right: 0;
  top: 43.5%;
  height: 1px;
  background-color: var(--on-clr-pr-2);
  width: 90%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-choose-2-divider {
    display: none;
  }
}
.on-choose-2-divider .dot-elm {
  position: absolute;
  right: 0px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.on-choose-2-divider .dot-elm::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background-color: var(--on-clr-pr-2);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-choose-2-divider {
    display: none;
  }
}
.on-choose-2-sec-title {
  position: relative;
  z-index: 1;
  max-width: 684px;
}
.on-choose-2-sec-title .on-p-2 {
  margin-top: 16px;
}
.on-choose-2-features {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 320px));
  gap: 40px 60px;
  margin-top: 72px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-choose-2-features {
    margin-top: 44px;
  }
}
@media (max-width: 767px) {
  .on-choose-2-features {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.on-choose-2-feature .icon-elm {
  display: block;
  width: 60px;
  height: 60px;
  margin-bottom: 24px;
  transition: var(--on-cube-1);
}
.on-choose-2-feature .icon-elm svg {
  width: 100%;
  height: 100% !important;
}
.on-choose-2-feature .title-elm {
  font-size: 23px;
  color: #212527;
  margin-bottom: 12px;
}
.on-choose-2-feature .text-elm {
  font-size: 16px;
}
.on-choose-2-feature:hover .icon-elm {
  transform: translateY(-6px) rotate(-6deg);
}
.on-choose-2-right {
  flex: 1;
  min-width: 0;
}
.on-choose-2-slider-btn {
  width: 44px;
  height: 44px;
  background-color: #E5EBFF;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--on-clr-pr-2);
  z-index: 1;
  transition: var(--on-cube-1);
  cursor: pointer;
}
.on-choose-2-slider-btn:hover {
  background-color: var(--on-clr-pr-2);
  color: #fff;
}
.on-choose-2-slider-btn:is(.has-left) {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
}
.on-choose-2-slider-btn:is(.has-right) {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
}
.on-choose-2-bottom {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 767px) {
  .on-choose-2-bottom {
    flex-direction: column;
  }
}
.on-choose-2-list-card {
  position: relative;
  z-index: 1;
  flex: 0 0 48.8%;
  overflow: hidden;
  background-color: var(--on-clr-pr-2);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.on-choose-2-list-card .bg-img {
  position: absolute;
  inset: 0;
  z-index: -1;
  mix-blend-mode: luminosity;
}
.on-choose-2-list-card .bg-img img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-choose-2-list-card ul {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}
.on-choose-2-list-card li {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--on-font-1);
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}
.on-choose-2-list-card li::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #f6ba1d;
}
.on-choose-2-list-card li + li {
  margin-top: 14px;
}
.on-choose-2-list-card .on-pr-btn-3 {
  width: 100%;
  justify-content: center;
  /* the wipe layer reads this too, so it blends with the white
     rest state instead of covering it in the component's blue */
  --on-btn-bg: #fff;
  color: var(--on-clr-pr-2);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-choose-2-list-card {
    padding: 26px 24px;
  }
  .on-choose-2-list-card ul {
    margin-bottom: 28px;
  }
}
@media (max-width: 767px) {
  .on-choose-2-list-card {
    flex-basis: auto;
  }
}
.on-choose-2-photo-card {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 260px;
  overflow: hidden;
}
.on-choose-2-photo-card img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.on-choose-2-photo-card .contact-elm {
  position: absolute;
  right: 32px;
  bottom: 32px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.on-choose-2-photo-card .contact-elm .icon-elm {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 16px;
  border-radius: 50%;
}
.on-choose-2-photo-card .contact-elm p {
  font-family: var(--on-font-1);
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0;
}
.on-choose-2-photo-card .contact-elm p a {
  display: inline-block;
  color: #fff;
  font-weight: 600;
  transition: var(--on-cube-1);
}
.on-choose-2-photo-card .contact-elm p a:hover {
  color: var(--on-clr-pr-2);
}

/*
    choose-2-end
*/
/*
    choose-3-start
*/
.on-choose-3-sec-title {
  max-width: 781px;
  margin-bottom: 50px;
}
.on-choose-3 {
  /*
      two bands rather than one grid — the row boundaries in the design do
      not line up, so a shared column track would fight both, see choose-1
  */
}
.on-choose-3-top {
  display: grid;
  grid-template-columns: 1.32fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (min-width: 1800px) {
  .on-choose-3-top {
    margin-right: -180px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-choose-3-top {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.on-choose-3-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.on-choose-3-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 767px) {
  .on-choose-3-cards-row {
    grid-template-columns: 1fr;
  }
}
.on-choose-3 {
  /* the big top-right photo — stretches to match the left column's
     height for free, since grid items stretch by default */
}
.on-choose-3-photo {
  border-radius: 16px;
  overflow: hidden;
}
.on-choose-3-photo img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-choose-3-photo {
    height: 340px;
  }
}
.on-choose-3-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1343px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-choose-3-bottom {
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-choose-3-bottom {
    grid-template-columns: 1fr;
  }
}
.on-choose-3-content {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: start;
}
.on-choose-3-content .on-p-3 {
  max-width: 386px;
}
.on-choose-3-photo-sm {
  min-height: 300px;
  border-radius: 16px;
  overflow: hidden;
}
.on-choose-3-photo-sm img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-choose-3-photo-sm {
    height: 340px;
    min-height: 0;
  }
}
.on-choose-3-card {
  border-radius: 12px;
  padding: 40px;
  display: flex;
  flex-direction: column;
}
.on-choose-3-card:is(.has-v1) {
  background-color: #E2E8FF;
}
.on-choose-3-card:is(.has-v2) {
  background-color: #F4F7F3;
}
.on-choose-3-card:is(.has-v3) {
  background-color: #E0ECE5;
}
.on-choose-3-card .title-elm {
  font-size: 24px;
  margin-bottom: 24px;
}
.on-choose-3-card .wrap-elm {
  display: flex;
  align-items: end;
  gap: 20px;
}
.on-choose-3-card .img-elm {
  flex: 0 0 120px;
  width: 120px;
  height: 246px;
  border-radius: 10px;
  overflow: hidden;
}
.on-choose-3-card .img-elm img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-choose-3-card .body-elm {
  flex: 1;
  min-width: 0;
}
.on-choose-3-card .icon-elm {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0CB351;
  font-size: 50px;
  margin-bottom: 16px;
  transition: var(--on-cube-1);
}
.on-choose-3-card .text-elm {
  margin-bottom: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-choose-3-card {
    padding: 28px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-choose-3-card {
    padding: 24px;
  }
  .on-choose-3-card .img-elm {
    height: 200px;
  }
}
.on-choose-3-card:hover .icon-elm {
  transform: translateY(-6px) rotate(-6deg);
}

/*
    choose-3-end
*/
/*
    projects-1-start
*/
.on-projects-1-area {
  position: relative;
  z-index: 1;
}
.on-projects-1 {
  /*
      top
  */
}
.on-projects-1-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-projects-1-top {
    margin-bottom: 44px;
  }
}
@media (max-width: 767px) {
  .on-projects-1-top {
    display: block;
    margin-bottom: 34px;
  }
}
.on-projects-1-sec-title {
  max-width: 708px;
}
.on-projects-1-sec-title .on-sec-title-1 {
  margin-bottom: 16px;
}
.on-projects-1-sec-title .text-elm {
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .on-projects-1-sec-title {
    max-width: 100%;
  }
}
.on-projects-1 {
  /* the badge sits off the headline baseline, not the top of the band */
}
.on-projects-1-author {
  flex: 0 0 auto;
  max-width: 275px;
}
.on-projects-1-author .img-elm {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.on-projects-1-author .img-elm img,
.on-projects-1-author .img-elm .count-elm {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #f0f7f3;
  object-fit: cover;
}
.on-projects-1-author .img-elm img + *,
.on-projects-1-author .img-elm .count-elm + * {
  margin-left: -16px;
}
.on-projects-1-author .img-elm .count-elm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--on-clr-h-1);
  font-family: var(--on-font-2);
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}
.on-projects-1-author .img-elm .count-elm span {
  color: var(--on-clr-pr-1);
}
.on-projects-1-author .title-elm {
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 4px;
}
.on-projects-1-author .text-elm {
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: #525d5d;
  margin-bottom: 0;
}
.on-projects-1-author .text-elm span {
  color: #016c6e;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .on-projects-1-author {
    margin-top: 40px;
  }
}
@media (max-width: 767px) {
  .on-projects-1-author {
    width: 100%;
    margin-top: 28px;
  }
}
.on-projects-1 {
  /*
      main — the wrap holds still while the runway under it scrolls past,
      which is what lets each card climb over the one before it
  */
  /* one viewport of scroll per card — the count is read off the markup in js */
}
.on-projects-1-runway {
  height: calc(var(--on-projects-1-count, 5) * 100vh);
  position: relative;
  z-index: 1;
  /* the effect is off down here, so the runway must not reserve height */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-1-runway {
    height: auto;
  }
}
.on-projects-1-pin {
  position: sticky;
  top: 100px;
  overflow: hidden;
  /* the runway has collapsed, so there is nothing left to hold against */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-1-pin {
    position: static;
    overflow: visible;
  }
}
.on-projects-1-wrap {
  display: flex;
  align-items: stretch;
  gap: 53px;
  overflow: hidden;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-projects-1-wrap {
    gap: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-projects-1-wrap {
    gap: 32px;
  }
}
.on-projects-1-wrap {
  /* no runway left to travel, so it goes back to ordinary flow */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-1-wrap {
    position: static;
    display: block;
  }
}
.on-projects-1-left {
  flex: 0 0 250px;
  width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  align-items: start;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-projects-1-left {
    flex-basis: 220px;
    width: 220px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-projects-1-left {
    flex-basis: 200px;
    width: 200px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-1-left {
    width: 100%;
    margin-bottom: 32px;
  }
}
.on-projects-1 {
  /* one rail with a lime run marking whichever case study is open */
}
.on-projects-1-tab-wrap {
  display: flex;
  gap: 20px;
}
.on-projects-1-tab-wrap .line-elm {
  position: relative;
  flex: 0 0 auto;
  width: 3px;
  border-radius: 3px;
  background-color: #dbe6e2;
}
.on-projects-1-tab-wrap .thumb-elm {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 28px;
  border-radius: 3px;
  background-color: var(--on-clr-pr-1);
  transition: top 0.35s ease;
}
.on-projects-1-tab-wrap {
  /* the rail follows the open tab without any script of its own */
}
.on-projects-1-tab-wrap:has(.on-projects-1-tab-item:nth-child(1).active) .thumb-elm {
  top: 0;
}
.on-projects-1-tab-wrap:has(.on-projects-1-tab-item:nth-child(2).active) .thumb-elm {
  top: 48px;
}
.on-projects-1-tab-wrap:has(.on-projects-1-tab-item:nth-child(3).active) .thumb-elm {
  top: 96px;
}
.on-projects-1-tab-wrap:has(.on-projects-1-tab-item:nth-child(4).active) .thumb-elm {
  top: 144px;
}
.on-projects-1-tab-wrap:has(.on-projects-1-tab-item:nth-child(5).active) .thumb-elm {
  top: 192px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-1-tab-wrap .line-elm {
    display: none;
  }
}
.on-projects-1-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-1-tab {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 20px;
  }
}
.on-projects-1-tab-item {
  padding: 0;
  background: transparent;
  text-align: left;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  opacity: 0.55;
  transition: var(--on-cube-1);
}
.on-projects-1-tab-item:is(.active) {
  font-weight: 600;
  opacity: 1;
}
.on-projects-1-tab-item:hover {
  opacity: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-projects-1-tab-item {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-1-tab-item {
    font-size: 17px;
  }
}
.on-projects-1 {
  /*
      card — every card shares one box, stacked back to front; the script
      lifts each one into it in turn
  */
}
.on-projects-1-stack {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 644px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-projects-1-stack {
    height: 580px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-projects-1-stack {
    height: 520px;
  }
}
.on-projects-1-stack {
  /* unstacked into a plain list once the effect is off */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-1-stack {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
}
.on-projects-1-card-item {
  position: absolute;
  inset: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-1-card-item {
    position: relative;
    inset: auto;
  }
}
.on-projects-1-card {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100% !important;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--on-clr-h-1);
  /* the faint mark the design floats behind the panel */
}
.on-projects-1-card .shape-elm {
  position: absolute;
  left: 48%;
  top: 36.5%;
  z-index: -1;
  width: 186px;
  pointer-events: none;
}
.on-projects-1-card .img-elm {
  flex: 0 0 59.35%;
  border-radius: 16px;
  overflow: hidden;
}
.on-projects-1-card .img-elm img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-projects-1-card .body-elm {
  flex: 1;
  min-width: 0;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-projects-1-card .body-elm {
    padding: 32px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-projects-1-card .img-elm {
    flex-basis: 52%;
  }
  .on-projects-1-card .body-elm {
    padding: 26px;
    gap: 22px;
  }
}
.on-projects-1-card {
  /* the panel needs the full width once the columns give out */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-1-card {
    display: block;
    height: auto;
  }
  .on-projects-1-card .img-elm {
    width: 100%;
    height: 320px;
  }
  .on-projects-1-card .body-elm {
    padding: 28px;
    gap: 26px;
  }
}
@media (max-width: 767px) {
  .on-projects-1-card .img-elm {
    height: 240px;
  }
  .on-projects-1-card .body-elm {
    padding: 22px 20px;
    gap: 22px;
  }
}
.on-projects-1-card-head .title-elm {
  font-size: 30px;
  line-height: 36px;
  color: #fff;
  margin-bottom: 12px;
}
.on-projects-1-card-head .title-elm:hover {
  color: var(--on-clr-pr-1);
}
.on-projects-1-card-head .text-elm {
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 24px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-projects-1-card-head .title-elm {
    font-size: 24px;
    line-height: 32px;
  }
  .on-projects-1-card-head .text-elm {
    margin-bottom: 18px;
  }
}
@media (max-width: 767px) {
  .on-projects-1-card-head .title-elm {
    font-size: 22px;
    line-height: 30px;
  }
  .on-projects-1-card-head .text-elm {
    font-size: 15px;
    margin-bottom: 16px;
  }
}
.on-projects-1-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.on-projects-1-tag li {
  font-family: var(--on-font-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #fff;
  padding: 5px 16px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.12);
}
.on-projects-1-meta {
  margin-bottom: 24px;
}
.on-projects-1-meta li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  color: #fff;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.on-projects-1-meta li + li {
  margin-top: 16px;
}
.on-projects-1-meta li .label-elm {
  opacity: 0.8;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-projects-1-meta {
    margin-bottom: 18px;
  }
  .on-projects-1-meta li {
    font-size: 15px;
    padding-bottom: 10px;
  }
  .on-projects-1-meta li + li {
    margin-top: 12px;
  }
}
@media (max-width: 767px) {
  .on-projects-1-meta li {
    font-size: 15px;
    gap: 10px;
  }
}
.on-projects-1-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--on-font-2);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  padding: 14px 20px;
  border-radius: 8px;
  background-color: #016c6e;
  transition: var(--on-cube-1);
}
.on-projects-1-card-btn:hover {
  background-color: var(--on-clr-pr-1);
  color: var(--on-clr-h-1);
}

/*
    projects-1-end
*/
/*
    projects-2-start
*/
.on-projects-2-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #fff;
}
.on-projects-2 {
  /* the dot grid is rotated 180° and sits faintly behind the content */
}
.on-projects-2-pattern {
  position: absolute;
  left: 0%;
  top: 0%;
  z-index: -1;
  width: 100%;
  text-align: center;
  pointer-events: none;
}
.on-projects-2-pattern img {
  width: 100%;
  height: auto;
}
.on-projects-2-wrap {
  position: relative;
  z-index: 1;
}
.on-projects-2 {
  /*
      section-title
  */
}
.on-projects-2-sec-title {
  text-align: center;
  margin-bottom: 60px;
}
.on-projects-2-title {
  font-family: var(--on-font-2);
  font-size: 80px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -2px;
  color: var(--on-clr-h-2);
  margin-bottom: 0;
  text-transform: uppercase;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.on-projects-2-title .line-1 {
  display: block;
  text-align: right;
}
.on-projects-2-title .line-2 {
  display: block;
  text-align: left;
}
.on-projects-2-title .highlight {
  color: var(--on-clr-pr-2);
}
.on-projects-2-title .has-opacity {
  color: #878791;
  display: inline;
}
.on-projects-2 {
  /*
      author-x-counter
  */
}
.on-projects-2-mid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 50px;
  margin-bottom: 60px;
  max-width: 1150px;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
}
.on-projects-2-counter {
  flex: 0 0 360px;
}
.on-projects-2-counter .counter-top {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}
.on-projects-2-counter .number-elm {
  font-family: var(--on-font-2);
  font-size: 72px;
  font-weight: 500;
  line-height: 64px;
  letter-spacing: -3px;
  color: var(--on-clr-h-2);
  margin-bottom: 0;
}
.on-projects-2-counter .plus-elm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 41px;
  border-radius: 50%;
  border: 2px solid #fff;
  background-color: #366177;
  font-family: var(--on-font-2);
  font-size: 35px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -2px;
  color: #fff;
  margin-left: -10px;
}
.on-projects-2-counter .text-elm {
  font-size: 20px;
  line-height: 24px;
  color: var(--on-clr-p-2);
  opacity: 0.64;
  margin-bottom: 20px;
}
.on-projects-2-counter .author-elm {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.on-projects-2-counter .author-elm img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
}
.on-projects-2-counter .author-elm img + img {
  margin-left: -16px;
}
.on-projects-2-counter .rating-elm {
  display: flex;
  align-items: center;
  gap: 12px;
}
.on-projects-2-counter .rating-elm .score {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--on-clr-p-2);
}
.on-projects-2-counter .rating-elm .star {
  display: flex;
  gap: 2px;
  line-height: 0;
}
.on-projects-2-text {
  flex: 0 0 499px;
}
.on-projects-2-text p {
  margin-bottom: 14px;
}
.on-projects-2-text p:last-of-type {
  margin-bottom: 32px;
}
.on-projects-2-text .on-pr-btn-3 {
  border: 2px solid rgba(5, 5, 25, 0.16);
  /* the wipe layer reads this too, so it stays invisible against
     the outline instead of covering it in the component's blue */
  --on-btn-bg: transparent;
  color: var(--on-clr-pr-2);
}
.on-projects-2 {
  /*
      divider
  */
}
.on-projects-2-line {
  height: 1px;
  background-color: #d9d9d9;
  margin-bottom: 60px;
}
.on-projects-2 {
  /*
      swiper
  */
}
.on-projects-2-slider {
  position: relative;
  z-index: 1;
}
.on-projects-2-swiper {
  overflow: visible;
}
.on-projects-2-swiper .swiper-slide {
  position: relative;
  width: 1192px;
  height: 640px;
  border-radius: 24px;
  overflow: hidden;
}
.on-projects-2-slide-img {
  position: absolute;
  inset: 0;
}
.on-projects-2-slide-img img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-projects-2 {
  /*
      overlay card — only the active slide shows it
  */
}
.on-projects-2-card {
  position: absolute;
  top: 40px;
  right: 40px;
  z-index: 2;
  width: 456px;
  padding: 10px;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid #fff;
  backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.swiper-slide-active .on-projects-2-card {
  opacity: 1;
  visibility: visible;
}
.on-projects-2-card-inner {
  padding: 34px 28px 28px;
  border-radius: 12px;
  background-color: #fff;
  border: 1px solid var(--on-clr-pr-2);
}
.on-projects-2-card-inner .on-pr-btn-3 {
  width: 100%;
  justify-content: center;
}
.on-projects-2-card-top {
  margin-bottom: 70px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-2-card-top {
    margin-bottom: 30px;
  }
}
.on-projects-2-card-top .title-elm {
  font-family: var(--on-font-2);
  font-size: 30px;
  font-weight: 600;
  line-height: 36px;
  color: var(--on-clr-h-2);
  margin-bottom: 12px;
}
.on-projects-2-card-top .text-elm {
  font-size: 16px;
  line-height: 24px;
  color: var(--on-clr-p-2);
  margin-bottom: 24px;
}
.on-projects-2-card-top .tags-elm {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.on-projects-2-card-top .tag {
  font-family: var(--on-font-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--on-clr-pr-2);
  padding: 5px 16px;
  border-radius: 4px;
  background-color: #e5ebff;
}
.on-projects-2-card-meta {
  margin-bottom: 24px;
}
.on-projects-2-card-meta .meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(5, 5, 25, 0.1);
}
.on-projects-2-card-meta .meta-row:first-child {
  padding-top: 0;
}
.on-projects-2-card-meta .label {
  font-size: 16px;
  line-height: 16px;
  color: var(--on-clr-h-2);
}
.on-projects-2-card-meta .value {
  font-size: 16px;
  line-height: 16px;
  color: var(--on-clr-p-2);
  opacity: 0.72;
  text-align: right;
}
.on-projects-2-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 48px;
  position: unset !important;
}
.on-projects-2-pagination .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin: 0;
  opacity: 1;
  background-color: #d1d1d1;
  transition: 0.25s ease;
}
.on-projects-2-pagination .swiper-pagination-bullet-active {
  width: 12px;
  height: 12px;
  background-color: transparent;
  border: 2px solid var(--on-clr-pr-2);
}
.on-projects-2 {
  /*
      breakpoints
  */
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-projects-2-title {
    font-size: 72px;
  }
  .on-projects-2-swiper .swiper-slide {
    width: 1000px;
    height: 540px;
  }
  .on-projects-2-card {
    width: 620px;
    top: 30px;
    right: 30px;
  }
  .on-projects-2-card-inner {
    padding: 28px 24px 24px;
  }
  .on-projects-2-card-top .title-elm {
    font-size: 26px;
    line-height: 32px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-projects-2-sec-title {
    margin-bottom: 50px;
  }
  .on-projects-2-title {
    font-size: 58px;
  }
  .on-projects-2-mid {
    gap: 40px;
    margin-bottom: 36px;
  }
  .on-projects-2-counter {
    flex: 0 0 300px;
  }
  .on-projects-2-counter .number-elm {
    font-size: 60px;
    line-height: 54px;
  }
  .on-projects-2-counter .plus-elm {
    width: 36px;
    height: 36px;
    font-size: 28px;
  }
  .on-projects-2-counter .author-elm img {
    width: 46px;
    height: 46px;
  }
  .on-projects-2-text {
    flex: 0 0 420px;
  }
  .on-projects-2-swiper .swiper-slide {
    width: 900px;
    height: 480px;
  }
  .on-projects-2-card {
    width: 510px;
    top: 24px;
    right: 24px;
  }
  .on-projects-2-card-inner {
    padding: 24px 20px 20px;
  }
  .on-projects-2-card-top {
    margin-bottom: 24px;
  }
  .on-projects-2-card-top .title-elm {
    font-size: 22px;
    line-height: 28px;
  }
  .on-projects-2-card-top .text-elm {
    font-size: 15px;
    margin-bottom: 18px;
  }
  .on-projects-2-card-top .tag {
    padding: 4px 14px;
  }
  .on-projects-2-card-meta .meta-row {
    padding: 10px 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-projects-2-sec-title {
    margin-bottom: 44px;
  }
  .on-projects-2-title {
    font-size: 48px;
    letter-spacing: -1px;
  }
  .on-projects-2-mid {
    display: block;
    margin-bottom: 36px;
  }
  .on-projects-2-counter {
    margin-bottom: 36px;
  }
  .on-projects-2-text {
    max-width: 499px;
  }
  .on-projects-2-swiper .swiper-slide {
    width: 760px;
    height: 520px;
  }
  .on-projects-2-card {
    width: 520px;
  }
  .on-projects-2-card-top .title-elm {
    font-size: 20px;
    line-height: 26px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-projects-2-sec-title {
    margin-bottom: 38px;
  }
  .on-projects-2-subtitle {
    font-size: 14px;
    padding: 8px 10px;
  }
  .on-projects-2-title {
    font-size: 40px;
  }
  .on-projects-2-counter {
    margin-bottom: 32px;
  }
  .on-projects-2-swiper .swiper-slide {
    width: 100%;
    max-width: 720px;
    height: 480px;
  }
  .on-projects-2-card {
    width: calc(100% - 40px);
    top: 20px;
    right: 20px;
  }
  .on-projects-2-card-inner {
    padding: 20px 18px 18px;
  }
  .on-projects-2-card-top {
    margin-bottom: 20px;
  }
  .on-projects-2-card-top .title-elm {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 8px;
  }
  .on-projects-2-card-top .text-elm {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 14px;
  }
  .on-projects-2-card-top .tag {
    font-size: 13px;
    padding: 4px 12px;
  }
  .on-projects-2-card-meta {
    margin-bottom: 18px;
  }
  .on-projects-2-card-meta .meta-row {
    padding: 8px 0;
  }
  .on-projects-2-card-meta .label,
  .on-projects-2-card-meta .value {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .on-projects-2-sec-title {
    margin-bottom: 32px;
  }
  .on-projects-2-subtitle {
    font-size: 14px;
  }
  .on-projects-2-title {
    font-size: 32px;
    letter-spacing: 0;
  }
  .on-projects-2-title .line-1,
  .on-projects-2-title .line-2 {
    text-align: center;
  }
  .on-projects-2-counter .number-elm {
    font-size: 52px;
    line-height: 46px;
  }
  .on-projects-2-counter .text-elm {
    font-size: 18px;
  }
  .on-projects-2-counter .author-elm img {
    width: 44px;
    height: 44px;
  }
  .on-projects-2-text p:last-of-type {
    margin-bottom: 24px;
  }
  .on-projects-2-swiper .swiper-slide {
    height: 700px;
    width: 100%;
  }
  .on-projects-2 {
    /* card drops below the slide on phones */
  }
  .on-projects-2-card {
    width: calc(100% - 40px);
    top: 20px;
    right: 20px;
  }
}

/*
    projects-2-end
*/
/*
    projects-3-start
*/
.on-projects-3-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px 120px;
}
.on-projects-3 {
  /* filmstrip row — sharp edges, no radius, flush to the viewport edge */
}
.on-projects-3-wrap {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  height: 752px;
}
@media only screen and (min-width: 1600px) and (max-width: 1799px) {
  .on-projects-3-wrap {
    height: 640px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-projects-3-wrap {
    height: 560px;
  }
}
.on-projects-3-wrap {
  /* the hover-driven width swap only reads at full desktop width — a
     plain grid below it, so nothing depends on a hover that can't happen */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-3-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: auto;
    gap: 16px;
    padding: 100px 24px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-3-wrap {
    padding: 70px 20px;
  }
}
@media (max-width: 767px) {
  .on-projects-3-wrap {
    grid-template-columns: 1fr;
  }
}
.on-projects-3 {
  /*
      compact by default, same as an unhovered card — holds the "active"
      (expanded) state until a project card takes it over
  */
}
.on-projects-3-intro {
  position: relative;
  z-index: 1;
  flex: 1 1 0%;
  min-width: 0;
  height: 50%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  background-color: var(--on-clr-h-3);
  transition: flex 0.6s ease, height 0.6s ease;
}
.on-projects-3-intro .on-p-3,
.on-projects-3-intro .on-projects-3-bg-img {
  display: none;
}
.on-projects-3-intro:is(.active) {
  flex: 2 1 0%;
  height: 100% !important;
}
.on-projects-3-intro:is(.active) .on-p-3,
.on-projects-3-intro:is(.active) .on-projects-3-bg-img {
  display: block;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-projects-3-intro {
    padding: 48px;
  }
}
.on-projects-3-intro {
  /* no hover to hand the active state off to below desktop — always
     shows its full content */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-3-intro {
    grid-column: 1/-1;
    height: auto;
    padding: 0 0 40px;
  }
  .on-projects-3-intro .on-p-3,
  .on-projects-3-intro .on-projects-3-bg-img {
    display: block;
  }
}
.on-projects-3-sec-title {
  position: relative;
  z-index: 1;
  padding: 40px;
  transition: var(--on-cube-1);
}
.on-projects-3-sec-title .on-sec-title-3 {
  color: #fff;
  margin-bottom: 16px;
  transition: var(--on-cube-1);
}
.on-projects-3-sec-title .on-p-3 {
  color: rgba(255, 255, 255, 0.8);
}
.on-projects-3 {
  /* the collapsed intro only has room for a headline-sized title, not
     the full section-title scale */
}
.on-projects-3-intro:not(.active) .on-projects-3-sec-title {
  padding: 20px;
}
.on-projects-3-intro:not(.active) .on-projects-3-sec-title .on-sec-title-3 {
  font-size: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-3-intro:not(.active) .on-projects-3-sec-title {
    padding: 40px;
  }
  .on-projects-3-intro:not(.active) .on-projects-3-sec-title .on-sec-title-3 {
    font-size: 48px;
  }
}
.on-projects-3 {
  /* the faint skyline watermark, anchored low behind the button */
}
.on-projects-3-bg-img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 96px;
  pointer-events: none;
  mix-blend-mode: luminosity;
  z-index: -1;
}
.on-projects-3-bg-img img {
  width: 100%;
  height: auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-3-bg-img {
    display: none;
  }
}
.on-projects-3-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 18px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  font-family: var(--on-font-2);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--on-clr-pr-3);
  text-align: center;
  transition: var(--on-cube-1);
}
.on-projects-3-btn:hover {
  background-color: var(--on-clr-pr-3);
  color: var(--on-clr-h-3);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-3-btn {
    margin-top: 32px;
  }
}
.on-projects-3 {
  /* compact by default — only image, top-anchored at half height; the
     overlay shows once main.js marks it .active */
}
.on-projects-3-card {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  height: 50%;
  overflow: hidden;
  transition: flex 0.6s ease, height 0.6s ease;
}
.on-projects-3-card .img-elm {
  position: absolute;
  inset: 0;
}
.on-projects-3-card .img-elm img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.on-projects-3-card:is(.active) {
  flex: 2 1 0%;
  height: 100% !important;
}
.on-projects-3-card:is(.active) .on-projects-3-overlay {
  opacity: 1;
  visibility: visible;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-3-card {
    height: auto;
    aspect-ratio: 302/378;
  }
  .on-projects-3-card .on-projects-3-overlay {
    opacity: 1;
    visibility: visible;
  }
}
.on-projects-3-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transition: var(--on-cube-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-3-overlay {
    justify-content: flex-end;
  }
}
.on-projects-3-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 24px 24px 0;
}
.on-projects-3-tags li {
  padding: 8px 16px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  font-family: var(--on-font-2);
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: #fff;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-3-tags {
    display: none;
  }
}
.on-projects-3-info {
  padding: 24px;
  background-color: #F4F7F3;
  margin: 24px;
}
.on-projects-3-info .title-elm {
  font-size: 24px;
  margin-bottom: 12px;
  transition: var(--on-cube-1);
}
.on-projects-3-info .title-elm:hover {
  color: var(--on-clr-pr-3);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-3-info {
    padding: 18px 20px;
  }
  .on-projects-3-info .title-elm {
    font-size: 20px;
    margin-bottom: 0;
  }
}
.on-projects-3-meta li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(20, 28, 20, 0.16);
}
.on-projects-3-meta .label {
  font-family: var(--on-font-1);
  font-size: 14px;
  color: var(--on-clr-h-3);
  opacity: 0.8;
}
.on-projects-3-meta .value {
  font-family: var(--on-font-1);
  font-size: 14px;
  font-weight: 500;
  color: var(--on-clr-h-3);
  text-align: right;
}
.on-projects-3-meta {
  /* the meta table is a hover-reveal luxury — the compact mobile
     grid card only has room for the title */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-projects-3-meta {
    display: none;
  }
}

/*
    projects-3-end
*/
/*
    marquee-text-2-start
*/
.on-marquee-text-2-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 35px;
  /* pt-130/pb-130 in the markup is flat at every width — this is the
     step-down for it, and it wins the cascade since utility loads first */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-marquee-text-2-area {
    padding-top: 90px;
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-marquee-text-2-area {
    padding-top: 70px;
    padding-bottom: 70px;
    gap: 24px;
  }
}
@media (max-width: 767px) {
  .on-marquee-text-2-area {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
.on-marquee-text-2-row {
  position: relative;
  z-index: 1;
}
.on-marquee-text-2-row-wrap {
  display: flex;
  gap: 600px;
  margin-right: 600px;
  /* the gap (and the trailing margin that keeps the wa_marquee
     clone seam even) scale down with the circles/type themselves */
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-marquee-text-2-row-wrap {
    gap: 450px;
    margin-right: 450px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-marquee-text-2-row-wrap {
    gap: 320px;
    margin-right: 320px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-marquee-text-2-row-wrap {
    gap: 220px;
    margin-right: 220px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-marquee-text-2-row-wrap {
    gap: 140px;
    margin-right: 140px;
  }
}
@media (max-width: 767px) {
  .on-marquee-text-2-row-wrap {
    gap: 80px;
    margin-right: 80px;
  }
}
.on-marquee-text-2-row-wrap .img-elm {
  flex: 0 0 auto;
  width: 224px;
  height: 224px;
  border-radius: 50%;
  animation: on-marquee-text-2-spin 14s linear infinite;
  /* the bottom row's marquee runs right, so its circles spin the other way */
}
[data-direction=right] .on-marquee-text-2-row-wrap .img-elm {
  animation-direction: reverse;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-marquee-text-2-row-wrap .img-elm {
    width: 190px;
    height: 190px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-marquee-text-2-row-wrap .img-elm {
    width: 160px;
    height: 160px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-marquee-text-2-row-wrap .img-elm {
    width: 130px;
    height: 130px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-marquee-text-2-row-wrap .img-elm {
    width: 100px;
    height: 100px;
  }
}
@media (max-width: 767px) {
  .on-marquee-text-2-row-wrap .img-elm {
    width: 76px;
    height: 76px;
  }
}
.on-marquee-text-2-row-wrap:is(.has-text) {
  gap: 240px;
  margin-right: 240px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-marquee-text-2-row-wrap:is(.has-text) {
    gap: 180px;
    margin-right: 180px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-marquee-text-2-row-wrap:is(.has-text) {
    gap: 140px;
    margin-right: 140px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-marquee-text-2-row-wrap:is(.has-text) {
    gap: 100px;
    margin-right: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-marquee-text-2-row-wrap:is(.has-text) {
    gap: 60px;
    margin-right: 60px;
  }
}
@media (max-width: 767px) {
  .on-marquee-text-2-row-wrap:is(.has-text) {
    gap: 36px;
    margin-right: 36px;
  }
}
.on-marquee-text-2-row-wrap:is(.has-text) .text-elm {
  flex: 0 0 auto;
  font-family: var(--on-font-2);
  font-weight: 400;
  font-size: 80px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--on-clr-p-2);
  white-space: nowrap;
  margin: 0 60px 0 0;
  text-transform: uppercase;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-marquee-text-2-row-wrap:is(.has-text) .text-elm {
    font-size: 64px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-marquee-text-2-row-wrap:is(.has-text) .text-elm {
    font-size: 52px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-marquee-text-2-row-wrap:is(.has-text) .text-elm {
    font-size: 42px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-marquee-text-2-row-wrap:is(.has-text) .text-elm {
    font-size: 32px;
    margin-right: 40px;
  }
}
@media (max-width: 767px) {
  .on-marquee-text-2-row-wrap:is(.has-text) .text-elm {
    font-size: 24px;
  }
}
.on-marquee-text-2-line {
  height: 2px;
  background: linear-gradient(to bottom, rgba(5, 5, 25, 0.24) 0 1px, #CED9FF 1px 2px);
  position: absolute;
  bottom: 20%;
  left: 0;
  width: 100%;
  z-index: -1;
}
.on-marquee-text-2-line:is(.has-v2) {
  top: 20%;
  bottom: unset;
}

@keyframes on-marquee-text-2-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*
    marquee-text-2-end
*/
/*
    award-2-start
*/
.on-award-2-box {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #fff;
  height: 100vh;
  display: flex;
  align-items: center;
  /* the grid fallback can run taller than one screen — 100vh + hidden
     overflow was clipping cards out of the visible area below 1400 */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-award-2-box {
    height: auto;
    overflow: visible;
    padding: 100px 0;
  }
}
.on-award-2 {
  /* the pastel blur that sits low behind the scattered photos */
}
.on-award-2-bg-clr {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100% !important;
}
.on-award-2-bg-clr img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-award-2-bg-clr {
  /* it exists to soften the scatter behind the title — no scatter below 1400 */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-award-2-bg-clr {
    display: none;
  }
}
.on-award-2-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  /*
      the has-contact card grows to left:0/top:0/100%/100% of this box
      in the scroll animation, so this has to be the true full-bleed box
      (not an aspect-ratio letterboxed one) or it lands short of the edges
  */
  /* the scatter only reads at its own scale — a plain grid below it */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-award-2-wrap {
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-award-2-wrap {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 24px;
  }
}
@media (max-width: 767px) {
  .on-award-2-wrap {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }
}
.on-award-2 {
  /* dead-centre focal headline, "Our" in ink and "Awards" in brand blue */
}
.on-award-2-title {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
  margin-bottom: 0;
}
.on-award-2-title span {
  display: block;
  font-family: var(--on-font-1);
  font-weight: 700;
  font-size: 180px;
  line-height: 0.89;
  letter-spacing: -0.04em;
}
.on-award-2-title span.has-v1 {
  color: #A49BB0;
}
.on-award-2-title span.has-v2 {
  color: var(--on-clr-pr-2);
  text-transform: uppercase;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-award-2-title span {
    font-size: 150px;
  }
}
.on-award-2-title {
  /* the scatter is gone below 1400, so the title just leads the grid */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-award-2-title {
    position: static;
    transform: none;
    grid-column: 1/-1;
    order: -1;
    white-space: normal;
    margin-bottom: 8px;
  }
  .on-award-2-title span {
    display: inline;
    font-size: 56px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-award-2-title span {
    font-size: 44px;
  }
}
@media (max-width: 767px) {
  .on-award-2-title span {
    font-size: 34px;
  }
}
.on-award-2-card {
  position: absolute;
  border-radius: 12px;
  background-color: #050519;
}
.on-award-2-card .img-elm {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  border-radius: inherit;
}
.on-award-2-card .content-elm {
  position: absolute;
  z-index: 1;
  left: 16px;
  right: 16px;
  bottom: 16px;
  height: 104px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.on-award-2-card .icon-elm {
  flex: 0 0 auto;
  width: 94px;
  height: 104px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.on-award-2-card .label-elm {
  flex: 1;
  min-width: 0;
  height: 72px;
  display: flex;
  align-items: center;
  padding-right: 20px;
  padding-left: 95px;
  border-radius: 10px;
  background-color: rgba(5, 5, 25, 0.32);
  backdrop-filter: blur(14px);
}
.on-award-2-card .title-elm {
  font-family: var(--on-font-1);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 0;
}
.on-award-2-card {
  /*
      hand-set from the design, as a percentage of the 1920×1035 wrap so
      the whole scatter scales as one unit — order here is source order,
      not the visual reading order. Scoped to ≥1400 because :nth-child
      is more specific than the plain-class reset below it, so left as
      unconditional it would keep winning the cascade under 1400 too
      and leave every card pinned to its tiny scattered width/height
  */
}
@media (min-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-award-2-card:nth-child(1) {
    left: 6.93%;
    top: 8.51%;
    width: 27.29%;
    height: 25.12%;
  }
  .on-award-2-card:nth-child(2) {
    left: 43.91%;
    top: 7%;
    width: 27.29%;
    height: 25.12%;
  }
  .on-award-2-card:nth-child(3) {
    left: 74.22%;
    top: 25.22%;
    width: 27.29%;
    height: 25.12%;
  }
  .on-award-2-card:nth-child(4) {
    left: 19.92%;
    top: 70.38%;
    width: 27.29%;
    height: 25.12%;
  }
  .on-award-2-card:nth-child(5) {
    left: -2.6%;
    top: 40.75%;
    width: 27.29%;
    height: 25.12%;
  }
  .on-award-2-card {
    /* the un-labelled teaser photo — becomes the contact band's
       full-width image on scroll */
  }
  .on-award-2-card.has-contact {
    left: 60.36%;
    top: 67.73%;
    width: 27.29%;
    height: 25.12%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-award-2-card {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 524/260;
    left: auto;
    top: auto;
  }
  .on-award-2-card .content-elm {
    height: 72px;
    align-items: center;
  }
  .on-award-2-card .icon-elm {
    width: 56px;
    height: 56px;
  }
}
@media (max-width: 767px) {
  .on-award-2-card .label-elm {
    padding: 0 14px;
  }
  .on-award-2-card .title-elm {
    font-size: 16px;
  }
}

.on-award-x-contact {
  position: relative;
  height: 300vh;
  /* the pinned sequence is a ≥1400px effect — collapse back to auto below it,
     or the page keeps reserving empty scroll height */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-award-x-contact {
    height: auto;
  }
}

.on-award-2-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-award-2-pin {
    position: static;
    height: auto;
    overflow: visible;
  }
}

/*
    contact-2-start — the box the teaser photo grows into, and the copy that
    settles on top of it once it does
*/
.on-contact-2-area {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-contact-2-area {
    position: relative;
    inset: auto;
    height: 100vh;
    min-height: 700px;
  }
}
.on-contact-2 {
  /*
      only does anything below 1400 — at and above it, the has-contact card
      itself (grown full-bleed by the scroll animation) is the real backdrop
  */
}
.on-contact-2-bg {
  display: none;
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #050519;
}
.on-contact-2-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(5, 5, 25, 0.55);
}
.on-contact-2-bg .img-elm {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-contact-2-bg {
    display: block;
  }
}
.on-contact-2-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  padding: 100px 20px;
  height: 100% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.on-contact-2-content .title-elm {
  font-family: var(--on-font-2);
  font-weight: 700;
  font-size: 92px;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0;
}
.on-contact-2-content .text-elm {
  color: rgba(255, 255, 255, 0.8);
  margin-top: auto;
  max-width: 450px;
}
.on-contact-2-content .on-pr-btn-3 {
  margin-top: 32px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-contact-2-content .title-elm {
    font-size: 76px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-contact-2-content .title-elm {
    font-size: 64px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-contact-2-content .title-elm {
    font-size: 52px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-contact-2-content .title-elm {
    font-size: 40px;
  }
}
@media (max-width: 767px) {
  .on-contact-2-content .title-elm {
    font-size: 32px;
  }
}

/*
    contact-2-end
*/
/*
    award-2-end
*/
/*
    award-3-start
*/
.on-award-3-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--on-clr-h-3);
}
.on-award-3 {
  /* diamond-texture wash at the true left edge — the portrait's own
     transparent margin is what lets it show through */
}
.on-award-3-bg-pattern {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 20%;
  max-width: 371px;
  height: 100% !important;
  opacity: 0.6;
  mix-blend-mode: luminosity;
}
.on-award-3-bg-pattern img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-award-3-bg-pattern {
    display: none;
  }
}
.on-award-3 {
  /* the same two-colleagues photo used at 15% opacity, purely as a right-edge texture */
}
.on-award-3-bg-img {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
  width: 28%;
  max-width: 420px;
  height: 100% !important;
  mix-blend-mode: luminosity;
}
.on-award-3-bg-img img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-award-3-bg-img {
    display: none;
  }
}
.on-award-3-glow {
  position: absolute;
  z-index: 0;
  width: 302px;
  height: 302px;
  border-radius: 50%;
  filter: blur(152px);
  pointer-events: none;
}
.on-award-3-glow:is(.has-v1) {
  right: 4%;
  top: -20%;
  background-color: #0cb351;
}
.on-award-3-glow:is(.has-v2) {
  left: 26%;
  bottom: -30%;
  background-color: var(--on-clr-pr-3);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-award-3-glow {
    display: none;
  }
}
.on-award-3 {
  /* the portrait bleeds past the row's own top/bottom edge — that's the look */
}
.on-award-3-photo {
  position: absolute;
  bottom: -190px;
  left: 0;
  mix-blend-mode: luminosity;
}
.on-award-3-content {
  position: relative;
  z-index: 1;
  margin-left: auto;
  max-width: 1060px;
}
@media (min-width: 1800px) {
  .on-award-3-content {
    margin-right: -100px;
  }
}
.on-award-3-sec-title {
  max-width: 570px;
  margin-bottom: 68px;
}
.on-award-3-sec-title .on-sec-title-3 {
  color: #fff;
  margin-bottom: 16px;
}
.on-award-3-sec-title .on-p-3 {
  color: rgba(255, 255, 255, 0.8);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-award-3-sec-title {
    margin-bottom: 44px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-award-3-sec-title {
    margin-bottom: 36px;
  }
}
.on-award-3-slider {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: 80px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-award-3-slider {
    margin-left: 0;
  }
}
.on-award-3-slider .nav-elm {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: var(--on-cube-1);
}
.on-award-3-slider .nav-elm:hover {
  background-color: var(--on-clr-pr-3);
  color: var(--on-clr-h-3);
}
.on-award-3-slider .nav-elm {
  /* swiper adds this once the track runs out at either end */
}
.on-award-3-slider .nav-elm:is(.swiper-button-disabled) {
  opacity: 0.35;
  cursor: default;
}
.on-award-3 {
  /* free-width badge row — the icons already carry their own wreath art */
}
.on-award-3-swiper-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
    award-3-end
*/
/*
    testimonial-1-start
*/
.on-testimonial-1-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #EBF0F0;
  padding: 100px 0 38px;
  border-radius: 28px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-testimonial-1-area {
    padding: 90px 0 38px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-testimonial-1-area {
    padding: 85px 0 34px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-testimonial-1-area {
    padding: 75px 0 30px;
  }
}
@media (max-width: 767px) {
  .on-testimonial-1-area {
    padding: 60px 0 30px;
  }
}
.on-testimonial-1 {
  /* the photo carries a cut-out where the first card lands over it */
}
.on-testimonial-1-left-img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 856px;
  max-width: 45%;
  height: 100% !important;
}
.on-testimonial-1-left-img img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-1-left-img {
    display: none;
  }
}
.on-testimonial-1-right-img {
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  width: 652px;
  max-width: 34%;
  height: 100% !important;
  mix-blend-mode: luminosity;
}
.on-testimonial-1-right-img img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: left top;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-1-right-img {
    display: none;
  }
}
.on-testimonial-1-sec-title {
  max-width: 643px;
  margin-left: auto;
  margin-bottom: 89px;
}
.on-testimonial-1-sec-title .on-sec-title-1 {
  margin-bottom: 16px;
}
.on-testimonial-1-sec-title .text-elm {
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-testimonial-1-sec-title {
    margin-bottom: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-testimonial-1-sec-title {
    margin-bottom: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-1-sec-title {
    max-width: 100%;
    margin-left: 0;
    margin-bottom: 44px;
  }
}
.on-testimonial-1 {
  /*
      the track starts over the photo and runs off the right edge, so it is
      offset by hand rather than held in the container
  */
}
.on-testimonial-1-slider {
  margin-left: 20.83%;
  overflow: hidden;
}
.on-testimonial-1-slider .swiper-slide {
  width: 508px;
  height: auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-testimonial-1-slider .swiper-slide {
    width: 460px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-testimonial-1-slider .swiper-slide {
    width: 420px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-1-slider {
    margin-left: 0;
  }
  .on-testimonial-1-slider .swiper-slide {
    width: 380px;
  }
}
@media (max-width: 767px) {
  .on-testimonial-1-slider .swiper-slide {
    width: 300px;
  }
}
.on-testimonial-1 {
  /*
      card — a 10px plate around an inset panel; hovering swaps both grounds
  */
}
.on-testimonial-1-card {
  padding: 10px;
  border-radius: 20px;
  background-color: #fff;
  transition: var(--on-cube-1);
}
.on-testimonial-1-card .inner-elm {
  position: relative;
  z-index: 1;
  height: 320px;
  padding: 48px 30px 30px;
  border-radius: 18px;
  overflow: hidden;
  background-color: #ebf0f0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--on-cube-1);
}
.on-testimonial-1-card {
  /* the mark sits under the opening line, not beside it */
}
.on-testimonial-1-card .quote-elm {
  position: absolute;
  left: 21px;
  top: 26px;
  z-index: 0;
  width: 68px;
  line-height: 0;
  color: #fff;
  transition: var(--on-cube-1);
}
.on-testimonial-1-card .quote-elm svg {
  width: 100%;
  height: auto;
}
.on-testimonial-1-card .text-elm {
  position: relative;
  z-index: 1;
  font-family: var(--on-font-1);
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: var(--on-clr-h-1);
  margin-bottom: 0;
  transition: var(--on-cube-1);
}
.on-testimonial-1-card .text-elm .mark-elm {
  color: var(--on-clr-pr-1);
}
.on-testimonial-1-card .author-elm {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}
.on-testimonial-1-card .author-elm > img {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.on-testimonial-1-card .content-elm {
  flex: 1;
  min-width: 0;
}
.on-testimonial-1-card .top-elm {
  display: flex;
  align-items: center;
  gap: 10px;
}
.on-testimonial-1-card .name-elm {
  font-family: var(--on-font-2);
  font-size: 22px;
  font-weight: 500;
  line-height: 30px;
  color: var(--on-clr-h-1);
  margin-bottom: 0;
  transition: var(--on-cube-1);
}
.on-testimonial-1-card .line-elm {
  flex: 1;
  min-width: 20px;
  height: 1px;
  background-color: #d9d9d9;
  transition: var(--on-cube-1);
}
.on-testimonial-1-card .rating-elm {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--on-font-1);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--on-clr-h-1);
  transition: var(--on-cube-1);
}
.on-testimonial-1-card .rating-elm i {
  font-size: 16px;
  color: #ffbc16;
}
.on-testimonial-1-card .role-elm {
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--on-clr-h-1);
  opacity: 0.72;
  margin: 4px 0 0;
  transition: var(--on-cube-1);
}
.on-testimonial-1-card:hover {
  background-color: var(--on-clr-h-1);
}
.on-testimonial-1-card:hover .inner-elm {
  background-color: #024748;
}
.on-testimonial-1-card:hover .quote-elm {
  color: rgba(255, 255, 255, 0.12);
}
.on-testimonial-1-card:hover .text-elm,
.on-testimonial-1-card:hover .name-elm,
.on-testimonial-1-card:hover .rating-elm,
.on-testimonial-1-card:hover .role-elm {
  color: #fff;
}
.on-testimonial-1-card:hover .line-elm {
  background-color: rgba(255, 255, 255, 0.2);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-testimonial-1-card .inner-elm {
    height: 300px;
    padding: 42px 24px 24px;
  }
  .on-testimonial-1-card .text-elm {
    font-size: 18px;
    line-height: 28px;
  }
  .on-testimonial-1-card .name-elm {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-1-card .inner-elm {
    height: auto;
    min-height: 300px;
    padding: 42px 24px 24px;
  }
  .on-testimonial-1-card .text-elm {
    font-size: 17px;
    line-height: 27px;
  }
  .on-testimonial-1-card .name-elm {
    font-size: 19px;
  }
  .on-testimonial-1-card .author-elm {
    gap: 12px;
  }
  .on-testimonial-1-card .author-elm > img {
    width: 56px;
    height: 56px;
  }
}
@media (max-width: 767px) {
  .on-testimonial-1-card .inner-elm {
    padding: 38px 20px 20px;
  }
  .on-testimonial-1-card .quote-elm {
    width: 54px;
    left: 16px;
    top: 20px;
  }
  .on-testimonial-1-card .text-elm {
    font-size: 16px;
    line-height: 26px;
  }
  .on-testimonial-1-card .rating-elm {
    font-size: 16px;
  }
}
.on-testimonial-1 {
  /*
      bottom — the button sits over the photo, the controller runs to the
      right edge, so this row is offset by hand too
  */
}
.on-testimonial-1-bottom {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  margin: 32px 4.48% 0 31%;
}
.on-testimonial-1-bottom .on-pr-btn-1 {
  /* already a dark pill, so the flood comes back the other way */
  --on-btn-flood: var(--on-clr-pr-1);
  --on-btn-hover-clr: var(--on-clr-h-1);
  --on-btn-disc: var(--on-clr-h-1);
  --on-btn-disc-clr: var(--on-clr-pr-1);
  flex: 0 0 auto;
  margin-top: 24px;
  background-color: #016c6e;
  color: #fff;
}
.on-testimonial-1-bottom .on-pr-btn-1 .icon {
  color: var(--on-clr-h-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-testimonial-1-bottom {
    gap: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-1-bottom {
    display: block;
    margin: 32px 0 0;
  }
  .on-testimonial-1-bottom .on-pr-btn-1 {
    margin-top: 0;
  }
}
.on-testimonial-1-controller {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  /* the two rules that bracket the dots */
}
.on-testimonial-1-controller .line-elm {
  flex: 1;
  min-width: 0;
  height: 1px;
  background-color: rgba(2, 71, 72, 0.12);
}
.on-testimonial-1-controller .nav-elm {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(2, 71, 72, 0.1);
  border-radius: 8px;
  background-color: rgba(2, 71, 72, 0.04);
  color: #024748;
  font-size: 14px;
  cursor: pointer;
  transition: var(--on-cube-1);
}
.on-testimonial-1-controller .nav-elm:hover {
  background-color: #024748;
  color: #fff;
}
.on-testimonial-1-controller .nav-elm {
  /* swiper adds this once the track runs out at either end */
}
.on-testimonial-1-controller .nav-elm:is(.swiper-button-disabled) {
  opacity: 0.4;
  cursor: default;
}
.on-testimonial-1-controller .dots-elm {
  flex: 0 0 auto;
  width: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.on-testimonial-1-controller .dots-elm .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin: 0;
  border-radius: 50%;
  background-color: #024748;
  opacity: 0.2;
  transition: var(--on-cube-1);
}
.on-testimonial-1-controller .dots-elm {
  /* the live one opens into a ring around its dot */
}
.on-testimonial-1-controller .dots-elm .swiper-pagination-bullet-active {
  position: relative;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border: 1px solid #024748;
  opacity: 1;
}
.on-testimonial-1-controller .dots-elm .swiper-pagination-bullet-active::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #024748;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-1-controller {
    margin-top: 28px;
  }
}

/*
    testimonial-1-end
*/
/*
    testimonial-2-start
*/
.on-testimonial-2 {
  /* faint desaturated photo anchoring the lower half of the band */
}
.on-testimonial-2-bg-img {
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
  width: 100%;
  filter: grayscale(1);
}
.on-testimonial-2-bg-img img {
  width: 100%;
}
.on-testimonial-2-bg-img {
  /* the stack animation is a ≥1400px effect — no stack, no need for the photo either */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-2-bg-img {
    display: none;
  }
}
.on-testimonial-2 {
  /* dotted texture, mirrored (180°) to sit at the foot of the band */
}
.on-testimonial-2-bg-dot {
  position: absolute;
  z-index: -1;
  top: 0;
  width: 100%;
}
.on-testimonial-2-bg-dot img {
  width: 100%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-2-bg-dot {
    display: none;
  }
}
.on-testimonial-2 {
  /* full-width watermark line, pinned behind the card stack it centers on */
}
.on-testimonial-2-marquee {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 50%;
  width: 100%;
  overflow: hidden;
  transform: translateY(-50%);
  pointer-events: none;
  padding-bottom: 15px;
}
.on-testimonial-2-marquee .text-elm {
  display: inline-block;
  font-family: var(--on-font-1);
  font-size: 180px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--on-clr-pr-2);
  opacity: 0.6;
  white-space: nowrap;
  padding-right: 60px;
  margin-bottom: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-testimonial-2-marquee .text-elm {
    font-size: 150px;
  }
}
.on-testimonial-2-marquee {
  /* below 1400 the cards are a plain grid with no stack to run behind — drop the line */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-2-marquee {
    display: none;
  }
}
.on-testimonial-2 {
  /*
      the fan — three sheets on one stack, each nudged by a hand-set
      left/top/rotation (from the design) so only the top sheet reads in
      full; percentages so the whole stack scales as one unit
  */
}
.on-testimonial-2-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 606px;
  aspect-ratio: 606/681;
  margin: 0 auto;
  margin-bottom: -60px;
  /* below the desktop effect the fan can't stay readable — a plain grid instead */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-2-card {
    aspect-ratio: auto;
    max-width: 100%;
    margin-bottom: 0;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-2-card {
    grid-template-columns: 1fr;
  }
}
.on-testimonial-2-card-single {
  position: absolute;
  width: 89.1%;
  height: 91.63%;
  padding: 48px 44px;
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform-origin: right bottom;
  filter: drop-shadow(0px 0px 32px rgba(0, 0, 0, 0.05));
}
.on-testimonial-2-card-single .rating-elm {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 28px;
  color: #FFA909;
  font-size: 18px;
}
.on-testimonial-2-card-single .text-elm {
  flex: 1;
  min-height: 0;
  font-family: var(--on-font-2);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.45;
  color: var(--on-clr-h-2);
  margin-bottom: 0;
}
.on-testimonial-2-card-single .author-elm {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
}
.on-testimonial-2-card-single .img-elm {
  flex: 0 0 auto;
  width: 90px;
  height: 90px;
  border-radius: 50%;
}
.on-testimonial-2-card-single .img-elm img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-testimonial-2-card-single .content-elm {
  min-width: 0;
}
.on-testimonial-2-card-single .name-elm {
  font-family: var(--on-font-2);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--on-clr-h-2);
  margin-bottom: 0;
}
.on-testimonial-2-card-single .role-elm {
  font-family: var(--on-font-1);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: var(--on-clr-p-2);
  opacity: 0.72;
  margin: 4px 0 0;
}
.on-testimonial-2-card-single {
  /*
      stack order back to front — left/top/z-index are the design
      variant; rotation starts at -103deg and is driven to its resting
      angle (-3/-2/-1deg) by the scroll animation in main.js, one card
      at a time, so it isn't set here
  */
}
.on-testimonial-2-card-single:nth-child(1) {
  left: 0;
  top: 1%;
  z-index: 1;
}
.on-testimonial-2-card-single:nth-child(2) {
  left: 1%;
  top: -1%;
  z-index: 2;
}
.on-testimonial-2-card-single:nth-child(3) {
  left: 2%;
  top: -3%;
  z-index: 3;
}
.on-testimonial-2-card-single {
  /* below 1400 the scroll effect is off — plain grid cards, static and upright */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-2-card-single {
    position: static;
    width: 100%;
    height: auto;
    min-height: 320px;
    transform: none;
    left: auto;
    top: auto;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-testimonial-2-card-single {
    padding: 40px 32px;
  }
  .on-testimonial-2-card-single .text-elm {
    font-size: 22px;
    line-height: 1.5;
  }
  .on-testimonial-2-card-single .name-elm {
    font-size: 20px;
  }
  .on-testimonial-2-card-single .img-elm {
    width: 72px;
    height: 72px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-2-card-single {
    padding: 36px 28px;
  }
  .on-testimonial-2-card-single .text-elm {
    font-size: 18px;
    line-height: 1.6;
  }
  .on-testimonial-2-card-single .name-elm {
    font-size: 19px;
  }
  .on-testimonial-2-card-single .img-elm {
    width: 64px;
    height: 64px;
  }
}
@media (max-width: 767px) {
  .on-testimonial-2-card-single {
    padding: 30px 22px;
  }
  .on-testimonial-2-card-single .text-elm {
    font-size: 16px;
    line-height: 1.6;
  }
}
.on-testimonial-2-box {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-2-box {
    height: auto;
    display: block;
    padding: 100px 0;
  }
}
.on-testimonial-2-area {
  height: 200vh;
  position: relative;
  z-index: 1;
  background-color: #F2F2F3;
  /* the scroll-linked stack is a ≥1400px effect — below it this must
     collapse back to auto, or the page keeps reserving empty scroll height */
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-2-area {
    height: auto;
  }
}
.on-testimonial-2-pin {
  position: sticky;
  top: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-2-pin {
    position: static;
  }
}

/*
    testimonial-2-end
*/
/*
    testimonial-3-start
*/
.on-testimonial-3-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #E9EFE6;
}
.on-testimonial-3 {
  /* the section's own watermark texture, barely-there at 9% */
}
.on-testimonial-3-sec-bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: multiply;
}
.on-testimonial-3-sec-bg img {
  width: 100%;
  height: auto;
}
.on-testimonial-3-sec-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 60px;
  margin-bottom: 60px;
}
.on-testimonial-3-sec-title .left {
  max-width: 660px;
}
.on-testimonial-3-sec-title .right {
  max-width: 460px;
  padding-top: 8px;
}
.on-testimonial-3-sec-title .on-p-3 {
  margin-bottom: 24px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-testimonial-3-sec-title {
    gap: 32px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-3-sec-title {
    flex-direction: column;
    margin-bottom: 44px;
  }
  .on-testimonial-3-sec-title .left,
  .on-testimonial-3-sec-title .right {
    max-width: 100%;
  }
  .on-testimonial-3-sec-title .right {
    padding-top: 0;
    margin-top: 24px;
  }
}
.on-testimonial-3-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-3-wrap {
    flex-direction: column;
  }
}
.on-testimonial-3-left {
  flex: 0 0 66.57%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-3-left {
    flex-basis: auto;
    width: 100%;
  }
}
.on-testimonial-3 {
  /* dark quote card — its own faint vignette photo sits under the copy */
}
.on-testimonial-3-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: 298px;
  background-color: var(--on-clr-h-3);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-testimonial-3-card {
    height: 280px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-3-card {
    height: auto;
  }
}
.on-testimonial-3-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.on-testimonial-3-card-bg img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-testimonial-3-swiper {
  position: relative;
  z-index: 1;
  height: 100% !important;
}
.on-testimonial-3-swiper .swiper-wrapper {
  height: 100% !important;
}
.on-testimonial-3-swiper .swiper-slide {
  height: auto;
  display: flex;
  align-items: center;
}
.on-testimonial-3-content {
  padding: 48px;
}
.on-testimonial-3-content .rating-elm {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  color: #FF8D28;
  font-size: 14px;
}
.on-testimonial-3-content .text-elm {
  font-family: var(--on-font-2);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.01em;
  color: #fff;
  margin-bottom: 38px;
}
.on-testimonial-3-content .author-elm {
  display: flex;
  align-items: center;
  gap: 16px;
}
.on-testimonial-3-content .img-elm {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
}
.on-testimonial-3-content .img-elm img {
  width: 100%;
  height: 100% !important;
  border-radius: 50%;
  object-fit: cover;
}
.on-testimonial-3-content .name-elm {
  color: #fff;
  margin-bottom: 2px;
  font-weight: 500;
  font-size: 22px;
}
.on-testimonial-3-content .role-elm {
  display: block;
  font-family: var(--on-font-1);
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.72);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-testimonial-3-content {
    padding: 36px;
  }
  .on-testimonial-3-content .text-elm {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 24px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-3-content {
    padding: 32px 24px;
  }
  .on-testimonial-3-content .text-elm {
    font-size: 18px;
    line-height: 27px;
    margin-bottom: 24px;
  }
}
.on-testimonial-3 {
  /* client strip — a muted, greyscale marquee under the quote card */
}
.on-testimonial-3-marquee {
  overflow: hidden;
  background-color: #CAD2C6;
  padding: 28px 0;
}
.on-testimonial-3-logo-wrap {
  display: flex;
  align-items: center;
}
.on-testimonial-3-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 64px;
  vertical-align: top;
}
.on-testimonial-3-logo img {
  max-width: 100px;
  max-height: 32px;
  width: auto;
  height: auto;
  opacity: 0.6;
  filter: brightness(0);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-3-logo {
    margin-right: 40px;
  }
  .on-testimonial-3-logo img {
    max-width: 84px;
    max-height: 26px;
  }
}
.on-testimonial-3-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-3-right {
    margin-top: 24px;
  }
}
.on-testimonial-3-photo {
  position: relative;
  flex: none;
  min-width: 0;
  height: 298px;
  padding: 20px;
  background-color: #CAD2C6;
}
.on-testimonial-3-photo img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-testimonial-3-photo {
    height: 280px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-testimonial-3-photo {
    height: 240px;
  }
}
.on-testimonial-3-nav {
  flex: none;
  display: flex;
  flex-direction: column;
}
.on-testimonial-3-next, .on-testimonial-3-prev {
  flex: none;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  background-color: var(--on-clr-h-3);
  font-family: var(--on-font-2);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #fff;
  cursor: pointer;
  transition: var(--on-cube-1);
  justify-content: space-between;
}
.on-testimonial-3-next .flaticon, .on-testimonial-3-prev .flaticon {
  opacity: 0.8;
}
.on-testimonial-3-next:hover, .on-testimonial-3-prev:hover {
  background-color: var(--on-clr-pr-3);
  color: var(--on-clr-h-3);
}
.on-testimonial-3-next:hover .flaticon, .on-testimonial-3-prev:hover .flaticon {
  opacity: 1;
}
.on-testimonial-3-next:is(.swiper-button-disabled), .on-testimonial-3-prev:is(.swiper-button-disabled) {
  opacity: 0.4;
  cursor: default;
}
.on-testimonial-3-prev {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.on-testimonial-3-prev .flaticon {
  transform: rotate(180deg);
}

/*
    testimonial-3-end
*/
/*
    blog-1-start
*/
.on-blog-1-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 100px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-blog-1-area {
    padding: 90px 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-blog-1-area {
    padding: 85px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-blog-1-area {
    padding: 75px 0;
  }
}
@media (max-width: 767px) {
  .on-blog-1-area {
    padding: 60px 0;
  }
}
.on-blog-1-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  filter: grayscale(1);
}
.on-blog-1-bg img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-blog-1-sec-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
}
.on-blog-1-sec-title .title-wrap {
  max-width: 643px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-blog-1-sec-title {
    margin-bottom: 34px;
  }
}
@media (max-width: 767px) {
  .on-blog-1-sec-title {
    display: block;
    margin-bottom: 28px;
  }
  .on-blog-1-sec-title .on-pr-btn-1 {
    margin-top: 24px;
  }
}
.on-blog-1 {
  /*
      the wide slot belongs to whichever card is live, so the tracks follow
      the active class rather than the markup order — both sides are the same
      three-track list, which is what lets it tween
  */
}
.on-blog-1-grid {
  display: grid;
  grid-template-columns: 612fr 370fr 370fr;
  gap: 24px;
  align-items: start;
  transition: grid-template-columns 0.45s ease;
}
.on-blog-1-grid:has(.on-blog-1-card:nth-child(2).active) {
  grid-template-columns: 370fr 612fr 370fr;
}
.on-blog-1-grid:has(.on-blog-1-card:nth-child(3).active) {
  grid-template-columns: 370fr 370fr 612fr;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-blog-1-grid {
    gap: 20px;
  }
}
.on-blog-1-grid {
  /* three across leaves nothing usable, so the lead takes its own row */
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .on-blog-1-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .on-blog-1-grid .on-blog-1-card:first-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 767px) {
  .on-blog-1-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
.on-blog-1-card {
  /*
      the row is as tall as its tallest card, and mid-swap both the old
      and the new one are part-grown — without a floor the section would
      dip and spring back on every hover. This is the open card's height.
  */
  min-height: 528px;
}
.on-blog-1-card .img-elm {
  position: relative;
  z-index: 1;
  height: 297px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 18px;
  /* the frame grows with the slot it sits in */
  transition: height 0.45s ease, margin-bottom 0.45s ease;
}
.on-blog-1-card .img-elm > img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.on-blog-1-card {
  /* the date plate rides the top-left corner of the frame */
}
.on-blog-1-card .date-elm {
  position: absolute;
  left: 24px;
  top: 24px;
  z-index: 2;
  width: 80px;
  border-radius: 6px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.72);
  text-align: center;
  backdrop-filter: blur(4px);
  border-bottom: 2px solid #fff;
}
.on-blog-1-card .day-elm {
  display: block;
  height: 52px;
  border-bottom: 2px solid #07a0a4;
  border-radius: 6px;
  background-color: #016c6e;
  font-family: var(--on-font-1);
  font-size: 32px;
  font-weight: 600;
  line-height: 50px;
  color: #fff;
}
.on-blog-1-card .month-elm {
  display: block;
  padding: 5px 0;
  font-family: var(--on-font-1);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: var(--on-clr-h-1);
}
.on-blog-1-card .meta-elm {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.on-blog-1-card .meta-elm li {
  font-family: var(--on-font-1);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.04em;
  color: #525d5d;
}
.on-blog-1-card .meta-elm .sep-elm {
  width: 16px;
  height: 16px;
  line-height: 0;
  color: var(--on-clr-h-1);
}
.on-blog-1-card .meta-elm .sep-elm svg {
  width: 100%;
  height: 100% !important;
}
.on-blog-1-card .title-elm {
  font-family: var(--on-font-2);
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  color: var(--on-clr-h-1);
  margin-bottom: 0;
  transition: font-size 0.45s ease, line-height 0.45s ease;
}
.on-blog-1-card .title-elm a {
  transition: var(--on-cube-1);
}
.on-blog-1-card .title-elm a:hover {
  color: #016c6e;
}
.on-blog-1-card:hover .img-elm > img {
  transform: scale(1.06);
}
.on-blog-1-card {
  /* lead card */
}
.on-blog-1-card:is(.active) .img-elm {
  height: 412px;
  margin-bottom: 16px;
}
.on-blog-1-card:is(.active) .title-elm {
  font-size: 25px;
  line-height: 32px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-blog-1-card {
    min-height: 496px;
  }
  .on-blog-1-card .img-elm {
    height: 275px;
  }
  .on-blog-1-card:is(.active) .img-elm {
    height: 380px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-blog-1-card {
    min-height: 452px;
  }
  .on-blog-1-card .img-elm {
    height: 250px;
  }
  .on-blog-1-card:is(.active) .img-elm {
    height: 340px;
  }
  .on-blog-1-card .meta-elm li {
    font-size: 16px;
  }
  .on-blog-1-card .title-elm {
    font-size: 20px;
    line-height: 26px;
  }
  .on-blog-1-card:is(.active) .title-elm {
    font-size: 22px;
    line-height: 30px;
  }
}
.on-blog-1-card {
  /*
      the wide slot is pinned to the first card at these widths, so the
      size goes with it — the live state must not resize anything, or the
      two cards sharing the second row would bounce it again
  */
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-blog-1-card {
    min-height: 0;
  }
  .on-blog-1-card .img-elm, .on-blog-1-card:is(.active) .img-elm {
    height: 260px;
  }
  .on-blog-1-card:first-child .img-elm {
    height: 380px;
  }
  .on-blog-1-card .meta-elm li {
    font-size: 16px;
  }
  .on-blog-1-card .title-elm, .on-blog-1-card:is(.active) .title-elm {
    font-size: 20px;
    line-height: 26px;
  }
  .on-blog-1-card:first-child .title-elm {
    font-size: 24px;
    line-height: 32px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-blog-1-card {
    min-height: 0;
  }
  .on-blog-1-card .img-elm, .on-blog-1-card:is(.active) .img-elm {
    height: 230px;
  }
  .on-blog-1-card:first-child .img-elm {
    height: 320px;
  }
  .on-blog-1-card .meta-elm li {
    font-size: 16px;
  }
  .on-blog-1-card .title-elm, .on-blog-1-card:is(.active) .title-elm {
    font-size: 19px;
    line-height: 26px;
  }
  .on-blog-1-card:first-child .title-elm {
    font-size: 22px;
    line-height: 30px;
  }
}
@media (max-width: 767px) {
  .on-blog-1-card {
    min-height: 0;
  }
  .on-blog-1-card .img-elm, .on-blog-1-card:is(.active) .img-elm {
    height: 240px;
    margin-bottom: 16px;
  }
  .on-blog-1-card .date-elm {
    left: 16px;
    top: 16px;
    width: 68px;
  }
  .on-blog-1-card .day-elm {
    height: 44px;
    font-size: 26px;
    line-height: 42px;
  }
  .on-blog-1-card .month-elm {
    font-size: 13px;
    padding: 4px 0;
  }
  .on-blog-1-card .meta-elm {
    gap: 10px;
  }
  .on-blog-1-card .meta-elm li {
    font-size: 15px;
  }
  .on-blog-1-card .title-elm, .on-blog-1-card:is(.active) .title-elm {
    font-size: 19px;
    line-height: 26px;
  }
}

/*
    blog-1-end
*/
/*
    blog-2-start
*/
.on-blog-2-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.on-blog-2-sec-title {
  max-width: 919px;
  margin: 0 auto 60px;
  text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-blog-2-sec-title {
    margin-bottom: 40px;
  }
}
@media (max-width: 767px) {
  .on-blog-2-sec-title {
    margin-bottom: 32px;
  }
}
.on-blog-2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .on-blog-2-grid {
    grid-template-columns: 1fr 1fr;
  }
  .on-blog-2-grid .on-blog-2-card:last-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 767px) {
  .on-blog-2-grid {
    grid-template-columns: 1fr;
  }
}
.on-blog-2-card .img-elm {
  position: relative;
  z-index: 1;
  height: 484px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}
.on-blog-2-card .img-elm > img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.on-blog-2-card .img-elm {
  /* the hairline cross rides on top of the photo, in line with the
     date plate — a solid white line at rest, with a primary-colour
     line that draws itself across it on hover */
}
.on-blog-2-card .img-elm::before, .on-blog-2-card .img-elm::after {
  content: "";
  position: absolute;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.4);
  background-image: linear-gradient(var(--on-clr-pr-2), var(--on-clr-pr-2));
  background-repeat: no-repeat;
  pointer-events: none;
  transition: background-size 0.5s ease;
}
.on-blog-2-card .img-elm::before {
  left: 0;
  right: 0;
  bottom: 100px;
  height: 1px;
  background-position: left;
  background-size: 0 100%;
}
.on-blog-2-card .img-elm::after {
  left: 100px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-position: top;
  background-size: 100% 0;
}
@media (max-width: 767px) {
  .on-blog-2-card .img-elm {
    height: 340px;
  }
}
.on-blog-2-card:hover .img-elm::before, .on-blog-2-card:hover .img-elm::after {
  background-size: 100% 100%;
}
.on-blog-2-card:hover .img-elm > img {
  transform: scale(1.06);
}
.on-blog-2-card .date-elm {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 0 8px;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(40px);
  text-align: center;
}
.on-blog-2-card .day-elm {
  display: block;
  font-family: var(--on-font-2);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
}
.on-blog-2-card .divider-elm {
  width: 76px;
  height: 1px;
  margin: 10px 0;
  background-color: rgba(255, 255, 255, 0.2);
}
.on-blog-2-card .month-elm {
  display: block;
  font-family: var(--on-font-2);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
}
.on-blog-2-card .meta-elm {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.on-blog-2-card .meta-elm li {
  border-radius: 4px;
  padding: 0px 12px;
  font-family: var(--on-font-1);
  font-size: 13px;
  font-weight: 500;
  background-color: #f1f3f5;
  color: #363637;
}
.on-blog-2-card .meta-elm li:first-child {
  background-color: #e5ebff;
  color: var(--on-clr-pr-2);
}
.on-blog-2-card .title-elm {
  font-family: var(--on-font-2);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.27;
  color: var(--on-clr-h-2);
  margin-bottom: 0;
}
.on-blog-2-card .title-elm a {
  transition: var(--on-cube-1);
}
.on-blog-2-card .title-elm a:hover {
  color: var(--on-clr-pr-2);
}
.on-blog-2 {
  /* the divider bleeds to the viewport edges, broken only by the button —
     dot · line · button · line · dot, laid out in DOM order */
}
.on-blog-2-bottom {
  position: relative;
  width: 100%;
  margin-top: 60px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.on-blog-2-bottom .line-elm {
  flex: 1;
  height: 1px;
  background-color: #d9d9d9;
  position: relative;
  z-index: 1;
}
.on-blog-2-bottom .dot-elm {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background-color: rgba(29, 30, 227, 0.08);
  position: absolute;
  right: -5px;
  top: -9px;
}
.on-blog-2-bottom .dot-elm::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background-color: #1d1ee3;
}
.on-blog-2-bottom .dot-elm:is(.has-right) {
  right: auto;
  left: -5px;
}
.on-blog-2-bottom .on-pr-btn-3 {
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  .on-blog-2-bottom {
    padding: 0 16px;
    gap: 16px;
  }
  .on-blog-2-bottom .dot-elm {
    display: none;
  }
}

/*
    blog-2-end
*/
/*
    blog-3-start
*/
.on-blog-3-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.on-blog-3-sec-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
}
.on-blog-3-sec-title .left {
  max-width: 656px;
}
.on-blog-3-sec-title .right {
  max-width: 501px;
  padding-top: 8px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-blog-3-sec-title {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
  }
  .on-blog-3-sec-title .left,
  .on-blog-3-sec-title .right {
    max-width: 100%;
    padding-top: 0;
  }
}
.on-blog-3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-blog-3-grid {
    gap: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .on-blog-3-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .on-blog-3-grid .on-blog-3-card:last-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 767px) {
  .on-blog-3-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
.on-blog-3-card .img-elm {
  position: relative;
  z-index: 1;
  aspect-ratio: 452/360;
  border-radius: 12px;
  margin-bottom: 24px;
}
.on-blog-3-card .img-elm > img {
  transition: transform 0.5s ease;
}
.on-blog-3-card:hover .img-elm > img {
  transform: scale(1.06);
}
.on-blog-3-card {
  /* the two chips share size/shape, only the fill differs */
}
.on-blog-3-card .meta-elm {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.on-blog-3-card .meta-elm span {
  border-radius: 4px;
  padding: 9px 12px;
  font-family: var(--on-font-1);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--on-clr-h-3);
}
.on-blog-3-card .cat-elm {
  background-color: rgba(16, 236, 176, 0.52);
}
.on-blog-3-card .date-elm {
  background-color: #f4f7f3;
}
.on-blog-3-card .title-elm {
  font-size: 22px;
  line-height: 28px;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.on-blog-3-card .title-elm a {
  transition: var(--on-cube-1);
}
.on-blog-3-card:hover .title-elm a {
  text-decoration: underline;
}
.on-blog-3-card {
  /* rest state is a muted dark line + grey disc; hover swaps both to the
     primary mint so the whole row reads as one live control */
}
.on-blog-3-card .link-elm {
  display: flex;
  align-items: center;
  gap: 12px;
}
.on-blog-3-card .link-elm .text-elm {
  flex: none;
  font-family: var(--on-font-1);
  font-size: 16px;
  color: rgba(20, 28, 20, 0.64);
}
.on-blog-3-card .link-elm .line-elm {
  flex: 1;
  height: 1px;
  background-color: rgba(20, 28, 20, 0.2);
  transition: background-color 0.4s ease;
}
.on-blog-3-card .link-elm .icon-elm {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #f4f7f3;
  color: var(--on-clr-h-3);
  font-size: 16px;
  transition: background-color 0.4s ease, transform 0.4s ease;
}
.on-blog-3-card:hover .link-elm .line-elm,
.on-blog-3-card:hover .link-elm .icon-elm {
  background-color: var(--on-clr-pr-3);
}
.on-blog-3-card:hover .link-elm .icon-elm {
  transform: rotate(45deg);
}
.on-blog-3-card:hover .link-elm .text-elm {
  color: #000;
  opacity: 1;
}
@media (max-width: 767px) {
  .on-blog-3-card .title-elm {
    font-size: 20px;
    line-height: 26px;
  }
}
.on-blog-3-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 52px;
  padding: 16px 0;
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 88px;
}
@media (max-width: 767px) {
  .on-blog-3-bottom {
    margin-top: 40px;
    padding: 14px 0;
  }
}

/*
    blog-3-end
*/
/*
    contact-1-start
*/
.on-contact-1-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--on-clr-h-1);
  padding-top: 100px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-contact-1-area {
    padding-top: 90px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-contact-1-area {
    padding-top: 85px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-contact-1-area {
    padding-top: 75px;
  }
}
@media (max-width: 767px) {
  .on-contact-1-area {
    padding-top: 60px;
  }
}
.on-contact-1 {
  /*
      bg — the photo is dropped behind a 64% wash, then both ends are pulled
      back to solid so the band reads as one plate
  */
}
.on-contact-1-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.on-contact-1-bg img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.on-contact-1-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(2, 61, 63, 0.64);
}
.on-contact-1-overlay {
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  height: 201px;
  pointer-events: none;
}
.on-contact-1-overlay:is(.has-top) {
  top: 0;
  background: linear-gradient(180deg, var(--on-clr-h-1) 0%, rgba(2, 61, 63, 0) 100%);
}
.on-contact-1-overlay:is(.has-bottom) {
  bottom: 0;
  background: linear-gradient(0deg, var(--on-clr-h-1) 0%, rgba(2, 61, 63, 0) 100%);
}
.on-contact-1 {
  /* one very soft lime pool sitting under the middle of the band */
}
.on-contact-1-glow {
  position: absolute;
  left: 32.5%;
  top: 42%;
  z-index: -1;
  width: 669px;
  max-width: 40%;
  height: 141px;
  border-radius: 50%;
  background-color: var(--on-clr-pr-1);
  filter: blur(190px);
  pointer-events: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-contact-1-glow {
    display: none;
  }
}
.on-contact-1-wrap {
  display: flex;
  align-items: flex-start;
  gap: 42px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-contact-1-wrap {
    gap: 36px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-contact-1-wrap {
    gap: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-contact-1-wrap {
    display: block;
  }
}
.on-contact-1 {
  /*
      left
  */
}
.on-contact-1-left {
  flex: 0 0 650px;
  width: 650px;
  /* the copy starts lower than the panel beside it */
  margin-top: 44px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-contact-1-left {
    flex-basis: 520px;
    width: 520px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-contact-1-left {
    flex-basis: 430px;
    width: 430px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-contact-1-left {
    width: 100%;
    margin-top: 0;
    margin-bottom: 48px;
  }
}
.on-contact-1-sec-title {
  max-width: 516px;
  margin-bottom: 60px;
}
.on-contact-1-sec-title .on-sec-title-1 {
  font-size: 64px;
  line-height: 68px;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 16px;
}
.on-contact-1-sec-title .text-elm {
  color: #fff;
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-contact-1-sec-title {
    margin-bottom: 48px;
  }
  .on-contact-1-sec-title .on-sec-title-1 {
    font-size: 52px;
    line-height: 58px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-contact-1-sec-title {
    margin-bottom: 44px;
  }
  .on-contact-1-sec-title .on-sec-title-1 {
    font-size: 44px;
    line-height: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-contact-1-sec-title {
    max-width: 100%;
    margin-bottom: 40px;
  }
  .on-contact-1-sec-title .on-sec-title-1 {
    font-size: 40px;
    line-height: 46px;
  }
}
@media (max-width: 767px) {
  .on-contact-1-sec-title {
    max-width: 100%;
    margin-bottom: 34px;
  }
  .on-contact-1-sec-title .on-sec-title-1 {
    font-size: 32px;
    line-height: 38px;
  }
}
.on-contact-1-info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}
@media (max-width: 767px) {
  .on-contact-1-info {
    display: block;
  }
}
.on-contact-1-list {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.on-contact-1-list .label-elm {
  display: block;
  font-family: var(--on-font-1);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--on-clr-pr-1);
  margin-bottom: 10px;
}
.on-contact-1-list .text-elm {
  font-family: var(--on-font-1);
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .on-contact-1-list {
    gap: 28px;
  }
}
@media (max-width: 767px) {
  .on-contact-1-list {
    gap: 24px;
    margin-bottom: 40px;
  }
}
.on-contact-1 {
  /* the plate, the figure and the sign-off are one exported piece */
}
.on-contact-1-ceo {
  position: relative;
  flex: 0 0 auto;
  width: 338px;
}
.on-contact-1-ceo .img-elm {
  display: block;
  width: 292px;
}
.on-contact-1-ceo .sign-elm {
  display: block;
  width: 137px;
  margin-left: auto;
  margin-top: -46px;
}
.on-contact-1-ceo .name-elm {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-family: var(--on-font-1);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--on-clr-pr-1);
  margin: 8px 0 0;
}
.on-contact-1-ceo .name-elm::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--on-clr-pr-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-contact-1-ceo {
    width: 270px;
  }
  .on-contact-1-ceo .img-elm {
    width: 240px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-contact-1-ceo {
    width: 300px;
  }
  .on-contact-1-ceo .img-elm {
    width: 260px;
  }
}
@media (max-width: 767px) {
  .on-contact-1-ceo {
    width: 100%;
  }
  .on-contact-1-ceo .img-elm {
    width: 220px;
  }
  .on-contact-1-ceo .sign-elm {
    margin-top: -36px;
  }
}
.on-contact-1 {
  /*
      form panel
  */
}
.on-contact-1-form {
  flex: 0 0 708px;
  width: 708px;
  padding: 48px 44px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background-color: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.on-contact-1-form .title-elm {
  font-family: var(--on-font-2);
  font-size: 28px;
  font-weight: 600;
  line-height: 32px;
  color: #fff;
  margin-bottom: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-contact-1-form {
    flex-basis: 560px;
    width: 560px;
    padding: 36px 32px;
  }
  .on-contact-1-form .title-elm {
    font-size: 24px;
    line-height: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-contact-1-form {
    flex-basis: 476px;
    width: 476px;
    padding: 32px 28px;
  }
  .on-contact-1-form .title-elm {
    font-size: 22px;
    line-height: 28px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-contact-1-form {
    width: 100%;
    padding: 32px 28px;
  }
  .on-contact-1-form .title-elm {
    font-size: 22px;
    line-height: 28px;
  }
}
@media (max-width: 767px) {
  .on-contact-1-form {
    padding: 24px 20px;
    border-radius: 18px;
  }
}
.on-contact-1 {
  /* the service chips wrap into as many rows as they need */
}
.on-contact-1-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 48px;
}
.on-contact-1-tag li {
  font-family: var(--on-font-1);
  font-size: 15px;
  font-weight: 400;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.72);
  padding: 10px 12px;
  border-radius: 80px;
  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: var(--on-cube-1);
  text-transform: uppercase;
}
.on-contact-1-tag li:hover, .on-contact-1-tag li:is(.active) {
  background-color: var(--on-clr-pr-1);
  color: var(--on-clr-h-1);
}
@media (max-width: 767px) {
  .on-contact-1-tag {
    margin-bottom: 32px;
  }
  .on-contact-1-tag li {
    font-size: 14px;
    padding: 9px 11px;
  }
}
.on-contact-1-field-row {
  display: flex;
  gap: 20px;
}
.on-contact-1-field-row > * {
  flex: 1;
  min-width: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-contact-1-field-row {
    display: block;
  }
}
.on-contact-1-field {
  margin-bottom: 32px;
}
.on-contact-1-field .label-elm {
  display: block;
  font-family: var(--on-font-2);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: 20px;
}
.on-contact-1-field input,
.on-contact-1-field textarea {
  display: block;
  width: 100%;
  font-family: var(--on-font-2);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.4;
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0 0 16px;
  transition: var(--on-cube-1);
}
.on-contact-1-field input::placeholder,
.on-contact-1-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.72);
}
.on-contact-1-field input:focus,
.on-contact-1-field textarea:focus {
  border-bottom-color: var(--on-clr-pr-1);
}
.on-contact-1-field textarea {
  height: 74px;
  resize: none;
}
@media (max-width: 767px) {
  .on-contact-1-field {
    margin-bottom: 24px;
  }
  .on-contact-1-field .label-elm {
    margin-bottom: 16px;
  }
  .on-contact-1-field input,
  .on-contact-1-field textarea {
    font-size: 16px;
  }
}
.on-contact-1 {
  /*
      marquee — sits on the floor of the band as a watermark
  */
}
.on-contact-1-marquee {
  margin-top: 8px;
  overflow: hidden;
  margin-bottom: -12px;
}
.on-contact-1-marquee .text-elm {
  display: inline-block;
  font-family: var(--on-font-2);
  font-size: 126px;
  font-weight: 600;
  line-height: 92px;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  padding-right: 60px;
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-contact-1-marquee .text-elm {
    font-size: 100px;
    line-height: 76px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-contact-1-marquee .text-elm {
    font-size: 84px;
    line-height: 64px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-contact-1-marquee .text-elm {
    font-size: 68px;
    line-height: 54px;
  }
}
@media (max-width: 767px) {
  .on-contact-1-marquee {
    margin-top: 30px;
  }
  .on-contact-1-marquee .text-elm {
    font-size: 46px;
    line-height: 40px;
    padding-right: 30px;
  }
}

/*
    contact-1-end
*/
/*
    error-page-start
*/
.on-error-page-area {
  position: relative;
  overflow: hidden;
}
.on-error-page-content {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.on-error-page {
  /* the numerals sit low in opacity so the message on top stays the focus */
}
.on-error-page-number {
  font-family: var(--on-font-2);
  font-weight: 700;
  font-size: 220px;
  line-height: 1;
  color: var(--on-clr-h-1);
  opacity: 0.08;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-error-page-number {
    font-size: 190px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-error-page-number {
    font-size: 160px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-error-page-number {
    font-size: 130px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-error-page-number {
    font-size: 100px;
  }
}
@media (max-width: 767px) {
  .on-error-page-number {
    font-size: 70px;
  }
}
.on-error-page-title {
  font-size: 36px;
  margin-bottom: 16px;
}
@media (max-width: 767px) {
  .on-error-page-title {
    font-size: 26px;
  }
}
.on-error-page-text {
  margin-bottom: 32px;
}

/*
    error-page-end
*/
/*
    footer-1-start
*/
.on-footer-1 {
  /* the band opens with 100px of clear ground — that gap is what lets the
     lime mark read at full strength before the veil starts */
}
.on-footer-1-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #ecf8f1;
  padding-top: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-footer-1-area {
    padding-top: 80px;
  }
}
@media (max-width: 767px) {
  .on-footer-1-area {
    padding-top: 60px;
  }
}
.on-footer-1 {
  /* the mark is oversized and cropped by the top edge of the band */
}
.on-footer-1-shape {
  position: absolute;
  left: 41.8%;
  top: -38px;
  z-index: -2;
  width: 315px;
  pointer-events: none;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-footer-1-shape {
    width: 240px;
  }
}
.on-footer-1 {
  /*
      a 6% white veil over everything below the social row — this is what
      knocks the mark back once it passes behind the columns
  */
}
.on-footer-1-front {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(30px);
}
.on-footer-1 {
  /*
      social row
  */
  /*
      the two rules run the full width of the viewport while the cells and
      their dividers stay inside the container — one strip, two owners
  */
}
.on-footer-1-social {
  border-top: 1px solid rgba(2, 61, 63, 0.12);
  border-bottom: 1px solid rgba(2, 61, 63, 0.12);
}
.on-footer-1-social ul {
  display: flex;
  flex-wrap: wrap;
}
.on-footer-1-social li {
  flex: 1;
  min-width: 0;
  border-left: 1px solid rgba(2, 61, 63, 0.12);
}
.on-footer-1-social li:last-child {
  border-right: 1px solid rgba(2, 61, 63, 0.12);
}
.on-footer-1-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 80px;
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  color: rgba(2, 61, 63, 0.72);
  transition: var(--on-cube-1);
}
.on-footer-1-social a i {
  font-size: 18px;
  color: var(--on-clr-h-1);
  transition: var(--on-cube-1);
}
.on-footer-1-social {
  /* the live cell fills, and its mark goes lime against the dark */
}
.on-footer-1-social li:hover a,
.on-footer-1-social li.active a {
  background-color: var(--on-clr-h-1);
  color: #fff;
}
.on-footer-1-social li:hover a i,
.on-footer-1-social li.active a i {
  color: var(--on-clr-pr-1);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-footer-1-social {
    flex-wrap: wrap;
  }
  .on-footer-1-social li {
    flex: 0 0 33.333%;
  }
  .on-footer-1-social a {
    height: 68px;
    font-size: 15px;
  }
}
@media (max-width: 767px) {
  .on-footer-1-social {
    flex-wrap: wrap;
  }
  .on-footer-1-social li {
    flex: 0 0 50%;
    border-left: 1px solid rgba(2, 61, 63, 0.12);
  }
  .on-footer-1-social a {
    height: 58px;
    font-size: 14px;
  }
}
.on-footer-1 {
  /*
      widgets
  */
}
.on-footer-1-wrap {
  display: flex;
  gap: 100px;
  padding: 80px 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-footer-1-wrap {
    gap: 50px;
    padding: 70px 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-footer-1-wrap {
    gap: 50px;
    padding: 70px 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-footer-1-wrap {
    gap: 40px;
    padding: 60px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-footer-1-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px 40px;
    padding: 54px 0;
  }
}
@media (max-width: 767px) {
  .on-footer-1-wrap {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 44px 0;
  }
}
.on-footer-1-about {
  flex: 0 0 402px;
  width: 402px;
}
.on-footer-1-about .logo-elm {
  display: block;
  width: 236px;
  margin-bottom: 32px;
}
.on-footer-1-about .text-elm {
  font-family: var(--on-font-1);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(2, 61, 63, 0.8);
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-footer-1-about {
    flex-basis: 340px;
    width: 340px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-footer-1-about {
    flex-basis: 300px;
    width: 300px;
  }
  .on-footer-1-about .logo-elm {
    width: 200px;
    margin-bottom: 24px;
  }
  .on-footer-1-about .text-elm {
    font-size: 16px;
    line-height: 26px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-footer-1-about {
    width: 100%;
    grid-column: 1/-1;
  }
  .on-footer-1-about .logo-elm {
    width: 200px;
    margin-bottom: 20px;
  }
  .on-footer-1-about .text-elm {
    font-size: 16px;
    line-height: 26px;
  }
}
.on-footer-1-nav-wrap {
  display: flex;
  gap: 100px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-footer-1-nav-wrap {
    gap: 50px;
  }
}
@media (max-width: 767px) {
  .on-footer-1-nav-wrap {
    display: block;
  }
}
.on-footer-1-nav {
  min-width: 0;
  /*
      a faint rule the width of the column, with a 28px lime tick sitting
      on its left end — not one solid lime underline
  */
}
.on-footer-1-nav .title-elm {
  position: relative;
  display: block;
  font-family: var(--on-font-1);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-clr-h-1);
  padding-bottom: 8px;
  margin-bottom: 32px;
}
.on-footer-1-nav .title-elm::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: rgba(2, 61, 63, 0.2);
}
.on-footer-1-nav .title-elm::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background-color: var(--on-clr-pr-1);
}
.on-footer-1-nav li + li {
  margin-top: 12px;
}
.on-footer-1-nav a {
  position: relative;
  display: inline-block;
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(2, 61, 63, 0.8);
  transition: var(--on-cube-1);
  /*
      the rule wipes in from the left — scaleX rather than width so
      it composites, and the row never reflows on hover
  */
}
.on-footer-1-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}
.on-footer-1-nav a:hover {
  color: var(--on-clr-h-1);
}
.on-footer-1-nav a:hover::after {
  transform: scaleX(1);
}
@media (max-width: 767px) {
  .on-footer-1-nav + .on-footer-1-nav {
    margin-top: 34px;
  }
}
.on-footer-1-newsletter {
  flex: 0 0 394px;
  width: 394px;
}
.on-footer-1-newsletter .title-elm {
  font-family: var(--on-font-2);
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  color: var(--on-clr-h-1);
  margin-bottom: 12px;
}
.on-footer-1-newsletter .text-elm {
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(2, 61, 63, 0.8);
  margin-bottom: 24px;
}
.on-footer-1-newsletter {
  /* one pill holding the field, with the send disc sitting inside it */
}
.on-footer-1-newsletter .form-elm {
  position: relative;
  height: 56px;
  border-radius: 100px;
  background-color: #fff;
}
.on-footer-1-newsletter input {
  width: 100%;
  height: 100% !important;
  font-family: var(--on-font-1);
  font-size: 15px;
  font-weight: 400;
  color: var(--on-clr-h-1);
  background: transparent;
  border: 0;
  padding: 0 60px 0 24px;
}
.on-footer-1-newsletter input::placeholder {
  color: rgba(2, 61, 63, 0.6);
}
.on-footer-1-newsletter button {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--on-clr-pr-1);
  color: var(--on-clr-h-1);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--on-cube-1);
}
.on-footer-1-newsletter button:hover {
  background-color: var(--on-clr-h-1);
  color: var(--on-clr-pr-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-footer-1-newsletter {
    flex-basis: 340px;
    width: 340px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-footer-1-newsletter {
    flex-basis: 300px;
    width: 300px;
  }
  .on-footer-1-newsletter .title-elm {
    font-size: 20px;
    line-height: 26px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-footer-1-newsletter {
    width: 100%;
    grid-column: 1/-1;
  }
  .on-footer-1-newsletter .title-elm {
    font-size: 20px;
    line-height: 26px;
  }
}
.on-footer-1 {
  /*
      bottom
  */
}
.on-footer-1-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid rgba(2, 61, 63, 0.24);
}
.on-footer-1-bottom .copy-elm {
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: rgba(2, 61, 63, 0.72);
  margin-bottom: 0;
}
.on-footer-1-bottom .copy-elm a {
  color: var(--on-clr-h-1);
  font-weight: 500;
  transition: var(--on-cube-1);
}
.on-footer-1-bottom .copy-elm a:hover {
  color: #016c6e;
}
.on-footer-1-bottom .link-elm {
  display: flex;
  align-items: center;
  gap: 24px;
}
.on-footer-1-bottom .link-elm a {
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: rgba(2, 61, 63, 0.72);
  transition: var(--on-cube-1);
}
.on-footer-1-bottom .link-elm a:hover {
  color: var(--on-clr-h-1);
}
@media (max-width: 767px) {
  .on-footer-1-bottom {
    display: block;
    text-align: center;
    padding: 24px 0;
  }
  .on-footer-1-bottom .link-elm {
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
  }
}

/*
    footer-1-end
*/
/*
    footer-2-start
*/
.on-footer-2-area {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--on-clr-h-2);
  padding-top: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-footer-2-area {
    padding-top: 80px;
  }
}
@media (max-width: 767px) {
  .on-footer-2-area {
    padding-top: 60px;
  }
}
.on-footer-2-bg-img {
  position: absolute;
  z-index: -2;
  inset: 0;
}
.on-footer-2-bg-img img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  mix-blend-mode: luminosity;
}
.on-footer-2 {
  /* two soft colour pools that sit behind everything else */
}
.on-footer-2-glow {
  position: absolute;
  z-index: -1;
  width: 562px;
  height: 522px;
  border-radius: 50%;
  background-color: #1D1EE3;
  opacity: 0.5;
  filter: blur(90px);
  pointer-events: none;
}
.on-footer-2-glow.has-v1 {
  left: -12%;
  top: -12%;
}
.on-footer-2-glow.has-v2 {
  right: -8%;
  bottom: -9%;
  opacity: 0.4;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-footer-2-glow {
    width: 400px;
    height: 380px;
  }
}
.on-footer-2 {
  /* oversized watermark — a blurred blue pass under a translucent white one */
}
.on-footer-2-title {
  position: relative;
  z-index: 0;
  font-family: var(--on-font-2);
  font-weight: 700;
  font-size: 196px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #B6B6ED;
  text-align: center;
  margin-bottom: 0;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-footer-2-title {
    font-size: 150px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-footer-2-title {
    font-size: 110px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-footer-2-title {
    font-size: 84px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-footer-2-title {
    font-size: 60px;
  }
}
@media (max-width: 767px) {
  .on-footer-2-title {
    font-size: 38px;
  }
}
.on-footer-2 {
  /*
      social — filled pills instead of footer-1's bordered strip
  */
}
.on-footer-2-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.on-footer-2-social li {
  flex-grow: 1;
}
.on-footer-2-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 32px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
  transition: var(--on-cube-1);
}
.on-footer-2-social a i {
  font-size: 18px;
  color: #fff;
}
.on-footer-2-social li:hover a,
.on-footer-2-social li.active a {
  background-color: var(--on-clr-pr-2);
  border-color: var(--on-clr-pr-2);
  color: #fff;
  box-shadow: 10px 12px 24px rgba(42, 92, 255, 0.48);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-footer-2-social {
    margin-top: 30px;
  }
  .on-footer-2-social a {
    height: 48px;
    padding: 0 22px;
    font-size: 15px;
  }
}
@media (max-width: 767px) {
  .on-footer-2-social {
    gap: 10px;
  }
  .on-footer-2-social a {
    height: 44px;
    padding: 0 18px;
    font-size: 14px;
  }
}
.on-footer-2 {
  /*
      widgets — same skeleton as footer-1's &-wrap, dark palette
  */
}
.on-footer-2-wrap {
  display: flex;
  gap: 50px;
  padding: 100px 0;
  justify-content: space-between;
  flex-wrap: wrap;
}
.on-footer-2-about {
  max-width: 395px;
}
.on-footer-2-about .logo-elm {
  display: block;
  width: 216px;
  margin-bottom: 32px;
}
.on-footer-2-about .text-elm {
  font-family: var(--on-font-1);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-footer-2-about {
    flex-basis: 340px;
    width: 340px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-footer-2-about {
    flex-basis: 280px;
    width: 280px;
  }
  .on-footer-2-about .logo-elm {
    width: 180px;
    margin-bottom: 24px;
  }
  .on-footer-2-about .text-elm {
    font-size: 16px;
    line-height: 26px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-footer-2-about {
    width: 100%;
    grid-column: 1/-1;
  }
  .on-footer-2-about .logo-elm {
    width: 180px;
    margin-bottom: 20px;
  }
  .on-footer-2-about .text-elm {
    font-size: 16px;
    line-height: 26px;
  }
}
.on-footer-2-nav-wrap {
  display: flex;
  gap: 100px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-footer-2-nav-wrap {
    gap: 50px;
  }
}
@media (max-width: 767px) {
  .on-footer-2-nav-wrap {
    display: block;
  }
}
.on-footer-2-nav {
  min-width: 0;
}
.on-footer-2-nav .title-elm {
  position: relative;
  display: block;
  font-family: var(--on-font-1);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 8px;
  margin-bottom: 32px;
}
.on-footer-2-nav .title-elm::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}
.on-footer-2-nav .title-elm::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background-color: var(--on-clr-pr-2);
}
.on-footer-2-nav li + li {
  margin-top: 12px;
}
.on-footer-2-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.8);
  transition: var(--on-cube-1);
}
.on-footer-2-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}
.on-footer-2-nav a:hover {
  color: #F6BA1D;
}
.on-footer-2-nav a:hover::after {
  transform: scaleX(1);
}
.on-footer-2-nav {
  /* marks the current page in this list */
}
.on-footer-2-nav li.active a {
  color: #F6BA1D;
  text-decoration: underline;
}
.on-footer-2-nav li.active a::after {
  display: none;
}
@media (max-width: 767px) {
  .on-footer-2-nav + .on-footer-2-nav {
    margin-top: 34px;
  }
}
.on-footer-2 {
  /* phone line + the "join us" link, standing in for footer-1's newsletter form */
}
.on-footer-2-contact {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.on-footer-2-contact .phone-elm {
  display: flex;
  align-items: center;
  gap: 12px;
}
.on-footer-2-contact .icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 16px;
}
.on-footer-2-contact .text-elm {
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.375;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0;
}
.on-footer-2-contact .text-elm a {
  display: block;
  color: #fff;
  font-weight: 500;
  transition: var(--on-cube-1);
}
.on-footer-2-contact .text-elm a:hover {
  color: #F6BA1D;
}
.on-footer-2-contact .join-elm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--on-font-1);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  transition: var(--on-cube-1);
}
.on-footer-2-contact .join-elm span {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
}
.on-footer-2-contact .join-elm i {
  font-size: 14px;
  transition: var(--on-cube-1);
}
.on-footer-2-contact .join-elm:hover i {
  transform: translate(2px, -2px);
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-footer-2-contact {
    width: 100%;
    grid-column: 1/-1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px;
  }
}
.on-footer-2 {
  /*
      bottom
  */
}
.on-footer-2-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.on-footer-2-bottom .copy-elm {
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0;
}
.on-footer-2-bottom .copy-elm a {
  color: #fff;
  font-weight: 500;
  transition: var(--on-cube-1);
}
.on-footer-2-bottom .copy-elm a:hover {
  color: var(--on-clr-pr-2);
}
.on-footer-2-bottom .link-elm {
  display: flex;
  align-items: center;
  gap: 24px;
}
.on-footer-2-bottom .link-elm a {
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.72);
  transition: var(--on-cube-1);
}
.on-footer-2-bottom .link-elm a:hover {
  color: #fff;
}
@media (max-width: 767px) {
  .on-footer-2-bottom {
    display: block;
    text-align: center;
    padding: 24px 0;
  }
  .on-footer-2-bottom .link-elm {
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
  }
}

/*
    footer-2-end
*/
/*
    footer-3-start — the widgets (about/nav/contact) are the on-footer-2-wrap
    markup reused as-is; only the bg treatment, social strip and bottom bar
    are new here
*/
.on-footer-3-big-title {
  overflow: hidden;
  margin-bottom: -50px;
}
.on-footer-3-big-title .text-elm {
  font-size: 200px;
  line-height: 1;
  letter-spacing: -0.02em;
  /*
      wow hands this the reveal on scroll — fill-mode holds the
      settled state (opacity 1, no offset) once it lands
  */
}
.on-footer-3-big-title .text-elm:is(.riseIn2) {
  animation-name: on-footer-3-title-in;
  animation-duration: 1200ms;
  animation-timing-function: cubic-bezier(0.62, 0.05, 0.01, 0.99);
  animation-fill-mode: both;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-footer-3-big-title {
    margin-bottom: -38px;
  }
  .on-footer-3-big-title .text-elm {
    font-size: 150px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .on-footer-3-big-title {
    margin-bottom: -28px;
  }
  .on-footer-3-big-title .text-elm {
    font-size: 110px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .on-footer-3-big-title {
    margin-bottom: -20px;
  }
  .on-footer-3-big-title .text-elm {
    font-size: 84px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .on-footer-3-big-title {
    margin-bottom: -14px;
  }
  .on-footer-3-big-title .text-elm {
    font-size: 60px;
  }
}
@media (max-width: 767px) {
  .on-footer-3-big-title {
    margin-bottom: -10px;
  }
  .on-footer-3-big-title .text-elm {
    font-size: 38px;
  }
}
.on-footer-3-top {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--on-clr-h-3);
}
.on-footer-3-top .on-footer-2-about {
  max-width: 480px;
}
.on-footer-3-top .on-footer-2-nav .title-elm::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background-color: var(--on-clr-pr-3);
}
.on-footer-3-top .on-footer-2-nav a:hover {
  color: var(--on-clr-pr-3);
}
.on-footer-3-top .on-footer-2-contact .text-elm a:hover {
  color: var(--on-clr-pr-3);
}
.on-footer-3-bg-img {
  position: absolute;
  z-index: -2;
  bottom: 0;
  left: 0;
  width: 100%;
  mix-blend-mode: luminosity;
}
.on-footer-3-bg-img img {
  width: 100%;
}
.on-footer-3 {
  /* soft mint pool sitting under the social strip */
}
.on-footer-3-bg-glow {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}
.on-footer-3-social-box {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.on-footer-3-social {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.on-footer-3-social li {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.on-footer-3-social li:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.on-footer-3-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 80px;
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
  transition: var(--on-cube-1);
}
.on-footer-3-social a i {
  font-size: 18px;
  color: #fff;
}
.on-footer-3-social a:hover {
  color: #fff;
}
@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .on-footer-3-social {
    grid-template-columns: repeat(2, 1fr);
  }
  .on-footer-3-social li {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }
  .on-footer-3-social li:nth-child(2n+1) {
    border-left: none;
  }
  .on-footer-3-social a {
    height: 56px;
    font-size: 14px;
  }
}
.on-footer-3-bottom {
  position: relative;
  background-color: var(--on-clr-pr-3);
  margin-top: 8px;
}
.on-footer-3-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  padding-bottom: 24px;
}
.on-footer-3-bottom .copy-elm {
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  color: var(--on-clr-h-3);
  margin-bottom: 0;
}
.on-footer-3-bottom .copy-elm a {
  font-weight: 600;
  text-decoration: underline;
}
.on-footer-3-bottom .link-elm {
  display: flex;
  align-items: center;
  gap: 32px;
}
.on-footer-3-bottom .link-elm a {
  font-family: var(--on-font-1);
  font-size: 16px;
  font-weight: 400;
  color: var(--on-clr-h-3);
  transition: var(--on-cube-1);
}
.on-footer-3-bottom .link-elm a:hover {
  opacity: 0.7;
}
@media (max-width: 767px) {
  .on-footer-3-bottom .container {
    justify-content: center;
    text-align: center;
  }
  .on-footer-3-bottom .link-elm {
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@keyframes on-footer-3-title-in {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*
    footer-3-end
*/
/*
    pages
*/
/*
    home-page-css-start
*/
/* the preloader markup is shared across every home page — home-2 keeps its
   own palette here rather than home-1's teal/lime */
.on-home-2 .on-preloader-1-curtain span {
  background-color: var(--on-clr-h-2);
}
.on-home-2 .on-preloader-1 .bar-elm span {
  background-color: var(--on-clr-pr-2);
}
.on-home-2 .on-preloader-1 .count-elm sup {
  color: var(--on-clr-pr-2);
}

@media (min-width: 1800px), only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px) {
  .on-home-2::-webkit-scrollbar-thumb {
    background: var(--on-clr-pr-2);
  }
}

/*
    home-page-css-end
*/

/*# sourceMappingURL=main.css.map */