/* ---------- Sustainability page ---------- */
/* Scoped to .sus-page so it never leaks into the rest of the site. */

/* This page mirrors a standalone branded microsite with its own fixed
   light palette (photos, ISO badge scans, SDG artwork) that was never
   designed against a dark background — so, like the header/hero/footer,
   it opts out of the site-wide dark theme and always renders light. */
.sus-page {
  --sus-green-1: #58b235;
  --sus-green-2: #00942a;
  --sus-green-3: #037724;
  --sus-green-dark: #003e12;
  --sus-green-bar: #49ab3d;
  --sus-green-tint: #f7fff8;
  --sus-text: #252525;
  background: #fff;
  color: var(--sus-text);
}
.sus-page .sus-section {
  background: #fff;
}
.sus-page .sus-section.alt {
  background: var(--sus-green-tint);
}

.sus-hero {
  position: relative;
  background: linear-gradient(to right, #c1f3ff, #f2ffef);
  overflow: hidden;
  padding: 85px 0 60px;
}
.sus-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background: url("/assets/images/sustainability/top-bg.png") no-repeat 100%
    0% / cover;
  width: 100%;
  max-width: 850px;
  height: 100%;
  mask: linear-gradient(to left, #f2ffef 10%, #f2ffef00);
}
.sus-hero .container {
  position: relative;
  z-index: 1;
}
.sus-hero-title {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.15;
  margin: 0 0 32px;
}
.sus-hero-title span {
  display: block;
  background: linear-gradient(to right, #1cacce, #0d6a89);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sus-hero-title span:nth-child(2) {
  background: linear-gradient(to right, #58b235, #00942a);
  -webkit-background-clip: text;
  background-clip: text;
}
.sus-hero-title span:nth-child(3) {
  background: linear-gradient(to right, #037724, #003e12);
  -webkit-background-clip: text;
  background-clip: text;
}

.sus-tabs {
  background: linear-gradient(to right, #1cacce, #00942a);
  position: sticky;
  top: 80.55px;
  z-index: 50;
}

.sus-tabs .container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  column-gap: 1.9%;
  -webkit-overflow-scrolling: touch;
}

.sus-tabs a {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-main);
  font-size: 0.92rem;
  padding: 18px 0px;
  border-bottom: 3px solid transparent;
}
.sus-tabs a.active,
.sus-tabs a:hover {
  color: #fff;
}
.sus-tabs img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.sus-section {
  padding: 72px 0;
}
.sus-section.alt {
  background: var(--sus-green-tint);
}
.sus-section-title {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 40px;
  color: var(--sus-text);
  margin-bottom: 16px;
}
.sus-section-desc {
  margin-top: 16px;
  color: #3f4d61;
  line-height: 1.7;
}
.sus-section-desc ul {
  margin: 12px 0 0 20px;
  padding: 0;
}
.sus-section-desc li {
  margin-bottom: 6px;
}

/* CEO speaks */
.sus-section#leadership-speaker{
  padding-bottom: 0;
}

.sus-ceo {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.sus-ceo-profile {
  width: 37%;
  max-width: 454px;
  margin-left: 4.2%;
  flex-shrink: 0;
}
.sus-ceo-photo-wrap {
  background: url("/assets/images/sustainability/ceo-bg.png") no-repeat bottom
    center;
  background-size: contain;
  text-align: right;
}
.sus-ceo-photo-wrap img {
  width: 95%;
  height: auto;
  display: inline-block;
}

.sus-ceo-profile-details {
  padding: 16px 9%;
}

.sus-ceo-name {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--sus-text);
}
.sus-ceo-role {
  color: #777;
  font-size: 0.9rem;
}

.sus-ceo-details-holder {
  flex: grow;
}

.sus-ceo-details-content {
  background: linear-gradient(to right, #f7fff8, #dff9ff);
  width: 100%;
  padding: 24px 3.5% 60px;
  margin-top: 50px;
  border-radius: 20px;
  position: relative;
}

.sus-ceo-text {
  position: relative;
  z-index: 1;
}

.sus-ceo-quote-mark {
  background: url("/assets/images/sustainability/icon-quote.svg") center
    no-repeat;
  background-size: contain;
  width: 94px;
  height: 94px;
  position: absolute;
  top: -34px;
  left: -24px;
}

/* Materiality */
.sus-materiality {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.sus-materiality img {
  width: 100%;
  height: auto;
}
.sus-priority-label {
  display: inline-block;
  font-family: var(--font-main);
  font-weight: 600;
  color: var(--sus-green-3);
  margin-bottom: 12px;
}
.sus-priority-row {
  display: flex;
  align-items: stretch;
  gap: 20px;
}
.sus-priority-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  width: 60px;
}
.sus-priority-arrow-label {
  color: #ef4444;
  font-family: var(--font-main);
  font-weight: 600;
  text-align: center;
  margin-bottom: 8px;
  font-size: 0.95rem;
}
.sus-priority-arrow img {
  flex: 1;
  width: 20px;
  object-fit: contain;
}
.sus-priority-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.sus-priority-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.95rem;
  color: #444;
}
.sus-priority-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: none;
}

/* SDG */
.sus-section#sdg {
  background: linear-gradient(to bottom, #f7fff8, #dff9ff);
}

.sus-section#sdg .sus-section-title,
.sus-section#sdg .sus-section-desc {
  text-align: center;
}

.sus-sdg-layout {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: flex-start;
}
.sus-sdg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  flex: 0 0 auto;
  width: 100%;
  max-width: 480px;
}
.sus-sdg-content {
  flex: 1;
  min-width: 0;
}
.sus-sdg-icon {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  cursor: pointer;
  border: none;
  padding: 0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: block;
  overflow: hidden;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  position: relative;
}
.sus-sdg-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sus-sdg-icon .hover-content{
  background-color: rgba(0,0,0,0.8);
  padding: 5px;
  border-radius: 5px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  text-wrap: nowrap;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%, 50%);
  opacity: 0;
  transition: all 0.3s;
}

.sus-sdg-icon:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.sus-sdg-icon:hover .hover-content{
  transform: translate(-50%, 0);
  opacity: 1;
}

.sus-sdg-icon.active {
  /* box-shadow:
    0 0 0 3px rgba(0, 0, 0, 0.18),
    0 6px 16px rgba(0, 0, 0, 0.18); */
}
.sus-sdg-icon img.sdg-active {
  display: none;
}
.sus-sdg-icon.active img.sdg-normal {
  display: none;
}
.sus-sdg-icon.active img.sdg-active {
  display: block;
}
.sus-sdg-icon.active .hover-content{
  display: none;
}

.sus-sdg-tab-list {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.sus-sdg-tab-list .sus-sdg-tab {
  flex: 0 0 auto;
  border: 1px solid #cbdccb;
  border-radius: 999px;
  background: #fff;
  padding: 10px 16px;
  color: #3f4d61;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
}

.sus-sdg-tab-list .sus-sdg-tab:hover {
  border-color: #277d31;
  color: #277d31;
}

.sus-sdg-tab-list .sus-sdg-tab.active {
  border-color: #277d31;
  background: #277d31;
  color: #ffffff;
}

.sus-sdg-desc-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sus-sdg-desc {
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.sus-sdg-desc-title {
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.sus-sdg-desc-text {
  color: #555;
  line-height: 1.7;
  margin: 0;
}

/* Certification & achievements */
.sus-cert-achievement {
}

.sus-cert-achievement .sus-section-title,
.sus-cert-achievement .sus-section-desc {
  text-align: center;
}

.sus-cert-achievement .sus-iso-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sus-iso-img-list {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 6%;
}

.sus-iso-img-list .iso-panel {
  width: 16%;
  min-width: 100px;
  max-width: 200px;
}

.sus-iso-img-list .iso-panel img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.sus-cert-tab-list {
  margin-top: 64px;
  display: flex;
  justify-content: left;
  align-items: center;
  column-gap: 2.5%;
}

.sus-cert-tab-list .sus-cert-tab {
  background: transparent;
  padding: 34px 2%;
  border: 0 none;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  font-size: 26px;
  font-weight: 600;
  cursor: pointer;
}

.sus-cert-tab-list .sus-cert-tab:hover,
.sus-cert-tab-list .sus-cert-tab.active {
  border-bottom-width: 2px;
  border-bottom-style: solid;
}

.sus-cert-tab-list .sus-cert-tab.theme-environment {
  color: #4d7c0f;
}
.sus-cert-tab-list .sus-cert-tab.theme-environment:hover,
.sus-cert-tab-list .sus-cert-tab.theme-environment.active {
  background: #fdfff4;
  border-bottom-color: #4d7c0f;
}
.sus-cert-tab-list .sus-cert-tab.theme-social {
  color: #ea580c;
}
.sus-cert-tab-list .sus-cert-tab.theme-social:hover,
.sus-cert-tab-list .sus-cert-tab.theme-social.active {
  background: #fffaf3;
  border-bottom-color: #ea580c;
}
.sus-cert-tab-list .sus-cert-tab.theme-governance {
  color: #6f459b;
}
.sus-cert-tab-list .sus-cert-tab.theme-governance:hover,
.sus-cert-tab-list .sus-cert-tab.theme-governance.active {
  background: #faf6ff;
  border-bottom-color: #6f459b;
}

.sus-cert-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}
.sus-cert-panel {
  background-color: #eeeeee;
  align-items: center;
  border-radius: 16px;
  border: 1px solid transparent;
  overflow: hidden;
}
.sus-cert-panel .sus-cert-panel-image {
  width: 100;
  height: 200px;
  overflow: hidden;
}
.sus-cert-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sus-cert-panel-details {
  padding: 42px 2.5%;
  color: #252525;
}
.sus-cert-panel-details ul {
  margin: 0;
  padding-left: 1rem;
}
.sus-cert-panel-details li {
  padding-bottom: 10px;
}
.sus-cert-panel-details li:last-child {
  padding-bottom: 0;
}

.sus-cert-panel-title {
  margin-bottom: 16px;
  font-family: var(--font-main);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.15em;
}

.sus-cert-panel-details p {
  margin: 32px 0 16px;
}

.sus-cert-panel-details .table-holder {
  background-color: #ffffff;
  padding: 24px 2.7%;
}

.sus-cert-panel-details table {
  width: 100%;
}

.sus-cert-panel-details table,
.sus-cert-panel-details th,
.sus-cert-panel-details td {
  border-collapse: collapse;
  color: #252525;
}

.sus-cert-panel-details th,
.sus-cert-panel-details td {
  padding: 0 20px;
  text-align: center;
}

.sus-cert-panel-details th:nth-child(1),
.sus-cert-panel-details td:nth-child(1) {
  text-align: left;
}

.sus-cert-panel-details td {
  padding-top: 8px;
}

.sus-cert-panel-details thead {
  border-bottom: 1px solid #252525;
}
.sus-cert-panel-details thead th {
  padding-bottom: 8px;
}

.sus-cert-panel-details tbody tr:nth-child(1) td {
  padding-top: 16px;
}

.sus-cert-panel-details .sus-cert-download {
  padding: 15px 0 0;
  margin-top: 20px;
  border-top: 1px solid #e4e4e4;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sus-cert-download-details {
  display: flex;
  align-items: center;
  column-gap: 14px;
}

.sus-cert-download-details .sus-download-icon {
  width: 30px;
  height: auto;
}

.sus-cert-download-details .sus-download-title {
  color: var(--sus-text);
  font-size: 16px;
  font-weight: 600;
}

.sus-cert-download-details .sus-download-type {
  color: #8C8C8C;
  font-weight: 500;
  font-size: 12px;
}

.sus-cert-download-button {
  padding: 5px 10px;
  border-width: 2px;
  border-style: solid;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  column-gap: 10px;
}

.sus-cert-download-button .icon-download{
  mask-image: url('/assets/images/icons/icon-download.svg');
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  width: 20px;
  height: 20px;
}

.sus-cert-panel.theme-environment {
  background: rgb(253, 255, 244);
  border-color: rgb(200, 232, 168);
}
.sus-cert-panel.theme-environment .sus-cert-panel-title {
  color: #2f7d1f;
}
.sus-cert-panel.theme-environment .sus-cert-download-button{
  border-color: #2f7d1f;
  color: #2f7d1f;
}
.sus-cert-panel.theme-environment .sus-cert-download-button .icon-download{
  background-color: #2f7d1f;
}

.sus-cert-panel.theme-social {
  background: rgb(255, 250, 243);
  border-color: rgb(246, 217, 190);
}
.sus-cert-panel.theme-social .sus-cert-panel-title {
  color: #d2691e;
}
.sus-cert-panel.theme-social .sus-cert-download-button{
  border-color: #d2691e;
  color: #d2691e;
}
.sus-cert-panel.theme-social .sus-cert-download-button .icon-download{
  background-color: #d2691e;
}

.sus-cert-panel.theme-governance {
  background: rgb(250, 246, 255);
  border-color: rgb(224, 205, 244);
}
.sus-cert-panel.theme-governance .sus-cert-panel-title {
  color: #7c3aed;
}
.sus-cert-panel.theme-governance .sus-cert-download-button{
  border-color: #7c3aed;
  color: #7c3aed;
}
.sus-cert-panel.theme-governance .sus-cert-download-button .icon-download{
  background-color: #7c3aed;
}

/* Alternating layout: odd panels show text-left/image-right (matching the
   original's first "Environmental" panel), even panels flip to
   image-left/text-right. */
/* .sus-cert-panel-details { order: 1; }
.sus-cert-panel-image { order: 2; }
.sus-cert-panel:nth-child(even) .sus-cert-panel-details { order: 2; }
.sus-cert-panel:nth-child(even) .sus-cert-panel-image { order: 1; } */

/* Milestone */
.sus-section#our-sustainability {
  background-image:
    url("/assets/images/sustainability/milestone-bg-1.png"),
    url("/assets/images/sustainability/milestone-bg-2.png");
  background-repeat: no-repeat, no-repeat;
  background-position:
    bottom left,
    bottom center;
  background-size:
    490px 310px,
    330px 235px;
}

.sus-milestone {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
}
.sus-milestone .sus-section-title {
  margin-top: 34px;
}
.sus-milestone img {
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.sus-milestone-btn {
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  background: #7c3aed;
  color: #fff;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 600;
  border-radius: 16px;
  line-height: 1em;
  box-shadow: -1rem -2rem 4rem rgba(0, 0, 0, 0.25) inset;
}
.sus-milestone-btn:hover {
  opacity: 0.8;
}
.sus-milestone-btn .icon-download {
  background: url("/assets/images/icons/icon-download.svg") center no-repeat;
  width: 20px;
  height: 20px;
  margin-right: 6px;
}

@media (max-width: 760px) {
  .sus-hero {
    padding-top: 70px;
  }
  /* At phone widths the "cover"-sized photo can no longer reveal its
     transparent corner behind the title (there just isn't enough width
     for the text to sit clear of it), so lighten the whole photo with a
     translucent scrim instead of relying on the transparency trick. */
  .sus-hero::before {
    background-image:
      linear-gradient(rgba(242, 255, 239, 0.72), rgba(242, 255, 239, 0.72)),
      url("/assets/images/sustainability/top-bg.png");
  }

  .sus-tabs {
    top: 79px;
  }

  .sus-ceo {
    display: block;
  }

  .sus-ceo {
    display: block;
  }

  .sus-ceo .sus-ceo-profile {
    width: 100%;
    margin-left: 0;
  }

  .sus-ceo,
  .sus-materiality,
  .sus-cert-panel,
  .sus-milestone {
    grid-template-columns: 1fr;
  }
  .sus-cert-panel img {
    height: 200px;
  }
  .sus-cert-panel-details,
  .sus-cert-panel:nth-child(even) .sus-cert-panel-details {
    order: 2;
  }
  .sus-cert-panel-image,
  .sus-cert-panel:nth-child(even) .sus-cert-panel-image {
    order: 1;
  }
  .sus-milestone {
    gap: 24px;
  }
  .sus-milestone .sus-section-title {
    margin-top: 0px;
  }
  .sus-milestone-img {
    order: -1;
  }
  .sus-priority-arrow {
    width: 44px;
  }
  .sus-priority-arrow-label {
    font-size: 0.8rem;
  }
  .sus-sdg-layout {
    flex-direction: column;
  }
  .sus-sdg-grid {
    max-width: none;
  }
  .sus-sdg-icon {
    width: 64px;
    height: 64px;
  }
  .sus-section {
    padding: 48px 0;
  }

  /*  */
  .sus-section#our-sustainability {
    background: transparent;
  }
  /*  */
}