html {
  font-size: 100%
}

body {
  margin: 0;
  overscroll-behavior: contain;
  overflow-x: hidden
}

.brandmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 16px 16px;
  position: relative;
  z-index: 10
}

.brandmark-card {
  background: #040608;
  border-radius: 13px;
  box-shadow: 2px 7px 18px -1px #319f4717 2px 2px 4px -1px #319f470d;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px
}

.brandmark-card img {
  display: block;
  width: 65px;
  height: 65px;
  object-fit: contain
}

.brandmark-name {
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .04em;
  line-height: 1.2;
  color: #F4F6F9;
  text-align: center
}

.brandmark-tagline {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .06em;
  color: #319F47;
  text-align: center;
  text-transform: uppercase
}

.siteheader {
  background: #040608;
  position: relative;
  overflow: hidden
}

.siteheader::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 38px, #319f470a 38px, #319f470a 39px), repeating-linear-gradient(90deg, transparent, transparent 38px, #319f470a 38px, #319f470a 39px);
  pointer-events: none
}

.siteheader::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #319F47 30%, #319F47 70%, transparent 100%);
  pointer-events: none
}

.headerinner {
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 5
}

.primarynav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 0 40px
}

.primarynav a {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .05em;
  color: #F4F6F9;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 36px;
  border: 1px solid #f4f6f91f;
  transition: background-color .25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color .25s cubic-bezier(0.34, 1.56, 0.64, 1), color .25s cubic-bezier(0.34, 1.56, 0.64, 1), transform .22s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
  min-height: 44px;
  display: flex;
  align-items: center
}

.primarynav a:hover {
  background: #319F47;
  border-color: #319F47;
  color: #F4F6F9;
  transform: scale(1.04)
}

.primarynav a:focus {
  outline: 2px solid #319F47;
  outline-offset: 3px;
  text-decoration: underline
}

.primarynav a.active {
  background: #319F47;
  border-color: #319F47;
  color: #F4F6F9
}

.credentialstrip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid #f4f6f914;
  flex-wrap: wrap
}

.credentialbadge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #319f471f;
  border: 1px solid #319f4740;
  border-radius: 4px;
  padding: 8px 16px
}

.credentialbadge i {
  color: #319F47;
  font-size: 16px
}

.credentialbadge span {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .05em;
  color: #f4f6f9bf
}

.sitefooter {
  background: #040608;
  position: relative;
  overflow: hidden
}

.sitefooter::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 50%, #319f470f 0%, transparent 60%), radial-gradient(circle at 80% 50%, #319f470a 0%, transparent 55%);
  pointer-events: none
}

.sitefooter::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #319F47 30%, #319F47 70%, transparent 100%);
  pointer-events: none
}

.footertop {
  max-width: 1366px;
  margin: 0 auto;
  padding: 80px 40px 40px;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px
}

.footerdescription {
  text-align: center;
  max-width: 560px
}

.footerdescription p {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .02em;
  color: #f4f6f9a6;
  margin: 0
}

.footercontact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px
}

.contactitem {
  display: flex;
  align-items: center;
  gap: 8px
}

.contactitem i {
  color: #319F47;
  font-size: 16px;
  flex-shrink: 0
}

.contactitem a,
.contactitem span {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .04em;
  color: #f4f6f9a6;
  text-decoration: none
}

.contactitem a:hover {
  color: #319F47
}

.contactitem a:focus {
  outline: 2px solid #319F47;
  outline-offset: 2px;
  text-decoration: underline
}

.footernav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px
}

.footernav a {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .05em;
  color: #f4f6f98c;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid #f4f6f91a;
  transition: color .28s cubic-bezier(0.68, -0.55, 0.27, 1.55), border-color .28s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  min-height: 44px;
  display: flex;
  align-items: center
}

.footernav a:hover {
  color: #319F47;
  border-color: #319f4766
}

.footernav a:focus {
  outline: 2px solid #319F47;
  outline-offset: 2px;
  text-decoration: underline
}

.footerbottom {
  border-top: 1px solid #f4f6f912;
  position: relative;
  z-index: 5
}

.footerbottominner {
  max-width: 1366px;
  margin: 0 auto;
  padding: 16px 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px
}

.footerlogocard {
  background: #f4f6f90f;
  border: 1px solid #f4f6f91a;
  border-radius: 13px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  box-shadow: 2px 2px 4px -1px #0406080d
}

.footerlogocard img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain
}

.copyright {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .04em;
  color: #f4f6f959;
  text-align: center;
  margin: 0
}

@media (max-width: 960px) {
  .headerinner {
    padding: 0 16px
  }

  .footertop {
    padding: 40px 16px;
    gap: 40px
  }

  .footerbottominner {
    padding: 16px 16px 40px
  }

  .credentialstrip {
    gap: 8px
  }
}

@media (max-width: 480px) {
  .brandmark {
    padding: 40px 16px 16px
  }

  .primarynav {
    gap: 8px;
    padding: 16px 0 40px
  }

  .primarynav a {
    font-size: 14px;
    padding: 8px 16px
  }

  .footercontact {
    flex-direction: column;
    align-items: center
  }

  .credentialbadge {
    width: 100%;
    justify-content: center
  }
}

.cookienotice {
  position: fixed;
  top: 16px;
  right: 16px;
  max-width: 380px;
  background: #F4F6F9;
  border-radius: 13px;
  border: 1px solid #319f4733;
  box-shadow: 2px 10px 60px -1px #04060824 2px 7px 18px -1px #319f4717;
  padding: 16px;
  z-index: 2000;
  font-family: 'Nunito', sans-serif
}

.cookienotice-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .03em;
  color: #040608;
  margin: 0 0 16px
}

.cookienotice-text a {
  color: #319F47;
  text-decoration: underline
}

.cookienotice-text a:hover {
  color: #040608
}

.cookienotice-text a:focus {
  outline: 2px solid #319F47;
  outline-offset: 2px
}

.cookienotice-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.cookienotice-actions button {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .04em;
  padding: 8px 16px;
  border-radius: 36px;
  cursor: pointer;
  min-height: 44px;
  background: transparent;
  transition: background-color .22s cubic-bezier(0.34, 1.56, 0.64, 1), color .22s cubic-bezier(0.34, 1.56, 0.64, 1), transform .22s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex: 1
}

.cookienotice-actions button:hover {
  transform: scale(1.04)
}

.cookienotice-actions button:focus {
  outline: 2px solid #319F47;
  outline-offset: 2px
}

.cookieaccept {
  border: 2px solid #040608;
  color: #040608
}

.cookieaccept:hover {
  background: #040608;
  color: #F4F6F9
}

.cookiedecline {
  border: 2px solid #0406084d;
  color: #040608a6
}

.cookiedecline:hover {
  background: #04060814;
  color: #040608
}

.legal-article {
  max-width: 1366px;
  margin: 0 auto;
  padding: 80px 40px;
  color: #040608;
  line-height: 1.65;
  font-size: 16px
}

.legal-article ul,
.legal-article ol {
  margin: 16px 0 40px 40px;
  padding: 0
}

.legal-article ul ul,
.legal-article ol ol,
.legal-article ul ol,
.legal-article ol ul {
  margin-top: 8px;
  margin-bottom: 8px
}

.legal-article li {
  margin-bottom: 8px;
  line-height: 1.65;
  font-size: 16px;
  padding-left: 8px
}

.legal-article ul li {
  list-style-type: disc
}

.legal-article ul ul li {
  list-style-type: circle
}

.legal-article ol li {
  list-style-type: decimal
}

.legal-article strong,
.legal-article b {
  font-weight: 700;
  color: #040608;
  letter-spacing: .01em
}

.legal-article em,
.legal-article i {
  font-style: italic;
  color: #040608
}

.legal-article a {
  color: #319F47;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .25s cubic-bezier(0.34, 1.56, 0.64, 1), text-decoration-color .22s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.legal-article a:hover {
  color: #040608;
  text-decoration-color: #319F47
}

.legal-article a:focus-visible {
  outline: 2px solid #319F47;
  outline-offset: 3px;
  border-radius: 4px
}

.legal-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 40px 0;
  font-size: 14px;
  line-height: 1.45;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 2px 7px 18px -1px #039f4717
}

.legal-article thead {
  background-color: #040608
}

.legal-article thead th {
  color: #F4F6F9;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 16px;
  text-align: left;
  border-bottom: 2px solid #319F47
}

.legal-article tbody tr {
  background-color: #fff;
  transition: background-color .2s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.legal-article tbody tr:nth-child(even) {
  background-color: #F4F6F9
}

.legal-article tbody tr:hover {
  background-color: #eef7f1
}

.legal-article td {
  padding: 16px;
  font-size: 14px;
  color: #040608;
  line-height: 1.65;
  border-bottom: 1px solid #319f471f;
  vertical-align: top
}

.legal-article tbody tr:last-child td {
  border-bottom: none
}

.legal-article th {
  padding: 16px;
  text-align: left;
  vertical-align: middle
}

.legal-article hr {
  border: none;
  border-top: 1px solid #319f472e;
  margin: 40px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #319f4740, transparent)
}

.legal-article div {
  margin-bottom: 16px
}

.legal-article div:last-child {
  margin-bottom: 0
}

@media (max-width: 960px) {
  .legal-article {
    padding: 80px 40px
  }

  .legal-article table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 13px
  }
}

@media (max-width: 480px) {
  .legal-article {
    padding: 40px 16px
  }

  .legal-article ul,
  .legal-article ol {
    margin-left: 16px
  }

  .legal-article table {
    font-size: 14px
  }

  .legal-article thead th,
  .legal-article td {
    padding: 16px 8px
  }
}

.learningprogramdetail {
  background: #F4F6F9;
  overflow-x: clip
}

.learningprogramdetail .programdetail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  max-width: 1366px;
  margin: 0 auto;
  padding: 80px 40px;
  gap: 80px
}

.learningprogramdetail .programdetail-text {
  padding: 40px;
  position: relative
}

.learningprogramdetail .programdetail-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-top: 2px solid #319F47;
  border-left: 2px solid #319F47;
  border-radius: 4px 0 0 0
}

.learningprogramdetail .programdetail-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-bottom: 2px solid #040608;
  border-right: 2px solid #040608;
  border-radius: 0 0 4px 0
}

.learningprogramdetail .category-badge {
  display: inline-block;
  background: #040608;
  color: #F4F6F9;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .08em;
  padding: 8px 16px;
  border-radius: 4px;
  margin-bottom: 16px
}

.learningprogramdetail .program-heading {
  font-size: 70px;
  line-height: 1.2;
  letter-spacing: -.03em;
  margin: 0 0 16px;
  background: linear-gradient(135deg, #F4F6F9 0%, #040608 45%, #319F47 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.learningprogramdetail .program-duration-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px
}

.learningprogramdetail .duration-label {
  font-size: 14px;
  line-height: 1.45;
  color: #040608;
  opacity: .6;
  letter-spacing: .06em
}

.learningprogramdetail .duration-value {
  font-size: 16px;
  line-height: 1.45;
  color: #319F47;
  font-weight: 600
}

.learningprogramdetail .manifesto-text {
  font-size: 18px;
  line-height: 1.65;
  color: #040608;
  margin: 0 0 40px
}

.learningprogramdetail .action-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap
}

.learningprogramdetail .btn-enroll {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #040608;
  color: #F4F6F9;
  font-size: 16px;
  line-height: 1.2;
  padding: 16px 40px;
  border-radius: 13px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .28s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 2px 7px 18px -1px #04060817
}

.learningprogramdetail .btn-enroll:hover {
  transform: scale(1.05);
  box-shadow: 2px 10px 60px -1px #04060824
}

.learningprogramdetail .btn-enroll:focus {
  outline: 2px solid #319F47;
  outline-offset: 3px
}

.learningprogramdetail .btn-utility {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #040608;
  font-size: 14px;
  line-height: 1.2;
  padding: 16px;
  border-radius: 13px;
  border: 1px solid #0406082e;
  cursor: pointer;
  transition: background .22s cubic-bezier(0.68, -0.55, 0.27, 1.55), transform .22s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.learningprogramdetail .btn-utility:hover {
  background: #040608;
  color: #F4F6F9;
  transform: scale(1.04)
}

.learningprogramdetail .btn-utility:focus {
  outline: 2px solid #319F47;
  outline-offset: 3px
}

.learningprogramdetail .programdetail-image {
  position: relative;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 2px 10px 60px -1px #319f4724
}

.learningprogramdetail .programdetail-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #319f4759 0%, transparent 60%);
  z-index: 1;
  pointer-events: none
}

.learningprogramdetail .programdetail-image::after {
  content: '';
  position: absolute;
  top: -40px;
  left: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle at 30% 30%, #f4f6f98c 0%, transparent 70%);
  z-index: 2;
  pointer-events: none
}

.learningprogramdetail .image-skeleton {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(110deg, #e8eaed 30%, #d4d7dc 50%, #e8eaed 70%);
  background-size: 200% 100%;
  animation: skeletonShift 1.6s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 13px
}

@keyframes skeletonShift {
  0% {
    background-position: 200% 0
  }

  100% {
    background-position: -200% 0
  }
}

.learningprogramdetail .programdetail-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  position: relative;
  z-index: 1;
  border-radius: 13px
}

.learningprogramdetail .image-corner-bracket {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-bottom: 2px solid #f4f6f9b3;
  border-right: 2px solid #f4f6f9b3;
  border-radius: 0 0 4px 0;
  z-index: 3;
  pointer-events: none
}

.learningprogramdetail .zigzag-divider {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0
}

.learningprogramdetail .zigzag-divider svg {
  display: block;
  width: 100%
}

.learningprogramdetail .detail-body {
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 40px 80px;
  display: grid;
  grid-template-columns: 220px 1fr 340px;
  gap: 40px;
  align-items: start
}

.learningprogramdetail .sidenote-column {
  padding-top: 8px
}

.learningprogramdetail .sidenote-label {
  font-size: 14px;
  line-height: 1.45;
  color: #319F47;
  letter-spacing: .08em;
  margin-bottom: 8px;
  display: block
}

.learningprogramdetail .sidenote-annotation {
  font-size: 14px;
  line-height: 1.65;
  color: #040608;
  opacity: .65
}

.learningprogramdetail .description-column {
  background: #fff;
  border-radius: 13px;
  padding: 40px;
  box-shadow: inset 2px 2px 4px -1px #0406080d 2px 7px 18px -1px #04060817
}

.learningprogramdetail .description-column h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  background: linear-gradient(135deg, #F4F6F9 0%, #040608 50%, #319F47 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.learningprogramdetail .description-column h3 {
  font-size: 18px;
  line-height: 1.45;
  color: #040608;
  margin: 40px 0 8px
}

.learningprogramdetail .description-column p {
  font-size: 16px;
  line-height: 1.65;
  color: #040608;
  margin: 0 0 16px
}

.learningprogramdetail .description-column strong {
  color: #319F47
}

.learningprogramdetail .description-column ul,
.learningprogramdetail .description-column ol {
  padding-left: 16px;
  margin: 0 0 16px
}

.learningprogramdetail .description-column li {
  font-size: 16px;
  line-height: 1.65;
  color: #040608;
  margin-bottom: 8px
}

.learningprogramdetail .description-column blockquote {
  border-top: 2px solid #319F47;
  margin: 16px 0;
  padding: 16px 0 0;
  font-size: 18px;
  line-height: 1.65;
  color: #040608;
  font-style: italic
}

.learningprogramdetail .description-column cite {
  font-size: 14px;
  color: #040608;
  opacity: .6;
  font-style: normal;
  display: block;
  margin-top: 8px
}

.learningprogramdetail .description-column dl {
  margin: 0 0 16px
}

.learningprogramdetail .description-column dt {
  font-size: 16px;
  font-weight: 700;
  color: #040608;
  margin-bottom: 4px
}

.learningprogramdetail .description-column dd {
  font-size: 16px;
  line-height: 1.65;
  color: #040608;
  margin: 0 0 16px 16px
}

.learningprogramdetail .price-card {
  background: #040608;
  border-radius: 13px;
  padding: 40px;
  box-shadow: 2px 10px 60px -1px #319f4724;
  position: sticky;
  top: 40px
}

.learningprogramdetail .price-card-tag {
  display: inline-block;
  background: #319F47;
  color: #F4F6F9;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .06em;
  padding: 8px 16px;
  border-radius: 4px;
  margin-bottom: 16px
}

.learningprogramdetail .price-amount {
  font-size: 70px;
  line-height: 1.2;
  letter-spacing: -.03em;
  color: #F4F6F9;
  margin: 0 0 8px
}

.learningprogramdetail .price-terms {
  font-size: 14px;
  line-height: 1.65;
  color: #f4f6f9a6;
  margin: 0 0 16px
}

.learningprogramdetail .price-note {
  font-size: 14px;
  line-height: 1.65;
  color: #f4f6f980;
  margin: 0 0 40px;
  padding-top: 16px;
  border-top: 1px solid #f4f6f91a
}

.learningprogramdetail .btn-enroll-card {
  display: block;
  width: 100%;
  background: #319F47;
  color: #F4F6F9;
  font-size: 16px;
  line-height: 1.2;
  padding: 16px 40px;
  border-radius: 13px;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .28s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 2px 7px 18px -1px #319f4717;
  box-sizing: border-box
}

.learningprogramdetail .btn-enroll-card:hover {
  transform: scale(1.04);
  box-shadow: 2px 10px 60px -1px #319f4724
}

.learningprogramdetail .btn-enroll-card:focus {
  outline: 2px solid #F4F6F9;
  outline-offset: 3px
}

.learningprogramdetail .price-duration-note {
  font-size: 14px;
  line-height: 1.45;
  color: #f4f6f980;
  text-align: center;
  margin-top: 16px
}

.learningprogramdetail .program-stages {
  max-width: 1366px;
  margin: 0 auto;
  padding: 80px 40px;
  background: #fff;
  position: relative
}

.learningprogramdetail .program-stages::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, #F4F6F9 0%, #fff 40%, #319f470a 100%);
  pointer-events: none;
  border-radius: 13px
}

.learningprogramdetail .stages-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  position: relative;
  z-index: 1
}

.learningprogramdetail .stages-heading-wrap {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 40px
}

.learningprogramdetail .stages-heading {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #F4F6F9 0%, #040608 50%, #319F47 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0
}

.learningprogramdetail .stages-content {
  font-size: 16px;
  line-height: 1.65;
  color: #040608
}

.learningprogramdetail .stages-content h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #040608;
  margin: 0 0 16px
}

.learningprogramdetail .stages-content h3 {
  font-size: 18px;
  line-height: 1.45;
  color: #319F47;
  margin: 40px 0 8px
}

.learningprogramdetail .stages-content p {
  margin: 0 0 16px
}

.learningprogramdetail .stages-content strong {
  color: #040608
}

.learningprogramdetail .stages-content ul,
.learningprogramdetail .stages-content ol {
  padding-left: 16px;
  margin: 0 0 16px
}

.learningprogramdetail .stages-content li {
  margin-bottom: 8px
}

.learningprogramdetail .stages-content blockquote {
  border-top: 2px solid #319F47;
  margin: 16px 0;
  padding: 16px 0 0;
  font-style: italic
}

.learningprogramdetail .stages-content dl {
  margin: 0 0 16px
}

.learningprogramdetail .stages-content dt {
  font-weight: 700;
  margin-bottom: 4px
}

.learningprogramdetail .stages-content dd {
  margin: 0 0 16px 16px
}

.learningprogramdetail .stages-content details {
  border: 1px solid #0406081a;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 16px
}

.learningprogramdetail .stages-content summary {
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  color: #040608;
  list-style: none
}

.learningprogramdetail .stages-content summary::-webkit-details-marker {
  display: none
}

.learningprogramdetail .rotating-geo {
  position: absolute;
  top: 80px;
  right: -40px;
  width: 220px;
  height: 220px;
  animation: geoRotate 28s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: .06
}

@keyframes geoRotate {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}

.learningprogramdetail .geo-bg {
  position: absolute;
  top: 40px;
  left: -60px;
  width: 280px;
  height: 280px;
  animation: geoRotate 40s linear infinite reverse;
  pointer-events: none;
  z-index: 0;
  opacity: .04
}

.learningprogramdetail .animated-bg-section {
  background: linear-gradient(200deg, #040608, #0d1a10, #040608);
  background-size: 300% 300%;
  animation: gradientAngle 12s ease-in-out infinite alternate;
  padding: 80px 40px;
  position: relative
}

@keyframes gradientAngle {
  0% {
    background-position: 0 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0 100%
  }
}

.learningprogramdetail .animated-bg-section:hover .pattern-overlay {
  animation-play-state: running;
  opacity: .12
}

.learningprogramdetail .pattern-overlay {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, #319f4726 0px, #319f4726 1px, transparent 1px, transparent 20px);
  background-size: 28px 28px;
  opacity: .06;
  pointer-events: none;
  transition: opacity .35s cubic-bezier(0.34, 1.56, 0.64, 1), background-position .35s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: patternDrift 8s linear infinite paused
}

@keyframes patternDrift {
  0% {
    background-position: 0 0
  }

  100% {
    background-position: 56px 56px
  }
}

.learningprogramdetail .animated-bg-inner {
  max-width: 1366px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.learningprogramdetail .roles-heading {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #F4F6F9;
  margin: 0 0 8px;
  text-align: center
}

.learningprogramdetail .roles-sub {
  font-size: 16px;
  line-height: 1.65;
  color: #f4f6f999;
  text-align: center;
  margin: 0 0 40px
}

.learningprogramdetail .roles-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px
}

.learningprogramdetail .role-card {
  background: #f4f6f90d;
  border: 1px solid #f4f6f91a;
  border-radius: 13px;
  padding: 40px;
  box-shadow: inset 2px 2px 4px -1px #319f470d;
  transition: background .28s cubic-bezier(0.34, 1.56, 0.64, 1), transform .28s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.learningprogramdetail .role-card:hover {
  background: #319f471a;
  transform: scale(1.02)
}

.learningprogramdetail .role-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 16px
}

.learningprogramdetail .role-title {
  font-size: 18px;
  line-height: 1.45;
  color: #F4F6F9;
  margin: 0 0 8px
}

.learningprogramdetail .role-description {
  font-size: 16px;
  line-height: 1.65;
  color: #f4f6f9a6;
  margin: 0
}

@media (max-width: 960px) {
  .learningprogramdetail .programdetail-grid {
    grid-template-columns: 1fr;
    padding: 40px 16px;
    gap: 40px
  }

  .learningprogramdetail .program-heading {
    font-size: 36px
  }

  .learningprogramdetail .detail-body {
    grid-template-columns: 1fr;
    padding: 0 16px 40px;
    gap: 40px
  }

  .learningprogramdetail .sidenote-column {
    display: none
  }

  .learningprogramdetail .price-card {
    position: static
  }

  .learningprogramdetail .stages-grid {
    grid-template-columns: 1fr
  }

  .learningprogramdetail .roles-columns {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .learningprogramdetail .program-stages {
    padding: 40px 16px
  }

  .learningprogramdetail .animated-bg-section {
    padding: 40px 16px
  }
}

@media (max-width: 480px) {
  .learningprogramdetail .programdetail-text {
    padding: 16px
  }

  .learningprogramdetail .program-heading {
    font-size: 36px
  }

  .learningprogramdetail .price-amount {
    font-size: 36px
  }

  .learningprogramdetail .action-row {
    flex-direction: column;
    align-items: flex-start
  }

  .learningprogramdetail .description-column {
    padding: 16px
  }

  .learningprogramdetail .price-card {
    padding: 16px
  }

  .learningprogramdetail .role-card {
    padding: 16px
  }
}

@media (min-width: 1440px) {
  .learningprogramdetail .programdetail-grid {
    padding: 80px
  }

  .learningprogramdetail .detail-body {
    padding: 0 80px 80px
  }
}

.archive {
  background: #F4F6F9;
  overflow-x: clip;
  position: relative
}

.archive * {
  box-sizing: border-box
}

.archive ::selection {
  background: #040608;
  color: #F4F6F9
}

.archive .titleband {
  position: relative;
  background: linear-gradient(157deg, #F4F6F9 0%, #040608 52%, #319F47 100%);
  padding: 40px 0;
  overflow: hidden
}

.archive .titlebandinner {
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 40px
}

.archive .titlebandtext {
  flex: 1 1 0;
  z-index: 1;
  position: relative
}

.archive .titlebandtext h1 {
  font-size: 70px;
  line-height: 1.2;
  letter-spacing: -.03em;
  margin: 0 0 16px;
  background: linear-gradient(157deg, #F4F6F9 0%, #040608 52%, #319F47 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.archive .titlebandtext .tagline {
  font-size: 18px;
  line-height: 1.45;
  color: #F4F6F9;
  margin: 0 0 40px;
  max-width: 480px
}

.archive .titlebandlinks {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap
}

.archive .titlebandlinks a {
  display: inline-block;
  font-size: 16px;
  line-height: 1.45;
  padding: 16px 40px;
  border-radius: 36px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .02em;
  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .22s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.archive .titlebandlinks a:hover {
  transform: scale(1.06)
}

.archive .titlebandlinks a:focus-visible {
  outline: 3px solid #319F47 !important;
  outline-offset: 3px !important
}

.archive .titlebandlinks .linkprimary {
  background: #F4F6F9;
  color: #040608;
  box-shadow: 2px 7px 18px -1px #319f4717
}

.archive .titlebandlinks .linkprimary:hover {
  box-shadow: 2px 10px 60px -1px #319f4724
}

.archive .titlebandlinks .linksecondary {
  background: transparent;
  color: #F4F6F9;
  border: 2px solid #f4f6f980
}

.archive .titlebandimage {
  flex: 0 0 420px;
  position: relative;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 2px 10px 60px -1px #04060824
}

.archive .titlebandimage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #319f472e;
  pointer-events: none;
  border-radius: 13px
}

.archive .titlebandimage img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  border-radius: 13px;
  transition: transform .28s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.archive .titlebandimage:hover img {
  transform: scale(1.04)
}

.archive .imagedecor {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 36px;
  background: #319f4714;
  pointer-events: none;
  z-index: 0
}

.archive .arrowdecor {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  z-index: 2;
  pointer-events: none
}

.archive .arrowdecor svg {
  width: 28px;
  height: 28px;
  opacity: .45
}

.archive .diagonaldivider {
  width: 100%;
  height: 56px;
  background: #F4F6F9;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  margin-top: -2px
}

.archive .archivebody {
  max-width: 1366px;
  margin: 0 auto;
  padding: 80px 40px
}

.archive .archivegrid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start
}

.archive .sidebar {
  position: sticky;
  top: 40px
}

.archive .sidebarcard {
  background: #fff;
  border-radius: 13px;
  padding: 40px;
  box-shadow: inset 2px 2px 4px -1px #0406080d 2px 7px 18px -1px #04060817;
  margin-bottom: 40px
}

.archive .sidebarcard:last-child {
  margin-bottom: 0
}

.archive .sidebarlabel {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #319F47;
  font-weight: 700;
  margin: 0 0 16px
}

.archive .sidebarcard h4 {
  font-size: 18px;
  line-height: 1.45;
  color: #040608;
  margin: 0 0 16px;
  background: linear-gradient(157deg, #F4F6F9 0%, #040608 52%, #319F47 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.archive .topiclist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.archive .topiclist li a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 1.45;
  color: #040608;
  text-decoration: none;
  padding: 8px;
  border-radius: 4px;
  transition: background .22s cubic-bezier(0.34, 1.56, 0.64, 1), color .22s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.archive .topiclist li a:hover {
  background: #F4F6F9;
  color: #319F47
}

.archive .topiclist li a:focus-visible {
  outline: 3px solid #319F47 !important;
  outline-offset: 2px !important
}

.archive .topicicon {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #319F47;
  flex-shrink: 0;
  display: inline-block
}

.archive .feedblock {
  margin-top: 0
}

.archive .feedblock h4 {
  font-size: 16px;
  line-height: 1.45;
  color: #040608;
  margin: 0 0 16px;
  background: linear-gradient(157deg, #F4F6F9 0%, #040608 52%, #319F47 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.archive .feedlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.archive .feedentry {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: flex-start;
  padding: 8px;
  border-radius: 4px;
  background: #F4F6F9
}

.archive .feedentryicon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: #040608;
  display: flex;
  align-items: center;
  justify-content: center
}

.archive .feedentryicon svg {
  width: 16px;
  height: 16px
}

.archive .feedentrybody {
  flex: 1 1 0;
  min-width: 0
}

.archive .feedentrytime {
  font-size: 14px;
  line-height: 1.45;
  color: #319F47;
  letter-spacing: .04em;
  display: block;
  margin-bottom: 4px
}

.archive .feedentrydesc {
  font-size: 14px;
  line-height: 1.45;
  color: #040608;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.archive .maincontent {
  min-width: 0
}

.archive .maincontent h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  background: linear-gradient(157deg, #F4F6F9 0%, #040608 52%, #319F47 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.archive .mainlede {
  font-size: 18px;
  line-height: 1.65;
  color: #040608;
  margin: 0 0 40px;
  max-width: 640px
}

.archive .articlelist {
  display: flex;
  flex-direction: column;
  gap: 40px
}

.archive .articlerow {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  align-items: start;
  background: #fff;
  border-radius: 13px;
  padding: 40px;
  box-shadow: inset 2px 2px 4px -1px #0406080d 2px 7px 18px -1px #04060817;
  transition: box-shadow .28s cubic-bezier(0.34, 1.56, 0.64, 1), transform .28s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-decoration: none;
  color: inherit;
  display: block
}

.archive .articlerow:hover {
  box-shadow: 2px 10px 60px -1px #319f4724;
  transform: translateY(-2px)
}

.archive .articlerow:focus-visible {
  outline: 3px solid #319F47 !important;
  outline-offset: 3px !important
}

.archive .articletoprow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap
}

.archive .articlenumber {
  font-size: 36px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #319F47;
  flex-shrink: 0;
  min-width: 56px
}

.archive .articletag {
  display: inline-block;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #040608;
  color: #F4F6F9;
  border-radius: 4px;
  padding: 4px 8px;
  font-weight: 600
}

.archive .articletag.green {
  background: #319F47;
  color: #F4F6F9
}

.archive .articletag.light {
  background: #F4F6F9;
  color: #040608;
  border: 1px solid #0406081f
}

.archive .articlerow h3 {
  font-size: 18px;
  line-height: 1.45;
  color: #040608;
  margin: 0 0 8px;
  letter-spacing: -.01em;
  background: linear-gradient(157deg, #F4F6F9 0%, #040608 52%, #319F47 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.archive .articlerow p {
  font-size: 16px;
  line-height: 1.65;
  color: #040608;
  margin: 0 0 16px
}

.archive .articlemeta {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap
}

.archive .articlemeta .duration {
  font-size: 14px;
  line-height: 1.45;
  color: #319F47;
  font-weight: 600;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px
}

.archive .articlemeta .duration svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0
}

.archive .articlemeta .level {
  font-size: 14px;
  line-height: 1.45;
  color: #040608;
  opacity: .7
}

.archive .readlink {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 1.45;
  color: #319F47;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 0;
  transition: gap .22s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.archive .readlink:hover {
  gap: 16px
}

.archive .readlink svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0
}

.archive .readlink:focus-visible {
  outline: 3px solid #319F47 !important;
  outline-offset: 2px !important
}

.archive .stataccent {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 40px
}

.archive .stataccent .bignum {
  font-size: 70px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #319F47
}

.archive .stataccent .smalllabel {
  font-size: 16px;
  line-height: 1.45;
  color: #040608;
  opacity: .7;
  max-width: 120px
}

.archive .sidenoterow {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 40px
}

.archive .sidenote {
  font-size: 14px;
  line-height: 1.65;
  color: #319F47;
  font-weight: 600;
  padding-top: 4px;
  letter-spacing: .02em
}

.archive .sidenotetext p {
  font-size: 16px;
  line-height: 1.65;
  color: #040608;
  margin: 0
}

.archive .colorbreak {
  background: #040608;
  padding: 80px 0;
  position: relative;
  overflow: hidden
}

.archive .colorbreakinner {
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
  position: relative;
  z-index: 1
}

.archive .colorbreak h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  background: linear-gradient(157deg, #F4F6F9 0%, #319F47 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.archive .colorbreak p {
  font-size: 18px;
  line-height: 1.65;
  color: #f4f6f9cc;
  margin: 0 0 40px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto
}

.archive .colorbreaklinks {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap
}

.archive .colorbreaklinks a {
  display: inline-block;
  font-size: 16px;
  line-height: 1.45;
  padding: 16px 40px;
  border-radius: 36px;
  text-decoration: none;
  font-weight: 600;
  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .22s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.archive .colorbreaklinks a:hover {
  transform: scale(1.06)
}

.archive .colorbreaklinks a:focus-visible {
  outline: 3px solid #F4F6F9 !important;
  outline-offset: 3px !important
}

.archive .colorbreaklinks .breakprimary {
  background: #319F47;
  color: #F4F6F9;
  box-shadow: 2px 7px 18px -1px #319f4717
}

.archive .colorbreaklinks .breakprimary:hover {
  box-shadow: 2px 10px 60px -1px #319f4724
}

.archive .colorbreaklinks .breaksecondary {
  background: transparent;
  color: #F4F6F9;
  border: 2px solid #f4f6f966
}

.archive .bgpandecor {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 38px, #319f470a 38px, #319f470a 40px);
  animation: bgpan 12s linear infinite;
  pointer-events: none;
  z-index: 0
}

@keyframes bgpan {
  0% {
    background-position: 0 0
  }

  100% {
    background-position: 0 -80px
  }
}

.archive .skeletonimg {
  background: linear-gradient(90deg, #e8eaed 25%, #f0f2f5 50%, #e8eaed 75%);
  background-size: 200% 100%;
  animation: skeletonload 1.4s ease-in-out infinite;
  border-radius: 13px
}

@keyframes skeletonload {
  0% {
    background-position: 200% 0
  }

  100% {
    background-position: -200% 0
  }
}

.archive .titlebandimage img.loaded+.skeletonimg,
.archive .titlebandimage .skeletonimg {
  display: none
}

@media (max-width: 960px) {
  .archive .titlebandinner {
    flex-direction: column;
    padding: 0 40px
  }

  .archive .titlebandimage {
    flex: 0 0 auto;
    width: 100%
  }

  .archive .titlebandtext h1 {
    font-size: 36px
  }

  .archive .archivegrid {
    grid-template-columns: 1fr
  }

  .archive .sidebar {
    position: static
  }

  .archive .sidenoterow {
    grid-template-columns: 1fr;
    gap: 8px
  }
}

@media (max-width: 480px) {
  .archive .titlebandinner {
    padding: 0 16px
  }

  .archive .titlebandtext h1 {
    font-size: 36px
  }

  .archive .titlebandlinks {
    flex-direction: column
  }

  .archive .archivebody {
    padding: 40px 16px
  }

  .archive .colorbreakinner {
    padding: 0 16px
  }

  .archive .articlerow {
    padding: 16px
  }

  .archive .sidebarcard {
    padding: 16px
  }

  .archive .articlenumber {
    font-size: 18px;
    min-width: 32px
  }
}

@media (min-width: 1440px) {
  .archive .titlebandtext h1 {
    font-size: 70px
  }
}

.learningprogram {
  background-color: #fff;
  overflow-x: hidden
}

.learningprogram .pageframe {
  max-width: 1366px;
  margin: 0 auto;
  padding: 0 40px
}

.learningprogram .gradienttext {
  background: linear-gradient(135deg, #F4F6F9, #040608, #319F47);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.learningprogram .skeletonimage {
  background: linear-gradient(90deg, #d4d8de 25%, #e8eaed 50%, #d4d8de 75%);
  background-size: 200% 100%;
  animation: skeletonpulse 1.6s ease-in-out infinite
}

@keyframes skeletonpulse {
  0% {
    background-position: 200% 0
  }

  100% {
    background-position: -200% 0
  }
}

@keyframes backgroundshift {
  0% {
    background-color: #F4F6F9
  }

  50% {
    background-color: #eaf4ec
  }

  100% {
    background-color: #F4F6F9
  }
}

@keyframes colortomonochrome {

  0%,
  40% {
    filter: saturate(1)
  }

  60%,
  100% {
    filter: saturate(0)
  }
}

.learningprogram .dividergeometric {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 0;
  overflow: hidden
}

.learningprogram .dividergeometric .geodot {
  width: 6px;
  height: 6px;
  border-radius: 4px;
  background-color: #319F47;
  opacity: .35;
  flex-shrink: 0
}

.learningprogram .dividergeometric .geodot.large {
  width: 10px;
  height: 10px;
  opacity: .6
}

.learningprogram .dividergeometric .geoline {
  width: 40px;
  height: 1px;
  background-color: #040608;
  opacity: .12;
  flex-shrink: 0
}

.learningprogram .titleblock {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 40px;
  padding: 80px 0;
  align-items: center;
  position: relative
}

.learningprogram .titleblock .quotemark {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 220px;
  line-height: 1.2;
  color: #319F47;
  opacity: .05;
  pointer-events: none;
  user-select: none;
  z-index: 0
}

.learningprogram .titleblock .imagecolumn {
  position: relative;
  z-index: 1
}

.learningprogram .titleblock .imagecolumn .imagewrap {
  position: relative;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 2px 7px 18px -1px #319f4717
}

.learningprogram .titleblock .imagecolumn .imagewrap img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center;
  display: block;
  animation: colortomonochrome 8s linear infinite;
  transition: filter .25s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.learningprogram .titleblock .imagecolumn .imagewrap .imageoverlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #0406088c, transparent);
  border-radius: 13px;
  pointer-events: none
}

.learningprogram .titleblock .imagecolumn.right .imagewrap .imageoverlay {
  background: linear-gradient(to left, #0406088c, transparent)
}

.learningprogram .titleblock .textcenter {
  position: relative;
  z-index: 1;
  text-align: left
}

.learningprogram .titleblock .textcenter .pagelabel {
  display: inline-block;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: .08em;
  color: #319F47;
  background-color: #319f471a;
  padding: 8px 16px;
  border-radius: 36px;
  margin-bottom: 16px
}

.learningprogram .titleblock .textcenter h1 {
  font-size: 70px;
  line-height: 1.2;
  letter-spacing: -.03em;
  margin: 0 0 16px;
  background: linear-gradient(135deg, #F4F6F9, #040608, #319F47);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.learningprogram .titleblock .textcenter .tagline {
  font-size: 18px;
  line-height: 1.65;
  color: #040608;
  opacity: .72;
  margin: 0 0 16px
}

.learningprogram .titleblock .textcenter .thesis {
  font-size: 16px;
  line-height: 1.65;
  color: #040608;
  opacity: .6;
  margin: 0
}

.learningprogram .titleblock .arrowdecor {
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .18;
  pointer-events: none
}

.learningprogram .titleblock .arrowdecor svg {
  width: 24px;
  height: 40px
}

.learningprogram .divideralt {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  gap: 8px
}

.learningprogram .divideralt .altshape {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: #040608;
  opacity: .1;
  transform: rotate(45deg);
  flex-shrink: 0
}

.learningprogram .divideralt .altline {
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(to right, transparent, #319f474d, transparent)
}

.learningprogram .cardgrid {
  padding: 80px 0;
  animation: backgroundshift 15s linear infinite
}

.learningprogram .cardgrid .gridlabel {
  text-align: center;
  margin-bottom: 40px
}

.learningprogram .cardgrid .gridlabel h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 8px;
  background: linear-gradient(135deg, #F4F6F9, #040608, #319F47);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.learningprogram .cardgrid .gridlabel p {
  font-size: 16px;
  line-height: 1.65;
  color: #040608;
  opacity: .6;
  margin: 0
}

.learningprogram .cardgrid .programgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px
}

.learningprogram .programcard {
  background: #fff;
  border-radius: 13px;
  box-shadow: 2px 7px 18px -1px #04060817 inset 0 2px 8px -2px #0406080d;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .28s cubic-bezier(0.34, 1.56, 0.64, 1), transform .28s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.learningprogram .programcard:hover {
  box-shadow: 2px 10px 60px -1px #319f4724;
  transform: translateY(-4px)
}

.learningprogram .programcard .cardimagearea {
  position: relative;
  overflow: hidden
}

.learningprogram .programcard .cardimagearea .imageholder {
  width: 100%;
  height: 220px;
  display: block;
  object-fit: cover;
  object-position: center
}

.learningprogram .programcard .cardimagearea .categorytag {
  position: absolute;
  top: 16px;
  left: 16px;
  background-color: #040608;
  color: #F4F6F9;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: .06em;
  padding: 8px 16px;
  border-radius: 36px
}

.learningprogram .programcard .cardbody {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1
}

.learningprogram .programcard .cardbody h3 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0;
  background: linear-gradient(135deg, #F4F6F9, #040608, #319F47);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.learningprogram .programcard .cardbody .shortdesc {
  font-size: 16px;
  line-height: 1.65;
  color: #040608;
  opacity: .7;
  margin: 0
}

.learningprogram .programcard .cardmeta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap
}

.learningprogram .programcard .cardmeta .durationbadge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: #040608;
  opacity: .6
}

.learningprogram .programcard .cardmeta .durationbadge i {
  color: #319F47;
  font-size: 16px
}

.learningprogram .programcard .cardpricing {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #04060814;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap
}

.learningprogram .programcard .cardpricing .priceblock {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.learningprogram .programcard .cardpricing .priceamount {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #040608;
  font-weight: 700
}

.learningprogram .programcard .cardpricing .priceterms {
  font-size: 14px;
  line-height: 1.45;
  color: #040608;
  opacity: .55
}

.learningprogram .programcard .cardpricing .pricenote {
  font-size: 14px;
  line-height: 1.45;
  color: #319F47;
  background-color: #319f471a;
  padding: 8px 16px;
  border-radius: 36px
}

.learningprogram .programcard .cardlink {
  display: inline-block;
  margin-top: 16px;
  padding: 16px 40px;
  background-color: #040608;
  color: #F4F6F9;
  font-size: 16px;
  line-height: 1.45;
  text-decoration: none;
  border-radius: 13px;
  text-align: center;
  transition: transform .22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 2px 2px 4px -1px #0406080d
}

.learningprogram .programcard .cardlink:hover {
  transform: scale(1.04);
  box-shadow: 2px 7px 18px -1px #04060817
}

.learningprogram .programcard .cardlink:focus {
  outline: 2px solid #319F47;
  outline-offset: 3px
}

.learningprogram .statstrip {
  background-color: #040608;
  padding: 80px 0
}

.learningprogram .statstrip .statrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px
}

.learningprogram .statstrip .statitem {
  text-align: center;
  position: relative
}

.learningprogram .statstrip .statitem::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 40px;
  background-color: #f4f6f91f
}

.learningprogram .statstrip .statitem:last-child::after {
  display: none
}

.learningprogram .statstrip .statitem .statnum {
  font-size: 70px;
  line-height: 1.2;
  letter-spacing: -.04em;
  color: #319F47;
  display: block
}

.learningprogram .statstrip .statitem .statlabel {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: .06em;
  color: #F4F6F9;
  opacity: .6;
  display: block;
  margin-top: 8px
}

.learningprogram .dividerwave {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  gap: 8px;
  overflow: hidden
}

.learningprogram .dividerwave .waveunit {
  width: 16px;
  height: 2px;
  border-radius: 4px;
  background-color: #319F47;
  opacity: .22;
  flex-shrink: 0
}

.learningprogram .dividerwave .waveunit.tall {
  height: 6px;
  opacity: .45
}

.learningprogram .approachblock {
  padding: 80px 0;
  background-color: #fff
}

.learningprogram .approachblock .approachinner {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 80px;
  align-items: start
}

.learningprogram .approachblock .sidenote {
  padding-top: 8px
}

.learningprogram .approachblock .sidenote .sidetag {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: .1em;
  color: #319F47;
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px
}

.learningprogram .approachblock .sidenote .sidestat {
  font-size: 70px;
  line-height: 1.2;
  letter-spacing: -.04em;
  color: #040608;
  opacity: .08;
  display: block
}

.learningprogram .approachblock .approachtext h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  background: linear-gradient(135deg, #F4F6F9, #040608, #319F47);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.learningprogram .approachblock .approachtext p {
  font-size: 16px;
  line-height: 1.65;
  color: #040608;
  opacity: .72;
  margin: 0 0 16px
}

.learningprogram .approachblock .approachtext p:last-child {
  margin-bottom: 0
}

.learningprogram .approachblock .steplist {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px
}

.learningprogram .approachblock .stepitem {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: start;
  background-color: #F4F6F9;
  border-radius: 13px;
  padding: 16px;
  box-shadow: inset 2px 2px 4px -1px #0406080d
}

.learningprogram .approachblock .stepitem .stepnum {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background-color: #040608;
  color: #F4F6F9;
  font-size: 14px;
  line-height: 1.45;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.learningprogram .approachblock .stepitem .steptextblock h4 {
  font-size: 16px;
  line-height: 1.45;
  color: #040608;
  margin: 0 0 8px
}

.learningprogram .approachblock .stepitem .steptextblock p {
  font-size: 14px;
  line-height: 1.65;
  color: #040608;
  opacity: .6;
  margin: 0
}

.learningprogram .reviewblock {
  background-color: #F4F6F9;
  padding: 80px 0;
  animation: backgroundshift 15s linear infinite
}

.learningprogram .reviewblock .reviewlabel {
  text-align: center;
  margin-bottom: 40px
}

.learningprogram .reviewblock .reviewlabel h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 8px;
  background: linear-gradient(135deg, #F4F6F9, #040608, #319F47);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.learningprogram .reviewblock .reviewlabel p {
  font-size: 16px;
  line-height: 1.65;
  color: #040608;
  opacity: .6;
  margin: 0
}

.learningprogram .reviewblock .reviewrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px
}

.learningprogram .reviewcard {
  background-color: #fff;
  border-radius: 13px;
  padding: 40px;
  box-shadow: 2px 2px 4px -1px #0406080d inset 0 2px 6px -2px #0406080a;
  display: flex;
  flex-direction: column;
  gap: 16px
}

.learningprogram .reviewcard .reviewquote {
  font-size: 18px;
  line-height: 1.65;
  color: #040608;
  opacity: .8;
  margin: 0
}

.learningprogram .reviewcard .reviewperson {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px
}

.learningprogram .reviewcard .reviewperson .portraitwrap {
  width: 56px;
  height: 56px;
  border-radius: 13px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 2px 2px 4px -1px #0406080d
}

.learningprogram .reviewcard .reviewperson .portraitwrap img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  object-position: top;
  display: block
}

.learningprogram .reviewcard .reviewperson .personinfo .personname {
  font-size: 16px;
  line-height: 1.45;
  color: #040608;
  display: block;
  font-weight: 600
}

.learningprogram .reviewcard .reviewperson .personinfo .persontag {
  font-size: 14px;
  line-height: 1.45;
  color: #319F47;
  display: block
}

.learningprogram .enrollstrip {
  background-color: #040608;
  padding: 80px 0
}

.learningprogram .enrollstrip .enrollinner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px
}

.learningprogram .enrollstrip .enrolltext h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  color: #F4F6F9
}

.learningprogram .enrollstrip .enrolltext p {
  font-size: 16px;
  line-height: 1.65;
  color: #F4F6F9;
  opacity: .6;
  margin: 0;
  max-width: 480px
}

.learningprogram .enrollstrip .enrollactions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
  flex-shrink: 0
}

.learningprogram .enrollstrip .enrollbtn {
  display: inline-block;
  padding: 16px 40px;
  background-color: #319F47;
  color: #fff;
  font-size: 18px;
  line-height: 1.45;
  text-decoration: none;
  border-radius: 13px;
  box-shadow: 2px 7px 18px -1px #319f4717;
  transition: transform .22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .22s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap
}

.learningprogram .enrollstrip .enrollbtn:hover {
  transform: scale(1.05);
  box-shadow: 2px 10px 60px -1px #319f4724
}

.learningprogram .enrollstrip .enrollbtn:focus {
  outline: 2px solid #F4F6F9;
  outline-offset: 3px
}

.learningprogram .enrollstrip .contactlink {
  font-size: 14px;
  line-height: 1.45;
  color: #F4F6F9;
  opacity: .5;
  text-decoration: none;
  text-align: right;
  transition: opacity .25s cubic-bezier(0.68, -0.55, 0.27, 1.55)
}

.learningprogram .enrollstrip .contactlink:hover {
  opacity: .9
}

@media (max-width: 960px) {
  .learningprogram .pageframe {
    padding: 0 40px
  }

  .learningprogram .titleblock {
    grid-template-columns: 1fr;
    padding: 40px 0;
    gap: 16px
  }

  .learningprogram .titleblock .imagecolumn.right {
    display: none
  }

  .learningprogram .titleblock .textcenter h1 {
    font-size: 36px
  }

  .learningprogram .titleblock .quotemark {
    font-size: 120px
  }

  .learningprogram .cardgrid .programgrid {
    grid-template-columns: 1fr
  }

  .learningprogram .statstrip .statrow {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px
  }

  .learningprogram .statstrip .statitem:nth-child(2)::after {
    display: none
  }

  .learningprogram .approachblock .approachinner {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .learningprogram .approachblock .sidenote {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px
  }

  .learningprogram .approachblock .sidenote .sidestat {
    font-size: 36px
  }

  .learningprogram .reviewblock .reviewrow {
    grid-template-columns: 1fr
  }

  .learningprogram .enrollstrip .enrollinner {
    flex-direction: column;
    align-items: flex-start
  }

  .learningprogram .enrollstrip .enrollactions {
    align-items: flex-start
  }
}

@media (max-width: 480px) {
  .learningprogram .pageframe {
    padding: 0 16px
  }

  .learningprogram .titleblock {
    padding: 40px 0
  }

  .learningprogram .titleblock .textcenter h1 {
    font-size: 36px
  }

  .learningprogram .cardgrid {
    padding: 40px 0
  }

  .learningprogram .programcard .cardbody {
    padding: 16px
  }

  .learningprogram .programcard .cardpricing {
    flex-direction: column;
    align-items: flex-start
  }

  .learningprogram .statstrip {
    padding: 40px 0
  }

  .learningprogram .statstrip .statrow {
    grid-template-columns: 1fr 1fr;
    gap: 16px
  }

  .learningprogram .statstrip .statitem .statnum {
    font-size: 36px
  }

  .learningprogram .approachblock {
    padding: 40px 0
  }

  .learningprogram .reviewblock {
    padding: 40px 0
  }

  .learningprogram .enrollstrip {
    padding: 40px 0
  }

  .learningprogram .enrollstrip .enrollbtn {
    font-size: 16px;
    padding: 16px
  }
}

@media (min-width: 1440px) {
  .learningprogram .titleblock .textcenter h1 {
    font-size: 70px
  }
}

.contactus {
  background: #fff;
  overflow-x: clip;
  position: relative
}

.contactus .grain {
  position: relative;
  padding: 80px 40px 40px;
  background: #F4F6F9;
  overflow: hidden
}

.contactus .grain::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 0
}

.contactus .grain::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #319F47 0%, #040608 60%, #F4F6F9 100%);
  opacity: .18;
  pointer-events: none
}

.contactus .grainInner {
  position: relative;
  z-index: 1;
  max-width: 1366px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 80px
}

.contactus .grainText {
  flex: 1 1 0;
  min-width: 0
}

.contactus .grainLabel {
  display: inline-block;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: .08em;
  color: #fff;
  background: #319F47;
  border-radius: 4px;
  padding: 8px 16px;
  margin-bottom: 16px
}

.contactus .grainHeading {
  font-size: 70px;
  line-height: 1.2;
  letter-spacing: -.03em;
  margin: 0 0 16px;
  background: linear-gradient(135deg, #F4F6F9 0%, #040608 45%, #319F47 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: traceHeading .28s cubic-bezier(0.34, 1.56, 0.64, 1) both
}

@keyframes traceHeading {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

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

.contactus .grainDesc {
  font-size: 18px;
  line-height: 1.65;
  color: #040608;
  max-width: 540px;
  margin: 0
}

.contactus .grainImage {
  flex: 0 0 340px;
  width: 340px;
  height: 260px;
  border-radius: 13px;
  overflow: hidden;
  position: relative;
  box-shadow: 2px 10px 60px -1px #04060824;
  animation: traceImage .32s cubic-bezier(0.34, 1.56, 0.64, 1) .08s both
}

@keyframes traceImage {
  from {
    opacity: 0;
    transform: scale(0.95)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

.contactus .grainImage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #04060873 0%, #319f472e 100%);
  pointer-events: none
}

.contactus .grainImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
  display: block
}

.contactus .grainImageSkeleton {
  position: absolute;
  inset: 0;
  background: #d8dde6;
  border-radius: 13px;
  z-index: 1;
  animation: skeletonFade .22s .5s forwards
}

@keyframes skeletonFade {
  to {
    opacity: 0;
    pointer-events: none
  }
}

.contactus .grainAccent {
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 220px;
  height: 220px;
  border-radius: 36px;
  background: linear-gradient(135deg, #319F47 0%, #040608 100%);
  opacity: .06;
  pointer-events: none;
  transform: rotate(18deg)
}

.contactus .waveDivider {
  width: 100%;
  line-height: 0;
  overflow: hidden
}

.contactus .waveDivider svg {
  display: block;
  width: 100%
}

.contactus .formBlock {
  background: #fff;
  padding: 80px 40px;
  position: relative
}

.contactus .formBlock::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 60%;
  background: #319F47;
  opacity: .22;
  border-radius: 4px
}

.contactus .formBlockInner {
  max-width: 1366px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start
}

.contactus .contactDetails {
  display: flex;
  flex-direction: column;
  gap: 40px
}

.contactus .detailsHeading {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 8px;
  background: linear-gradient(135deg, #F4F6F9 0%, #040608 50%, #319F47 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center
}

.contactus .detailsDesc {
  font-size: 16px;
  line-height: 1.65;
  color: #040608;
  margin: 0;
  text-align: center
}

.contactus .contactCard {
  border-radius: 13px;
  background: #F4F6F9;
  padding: 40px;
  box-shadow: inset 2px 2px 4px -1px #0406080d 2px 7px 18px -1px #319f4717;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  border-top: 3px solid #319F47;
  animation: traceCard .25s cubic-bezier(0.34, 1.56, 0.64, 1) .1s both
}

@keyframes traceCard {
  from {
    opacity: 0;
    transform: translateY(24px)
  }

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

.contactus .contactCard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 13px;
  border: 2px solid transparent;
  animation: traceBorder .32s cubic-bezier(0.34, 1.56, 0.64, 1) .2s both;
  pointer-events: none
}

@keyframes traceBorder {
  from {
    border-color: #319f4700
  }

  to {
    border-color: #319f472e
  }
}

.contactus .contactItem {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px
}

.contactus .contactIcon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: #040608;
  display: flex;
  align-items: center;
  justify-content: center
}

.contactus .contactIcon i {
  color: #319F47;
  font-size: 18px
}

.contactus .contactItemLabel {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: .06em;
  color: #319F47;
  display: block;
  margin-bottom: 8px
}

.contactus .contactItemValue {
  font-size: 16px;
  line-height: 1.45;
  color: #040608;
  margin: 0;
  word-break: break-word
}

.contactus .contactItemValue a {
  color: #040608;
  text-decoration: none;
  border-bottom: 1px solid #319f4766;
  transition: border-color .22s cubic-bezier(0.34, 1.56, 0.64, 1), color .22s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.contactus .contactItemValue a:hover {
  color: #319F47;
  border-bottom-color: #319F47
}

.contactus .statRow {
  display: flex;
  flex-direction: row;
  gap: 16px
}

.contactus .statPill {
  flex: 1 1 0;
  border-radius: 13px;
  background: #040608;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 2px 7px 18px -1px #04060817
}

.contactus .statNumber {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #319F47
}

.contactus .statLabel {
  font-size: 14px;
  line-height: 1.45;
  color: #F4F6F9;
  text-align: center
}

.contactus .formWrap {
  display: flex;
  flex-direction: column;
  gap: 40px
}

.contactus .formHeading {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0;
  background: linear-gradient(135deg, #F4F6F9 0%, #040608 50%, #319F47 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.contactus .formNote {
  font-size: 16px;
  line-height: 1.65;
  color: #040608;
  margin: 0
}

.contactus .formCard {
  border-radius: 13px;
  background: #F4F6F9;
  padding: 40px;
  box-shadow: inset 2px 2px 4px -1px #0406080d 2px 7px 18px -1px #319f4717;
  animation: traceCard .28s cubic-bezier(0.34, 1.56, 0.64, 1) .15s both
}

.contactus .contactForm {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.contactus .fieldRow {
  display: flex;
  flex-direction: row;
  gap: 16px
}

.contactus .fieldGroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0
}

.contactus .fieldGroup.full {
  flex: 0 0 100%
}

.contactus .fieldLabel {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: .05em;
  color: #040608
}

.contactus .fieldLabel span {
  color: #319F47;
  margin-left: 2px
}

.contactus .textInput {
  width: 100%;
  padding: 16px;
  border-radius: 13px;
  border: 1.5px solid #04060824;
  background: #fff;
  font-size: 16px;
  line-height: 1.45;
  color: #040608;
  box-sizing: border-box;
  transition: border-color .22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .22s cubic-bezier(0.34, 1.56, 0.64, 1);
  outline: none;
  box-shadow: inset 2px 2px 4px -1px #0406080d
}

.contactus .textInput::placeholder {
  color: #04060861;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

.contactus .textInput:focus {
  border-color: #319F47;
  box-shadow: inset 2px 2px 4px -1px #0406080d 0 0 0 3px #319f471f
}

.contactus .selectInput {
  width: 100%;
  padding: 16px;
  border-radius: 13px;
  border: 1.5px solid #04060824;
  background: #fff;
  font-size: 16px;
  line-height: 1.45;
  color: #040608;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l7 7 7-7' stroke='%23319F47' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
  transition: border-color .22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .22s cubic-bezier(0.34, 1.56, 0.64, 1);
  outline: none;
  box-shadow: inset 2px 2px 4px -1px #0406080d
}

.contactus .selectInput:focus {
  border-color: #319F47;
  box-shadow: inset 2px 2px 4px -1px #0406080d 0 0 0 3px #319f471f
}

.contactus .radioGroup {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px
}

.contactus .radioOption {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 36px;
  border: 1.5px solid #04060824;
  background: #fff;
  transition: border-color .25s cubic-bezier(0.68, -0.55, 0.27, 1.55), background .25s cubic-bezier(0.68, -0.55, 0.27, 1.55)
}

.contactus .radioOption:has(input:checked) {
  border-color: #319F47;
  background: #319f4714
}

.contactus .radioOption:hover {
  border-color: #319f4780
}

.contactus .radioOption input[type="radio"] {
  accent-color: #319F47;
  width: 16px;
  height: 16px;
  cursor: pointer
}

.contactus .radioOptionText {
  font-size: 14px;
  line-height: 1.45;
  color: #040608
}

.contactus .privacyRow {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: 13px;
  background: #319f470f;
  border: 1px solid #319f472e
}

.contactus .privacyCheck {
  accent-color: #319F47;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer
}

.contactus .privacyText {
  font-size: 14px;
  line-height: 1.65;
  color: #040608;
  margin: 0
}

.contactus .privacyText a {
  color: #319F47;
  text-decoration: none;
  border-bottom: 1px solid #319f4766;
  transition: border-color .22s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.contactus .privacyText a:hover {
  border-bottom-color: #319F47
}

.contactus .submitBtn {
  align-self: flex-start;
  padding: 16px 40px;
  border-radius: 13px;
  background: #040608;
  color: #F4F6F9;
  font-size: 16px;
  line-height: 1.45;
  border: none;
  cursor: pointer;
  letter-spacing: .04em;
  box-shadow: 2px 7px 18px -1px #04060824;
  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .25s cubic-bezier(0.34, 1.56, 0.64, 1), background .22s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.contactus .submitBtn:hover {
  transform: scale(1.06);
  background: #319F47;
  box-shadow: 2px 10px 60px -1px #319f4738
}

.contactus .submitBtn:focus-visible {
  outline: 2px solid #319F47;
  outline-offset: 3px
}

.contactus .submitBtn:active {
  transform: scale(0.98)
}

.contactus .imageSecondary {
  border-radius: 13px;
  overflow: hidden;
  position: relative;
  box-shadow: 2px 10px 60px -1px #04060824;
  height: 180px
}

.contactus .imageSecondary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .78
}

.contactus .imageSecondary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #04060880 0%, #319f4733 100%);
  pointer-events: none
}

.contactus .imageSecondarySkeleton {
  position: absolute;
  inset: 0;
  background: #d8dde6;
  z-index: 1;
  animation: skeletonFade .22s .6s forwards
}

@media (max-width: 960px) {
  .contactus .grainInner {
    flex-direction: column;
    gap: 40px;
    align-items: flex-start
  }

  .contactus .grainImage {
    flex: 0 0 auto;
    width: 100%;
    height: 200px
  }

  .contactus .grainHeading {
    font-size: 36px
  }

  .contactus .formBlockInner {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .contactus .detailsHeading,
  .contactus .formHeading {
    text-align: left
  }

  .contactus .detailsDesc {
    text-align: left
  }
}

@media (max-width: 480px) {
  .contactus .grain {
    padding: 40px 16px
  }

  .contactus .formBlock {
    padding: 40px 16px
  }

  .contactus .grainHeading {
    font-size: 36px
  }

  .contactus .fieldRow {
    flex-direction: column
  }

  .contactus .statRow {
    flex-direction: column
  }

  .contactus .formCard {
    padding: 16px
  }

  .contactus .contactCard {
    padding: 16px
  }

  .contactus .radioGroup {
    flex-direction: column
  }

  .contactus .submitBtn {
    width: 100%;
    text-align: center
  }
}

.aboutus {
  background: #F4F6F9;
  overflow-x: clip;
  position: relative
}

.aboutus * {
  box-sizing: border-box
}

.aboutus ::selection {
  background: #040608;
  color: #F4F6F9
}

.aboutus .colorbleed {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  height: 420px;
  background: radial-gradient(ellipse at 80% 20%, #319f4721 0%, #319f470a 55%, transparent 75%);
  pointer-events: none;
  animation: bleedpulse 7s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
  z-index: 0
}

@keyframes bleedpulse {
  0% {
    opacity: .3;
    transform: scale(0.85) translate(40px, -30px)
  }

  100% {
    opacity: 1;
    transform: scale(1.15) translate(-20px, 20px)
  }
}

.aboutus .titleblock {
  background: #040608;
  padding: 80px 40px;
  position: relative;
  overflow: hidden
}

.aboutus .titleblock .quotemark {
  position: absolute;
  top: 40px;
  left: 40px;
  font-size: 220px;
  line-height: 1.2;
  color: #319f4714;
  font-weight: 900;
  pointer-events: none;
  user-select: none;
  letter-spacing: -8px
}

.aboutus .titleblock .tbinner {
  max-width: 1366px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 80px;
  position: relative;
  z-index: 1
}

.aboutus .titleblock .tbtext {
  flex: 1 1 0;
  min-width: 0
}

.aboutus .titleblock .tbimage {
  flex: 0 0 380px;
  width: 380px;
  position: relative
}

.aboutus .titleblock .tbimage img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  object-position: center;
  border-radius: 13px;
  display: block;
  filter: blur(0px);
  box-shadow: 2px 10px 60px -1px #04060824;
  border: 2px solid #319f474d
}

.aboutus .titleblock .tbimage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: linear-gradient(180deg, transparent 55%, #0406088c 100%);
  pointer-events: none
}

.aboutus .titleblock .pagelabel {
  display: inline-block;
  background: #319F47;
  color: #F4F6F9;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: .08em;
  padding: 8px 16px;
  border-radius: 4px;
  margin-bottom: 40px;
  text-transform: uppercase
}

.aboutus .titleblock h1 {
  font-size: 70px;
  line-height: 1.2;
  letter-spacing: -.03em;
  color: #F4F6F9;
  margin: 0 0 40px;
  background: linear-gradient(135deg, #F4F6F9 0%, #F4F6F9 40%, #319F47 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.aboutus .titleblock h1 .accentword {
  background: linear-gradient(135deg, #319F47 0%, #6dd97e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.aboutus .titleblock .tbdesc {
  font-size: 18px;
  line-height: 1.65;
  color: #f4f6f9c7;
  margin: 0 0 40px;
  max-width: 520px
}

.aboutus .titleblock .tbmeta {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: flex-start
}

.aboutus .titleblock .statitem {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.aboutus .titleblock .statnum {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #319F47;
  font-weight: 700
}

.aboutus .titleblock .statlabel {
  font-size: 14px;
  line-height: 1.45;
  color: #f4f6f98c;
  letter-spacing: .04em
}

.aboutus .titleblock .dashedborder {
  display: inline-block;
  border: 2px dashed #319f4759;
  border-radius: 13px;
  padding: 16px 40px;
  margin-top: 40px
}

.aboutus .titleblock .dashedborder p {
  font-size: 16px;
  line-height: 1.45;
  color: #f4f6f9a6;
  margin: 0;
  font-style: italic
}

.aboutus .skeletonwrap {
  position: relative;
  background: #f4f6f914;
  border-radius: 13px;
  overflow: hidden
}

.aboutus .skeletonwrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, #f4f6f912 50%, transparent 100%);
  animation: skelshine 1.6s ease-in-out infinite;
  z-index: 1;
  border-radius: 13px
}

.aboutus .skeletonwrap img {
  position: relative;
  z-index: 2
}

@keyframes skelshine {
  0% {
    transform: translateX(-100%)
  }

  100% {
    transform: translateX(100%)
  }
}

.aboutus .divider {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 0;
  background: #F4F6F9
}

.aboutus .divider svg {
  display: block
}

.aboutus .aboutbody {
  background: #F4F6F9;
  padding: 80px 40px;
  position: relative
}

.aboutus .aboutbody .bodylimit {
  max-width: 1366px;
  margin: 0 auto
}

.aboutus .aboutbody .bodygrid {
  display: grid;
  grid-template-columns: 1fr 2fr 1.2fr;
  gap: 40px;
  align-items: start
}

.aboutus .aboutbody .sidenote {
  padding-top: 8px
}

.aboutus .aboutbody .sidenote .notelabel {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: .07em;
  color: #319F47;
  text-transform: uppercase;
  margin: 0 0 16px;
  font-weight: 600
}

.aboutus .aboutbody .sidenote .notetext {
  font-size: 14px;
  line-height: 1.65;
  color: #04060899;
  margin: 0 0 16px
}

.aboutus .aboutbody .sidenote .yearstat {
  margin-top: 40px;
  padding: 16px;
  background: #040608;
  border-radius: 13px;
  box-shadow: 2px 7px 18px -1px #04060817
}

.aboutus .aboutbody .sidenote .yearstat .bignum {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #319F47;
  font-weight: 700;
  display: block
}

.aboutus .aboutbody .sidenote .yearstat .numlabel {
  font-size: 14px;
  line-height: 1.45;
  color: #f4f6f999;
  display: block;
  margin-top: 8px
}

.aboutus .aboutbody .maintext {
  position: relative
}

.aboutus .aboutbody .maintext h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 40px;
  background: linear-gradient(135deg, #F4F6F9 0%, #040608 35%, #319F47 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.aboutus .aboutbody .maintext .bodypara {
  font-size: 16px;
  line-height: 1.65;
  color: #040608d1;
  margin: 0 0 16px
}

.aboutus .aboutbody .maintext .insetcard {
  background: #040608;
  border-radius: 13px;
  padding: 40px;
  margin: 40px 0;
  box-shadow: inset 2px 2px 4px -1px #0406080d 2px 7px 18px -1px #04060817;
  position: relative
}

.aboutus .aboutbody .maintext .insetcard::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: #319f4726
}

.aboutus .aboutbody .maintext .insetcard h3 {
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: #F4F6F9;
  margin: 0 0 16px;
  background: linear-gradient(90deg, #F4F6F9 0%, #319F47 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.aboutus .aboutbody .maintext .insetcard .cardpara {
  font-size: 16px;
  line-height: 1.65;
  color: #f4f6f9b8;
  margin: 0
}

.aboutus .aboutbody .imagecol {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.aboutus .aboutbody .imagecol .imgframe {
  position: relative;
  border-radius: 13px;
  overflow: hidden;
  border: 2px solid #319f472e;
  box-shadow: 2px 7px 18px -1px #319f4717
}

.aboutus .aboutbody .imagecol .imgframe img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .28s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.aboutus .aboutbody .imagecol .imgframe:hover img {
  transform: scale(1.04)
}

.aboutus .aboutbody .imagecol .imgframe .framelabel {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: #040608bf;
  color: #F4F6F9;
  font-size: 14px;
  line-height: 1.45;
  padding: 8px 16px;
  border-radius: 4px;
  letter-spacing: .03em
}

.aboutus .aboutbody .imagecol .imgframe2 img {
  height: 180px
}

.aboutus .aboutbody .teamrow {
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid #0406081a
}

.aboutus .aboutbody .teamrow h4 {
  font-size: 18px;
  line-height: 1.45;
  color: #040608;
  margin: 0 0 40px;
  letter-spacing: -.01em;
  text-align: center
}

.aboutus .aboutbody .teamgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 700px;
  margin: 0 auto
}

.aboutus .aboutbody .personcard {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
  background: #fff;
  border-radius: 13px;
  padding: 16px;
  box-shadow: inset 2px 2px 4px -1px #0406080d 2px 7px 18px -1px #04060817;
  transition: box-shadow .22s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.aboutus .aboutbody .personcard:hover {
  box-shadow: inset 2px 2px 4px -1px #0406080d 2px 10px 60px -1px #319f4724
}

.aboutus .aboutbody .personcard .portrait {
  flex: 0 0 64px;
  width: 64px;
  height: 80px;
  border-radius: 13px;
  overflow: hidden;
  border: 2px solid #319f4733;
  box-shadow: 2px 2px 4px -1px #0406080d
}

.aboutus .aboutbody .personcard .portrait img {
  width: 64px;
  height: 80px;
  object-fit: cover;
  object-position: top;
  display: block
}

.aboutus .aboutbody .personcard .personinfo {
  flex: 1 1 0;
  min-width: 0
}

.aboutus .aboutbody .personcard .personname {
  font-size: 16px;
  line-height: 1.45;
  color: #040608;
  font-weight: 600;
  margin: 0 0 8px
}

.aboutus .aboutbody .personcard .personrole {
  font-size: 14px;
  line-height: 1.45;
  color: #319F47;
  margin: 0 0 8px;
  letter-spacing: .03em
}

.aboutus .aboutbody .personcard .personbio {
  font-size: 14px;
  line-height: 1.65;
  color: #0406089e;
  margin: 0
}

.aboutus .aboutbody .metricsband {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-top: 40px;
  flex-wrap: wrap
}

.aboutus .aboutbody .metricitem {
  flex: 1 1 0;
  min-width: 140px;
  background: #040608;
  border-radius: 13px;
  padding: 16px;
  text-align: center;
  box-shadow: 2px 7px 18px -1px #04060817;
  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .25s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.aboutus .aboutbody .metricitem:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 2px 10px 60px -1px #319f4724
}

.aboutus .aboutbody .metricitem .mnum {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #319F47;
  font-weight: 700;
  display: block
}

.aboutus .aboutbody .metricitem .mlabel {
  font-size: 14px;
  line-height: 1.45;
  color: #f4f6f999;
  display: block;
  margin-top: 8px
}

.aboutus .aboutbody .ctarow {
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap
}

.aboutus .aboutbody .btnprimary {
  display: inline-block;
  background: #040608;
  color: #F4F6F9;
  font-size: 16px;
  line-height: 1.45;
  padding: 16px 40px;
  border-radius: 36px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: .02em;
  transition: transform .22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 2px 7px 18px -1px #04060817
}

.aboutus .aboutbody .btnprimary:hover {
  transform: scale(1.06);
  box-shadow: 2px 10px 60px -1px #04060824
}

.aboutus .aboutbody .btnprimary:focus {
  outline: 2px solid #319F47;
  outline-offset: 3px
}

.aboutus .aboutbody .btnsecondary {
  display: inline-block;
  background: transparent;
  color: #040608;
  font-size: 16px;
  line-height: 1.45;
  padding: 16px 40px;
  border-radius: 36px;
  border: 2px solid #040608;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: .02em;
  transition: transform .28s cubic-bezier(0.68, -0.55, 0.27, 1.55), background .2s ease
}

.aboutus .aboutbody .btnsecondary:hover {
  transform: scale(1.05);
  background: #0406080f
}

.aboutus .aboutbody .btnsecondary:focus {
  outline: 2px solid #319F47;
  outline-offset: 3px
}

.aboutus .aboutbody .accentband {
  background: #319F47;
  border-radius: 13px;
  padding: 40px;
  margin-top: 80px;
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: center;
  box-shadow: 2px 10px 60px -1px #319f4724
}

.aboutus .aboutbody .accentband .bandtext {
  flex: 1 1 0
}

.aboutus .aboutbody .accentband .bandtext h5 {
  font-size: 18px;
  line-height: 1.45;
  color: #F4F6F9;
  margin: 0 0 8px;
  letter-spacing: -.01em
}

.aboutus .aboutbody .accentband .bandtext p {
  font-size: 16px;
  line-height: 1.65;
  color: #f4f6f9d9;
  margin: 0
}

.aboutus .aboutbody .accentband .bandlink {
  flex: 0 0 auto
}

.aboutus .aboutbody .accentband .bandlink a {
  display: inline-block;
  background: #F4F6F9;
  color: #040608;
  font-size: 16px;
  line-height: 1.45;
  padding: 16px 40px;
  border-radius: 36px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 2px 2px 4px -1px #0406080d;
  white-space: nowrap
}

.aboutus .aboutbody .accentband .bandlink a:hover {
  transform: scale(1.06);
  box-shadow: 2px 7px 18px -1px #04060817
}

@media (max-width: 960px) {
  .aboutus .titleblock .tbinner {
    flex-direction: column;
    gap: 40px
  }

  .aboutus .titleblock .tbimage {
    flex: 0 0 auto;
    width: 100%
  }

  .aboutus .titleblock .tbimage img {
    height: 320px
  }

  .aboutus .titleblock h1 {
    font-size: 36px
  }

  .aboutus .aboutbody .bodygrid {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .aboutus .aboutbody .sidenote {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap
  }

  .aboutus .aboutbody .sidenote .yearstat {
    margin-top: 0
  }

  .aboutus .aboutbody .imagecol {
    flex-direction: row;
    flex-wrap: wrap
  }

  .aboutus .aboutbody .imagecol .imgframe {
    flex: 1 1 200px
  }

  .aboutus .aboutbody .teamgrid {
    grid-template-columns: 1fr
  }

  .aboutus .aboutbody .accentband {
    flex-direction: column;
    gap: 16px
  }
}

@media (max-width: 480px) {
  .aboutus .titleblock {
    padding: 40px 16px
  }

  .aboutus .titleblock h1 {
    font-size: 36px
  }

  .aboutus .titleblock .tbmeta {
    flex-direction: column;
    gap: 16px
  }

  .aboutus .aboutbody {
    padding: 40px 16px
  }

  .aboutus .aboutbody .metricsband {
    flex-direction: column
  }

  .aboutus .aboutbody .ctarow {
    flex-direction: column;
    align-items: flex-start
  }

  .aboutus .aboutbody .accentband {
    padding: 16px
  }

  .aboutus .aboutbody .teamgrid {
    grid-template-columns: 1fr;
    max-width: 100%
  }
}

@media (min-width: 1440px) {
  .aboutus .titleblock .tbimage {
    flex: 0 0 460px;
    width: 460px
  }
}

.base {
  background: #fff;
  overflow-x: hidden;
  width: 100%
}

.base * {
  box-sizing: border-box
}

.base ::selection {
  background: #040608;
  color: #fff
}

.base img {
  background: #d4d8de;
  display: block
}

.base img.loaded {
  background: none
}

.base .pagemax {
  margin: 0 auto;
  max-width: 1366px;
  padding: 0 40px
}

@media (max-width: 480px) {
  .base .pagemax {
    padding: 0 16px
  }
}

.base .gradtext {
  background: linear-gradient(112deg, #F4F6F9 0%, #040608 45%, #319F47 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent
}

.base .gradtext.dark {
  background: linear-gradient(112deg, #319F47 0%, #040608 55%, #040608 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent
}

.base .titlesection {
  padding: 80px 0;
  position: relative
}

.base .titlesection::before {
  background-image: repeating-linear-gradient(-45deg, #319f470a 0px, #319f470a 1px, transparent 1px, transparent 10px);
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0
}

.base .titleinner {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 80px;
  position: relative;
  z-index: 1
}

.base .titletext {
  flex: 1 1 0;
  min-width: 0
}

.base .titlebadge {
  background: #040608;
  border-radius: 4px;
  color: #F4F6F9;
  display: inline-block;
  font-size: 14px;
  letter-spacing: .06em;
  line-height: 1.2;
  margin-bottom: 16px;
  padding: 8px 16px
}

.base .titletext h1 {
  font-size: 70px;
  letter-spacing: -.03em;
  line-height: 1.2;
  margin: 0 0 40px
}

.base .titledeclaration {
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 40px;
  max-width: 520px
}

.base .titledeclaration p {
  color: #3a3f48;
  margin: 0 0 16px
}

.base .titledeclaration p:last-child {
  margin-bottom: 0
}

.base .titleactions {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 16px
}

.base .btnprimary {
  background: #040608;
  border: none;
  border-radius: 13px;
  color: #F4F6F9;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  padding: 16px 40px;
  text-decoration: none;
  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .25s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.base .btnprimary:hover {
  box-shadow: 2px 7px 18px -1px #0406082e;
  transform: scale(1.06)
}

.base .btnprimary:focus {
  outline: 3px solid #319F47;
  outline-offset: 3px
}

.base .btnsecondary {
  background: transparent;
  border: 2px solid #040608;
  border-radius: 13px;
  color: #040608;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  padding: 14px 40px;
  text-decoration: none;
  transition: transform .22s cubic-bezier(0.34, 1.56, 0.64, 1), background .22s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.base .btnsecondary:hover {
  background: #040608;
  color: #F4F6F9;
  transform: scale(1.05)
}

.base .btnsecondary:focus {
  outline: 3px solid #319F47;
  outline-offset: 3px
}

.base .titleimage {
  flex: 0 0 420px;
  position: relative
}

.base .titleimgwrap {
  border-radius: 13px;
  overflow: hidden;
  position: relative
}

.base .titleimgwrap img {
  border-radius: 13px;
  display: block;
  height: 520px;
  object-fit: cover;
  object-position: center;
  width: 100%
}

.base .titleimgwrap::after {
  background: linear-gradient(to left, #ffffffeb 0%, #ffffff4d 50%, transparent 100%);
  border-radius: 13px;
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0
}

@media (max-width: 960px) {
  .base .titleinner {
    flex-direction: column;
    gap: 40px
  }

  .base .titleimage {
    flex: 0 0 auto;
    width: 100%
  }

  .base .titleimgwrap img {
    height: 320px
  }

  .base .titletext h1 {
    font-size: 36px
  }
}

@media (max-width: 480px) {
  .base .titlesection {
    padding: 40px 0
  }

  .base .titleactions {
    flex-direction: column;
    align-items: flex-start
  }

  .base .titletext h1 {
    font-size: 36px
  }
}

.base .valuesection {
  background: #F4F6F9;
  padding: 80px 0;
  position: relative
}

.base .valuesection::before {
  background-image: radial-gradient(circle, #0406080f 1px, transparent 1px);
  background-size: 22px 22px;
  bottom: 0;
  content: "";
  left: 0;
  opacity: .6;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0
}

.base .valueinner {
  display: grid;
  gap: 80px;
  grid-template-columns: 240px 1fr;
  position: relative;
  z-index: 1
}

.base .valuesidenote {
  padding-top: 8px
}

.base .valuesidenote .sidenumber {
  color: #319F47;
  display: block;
  font-size: 70px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.2
}

.base .valuesidenote .sidelabel {
  color: #040608;
  font-size: 14px;
  letter-spacing: .05em;
  line-height: 1.45;
  text-transform: uppercase
}

.base .valuebody {
  min-width: 0
}

.base .valuebody h2 {
  font-size: 36px;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 40px;
  text-align: center
}

.base .valuegrid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr 1fr
}

.base .valuecard {
  background: #fff;
  border-radius: 13px;
  box-shadow: inset 2px 2px 4px -1px #0406080d 2px 7px 18px -1px #04060812;
  padding: 40px 16px;
  transition: transform .28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .28s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.base .valuecard:hover {
  box-shadow: inset 2px 2px 4px -1px #0406080d 2px 10px 60px -1px #319f4724;
  transform: translateY(-4px) scale(1.02)
}

.base .valuecardicon {
  align-items: center;
  background: #040608;
  border-radius: 36px;
  display: flex;
  flex-direction: row;
  height: 40px;
  justify-content: center;
  margin-bottom: 16px;
  width: 40px
}

.base .valuecardicon svg {
  fill: #319F47;
  height: 20px;
  width: 20px
}

.base .valuecard h4 {
  color: #040608;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.45;
  margin: 0 0 8px
}

.base .valuecard p {
  color: #3a3f48;
  font-size: 14px;
  line-height: 1.65;
  margin: 0
}

@media (max-width: 960px) {
  .base .valueinner {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .base .valuegrid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width: 480px) {
  .base .valuesection {
    padding: 40px 0
  }

  .base .valuegrid {
    grid-template-columns: 1fr
  }
}

.base .wavedivider {
  display: block;
  line-height: 0;
  overflow: hidden;
  width: 100%
}

.base .wavedivider svg {
  display: block;
  width: 100%
}

.base .teamsection {
  background: #fff;
  padding: 80px 0
}

.base .teaminner {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  gap: 80px
}

.base .teamportrait {
  flex: 0 0 260px
}

.base .portraitring {
  border: 3px solid #319F47;
  border-radius: 50%;
  box-shadow: 2px 10px 60px -1px #319f4724;
  height: 200px;
  overflow: hidden;
  width: 200px
}

.base .portraitring img {
  height: 200px;
  object-fit: cover;
  object-position: top;
  width: 200px
}

.base .portraitname {
  color: #040608;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.45;
  margin: 16px 0 8px
}

.base .portraitrole {
  background: #319F47;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  letter-spacing: .04em;
  line-height: 1.2;
  padding: 4px 8px
}

.base .teamtext {
  flex: 1 1 0;
  min-width: 0
}

.base .teamtext h2 {
  font-size: 36px;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 40px
}

.base .teamtext p {
  color: #3a3f48;
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 16px
}

.base .teamtext p:last-of-type {
  margin-bottom: 0
}

.base .teamcredits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 40px
}

.base .credititem {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 8px
}

.base .creditmark {
  align-items: center;
  background: #319F47;
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  height: 20px;
  justify-content: center;
  width: 20px
}

.base .creditmark svg {
  fill: #fff;
  height: 11px;
  width: 11px
}

.base .credititem span {
  color: #040608;
  font-size: 14px;
  letter-spacing: .02em;
  line-height: 1.45
}

@media (max-width: 960px) {
  .base .teaminner {
    flex-direction: column;
    gap: 40px
  }

  .base .teamportrait {
    flex: 0 0 auto
  }
}

@media (max-width: 480px) {
  .base .teamsection {
    padding: 40px 0
  }
}

.base .approachsection {
  background: #040608;
  padding: 80px 0;
  position: relative
}

.base .approachsection::before {
  animation: bgpulse 6s ease-in-out infinite;
  background: radial-gradient(ellipse at 80% 50%, #319f471f 0%, transparent 65%);
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0
}

@keyframes bgpulse {

  0%,
  100% {
    opacity: .5
  }

  50% {
    opacity: 1
  }
}

.base .approachinner {
  position: relative;
  z-index: 1
}

.base .approachinner h2 {
  color: #F4F6F9;
  font-size: 36px;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 40px;
  text-align: center
}

.base .approachgrid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 2fr 1fr
}

.base .approachcard {
  background: #f4f6f90d;
  border: 1px solid #f4f6f91a;
  border-radius: 13px;
  padding: 40px 16px;
  transition: background .32s cubic-bezier(0.68, -0.55, 0.27, 1.55), border-color .32s cubic-bezier(0.68, -0.55, 0.27, 1.55)
}

.base .approachcard:hover {
  background: #319f471f;
  border-color: #319f4766
}

.base .approachcard.featured {
  background: #319f471a;
  border-color: #319f474d;
  padding: 40px
}

.base .approachcard.featured:hover {
  background: #319f4733;
  border-color: #319f4799
}

.base .approachnum {
  color: #319F47;
  display: block;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.2;
  margin-bottom: 8px
}

.base .approachcard h4 {
  color: #F4F6F9;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.45;
  margin: 0 0 8px
}

.base .approachcard p {
  color: #f4f6f9b3;
  font-size: 14px;
  line-height: 1.65;
  margin: 0
}

.base .approachimage {
  border-radius: 13px;
  height: 200px;
  margin-top: 16px;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
  width: 100%
}

.base .approachimage img {
  border-radius: 13px;
  height: 200px;
  object-fit: cover;
  object-position: center;
  width: 100%
}

@media (max-width: 960px) {
  .base .approachgrid {
    grid-template-columns: 1fr 1fr
  }

  .base .approachcard.featured {
    grid-column: 1 / -1
  }
}

@media (max-width: 480px) {
  .base .approachsection {
    padding: 40px 0
  }

  .base .approachgrid {
    grid-template-columns: 1fr
  }

  .base .approachcard.featured {
    grid-column: auto
  }
}

.base .scalewrap {
  padding: 80px 0;
  background: #fff
}

.base .scaleinner h2 {
  font-size: 36px;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 40px;
  text-align: center
}

.base .scalelayout {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  gap: 16px
}

.base .scaleimage {
  border-radius: 13px;
  flex: 0 0 380px;
  overflow: hidden
}

.base .scaleimage img {
  border-radius: 13px;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: center;
  width: 380px
}

.base .scalestats {
  display: grid;
  flex: 1 1 0;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  min-width: 0
}

.base .statcard {
  background: #F4F6F9;
  border-radius: 13px;
  box-shadow: inset 2px 2px 4px -1px #0406080d;
  padding: 40px 16px;
  text-align: center;
  transition: transform .26s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.base .statcard:hover {
  transform: scale(1.04)
}

.base .statnumber {
  color: #040608;
  display: block;
  font-size: 70px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.2
}

.base .statlabel {
  color: #319F47;
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.45;
  margin-top: 8px;
  text-transform: uppercase
}

.base .statdesc {
  color: #3a3f48;
  display: block;
  font-size: 14px;
  line-height: 1.65;
  margin-top: 8px
}

@media (max-width: 960px) {
  .base .scalelayout {
    flex-direction: column
  }

  .base .scaleimage {
    flex: 0 0 auto
  }

  .base .scaleimage img {
    height: 260px;
    width: 100%
  }
}

@media (max-width: 480px) {
  .base .scalewrap {
    padding: 40px 0
  }

  .base .scalestats {
    grid-template-columns: 1fr
  }
}

.base .supportsection {
  background: #F4F6F9;
  padding: 80px 0
}

.base .supportinner {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr 1fr
}

.base .supporttext h2 {
  font-size: 36px;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 40px
}

.base .supporttext p {
  color: #3a3f48;
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 16px
}

.base .supporttext p:last-of-type {
  margin-bottom: 0
}

.base .supportpanels {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.base .supportpanel {
  background: #fff;
  border-radius: 13px;
  box-shadow: 2px 7px 18px -1px #04060812;
  cursor: default;
  padding: 16px 40px;
  transition: box-shadow .28s cubic-bezier(0.34, 1.56, 0.64, 1), background .28s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.base .supportpanel:hover {
  background: #040608;
  box-shadow: 2px 10px 60px -1px #319f4724
}

.base .supportpanel:hover .panelhead {
  color: #F4F6F9
}

.base .supportpanel:hover .panelbody {
  color: #f4f6f9bf
}

.base .supportpanel:hover .panelmark svg {
  fill: #319F47
}

.base .paneltop {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 16px
}

.base .panelmark {
  flex-shrink: 0
}

.base .panelmark svg {
  fill: #040608;
  height: 22px;
  transition: fill .28s cubic-bezier(0.34, 1.56, 0.64, 1);
  width: 22px
}

.base .panelhead {
  color: #040608;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.45;
  transition: color .28s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.base .panelbody {
  color: #3a3f48;
  font-size: 14px;
  line-height: 1.65;
  margin-top: 8px;
  transition: color .28s cubic-bezier(0.34, 1.56, 0.64, 1)
}

@media (max-width: 960px) {
  .base .supportinner {
    grid-template-columns: 1fr
  }
}

@media (max-width: 480px) {
  .base .supportsection {
    padding: 40px 0
  }
}

.base .gradsection {
  background: #fff;
  padding: 80px 0
}

.base .gradinner h2 {
  font-size: 36px;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 40px;
  text-align: center
}

.base .gradlayout {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  gap: 80px
}

.base .gradimage {
  border-radius: 13px;
  flex: 0 0 340px;
  overflow: hidden
}

.base .gradimage img {
  border-radius: 13px;
  height: 400px;
  object-fit: cover;
  object-position: center;
  width: 340px
}

.base .gradcontent {
  flex: 1 1 0;
  min-width: 0
}

.base .gradcontent p {
  color: #3a3f48;
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 16px
}

.base .gradcontent p:last-of-type {
  margin-bottom: 40px
}

.base .gradlist {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0
}

.base .gradlist li {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  gap: 16px
}

.base .gradcheck {
  align-items: center;
  background: #319F47;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  height: 24px;
  justify-content: center;
  margin-top: 2px;
  width: 24px
}

.base .gradcheck svg {
  fill: #fff;
  height: 13px;
  width: 13px
}

.base .gradlist li span {
  color: #040608;
  font-size: 16px;
  line-height: 1.65
}

@media (max-width: 960px) {
  .base .gradlayout {
    flex-direction: column;
    gap: 40px
  }

  .base .gradimage {
    flex: 0 0 auto
  }

  .base .gradimage img {
    height: 260px;
    width: 100%
  }
}

@media (max-width: 480px) {
  .base .gradsection {
    padding: 40px 0
  }
}

.subscribe {
  background: #fff;
  overflow-x: clip;
  position: relative
}

.subscribe * {
  box-sizing: border-box
}

.subscribe .grain {
  position: relative;
  padding: 80px 40px;
  background-color: #040608;
  overflow: hidden
}

.subscribe .grain::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: .18;
  pointer-events: none;
  z-index: 0
}

.subscribe .grain::after {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: #319F47;
  opacity: .07;
  pointer-events: none;
  z-index: 0
}

.subscribe .grainpulse {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#319f470f 1px, transparent 1px), linear-gradient(90deg, #319f470f 1px, transparent 1px);
  background-size: 48px 48px;
  animation: gridwave 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0
}

@keyframes gridwave {
  0% {
    opacity: .4
  }

  50% {
    opacity: 1
  }

  100% {
    opacity: .4
  }
}

.subscribe .grainbody {
  position: relative;
  z-index: 1;
  max-width: 1366px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 80px
}

.subscribe .grainleft {
  flex: 0 0 420px
}

.subscribe .grainright {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 40px
}

.subscribe .graintag {
  display: inline-block;
  background: #319F47;
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .12em;
  padding: 8px 16px;
  border-radius: 4px;
  margin-bottom: 16px;
  text-transform: uppercase
}

.subscribe .grainh1 {
  font-size: 70px;
  line-height: 1.2;
  letter-spacing: -.03em;
  margin: 0 0 16px;
  background: linear-gradient(135deg, #F4F6F9 0%, #F4F6F9 40%, #319F47 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.subscribe .grainrule {
  display: block;
  width: 56px;
  height: 2px;
  background: #319F47;
  margin-bottom: 16px;
  letter-spacing: .22em
}

.subscribe .graincaption {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: .18em;
  color: #f4f6f980;
  text-transform: uppercase;
  margin: 0 0 40px
}

.subscribe .grainimgwrap {
  position: relative;
  width: 100%
}

.subscribe .grainimgwrap img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 100%, 12% 100%, 0 88%);
  display: block;
  border-radius: 4px
}

.subscribe .grainimgskeleton {
  position: absolute;
  inset: 0;
  background: #1a2a1a;
  clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 100%, 12% 100%, 0 88%);
  border-radius: 4px;
  z-index: -1
}

.subscribe .grainaccent {
  position: absolute;
  bottom: -16px;
  right: -16px;
  width: 80px;
  height: 80px;
  border: 2px solid #319F47;
  border-radius: 13px;
  opacity: .3;
  pointer-events: none
}

.subscribe .grainthesis {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.subscribe .thesisitem {
  font-size: 18px;
  line-height: 1.65;
  color: #f4f6f9d1;
  padding: 16px;
  border-radius: 13px;
  border: 1px solid #319f472e;
  background: #319f470a
}

.subscribe .thesisitem strong {
  color: #F4F6F9
}

.subscribe .zigzagdivider {
  display: block;
  width: 100%;
  line-height: 0;
  background: #040608
}

.subscribe .zigzagdivider svg {
  display: block;
  width: 100%
}

.subscribe .updates {
  padding: 80px 40px;
  background: #F4F6F9;
  position: relative
}

.subscribe .updatesbody {
  max-width: 1366px;
  margin: 0 auto
}

.subscribe .updateshead {
  text-align: center;
  margin-bottom: 80px
}

.subscribe .updatesh2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 8px;
  background: linear-gradient(135deg, #F4F6F9 0%, #040608 45%, #319F47 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.subscribe .updatesrule {
  display: block;
  width: 40px;
  height: 2px;
  background: #319F47;
  margin: 0 auto 16px
}

.subscribe .updatescaption {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: .2em;
  color: #040608;
  opacity: .45;
  text-transform: uppercase;
  margin: 0
}

.subscribe .stepsline {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 80px;
  position: relative
}

.subscribe .stepsline::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 40px;
  right: 40px;
  height: 2px;
  background: linear-gradient(90deg, #319F47 0%, #319f4733 100%);
  z-index: 0
}

.subscribe .stepitem {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 8px;
  transition: transform .28s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.subscribe .stepsline:hover .stepitem {
  filter: blur(1.5px);
  opacity: .55;
  transition: filter .22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .22s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.subscribe .stepsline:hover .stepitem:hover {
  filter: none;
  opacity: 1;
  transform: translateY(-4px)
}

.subscribe .stepicon {
  width: 56px;
  height: 56px;
  border-radius: 36px;
  background: #040608;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 2px 7px 18px -1px #04060817;
  flex-shrink: 0
}

.subscribe .stepicon i {
  color: #319F47;
  font-size: 22px
}

.subscribe .stepnumber {
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .14em;
  color: #319F47;
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase
}

.subscribe .steptitle {
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: .01em;
  color: #040608;
  margin: 0 0 8px;
  font-weight: 600
}

.subscribe .stepdesc {
  font-size: 14px;
  line-height: 1.65;
  color: #0406089e;
  margin: 0
}

.subscribe .statrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start
}

.subscribe .statleft {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.subscribe .statcard {
  background: #fff;
  border-radius: 13px;
  padding: 40px;
  box-shadow: 2px 10px 60px -1px #04060824;
  box-shadow: inset 0 2px 8px #0406080a 2px 10px 60px -1px #04060817
}

.subscribe .statcardtop {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px
}

.subscribe .statbig {
  font-size: 70px;
  line-height: 1.2;
  letter-spacing: -.04em;
  color: #040608;
  font-weight: 700
}

.subscribe .statlabel {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: .1em;
  color: #319F47;
  text-transform: uppercase;
  font-weight: 600
}

.subscribe .statdesc {
  font-size: 16px;
  line-height: 1.65;
  color: #040608a6;
  margin: 0
}

.subscribe .statright {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.subscribe .stattext {
  font-size: 18px;
  line-height: 1.65;
  color: #040608cc;
  margin: 0
}

.subscribe .stattext strong {
  color: #040608
}

.subscribe .channelgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px
}

.subscribe .channelcard {
  background: #040608;
  border-radius: 13px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  box-shadow: 2px 7px 18px -1px #04060817;
  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .25s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.subscribe .channelcard:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 2px 10px 60px -1px #319f4724
}

.subscribe .channelcard i {
  color: #319F47;
  font-size: 22px
}

.subscribe .channelname {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: .06em;
  color: #F4F6F9;
  font-weight: 600;
  margin: 0
}

.subscribe .channelfreq {
  font-size: 14px;
  line-height: 1.45;
  color: #f4f6f980;
  margin: 0
}

.subscribe .noticeband {
  margin-top: 40px;
  padding: 16px 40px;
  background: #040608;
  border-radius: 36px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px
}

.subscribe .noticeband i {
  color: #319F47;
  font-size: 22px;
  flex-shrink: 0
}

.subscribe .noticetext {
  font-size: 16px;
  line-height: 1.45;
  color: #f4f6f9bf;
  margin: 0
}

.subscribe .noticetext strong {
  color: #F4F6F9
}

@media (max-width: 960px) {
  .subscribe .grainbody {
    flex-direction: column;
    gap: 40px
  }

  .subscribe .grainleft {
    flex: none;
    width: 100%
  }

  .subscribe .grainh1 {
    font-size: 36px
  }

  .subscribe .stepsline {
    flex-direction: column;
    align-items: flex-start
  }

  .subscribe .stepsline::before {
    display: none
  }

  .subscribe .stepitem {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 16px;
    width: 100%
  }

  .subscribe .stepicon {
    margin-bottom: 0;
    flex-shrink: 0
  }

  .subscribe .stepsline:hover .stepitem {
    filter: none;
    opacity: 1
  }

  .subscribe .statrow {
    grid-template-columns: 1fr
  }

  .subscribe .channelgrid {
    grid-template-columns: 1fr 1fr
  }

  .subscribe .noticeband {
    flex-direction: column;
    text-align: center;
    border-radius: 13px;
    padding: 16px
  }
}

@media (max-width: 480px) {
  .subscribe .grain {
    padding: 80px 16px 40px
  }

  .subscribe .updates {
    padding: 40px 16px
  }

  .subscribe .grainh1 {
    font-size: 36px
  }

  .subscribe .statbig {
    font-size: 36px
  }

  .subscribe .channelgrid {
    grid-template-columns: 1fr
  }

  .subscribe .statcard {
    padding: 16px
  }

  .subscribe .updateshead {
    margin-bottom: 40px
  }
}

@media (min-width: 1440px) {
  .subscribe .grainleft {
    flex: 0 0 480px
  }
}

.successPage {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  background: #F4F6F9
}

.successPage .confirmationCard {
  background: #fff;
  border-radius: 13px;
  box-shadow: 2px 7px 18px -1px #319f4717 2px 10px 60px -1px #319f4724;
  padding: 80px;
  max-width: 640px;
  width: 100%;
  text-align: center;
  position: relative
}

.successPage .confirmationCard .iconMark {
  width: 72px;
  height: 72px;
  border-radius: 36px;
  background: linear-gradient(160deg, #F4F6F9, #040608, #319F47);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 0 auto 40px;
  box-shadow: 2px 2px 4px -1px #319f470d 2px 7px 18px -1px #319f4717
}

.successPage .confirmationCard .iconMark svg {
  width: 32px;
  height: 32px;
  display: block
}

.successPage .confirmationCard .confirmHeading {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  background: linear-gradient(160deg, #F4F6F9, #040608, #319F47);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.successPage .confirmationCard .confirmSubtext {
  font-size: 16px;
  line-height: 1.65;
  color: #040608;
  margin: 0 0 40px;
  opacity: .75
}

.successPage .confirmationCard .dividerLine {
  width: 48px;
  height: 3px;
  background: #319F47;
  border-radius: 4px;
  margin: 0 auto 40px
}

.successPage .confirmationCard .detailNote {
  font-size: 14px;
  line-height: 1.65;
  color: #040608;
  opacity: .55;
  margin: 0 0 40px;
  letter-spacing: .01em
}

.successPage .confirmationCard .returnLink {
  display: inline-block;
  background: #040608;
  color: #F4F6F9;
  font-size: 16px;
  line-height: 1.2;
  padding: 16px 40px;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: .02em;
  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 2px 2px 4px -1px #0406080d
}

.successPage .confirmationCard .returnLink:hover {
  transform: scale(1.045);
  box-shadow: 2px 7px 18px -1px #04060817
}

.successPage .confirmationCard .returnLink:focus {
  outline: 2px solid #319F47;
  outline-offset: 3px
}

.successPage .confirmationCard .returnLink:active {
  transform: scale(0.98)
}

.successPage .siteLabel {
  margin-top: 40px;
  font-size: 14px;
  line-height: 1.45;
  color: #040608;
  opacity: .4;
  letter-spacing: .03em
}

@media (max-width: 480px) {
  .successPage {
    padding: 40px 16px
  }

  .successPage .confirmationCard {
    padding: 40px 16px
  }

  .successPage .confirmationCard .confirmHeading {
    font-size: 36px
  }
}

@media (min-width: 481px) and (max-width: 960px) {
  .successPage .confirmationCard {
    padding: 80px 40px
  }
}