html {
  box-sizing: border-box
}

*,
:before,
:after {
  box-sizing: inherit
}

body {
  margin: 0;
  scrollbar-gutter: stable;
  min-height: 100vh;
  font-family: 'Fira Code', monospace;
  background: #F7F5EE;
  color: #191616
}

.topbar {
  background: linear-gradient(135deg, #fff 0%, #F7F5EE 100%);
  border-bottom: 2px solid #C4BA8D;
  padding: 24px 36px;
  position: relative
}

.topbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #C4BA8D 0%, #F7F5EE 50%, #C4BA8D 100%);
  opacity: .6
}

.topbar_inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items: center
}

.brandblock {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.logowrap {
  width: 68px;
  height: 68px;
  border: 3px solid #191616;
  padding: 8px;
  background: #fff;
  box-shadow: 0 6px 20px -2px #19161617;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center
}

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

.tagline {
  font-size: 14px;
  color: #191616;
  line-height: 1.65;
  font-weight: 300;
  letter-spacing: .02em;
  max-width: 420px
}

.tagnav {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-end
}

.headnav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: flex-end;
  align-items: center
}

.headnav a {
  font-size: 14px;
  color: #191616;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 36px;
  background: #fff;
  border: 1px solid #C4BA8D;
  transition: background-color .28s cubic-bezier(0.4, 0, 0.2, 1), border-color .28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .28s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 400;
  box-shadow: 0 2px 4px -2px #19161614
}

.headnav a:hover {
  background: #F7F5EE;
  border-color: #191616;
  box-shadow: 0 6px 20px -2px #19161617 0 0 0 1px #191616 inset
}

.headnav a:focus {
  outline: 2px dashed #191616;
  outline-offset: 4px
}

.regionpick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #C4BA8D;
  border-radius: 12px;
  font-size: 14px;
  color: #191616;
  cursor: pointer;
  transition: border-color .22s ease-out, box-shadow .22s ease-out;
  box-shadow: 0 2px 4px -2px #19161614
}

.regionpick:hover {
  border-color: #191616;
  box-shadow: 0 6px 20px -2px #19161617
}

.regionpick svg {
  width: 18px;
  height: 18px;
  fill: #191616
}

.basefoot {
  background: linear-gradient(180deg, #fff 0%, #F7F5EE 100%);
  border-top: 2px solid #C4BA8D;
  padding: 72px 36px 36px;
  position: relative
}

.basefoot::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #C4BA8D 0%, #F7F5EE 50%, #C4BA8D 100%);
  opacity: .6
}

.footgrid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 72px;
  margin-bottom: 72px
}

.footcol h3 {
  font-size: 21px;
  font-weight: 500;
  margin: 0 0 24px;
  color: #191616;
  line-height: 1.15;
  position: relative;
  padding-bottom: 12px
}

.footcol h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 2px;
  background: #C4BA8D
}

.footcol ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.footcol ul li a {
  font-size: 14px;
  color: #191616;
  text-decoration: none;
  line-height: 1.65;
  transition: color .18s ease-out;
  display: inline-block;
  position: relative
}

.footcol ul li a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #C4BA8D;
  transition: width .35s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.footcol ul li a:hover::after {
  width: 100%
}

.footcol ul li a:focus {
  outline: 2px dashed #191616;
  outline-offset: 4px
}

.footcol.tall {
  grid-row: span 1
}

.footcol.tall ul {
  gap: 16px
}

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

.contactitem {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.65;
  color: #191616
}

.contactitem svg {
  width: 20px;
  height: 20px;
  fill: #C4BA8D;
  flex-shrink: 0;
  margin-top: 2px
}

.contactitem a {
  color: #191616;
  text-decoration: none;
  border-bottom: 1px solid #C4BA8D;
  transition: border-color .2s ease-out
}

.contactitem a:hover {
  border-color: #191616
}

.footbottom {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 36px;
  border-top: 1px solid #C4BA8D;
  gap: 36px;
  flex-wrap: wrap
}

.footlogo {
  width: 52px;
  height: 52px;
  border: 2px solid #191616;
  padding: 8px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px -2px #19161614
}

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

.copyright {
  font-size: 14px;
  color: #191616;
  line-height: 1.65;
  font-weight: 300
}

.footlinks {
  display: flex;
  gap: 24px;
  flex-wrap: wrap
}

.footlinks a {
  font-size: 14px;
  color: #191616;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: border-color .25s ease-out, background-color .25s ease-out
}

.footlinks a:hover {
  border-color: #C4BA8D;
  background: #fff
}

.footlinks a:focus {
  outline: 2px dashed #191616;
  outline-offset: 4px
}

@media (max-width: 900px) {
  .topbar_inner {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .tagnav {
    align-items: flex-start
  }

  .headnav {
    justify-content: flex-start
  }

  .footgrid {
    grid-template-columns: 1fr 1fr;
    gap: 36px
  }

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

@media (max-width: 600px) {
  .topbar {
    padding: 24px
  }

  .basefoot {
    padding: 36px 24px 24px
  }

  .footgrid {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-bottom: 36px
  }

  .headnav {
    flex-direction: column;
    align-items: stretch
  }

  .headnav a {
    text-align: center
  }
}

.doc-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 24px;
  background: #fff
}

.doc-inner p {
  font-size: 21px;
  line-height: 1.65;
  color: #191616;
  margin-bottom: 24px
}

.doc-inner p:last-child {
  margin-bottom: 0
}

.doc-inner strong,
.doc-inner b {
  font-weight: 600;
  color: #191616
}

.doc-inner em,
.doc-inner i {
  font-style: italic;
  color: #191616
}

.doc-inner h1 {
  font-size: 70px;
  line-height: 1.15;
  color: #191616;
  margin-bottom: 36px
}

.doc-inner h2 {
  font-size: 54px;
  line-height: 1.15;
  color: #191616;
  margin-top: 72px;
  margin-bottom: 24px
}

.doc-inner h3 {
  font-size: 28px;
  line-height: 1.15;
  color: #191616;
  margin-top: 36px;
  margin-bottom: 24px
}

.doc-inner h4 {
  font-size: 21px;
  line-height: 1.15;
  color: #191616;
  margin-top: 24px;
  margin-bottom: 12px
}

.doc-inner ul,
.doc-inner ol {
  font-size: 21px;
  line-height: 1.65;
  color: #191616;
  margin-bottom: 24px;
  padding-left: 36px
}

.doc-inner li {
  margin-bottom: 12px
}

.doc-inner li:last-child {
  margin-bottom: 0
}

.doc-inner a {
  color: #191616;
  text-decoration: underline;
  text-decoration-color: #C4BA8D;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color .22s ease-out
}

.doc-inner a:hover {
  text-decoration-color: #191616
}

.doc-inner table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 36px;
  font-size: 21px;
  line-height: 1.65;
  background: #fff;
  box-shadow: 0 2px 4px -2px #19161614
}

.doc-inner thead {
  background: #F7F5EE
}

.doc-inner th {
  text-align: left;
  padding: 24px;
  font-weight: 600;
  color: #191616;
  border-bottom: 2px solid #C4BA8D
}

.doc-inner td {
  padding: 24px;
  color: #191616;
  border-bottom: 1px solid #F7F5EE
}

.doc-inner tbody tr:last-child td {
  border-bottom: none
}

.doc-inner tbody tr:hover {
  background: #F7F5EE;
  transition: background .18s ease-out
}

.doc-inner hr {
  border: none;
  height: 1px;
  background: #C4BA8D;
  margin: 72px 0
}

@media (max-width: 768px) {
  .doc-inner {
    padding: 36px 12px
  }

  .doc-inner h1 {
    font-size: 54px;
    margin-bottom: 24px
  }

  .doc-inner h2 {
    font-size: 28px;
    margin-top: 36px;
    margin-bottom: 12px
  }

  .doc-inner h3 {
    font-size: 21px;
    margin-top: 24px;
    margin-bottom: 12px
  }

  .doc-inner p,
  .doc-inner ul,
  .doc-inner ol,
  .doc-inner table {
    font-size: 14px
  }

  .doc-inner ul,
  .doc-inner ol {
    padding-left: 24px
  }

  .doc-inner th,
  .doc-inner td {
    padding: 12px
  }

  .doc-inner hr {
    margin: 36px 0
  }

  .doc-inner table {
    display: block;
    overflow-x: auto
  }
}

.learndetail {
  background: #FFF;
  color: #191616;
  max-width: 100%;
  overflow-x: clip
}

.learndetail .titlewrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 24px;
  text-align: center;
  position: relative
}

.learndetail .titlewrap::before,
.learndetail .titlewrap::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: linear-gradient(53deg, #C4BA8D 0%, #191616 100%);
  border-radius: 50%;
  top: 36px;
  opacity: .3;
  animation: dotfadein .38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards
}

.learndetail .titlewrap::before {
  left: 50%;
  transform: translateX(-120px)
}

.learndetail .titlewrap::after {
  right: 50%;
  transform: translateX(120px);
  animation-delay: .19s
}

@keyframes dotfadein {
  from {
    opacity: 0;
    transform: translateX(-120px) scale(0)
  }

  to {
    opacity: .3;
    transform: translateX(-120px) scale(1)
  }
}

.learndetail .maintitle {
  font-size: 54px;
  line-height: 1.15;
  margin: 0 0 24px;
  font-weight: 700
}

.learndetail .briefthesis {
  font-size: 21px;
  line-height: 1.65;
  margin: 0 auto;
  max-width: 780px;
  color: #191616
}

.learndetail .briefthesis p {
  margin: 0 0 12px
}

.learndetail .briefthesis p:last-child {
  margin: 0
}

.learndetail .heroimg {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 72px
}

.learndetail .heroimg img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #1916161f;
  border-radius: 12px;
  object-fit: cover
}

.learndetail .metacont {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 72px;
  display: flex;
  flex-direction: row;
  gap: 36px;
  align-items: flex-start;
  justify-content: space-between
}

.learndetail .metagroup {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.learndetail .metalabel {
  font-size: 14px;
  line-height: 1.65;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #19161699;
  font-weight: 600
}

.learndetail .metavalue {
  font-size: 21px;
  line-height: 1.65;
  color: #191616;
  font-weight: 600
}

.learndetail .priceval {
  font-size: 28px;
  line-height: 1.15;
  color: #C4BA8D;
  font-weight: 700
}

.learndetail .statgroup {
  display: flex;
  flex-direction: row;
  gap: 24px
}

.learndetail .statitem {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.learndetail .statnum {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  color: #191616
}

.learndetail .statlabel {
  font-size: 14px;
  line-height: 1.65;
  color: #19161699
}

.learndetail .twocolgrid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  background: radial-gradient(ellipse at center, #F7F5EE 0%, #FFF 70%);
  position: relative
}

.learndetail .twocolgrid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg width="100%" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M0 30 Q 50 10,100 30 T 200 30 T 300 30 T 400 30 T 500 30 T 600 30 T 700 30 T 800 30 T 900 30 T 1000 30 T 1100 30 T 1200 30 T 1300 30 T 1400 30 T 1500 30" stroke="%23C4BA8D" stroke-width="2" fill="none" opacity="0.2"/><path d="M0 30 Q 50 5,100 30 T 200 30 T 300 30 T 400 30 T 500 30 T 600 30 T 700 30 T 800 30 T 900 30 T 1000 30 T 1100 30 T 1200 30 T 1300 30 T 1400 30 T 1500 30" stroke="%23C4BA8D" stroke-width="2" fill="none" opacity="0.3"/></svg>') repeat-x top center;
  pointer-events: none
}

.learndetail .progcol {
  position: relative
}

.learndetail .colhead {
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-align: right;
  color: #191616
}

.learndetail .progcol h2 {
  font-size: 21px;
  line-height: 1.65;
  margin: 36px 0 12px;
  font-weight: 700;
  color: #191616;
  position: relative;
  padding-left: 24px
}

.learndetail .progcol h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(53deg, #C4BA8D 0%, #191616 100%);
  animation: underlinedraw .42s cubic-bezier(0.65, 0, 0.35, 1) .21s forwards
}

@keyframes underlinedraw {
  from {
    width: 0
  }

  to {
    width: 12px
  }
}

.learndetail .progcol h3 {
  font-size: 21px;
  line-height: 1.65;
  margin: 24px 0 12px;
  font-weight: 600;
  color: #191616
}

.learndetail .progcol p {
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 12px;
  color: #191616
}

.learndetail .progcol mark {
  background: linear-gradient(53deg, #C4BA8D 0%, #191616 100%);
  color: #FFF;
  padding: 2px 4px;
  border-radius: 4px
}

.learndetail .progcol strong {
  font-weight: 700;
  color: #191616
}

.learndetail .progcol ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px
}

.learndetail .progcol li {
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 8px;
  padding-left: 24px;
  position: relative;
  color: #191616
}

.learndetail .progcol li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: #C4BA8D;
  border-radius: 50%;
  opacity: 0;
  transform: rotate(0deg) scale(0);
  animation: checkappear .35s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards
}

.learndetail .progcol li:nth-child(1)::before {
  animation-delay: .15s
}

.learndetail .progcol li:nth-child(2)::before {
  animation-delay: .25s
}

.learndetail .progcol li:nth-child(3)::before {
  animation-delay: .35s
}

.learndetail .progcol li:nth-child(4)::before {
  animation-delay: .45s
}

.learndetail .progcol li:nth-child(5)::before {
  animation-delay: .55s
}

@keyframes checkappear {
  from {
    opacity: 0;
    transform: rotate(-90deg) scale(0)
  }

  to {
    opacity: 1;
    transform: rotate(0deg) scale(1)
  }
}

.learndetail .progcol dl {
  margin: 0 0 24px
}

.learndetail .progcol dt {
  font-size: 14px;
  line-height: 1.65;
  font-weight: 700;
  margin: 0 0 4px;
  color: #191616
}

.learndetail .progcol dd {
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 12px 24px;
  color: #191616
}

.learndetail .progcol figure {
  margin: 24px 0
}

.learndetail .progcol figcaption {
  font-size: 14px;
  line-height: 1.65;
  margin: 8px 0 0;
  color: #191616b3;
  font-style: italic
}

.learndetail .progcol details {
  margin: 0 0 12px;
  border: 1px solid #1916161f;
  border-radius: 4px;
  padding: 12px
}

.learndetail .progcol summary {
  font-size: 14px;
  line-height: 1.65;
  font-weight: 700;
  cursor: pointer;
  color: #191616
}

.learndetail .descol {
  position: relative
}

.learndetail .descol h2 {
  font-size: 21px;
  line-height: 1.65;
  margin: 36px 0 12px;
  font-weight: 700;
  color: #191616
}

.learndetail .descol p {
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 12px;
  color: #191616
}

.learndetail .descol p:first-of-type {
  font-size: 21px;
  line-height: 1.65
}

.learndetail .descol small {
  font-size: 14px;
  line-height: 1.65;
  color: #19161699
}

.learndetail .descol abbr {
  text-decoration: none;
  border-bottom: 1px dotted #C4BA8D;
  cursor: help
}

.learndetail .descol ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px
}

.learndetail .descol li {
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 8px;
  padding-left: 24px;
  position: relative;
  color: #191616
}

.learndetail .descol li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: #C4BA8D;
  border-radius: 50%
}

.learndetail .descol ol {
  list-style: decimal;
  padding-left: 24px;
  margin: 0 0 24px
}

.learndetail .descol ol li {
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 8px;
  padding-left: 8px;
  color: #191616
}

.learndetail .descol dl {
  margin: 0 0 24px
}

.learndetail .descol dt {
  font-size: 14px;
  line-height: 1.65;
  font-weight: 700;
  margin: 0 0 4px;
  color: #191616
}

.learndetail .descol dd {
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 12px 24px;
  color: #191616
}

.learndetail .descol blockquote {
  margin: 24px 0;
  padding: 24px;
  background: #F7F5EE;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 2px 4px -2px #19161614 0 6px 20px -2px #19161617
}

.learndetail .descol blockquote p {
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  color: #191616;
  font-style: italic
}

.learndetail .enrollwrap {
  max-width: 1100px;
  margin: 72px auto 0;
  padding: 0 24px;
  text-align: center
}

.learndetail .enrollbtn {
  display: inline-block;
  padding: 24px 72px;
  background: linear-gradient(53deg, #C4BA8D 0%, #191616 100%);
  color: #FFF;
  font-size: 21px;
  line-height: 1.15;
  font-weight: 700;
  text-decoration: none;
  border-radius: 36px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .28s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 6px 20px -2px #19161617 0 9px 40px -2px #19161621
}

.learndetail .enrollbtn::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #FFF;
  border-radius: 36px;
  opacity: 0;
  transition: opacity .32s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.learndetail .enrollbtn::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid #FFF;
  border-radius: 36px;
  opacity: 0;
  transition: opacity .32s cubic-bezier(0.34, 1.56, 0.64, 1) .08s
}

.learndetail .enrollbtn:hover {
  transform: translateY(-4px);
  box-shadow: 0 9px 40px -2px #19161621 0 12px 60px -2px #19161629
}

.learndetail .enrollbtn:hover::before,
.learndetail .enrollbtn:hover::after {
  opacity: 1
}

.learndetail .enrollbtn:active {
  transform: translateY(-2px);
  transition-duration: .15s
}

.learndetail .arrowdeco {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  opacity: .2;
  pointer-events: none
}

.learndetail .arrowdeco svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #C4BA8D;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.learndetail .numaccent {
  position: absolute;
  left: 24px;
  top: 24px;
  font-size: 70px;
  line-height: 1;
  font-weight: 700;
  color: #C4BA8D;
  opacity: .15;
  pointer-events: none
}

.learndetail .numaccent sup {
  font-size: 28px;
  vertical-align: super;
  margin-left: 4px
}

@media (max-width: 768px) {
  .learndetail .titlewrap {
    padding: 36px 24px
  }

  .learndetail .maintitle {
    font-size: 28px
  }

  .learndetail .briefthesis {
    font-size: 14px
  }

  .learndetail .heroimg {
    padding: 0 24px 36px
  }

  .learndetail .metacont {
    flex-direction: column;
    gap: 24px;
    padding: 0 24px 36px
  }

  .learndetail .statgroup {
    flex-direction: column;
    gap: 12px
  }

  .learndetail .twocolgrid {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 36px 24px
  }

  .learndetail .colhead {
    text-align: left
  }

  .learndetail .enrollbtn {
    padding: 12px 36px;
    font-size: 14px
  }

  .learndetail .arrowdeco {
    display: none
  }

  .learndetail .numaccent {
    font-size: 54px
  }

  .learndetail .numaccent sup {
    font-size: 21px
  }
}

.affl {
  max-width: 1100px;
  margin: 0 auto;
  background: #FFF;
  padding: 0
}

.affl .topzone {
  padding: 72px 24px 36px;
  position: relative;
  overflow: hidden;
  background: #FFF
}

.affl .topzone::before {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: #c4ba8d0f;
  top: -120px;
  right: -80px;
  pointer-events: none
}

.affl .topzone::after {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: #19161608;
  bottom: -60px;
  left: -40px;
  pointer-events: none
}

.affl .topcontent {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 36px;
  align-items: center;
  position: relative;
  z-index: 1
}

.affl .eyebrow {
  font-size: 14px;
  color: #C4BA8D;
  letter-spacing: .05em;
  margin-bottom: 12px;
  text-transform: uppercase;
  font-weight: 600
}

.affl .maintitle {
  font-size: 54px;
  line-height: 1.15;
  color: #191616;
  font-weight: 700;
  margin: 0
}

.affl .imgwrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px -2px #19161617
}

.affl .imgwrap img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
  filter: sepia(0.18) saturate(0.92);
  transition: transform .38s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.affl .imgwrap:hover img {
  transform: scale(1.04)
}

.affl .pathways {
  padding: 72px 24px;
  background: #F7F5EE;
  position: relative
}

.affl .notch {
  position: absolute;
  left: 0;
  top: 24px;
  width: 4px;
  height: 72px;
  background: linear-gradient(53deg, #C4BA8D 0%, #191616 100%);
  border-radius: 0 4px 4px 0
}

.affl .pathcontent {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: start
}

.affl .leftside {
  animation: slideUpReveal .6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards
}

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

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

.affl .sectionhead {
  font-size: 28px;
  line-height: 1.15;
  color: #191616;
  font-weight: 700;
  margin: 0 0 24px
}

.affl .bodytxt {
  font-size: 21px;
  line-height: 1.65;
  color: #191616;
  margin: 0 0 24px
}

.affl .bodytxt.large {
  font-size: 28px;
  line-height: 1.65;
  font-weight: 500;
  margin-bottom: 24px
}

.affl .rightside {
  animation: slideUpReveal .6s cubic-bezier(0.22, 0.61, 0.36, 1) .15s backwards
}

.affl .checklist {
  list-style: none;
  padding: 0;
  margin: 0
}

.affl .checklist li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 24px;
  font-size: 21px;
  line-height: 1.65;
  color: #191616
}

.affl .checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 18px;
  border: 2px solid #C4BA8D;
  border-radius: 4px;
  background: #FFF
}

.affl .checklist li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 11px;
  width: 8px;
  height: 12px;
  border-right: 2px solid #C4BA8D;
  border-bottom: 2px solid #C4BA8D;
  transform: rotate(45deg)
}

.affl .divline {
  height: 1px;
  background: #191616;
  margin: 72px auto;
  max-width: 600px;
  position: relative;
  overflow: visible
}

.affl .divline::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 #191616
}

.affl .comparison {
  padding: 72px 24px;
  background: #FFF
}

.affl .comphead {
  font-size: 28px;
  line-height: 1.15;
  color: #191616;
  font-weight: 700;
  margin: 0 0 36px;
  text-align: center
}

.affl .optgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  animation: slideUpReveal .7s cubic-bezier(0.22, 0.61, 0.36, 1) .2s backwards
}

.affl .optcard {
  border: 2px solid #F7F5EE;
  border-radius: 12px;
  padding: 36px 24px;
  background: #FFF;
  transition: all .28s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative
}

.affl .optcard:hover {
  border-color: #C4BA8D;
  box-shadow: 0 9px 40px -2px #19161621;
  transform: translateY(-4px)
}

.affl .optcard.featured {
  border-color: #191616;
  background: linear-gradient(53deg, #c4ba8d0a 0%, #f7f5ee99 100%);
  box-shadow: 0 6px 20px -2px #19161617
}

.affl .optcard.featured::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(53deg, #C4BA8D 0%, #191616 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease-out
}

.affl .optcard.featured:hover::before {
  opacity: 1
}

.affl .badge {
  display: inline-block;
  font-size: 14px;
  color: #191616;
  background: #C4BA8D;
  padding: 4px 12px;
  border-radius: 36px;
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .05em
}

.affl .optname {
  font-size: 21px;
  line-height: 1.15;
  color: #191616;
  font-weight: 700;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: .08em
}

.affl .optdesc {
  font-size: 14px;
  line-height: 1.65;
  color: #191616;
  margin: 0 0 24px
}

.affl .optfeats {
  list-style: none;
  padding: 0;
  margin: 0 0 24px
}

.affl .optfeats li {
  font-size: 14px;
  line-height: 1.65;
  color: #191616;
  margin-bottom: 8px;
  padding-left: 24px;
  position: relative
}

.affl .optfeats li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: #C4BA8D;
  border-radius: 50%
}

.affl .optprice {
  font-size: 28px;
  line-height: 1.15;
  color: #191616;
  font-weight: 700;
  margin: 0 0 24px
}

.affl .optbtn {
  display: block;
  width: 100%;
  padding: 12px 24px;
  background: #191616;
  color: #FFF;
  border: 2px solid #191616;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  transition: all .19s ease-out;
  position: relative;
  overflow: hidden
}

.affl .optbtn::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .26s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.affl .optbtn:hover {
  background: #FFF;
  color: #191616
}

.affl .optbtn:hover::before {
  border-color: #191616;
  opacity: 1
}

.affl .optcard.featured .optbtn {
  background: linear-gradient(53deg, #C4BA8D 0%, #191616 100%);
  border-color: transparent;
  color: #FFF
}

.affl .optcard.featured .optbtn:hover {
  background: #FFF;
  color: #191616;
  border-color: #191616
}

.affl .flicker {
  animation: outlineFlicker 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite
}

@keyframes outlineFlicker {

  0%,
  100% {
    outline: 1px solid #c4ba8d00;
    outline-offset: 0
  }

  25% {
    outline: 1px solid #c4ba8d26;
    outline-offset: 2px
  }

  50% {
    outline: 1px solid #c4ba8d00;
    outline-offset: 0
  }

  75% {
    outline: 1px solid #c4ba8d1f;
    outline-offset: 1px
  }
}

.affl .journey {
  padding: 72px 24px;
  background: #FFF;
  position: relative
}

.affl .journeywrap {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 72px;
  align-items: start
}

.affl .journeyleft {
  text-align: right;
  animation: slideUpReveal .65s cubic-bezier(0.22, 0.61, 0.36, 1) .25s backwards
}

.affl .journeyright {
  animation: slideUpReveal .65s cubic-bezier(0.22, 0.61, 0.36, 1) .4s backwards
}

.affl .journeyhead {
  font-size: 28px;
  line-height: 1.15;
  color: #191616;
  font-weight: 700;
  margin: 0 0 24px
}

.affl .accentword {
  position: relative;
  display: inline-block;
  color: #C4BA8D
}

.affl .accentword::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: #C4BA8D
}

.affl .corners {
  position: relative;
  padding: 36px;
  border-radius: 12px;
  background: #F7F5EE
}

.affl .corners::before,
.affl .corners::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid #C4BA8D
}

.affl .corners::before {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
  border-radius: 12px 0 0 0
}

.affl .corners::after {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
  border-radius: 0 0 12px 0
}

.affl .cornerinner {
  position: relative
}

.affl .cornerinner::before,
.affl .cornerinner::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid #C4BA8D
}

.affl .cornerinner::before {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
  border-radius: 0 12px 0 0
}

.affl .cornerinner::after {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
  border-radius: 0 0 0 12px
}

.affl .journeylist {
  list-style: none;
  padding: 0;
  margin: 0
}

.affl .journeylist li {
  font-size: 14px;
  line-height: 1.65;
  color: #191616;
  margin-bottom: 12px;
  padding-left: 28px;
  position: relative
}

.affl .journeylist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  border: 2px solid #191616;
  border-radius: 50%;
  background: #FFF
}

.affl .journeylist li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 11px;
  width: 4px;
  height: 4px;
  background: #C4BA8D;
  border-radius: 50%
}

@media (max-width: 900px) {
  .affl .topcontent {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .affl .imgwrap {
    order: -1
  }

  .affl .imgwrap img {
    height: 280px
  }

  .affl .maintitle {
    font-size: 28px
  }

  .affl .pathcontent {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .affl .optgrid {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .affl .journeywrap {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .affl .journeyleft {
    text-align: left
  }

  .affl .topzone {
    padding: 36px 24px 24px
  }

  .affl .pathways,
  .affl .comparison,
  .affl .journey {
    padding: 36px 24px
  }

  .affl .sectionhead,
  .affl .comphead,
  .affl .journeyhead {
    font-size: 21px
  }

  .affl .bodytxt.large {
    font-size: 21px
  }

  .affl .bodytxt,
  .affl .checklist li,
  .affl .optname {
    font-size: 14px
  }

  .affl .optprice {
    font-size: 21px
  }
}

.florhist {
  background: #FFF;
  color: #191616;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0
}

.florhist .titlezone {
  position: relative;
  padding: 72px 24px 36px;
  overflow: visible;
  background: linear-gradient(53deg, #C4BA8D 0%, #191616 100%)
}

.florhist .titlegrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  position: relative;
  z-index: 2
}

.florhist .titletxt {
  padding: 36px 24px;
  background: #fffffff7;
  border-radius: 12px;
  box-shadow: 0 6px 20px -2px #19161617
}

.florhist .titleh {
  font-size: 54px;
  line-height: 1.15;
  margin: 0 0 24px;
  color: #191616
}

.florhist .titledesc {
  font-size: 21px;
  line-height: 1.65;
  margin: 0 0 24px;
  color: #191616
}

.florhist .titleact {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.florhist .titlelink {
  display: inline-block;
  font-size: 21px;
  color: #191616;
  text-decoration: none;
  padding: 12px 24px;
  background: #F7F5EE;
  border-radius: 4px;
  transition: transform .28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .28s ease-out;
  position: relative;
  overflow: hidden
}

.florhist .titlelink::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid #C4BA8D;
  border-radius: 2px;
  opacity: 0;
  transition: opacity .32s ease-out
}

.florhist .titlelink:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 40px -2px #19161621
}

.florhist .titlelink:hover::before {
  opacity: 1
}

.florhist .titleimg {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 6px 20px -2px #c4ba8d17
}

.florhist .titleimgwrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden
}

.florhist .titleimgwrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, transparent 50%, #19161659 100%);
  pointer-events: none
}

.florhist .titlewave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 60px;
  background: #FFF;
  clip-path: ellipse(100% 100% at 50% 100%)
}

.florhist .graduzone {
  padding: 72px 24px;
  background: #FFF;
  position: relative;
  overflow: hidden
}

.florhist .graduzone::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle at center, #f7f5ee99 0%, transparent 70%);
  pointer-events: none;
  z-index: 1
}

.florhist .graduinner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 2
}

.florhist .graduh {
  font-size: 54px;
  line-height: 1.15;
  margin: 0 0 36px;
  text-align: center;
  animation: dropbounce .8s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

@keyframes dropbounce {
  0% {
    transform: translateY(-100px);
    opacity: 0
  }

  70% {
    transform: translateY(4px)
  }

  85% {
    transform: translateY(-2px)
  }

  100% {
    transform: translateY(0);
    opacity: 1
  }
}

.florhist .gradutxt {
  font-size: 21px;
  line-height: 1.65;
  margin: 0 0 24px;
  color: #191616
}

.florhist .gradutxt:first-of-type {
  font-size: 28px;
  line-height: 1.65
}

.florhist .availzone {
  padding: 72px 24px;
  background: #F7F5EE;
  position: relative
}

.florhist .availgrid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 36px;
  align-items: start
}

.florhist .availmain {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.florhist .availh {
  font-size: 54px;
  line-height: 1.15;
  margin: 0;
  color: #191616
}

.florhist .availtxt {
  font-size: 21px;
  line-height: 1.65;
  margin: 0;
  color: #191616
}

.florhist .availside {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.florhist .availcard {
  padding: 24px;
  background: #FFF;
  border-radius: 12px;
  box-shadow: 0 2px 4px -2px #c4ba8d14;
  transition: transform .22s ease-out, box-shadow .22s ease-out
}

.florhist .availcard:hover {
  transform: translateX(-4px);
  box-shadow: 0 9px 40px -2px #c4ba8d21
}

.florhist .availcardh {
  font-size: 21px;
  line-height: 1.15;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: #191616
}

.florhist .availcardtxt {
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  color: #191616
}

.florhist .availimg {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #C4BA8D;
  box-shadow: 0 6px 20px -2px #19161617
}

.florhist .condzone {
  padding: 72px 24px;
  background: #FFF;
  position: relative;
  overflow: hidden
}

.florhist .condpattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .03;
  pointer-events: none;
  z-index: 1;
  background-image: polygon(20% 15%, 25% 18%, 22% 22%, 18% 19%), polygon(45% 25%, 50% 28%, 47% 32%, 43% 29%), polygon(70% 35%, 75% 38%, 72% 42%, 68% 39%), polygon(15% 50%, 20% 53%, 17% 57%, 13% 54%), polygon(85% 60%, 90% 63%, 87% 67%, 83% 64%), polygon(35% 70%, 40% 73%, 37% 77%, 33% 74%), polygon(60% 80%, 65% 83%, 62% 87%, 58% 84%)
}

.florhist .condpattern svg {
  width: 100%;
  height: 100%
}

.florhist .condinner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2
}

.florhist .condh {
  font-size: 54px;
  line-height: 1.15;
  margin: 0 0 36px;
  text-align: right;
  color: #191616
}

.florhist .condlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px
}

.florhist .conditem {
  display: flex;
  align-items: start;
  gap: 12px;
  padding: 24px;
  background: #F7F5EE;
  border-radius: 12px;
  transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.florhist .conditem:hover {
  transform: translateX(8px)
}

.florhist .condcheck {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: 2px solid #C4BA8D;
  border-radius: 4px;
  position: relative;
  margin-top: 4px
}

.florhist .condcheck::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 7px;
  width: 6px;
  height: 10px;
  border: solid #191616;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg)
}

.florhist .conditemtxt {
  font-size: 21px;
  line-height: 1.65;
  margin: 0;
  color: #191616
}

.florhist .teamzone {
  padding: 72px 24px;
  background: linear-gradient(53deg, #C4BA8D 0%, #191616 100%);
  position: relative
}

.florhist .teamflex {
  display: flex;
  flex-direction: row;
  gap: 36px;
  align-items: center
}

.florhist .teamimgwrap {
  flex: 0 0 45%;
  position: relative
}

.florhist .teamimg {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: 36px;
  border: 1px solid #fff3;
  box-shadow: 0 9px 40px -2px #19161621
}

.florhist .teamcontent {
  flex: 1;
  padding: 36px;
  background: #fffffff2;
  border-radius: 12px;
  box-shadow: inset 0 2px 8px #c4ba8d26
}

.florhist .teamh {
  font-size: 54px;
  line-height: 1.15;
  margin: 0 0 24px;
  color: #191616
}

.florhist .teamtxt {
  font-size: 21px;
  line-height: 1.65;
  margin: 0 0 24px;
  color: #191616
}

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

.florhist .teamlistitem {
  font-size: 14px;
  line-height: 1.65;
  color: #191616;
  padding-left: 24px;
  position: relative
}

.florhist .teamlistitem::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 12px;
  height: 2px;
  background: #C4BA8D
}

.florhist .valuezone {
  padding: 72px 24px;
  background: #FFF;
  position: relative
}

.florhist .valuedots {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 4px;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 24px
}

.florhist .valuedot {
  width: 4px;
  height: 4px;
  background: #C4BA8D;
  border-radius: 50%
}

.florhist .valuegrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 36px
}

.florhist .valuebox {
  padding: 24px;
  background: #F7F5EE;
  border-radius: 12px;
  box-shadow: inset 0 2px 4px #19161614;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease-out
}

.florhist .valuebox:hover {
  transform: scale(1.02)
}

.florhist .valuenum {
  font-size: 70px;
  line-height: 1.15;
  margin: 0 0 12px;
  color: #191616;
  font-weight: 700
}

.florhist .valueboxh {
  font-size: 21px;
  line-height: 1.15;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: #191616
}

.florhist .valueboxtxt {
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  color: #191616
}

.florhist .valuelarge {
  grid-column: 1 / -1;
  padding: 36px;
  background: linear-gradient(53deg, #C4BA8D 0%, #191616 100%);
  border-radius: 12px;
  box-shadow: 0 9px 40px -2px #19161621;
  display: flex;
  flex-direction: column;
  gap: 24px
}

.florhist .valuelargeh {
  font-size: 54px;
  line-height: 1.15;
  margin: 0;
  color: #FFF
}

.florhist .valuelargetxt {
  font-size: 21px;
  line-height: 1.65;
  margin: 0;
  color: #FFF
}

.florhist .proofzone {
  padding: 72px 24px;
  background: #F7F5EE;
  position: relative
}

.florhist .proofinner {
  max-width: 900px;
  margin: 0 auto
}

.florhist .proofh {
  font-size: 54px;
  line-height: 1.15;
  margin: 0 0 36px;
  text-align: center;
  color: #191616;
  animation: dropbounce .8s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.florhist .proofgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px
}

.florhist .proofcard {
  padding: 24px;
  background: #FFF;
  border-radius: 12px;
  box-shadow: 0 6px 20px -2px #c4ba8d17;
  position: relative;
  transition: transform .25s ease-out, box-shadow .25s ease-out
}

.florhist .proofcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 9px 40px -2px #c4ba8d21
}

.florhist .proofname {
  font-size: 21px;
  line-height: 1.15;
  margin: 0 0 8px;
  font-weight: 700;
  color: #191616;
  position: relative;
  display: inline-block
}

.florhist .proofname::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #C4BA8D
}

.florhist .proofrole {
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 12px;
  color: #191616;
  opacity: .7
}

.florhist .prooftxt {
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  color: #191616
}

.florhist .proofcard.invalid {
  animation: shake .4s cubic-bezier(0.36, 0.07, 0.19, 0.97)
}

@keyframes shake {

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

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-4px)
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(4px)
  }
}

@media (max-width: 768px) {
  .florhist .titlezone {
    padding: 36px 12px 24px
  }

  .florhist .titletxt {
    padding: 24px 12px
  }

  .florhist .titleh {
    font-size: 28px
  }

  .florhist .titledesc {
    font-size: 14px
  }

  .florhist .titlelink {
    font-size: 14px;
    padding: 8px 12px
  }

  .florhist .titleimg {
    height: 200px
  }

  .florhist .graduzone,
  .florhist .availzone,
  .florhist .condzone,
  .florhist .teamzone,
  .florhist .valuezone,
  .florhist .proofzone {
    padding: 36px 12px
  }

  .florhist .graduh,
  .florhist .availh,
  .florhist .condh,
  .florhist .teamh,
  .florhist .valuelargeh,
  .florhist .proofh {
    font-size: 28px;
    margin-bottom: 24px
  }

  .florhist .gradutxt,
  .florhist .availtxt,
  .florhist .conditemtxt,
  .florhist .teamtxt,
  .florhist .valuelargetxt {
    font-size: 14px
  }

  .florhist .gradutxt:first-of-type {
    font-size: 21px
  }

  .florhist .availgrid {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .florhist .availimg {
    height: 280px
  }

  .florhist .condh {
    text-align: left
  }

  .florhist .teamflex {
    flex-direction: column;
    gap: 24px
  }

  .florhist .teamimgwrap {
    flex: 0 0 auto;
    width: 100%
  }

  .florhist .teamimg {
    height: 320px
  }

  .florhist .teamcontent {
    padding: 24px 12px
  }

  .florhist .valuegrid {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .florhist .valuenum {
    font-size: 54px
  }

  .florhist .valuelarge {
    padding: 24px 12px
  }

  .florhist .proofgrid {
    grid-template-columns: 1fr;
    gap: 12px
  }
}

.lrnprog {
  background: #F7F5EE;
  color: #191616;
  overflow-x: clip
}

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

.lrnprog .titlesplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 380px;
  position: relative;
  overflow: hidden;
  margin: 0 0 72px
}

.lrnprog .titlesplit::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, #c4ba8d26 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 1
}

.lrnprog .splitleft {
  background: #FFF;
  padding: 72px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative
}

.lrnprog .splitright {
  background: linear-gradient(53deg, #C4BA8D 0%, #191616 100%);
  padding: 72px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative
}

.lrnprog .titlewrap {
  max-width: 520px;
  position: relative;
  z-index: 2
}

.lrnprog .maintitle {
  font-size: 54px;
  line-height: 1.15;
  margin: 0 0 24px;
  font-weight: 700
}

.lrnprog .titlequote {
  font-size: 21px;
  line-height: 1.65;
  color: #F7F5EE;
  margin: 0;
  font-style: italic
}

.lrnprog .catalogwrap {
  max-width: 1100px;
  margin: 0 auto 72px;
  padding: 0 24px
}

.lrnprog .cataloggrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px
}

.lrnprog .progcard {
  background: #FFF;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 4px -2px #19161614 0 6px 20px -2px #19161617 0 9px 40px -2px #19161621;
  transition: transform .28s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  display: flex;
  flex-direction: column
}

.lrnprog .progcard:hover {
  transform: translateY(-8px)
}

.lrnprog .progcard::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  pointer-events: none;
  transition: border-color .32s ease-out
}

.lrnprog .progcard:hover::after {
  border-color: #C4BA8D
}

.lrnprog .cardimgwrap {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative
}

.lrnprog .cardimgwrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, #ffffffe6 100%);
  pointer-events: none
}

.lrnprog .cardimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .42s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.lrnprog .progcard:hover .cardimg {
  transform: scale(1.08)
}

.lrnprog .cardbody {
  padding: 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column
}

.lrnprog .cardtitle {
  font-size: 21px;
  line-height: 1.15;
  margin: 0 0 12px;
  font-weight: 700;
  color: #191616
}

.lrnprog .carddesc {
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 24px;
  color: #191616;
  flex-grow: 1
}

.lrnprog .cardmeta {
  display: flex;
  gap: 12px;
  margin: 0 0 24px;
  flex-wrap: wrap
}

.lrnprog .metaitem {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #191616
}

.lrnprog .metaicon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #C4BA8D;
  stroke-width: 2
}

.lrnprog .cardfooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #F7F5EE
}

.lrnprog .cardprice {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  color: #191616
}

.lrnprog .cardlink {
  padding: 12px 24px;
  background: #191616;
  color: #FFF;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  transition: background .22s ease-out, box-shadow .22s ease-out;
  position: relative;
  overflow: hidden
}

.lrnprog .cardlink::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid #C4BA8D;
  border-radius: 2px;
  opacity: 0;
  transition: opacity .35s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.lrnprog .cardlink:hover {
  background: #C4BA8D;
  color: #191616
}

.lrnprog .cardlink:hover::before {
  opacity: 1
}

.lrnprog .whychoose {
  background: #FFF;
  padding: 72px 24px;
  margin: 0 0 72px;
  position: relative
}

.lrnprog .whychoose::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: url(./picture_assets/DSC7738.jpg);
  background-size: cover;
  background-position: center;
  opacity: .06;
  pointer-events: none
}

.lrnprog .whychoose::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(53deg, #c4ba8df2 0%, #191616f7 100%);
  pointer-events: none
}

.lrnprog .whyinner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.lrnprog .whygrid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  align-items: start
}

.lrnprog .whyleft {
  position: sticky;
  top: 24px
}

.lrnprog .whyheading {
  font-size: 54px;
  line-height: 1.15;
  margin: 0;
  font-weight: 700;
  color: #191616
}

.lrnprog .whylist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px
}

.lrnprog .whyitem {
  opacity: 0;
  transform: translateX(30px);
  animation: slideInItem .45s cubic-bezier(0.22, 0.61, 0.36, 1) forwards
}

.lrnprog .whyitem:nth-child(1) {
  animation-delay: .1s
}

.lrnprog .whyitem:nth-child(2) {
  animation-delay: .2s
}

.lrnprog .whyitem:nth-child(3) {
  animation-delay: .3s
}

.lrnprog .whyitem:nth-child(4) {
  animation-delay: .4s
}

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

.lrnprog .whyiteminner {
  background: #fffffff2;
  padding: 24px;
  border-radius: 12px;
  position: relative;
  overflow: hidden
}

.lrnprog .whyiteminner::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #C4BA8D;
  transition: width .38s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.lrnprog .whyitem:hover .whyiteminner::before {
  width: 8px
}

.lrnprog .whyitemtitle {
  font-size: 21px;
  line-height: 1.15;
  margin: 0 0 8px;
  font-weight: 700;
  color: #191616;
  text-transform: uppercase;
  letter-spacing: .05em
}

.lrnprog .whyitemdesc {
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  color: #191616
}

.lrnprog .approach {
  padding: 72px 24px;
  background: #F7F5EE;
  position: relative;
  margin: 0 0 72px
}

.lrnprog .approachinner {
  max-width: 1100px;
  margin: 0 auto
}

.lrnprog .approachlayout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center
}

.lrnprog .approachcontent {
  text-align: right
}

.lrnprog .approachheading {
  font-size: 54px;
  line-height: 1.15;
  margin: 0 0 24px;
  font-weight: 700;
  color: #191616
}

.lrnprog .approachintro {
  font-size: 21px;
  line-height: 1.65;
  margin: 0 0 24px;
  color: #191616
}

.lrnprog .approachbody {
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  color: #191616
}

.lrnprog .approachvisual {
  position: relative
}

.lrnprog .approachimg {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #C4BA8D;
  box-shadow: 0 2px 4px -2px #19161614 0 6px 20px -2px #19161617 0 9px 40px -2px #19161621
}

.lrnprog .approachquote {
  position: absolute;
  top: -36px;
  left: -36px;
  font-size: 200px;
  line-height: 1;
  color: #C4BA8D;
  opacity: .3;
  font-weight: 700;
  pointer-events: none;
  z-index: 1
}

.lrnprog .metrics {
  background: #191616;
  padding: 72px 24px;
  position: relative;
  overflow: hidden
}

.lrnprog .metrics::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #c4ba8d1f 0%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none
}

.lrnprog .metricsinner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.lrnprog .metricsgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px
}

.lrnprog .metricbox {
  text-align: center;
  position: relative;
  padding: 36px 24px;
  border-radius: 36px;
  background: #ffffff08;
  transition: background .27s ease-out, transform .27s ease-out
}

.lrnprog .metricbox:hover {
  background: #c4ba8d14;
  transform: scale(1.05)
}

.lrnprog .metricvalue {
  font-size: 70px;
  line-height: 1.15;
  font-weight: 700;
  color: #C4BA8D;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px
}

.lrnprog .metricarrow {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: #C4BA8D;
  stroke-width: 3;
  animation: arrowPulse 1.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite
}

@keyframes arrowPulse {

  0%,
  100% {
    transform: translateY(0);
    opacity: 1
  }

  50% {
    transform: translateY(-8px);
    opacity: .6
  }
}

.lrnprog .metriclabel {
  font-size: 14px;
  line-height: 1.65;
  color: #F7F5EE;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .08em
}

.lrnprog .curvedivider {
  height: 120px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #FFF
}

.lrnprog .curvedivider svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%
}

@media (max-width: 768px) {
  .lrnprog .titlesplit {
    grid-template-columns: 1fr;
    min-height: auto
  }

  .lrnprog .splitleft,
  .lrnprog .splitright {
    padding: 36px 24px
  }

  .lrnprog .maintitle {
    font-size: 28px
  }

  .lrnprog .titlequote {
    font-size: 14px
  }

  .lrnprog .cataloggrid {
    grid-template-columns: 1fr
  }

  .lrnprog .whygrid {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .lrnprog .whyleft {
    position: static
  }

  .lrnprog .whyheading {
    font-size: 28px
  }

  .lrnprog .approachlayout {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .lrnprog .approachcontent {
    text-align: left
  }

  .lrnprog .approachheading {
    font-size: 28px
  }

  .lrnprog .approachintro {
    font-size: 14px
  }

  .lrnprog .approachquote {
    font-size: 100px;
    top: -24px;
    left: -24px
  }

  .lrnprog .metricsgrid {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .lrnprog .metricvalue {
    font-size: 54px
  }
}

.cntct {
  background: #F7F5EE;
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 24px
}

.cntct .topzone {
  background: #fff;
  padding: 72px 36px 72px 24px;
  margin-bottom: 72px;
  margin-left: 36px;
  position: relative;
  border-radius: 12px;
  box-shadow: 0 6px 20px -2px #19161617
}

.cntct .topzone::before {
  content: '';
  position: absolute;
  top: 0;
  right: -36px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 60px 60px;
  border-color: transparent transparent #C4BA8D;
  opacity: .3
}

.cntct .topzone::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -36px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 60px 60px 0 0;
  border-color: #C4BA8D transparent transparent;
  opacity: .3
}

.cntct .gridpair {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 72px;
  align-items: start
}

.cntct .imgcol {
  position: relative;
  height: 100%;
  min-height: 480px
}

.cntct .imgcol::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(53deg, #C4BA8D 0%, #191616 100%);
  opacity: .85;
  border-radius: 4px;
  box-shadow: 0 9px 40px -2px #19161621
}

.cntct .imgcol .shape {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 2px solid #f7f5ee66;
  border-radius: 36px;
  top: 36px;
  right: 24px;
  animation: floatshape 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite
}

@keyframes floatshape {

  0%,
  100% {
    transform: translateY(0) rotate(0deg)
  }

  50% {
    transform: translateY(-24px) rotate(180deg)
  }
}

.cntct .imgcol .shape.two {
  width: 60px;
  height: 60px;
  bottom: 72px;
  left: 24px;
  top: auto;
  right: auto;
  border-radius: 4px;
  animation-delay: .8s;
  animation-duration: 2.8s
}

.cntct .txtcol h1 {
  font-size: 54px;
  line-height: 1.15;
  color: #191616;
  margin: 0 0 24px
}

.cntct .txtcol h1 .mark {
  position: relative;
  display: inline-block
}

.cntct .txtcol h1 .mark::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #C4BA8D
}

.cntct .txtcol .intro {
  font-size: 21px;
  line-height: 1.65;
  color: #191616;
  margin: 0 0 36px
}

.cntct .txtcol .regular {
  font-size: 14px;
  line-height: 1.65;
  color: #191616;
  margin: 0 0 24px
}

.cntct .txtcol .regular:last-child {
  margin-bottom: 0
}

.cntct .infolist {
  list-style: none;
  padding: 0;
  margin: 36px 0 0
}

.cntct .infolist li {
  font-size: 14px;
  line-height: 1.65;
  color: #191616;
  margin: 0 0 12px;
  padding-left: 28px;
  position: relative
}

.cntct .infolist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 16px;
  border: 2px solid #C4BA8D;
  border-radius: 0
}

.cntct .infolist li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 11px;
  width: 6px;
  height: 10px;
  border: solid #C4BA8D;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg)
}

.cntct .divwave {
  height: 2px;
  margin: 72px 0;
  position: relative;
  overflow: hidden
}

.cntct .divwave::before {
  content: '';
  position: absolute;
  top: 0;
  left: -20px;
  width: calc(100% + 40px);
  height: 2px;
  background-image: radial-gradient(circle, #C4BA8D 1px, transparent 1px);
  background-size: 8px 2px;
  background-repeat: repeat-x;
  animation: waveshift 8s linear infinite
}

@keyframes waveshift {
  0% {
    transform: translateX(0) translateY(0)
  }

  25% {
    transform: translateX(-4px) translateY(-1px)
  }

  50% {
    transform: translateX(0) translateY(0)
  }

  75% {
    transform: translateX(4px) translateY(1px)
  }

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

.cntct .formzone {
  background: #fff;
  padding: 72px 36px;
  margin-right: 36px;
  position: relative;
  border-radius: 12px;
  box-shadow: 0 6px 20px -2px #19161617
}

.cntct .formzone::before {
  content: '';
  position: absolute;
  top: -24px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 0;
  border-color: transparent #C4BA8D transparent transparent;
  opacity: .3
}

.cntct .formzone::after {
  content: '';
  position: absolute;
  bottom: -24px;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 0 50px;
  border-color: transparent transparent transparent #C4BA8D;
  opacity: .3
}

.cntct .formwrap {
  max-width: 720px;
  margin: 0 auto
}

.cntct .formwrap h2 {
  font-size: 28px;
  line-height: 1.15;
  color: #191616;
  margin: 0 0 8px;
  position: relative;
  padding-left: 12px
}

.cntct .formwrap h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(53deg, #C4BA8D 0%, #191616 100%)
}

.cntct .formwrap .subdesc {
  font-size: 14px;
  line-height: 1.65;
  color: #191616;
  margin: 0 0 36px
}

.cntct .formwrap form {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.cntct .fldwrap {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.cntct .fldwrap label {
  font-size: 14px;
  line-height: 1.15;
  color: #191616;
  font-weight: 600
}

.cntct .fldwrap input[type="text"],
.cntct .fldwrap input[type="email"] {
  padding: 12px;
  border: 2px solid #F7F5EE;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.65;
  color: #191616;
  background: #fff;
  transition: border-color .22s cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow .22s cubic-bezier(0.4, 0.0, 0.2, 1)
}

.cntct .fldwrap input[type="text"]:focus,
.cntct .fldwrap input[type="email"]:focus {
  outline: none;
  border-color: #C4BA8D;
  box-shadow: 0 2px 4px -2px #c4ba8d14 0 0 0 3px #c4ba8d26
}

.cntct .fldwrap input::placeholder {
  color: #999;
  font-size: 13px
}

.cntct .ratewrap {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.cntct .ratewrap .ratelabel {
  font-size: 14px;
  line-height: 1.15;
  color: #191616;
  font-weight: 600;
  margin-bottom: 4px
}

.cntct .rateopts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px
}

.cntct .rateitem {
  position: relative
}

.cntct .rateitem input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0
}

.cntct .rateitem .ratelbl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border: 2px solid #F7F5EE;
  border-radius: 4px;
  cursor: pointer;
  transition: all .28s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: #fff
}

.cntct .rateitem .ratelbl:hover {
  border-color: #C4BA8D;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -2px #c4ba8d17
}

.cntct .rateitem input[type="radio"]:checked+.ratelbl {
  border-color: #191616;
  background: linear-gradient(53deg, #c4ba8d1a 0%, #1916160d 100%);
  box-shadow: 0 2px 4px -2px #19161614 inset 0 2px 4px #c4ba8d1a
}

.cntct .rateitem .ratenum {
  font-size: 21px;
  line-height: 1.15;
  color: #191616;
  font-weight: 700
}

.cntct .rateitem .ratetxt {
  font-size: 14px;
  line-height: 1.15;
  color: #191616;
  text-align: center
}

.cntct .rateitem input[type="radio"]:checked+.ratelbl .ratenum {
  color: #C4BA8D
}

.cntct .privacywrap {
  display: flex;
  align-items: start;
  gap: 12px;
  padding: 12px;
  background: #f7f5ee80;
  border-radius: 4px
}

.cntct .privacywrap input[type="checkbox"] {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0
}

.cntct .privacywrap label {
  font-size: 14px;
  line-height: 1.65;
  color: #191616;
  cursor: pointer
}

.cntct .privacywrap a {
  color: #191616;
  text-decoration: underline;
  text-decoration-color: #C4BA8D;
  text-underline-offset: 3px;
  transition: text-decoration-color .18s ease-out
}

.cntct .privacywrap a:hover {
  text-decoration-color: #191616
}

.cntct .btnwrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px
}

.cntct .submitbtn {
  padding: 12px 36px;
  background: #191616;
  color: #F7F5EE;
  border: 2px solid #191616;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: all .32s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden
}

.cntct .submitbtn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 4px;
  background: #C4BA8D;
  transition: all .38s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translate(-50%, -50%);
  z-index: 0
}

.cntct .submitbtn:hover::before {
  width: 100%;
  height: 100%
}

.cntct .submitbtn:hover {
  border-color: #C4BA8D;
  transform: translateY(-2px);
  box-shadow: 0 9px 40px -2px #19161621
}

.cntct .submitbtn span {
  position: relative;
  z-index: 1
}

.cntct .submitbtn:active {
  transform: translateY(0)
}

.cntct .datatable {
  width: 100%;
  margin: 36px 0 0;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 4px -2px #19161614
}

.cntct .datatable thead {
  background: linear-gradient(53deg, #C4BA8D 0%, #191616 100%)
}

.cntct .datatable th {
  padding: 12px;
  text-align: left;
  font-size: 14px;
  line-height: 1.15;
  color: #F7F5EE;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px
}

.cntct .datatable tbody tr {
  transition: background-color .19s ease-out
}

.cntct .datatable tbody tr:nth-child(odd) {
  background: #fff
}

.cntct .datatable tbody tr:nth-child(even) {
  background: #f7f5ee4d
}

.cntct .datatable tbody tr:hover {
  background: #c4ba8d26
}

.cntct .datatable td {
  padding: 12px;
  font-size: 14px;
  line-height: 1.65;
  color: #191616;
  border-bottom: 1px solid #F7F5EE
}

.cntct .datatable tbody tr:last-child td {
  border-bottom: none
}

.cntct .narrative {
  margin-top: 24px;
  padding: 24px;
  background: #fff;
  border-radius: 4px;
  border: 2px solid #F7F5EE
}

.cntct .narrative h3 {
  font-size: 21px;
  line-height: 1.15;
  color: #191616;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 1px
}

.cntct .narrative p {
  font-size: 14px;
  line-height: 1.65;
  color: #191616;
  margin: 0 0 12px
}

.cntct .narrative p:last-child {
  margin-bottom: 0
}

.cntct .complexblock {
  background: #19161608;
  padding: 36px;
  border-radius: 12px;
  margin-top: 24px
}

@media (max-width: 768px) {
  .cntct {
    padding: 36px 12px
  }

  .cntct .topzone {
    padding: 36px 24px;
    margin-left: 12px;
    margin-bottom: 36px
  }

  .cntct .gridpair {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .cntct .imgcol {
    min-height: 280px
  }

  .cntct .txtcol h1 {
    font-size: 28px
  }

  .cntct .txtcol .intro {
    font-size: 14px
  }

  .cntct .divwave {
    margin: 36px 0
  }

  .cntct .formzone {
    padding: 36px 24px;
    margin-right: 12px
  }

  .cntct .formwrap h2 {
    font-size: 21px
  }

  .cntct .rateopts {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px
  }

  .cntct .rateitem .ratelbl {
    padding: 8px 4px
  }

  .cntct .btnwrap {
    justify-content: stretch
  }

  .cntct .submitbtn {
    width: 100%
  }

  .cntct .datatable {
    font-size: 12px
  }

  .cntct .datatable th,
  .cntct .datatable td {
    padding: 8px
  }

  .cntct .complexblock {
    padding: 24px
  }
}

.cntct .animleft {
  animation: slideinfromleft .8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0
}

.cntct .animright {
  animation: slideinfromright .8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
  animation-delay: .2s
}

@keyframes slideinfromleft {
  from {
    opacity: 0;
    transform: translateX(-60px)
  }

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

@keyframes slideinfromright {
  from {
    opacity: 0;
    transform: translateX(60px)
  }

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

.abtus {
  background: #F7F5EE;
  color: #191616;
  overflow-x: clip
}

.abtus .intro {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center
}

.abtus .intro .txtside {
  padding-right: 36px
}

.abtus .intro .txtside h1 {
  font-size: 54px;
  line-height: 1.15;
  margin: 0 0 24px;
  font-weight: 700
}

.abtus .intro .txtside h1 .accent {
  color: #C4BA8D;
  position: relative;
  display: inline-block
}

.abtus .intro .txtside h1 .accent::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #C4BA8D
}

.abtus .intro .txtside .problem {
  font-size: 21px;
  line-height: 1.65;
  margin: 0 0 24px;
  color: #191616
}

.abtus .intro .txtside .solution {
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  color: #191616
}

.abtus .intro .imgside {
  position: relative;
  height: 100%;
  min-height: 420px
}

.abtus .intro .imgside img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%);
  border: 1px solid #19161614
}

.abtus .intro .imgside::before {
  content: '';
  position: absolute;
  top: -36px;
  right: -36px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at 30% 40%, #c4ba8d26, transparent 70%);
  filter: blur(36px);
  z-index: -1;
  pointer-events: none
}

.abtus .intro .imgside::after {
  content: '';
  position: absolute;
  bottom: -24px;
  left: -24px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle at 70% 60%, #19161614, transparent 65%);
  filter: blur(24px);
  z-index: -1;
  pointer-events: none
}

@keyframes slideUpReveal {
  from {
    opacity: 0;
    transform: translateY(48px)
  }

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

.abtus .intro .txtside {
  animation: slideUpReveal .42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards
}

.abtus .intro .imgside {
  animation: slideUpReveal .38s cubic-bezier(0.34, 1.56, 0.64, 1) .12s backwards
}

.abtus .story {
  background: linear-gradient(53deg, #C4BA8D 0%, #191616 100%);
  padding: 72px 24px;
  position: relative;
  border-top: 2px solid #C4BA8D;
  border-bottom: 2px solid #C4BA8D
}

.abtus .story .storyinner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 72px;
  align-items: start
}

.abtus .story .imgsection {
  position: relative
}

.abtus .story .imgsection img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #f7f5ee33;
  box-shadow: 0 6px 20px -2px #19161617 0 9px 40px -2px #19161621
}

.abtus .story .txtsection {
  color: #F7F5EE
}

.abtus .story .txtsection h2 {
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em
}

.abtus .story .txtsection .opening {
  font-size: 21px;
  line-height: 1.65;
  margin: 0 0 24px
}

.abtus .story .txtsection .bodytxt {
  font-size: 14px;
  line-height: 1.65;
  margin: 0
}

.abtus .story .imgsection {
  animation: slideUpReveal .35s cubic-bezier(0.22, 1.4, 0.58, 1) .18s backwards
}

.abtus .story .txtsection {
  animation: slideUpReveal .4s cubic-bezier(0.22, 1.4, 0.58, 1) .28s backwards
}

.abtus .values {
  background: #fff;
  padding: 72px 24px;
  position: relative
}

.abtus .values::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: #F7F5EE;
  z-index: 0
}

.abtus .values .valuesinner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.abtus .values h2 {
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 36px;
  text-align: center;
  font-weight: 700
}

.abtus .values .valueslist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  counter-reset: valuenum
}

.abtus .values .valueitem {
  background: #fff;
  padding: 36px;
  border-radius: 12px;
  box-shadow: 0 2px 4px -2px #c4ba8d14 0 6px 20px -2px #c4ba8d17;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-increment: valuenum;
  transition: transform .28s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .28s ease-out
}

.abtus .values .valueitem:hover {
  transform: translateY(-8px);
  box-shadow: 0 6px 20px -2px #c4ba8d17 0 9px 40px -2px #c4ba8d21
}

.abtus .values .valueitem::before {
  content: counter(valuenum, decimal-leading-zero);
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 70px;
  line-height: 1;
  font-weight: 700;
  color: #c4ba8d26;
  pointer-events: none
}

.abtus .values .valueitem h3 {
  font-size: 21px;
  line-height: 1.15;
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  position: relative;
  z-index: 1
}

.abtus .values .valueitem p {
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  position: relative;
  z-index: 1
}

.abtus .values .valueitem:nth-child(1) {
  animation: slideUpReveal .36s cubic-bezier(0.28, 1.3, 0.62, 1) .15s backwards
}

.abtus .values .valueitem:nth-child(2) {
  animation: slideUpReveal .36s cubic-bezier(0.28, 1.3, 0.62, 1) .25s backwards
}

.abtus .values .valueitem:nth-child(3) {
  animation: slideUpReveal .36s cubic-bezier(0.28, 1.3, 0.62, 1) .35s backwards
}

.abtus .values .valueitem:nth-child(4) {
  animation: slideUpReveal .36s cubic-bezier(0.28, 1.3, 0.62, 1) .45s backwards
}

.abtus .team {
  background: #F7F5EE;
  padding: 72px 24px;
  position: relative
}

.abtus .team .teaminner {
  max-width: 1100px;
  margin: 0 auto
}

.abtus .team h2 {
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 36px;
  font-weight: 700;
  text-align: right
}

.abtus .team .teamgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px
}

.abtus .team .membercard {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: start
}

.abtus .team .membercard:nth-child(even) {
  grid-template-columns: 1fr 200px;
  direction: rtl
}

.abtus .team .membercard:nth-child(even) .membertxt {
  direction: ltr;
  text-align: right
}

.abtus .team .memberimg {
  position: relative
}

.abtus .team .memberimg img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #19161614;
  box-shadow: 0 2px 4px -2px #19161614
}

.abtus .team .membertxt h3 {
  font-size: 21px;
  line-height: 1.15;
  margin: 0 0 8px;
  font-weight: 700
}

.abtus .team .membertxt .role {
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 12px;
  color: #C4BA8D;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em
}

.abtus .team .membertxt .bio {
  font-size: 14px;
  line-height: 1.65;
  margin: 0
}

.abtus .team .membercard:nth-child(1) {
  animation: slideUpReveal .32s cubic-bezier(0.25, 1.35, 0.6, 1) .1s backwards
}

.abtus .team .membercard:nth-child(2) {
  animation: slideUpReveal .32s cubic-bezier(0.25, 1.35, 0.6, 1) .2s backwards
}

.abtus .divider {
  width: 100%;
  height: 48px;
  overflow: visible
}

.abtus .divider svg {
  width: 100%;
  height: 100%;
  display: block
}

@media (max-width: 768px) {
  .abtus .intro {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 36px 24px
  }

  .abtus .intro .txtside {
    padding-right: 0
  }

  .abtus .intro .txtside h1 {
    font-size: 28px;
    margin: 0 0 12px
  }

  .abtus .intro .txtside .problem {
    font-size: 14px;
    margin: 0 0 12px
  }

  .abtus .intro .imgside {
    min-height: 280px
  }

  .abtus .story {
    padding: 36px 24px
  }

  .abtus .story .storyinner {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .abtus .story .imgsection img {
    height: 320px
  }

  .abtus .story .txtsection h2 {
    font-size: 21px;
    margin: 0 0 12px
  }

  .abtus .story .txtsection .opening {
    font-size: 14px;
    margin: 0 0 12px
  }

  .abtus .values {
    padding: 36px 24px
  }

  .abtus .values h2 {
    font-size: 21px;
    margin: 0 0 24px
  }

  .abtus .values .valueslist {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .abtus .values .valueitem {
    padding: 24px
  }

  .abtus .values .valueitem::before {
    font-size: 54px;
    top: 12px;
    right: 12px
  }

  .abtus .values .valueitem h3 {
    font-size: 14px
  }

  .abtus .team {
    padding: 36px 24px
  }

  .abtus .team h2 {
    font-size: 21px;
    margin: 0 0 24px
  }

  .abtus .team .teamgrid {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .abtus .team .membercard {
    grid-template-columns: 1fr
  }

  .abtus .team .membercard:nth-child(even) {
    grid-template-columns: 1fr;
    direction: ltr
  }

  .abtus .team .membercard:nth-child(even) .membertxt {
    text-align: left
  }

  .abtus .team .memberimg img {
    height: 200px
  }

  .abtus .team .membertxt h3 {
    font-size: 14px
  }
}

.abtus .letterchange {
  display: inline-block;
  position: relative
}

.abtus .letterchange span {
  display: inline-block;
  transition: color .18s ease-out
}

.abtus .letterchange:hover span:nth-child(1) {
  color: #C4BA8D !important;
  transition-delay: 0s
}

.abtus .letterchange:hover span:nth-child(2) {
  color: #C4BA8D !important;
  transition-delay: .02s
}

.abtus .letterchange:hover span:nth-child(3) {
  color: #C4BA8D !important;
  transition-delay: .04s
}

.abtus .letterchange:hover span:nth-child(4) {
  color: #C4BA8D !important;
  transition-delay: .06s
}

.abtus .letterchange:hover span:nth-child(5) {
  color: #C4BA8D !important;
  transition-delay: .08s
}

.abtus .letterchange:hover span:nth-child(6) {
  color: #C4BA8D !important;
  transition-delay: .1s
}

.abtus .letterchange:hover span:nth-child(7) {
  color: #C4BA8D !important;
  transition-delay: .12s
}

.abtus .letterchange:hover span:nth-child(8) {
  color: #C4BA8D !important;
  transition-delay: .14s
}

.abtus .letterchange:hover span:nth-child(9) {
  color: #C4BA8D !important;
  transition-delay: .16s
}

.abtus .letterchange:hover span:nth-child(10) {
  color: #C4BA8D !important;
  transition-delay: .18s
}

.successpage {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 24px;
  background: #F7F5EE
}

.successpage .confirmwrap {
  background: #FFF;
  border-radius: 12px;
  padding: 72px 36px;
  text-align: center;
  box-shadow: 0 6px 20px -2px #c4ba8d17;
  margin-bottom: 72px
}

.successpage .iconcheck {
  width: 80px;
  height: 80px;
  margin: 0 auto 36px;
  border: 3px solid #C4BA8D;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative
}

.successpage .iconcheck::before {
  content: '';
  width: 28px;
  height: 16px;
  border-left: 4px solid #C4BA8D;
  border-bottom: 4px solid #C4BA8D;
  transform: rotate(-45deg) translateY(-3px)
}

.successpage .confirmwrap h1 {
  font-size: 54px;
  line-height: 1.15;
  color: #191616;
  margin: 0 0 24px
}

.successpage .confirmwrap p {
  font-size: 21px;
  line-height: 1.65;
  color: #191616;
  margin: 0 0 36px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto
}

.successpage .detailsblock {
  background: #FFF;
  border-radius: 4px;
  padding: 24px;
  margin-bottom: 12px;
  text-align: left;
  border: 1px solid #c4ba8d33;
  transition: border-color .28s ease-out
}

.successpage .detailsblock:hover {
  border-color: #C4BA8D
}

.successpage .detailsblock h2 {
  font-size: 14px;
  line-height: 1.15;
  color: #C4BA8D;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin: 0 0 8px
}

.successpage .detailsblock p {
  font-size: 21px;
  line-height: 1.65;
  color: #191616;
  margin: 0
}

.successpage .actionarea {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 36px
}

.successpage .btnprimary {
  background: linear-gradient(53deg, #C4BA8D, #191616);
  color: #FFF;
  font-size: 21px;
  line-height: 1.15;
  padding: 24px 36px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: box-shadow .32s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative
}

.successpage .btnprimary:hover {
  box-shadow: 0 9px 40px -2px #c4ba8d21
}

.successpage .btnsecondary {
  background: transparent;
  color: #191616;
  font-size: 21px;
  line-height: 1.15;
  padding: 24px 36px;
  border: 2px solid #191616;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background .19s ease-out, color .19s ease-out;
  position: relative
}

.successpage .btnsecondary::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 1px solid #191616;
  border-radius: 8px;
  opacity: 0;
  transition: opacity .24s ease-out
}

.successpage .btnsecondary:hover {
  background: #191616;
  color: #FFF
}

.successpage .btnsecondary:hover::after {
  opacity: 1;
  border-color: #FFF
}

.successpage .infostrip {
  background: #FFF;
  border-radius: 36px;
  padding: 36px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  box-shadow: 0 2px 4px -2px #19161614
}

.successpage .infoitem {
  text-align: center
}

.successpage .infoitem h3 {
  font-size: 14px;
  line-height: 1.15;
  color: #C4BA8D;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin: 0 0 8px
}

.successpage .infoitem p {
  font-size: 21px;
  line-height: 1.65;
  color: #191616;
  margin: 0
}

.successpage .contactnote {
  background: linear-gradient(53deg, #c4ba8d0d, #f7f5eecc);
  border-radius: 12px;
  padding: 36px 24px;
  margin-top: 72px;
  text-align: center
}

.successpage .contactnote h2 {
  font-size: 28px;
  line-height: 1.15;
  color: #191616;
  margin: 0 0 12px
}

.successpage .contactnote p {
  font-size: 21px;
  line-height: 1.65;
  color: #191616;
  margin: 0 0 8px
}

.successpage .contactnote a {
  color: #C4BA8D;
  text-decoration: none;
  position: relative;
  transition: color .21s ease-out
}

.successpage .contactnote a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #C4BA8D;
  transition: width .35s cubic-bezier(0.68, -0.55, 0.27, 1.55), left .35s cubic-bezier(0.68, -0.55, 0.27, 1.55)
}

.successpage .contactnote a:hover::after {
  width: 100%;
  left: 0
}

@media (max-width: 768px) {
  .successpage {
    padding: 36px 12px
  }

  .successpage .confirmwrap {
    padding: 36px 24px;
    margin-bottom: 36px
  }

  .successpage .confirmwrap h1 {
    font-size: 28px
  }

  .successpage .confirmwrap p {
    font-size: 14px
  }

  .successpage .detailsblock p {
    font-size: 14px
  }

  .successpage .btnprimary,
  .successpage .btnsecondary {
    font-size: 14px;
    padding: 12px 24px;
    width: 100%
  }

  .successpage .actionarea {
    flex-direction: column;
    gap: 8px
  }

  .successpage .infostrip {
    padding: 24px 12px;
    gap: 12px
  }

  .successpage .infoitem p {
    font-size: 14px
  }

  .successpage .contactnote {
    padding: 24px 12px;
    margin-top: 36px
  }

  .successpage .contactnote h2 {
    font-size: 21px
  }

  .successpage .contactnote p {
    font-size: 14px
  }
}