@import "https://cdn.jsdelivr.net/npm/@fontsource/spectral@latest/400.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/spectral@latest/700.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/dm-sans@latest/400.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/dm-sans@latest/700.css";

html {
  font-size: 100%
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'DM Sans', sans-serif;
  color: #2a2a2a;
  background: #F9F9F7;
  letter-spacing: .015em
}

.topbar {
  background: linear-gradient(135deg, #88AE51 0%, #9cbd6a 100%);
  padding: 16px 0;
  position: relative;
  box-shadow: 1px 3px 2px 0 #88ae510d
}

.topbar__shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px
}

.brand-mount {
  display: flex;
  align-items: center;
  gap: 28px
}

.emblem-frame {
  width: 72px;
  height: 72px;
  border: 2px dashed #ffffffb3;
  background: #ffffff26;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 7px 22px 0 #88ae511c;
  transition: border-color .38s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.emblem-frame:hover {
  border-color: #fffffff2
}

.emblem-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.brand-statement {
  font-family: 'Spectral', serif;
  font-size: 17px;
  line-height: 1.7;
  color: #fffffff2;
  max-width: 420px;
  letter-spacing: .012em
}

.divider-line {
  width: 1px;
  height: 56px;
  background: #ffffff40;
  align-self: center
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.nav-link {
  font-size: 15px;
  color: #ffffffeb;
  text-decoration: none;
  padding: 16px 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  transition: background-color .35s cubic-bezier(0.34, 1.2, 0.64, 1), border-color .35s cubic-bezier(0.34, 1.2, 0.64, 1), color .35s ease-in-out;
  letter-spacing: .018em;
  position: relative;
  overflow: hidden
}

.nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #fff3;
  transition: left .4s cubic-bezier(0.34, 1.2, 0.64, 1);
  z-index: -1
}

.nav-link:hover::before {
  left: 0
}

.nav-link:hover {
  background: #ffffff1f;
  border-color: #ffffff59;
  color: #fff
}

.nav-link:focus {
  outline: 2px solid #fff9;
  outline-offset: 4px;
  animation: focus-fade-in .3s ease-in-out
}

@keyframes focus-fade-in {
  from {
    outline-color: transparent
  }

  to {
    outline-color: #fff9
  }
}

.base-footer {
  background: linear-gradient(to bottom, #fff 0%, #F9F9F7 100%);
  padding: 96px 0 56px;
  border-top: 1px solid #C8D4B7;
  position: relative
}

.base-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #88AE51 0%, #C8D4B7 50%, #88AE51 100%)
}

.footer-shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px
}

.brand-zone {
  display: flex;
  flex-direction: column;
  gap: 28px
}

.footer-emblem-frame {
  width: 80px;
  height: 80px;
  border: 2px dashed #88AE51;
  background: #88ae510d;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 8px #88ae5114
}

.footer-emblem-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.company-title {
  font-family: 'Spectral', serif;
  font-size: 50px;
  line-height: 1.15;
  font-weight: 700;
  color: #88AE51;
  letter-spacing: .01em;
  margin: 0
}

.company-tagline {
  font-size: 17px;
  line-height: 1.7;
  color: #5a5a5a;
  max-width: 520px;
  letter-spacing: .015em
}

.reach-card {
  background: #fff;
  border: 1px solid #C8D4B7;
  border-radius: 14px;
  padding: 28px;
  box-shadow: 1px 7px 22px 0 #88ae511c;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow .38s cubic-bezier(0.34, 1.2, 0.64, 1), transform .38s ease-in-out
}

.reach-card:hover {
  box-shadow: 1px 10px 36px 0 #88ae511a;
  transform: translateY(-2px)
}

.reach-heading {
  font-family: 'Spectral', serif;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 700;
  color: #88AE51;
  margin: 0;
  letter-spacing: .012em
}

.reach-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #c8d4b74d;
  transition: padding-left .35s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.reach-item:last-child {
  border-bottom: none
}

.reach-item:hover {
  padding-left: 8px
}

.reach-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #88ae511a;
  border-radius: 4px
}

.reach-icon svg {
  width: 16px;
  height: 16px;
  fill: #88AE51
}

.reach-detail {
  font-size: 15px;
  line-height: 1.7;
  color: #3a3a3a;
  letter-spacing: .015em
}

.reach-detail a {
  color: #88AE51;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .32s ease-in-out, color .32s ease-in-out
}

.reach-detail a:hover {
  border-bottom-color: #88AE51;
  color: #6d8a41
}

.reach-detail a:focus {
  outline: 2px solid #88AE51;
  outline-offset: 3px;
  animation: focus-fade-in .3s ease-in-out
}

.footer-nav-zone {
  display: flex;
  flex-direction: column;
  gap: 28px;
  justify-content: flex-start;
  padding-top: 16px
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.footer-nav-link {
  font-size: 15px;
  color: #5a5a5a;
  text-decoration: none;
  padding: 8px 16px;
  border-left: 3px solid transparent;
  transition: border-left-color .35s cubic-bezier(0.34, 1.2, 0.64, 1), color .35s ease-in-out, padding-left .35s cubic-bezier(0.34, 1.2, 0.64, 1);
  letter-spacing: .015em
}

.footer-nav-link:hover {
  border-left-color: #88AE51;
  color: #88AE51;
  padding-left: 28px
}

.footer-nav-link:focus {
  outline: 2px solid #88AE51;
  outline-offset: 3px;
  animation: focus-fade-in .3s ease-in-out
}

.legal-bar {
  max-width: 1400px;
  margin: 56px auto 0;
  padding: 28px 28px 0;
  border-top: 1px solid #c8d4b766;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px
}

.copyright {
  font-size: 15px;
  color: #7a7a7a;
  letter-spacing: .015em
}

.founded-badge {
  font-size: 15px;
  color: #88AE51;
  background: #88ae5114;
  padding: 8px 16px;
  border-radius: 22px;
  letter-spacing: .018em;
  font-weight: 700
}

.consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 3px solid #88AE51;
  box-shadow: 1px 10px 36px 0 #88ae511a;
  padding: 28px;
  z-index: 1500;
  display: none;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.34, 1.2, 0.64, 1)
}

.consent-banner.visible {
  transform: translateX(0)
}

.consent-shell {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap
}

.consent-message {
  flex: 1;
  min-width: 280px
}

.consent-intro {
  font-size: 15px;
  line-height: 1.7;
  color: #3a3a3a;
  margin: 0 0 8px;
  letter-spacing: .015em
}

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

.consent-uses li {
  font-size: 15px;
  line-height: 1.7;
  color: #5a5a5a;
  padding-left: 28px;
  position: relative;
  letter-spacing: .015em
}

.consent-uses li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: #88AE51;
  border-radius: 1px
}

.consent-actions {
  display: flex;
  gap: 16px;
  align-items: center
}

.consent-accept,
.consent-decline {
  font-size: 15px;
  color: #88AE51;
  text-decoration: underline;
  background: transparent;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  letter-spacing: .015em;
  transition: color .35s ease-in-out, text-decoration-color .35s ease-in-out
}

.consent-accept:hover,
.consent-decline:hover {
  color: #6d8a41;
  text-decoration-color: #6d8a41
}

.consent-accept:focus,
.consent-decline:focus {
  outline: 2px solid #88AE51;
  outline-offset: 3px;
  animation: focus-fade-in .3s ease-in-out
}

@media (max-width: 1200px) {
  .topbar__shell {
    flex-direction: column;
    align-items: flex-start
  }

  .brand-mount {
    width: 100%;
    flex-direction: column;
    align-items: flex-start
  }

  .divider-line {
    width: 100%;
    height: 1px
  }

  .primary-nav {
    width: 100%;
    justify-content: flex-start
  }

  .footer-shell {
    grid-template-columns: 1fr
  }

  .legal-bar {
    flex-direction: column;
    align-items: flex-start
  }
}

@media (max-width: 992px) {
  .company-title {
    font-size: 36px
  }

  .reach-heading {
    font-size: 26px
  }

  .consent-shell {
    flex-direction: column;
    align-items: flex-start
  }

  .consent-actions {
    width: 100%;
    justify-content: flex-start
  }
}

@media (max-width: 576px) {
  .topbar {
    padding: 16px 0
  }

  .topbar__shell {
    padding: 0 16px;
    gap: 16px
  }

  .brand-statement {
    font-size: 15px
  }

  .primary-nav {
    flex-direction: column;
    align-items: stretch;
    width: 100%
  }

  .nav-link {
    padding: 16px;
    text-align: center
  }

  .company-title {
    font-size: 26px
  }

  .reach-card {
    padding: 16px
  }

  .footer-shell {
    padding: 0 16px;
    gap: 28px
  }

  .base-footer {
    padding: 56px 0 28px
  }

  .legal-bar {
    padding: 28px 16px 0;
    margin-top: 28px
  }

  .consent-banner {
    padding: 16px
  }

  .consent-uses li {
    font-size: 15px
  }
}

.policy-area {
  max-width: 1400px;
  margin: 0 auto;
  padding: 56px 28px;
  background: #fff
}

.policy-area h1 {
  font-size: 50px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #1a1a1a;
  margin-bottom: 28px;
  font-weight: 700
}

.policy-area h2 {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #2a2a2a;
  margin-top: 56px;
  margin-bottom: 28px;
  font-weight: 600
}

.policy-area h3 {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: .015em;
  color: #333;
  margin-top: 28px;
  margin-bottom: 16px;
  font-weight: 600
}

.policy-area h4 {
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: .015em;
  color: #444;
  margin-top: 28px;
  margin-bottom: 16px;
  font-weight: 600;
  text-transform: uppercase
}

.policy-area h5 {
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: .02em;
  color: #555;
  margin-top: 16px;
  margin-bottom: 8px;
  font-weight: 600
}

.policy-area h6 {
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: .02em;
  color: #666;
  margin-top: 16px;
  margin-bottom: 8px;
  font-weight: 600
}

.policy-area p {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .015em;
  color: #2a2a2a;
  margin-bottom: 16px
}

.policy-area ul,
.policy-area ol {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .015em;
  color: #2a2a2a;
  margin-bottom: 16px;
  padding-left: 28px
}

.policy-area ul {
  list-style-type: disc
}

.policy-area ol {
  list-style-type: decimal
}

.policy-area li {
  margin-bottom: 8px
}

.policy-area li ul,
.policy-area li ol {
  margin-top: 8px;
  margin-bottom: 8px
}

.policy-area strong,
.policy-area b {
  font-weight: 600;
  color: #1a1a1a
}

.policy-area a {
  color: #88AE51;
  text-decoration: underline;
  transition: color .35s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.policy-area a:hover {
  color: #6d8c40
}

.policy-area table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 28px;
  margin-bottom: 28px;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .015em;
  box-shadow: 1px 3px 2px 0 #88ae510d
}

.policy-area thead {
  background: #88AE51;
  color: #fff
}

.policy-area th {
  padding: 16px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #C8D4B7
}

.policy-area td {
  padding: 16px;
  border-bottom: 1px solid #C8D4B7;
  color: #2a2a2a
}

.policy-area tbody tr:last-child td {
  border-bottom: none
}

.policy-area tbody tr:nth-child(even) {
  background: #F9F9F7
}

.policy-area tbody tr:hover {
  background: #c8d4b733;
  transition: background .3s ease-in-out
}

@media (max-width: 992px) {
  .policy-area {
    padding: 28px 16px
  }

  .policy-area h1 {
    font-size: 36px;
    margin-bottom: 16px
  }

  .policy-area h2 {
    font-size: 26px;
    margin-top: 28px;
    margin-bottom: 16px
  }

  .policy-area h3 {
    font-size: 17px;
    margin-top: 16px
  }

  .policy-area table {
    font-size: 15px
  }

  .policy-area th,
  .policy-area td {
    padding: 8px
  }
}

@media (max-width: 576px) {
  .policy-area {
    padding: 16px 8px
  }

  .policy-area h1 {
    font-size: 26px
  }

  .policy-area h2 {
    font-size: 17px
  }

  .policy-area p,
  .policy-area ul,
  .policy-area ol {
    font-size: 15px
  }

  .policy-area table {
    display: block;
    overflow-x: auto
  }
}

.jrnl_dtl {
  background: linear-gradient(17deg, #F9F9F7 0%, #fff 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: clip
}

.jrnl_dtl::before {
  content: '';
  position: absolute;
  top: 96px;
  right: -120px;
  width: 480px;
  height: 480px;
  border: 2px solid #88ae511f;
  border-radius: 50%;
  pointer-events: none;
  animation: jrnl_dtl_bg_zoom 28s cubic-bezier(0.34, 1.2, 0.64, 1) infinite alternate
}

.jrnl_dtl::after {
  content: '∞';
  position: absolute;
  top: 220px;
  left: -80px;
  font-size: 420px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px #c8d4b726;
  pointer-events: none;
  z-index: 0;
  animation: jrnl_dtl_bg_zoom 32s cubic-bezier(0.34, 1.2, 0.64, 1) infinite alternate
}

@keyframes jrnl_dtl_bg_zoom {
  0% {
    transform: scale(1)
  }

  100% {
    transform: scale(1.08)
  }
}

.jrnl_dtl_lead {
  max-width: 1400px;
  margin: 0 auto;
  padding: 96px 28px 56px;
  position: relative;
  z-index: 1;
  background: linear-gradient(17deg, #f9f9f7f2 0%, #ffffffeb 100%)
}

.jrnl_dtl_lead_frame {
  border: 1px solid #88ae5133;
  border-radius: 4px;
  padding: 56px 28px 28px;
  position: relative
}

.jrnl_dtl_lead_frame::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 1px solid #c8d4b726;
  border-radius: 1px;
  pointer-events: none
}

.jrnl_dtl_lead_tag {
  display: inline-block;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: .02em;
  color: #88AE51;
  background: #88ae5114;
  padding: 8px 16px;
  border-radius: 14px;
  margin: 0 0 28px;
  transition: background .38s cubic-bezier(0.34, 1.2, 0.64, 1), color .38s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.jrnl_dtl_lead_tag:hover {
  background: #88AE51;
  color: #fff
}

.jrnl_dtl_lead h1 {
  font-size: 50px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #2a2a2a;
  margin: 0 0 16px;
  max-width: 920px
}

.jrnl_dtl_lead_caption {
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #88AE51;
  margin: 0 0 56px;
  padding: 0 0 8px;
  border-bottom: 1px solid #88ae5140;
  max-width: 280px
}

.jrnl_dtl_lead_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  margin: 0 0 28px
}

.jrnl_dtl_lead_meta_author {
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #2a2a2a;
  font-weight: 600
}

.jrnl_dtl_lead_meta_date {
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #6a6a6a
}

.jrnl_dtl_lead_meta_stats {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-left: auto
}

.jrnl_dtl_lead_meta_stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #6a6a6a
}

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

.jrnl_dtl_lead_actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap
}

.jrnl_dtl_lead_btn {
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: .02em;
  padding: 16px 28px;
  border: 2px solid #88AE51;
  background: transparent;
  color: #88AE51;
  border-radius: 8px;
  cursor: pointer;
  transition: background .42s cubic-bezier(0.34, 1.2, 0.64, 1), color .42s cubic-bezier(0.34, 1.2, 0.64, 1), transform .35s ease-in-out;
  position: relative;
  overflow: hidden
}

.jrnl_dtl_lead_btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #88AE51;
  transition: left .42s cubic-bezier(0.34, 1.2, 0.64, 1);
  z-index: -1
}

.jrnl_dtl_lead_btn:hover::before {
  left: 0
}

.jrnl_dtl_lead_btn:hover {
  color: #fff;
  transform: translateY(-2px)
}

.jrnl_dtl_lead_btn:active {
  transform: translateY(0)
}

.jrnl_dtl_article {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px 96px;
  position: relative;
  z-index: 1
}

.jrnl_dtl_article_wrap {
  background: #fff;
  border-radius: 22px;
  padding: 56px;
  box-shadow: 1px 10px 36px 0 #88ae511a;
  position: relative;
  overflow: hidden
}

.jrnl_dtl_article_wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: conic-gradient(from 17deg, #88AE51, #C8D4B7, #88AE51)
}

.jrnl_dtl_article_img {
  width: 100%;
  height: 480px;
  border-radius: 14px;
  overflow: hidden;
  margin: 0 0 56px;
  position: relative
}

.jrnl_dtl_article_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.jrnl_dtl_article_img:hover img {
  transform: scale(1.05)
}

.jrnl_dtl_article_content {
  max-width: 820px;
  margin: 0 auto
}

.jrnl_dtl_article_content p {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .01em;
  color: #3a3a3a;
  margin: 0 0 28px
}

.jrnl_dtl_article_content p:last-child {
  margin-bottom: 0
}

.jrnl_dtl_article_content h2 {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: transparent;
  -webkit-text-stroke: 1.5px #88AE51;
  margin: 56px 0 28px
}

.jrnl_dtl_article_content h3 {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #2a2a2a;
  margin: 28px 0 16px;
  position: relative;
  padding-left: 28px
}

.jrnl_dtl_article_content h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: conic-gradient(from 17deg, #88AE51, #C8D4B7);
  border-radius: 1px
}

.jrnl_dtl_article_content small {
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .01em;
  color: #6a6a6a;
  display: block;
  margin: 0 0 16px
}

.jrnl_dtl_article_content ul,
.jrnl_dtl_article_content ol {
  margin: 0 0 28px;
  padding-left: 28px
}

.jrnl_dtl_article_content li {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .01em;
  color: #3a3a3a;
  margin: 0 0 8px
}

.jrnl_dtl_article_content li:last-child {
  margin-bottom: 0
}

.jrnl_dtl_article_content details {
  background: #c8d4b714;
  border-radius: 8px;
  padding: 16px;
  margin: 0 0 16px;
  transition: background .38s ease-in-out
}

.jrnl_dtl_article_content details:hover {
  background: #c8d4b726
}

.jrnl_dtl_article_content summary {
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #88AE51;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-left: 28px
}

.jrnl_dtl_article_content summary::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid #88AE51;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .35s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.jrnl_dtl_article_content details[open] summary::before {
  transform: translateY(-50%) rotate(90deg)
}

.jrnl_dtl_article_content details p {
  margin-top: 16px
}

.jrnl_dtl_divider {
  max-width: 1400px;
  margin: 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #88ae514d 50%, transparent 100%);
  position: relative;
  z-index: 1
}

@media (max-width: 992px) {
  .jrnl_dtl_lead {
    padding: 56px 28px 28px
  }

  .jrnl_dtl_lead_frame {
    padding: 28px 16px 16px
  }

  .jrnl_dtl_lead h1 {
    font-size: 36px
  }

  .jrnl_dtl_lead_meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px
  }

  .jrnl_dtl_lead_meta_stats {
    margin-left: 0
  }

  .jrnl_dtl_article_wrap {
    padding: 28px
  }

  .jrnl_dtl_article_img {
    height: 320px;
    margin-bottom: 28px
  }

  .jrnl_dtl_article_content h2 {
    font-size: 26px;
    margin: 28px 0 16px
  }
}

@media (max-width: 576px) {
  .jrnl_dtl::before {
    width: 280px;
    height: 280px;
    right: -80px
  }

  .jrnl_dtl::after {
    font-size: 240px;
    left: -60px
  }

  .jrnl_dtl_lead {
    padding: 28px 16px 16px
  }

  .jrnl_dtl_lead_frame {
    padding: 16px 8px 8px
  }

  .jrnl_dtl_lead h1 {
    font-size: 26px
  }

  .jrnl_dtl_lead_caption {
    font-size: 15px;
    letter-spacing: .12em;
    margin-bottom: 28px
  }

  .jrnl_dtl_lead_actions {
    flex-direction: column
  }

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

  .jrnl_dtl_article {
    padding: 0 16px 56px
  }

  .jrnl_dtl_article_wrap {
    padding: 16px;
    border-radius: 14px
  }

  .jrnl_dtl_article_img {
    height: 220px;
    margin-bottom: 16px;
    border-radius: 8px
  }

  .jrnl_dtl_article_content h2 {
    font-size: 26px
  }

  .jrnl_dtl_article_content h3 {
    font-size: 17px
  }
}

.cntct-pg {
  background: #F9F9F7;
  overflow-x: clip
}

.cntct-pg__schema {
  display: none
}

.cntct-pg__split-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 82vh;
  position: relative
}

.cntct-pg__visual-zone {
  background: linear-gradient(90deg, #88AE51 0%, #C8D4B7 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center
}

.cntct-pg__visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .35;
  mix-blend-mode: multiply
}

.cntct-pg__visual-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 85% 15%, #88ae5199 0%, transparent 65%);
  pointer-events: none
}

.cntct-pg__visual-frame {
  position: absolute;
  inset: 28px;
  border: 1px solid #ffffff40;
  border-radius: 4px;
  pointer-events: none
}

.cntct-pg__text-zone {
  background: #FFF;
  padding: 96px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative
}

.cntct-pg__text-zone::before {
  content: '';
  position: absolute;
  top: 56px;
  left: 56px;
  width: 84px;
  height: 2px;
  background: linear-gradient(90deg, #88AE51 0%, transparent 100%)
}

.cntct-pg__tier-badge {
  display: inline-flex;
  align-items: center;
  background: #C8D4B7;
  color: #2A3A1F;
  padding: 8px 16px;
  border-radius: 22px;
  font-size: 15px;
  letter-spacing: .02em;
  margin-bottom: 28px;
  width: fit-content
}

.cntct-pg__intro-title {
  font-size: 50px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #1A1A1A;
  margin-bottom: 28px;
  -webkit-text-stroke: 1.2px #1A1A1A;
  -webkit-text-fill-color: transparent;
  paint-order: stroke fill
}

.cntct-pg__intro-quote {
  font-size: 17px;
  line-height: 1.7;
  color: #3D3D3D;
  letter-spacing: .015em;
  font-style: italic;
  border-left: 3px solid #88AE51;
  padding-left: 28px;
  margin-top: 28px
}

.cntct-pg__form-section {
  background: linear-gradient(90deg, #88AE51 0%, #F9F9F7 100%);
  padding: 96px 56px;
  position: relative
}

.cntct-pg__form-container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 56px;
  align-items: start
}

.cntct-pg__sidebar {
  background: #FFF;
  padding: 56px 28px;
  border-radius: 14px;
  box-shadow: 1px 7px 22px 0 #88ae511c;
  position: sticky;
  top: 28px
}

.cntct-pg__sidebar-title {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: .015em;
  color: #1A1A1A;
  margin-bottom: 28px
}

.cntct-pg__tier-grid {
  display: grid;
  gap: 16px
}

.cntct-pg__tier-card {
  background: #F9F9F7;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #E8E8E6;
  transition: background .38s cubic-bezier(0.34, 1.2, 0.64, 1), border-color .38s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.cntct-pg__tier-card:hover {
  background: #FFF;
  border-color: #88AE51
}

.cntct-pg__tier-name {
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: .02em;
  color: #1A1A1A;
  margin-bottom: 8px;
  font-weight: 600
}

.cntct-pg__tier-feature {
  font-size: 15px;
  line-height: 1.7;
  color: #5A5A5A;
  letter-spacing: .015em;
  display: flex;
  align-items: baseline;
  gap: 8px
}

.cntct-pg__tier-feature::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #88AE51;
  border-radius: 1px;
  flex-shrink: 0;
  margin-top: 8px
}

.cntct-pg__form-main {
  background: #FFF;
  padding: 56px;
  border-radius: 14px;
  box-shadow: 1px 10px 36px 0 #88ae511a
}

.cntct-pg__form-header {
  margin-bottom: 56px
}

.cntct-pg__form-title {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: .015em;
  color: #1A1A1A;
  margin-bottom: 16px
}

.cntct-pg__form-desc {
  font-size: 17px;
  line-height: 1.7;
  color: #5A5A5A;
  letter-spacing: .015em
}

.cntct-pg__form-element {
  margin-bottom: 28px
}

.cntct-pg__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 28px
}

.cntct-pg__label {
  display: block;
  font-size: 15px;
  line-height: 1.7;
  color: #1A1A1A;
  letter-spacing: .015em;
  margin-bottom: 8px;
  font-weight: 500
}

.cntct-pg__label-required {
  color: #88AE51
}

.cntct-pg__input {
  width: 100%;
  padding: 16px;
  border: 1px solid #D4D4D2;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.7;
  color: #1A1A1A;
  letter-spacing: .015em;
  background: #FFF;
  transition: border-color .35s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .35s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.cntct-pg__input:focus {
  outline: none;
  border-color: #88AE51;
  box-shadow: inset 0 0 0 1px #88AE51, 1px 3px 2px 0 #88ae510d
}

.cntct-pg__input::placeholder {
  color: #9A9A98;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.cntct-pg__select-wrapper {
  position: relative
}

.cntct-pg__select {
  width: 100%;
  padding: 16px;
  padding-right: 48px;
  border: 1px solid #D4D4D2;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.7;
  color: #1A1A1A;
  letter-spacing: .015em;
  background: #FFF;
  appearance: none;
  cursor: pointer;
  transition: border-color .35s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .35s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.cntct-pg__select:focus {
  outline: none;
  border-color: #88AE51;
  box-shadow: inset 0 0 0 1px #88AE51, 1px 3px 2px 0 #88ae510d
}

.cntct-pg__select-wrapper::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #88AE51;
  pointer-events: none
}

.cntct-pg__textarea {
  width: 100%;
  padding: 16px;
  border: 1px solid #D4D4D2;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.7;
  color: #1A1A1A;
  letter-spacing: .015em;
  background: #FFF;
  min-height: 160px;
  resize: vertical;
  transition: border-color .35s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .35s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.cntct-pg__textarea:focus {
  outline: none;
  border-color: #88AE51;
  box-shadow: inset 0 0 0 1px #88AE51, 1px 3px 2px 0 #88ae510d
}

.cntct-pg__textarea::placeholder {
  color: #9A9A98
}

.cntct-pg__details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 28px
}

.cntct-pg__detail-item {
  background: #F9F9F7;
  padding: 28px;
  border-radius: 8px;
  border: 1px solid #E8E8E6;
  transition: background .42s ease-in-out, transform .38s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.cntct-pg__detail-item:hover {
  background: #FFF;
  transform: translateY(-2px)
}

.cntct-pg__detail-icon {
  width: 48px;
  height: 48px;
  background: #88AE51;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px
}

.cntct-pg__detail-icon svg {
  width: 24px;
  height: 24px;
  fill: #FFF
}

.cntct-pg__detail-label {
  font-size: 15px;
  line-height: 1.15;
  color: #5A5A5A;
  letter-spacing: .02em;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-weight: 600
}

.cntct-pg__detail-value {
  font-size: 17px;
  line-height: 1.7;
  color: #1A1A1A;
  letter-spacing: .015em
}

.cntct-pg__detail-value a {
  color: inherit;
  text-decoration: none;
  transition: color .35s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.cntct-pg__detail-value a:hover {
  color: #88AE51
}

.cntct-pg__privacy-wrap {
  margin-bottom: 28px;
  display: flex;
  align-items: flex-start;
  gap: 16px
}

.cntct-pg__checkbox {
  width: 22px;
  height: 22px;
  border: 1px solid #D4D4D2;
  border-radius: 4px;
  flex-shrink: 0;
  cursor: pointer;
  appearance: none;
  background: #FFF;
  position: relative;
  transition: border-color .35s cubic-bezier(0.34, 1.2, 0.64, 1), background .35s cubic-bezier(0.34, 1.2, 0.64, 1);
  margin-top: 2px
}

.cntct-pg__checkbox:checked {
  background: #88AE51;
  border-color: #88AE51
}

.cntct-pg__checkbox:checked::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #FFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg)
}

.cntct-pg__checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 3px #88ae5126
}

.cntct-pg__privacy-text {
  font-size: 15px;
  line-height: 1.7;
  color: #5A5A5A;
  letter-spacing: .015em
}

.cntct-pg__privacy-text a {
  color: #88AE51;
  text-decoration: none;
  transition: color .35s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.cntct-pg__privacy-text a:hover {
  color: #6B8E3F
}

.cntct-pg__submit {
  background: transparent;
  color: #88AE51;
  border: 2px solid #88AE51;
  padding: 16px 56px;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: .02em;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: color .4s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.cntct-pg__submit::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #88AE51;
  transition: left .45s cubic-bezier(0.34, 1.2, 0.64, 1);
  z-index: -1
}

.cntct-pg__submit:hover {
  color: #FFF
}

.cntct-pg__submit:hover::before {
  left: 0
}

.cntct-pg__submit:focus {
  outline: none;
  box-shadow: 0 0 0 3px #88ae5140
}

.cntct-pg__divider {
  max-width: 1400px;
  margin: 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #D4D4D2 50%, transparent 100%);
  position: relative
}

.cntct-pg__divider::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 16px solid #88AE51
}

.cntct-pg__word-highlight {
  display: inline;
  position: relative;
  transition: background .42s ease-in-out;
  padding: 2px 4px;
  border-radius: 4px
}

.cntct-pg__word-highlight:hover {
  background: #88ae511f
}

@keyframes cntct-pg-slide-in {
  from {
    opacity: 0;
    transform: translateX(-48px)
  }

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

.cntct-pg__tier-badge {
  animation: cntct-pg-slide-in .6s cubic-bezier(0.34, 1.2, 0.64, 1) .1s backwards
}

.cntct-pg__intro-title {
  animation: cntct-pg-slide-in .7s cubic-bezier(0.34, 1.2, 0.64, 1) .25s backwards
}

.cntct-pg__intro-quote {
  animation: cntct-pg-slide-in .65s cubic-bezier(0.34, 1.2, 0.64, 1) .4s backwards
}

@media (max-width: 1200px) {
  .cntct-pg__split-intro {
    grid-template-columns: 1fr
  }

  .cntct-pg__visual-zone {
    min-height: 50vh
  }

  .cntct-pg__form-container {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .cntct-pg__sidebar {
    position: static
  }

  .cntct-pg__details-grid {
    grid-template-columns: 1fr
  }
}

@media (max-width: 992px) {
  .cntct-pg__text-zone {
    padding: 56px 28px
  }

  .cntct-pg__text-zone::before {
    top: 28px;
    left: 28px;
    width: 64px
  }

  .cntct-pg__intro-title {
    font-size: 36px
  }

  .cntct-pg__form-section {
    padding: 56px 28px
  }

  .cntct-pg__form-main {
    padding: 28px
  }

  .cntct-pg__form-row {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .cntct-pg__form-title {
    font-size: 26px
  }
}

@media (max-width: 576px) {
  .cntct-pg__text-zone {
    padding: 28px 16px
  }

  .cntct-pg__text-zone::before {
    top: 16px;
    left: 16px;
    width: 48px
  }

  .cntct-pg__intro-title {
    font-size: 26px
  }

  .cntct-pg__intro-quote {
    font-size: 15px;
    padding-left: 16px
  }

  .cntct-pg__form-section {
    padding: 28px 16px
  }

  .cntct-pg__form-main {
    padding: 16px
  }

  .cntct-pg__form-header {
    margin-bottom: 28px
  }

  .cntct-pg__sidebar {
    padding: 28px 16px
  }

  .cntct-pg__submit {
    width: 100%;
    padding: 16px 28px
  }

  .cntct-pg__detail-item {
    padding: 16px
  }
}

.jrnl {
  background: #F9F9F7;
  position: relative;
  overflow-x: clip
}

.jrnl__title-wrap {
  position: relative;
  padding: 96px 16px;
  background: conic-gradient(from 17deg at 12% 18%, #88AE51, #C8D4B7, #F9F9F7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.jrnl__title-wrap::before {
  content: 'J';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 380px;
  font-weight: 700;
  color: #88ae5114;
  line-height: 1;
  pointer-events: none;
  z-index: 0
}

.jrnl__title-inner {
  max-width: 820px;
  width: 100%;
  position: relative;
  z-index: 1;
  text-align: center
}

.jrnl__title-h1 {
  font-size: 50px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #1d1d1d;
  margin: 0 0 28px
}

.jrnl__title-desc {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .01em;
  color: #2a2a2a;
  margin: 0;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto
}

.jrnl__title-img-wrap {
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  overflow: hidden;
  border-radius: 0 0 0 22px
}

.jrnl__title-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .42s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.jrnl__title-img-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, #88ae511f, transparent 68%);
  pointer-events: none
}

.jrnl__title-img-wrap:hover .jrnl__title-img {
  transform: scale(1.06)
}

.jrnl__posts-section {
  padding: 96px 16px;
  max-width: 1400px;
  margin: 0 auto;
  background: #F9F9F7
}

.jrnl__posts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  margin: 0 auto;
  max-width: 920px
}

.jrnl__post-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 1px 7px 22px 0 #88ae511c;
  transition: box-shadow .38s cubic-bezier(0.34, 1.2, 0.64, 1), transform .38s cubic-bezier(0.34, 1.2, 0.64, 1);
  display: flex;
  flex-direction: column
}

.jrnl__post-card:hover {
  box-shadow: 1px 10px 36px 0 #88ae511a;
  transform: translateY(-4px)
}

.jrnl__post-img-link {
  display: block;
  overflow: hidden;
  position: relative;
  height: 280px
}

.jrnl__post-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.jrnl__post-img-link:hover .jrnl__post-img {
  transform: scale(1.08)
}

.jrnl__post-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1
}

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

.jrnl__post-tag {
  display: inline-block;
  padding: 8px 16px;
  background: #C8D4B7;
  color: #2a2a2a;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .02em;
  border-radius: 4px;
  transition: background .35s ease-in-out
}

.jrnl__post-tag:hover {
  background: #88AE51;
  color: #fff
}

.jrnl__post-date {
  font-size: 15px;
  line-height: 1;
  letter-spacing: .01em;
  color: #6a6a6a
}

.jrnl__post-title-link {
  text-decoration: none;
  color: inherit;
  margin-bottom: 16px;
  display: block
}

.jrnl__post-title {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #1d1d1d;
  margin: 0;
  transition: color .32s ease-in-out
}

.jrnl__post-title-link:hover .jrnl__post-title {
  color: #88AE51
}

.jrnl__post-desc {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .01em;
  color: #3a3a3a;
  margin: 0 0 28px;
  flex-grow: 1
}

.jrnl__post-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid #e8e8e8
}

.jrnl__post-author {
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #2a2a2a;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px
}

.jrnl__post-author::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #88AE51;
  border-radius: 1px;
  display: block
}

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

.jrnl__post-stat {
  font-size: 15px;
  line-height: 1;
  letter-spacing: .01em;
  color: #6a6a6a;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px
}

.jrnl__post-stat-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #88AE51;
  stroke-width: 2
}

.jrnl__insight-section {
  padding: 96px 16px;
  background: conic-gradient(from 17deg at 88% 12%, #88AE51, #C8D4B7, #F9F9F7);
  position: relative
}

.jrnl__insight-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center
}

.jrnl__insight-h2 {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #1d1d1d;
  margin: 0 0 56px;
  text-align: center
}

.jrnl__insight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  width: 100%;
  max-width: 920px
}

.jrnl__insight-item {
  background: #fff;
  padding: 28px;
  border-radius: 8px;
  box-shadow: 1px 3px 2px 0 #88ae510d;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  transition: box-shadow .36s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.jrnl__insight-item:hover {
  box-shadow: 1px 7px 22px 0 #88ae511c
}

.jrnl__insight-num {
  font-size: 36px;
  line-height: 1;
  letter-spacing: .01em;
  font-weight: 700;
  color: #88AE51;
  flex-shrink: 0
}

.jrnl__insight-num::after {
  content: attr(data-decimal);
  color: #C8D4B7
}

.jrnl__insight-content {
  flex-grow: 1
}

.jrnl__insight-label {
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: .02em;
  color: #1d1d1d;
  margin: 0 0 8px;
  font-weight: 600
}

.jrnl__insight-text {
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .01em;
  color: #3a3a3a;
  margin: 0
}

.jrnl__divider {
  height: 8px;
  background: linear-gradient(to right, #88AE51, #C8D4B7);
  margin: 0
}

.jrnl__progress-section {
  padding: 96px 16px;
  background: #fff;
  position: relative
}

.jrnl__progress-container {
  max-width: 1400px;
  margin: 0 auto
}

.jrnl__progress-h2 {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #1d1d1d;
  margin: 0 0 28px;
  text-align: center
}

.jrnl__progress-intro {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .01em;
  color: #3a3a3a;
  margin: 0 auto 56px;
  text-align: center;
  max-width: 720px
}

.jrnl__progress-track {
  display: flex;
  flex-direction: row;
  gap: 8px;
  max-width: 820px;
  margin: 0 auto 16px;
  height: 56px
}

.jrnl__progress-segment {
  flex: 1;
  background: #e8e8e8;
  border-radius: 4px;
  position: relative;
  overflow: hidden
}

.jrnl__progress-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #88AE51;
  transition: height .45s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.jrnl__progress-segment:nth-child(1) .jrnl__progress-fill {
  height: 92%
}

.jrnl__progress-segment:nth-child(2) .jrnl__progress-fill {
  height: 78%
}

.jrnl__progress-segment:nth-child(3) .jrnl__progress-fill {
  height: 85%
}

.jrnl__progress-segment:nth-child(4) .jrnl__progress-fill {
  height: 64%
}

.jrnl__progress-segment:nth-child(5) .jrnl__progress-fill {
  height: 71%
}

.jrnl__progress-labels {
  display: flex;
  flex-direction: row;
  gap: 8px;
  max-width: 820px;
  margin: 0 auto
}

.jrnl__progress-label {
  flex: 1;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #2a2a2a;
  text-align: center
}

.jrnl__grid-section {
  padding: 96px 16px;
  background: radial-gradient(ellipse at center, #F9F9F7, #fff);
  position: relative;
  overflow: hidden
}

.jrnl__grid-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #88ae510f 1px, transparent 1px), linear-gradient(to bottom, #88ae510f 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 0;
  animation: jrnl-grid-pulse 8s ease-in-out infinite
}

@keyframes jrnl-grid-pulse {

  0%,
  100% {
    opacity: .3
  }

  50% {
    opacity: .7
  }
}

.jrnl__grid-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.jrnl__grid-h2 {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: transparent;
  -webkit-text-stroke: 2px #1d1d1d;
  text-stroke: 2px #1d1d1d;
  margin: 0 0 56px;
  text-align: center
}

.jrnl__grid-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 920px;
  margin: 0 auto
}

.jrnl__grid-card {
  background: #fff;
  padding: 28px;
  border-radius: 14px;
  box-shadow: 1px 3px 2px 0 #88ae510d;
  transition: box-shadow .4s ease-in-out, transform .4s ease-in-out;
  position: relative
}

.jrnl__grid-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(to right, #88ae5114, transparent);
  border-radius: 14px;
  transition: width .42s cubic-bezier(0.34, 1.2, 0.64, 1);
  pointer-events: none;
  z-index: 0
}

.jrnl__grid-card:hover::before {
  width: 100%
}

.jrnl__grid-card:hover {
  box-shadow: 1px 7px 22px 0 #88ae511c;
  transform: translateX(8px)
}

.jrnl__grid-card-inner {
  position: relative;
  z-index: 1
}

.jrnl__grid-h3 {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #1d1d1d;
  margin: 0 0 16px
}

.jrnl__grid-text {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .01em;
  color: #3a3a3a;
  margin: 0
}

.jrnl__cta-section {
  padding: 96px 16px;
  background: #fff;
  position: relative
}

.jrnl__cta-shape {
  position: absolute;
  top: 50%;
  right: 8%;
  width: 420px;
  height: 420px;
  background: conic-gradient(from 17deg, #88ae5126, #c8d4b71f, transparent);
  border-radius: 22px;
  transform: translateY(-50%) rotate(12deg);
  pointer-events: none;
  z-index: 0
}

.jrnl__cta-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center
}

.jrnl__cta-h2 {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #1d1d1d;
  margin: 0 0 28px;
  text-align: center
}

.jrnl__cta-text {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .01em;
  color: #3a3a3a;
  margin: 0 0 56px;
  text-align: center;
  max-width: 680px
}

.jrnl__cta-btn {
  display: inline-block;
  padding: 16px 56px;
  background: transparent;
  color: #88AE51;
  font-size: 17px;
  line-height: 1;
  letter-spacing: .02em;
  text-decoration: none;
  border: 2px solid #88AE51;
  border-radius: 8px;
  transition: background .38s cubic-bezier(0.34, 1.2, 0.64, 1), color .38s cubic-bezier(0.34, 1.2, 0.64, 1);
  position: relative;
  overflow: hidden;
  z-index: 1
}

.jrnl__cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #88AE51;
  transition: left .42s cubic-bezier(0.34, 1.2, 0.64, 1);
  z-index: -1
}

.jrnl__cta-btn:hover::before {
  left: 0
}

.jrnl__cta-btn:hover {
  color: #fff
}

.jrnl__hover-text {
  display: inline
}

.jrnl__hover-text span {
  display: inline-block;
  transition: color .08s ease-in-out
}

.jrnl__hover-text:hover span:nth-child(1) {
  color: #88AE51;
  transition-delay: 0s
}

.jrnl__hover-text:hover span:nth-child(2) {
  color: #88AE51;
  transition-delay: .02s
}

.jrnl__hover-text:hover span:nth-child(3) {
  color: #88AE51;
  transition-delay: .04s
}

.jrnl__hover-text:hover span:nth-child(4) {
  color: #88AE51;
  transition-delay: .06s
}

.jrnl__hover-text:hover span:nth-child(5) {
  color: #88AE51;
  transition-delay: .08s
}

.jrnl__hover-text:hover span:nth-child(6) {
  color: #88AE51;
  transition-delay: .1s
}

.jrnl__hover-text:hover span:nth-child(7) {
  color: #88AE51;
  transition-delay: .12s
}

.jrnl__hover-text:hover span:nth-child(8) {
  color: #88AE51;
  transition-delay: .14s
}

.jrnl__hover-text:hover span:nth-child(9) {
  color: #88AE51;
  transition-delay: .16s
}

.jrnl__hover-text:hover span:nth-child(10) {
  color: #88AE51;
  transition-delay: .18s
}

.jrnl__hover-text:hover span:nth-child(11) {
  color: #88AE51;
  transition-delay: .2s
}

.jrnl__hover-text:hover span:nth-child(12) {
  color: #88AE51;
  transition-delay: .22s
}

.jrnl__hover-text:hover span:nth-child(13) {
  color: #88AE51;
  transition-delay: .24s
}

.jrnl__hover-text:hover span:nth-child(14) {
  color: #88AE51;
  transition-delay: .26s
}

.jrnl__hover-text:hover span:nth-child(15) {
  color: #88AE51;
  transition-delay: .28s
}

.jrnl__hover-text:hover span:nth-child(16) {
  color: #88AE51;
  transition-delay: .3s
}

.jrnl__hover-text:hover span:nth-child(17) {
  color: #88AE51;
  transition-delay: .32s
}

.jrnl__hover-text:hover span:nth-child(18) {
  color: #88AE51;
  transition-delay: .34s
}

.jrnl__hover-text:hover span:nth-child(19) {
  color: #88AE51;
  transition-delay: .36s
}

.jrnl__hover-text:hover span:nth-child(20) {
  color: #88AE51;
  transition-delay: .38s
}

@media (min-width: 576px) {
  .jrnl__posts-grid {
    grid-template-columns: 1fr;
    max-width: 920px
  }

  .jrnl__insight-grid {
    grid-template-columns: 1fr
  }

  .jrnl__grid-cols {
    grid-template-columns: 1fr
  }
}

@media (min-width: 992px) {
  .jrnl__title-wrap {
    padding: 96px 56px
  }

  .jrnl__posts-section {
    padding: 96px 56px
  }

  .jrnl__posts-grid {
    grid-template-columns: 1fr;
    max-width: 920px
  }

  .jrnl__insight-section {
    padding: 96px 56px
  }

  .jrnl__insight-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1200px
  }

  .jrnl__progress-section {
    padding: 96px 56px
  }

  .jrnl__grid-section {
    padding: 96px 56px
  }

  .jrnl__grid-cols {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1200px
  }

  .jrnl__cta-section {
    padding: 96px 56px
  }
}

@media (min-width: 1200px) {
  .jrnl__title-wrap {
    padding: 96px
  }

  .jrnl__posts-section {
    padding: 96px
  }

  .jrnl__insight-section {
    padding: 96px
  }

  .jrnl__progress-section {
    padding: 96px
  }

  .jrnl__grid-section {
    padding: 96px
  }

  .jrnl__cta-section {
    padding: 96px
  }
}

.prog-hub {
  background: #F9F9F7;
  overflow-x: clip
}

.prog-hub__style-block {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .015em;
  color: #1d1d1d
}

.prog-hub__style-block::selection {
  background: #C8D4B7;
  color: #1d1d1d
}

.prog-hub__opener {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 96px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center
}

.prog-hub__opener-visual {
  position: relative;
  width: 100%;
  height: 520px;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  overflow: hidden
}

.prog-hub__opener-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: sepia(0.15) saturate(1.1) brightness(1.05)
}

.prog-hub__opener-content {
  display: flex;
  flex-direction: column;
  gap: 28px
}

.prog-hub__opener-title {
  font-size: 50px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #88AE51;
  margin: 0;
  font-weight: 600
}

.prog-hub__opener-tagline {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .015em;
  color: #2d2d2d;
  margin: 0
}

.prog-hub__opener-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap
}

.prog-hub__opener-link {
  padding: 16px 28px;
  font-size: 15px;
  letter-spacing: .02em;
  text-decoration: none;
  border: 1.5px solid #88AE51;
  border-radius: 8px;
  color: #88AE51;
  background: transparent;
  position: relative;
  overflow: hidden;
  transition: color .38s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.prog-hub__opener-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #88AE51;
  transition: left .42s cubic-bezier(0.34, 1.2, 0.64, 1);
  z-index: -1
}

.prog-hub__opener-link:hover::before {
  left: 0
}

.prog-hub__opener-link:hover {
  color: #fff
}

.prog-hub__opener-link--alt {
  border-color: #C8D4B7;
  color: #2d2d2d
}

.prog-hub__opener-link--alt::before {
  background: #C8D4B7
}

.prog-hub__details {
  position: relative;
  background: linear-gradient(17deg, #88AE51 0%, #F9F9F7 100%);
  padding: 96px 0;
  clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%);
  margin-top: -56px
}

.prog-hub__details::before {
  content: '';
  position: absolute;
  top: 15%;
  right: 8%;
  width: 280px;
  height: 280px;
  border: 2px solid #88ae5133;
  border-radius: 22px;
  animation: prog-hub-pulse 4.2s ease-in-out infinite;
  pointer-events: none
}

@keyframes prog-hub-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .4
  }

  50% {
    transform: scale(1.08);
    opacity: .7
  }
}

.prog-hub__details::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(42deg, transparent, transparent 18px, #88ae5108 18px, #88ae5108 36px);
  animation: prog-hub-stripe 18s linear infinite;
  pointer-events: none
}

@keyframes prog-hub-stripe {
  0% {
    background-position: 0 0
  }

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

.prog-hub__details-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1
}

.prog-hub__details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px
}

.prog-hub__detail-card {
  background: #fff;
  padding: 28px;
  border-radius: 14px;
  box-shadow: 1px 7px 22px 0 #88ae511c;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform .35s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .35s ease-in-out;
  overflow: hidden
}

.prog-hub__detail-card:hover {
  transform: translateY(-4px);
  box-shadow: 1px 10px 36px 0 #88ae511a
}

.prog-hub__detail-card:hover .prog-hub__detail-img {
  transform: scale(1.06)
}

.prog-hub__detail-num {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #88AE51;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em
}

.prog-hub__detail-visual {
  width: 100%;
  height: 180px;
  border-radius: 8px;
  overflow: hidden
}

.prog-hub__detail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .4s ease-in-out
}

.prog-hub__detail-heading {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: .01em;
  margin: 0;
  color: #88AE51;
  -webkit-text-stroke: 1px #88AE51;
  -webkit-text-fill-color: transparent;
  font-weight: 600
}

.prog-hub__detail-text {
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .015em;
  color: #2d2d2d;
  margin: 0
}

.prog-hub__timeline-track {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 28px
}

.prog-hub__timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1
}

.prog-hub__timeline-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #C8D4B7;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background .35s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.prog-hub__timeline-icon:hover {
  background: #88AE51
}

.prog-hub__timeline-icon svg {
  width: 24px;
  height: 24px;
  fill: #fff
}

.prog-hub__timeline-label {
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: .015em;
  color: #2d2d2d;
  text-align: center;
  margin: 0
}

.prog-hub__timeline-date {
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: .015em;
  color: #88AE51;
  font-weight: 600;
  margin: 0
}

.prog-hub__timeline-connector {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, #C8D4B7 0%, #88AE51 100%);
  margin: 0 -14px
}

.prog-hub__voices {
  max-width: 1400px;
  margin: 0 auto;
  padding: 96px 28px
}

.prog-hub__voices-header {
  text-align: center;
  margin-bottom: 56px
}

.prog-hub__voices-title {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #88AE51;
  margin: 0 0 16px;
  font-weight: 600
}

.prog-hub__voices-intro {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .015em;
  color: #2d2d2d;
  margin: 0;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto
}

.prog-hub__voices-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px
}

.prog-hub__voice-item {
  background: #fff;
  border-radius: 14px;
  padding: 28px;
  box-shadow: 1px 3px 2px 0 #88ae510d;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow .38s ease-in-out;
  position: relative;
  overflow: hidden
}

.prog-hub__voice-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 80% 20%, #88ae510d 0%, transparent 60%);
  opacity: 0;
  transition: opacity .42s ease-in-out;
  pointer-events: none
}

.prog-hub__voice-item:hover::before {
  opacity: 1
}

.prog-hub__voice-item:hover {
  box-shadow: 1px 7px 22px 0 #88ae511c
}

.prog-hub__voice-profile {
  display: flex;
  align-items: center;
  gap: 16px
}

.prog-hub__voice-avatar {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0
}

.prog-hub__voice-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top
}

.prog-hub__voice-identity {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.prog-hub__voice-name {
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: .015em;
  color: #2d2d2d;
  margin: 0;
  font-weight: 600
}

.prog-hub__voice-role {
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: .015em;
  color: #88AE51;
  margin: 0
}

.prog-hub__voice-quote {
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .015em;
  color: #2d2d2d;
  margin: 0;
  font-style: italic
}

@media (max-width: 1200px) {
  .prog-hub__opener {
    grid-template-columns: 1fr;
    gap: 56px;
    padding: 56px 28px
  }

  .prog-hub__opener-visual {
    height: 420px
  }

  .prog-hub__details-grid {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .prog-hub__voices-mosaic {
    grid-template-columns: 1fr;
    gap: 28px
  }
}

@media (max-width: 992px) {
  .prog-hub__opener-title {
    font-size: 36px
  }

  .prog-hub__voices-title {
    font-size: 26px
  }

  .prog-hub__detail-heading {
    font-size: 17px
  }

  .prog-hub__timeline-track {
    flex-direction: column;
    gap: 16px
  }

  .prog-hub__timeline-connector {
    width: 2px;
    height: 28px;
    margin: -8px 0
  }
}

@media (max-width: 576px) {
  .prog-hub__opener {
    padding: 56px 16px
  }

  .prog-hub__details {
    padding: 56px 0
  }

  .prog-hub__details-wrap {
    padding: 0 16px
  }

  .prog-hub__voices {
    padding: 56px 16px
  }

  .prog-hub__opener-title {
    font-size: 26px
  }

  .prog-hub__opener-visual {
    height: 320px
  }

  .prog-hub__opener-actions {
    flex-direction: column
  }

  .prog-hub__opener-link {
    width: 100%;
    text-align: center
  }
}

.abt-us {
  max-width: 1400px;
  margin: 0 auto;
  background: #F9F9F7
}

.abt-us__opener {
  background: #88AE51;
  padding: 96px 28px;
  position: relative;
  overflow: hidden
}

.abt-us__opener-frame {
  border: 1px solid #ffffff4d;
  padding: 56px 28px;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  border-radius: 4px
}

.abt-us__opener-frame::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 1px solid #fff3;
  pointer-events: none;
  border-radius: 4px
}

.abt-us__opener-title {
  font-size: 68px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #FFF;
  margin: 0 0 28px;
  text-align: center
}

.abt-us__opener-desc {
  font-size: 26px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: #fffffff2;
  margin: 0;
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto
}

.abt-us__story {
  padding: 96px 28px;
  background: #FFF;
  position: relative
}

.abt-us__story::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  height: 1px;
  background-image: repeating-linear-gradient(90deg, transparent, transparent 8px, #88AE51 8px, #88AE51 9px, transparent 9px, transparent 17px, #88AE51 17px, #88AE51 18px, transparent 18px, transparent 26px)
}

.abt-us__story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto
}

.abt-us__story-col {
  display: flex;
  flex-direction: column;
  gap: 28px
}

.abt-us__story-card {
  background: #F9F9F7;
  padding: 28px;
  border-radius: 14px;
  box-shadow: 1px 7px 22px 0 #88ae511c;
  transition: transform .38s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .38s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.abt-us__story-card:hover {
  transform: translateY(-4px);
  box-shadow: 1px 10px 36px 0 #88ae511a
}

.abt-us__story-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 16px;
  border: 2px solid #88AE51;
  box-shadow: 1px 3px 2px 0 #88ae510d;
  transition: transform .42s ease-in-out
}

.abt-us__story-card:hover .abt-us__story-card-img {
  transform: scale(1.05)
}

.abt-us__story-card-title {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #88AE51;
  margin: 0 0 16px
}

.abt-us__story-card-text {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: #2A2A2A;
  margin: 0
}

.abt-us__story-card.tall {
  grid-row: span 2
}

.abt-us__story-card.tall .abt-us__story-card-img {
  height: 320px
}

.abt-us__approach {
  padding: 96px 28px;
  background: linear-gradient(17deg, #C8D4B7 0%, #F9F9F7 100%);
  position: relative
}

.abt-us__approach::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="n"><feTurbulence baseFrequency="0.9" numOctaves="3"/></filter><rect width="200" height="200" filter="url(%23n)" opacity="0.03"/></svg>');
  pointer-events: none
}

.abt-us__approach-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative
}

.abt-us__approach-heading {
  font-size: 50px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #88AE51;
  margin: 0 0 56px;
  text-align: center
}

.abt-us__approach-blocks {
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative
}

.abt-us__approach-blocks::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #88AE51;
  opacity: .2;
  transform: translateX(-50%);
  border-radius: 22px
}

.abt-us__approach-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center
}

.abt-us__approach-row:nth-child(even) {
  direction: ltr
}

.abt-us__approach-content {
  background: #FFF;
  padding: 28px;
  border-radius: 22px;
  box-shadow: 1px 7px 22px 0 #88ae511c;
  transition: background .35s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.abt-us__approach-content:hover {
  background: #ffffffb3;
  backdrop-filter: blur(12px)
}

.abt-us__approach-label {
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: .02em;
  color: #88AE51;
  margin: 0 0 8px;
  text-transform: uppercase;
  font-weight: 600
}

.abt-us__approach-subtitle {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #2A2A2A;
  margin: 0 0 16px
}

.abt-us__approach-text {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: #3A3A3A;
  margin: 0
}

.abt-us__approach-visual {
  position: relative
}

.abt-us__approach-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 14px;
  border: 3px solid #88AE51;
  box-shadow: 1px 10px 36px 0 #88ae511a
}

.abt-us__team {
  padding: 96px 28px;
  background: #FFF;
  position: relative
}

.abt-us__team-inner {
  max-width: 1100px;
  margin: 0 auto
}

.abt-us__team-heading {
  font-size: 50px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #88AE51;
  margin: 0 0 56px;
  text-align: center
}

.abt-us__team-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px;
  align-items: start
}

.abt-us__team-profile {
  position: relative
}

.abt-us__team-photo-wrap {
  position: relative;
  margin-bottom: 28px
}

.abt-us__team-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
  border-radius: 22px;
  border: 4px solid #88AE51;
  box-shadow: 1px 10px 36px 0 #88ae511a;
  transition: transform .4s ease-in-out
}

.abt-us__team-photo-wrap:hover .abt-us__team-photo {
  transform: scale(1.03)
}

.abt-us__team-name {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #2A2A2A;
  margin: 0 0 8px
}

.abt-us__team-role {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: #88AE51;
  margin: 0;
  font-weight: 600
}

.abt-us__team-content {
  display: flex;
  flex-direction: column;
  gap: 28px
}

.abt-us__team-section {
  background: #F9F9F7;
  padding: 28px;
  border-radius: 14px;
  box-shadow: 1px 3px 2px 0 #88ae510d;
  opacity: 0;
  filter: blur(8px);
  animation: abt-us-reveal .7s ease-in-out forwards
}

.abt-us__team-section:nth-child(1) {
  animation-delay: .1s
}

.abt-us__team-section:nth-child(2) {
  animation-delay: .2s
}

.abt-us__team-section:nth-child(3) {
  animation-delay: .3s
}

@keyframes abt-us-reveal {
  to {
    opacity: 1;
    filter: blur(0)
  }
}

.abt-us__team-section-title {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #88AE51;
  margin: 0 0 16px
}

.abt-us__team-section-text {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: #2A2A2A;
  margin: 0
}

.abt-us__team-section-text+.abt-us__team-section-text {
  margin-top: 16px
}

.abt-us__values {
  padding: 96px 28px;
  background: #88AE51;
  position: relative
}

.abt-us__values::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, transparent 0, transparent 12px, #ffffff4d 12px, #ffffff4d 13px, transparent 13px, transparent 16px, #ffffff4d 16px, #ffffff4d 18px, transparent 18px, transparent 30px)
}

.abt-us__values-inner {
  max-width: 1200px;
  margin: 0 auto
}

.abt-us__values-heading {
  font-size: 50px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #FFF;
  margin: 0 0 56px;
  text-align: center
}

.abt-us__values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px
}

.abt-us__value-card {
  background: #fffffff2;
  padding: 28px;
  border-radius: 14px;
  box-shadow: 1px 7px 22px 0 #00000014;
  transition: transform .35s cubic-bezier(0.34, 1.2, 0.64, 1), background .35s cubic-bezier(0.34, 1.2, 0.64, 1);
  position: relative
}

.abt-us__value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #C8D4B7;
  border-radius: 14px 14px 0 0;
  transition: height .4s ease-in-out
}

.abt-us__value-card:hover {
  transform: translateY(-6px);
  background: #ffffffd9;
  backdrop-filter: blur(10px)
}

.abt-us__value-card:hover::before {
  height: 8px
}

.abt-us__value-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #C8D4B7;
  border-radius: 8px
}

.abt-us__value-icon svg {
  width: 32px;
  height: 32px;
  fill: #88AE51
}

.abt-us__value-title {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #88AE51;
  margin: 0 0 16px
}

.abt-us__value-text {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: #2A2A2A;
  margin: 0
}

.abt-us__metrics {
  padding: 96px 28px;
  background: linear-gradient(17deg, #F9F9F7 0%, #FFF 100%);
  position: relative
}

.abt-us__metrics-inner {
  max-width: 1100px;
  margin: 0 auto
}

.abt-us__metrics-intro {
  text-align: center;
  margin-bottom: 56px
}

.abt-us__metrics-heading {
  font-size: 50px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #88AE51;
  margin: 0 0 28px
}

.abt-us__metrics-subheading {
  font-size: 26px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: #3A3A3A;
  margin: 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto
}

.abt-us__metrics-display {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px
}

.abt-us__metric {
  background: #FFF;
  padding: 28px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 1px 3px 2px 0 #88ae510d;
  border: 2px solid transparent;
  transition: border-color .38s cubic-bezier(0.34, 1.2, 0.64, 1), transform .38s cubic-bezier(0.34, 1.2, 0.64, 1);
  position: relative;
  overflow: hidden
}

.abt-us__metric::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #88ae511a, transparent);
  transition: left .45s ease-in-out
}

.abt-us__metric:hover::before {
  left: 100%
}

.abt-us__metric:hover {
  border-color: #88AE51;
  transform: translateY(-4px)
}

.abt-us__metric-number {
  font-size: 68px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #88AE51;
  margin: 0 0 8px;
  font-weight: 700
}

.abt-us__metric-label {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: #2A2A2A;
  margin: 0
}

.abt-us__connection {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  z-index: 1
}

.abt-us__connection svg {
  width: 100%;
  height: 100px;
  position: absolute;
  top: -50px
}

.abt-us__connection path {
  fill: none;
  stroke: #C8D4B7;
  stroke-width: 2;
  stroke-dasharray: 8 4;
  opacity: .6
}

@media (max-width: 1200px) {
  .abt-us__story-grid {
    grid-template-columns: 1fr 1fr
  }

  .abt-us__story-card.tall {
    grid-row: auto
  }

  .abt-us__story-card.tall .abt-us__story-card-img {
    height: 220px
  }

  .abt-us__values-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .abt-us__metrics-display {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width: 992px) {
  .abt-us__opener {
    padding: 56px 16px
  }

  .abt-us__opener-frame {
    padding: 28px 16px
  }

  .abt-us__opener-title {
    font-size: 50px
  }

  .abt-us__opener-desc {
    font-size: 17px
  }

  .abt-us__story {
    padding: 56px 16px
  }

  .abt-us__approach {
    padding: 56px 16px
  }

  .abt-us__approach-heading {
    font-size: 36px;
    margin-bottom: 28px
  }

  .abt-us__approach-row {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .abt-us__approach-blocks::before {
    display: none
  }

  .abt-us__team {
    padding: 56px 16px
  }

  .abt-us__team-heading {
    font-size: 36px;
    margin-bottom: 28px
  }

  .abt-us__team-layout {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .abt-us__values {
    padding: 56px 16px
  }

  .abt-us__values-heading {
    font-size: 36px;
    margin-bottom: 28px
  }

  .abt-us__metrics {
    padding: 56px 16px
  }

  .abt-us__metrics-heading {
    font-size: 36px
  }

  .abt-us__metrics-subheading {
    font-size: 17px
  }
}

@media (max-width: 576px) {
  .abt-us__opener-title {
    font-size: 36px
  }

  .abt-us__opener-desc {
    font-size: 15px
  }

  .abt-us__story-grid {
    grid-template-columns: 1fr
  }

  .abt-us__values-grid {
    grid-template-columns: 1fr
  }

  .abt-us__metrics-display {
    grid-template-columns: 1fr
  }

  .abt-us__metric-number {
    font-size: 50px
  }
}

.cmpr {
  background: #F9F9F7;
  color: #2a2a2a;
  overflow-x: clip
}

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

.cmpr ::selection {
  background: #C8D4B7;
  color: #1a1a1a
}

.cmpr .cmpr__title-wrap {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 56px 28px;
  background: conic-gradient(from 17deg, #88AE51, #C8D4B7, #F9F9F7, #88AE51);
  min-height: 420px;
  display: flex;
  align-items: center;
  border-radius: 22px;
  margin-top: 28px
}

.cmpr .cmpr__title-inner {
  position: relative;
  z-index: 2;
  max-width: 680px
}

.cmpr .cmpr__title-eyebrow {
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: #2a2a2a;
  margin: 0 0 16px;
  text-transform: uppercase;
  font-weight: 600
}

.cmpr .cmpr__title-main {
  font-size: 68px;
  line-height: 1.15;
  letter-spacing: .01em;
  margin: 0;
  color: #2a2a2a;
  font-weight: 700
}

.cmpr .cmpr__title-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden
}

.cmpr .cmpr__title-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

.cmpr .cmpr__title-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #88ae51eb, #c8d4b7bf);
  border-radius: 22px
}

.cmpr .cmpr__title-dots {
  position: absolute;
  bottom: 28px;
  right: 28px;
  display: flex;
  gap: 8px;
  z-index: 1
}

.cmpr .cmpr__title-dot {
  width: 8px;
  height: 8px;
  background: #88AE51;
  border-radius: 1px;
  animation: cmpr-pulse 2.1s cubic-bezier(0.34, 1.2, 0.64, 1) infinite
}

.cmpr .cmpr__title-dot:nth-child(2) {
  animation-delay: .3s
}

.cmpr .cmpr__title-dot:nth-child(3) {
  animation-delay: .6s
}

.cmpr .cmpr__title-dot:nth-child(4) {
  animation-delay: .9s
}

@keyframes cmpr-pulse {

  0%,
  100% {
    box-shadow: 1px 3px 2px 0 #88ae510d
  }

  50% {
    box-shadow: 1px 10px 36px 0 #88ae511a
  }
}

.cmpr .cmpr__compare-section {
  max-width: 1400px;
  margin: 96px auto 0;
  padding: 0 28px 96px
}

.cmpr .cmpr__compare-intro {
  max-width: 880px;
  margin: 0 auto 56px;
  text-align: center
}

.cmpr .cmpr__compare-intro-title {
  font-size: 50px;
  line-height: 1.15;
  letter-spacing: .01em;
  margin: 0 0 28px;
  color: #2a2a2a;
  font-weight: 700
}

.cmpr .cmpr__compare-intro-text {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .01em;
  margin: 0;
  color: #3a3a3a
}

.cmpr .cmpr__compare-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-bottom: 56px
}

.cmpr .cmpr__compare-card {
  background: #fff;
  border: 1px solid #C8D4B7;
  border-radius: 14px;
  padding: 28px;
  position: relative;
  transition: transform .38s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .38s cubic-bezier(0.34, 1.2, 0.64, 1);
  box-shadow: 1px 3px 2px 0 #88ae510d
}

.cmpr .cmpr__compare-card:hover {
  transform: translateY(-4px);
  box-shadow: 1px 10px 36px 0 #88ae511a
}

.cmpr .cmpr__compare-card-accent {
  position: absolute;
  top: 0;
  right: 28px;
  width: 4px;
  height: 56px;
  background: #88AE51;
  border-radius: 0 0 4px 4px
}

.cmpr .cmpr__compare-card-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 22px;
  background: #88AE51;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 16px;
  position: relative;
  box-shadow: 1px 7px 22px 0 #88ae511c;
  animation: cmpr-shadow-pulse 3.2s ease-in-out infinite
}

@keyframes cmpr-shadow-pulse {

  0%,
  100% {
    box-shadow: 1px 7px 22px 0 #88ae511c
  }

  50% {
    box-shadow: 1px 10px 36px 0 #88ae512e
  }
}

.cmpr .cmpr__compare-card-icon-wrap::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid #C8D4B7;
  border-radius: 22px
}

.cmpr .cmpr__compare-card-icon {
  width: 28px;
  height: 28px;
  fill: #fff
}

.cmpr .cmpr__compare-card-title {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: .01em;
  margin: 0 0 16px;
  color: #2a2a2a;
  font-weight: 600
}

.cmpr .cmpr__compare-card-desc {
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .01em;
  margin: 0;
  color: #4a4a4a
}

.cmpr .cmpr__comparison-table-wrap {
  background: #fff;
  border: 1px solid #C8D4B7;
  border-radius: 14px;
  padding: 56px;
  box-shadow: 1px 7px 22px 0 #88ae511c;
  overflow: hidden
}

.cmpr .cmpr__comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0
}

.cmpr .cmpr__comparison-table thead {
  background: linear-gradient(135deg, #88AE51, #C8D4B7)
}

.cmpr .cmpr__comparison-table th {
  padding: 28px 16px;
  text-align: left;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: .02em;
  color: #fff;
  font-weight: 700;
  border-bottom: 2px solid #88AE51
}

.cmpr .cmpr__comparison-table th:first-child {
  border-radius: 14px 0 0 0
}

.cmpr .cmpr__comparison-table th:last-child {
  border-radius: 0 14px 0 0
}

.cmpr .cmpr__comparison-table tbody tr {
  transition: background .35s ease-in-out
}

.cmpr .cmpr__comparison-table tbody tr:hover {
  background: #c8d4b726
}

.cmpr .cmpr__comparison-table td {
  padding: 28px 16px;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .01em;
  color: #3a3a3a;
  border-bottom: 1px solid #C8D4B7;
  position: relative
}

.cmpr .cmpr__comparison-table tbody tr:last-child td {
  border-bottom: none
}

.cmpr .cmpr__comparison-table td:first-child {
  font-weight: 600;
  color: #2a2a2a
}

.cmpr .cmpr__comparison-check {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: #88AE51;
  border-radius: 4px;
  position: relative;
  box-shadow: inset 0 1px 3px #fff6
}

.cmpr .cmpr__comparison-check::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg)
}

.cmpr .cmpr__comparison-cross {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: #e8e8e8;
  border-radius: 4px;
  position: relative
}

.cmpr .cmpr__comparison-cross::before,
.cmpr .cmpr__comparison-cross::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 4px;
  width: 2px;
  height: 14px;
  background: #6a6a6a
}

.cmpr .cmpr__comparison-cross::before {
  transform: rotate(45deg)
}

.cmpr .cmpr__comparison-cross::after {
  transform: rotate(-45deg)
}

.cmpr .cmpr__divider-wave {
  position: relative;
  height: 96px;
  overflow: hidden
}

.cmpr .cmpr__divider-wave svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 96px
}

.cmpr .cmpr__testimonial-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 96px 28px;
  background: #fff;
  border-radius: 22px;
  position: relative;
  overflow: hidden
}

.cmpr .cmpr__testimonial-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #88AE51, #C8D4B7, #88AE51)
}

.cmpr .cmpr__testimonial-title {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: .01em;
  margin: 0 0 56px;
  text-align: center;
  color: #2a2a2a;
  font-weight: 700
}

.cmpr .cmpr__testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px;
  align-items: start
}

.cmpr .cmpr__testimonial-content {
  position: relative
}

.cmpr .cmpr__testimonial-quote {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .01em;
  margin: 0 0 28px;
  color: #3a3a3a;
  font-style: italic
}

.cmpr .cmpr__testimonial-author-wrap {
  display: flex;
  align-items: center;
  gap: 16px
}

.cmpr .cmpr__testimonial-author-img-wrap {
  width: 80px;
  height: 106px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 1px 7px 22px 0 #88ae511c
}

.cmpr .cmpr__testimonial-author-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top
}

.cmpr .cmpr__testimonial-author-info {
  flex-grow: 1
}

.cmpr .cmpr__testimonial-author-name {
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: .01em;
  margin: 0 0 8px;
  color: #2a2a2a;
  font-weight: 700
}

.cmpr .cmpr__testimonial-author-role {
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .01em;
  margin: 0;
  color: #5a5a5a
}

.cmpr .cmpr__testimonial-visual {
  position: relative
}

.cmpr .cmpr__testimonial-img-wrap {
  width: 100%;
  height: 480px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: 1px 10px 36px 0 #88ae511a;
  transition: transform .42s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.cmpr .cmpr__testimonial-img-wrap:hover {
  transform: scale(1.03)
}

.cmpr .cmpr__testimonial-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

.cmpr .cmpr__testimonial-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #88ae5126;
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
  transition: clip-path .45s cubic-bezier(0.34, 1.2, 0.64, 1);
  pointer-events: none
}

.cmpr .cmpr__testimonial-img-wrap:hover .cmpr__testimonial-mask {
  clip-path: polygon(0 0, 100% 0, 100% 100%)
}

@media (max-width: 1200px) {
  .cmpr .cmpr__title-main {
    font-size: 50px
  }

  .cmpr .cmpr__compare-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .cmpr .cmpr__comparison-table-wrap {
    padding: 28px
  }

  .cmpr .cmpr__testimonial-grid {
    gap: 28px
  }
}

@media (max-width: 992px) {
  .cmpr .cmpr__title-wrap {
    padding: 28px 16px;
    min-height: 320px
  }

  .cmpr .cmpr__title-main {
    font-size: 36px
  }

  .cmpr .cmpr__compare-intro-title {
    font-size: 36px
  }

  .cmpr .cmpr__compare-section {
    margin: 56px auto 0;
    padding: 0 16px 56px
  }

  .cmpr .cmpr__testimonial-section {
    padding: 56px 16px
  }

  .cmpr .cmpr__testimonial-title {
    font-size: 26px;
    margin: 0 0 28px
  }

  .cmpr .cmpr__testimonial-grid {
    grid-template-columns: 1fr
  }

  .cmpr .cmpr__testimonial-img-wrap {
    height: 360px
  }
}

@media (max-width: 576px) {
  .cmpr .cmpr__title-wrap {
    margin-top: 16px;
    border-radius: 14px
  }

  .cmpr .cmpr__title-main {
    font-size: 26px
  }

  .cmpr .cmpr__title-eyebrow {
    font-size: 15px;
    margin: 0 0 8px
  }

  .cmpr .cmpr__compare-intro-title {
    font-size: 26px;
    margin: 0 0 16px
  }

  .cmpr .cmpr__compare-grid {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .cmpr .cmpr__compare-card {
    padding: 16px
  }

  .cmpr .cmpr__comparison-table-wrap {
    padding: 16px;
    overflow-x: auto
  }

  .cmpr .cmpr__comparison-table th,
  .cmpr .cmpr__comparison-table td {
    padding: 16px 8px;
    font-size: 15px
  }

  .cmpr .cmpr__comparison-table th:first-child,
  .cmpr .cmpr__comparison-table th:last-child {
    border-radius: 8px 8px 0 0
  }

  .cmpr .cmpr__testimonial-section {
    padding: 28px 16px;
    border-radius: 14px
  }

  .cmpr .cmpr__testimonial-img-wrap {
    height: 280px
  }
}

.opening {
  background: #F9F9F7;
  color: #1d1d1d;
  overflow-x: clip
}

.opening__launch {
  position: relative;
  padding: 96px 16px;
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden
}

.opening__launch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center
}

.opening__frame {
  position: relative;
  border: 1px solid #88ae5126;
  border-radius: 14px;
  padding: 28px;
  background: linear-gradient(17deg, #c8d4b714, #f9f9f7f2);
  box-shadow: 1px 7px 22px 0 #88ae511c;
  overflow: hidden
}

.opening__frame::before {
  content: '';
  position: absolute;
  top: -120px;
  left: -80px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, #88ae511f, transparent 65%);
  border-radius: 50%;
  filter: blur(56px);
  pointer-events: none
}

.opening__frame::after {
  content: '';
  position: absolute;
  bottom: -100px;
  right: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, #c8d4b72e, transparent 60%);
  border-radius: 50%;
  filter: blur(48px);
  pointer-events: none
}

.opening__portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 5/7;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: inset 0 0 24px #88ae5114
}

.opening__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  filter: blur(0);
  transition: filter .38s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.opening__portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, #f9f9f759 100%);
  pointer-events: none;
  z-index: 1
}

.opening__content {
  position: relative;
  z-index: 2
}

.opening__headline {
  font-size: 50px;
  line-height: 1.15;
  letter-spacing: .01em;
  margin: 0 0 28px;
  color: #2a2a2a
}

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

.opening__benefits li {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .015em;
  padding-left: 36px;
  position: relative;
  color: #3a3a3a
}

.opening__benefits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 18px;
  background: conic-gradient(from 17deg, #88AE51, #C8D4B7, #88AE51);
  border-radius: 50%;
  box-shadow: 0 0 8px #88ae514d
}

.opening__circles {
  position: absolute;
  bottom: 28px;
  right: 28px;
  width: 160px;
  height: 160px;
  opacity: .08;
  pointer-events: none
}

.opening__circles::before,
.opening__circles::after {
  content: '';
  position: absolute;
  border: 1px solid #88AE51;
  border-radius: 50%
}

.opening__circles::before {
  inset: 0
}

.opening__circles::after {
  inset: 20px
}

.opening__trust {
  padding: 96px 16px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative
}

.opening__trust::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 1px;
  background: repeating-linear-gradient(to right, #88AE51 0px, #88AE51 4px, transparent 4px, transparent 12px)
}

.opening__trust-header {
  text-align: center;
  margin-bottom: 56px
}

.opening__trust-title {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: .012em;
  margin: 0 0 16px;
  color: #2a2a2a
}

.opening__trust-intro {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .015em;
  color: #4a4a4a;
  max-width: 720px;
  margin: 0 auto
}

.opening__credentials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px
}

.opening__credential {
  background: #fff;
  border: 1px solid #88ae511f;
  border-radius: 14px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: transform .42s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .42s ease-in-out;
  box-shadow: 1px 3px 2px 0 #88ae510d
}

.opening__credential:hover {
  transform: translateY(-4px);
  box-shadow: 1px 10px 36px 0 #88ae511a
}

.opening__credential::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: conic-gradient(from 17deg, #88AE51, #C8D4B7);
  opacity: 0;
  transition: opacity .38s ease-in-out
}

.opening__credential:hover::before {
  opacity: 1
}

.opening__credential-label {
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #88AE51;
  margin: 0 0 8px;
  font-weight: 600
}

.opening__credential-detail {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: .012em;
  margin: 0 0 16px;
  color: #2a2a2a
}

.opening__credential-text {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .015em;
  color: #4a4a4a;
  margin: 0
}

.opening__pulse {
  animation: pulse-glow 3.2s cubic-bezier(0.34, 1.2, 0.64, 1) infinite
}

@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 1px 3px 2px 0 #88ae510d
  }

  50% {
    box-shadow: 1px 7px 22px 0 #88ae512e
  }
}

.opening__offerings {
  padding: 96px 16px;
  max-width: 1400px;
  margin: 0 auto;
  background: radial-gradient(ellipse at center, #c8d4b70f, transparent 72%);
  position: relative
}

.opening__offerings::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 1px;
  background: repeating-linear-gradient(to right, #C8D4B7 0px, #C8D4B7 4px, transparent 4px, transparent 12px)
}

.opening__offerings-lead {
  margin-bottom: 56px
}

.opening__offerings-question {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: .012em;
  margin: 0 0 16px;
  color: #2a2a2a
}

.opening__offerings-answer {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .015em;
  color: #4a4a4a;
  margin: 0;
  max-width: 840px
}

.opening__tracks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px
}

.opening__track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start
}

.opening__track-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 1px 7px 22px 0 #88ae511c
}

.opening__track-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.opening__track-visual:hover img {
  transform: scale(1.08)
}

.opening__track-details {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.opening__track-name {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: .012em;
  margin: 0;
  color: #2a2a2a
}

.opening__track-description {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .015em;
  color: #4a4a4a;
  margin: 0
}

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

.opening__track-points li {
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .015em;
  color: #5a5a5a;
  padding-left: 24px;
  position: relative
}

.opening__track-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background: #88AE51;
  border-radius: 1px;
  transform: rotate(45deg)
}

.opening__concern {
  padding: 96px 16px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative
}

.opening__concern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 1px;
  background: repeating-linear-gradient(to right, #88AE51 0px, #88AE51 4px, transparent 4px, transparent 12px)
}

.opening__concern-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: start
}

.opening__concern-text {
  order: 2
}

.opening__concern-heading {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: .012em;
  margin: 0 0 28px;
  color: #2a2a2a
}

.opening__concern-body {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .015em;
  color: #4a4a4a;
  margin: 0 0 28px
}

.opening__concern-resolution {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .015em;
  color: #4a4a4a;
  margin: 0
}

.opening__concern-image {
  order: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 16/11;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 1px 10px 36px 0 #88ae511a
}

.opening__concern-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease-in-out
}

.opening__concern-image:hover img {
  transform: scale(1.06)
}

.opening__concern-circles {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 120px;
  height: 120px;
  opacity: .06;
  pointer-events: none
}

.opening__concern-circles::before,
.opening__concern-circles::after {
  content: '';
  position: absolute;
  border: 1px solid #C8D4B7;
  border-radius: 50%
}

.opening__concern-circles::before {
  inset: 0
}

.opening__concern-circles::after {
  inset: 16px
}

@media (min-width: 576px) {
  .opening__launch-grid {
    grid-template-columns: 320px 1fr;
    gap: 56px
  }

  .opening__credentials {
    grid-template-columns: repeat(2, 1fr)
  }

  .opening__track {
    grid-template-columns: 1fr 1fr;
    gap: 56px
  }

  .opening__track:nth-child(even) .opening__track-visual {
    order: 2
  }

  .opening__track:nth-child(even) .opening__track-details {
    order: 1
  }

  .opening__concern-layout {
    grid-template-columns: 1fr 1fr;
    gap: 56px
  }

  .opening__concern-text {
    order: 1
  }

  .opening__concern-image {
    order: 2
  }
}

@media (min-width: 992px) {
  .opening__launch {
    padding: 96px 28px
  }

  .opening__launch-grid {
    grid-template-columns: 380px 1fr;
    gap: 96px
  }

  .opening__headline {
    font-size: 68px
  }

  .opening__trust {
    padding: 96px 28px
  }

  .opening__credentials {
    grid-template-columns: repeat(3, 1fr)
  }

  .opening__offerings {
    padding: 96px 28px
  }

  .opening__offerings-question {
    font-size: 50px
  }

  .opening__track {
    gap: 96px
  }

  .opening__concern {
    padding: 96px 28px
  }

  .opening__concern-heading {
    font-size: 50px
  }
}

@media (min-width: 1200px) {
  .opening__launch-grid {
    grid-template-columns: 420px 1fr
  }

  .opening__credentials {
    grid-template-columns: repeat(3, 1fr);
    gap: 56px
  }
}

.opening ::selection {
  background: #C8D4B7;
  color: #1d1d1d
}

.opening__reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  animation: reveal-scale .85s cubic-bezier(0.34, 1.2, 0.64, 1) forwards
}

.opening__reveal-scale:nth-child(1) {
  animation-delay: .1s
}

.opening__reveal-scale:nth-child(2) {
  animation-delay: .25s
}

.opening__reveal-scale:nth-child(3) {
  animation-delay: .4s
}

@keyframes reveal-scale {
  to {
    opacity: 1;
    transform: scale(1)
  }
}

.opening__slide-btn {
  display: inline-block;
  padding: 16px 28px;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: .015em;
  color: #88AE51;
  background: transparent;
  border: 1px solid #88AE51;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .35s cubic-bezier(0.34, 1.2, 0.64, 1);
  text-decoration: none
}

.opening__slide-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #88AE51;
  transition: left .4s ease-in-out;
  z-index: -1
}

.opening__slide-btn:hover {
  color: #fff
}

.opening__slide-btn:hover::before {
  left: 0
}

.success-page {
  background: linear-gradient(17deg, #F9F9F7 0%, #C8D4B7 100%);
  min-height: 100vh;
  padding: 96px 16px;
  display: flex;
  align-items: center;
  justify-content: center
}

.success-page .success-container {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  padding: 56px 28px;
  border-radius: 14px;
  box-shadow: 1px 10px 36px 0 #88ae511a;
  text-align: center
}

.success-page .icon-wrapper {
  width: 112px;
  height: 112px;
  margin: 0 auto 28px;
  background: linear-gradient(17deg, #88AE51 0%, #C8D4B7 100%);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative
}

.success-page .icon-wrapper::before {
  content: '';
  position: absolute;
  inset: 8px;
  background: #fff;
  border-radius: 14px
}

.success-page .check-mark {
  width: 56px;
  height: 56px;
  position: relative;
  z-index: 1
}

.success-page .check-mark svg {
  width: 100%;
  height: 100%;
  stroke: #88AE51;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}

.success-page .success-title {
  font-size: 50px;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #88AE51;
  margin: 0 0 16px
}

.success-page .success-message {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: #2d2d2d;
  margin: 0 0 28px
}

.success-page .info-block {
  background: #F9F9F7;
  padding: 28px;
  border-radius: 8px;
  margin: 0 0 28px;
  text-align: left
}

.success-page .info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid #C8D4B7
}

.success-page .info-row:last-child {
  border-bottom: none
}

.success-page .info-label {
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: #666
}

.success-page .info-value {
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: #2d2d2d;
  font-weight: 600
}

.success-page .action-group {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap
}

.success-page .btn-primary {
  background: transparent;
  color: #88AE51;
  border: 2px solid #88AE51;
  padding: 16px 28px;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: .01em;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: color .38s cubic-bezier(0.34, 1.2, 0.64, 1)
}

.success-page .btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #88AE51;
  transition: left .42s cubic-bezier(0.34, 1.2, 0.64, 1);
  z-index: -1
}

.success-page .btn-primary:hover::before {
  left: 0
}

.success-page .btn-primary:hover {
  color: #fff
}

.success-page .btn-secondary {
  background: transparent;
  color: #666;
  border: none;
  padding: 16px 28px;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: .01em;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: color .35s ease-in-out
}

.success-page .btn-secondary:hover {
  color: #88AE51
}

.success-page .note-text {
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: #666;
  margin: 28px 0 0
}

.success-page .contact-link {
  color: #88AE51;
  text-decoration: none;
  transition: opacity .33s ease-in-out
}

.success-page .contact-link:hover {
  opacity: .7
}

@media (max-width: 576px) {
  .success-page {
    padding: 56px 16px
  }

  .success-page .success-container {
    padding: 28px 16px
  }

  .success-page .success-title {
    font-size: 36px
  }

  .success-page .action-group {
    flex-direction: column
  }

  .success-page .btn-primary,
  .success-page .btn-secondary {
    width: 100%
  }

  .success-page .info-row {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start
  }
}