@font-face {
  font-family: 'Futuru-Black';
  font-display: swap;
  src: url('font/Futuru-Black.otf');
  /* IE9 Compat Modes */
  src: url('font/Futuru-Blackd41d.otf?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/Futuru-Black.woff2') format('woff2'), /* Modern Browsers */ url('font/Futuru-Black.woff') format('woff'), /* Modern Browsers */ url('font/Futuru-Black.ttf') format('truetype');
  /* Safari, Android, iOS */
  font-style: normal;
  font-weight: bold;
  text-rendering: optimizeLegibility;
}
.why-biofics {
  padding: 70px 0;
  background: #ffffff;
}
.section-label {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #6eaa30;
  margin-bottom: 25px;
}
.section-title {
  font-size: clamp(42px, 3vw, 80px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -2.5px;
  color: #103c27;
  margin: 0;
}
.section-description {
  font-size: 18px;
  line-height: 1.5;
  color: #6c7e76;
  font-weight: 400;
  margin: 0;
}
.heading-row {
  margin-bottom: 55px;
}
/* Cards */
.biofics-card {
  background: #f2f6ef;
  border: 1px solid #dfe8da;
  border-radius: 30px;
  padding: 34px 35px 36px;
  height: 100%;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}
.biofics-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(22, 60, 40, 0.08);
}
.card-number {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #007a6e;
  text-transform: uppercase;
}
.card-content {
  margin-top: auto;
}
.card-title {
  font-size: 26px;
  line-height: 1.3;
  font-weight: 600;
  color: #123f2b;
  margin-bottom: 16px;
}
.card-description {
  font-size: 17px;
  line-height: 1.5;
  color: #6a7d74;
  font-weight: 400;
  margin-bottom: 0;
}
.conversion-section {
  background: #062719;
  padding: 90px 0 60px;
  color: #ffffff;
}
.conversion-container {}
/* Heading */
.conversion-label {
  color:var(--kb-lime);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.conversion-title {
  font-size: clamp(42px, 3vw, 80px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -2.5px;
  color: #ffffff;
  margin-bottom: 0;
}
.conversion-description {
  color: #a3b2aa;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
}
.conversion-heading {
  margin-bottom: 68px;
}
/* Timeline */
.conversion-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.timeline-item {
  position: relative;
  padding: 52px 25px 35px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.timeline-item:first-child {
  padding-left: 24px;
}
.timeline-item:last-child {
  border-right: none;
}
/* Timeline Dots */
.timeline-item::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 24px;
  width: 16px;
  height: 16px;
  background: var(--kb-lime);
  border-radius: 50%;
}
.timeline-number {
  color: #b5df48;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  margin-bottom: 56px;
}
.timeline-title {
  font-size: 21px;
  line-height: 1.3;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 16px;
}
.timeline-description {
  font-size: 16px;
  line-height: 1.5;
  color: #98aaa0;
  font-weight: 500;
  margin: 0;
}
/* Tablet */
@media (max-width: 1199.98px) {
  .conversion-title {
    font-size: 48px;
  }
  .conversion-description {
    font-size: 19px;
  }
  .timeline-item {
    padding: 45px 18px 30px;
  }
  .timeline-item::before {
    left: 18px;
  }
  .timeline-title {
    font-size: 23px;
  }
  .timeline-description {
    font-size: 16px;
  }
}
/* Mobile */
@media (max-width: 767.98px) {
  .conversion-section {
    padding: 55px 0 65px;
  }
  .conversion-label {
    font-size: 12px;
    margin-bottom: 20px;
  }
  .conversion-title {
    font-size: 39px;
    line-height: 1.12;
    letter-spacing: -1px;
  }
  .conversion-description {
    font-size: 17px;
    line-height: 1.7;
    margin-top: 25px;
  }
  .conversion-heading {
    margin-bottom: 45px;
  }
  .conversion-timeline {
    display: block;
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    margin-left: 8px;
  }
  .timeline-item {
    min-height: auto;
    padding: 0 0 40px 30px;
    border-right: none;
  }
  .timeline-item:first-child {
    padding-left: 30px;
  }
  .timeline-item:last-child {
    padding-bottom: 0;
  }
  .timeline-item::before {
    top: 4px;
    left: -8px;
    width: 15px;
    height: 15px;
  }
  .timeline-number {
    margin-bottom: 20px;
    font-size: 13px;
  }
  .timeline-title {
    font-size: 24px;
    margin-bottom: 12px;
  }
  .timeline-description {
    font-size: 16px;
  }
}
/* Tablet */
@media (max-width: 1199.98px) {
  .section-title {
    font-size: 48px;
  }
  .section-description {
    font-size: 19px;
  }
  .biofics-card {
    padding: 28px;
    min-height: 390px;
  }
  .card-title {
    font-size: 25px;
  }
  .card-description {
    font-size: 18px;
  }
}
/* Mobile */
@media (max-width: 767.98px) {
  .why-biofics {
    padding: 45px 0;
  }
  .section-label {
    font-size: 13px;
    margin-bottom: 20px;
  }
  .section-title {
    font-size: 38px;
    line-height: 1.15;
    letter-spacing: -1px;
  }
  .section-description {
    font-size: 17px;
    line-height: 1.7;
    margin-top: 25px;
  }
  .heading-row {
    margin-bottom: 30px;
  }
  .biofics-card {
    min-height: auto;
    padding: 30px;
    border-radius: 22px;
  }
  .card-content {
    margin-top: 50px;
  }
  .card-title {
    font-size: 25px;
    margin-bottom: 12px;
  }
  .card-description {
    font-size: 17px;
  }
}
.bcng-why-card {
  background: #fff;
  border-radius: 4px;
  padding: 30px 26px;
  height: 100%;
  border-left: 2px solid var(--kb-teal);
  border-top: 1px solid var(--kb-teal);
  border-right: 1px solid var(--kb-teal);
  border-bottom: 1px solid var(--kb-teal);
}
.bcng-why-card .bcng-why-icon {
  font-size: 1.3rem;
  margin-bottom: 14px;
  display: inline-block;
}
.bcng-why-card .bcng-why-icon i {
  background: linear-gradient(135deg, #9f7218, #cfc55e, #7a520a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 36px;
}
.bcng-why-card h4 {
  font-family: 'Futuru-Regular';
  font-size: 25px;
  font-weight: 600;
  color: var(--kb-teal);
  margin-bottom: 10px;
}
.bcng-why-card p {
  /* font-size: .92rem; */
  /* color: var(--bcng-body); */
  line-height: 1.4;
  margin: 0;
  font-weight: 400;
}
.feedstock-section {
  background: #e7eae3;
  padding: 40px 0 30px;
}
.feedstock-container {}
.section-label {
  color: #007a6e;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.feedstock-title {
  font-size: clamp(42px, 3vw, 80px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -3px;
  color: #103c27;
  margin-bottom: 0;
}
.feedstock-description {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  color: #6a7c74;
  margin: 0;
}
.feedstock-heading {
  margin-bottom: 55px;
}
/* Table Design */
.feedstock-table-wrap {
  border-radius: 30px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 40px rgba(21, 56, 35, 0.06);
}
.feedstock-table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.feedstock-table thead th {
  background: #103c27;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 24px 27px;
  vertical-align: middle;
  white-space: nowrap;
}
.feedstock-table tbody td {
  background: #fff;
  color: #596d63;
  font-size: 16px;
  font-weight: 400;
  padding: 11px 27px;
  vertical-align: middle;
  border-bottom: 1px solid #e5ebe5;
}
.feedstock-table tbody td:first-child {
  color: #103c27;
  font-weight: 700;
}
.feedstock-table th:not(:last-child), .feedstock-table td:not(:last-child) {
  border-right: 1px solid #cdd8d2;
}
.feedstock-table tbody tr:last-child td {
  border-bottom: none;
  padding-bottom: 32px;
}
.feedstock-table th:nth-child(1) {
  width: 23.5%;
}
.feedstock-table th:nth-child(2) {
  width: 25.8%;
}
.feedstock-table th:nth-child(3) {
  width: 26.8%;
}
.feedstock-table th:nth-child(4) {
  width: 23.9%;
}
.feedstock-note {
  font-size: 15px;
  line-height: 1.7;
  color: #819087;
  margin-top: 23px;
  margin-bottom: 0;
}
/* Tablet */
@media (max-width: 991.98px) {
  .feedstock-section {
    padding: 50px 0;
  }
  .feedstock-title {
    font-size: 56px;
    letter-spacing: -2px;
  }
  .feedstock-description {
    font-size: 19px;
    margin-top: 25px;
  }
  .feedstock-heading {
    margin-bottom: 35px;
  }
  .feedstock-table thead th {
    font-size: 13px;
    padding: 20px;
  }
  .feedstock-table tbody td {
    font-size: 18px;
    padding: 18px 20px;
  }
}
/* Mobile */
@media (max-width: 767.98px) {
  .feedstock-section {
    padding: 40px 0;
  }
  .section-label {
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 20px;
  }
  .feedstock-title {
    font-size: 42px;
    letter-spacing: -1.5px;
  }
  .feedstock-description {
    font-size: 17px;
    line-height: 1.7;
  }
  .feedstock-heading {
    margin-bottom: 30px;
  }
  .feedstock-table-wrap {
    border-radius: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .feedstock-table {
    min-width: 850px;
  }
  .feedstock-table thead th {
    font-size: 12px;
    padding: 18px;
  }
  .feedstock-table tbody td {
    font-size: 16px;
    padding: 17px 18px;
  }
  .feedstock-table tbody tr:last-child td {
    padding-bottom: 22px;
  }
  .feedstock-note {
    font-size: 13px;
    margin-top: 20px;
  }
}
@font-face {
  font-family: 'Futuru-Regular';
  font-display: swap;
  src: url('font/Futuru-Regular.otf');
  /* IE9 Compat Modes */
  src: url('font/Futuru-Regulard41d.otf?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/Futuru-Regular.woff2') format('woff2'), /* Modern Browsers */ url('font/Futuru-Regular.woff') format('woff'), /* Modern Browsers */ url('font/Futuru-Regular.ttf') format('truetype');
  /* Safari, Android, iOS */
  font-style: normal;
  font-weight: bold;
  text-rendering: optimizeLegibility;
}
.futuru_black {
  font-family: 'Futuru-Black';
}
.futuru_regular {
  font-family: 'Futuru-Regular';
}
.gallery-img {
  width: 100%;
  height: 312px;
  object-fit: cover;
  border-radius: 10px;
  cursor: zoom-in;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-img:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 50px 60px;
}
.lightbox.show {
  display: flex;
}
.lightbox-img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 5px;
}
.lightbox button {
  position: absolute;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  padding: 10px;
}
.close-btn {
  top: 15px;
  right: 25px;
  font-size: 40px;
}
.prev-btn, .next-btn {
  top: 50%;
  transform: translateY(-50%);
  font-size: 45px;
}
.prev-btn {
  left: 10px;
}
.next-btn {
  right: 10px;
}
.image-counter {
  position: absolute;
  bottom: 15px;
  color: #fff;
  font-size: 15px;
}
@media (max-width: 767px) {
  .gallery-img {
    height: 190px;
  }
  .lightbox {
    padding: 45px 35px;
  }
  .prev-btn {
    left: 0;
  }
  .next-btn {
    right: 0;
  }
}
@media (max-width: 575px) {
  .gallery-img {
    height: 150px;
  }
}
.video-wrap {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html, body {
  width: 100%;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  color: #052d1f;
}
#main {
  background: #f3f3f1;
}
.navbar-brand img {
  max-height: 55px;
  width: auto;
  object-fit: contain;
}
.navbar-brand2:after {
  content: "";
  height: 55px;
  width: 1px;
  background: #87938f;
  position: absolute;
  left: -14px;
  top: 8px;
}
#footer .navbar-brand2:after {
  background: hsl(0deg 0% 100% / 48%);
  height: 56px;
  top: 5px;
}
.content-inner {
  color: #009788;
}
.btn {
  background: #009788;
  color: #fff;
  padding: 8px 20px;
  border-radius: 10px;
  text-decoration: none;
}
.actives {
  color: var(--kb-teal) !important;
  border-color: var(--kb-teal) !important;
  text-decoration: none !important;
}
.btn:hover {
  background: #009788;
  color: #fff;
  text-decoration: none;
}
.bg-section {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.section022 {
  position: relative;
  z-index: 2;
  padding: 18vh 0 0;
  height: 100vh;
  overflow: hidden;
}
.bg_hero {
  top: 55%;
}
#bg-section01 {
  background-image: url('img/img01.png');
}
.bg_hero2 {
  background-image: url('img/img02.png');
}
.title {
  letter-spacing: 4px;
}
.z-depth-2 {
  position: relative;
  z-index: 2;
}
.table {
  background-color: #FFF;
  color: #333;
}
.btn-ghost {
  border: 1px solid #fff;
  color: #FFF;
}
.btn-ghost:hover {
  text-decoration: none;
  background: #080126;
  border-color: #080126;
  color: #FFF;
}
#section01 {
  position: relative;
  z-index: 2;
  padding: 40px 0 0;
  height: 100vh;
  overflow: hidden;
}
#section01 .carousel, #section01 .carousel-item, .carousel-inner {
  height: 100%;
}
#section01 .content-inner, .section022 .content-inner {
  position: relative;
  z-index: 0;
  text-align: center;
}
.banner_hadding {
  font-size: 4.5rem;
  position: relative;
  text-align: center;
  padding: 0 5px;
  color: #009788;
}
#section01 p {
  font-weight: 500;
  font-size: 1.2rem;
  color: #052d1f;
}
.section066 {
  position: relative;
  z-index: 2;
  padding: 40px 0 0;
  height: max-content;
  overflow: hidden;
}
.section066 h1.futuru_regular {
  margin-bottom: 30px !important;
  font-size: 60px;
  z-index: 1;
  color: #009788;
  position: relative;
  text-transform: uppercase;
}
.section0666 {
  position: relative;
  z-index: 2;
  padding: 40px 0 0;
  height: max-content;
  overflow: hidden;
}
.section0666 h2.futuru_regular {
  margin-bottom: 10px !important;
}
.section0666 .box_1 {
  width: 100%;
  /* height: 200px; */
  /* background: #00978808; */
  margin-bottom: 30px;
  text-align: left !important;
  min-height: 100%;
  padding: 20px 20px 0px;
}
.section0666 .down-box h3 {
  font-size: 20px;
  text-align: left;
  font-weight: 600;
}
.section0666 h2.futuru_regular {
  margin-bottom: 30px !important;
  font-size: 70px;
  z-index: 1;
  color: #009788;
  position: relative;
  text-transform: uppercase;
}
.section0666-t h2.futuru_regular {
  font-size: 60px;
  text-transform: none !important;
}
.section0666 .down-box p {
  font-size: 14px;
  line-height: 25px;
}
.h2-pt-120 {
  font-size: 120px;
  z-index: 1;
  color: #009788;
  font-weight: 300;
  position: relative;
  text-transform: uppercase;
}
.h2-pt-70 {
  font-size: 70px;
  z-index: 1;
  color: #009788;
  font-weight: 300;
  position: relative;
  text-transform: uppercase;
}
p a {
  color: #007a6e;
}
@media(max-width: 767px) {
  #section01 .inner-el {
    padding: 0 10px;
    font-size: 3rem;
  }
}
#section02 {
  background: #f3f3f1;
  position: relative;
  padding: 100px 0 130px;
}
#section02 h2 {
  font-size: 120px;
  z-index: 1;
  color: #009788;
  font-weight: 300;
  position: relative;
  text-transform: uppercase;
}
#fog01 img {
  width: 100%;
  transition: 1s;
  border-radius: 100%;
}
#section03 {
  position: relative;
  z-index: 4;
  padding: 50px 0;
  overflow: hidden;
  background: #f3f3f1;
}
#section03 h2 {
  font-size: 70px;
  z-index: 1;
  color: #009788;
  position: relative;
}
.solution_box {
  border-right: 1px solid #ccc;
  padding-right: 10px;
  width: 15%;
  padding: 0 25px;
  transition: 1s;
}
.w100 {
  width: 100%;
}
.left_fs {
  transition: 1s;
}
.solution_box.active h3 {
  font-weight: 500;
  font-size: 35px;
}
.solution_box h3 {
  font-weight: 500;
  font-size: 24px;
}
.left_fs {
  display: none;
}
.solution_box.active .left_fs {
  display: block;
}
.solution_box.active {
  width: 42%;
}
.mt_s {
  margin-top: 120px;
}
.solution_box.active .mt_s {
  margin-top: 50px;
}
.solution_box.br_0 {
  border-right: 0;
}
.solution_box_out {
  margin-right: -15px;
  margin-left: -15px;
}
.taj {
  text-align: justify;
}
#fog02 {
  position: absolute;
  bottom: -50vh;
  left: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}
.ab2 {
  position: absolute;
  right: 0%;
  width: 260px;
  top: 0%;
}
.ani {
  transition: all 0.05s;
}
.ab1 {
  position: absolute;
  right: 30%;
  width: 260px;
  top: 30%;
}
.ttu {
  text-transform: uppercase;
}
.navbar-nav .nav-item .nav-link {
  font-weight: 600;
  color: #052d1f;
  font-family: 'Futuru-Regular';
  letter-spacing: 1px;
  text-decoration: none;
}
.navbar-nav .nav-item {
  margin-left: 30px;
  position: relative;
}
.navbar {
  position: absolute;
  left: 0;
  top: 5px;
  width: 100%;
  border: 0;
  z-index: 99;
  -webkit-transition: .5s ease;
  transition: .5s ease;
  padding: 5px 0;
}
.nav-scroll {
  background: #f3f3f1;
  position: fixed;
  top: -100px;
  left: 0;
  width: 100%;
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
  -webkit-transform: translateY(100px);
  transform: translateY(100px);
}
.dropdown-menu {
  background: #edf3cb;
  border-radius: 0;
}
.dropdown-menu li a {
  color: #052d1f;
  font-family: 'Futuru-Regular';
  letter-spacing: 1px;
  text-decoration: none;
}
.dropdown-menu li a:hover {
  background: hsl(69deg 37.93% 78.43%);
  color: #052d1f;
}
#section04 {
  z-index: 4;
  padding: 0 0 60px;
  overflow: hidden;
  background: #f3f3f1;
}
.kk1 {
  margin-top: -80px;
}
#section04 h2 {
  font-size: 70px;
  z-index: 1;
  color: #009788;
  font-weight: 300;
  position: relative;
}
.w80 {
  width: 90%;
  transform: translate3d(33px, 0px, 0px);
}
.sec4_r {
  margin-top: -120%;
}
#section05 h2 {
  font-size: 70px;
  z-index: 1;
  color: #009788;
  font-weight: 300;
  position: relative;
}
#section05 {
  z-index: 4;
  padding: 60px 0;
  overflow: hidden;
  background: #f3f3f1;
}
#section05 h3, #section05 p {
  font-size: 30px;
}
.container-fluid {
  padding: 0 2rem;
}
.box_icons {
  height: 100%;
  padding: 50px 15px;
}
.box_icons_br {
  border-right: 1px solid #b1b9b6;
}
.box_icons_bb {
  border-bottom: 1px solid #b1b9b6;
}
.box_icons_bt {
  border-top: 1px solid #b1b9b6;
}
.box_icons_bl {
  border-left: 1px solid #b1b9b6;
}
.box_icons img {
  height: 100px;
  margin-bottom: 40px;
}
.section06 {
  z-index: 4;
  padding: 60px 0;
  background: #f3f3f1;
}
.section06 img {
  max-width: 80%;
}
.section06 h2 {
  font-size: 70px;
  z-index: 1;
  color: #009788;
  font-weight: 300;
  position: relative;
}
.section06 h3, .section06 p {
  font-size: 28px;
}
a:hover {
  text-decoration: underline;
}
#footer a:hover {
  color: #cddf57;
}
#footer {
  padding: 40px 0 5px;
  background: #052d1f;
  color: #fff;
  font-size: 14px;
}
#footer ul {
  padding: 0;
}
#footer ul li {
  display: inline-block;
  margin-right: 40px;
}
#footer ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: 200;
}
#footer a {
  color: #fff;
  font-weight: 200;
}
.footer_logo {
  max-height: 76px;
  width: auto;
  object-fit: contain;
}
.t_d_none {
  text-decoration: none;
}
.footer-cta--input {
  flex-direction: row;
  gap: .5208333333vw;
  display: flex;
  margin-bottom: 1.0416666667vw;
}
.footer-cta--input .field {
  min-width: 11vw;
  width: 11vw;
}
.footer-cta--input .field:nth-of-type(2) {
  width: 18vw;
}
.footer-cta--input input {
  border: 1px solid hsl(0deg 0% 100% / 35%);
  width: 100%;
  background: transparent;
  padding: 7px 15px;
  border-radius: 5px;
  color: #fff;
  outline: none;
}
.footer-cta--input input:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.footer-cta--input .btn {
  background: #fff;
  color: #052d1f;
  border-radius: 5px;
  font-weight: 600;
}
#innersection h1 {
  font-size: 90px;
  z-index: 1;
  color: #009788;
  font-weight: 300;
  position: relative;
}
.h4_i {
  font-size: 1.5rem !important
}
#innersection {
  padding: 150px 0 80px;
  overflow: hidden;
}
.tf_rel {
  position: relative;
}
.module-timeline-title {
  margin-bottom: 20px;
}
.tf_textr {
  text-align: right;
}
.innersection2 {
  z-index: 4;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  background: #f3f3f1;
}
.team {
  /* width: 250px; */
  height: 350px;
  margin: 0 auto 30px;
  /* border-radius: 100%; */
}
.team_section {
  height: 100%;
  padding: 50px 15px;
}
.team_section_man .h5 {
  color: #00766c;
}
.map {
  width: 100%;
  height: 450px;
}
#careers .position-item {
  align-items: center;
  flex-direction: row;
  margin-bottom: 3.125vw;
  padding-bottom: 3.125vw;
  justify-content: space-between;
  border-bottom: 1px solid hsl(0deg 0% 0% / 20%);
}
#careers .position-role {
  font-size: 20px;
  margin-bottom: 0;
  width: 21.4583333333vw;
  color: #00766c;
}
#careers .position-level, #careers .position-location {
  width: 20vw;
}
.pos-rev h2 {
  font-size: 2.5rem;
}
.t_f40 {
  font-size: 40px;
}
.border_left {
  border-left: 1px solid #ccc;
  height: 100%;
}
.border_right {
  border-right: 1px solid #ccc;
  height: 100%;
}
.right_list {
  padding-left: 20px;
}
.right_list li {
  margin-bottom: 10px;
  font-weight: 700;
}
.right_list li small {
  display: block;
  font-weight: 500;
}
.t_f60 {
  font-size: 50px;
}
#DiscussProject .btn {
  width: 100%;
}
#DiscussProject {
  position: fixed;
  width: 360px;
  right: -100%;
  top: 20%;
  display: block;
  z-index: 99;
  background: #fff;
  transition: all .3s;
  padding: 30px;
  border-radius: 40px 0 0 40px;
  box-shadow: 0px 0px 10px hsl(0deg 0% 0% / 26%);
}
#DiscussProject.offcanvas {
  top: 0;
  right: 0;
  display: flex;
  width: min(420px, calc(100vw - 1rem));
  height: 100vh;
  max-height: 100vh;
  padding: 0;
  border-radius: 0;
  transition: transform .3s ease-in-out;
}
#DiscussProject.offcanvas.show {
  right: 0;
}
#DiscussProject .offcanvas-header {
  padding: 1.4rem 1.4rem 1rem;
  border-bottom: 1px solid var(--kb-line);
}
#DiscussProject .offcanvas-body {
  padding: 1.4rem;
}
#DiscussProject.show {
  right: 0;
}
.cursor-pointer {
  cursor: pointer;
}
#DiscussProject.collapsing {
  height: auto !important;
}
@keyframes write {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
.ani_text {
  view-timeline-name: --written-text;
  view-timeline-axis: block;
  animation-name: write;
  aimation-timing-function: linear;
  animation-direction: both;
  animation-timeline: --written-text;
  animation-range: entry-crossing 10% contain 200%;
  position: absolute;
  left: 0;
  top: 0;
  color: #009788;
}
.tech_img {
  margin: 120px 0 0;
}
.tech_text {
  margin-top: -60px;
  margin-bottom: 100px;
}
@keyframes write {
  0% {
    clip-path: polygon(0 0, 0 0, 0 0%, 0 0%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
.timeline {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 15px 0;
  max-width: 900px;
}
.timeline::after {
  content: '';
  position: absolute;
  width: 2px;
  background: #052d1f;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
  z-index: -1;
}
.container2 {
  padding: 15px 30px;
  position: relative;
  background: inherit;
  width: 50%;
}
.container.left {
  left: 0;
}
.container2.right {
  left: 50%;
}
.container2::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: calc(50% - 8px);
  right: -8px;
  background: #ffffff;
  border: 2px solid #052d1f;
  border-radius: 16px;
  z-index: 1;
}
.container2.right::after {
  left: -8px;
}
.container2.right::before {
  left: 8px;
}
.container2 .date {
  position: absolute;
  display: inline-block;
  top: calc(50% - 25px);
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: #009788;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 1;
}
.container2.left .date {
  right: -115px;
}
.container2.right .date {
  left: -115px;
}
.container2.left .icon {
  right: 56px;
}
.container2.right .icon {
  left: 56px;
}
.container2 .content {
  position: relative;
}
.container2.right .content {
  padding: 30px 30px 30px 15px;
}
.container2 .content h2 {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: normal;
  color: #052d1f;
}
.container2 .content p {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  color: #000000;
}
.ab3 {
  position: absolute;
  left: 30%;
  width: 260px;
  top: 50%;
}
.ab4 {
  position: absolute;
  left: 2%;
  width: 260px;
  top: 4%;
}
#section01 img {
  position: absolute;
  top: 25%;
  left: 0;
}
@media (max-width: 767.98px) {
  .timeline::after {
    left: 90px;
  }
  .container2 {
    width: 100%;
    padding-left: 110px;
    padding-right: 15px;
  }
  .container2.right .content {
    padding: 0;
  }
  .innersection2 {
    padding: 40px 0;
  }
  .team_section {
    padding: 20px 15px;
  }
  .team {
    width: 200px;
    height: 200px;
    margin: 0 auto 15px;
  }
  .container2.right {
    left: 0%;
  }
  .container2.left::after, .container2.right::after {
    left: 82px;
  }
  .container2.left::before, .container2.right::before {
    left: 100px;
    border-color: transparent #052d1f transparent transparent;
  }
  .container2.left .date, .container2.right .date {
    right: auto;
    left: 15px;
  }
  .container2.left .icon, .container2.right .icon {
    right: auto;
    left: 146px;
  }
}
.logo_img {
  height: 25px;
  margin-top: 15px;
}
.color1 {
  color: #00766c
}
.navbar-toggler {
  border: 0;
  font-size: 36px;
  padding: 0;
  color: #052d1f;
}
.navbar-toggler:focus {
  box-shadow: inherit !important;
}
*::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none;
}
/* Old shadow dom for play button */
*::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none;
}
/* New shadow dom for play button */
/* This one works! */
*::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
@media(min-width: 991px) {
  .navbar-nav .nav-item:hover .dropdown-menu {
    display: block;
  }
}
@media(max-width: 991px) {
  .navbar {
    background: #f3f3f1;
  }
  .navbar-nav .dropdown-menu {
    text-align: center;
  }
  #section01 {
    padding: 10vh 0 0;
    height: auto;
  }
  .video-wrap {
    height: 300px;
  }
  .navbar-nav .nav-item {
    margin-left: 0;
    text-align: center;
  }
  .right_btn {
    text-align: center;
    margin: 10px 0;
  }
  #section02 {
    padding: 40px 0 100px;
    min-height: 35vh
  }
  #section02 p {
    width: 50%;
  }
  #section04 {
    padding: 40px 0;
    min-height: 50vh
  }
  #section04 h2 {
    font-size: 30px;
  }
  .ab2 {
    right: 0%;
    width: 120px;
    top: 0%;
  }
  .ab1 {
    right: 30%;
    width: 120px;
    bottom: -100px;
    top: auto;
  }
  #section02 h2 {
    font-size: 30px;
  }
  .ab3 {
    position: absolute;
    left: 30%;
    width: 120px;
    top: 50%;
  }
  .ab4 {
    position: absolute;
    left: 2%;
    width: 120px;
    top: 30%;
  }
  #section03 h2 {
    font-size: 30px;
  }
  #section05 h2 {
    font-size: 30px;
  }
  #section05 h3 {
    font-size: 20px;
  }
  .section06 h2 {
    font-size: 30px;
    margin-bottom: 25px;
  }
  .section06 h3 {
    font-size: 20px;
  }
  .solution_box.active {
    width: 100%;
  }
  .solution_box {
    border-right: 0 solid #ccc;
    border-bottom: 0px solid #ccc;
    width: 100%;
    padding: 25px;
  }
  .left_fs {
    display: block;
  }
  .solution_box.active h3 {
    font-size: 25px;
  }
  .tech_img {
    margin: 20px 0 0;
  }
  .container-fluid {
    padding: 0 1rem;
  }
  .t_f60 {
    font-size: 30px;
  }
}
@media(max-width: 767px) {
  .box_icons_br {
    border-right: 0;
  }
  .box_icons_bb {
    border-bottom: 0
  }
  .container2 .date {
    top: calc(50% - 17px);
    font-size: 22px;
  }
  .solution_box.active .mt_s, .mt_s {
    margin-top: 20px;
  }
  #innersection h1 {
    font-size: 28px;
  }
  #innersection {
    padding: 100px 0 0 0;
    overflow: hidden;
  }
  .solution_box .order-md-2 {
    max-width: 50%;
    margin-bottom: 20px;
  }
  .section06 img {
    max-width: 30%;
    margin-top: 20px;
  }
  .box_icons {
    padding: 25px 15px;
  }
  .navbar-brand img {
    max-height: 45px;
  }
  .navbar-brand2:after {
    height: 45px;
  }
  .footer_logo {
    max-height: 45px;
  }
  #footer .navbar-brand2:after {
    height: 50px;
    top: 3px;
  }
  .r_mt_r {
    margin-top: 200px;
  }
  .ab4 {
    left: 6%;
    top: 28%;
  }
  .ab3 {
    left: 50%;
    top: 36%;
  }
  #footer ul li {
    margin-right: 30px;
    margin-top: 15px;
  }
  #careers .position-item {
    display: block;
    padding-bottom: 5vw;
  }
  #careers .position-role {
    font-size: 24px;
    width: 100%
  }
  #careers .position-role .h2 br {
    display: none;
  }
  #careers .position-level, #careers .position-location {
    width: 100%;
    padding-top: 5px;
  }
  .t_f40 {
    font-size: 26px;
  }
  .section06 {
    padding: 40px 0;
  }
  .box_icons img {
    height: 80px;
    margin-bottom: 15px;
  }
  #DiscussProject {
    width: 320px;
    padding: 20px;
    border-radius: 30px 0 0 30px;
  }
  #DiscussProject h5 {
    font-size: 1.2rem;
  }
  .remsz {
    font-size: 18px;
  }
  .section066 h1.futuru_regular {
    font-size: 28px;
  }
  .section0666 h2.futuru_regular {
    font-size: 26px;
  }
  .h2-pt-120, .h2-pt-70 {
    font-size: 30px;
  }
}
/* Respect the OS "reduce motion" setting.
   Disables AOS reveals, parallax drift and decorative transitions for
   visitors who have asked for less movement (vestibular disorders, migraine). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ani {
    transform: none !important;
  }
}
/* Aspect-ratio guard.
   The <img> tags now carry width/height attributes (to stop layout shift).
   Where CSS constrains only ONE dimension, the other must be auto — otherwise
   the attribute value is used and the image is stretched or squashed. */
.w100, #fog01 img, .navbar-brand img, .footer_logo {
  height: auto;
}
.logo_img, .box_icons img {
  width: auto;
}
/* Scroll smoothness.
   luxy.js rewrites `transform` on .luxy-el every animation frame. AOS also
   sets `transition: opacity, transform 0.4s` on the same elements (4 of them
   carry both). Each frame's transform then eases toward the previous one over
   400ms while a new value arrives — that lag is the jitter on scroll.
   Keep AOS's fade, let luxy own transform outright.
   Specificity note: aos.css loads after this file, so [data-aos] alone would
   lose; .luxy-el[data-aos] outranks it. */
.luxy-el[data-aos], .ani[data-aos] {
  transition-property: opacity;
}
.luxy-el {
  will-change: transform;
}
/* Was `transition: 1s` (i.e. all properties) on 12 images with no hover rule
   to animate — cost only, no effect. */
#fog01 img {
  transition: none;
}
/* ========================================================================== */
/* Keystone UI/UX system — Stage 3, 31 August 2026.                           */
/* Additive overrides preserve the existing PHP/Bootstrap content foundation. */
/* ========================================================================== */ :root {
  --kb-ink: #052d1f;
  --kb-deep: #003d2e;
  --kb-teal: #007a6e;
  --kb-lime: #c9e44b;
  --kb-paper: #f6f6f1;
  --kb-mist: #e7efea;
  --kb-muted: #52675f;
  --kb-line: #cbd8d1;
  --kb-white: #fff;
  --kb-radius-sm: 8px;
  --kb-radius: 12px;
  --kb-shadow: 0 16px 38px rgba(5, 45, 31, .10);
  --kb-section: clamp(3.5rem, 7vw, 6.5rem);
  --kb-gutter: clamp(1rem, 3.4vw, 3rem);
}
html {
  scroll-padding-top: 92px;
}
body {
  background: var(--kb-paper);
  color: var(--kb-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
#main, .innersection2, #section02, #section03, #section04, #section05, .section06 {
  background: var(--kb-paper);
}
.container-fluid {
  width: min(100%, 1504px);
  margin-inline: auto;
  padding-inline: var(--kb-gutter);
}
p {
  max-width: 74ch;
}
.taj {
  text-align: left;
}
a {
  color: var(--kb-teal);
  text-underline-offset: .2em;
  text-decoration-thickness: .08em;
}
a:hover {
  color: var(--kb-deep);
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--kb-lime) !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--kb-ink) !important;
}
.skip-link {
  position: fixed;
  z-index: 1000;
  top: .75rem;
  left: .75rem;
  padding: .75rem 1rem;
  background: var(--kb-ink);
  color: var(--kb-white);
  border-radius: var(--kb-radius-sm);
  transform: translateY(-160%);
}
.skip-link:focus {
  color: var(--kb-white);
  transform: translateY(0);
}
.btn, .btn_r_t {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  gap: .45rem;
  padding: .7rem 1.05rem;
  border: 1px solid var(--kb-teal);
  border-radius: var(--kb-radius-sm);
  background: var(--kb-teal);
  color: var(--kb-white);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.btn:hover, .btn_r_t:hover {
  border-color: var(--kb-deep);
  background: var(--kb-deep);
  color: var(--kb-white);
  text-decoration: none;
}
.btn-ghost-dark {
  border-color: var(--kb-ink);
  background: transparent;
  color: var(--kb-ink);
}
.btn-ghost-dark:hover {
  background: var(--kb-ink);
  color: var(--kb-white);
}
.navbar, .navbar.nav-scroll {
  position: sticky;
  top: 0;
  left: auto;
  z-index: 100;
  width: 100%;
  padding: 5px 0;
  border-bottom: 1px solid var(--kb-line);
  background: #fff;
  transform: none;
  transition: box-shadow .2s ease;
}
.navbar.nav-scroll {
  box-shadow: 0 8px 24px rgba(5, 45, 31, .08);
}
.navbar .container-fluid {
  flex-wrap: nowrap;
}
.navbar-brand {
  display: inline-flex;
  align-items: center;
  padding-block: 0;
}
.navbar-brand img {
  max-width: 142px;
  max-height: 80px;
}
.navbar-brand2::after {
  top: 2px;
  height: 48px;
  background: var(--kb-line);
}
.navbar-nav .nav-item {
  margin-left: clamp(.55rem, 1.3vw, 1.35rem);
}
.navbar-nav .nav-item .nav-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: .55rem .15rem;
  color: var(--kb-ink);
  font-size: 15px;
  letter-spacing: .02em;
  border-bottom: 2px solid transparent;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link[aria-current="page"] {
  color: var(--kb-teal);
  border-color: var(--kb-teal);
  text-decoration: none;
}
.navbar-toggler {
  min-width: 44px;
  min-height: 44px;
  color: var(--kb-ink);
}
#innersection {
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
}
#innersection h1, .section066 h1.futuru_regular, .section066 h2.futuru_regular {
  max-width: 17ch;
  margin: 0;
  color: var(--kb-teal);
  font-size: clamp(2.65rem, 6vw, 5.5rem);
  line-height: .98;
  letter-spacing: -.035em;
  text-transform: none;
}
.innersection2, .section066, .section0666, #section05, .section06 {
  padding-block: var(--kb-section);
}
.innersection2 h2, .innersection2 h4, .section0666 h2.futuru_regular, #section05 h2, .section06 h2 {
  color: var(--kb-teal);
  letter-spacing: -.02em;
}
.innersection2 h3, .t_f40, .t_f60, .section0666 .down-box h3 {
  line-height: 1.13;
}
.kb-eyebrow {
  margin-bottom: 1rem;
  color: var(--kb-teal);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kb-lede {
  max-width: 62ch;
  color: var(--kb-muted);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.55;
}
.kb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}
.kb-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 780px;
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: flow;
}
.kb-flow li {
  position: relative;
  min-height: 70px;
  padding: 1.6rem 1rem .25rem 0;
  border-top: 3px solid var(--kb-teal);
  color: var(--kb-muted);
  font-size: .9rem;
  font-weight: 700;
}
.kb-flow li::before {
  counter-increment: flow;
  content: counter(flow);
  position: absolute;
  top: -13px;
  left: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 3px solid var(--kb-teal);
  border-radius: 50%;
  background: var(--kb-lime);
  color: var(--kb-ink);
  font-size: .68rem;
}
.kb-home-hero {
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(3rem, 6vw, 6rem) 0;
  overflow: visible !important;
  background: var(--kb-paper);
}
.kb-home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.kb-home-hero h1 {
  max-width: 11ch;
  margin: 0;
  color: var(--kb-teal);
  font-family: "Futuru-Regular", sans-serif;
  font-size: clamp(3rem, 6.2vw, 6.4rem);
  line-height: .92;
  letter-spacing: -.05em;
}
.kb-home-hero .video-wrap {
  position: static !important;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--kb-radius);
  box-shadow: var(--kb-shadow);
  background: var(--kb-mist);
}
.kb-media-caption {
  margin: .75rem 0 0;
  color: var(--kb-muted);
  font-size: .82rem;
}
.kb-home-intro {
  padding: var(--kb-section) 0;
  border-block: 1px solid var(--kb-line);
}
.kb-home-intro-grid {
  display: grid;
  grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}
.kb-home-intro h2 {
  font-size: clamp(2.2rem, 4.5vw, 4.6rem) !important;
}
.kb-context {
  padding: var(--kb-section) 0;
}
.kb-context-grid {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  background: var(--kb-line);
}
.kb-context-intro, .kb-stat {
  min-height: 260px;
  padding: clamp(1.5rem, 3.5vw, 3rem);
  background: var(--kb-white);
}
.kb-context-intro {
  background: var(--kb-deep);
  color: var(--kb-white);
}
.kb-context-intro h2 {
  color: var(--kb-lime);
  font-family: "Futuru-Regular", sans-serif;
  font-size: clamp(2rem, 3.6vw, 3.7rem);
  line-height: 1;
}
.kb-stat strong {
  display: block;
  color: var(--kb-teal);
  font-family: "Futuru-Regular", sans-serif;
  font-size: clamp(3rem, 5.4vw, 5.5rem);
  line-height: .95;
}
.kb-stat span {
  display: block;
  max-width: 22ch;
  margin-top: 1rem;
  color: var(--kb-muted);
}
.section0666 .box_1 {
  height: 100%;
  padding: clamp(1.25rem, 2vw, 2rem);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  background: var(--kb-white);
}
.section0666 .down-box > [class*="col-"] {
  margin-bottom: 1.25rem;
}
.solution_box_out {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-inline: 0;
  overflow: hidden;
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  background: var(--kb-line);
}
.solution_box, .solution_box.active {
  width: auto;
  min-width: 0;
  padding: clamp(1.25rem, 2.3vw, 2.25rem);
  border: 0;
  background: var(--kb-white);
}
.solution_box h3, .solution_box.active h3 {
  font-size: clamp(1.2rem, 2vw, 1.7rem);
}
.solution_box .left_fs, .solution_box.active .left_fs {
  display: block;
}
.solution_box .mt_s, .solution_box.active .mt_s {
  margin-top: 1.5rem;
}
#section05 {
  height: auto;
}
#section05 .box_icons {
  padding: clamp(1.4rem, 3vw, 2.5rem);
}
#section05 h3, #section05 p, .section06 h3, .section06 p {
  font-size: 1rem;
}
.section06 {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--kb-line);
}
.section06 img {
  max-width: 140px;
}
.kb-tech-hero {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(420px, 1.15fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.kb-tech-hero h1 {
  max-width: 12ch !important;
}
.kb-tech-hero .tech_img {
  margin: 0;
}
.technology-video {
  display: block;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--kb-radius);
  box-shadow: var(--kb-shadow);
  background: var(--kb-mist);
}
.kb-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.5rem 0 0;
}
.kb-jumps a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: .45rem .75rem;
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-sm);
  background: var(--kb-white);
  color: var(--kb-ink);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}
.kb-jumps a:hover {
  border-color: var(--kb-teal);
  color: var(--kb-teal);
}
.keytor-spec, .kb-summary {
  border-left-color: var(--kb-teal) !important;
  border-radius: 0 var(--kb-radius) var(--kb-radius) 0;
  background: var(--kb-mist) !important;
}
.cv-table-wrap, .kb-tablewrap, .kb-project-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  background: var(--kb-white);
}
.cv-table, .keytor-table, .kb-project-table, #kb table {
  margin: 0;
}
.cv-table th, .cv-table td, .keytor-table th, .keytor-table td, .kb-project-table th, .kb-project-table td, #kb th, #kb td {
  padding: .9rem 1rem;
  border-bottom-color: var(--kb-line);
}
.cv-table thead th, .keytor-table thead th, .kb-project-table thead th, #kb thead th {
  background: var(--kb-mist);
  color: var(--kb-ink);
}
.kb-project-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}
.kb-table-hint {
  display: none;
  margin: 0 0 .65rem;
  color: var(--kb-muted);
  font-size: .875rem;
}
.kb-project-table th {
  color: var(--kb-muted);
  font-size: .72rem;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
}
.kb-project-table td {
  color: var(--kb-ink);
  font-size: .92rem;
  vertical-align: top;
}
.kb-project-table td:first-child {
  color: var(--kb-teal);
  font-family: "Futuru-Regular", sans-serif;
  font-size: 1.2rem;
  white-space: nowrap;
}
.kb-status {
  display: inline-flex;
  padding: .3rem .55rem;
  border: 1px solid var(--kb-line);
  border-radius: 999px;
  background: var(--kb-mist);
  color: var(--kb-ink);
  font-size: .75rem;
  font-weight: 800;
  white-space: nowrap;
}
.project-proof-grid {
  gap: 1.25rem !important;
  margin-top: clamp(2rem, 4vw, 3.5rem) !important;
}
.project-proof {
  overflow: hidden;
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  background: var(--kb-white) !important;
}
.project-proof img {
  width: 100%;
  height: clamp(260px, 30vw, 410px) !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.project-proof figcaption {
  padding: 1.15rem 1.25rem !important;
  color: var(--kb-muted) !important;
}
.project-proof strong {
  color: var(--kb-ink) !important;
  font-size: 1rem;
}
.kb-article-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  padding: 0;
  list-style: none;
}
.kb-article-card {
  overflow: hidden;
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  background: var(--kb-white);
}
.kb-article-card a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.kb-article-card img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  background: var(--kb-mist);
}
.kb-article-card-body {
  padding: 1.35rem;
}
.kb-article-card h2 {
  margin: 0 0 .75rem;
  color: var(--kb-ink);
  font-family: "Futuru-Regular", sans-serif;
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.15;
}
.kb-article-card p {
  color: var(--kb-muted);
  font-size: .95rem;
}
.kb-article-card time {
  color: var(--kb-muted);
  font-size: .82rem;
}
.kb-article-card a:hover h2 {
  color: var(--kb-teal);
}
#kb .kb-measure {
  max-width: 72ch !important;
}
#kb .kb-hero {
  overflow: hidden;
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius);
  background: var(--kb-white);
}
#kb .kb-hero img {
  max-height: 620px !important;
}
#kb .kb-hero figcaption {
  margin: 0 !important;
  padding: .85rem 1rem;
}
#kb .kb-next {
  padding: 1.5rem;
  border: 1px solid var(--kb-line) !important;
  border-radius: var(--kb-radius);
  background: var(--kb-white);
}
#footer {
  padding: clamp(3rem, 6vw, 5rem) 0 1.5rem;
  background: var(--kb-deep);
}
#footer a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
#footer a:hover {
  color: var(--kb-lime);
}
#DiscussProject.offcanvas {
  width: min(420px, calc(100vw - 1rem));
  top: 0;
  right: 0;
  z-index: 1050;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--kb-line);
  border-radius: 0;
  box-shadow: var(--kb-shadow);
}
.kb-panel-close {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: var(--kb-radius-sm);
  background: transparent;
  color: var(--kb-ink);
}
@media (max-width: 1199.98px) {
  .navbar .container-fluid {
    flex-wrap: wrap;
  }
  .navbar-collapse {
    width: 100%;
  }
  .navbar-collapse .nav-link {
    width: 100%;
    justify-content: center;
  }
  .navbar-collapse .right_btn {
    display: flex;
    justify-content: center;
  }
}
@media (max-width: 991.98px) {
  .kb-home-hero-grid, .kb-tech-hero, .kb-home-intro-grid {
    grid-template-columns: 1fr;
  }
  .kb-home-hero-copy, .kb-tech-copy {
    max-width: 760px;
  }
  .kb-home-hero-media, .kb-tech-media {
    max-width: 900px;
  }
  .kb-context-grid {
    grid-template-columns: 1fr 1fr;
  }
  .kb-context-intro {
    grid-column: 1 / -1;
    min-height: 0;
  }
  .solution_box_out {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  body {
    font-size: 16px;
  }
  html {
    scroll-padding-top: 78px;
  }
  .navbar {
    padding: .45rem 0;
  }
  .navbar-brand img {
    max-width: 98px;
    max-height: 42px;
  }
  .navbar-brand2::after {
    height: 38px;
    left: -10px;
  }
  #innersection h1, .kb-home-hero h1 {
    font-size: clamp(2.6rem, 13vw, 4.2rem);
  }
  .kb-home-hero {
    padding-top: 2.5rem;
  }
  .kb-flow {
    grid-template-columns: 1fr;
    gap: .75rem;
  }
  .kb-flow li {
    min-height: 0;
    padding: .2rem 0 .2rem 2.25rem;
    border-top: 0;
    border-left: 3px solid var(--kb-teal);
  }
  .kb-flow li::before {
    top: 0;
    left: -13px;
  }
  .kb-context-grid, .kb-article-grid, .solution_box_out {
    grid-template-columns: 1fr;
  }
  .kb-context-intro {
    grid-column: auto;
  }
  .kb-context-intro, .kb-stat {
    min-height: 0;
  }
  .section0666 h2.futuru_regular {
    font-size: clamp(2rem, 10vw, 3.2rem);
  }
  .project-proof img {
    height: min(78vw, 340px) !important;
  }
  .kb-table-hint {
    display: block;
  }
  .kb-article-card img {
    height: min(62vw, 260px);
  }
  #kb .kb-next .btn {
    width: 100%;
    margin: .45rem 0 0 !important;
  }
  #footer #footer-nav {
    gap: .25rem .85rem;
  }
}
@media (max-width: 991.98px) {
  .kb-table-hint {
    display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  .navbar, .skip-link {
    transition: none;
  }
}
/* Content must never depend on the optional scroll-animation library. */
[data-aos], [data-aos].aos-init, [data-aos].aos-animate {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.section06 .row {
  margin-inline: 0;
}
/* ========================================================================== */
/* Keystone UI/UX — Stage 4 independent-review fixes, 1 September 2026.        */
/* Additive only. Removes dead vertical space in retained legacy page-body    */
/* blocks so the redesign reads as deliberately spaced at desktop widths.     */
/* Every selector below is single-use: #vision/#mission/#commitment are the   */
/* only .section06 blocks; #section05, #torrefaction, .kb-context and .team*  */
/* each appear on exactly one page.                                           */
/* ========================================================================== */
/* Sitewide — the retained legacy section wrappers each carried up to 6.5rem of
   block padding on BOTH edges, so adjacent sections opened ~13rem of empty
   paper at desktop widths. Tighten to a still-generous rhythm. (.section06 has
   its own tighter value below.) */
.innersection2, .section066, .section0666, #section05 {
  padding-block: clamp(2.5rem, 4.6vw, 4.25rem);
}
/* Home — Vision / Mission / Commitment.
   Were three near-empty full-width sections (large H2, a paragraph pushed into
   a right-hand column by `col-md-8 ms-auto`, a small icon, ~1 viewport of
   whitespace each). Recompose each as a compact two-column band: statement
   left at a readable measure, icon right. No markup change. */
.section06 {
  padding-block: clamp(1.6rem, 3.4vw, 2.75rem);
}
.section06 .container {
  max-width: none;
  padding-inline: 0;
}
.section06 .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(1.5rem, 5vw, 4rem);
}
.section06 .row > [class*="col-"] {
  flex: none;
  width: auto;
  max-width: none;
  margin: 0 !important;
  padding: 0;
}
.section06 .row > [class*="col-"]:first-child {
  max-width: 66ch;
}
.section06 .row > [class*="col-"]:last-child {
  justify-self: end;
}
.section06 h2 {
  margin-bottom: .35rem;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}
.section06 h3, .section06 p {
  margin: 0;
}
.section06 .ani, .section06 img {
  max-width: clamp(64px, 8vw, 104px);
}
/* Home — "The waste challenge" evidence panel: trim the tall empty lower half
   of the stat cells. */
.kb-context-intro, .kb-stat {
  min-height: 190px;
}
/* Home — "Our goals and ambitions": the markup mixes a col-md-6 into an
   otherwise three-up grid, so one tile renders double width and the row looks
   broken. Normalise every tile to one third. */
#section05 .row.mt-5 > [class*="col-md-6"] {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}
/* Technology — #torrefaction three image + text rows: the text column carries
   `mt-5 pt-md-4`, which drops it ~4.5rem below its image and staggers the
   whole block. Centre each pair, drop the offset, and cap the oversized
   500 px imagery. */
#torrefaction .row {
  align-items: center;
}
#torrefaction .luxy-el.mt-5 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#torrefaction .col-md-7 > img, #torrefaction #demo.carousel {
  max-width: 420px;
  margin-inline: auto;
}
/* About — leadership portraits: 50 px block padding left a large gap above each
   face; the round frame also needs object-fit so non-square sources are not
   distorted. */
.team_section {
  padding: 1.75rem 1rem;
}
.team {
  object-fit: cover;
}
/* ========================================================================== */
/* DESIGN-2026-0002 — reference-backed Keystone brand restoration.            */
/* ========================================================================== */
.kb-home-hero {
  padding-top: clamp(2.75rem, 6vw, 5.5rem);
}
.kb-home-hero-heading {
  margin-bottom: 1rem;
}
.kb-home-hero-heading .kb-eyebrow {
  margin: 0 0 .6rem;
}
.kb-home-hero-media {
  margin-inline: calc(var(--kb-gutter) * -1);
}
.kb-home-hero .video-wrap, .kb-tech-hero .technology-video {
  border-radius: 0;
  box-shadow: none;
}
.kb-home-hero .video-wrap {
  aspect-ratio: 2.2 / 1;
}
.kb-home-hero-media .kb-media-caption {
  margin-inline: var(--kb-gutter);
}
.kb-home-hero-statement {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--kb-line);
  padding-bottom: 56px;
}
.kb-home-hero-statement h2 {
  max-width: 14ch;
  margin: 0;
  color: var(--kb-teal);
  font-size: clamp(2rem, 4.1vw, 4.25rem);
  line-height: .98;
  letter-spacing: -.035em;
}
.kb-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: .5rem;
  border-bottom: 1px solid currentColor;
  color: var(--kb-ink);
  font-weight: 700;
  text-decoration: none;
}
.kb-text-link::after {
  content: "↗";
  margin-left: .65rem;
  color: var(--kb-teal);
}
.kb-text-link:hover {
  color: var(--kb-teal);
  text-decoration: none;
}
.kb-home-intro {
  border-bottom: 0;
}
.kb-home-intro-grid {
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
}
/* Retain the distinct information, but remove the repeated template-card
   treatment from homepage and Technology feedstock groups. */
main > .section0666 .down-box, #feedstocks .down-box {
  border-top: 1px solid var(--kb-line);
}
main > .section0666 .down-box > [class*="col-"], #feedstocks .down-box > [class*="col-"] {
  margin: 0;
  border-right: 1px solid var(--kb-line);
  border-bottom: 1px solid var(--kb-line);
}
main > .section0666 .down-box > [class*="col-"]:last-child, #feedstocks .down-box > [class*="col-"]:last-child {
  border-right: 0;
}
main > .section0666 .box_1, #feedstocks .box_1 {
  padding: clamp(1.5rem, 2.5vw, 2.5rem) clamp(1rem, 2vw, 2rem);
  border: 0;
  border-radius: 0;
  background: transparent;
}
#section05 .box_icons img, .section06 img {
  display: none;
}
#section05 .box_icons {
  min-height: 150px;
  display: flex;
  align-items: flex-end;
  border-color: var(--kb-line);
}
.section06 .row {
  grid-template-columns: minmax(0, 1fr);
}
/* Technology reads as one continuous engineering document: copy first,
   verified existing footage at full width, then ruled evidence sections. */
.kb-tech-hero {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
.kb-tech-copy {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
  max-width: none;
}
.kb-tech-copy .kb-eyebrow, .kb-tech-copy h1 {
  grid-column: 1;
}
.kb-tech-copy .kb-lede, .kb-tech-copy .kb-jumps {
  grid-column: 2;
}
.kb-tech-copy .kb-lede {
  grid-row: 1 / span 2;
  align-self: end;
  margin: 0 !important;
}
.kb-tech-hero h1 {
  max-width: 14ch !important;
  font-size: clamp(3rem, 6.4vw, 6.8rem) !important;
}
.kb-tech-hero .technology-video {
  aspect-ratio: 2.2 / 1;
}
.kb-jumps {
  gap: 0 1.15rem;
  margin-top: 1.2rem;
  padding-top: .8rem;
  border-top: 1px solid var(--kb-line);
}
.kb-jumps a {
  min-height: 36px;
  padding: .3rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: .8rem;
}
.kb-jumps a::after {
  content: "↓";
  margin-left: .3rem;
  color: var(--kb-teal);
}
.kb-projects {
  border-block: 1px solid var(--kb-line);
}
.kb-section-index {
  margin: 0 0 1rem;
  color: var(--kb-muted);
  font-family: "Futuru-Regular", sans-serif;
  font-size: .85rem;
  letter-spacing: .12em;
}
.kb-projects-intro {
  max-width: 62ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}
.kb-projects .cv-table-wrap {
  border-radius: 0;
}
.kb-project-evidence-table {
  min-width: 920px;
}
.kb-project-evidence-table th:first-child, .kb-project-evidence-table td:first-child {
  color: var(--kb-teal);
  font-family: "Futuru-Regular", sans-serif;
  white-space: nowrap;
}
@media (max-width: 991.98px) {
  .kb-home-hero-statement, .kb-tech-copy {
    grid-template-columns: minmax(0, 1fr);
  }
  .kb-tech-copy .kb-eyebrow, .kb-tech-copy h1, .kb-tech-copy .kb-lede, .kb-tech-copy .kb-jumps {
    grid-column: 1;
    grid-row: auto;
  }
}
@media (max-width: 767.98px) {
  .kb-home-intro-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .kb-home-hero .video-wrap, .kb-tech-hero .technology-video {
    aspect-ratio: 4 / 3;
  }
  .kb-home-hero-media {
    margin-inline: calc(var(--kb-gutter) * -1);
  }
  main > .section0666 .down-box > [class*="col-"], #feedstocks .down-box > [class*="col-"] {
    border-right: 0;
  }
  #section05 .row.mt-5 > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}