/* Font sizes aligned to the shared ESG typography variables. */
/* CS Corporation — ESG Management Commitment / restrained declaration layout */



.commitment-page {
  background: #031b2b;
  color: #fff;
  overflow: hidden
}

.commitment-page * {
  box-sizing: border-box
}

.commitment-inner {
  width: calc(100% - 60px);
  max-width: var(--inner, 1400px);
  margin: 0 auto;
  padding: 100px 0 125px
}

.commitment-heading {
  text-align: center;
  margin-bottom: 54px
}

.commitment-label {
  display: block;
  margin-bottom: 18px;
  color: #49b7e6;
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: .17em
}

.commitment-heading h1 {
  margin: 0 0 18px;
  font-size: var(--font-visual);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.035em
}

.commitment-subtitle {
  margin: 0;
  color: #c5d5e0;
  font-size: var(--font-base);
  line-height: 1.6
}

/* The single visual echoes the supplied navy ESG artwork. The optional PNG sits behind the letters. */
.commitment-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(260px, 32vw, 440px);
  overflow: hidden;
  border-radius: 6px 72px 6px 6px;
  background: linear-gradient(155deg, #11506e 0%, #0a354e 50%, #041a2b 100%);
  isolation: isolate
}

.commitment-visual>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1
}

.commitment-visual-ring {
  position: absolute;
  width: min(76%, 660px);
  aspect-ratio: 1;
  border: 1px solid rgba(178, 215, 235, .22);
  border-radius: 50%;
  pointer-events: none
}

.commitment-visual::after {
  content: "";
  position: absolute;
  right: -100px;
  top: -190px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(55, 177, 225, .4);
  border-radius: 50%;
  pointer-events: none
}

.commitment-visual-text {
  font-size: 250px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.095em;
  color: rgba(213, 239, 249, .14);
  user-select: none
}

.commitment-visual-caption {
  position: absolute;
  bottom: 26px;
  left: 35px;
  font-size: var(--font-xs);
  letter-spacing: .18em;
  color: #e8f4fa
}

.commitment-statement {


  padding-top: 72px
}

.commitment-opening {
  padding-bottom: 35px;
  border-bottom: 1px solid rgba(255, 255, 255, .2)
}

.commitment-opening p,
.commitment-conclusion p {
  margin: 0 0 22px;
  color: #d1dce4;
  font-size: var(--font-base);
  line-height: 1.9
}

.commitment-opening .commitment-lead {
  margin: 30px 0 0;
  color: #fff;
  font-weight: 600
}

.commitment-principle {
  display: grid;
  grid-template-columns: 95px minmax(0, 1fr);
  gap: 30px;
  padding: 38px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .17)
}

.commitment-letter {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(58, 172, 226, .45);
  border-radius: 50%;
  color: #4ab7ed;
  font-size: var(--font-title-sm);
  font-weight: 600;
  line-height: 62px
}

.commitment-principle h2 {
  margin: 0 0 13px;
  font-size: var(--font-title-md);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.02em
}

.commitment-principle p {
  margin: 0;
  color: #cbd9e3;
  font-size: var(--font-base);
  line-height: 1.85
}

.commitment-conclusion {
  padding-top: 45px
}

.commitment-signature {
  text-align: center;
  margin-top: 75px;
  padding-top: 42px;
  border-top: 1px solid rgba(255, 255, 255, .2)
}

.commitment-date {
  margin: 0 0 25px;
  font-size: var(--font-base);
  letter-spacing: .1em;
  color: #cbd9e3
}

.commitment-company {
  margin: 0 0 12px;
  font-size: var(--font-title-sm);
  font-weight: 650
}

.commitment-ceo {
  margin: 0;
  color: #d0dce6;
  font-size: var(--font-base);
  line-height: 1.8
}

.commitment-ceo strong {
  color: #fff;
  font-weight: 600;
  margin-left: 12px
}

/* CSS keeps content visible if JavaScript is unavailable. Animation uses @starting-style when supported. */
@media (prefers-reduced-motion:no-preference) {
  [data-cm-reveal].cm-shown {
    animation: cm-enter .8s cubic-bezier(.22, .7, .25, 1) both
  }

  [data-cm-reveal="right"].cm-shown {
    animation-name: cm-enter-right
  }

  @keyframes cm-enter {
    from {
      opacity: 0;
      transform: translateY(30px)
    }

    to {
      opacity: 1;
      transform: translateY(0)
    }
  }

  @keyframes cm-enter-right {
    from {
      opacity: 0;
      transform: translateX(40px)
    }

    to {
      opacity: 1;
      transform: translateX(0)
    }
  }
}

@media(max-width:767px) {
  .commitment-inner {
    width: calc(100% - 40px);
    padding: 65px 0 85px
  }

  .commitment-heading {
    margin-bottom: 35px
  }

  .commitment-heading h1 {
    font-size: var(--font-title-sm)
  }

  .commitment-visual {
    height: 260px;
    border-radius: 5px 45px 5px 5px
  }

  .commitment-visual-text {
    font-size: var(--font-decorative)
  }

  .commitment-visual-caption {
    left: 20px;
    bottom: 20px;
    font-size: var(--font-xs)
  }

  .commitment-statement {
    padding-top: 45px
  }

  .commitment-principle {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 32px 0
  }

  .commitment-letter {
    width: 52px;
    height: 52px;
    line-height: 50px;
    font-size: var(--font-title-sm)
  }

  .commitment-opening p,
  .commitment-conclusion p,
  .commitment-principle p {
    font-size: var(--font-sm)
  }

  .commitment-signature {
    margin-top: 50px
  }

  .commitment-ceo strong {
    display: block;
    margin-left: 0
  }
}