* {
box-sizing: border-box
}

body {
margin: 0;
min-height: 100svh;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
font-family: 'Nunito', sans-serif
}

.brand-bar {
background: linear-gradient(135deg, #7EBFB7 0%, #A0CBC9 60%, #E9DECE 100%);
padding: 32px 64px 16px;
display: flex;
align-items: flex-start;
justify-content: space-between;
position: relative;
overflow: hidden
}

.brand-bar::before {
content: '';
position: absolute;
top: -32px;
right: -32px;
width: 320px;
height: 320px;
background: #ffffff14;
border-radius: 50%;
pointer-events: none
}

.brand-identity {
display: flex;
align-items: center;
gap: 16px;
z-index: 2
}

.brand-hexframe {
position: relative;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
box-shadow: -1px 4px 25px -2px #7ebfb71a;
border-top: 2px solid #7ebfb766;
border-bottom: 2px solid #7ebfb766;
padding: 8px
}

.brand-hexframe img {
width: 36px;
height: 36px;
object-fit: contain;
display: block
}

.brand-text-stack {
display: flex;
flex-direction: column;
gap: 0
}

.brand-name {
font-size: 22px;
font-weight: 700;
line-height: 1.2;
color: #fff;
letter-spacing: 0
}

.brand-tagline {
font-size: 14px;
font-weight: 300;
line-height: 1.4;
color: #ffffffd9
}

.brand-contact-strip {
display: flex;
align-items: center;
gap: 32px;
z-index: 2
}

.brand-contact-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #ffffffe6;
font-weight: 400;
line-height: 1.4;
text-decoration: none;
transition: color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.brand-contact-item:hover {
color: #fff
}

.brand-contact-item .ti {
font-size: 18px;
color: #ffffffbf
}

.nav-bar {
background: #fff;
box-shadow: -1px 4px 25px -2px #7ebfb71a;
padding: 0 64px;
display: flex;
align-items: stretch;
min-height: 56px
}

.nav-list {
display: flex;
align-items: stretch;
list-style: none;
margin: 0;
padding: 0;
gap: 0;
flex-wrap: wrap
}

.nav-list li {
display: flex;
align-items: stretch
}

.nav-list li a {
display: flex;
align-items: center;
padding: 16px;
font-size: 14px;
font-weight: 600;
color: #2d4a47;
text-decoration: none;
line-height: 1.4;
border-bottom: 2px solid transparent;
transition: color .2s cubic-bezier(0.4, 0, 0.2, 1), border-color .25s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap
}

.nav-list li a:hover,
.nav-list li a:focus {
color: #7EBFB7;
border-bottom-color: #7EBFB7;
outline: none;
background: #7ebfb70d
}

.nav-list li a:focus {
background: #7ebfb71a
}

@media (max-width: 1280px) {
.brand-bar {
padding: 32px 32px 16px
}

.nav-bar {
padding: 0 32px
}

.brand-contact-strip {
gap: 16px
}
}

@media (max-width: 768px) {
.brand-bar {
padding: 16px;
flex-direction: column;
gap: 16px
}

.brand-contact-strip {
flex-wrap: wrap;
gap: 8px
}

.nav-bar {
padding: 0 16px
}

.nav-list {
flex-wrap: wrap
}

.nav-list li a {
padding: 16px 8px;
font-size: 14px
}
}

.site-footer {
background: linear-gradient(160deg, #2d4a47 0%, #3a5e5a 100%);
padding: 64px 64px 32px
}

.footer-grid {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 64px;
align-items: start
}

.footer-brand-center {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center
}

.footer-hexframe {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
background: #fffffff2;
clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
box-shadow: -1px 4px 25px -2px #7ebfb724;
padding: 8px
}

.footer-hexframe img {
width: 34px;
height: 34px;
object-fit: contain;
display: block
}

.footer-brand-name {
font-size: 18px;
font-weight: 700;
color: #fff;
line-height: 1.2
}

.footer-brand-desc {
font-size: 14px;
font-weight: 300;
color: #ffffffa6;
line-height: 1.6;
max-width: 220px
}

.footer-nav-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px
}

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

.footer-nav-label {
font-size: 14px;
font-weight: 700;
color: #A0CBC9;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 0;
margin-bottom: 8px
}

.footer-nav-col a {
font-size: 14px;
font-weight: 400;
color: #ffffffbf;
text-decoration: none;
line-height: 1.6;
transition: color .2s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
gap: 8px
}

.footer-nav-col a:hover,
.footer-nav-col a:focus {
color: #7EBFB7;
outline: none
}

.footer-nav-col a .ti {
font-size: 14px;
opacity: .6
}

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

.footer-contact-label {
font-size: 14px;
font-weight: 700;
color: #A0CBC9;
line-height: 1.4;
text-transform: uppercase;
margin-bottom: 8px
}

.footer-contact-entry {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 14px;
color: #ffffffbf;
line-height: 1.6;
text-decoration: none;
transition: color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.footer-contact-entry:hover {
color: #7EBFB7
}

.footer-contact-entry .ti {
font-size: 16px;
color: #7EBFB7;
margin-top: 2px;
flex-shrink: 0
}

.footer-bottom {
max-width: 1400px;
margin: 32px auto 0;
padding-top: 32px;
border-top: 1px solid #ffffff1a;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px
}

.footer-copyright {
font-size: 14px;
color: #ffffff73;
line-height: 1.6
}

.footer-legal-links {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap
}

.footer-legal-links a {
font-size: 14px;
color: #ffffff73;
text-decoration: none;
line-height: 1.6;
transition: color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.footer-legal-links a:hover,
.footer-legal-links a:focus {
color: #A0CBC9;
outline: none
}

@media (max-width: 1280px) {
.site-footer {
padding: 64px 32px 32px
}

.footer-grid {
gap: 32px
}
}

@media (max-width: 768px) {
.site-footer {
padding: 32px 16px
}

.footer-grid {
grid-template-columns: 1fr;
gap: 32px
}

.footer-nav-group {
grid-template-columns: 1fr;
gap: 16px
}

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

.consent-banner {
display: none;
position: fixed;
bottom: 32px;
right: 32px;
z-index: 4000;
width: 320px;
background: #fff;
border-radius: 2px;
box-shadow: -1px 12px 60px -2px #7ebfb724 -1px 4px 25px -2px #7ebfb71a;
padding: 16px;
transform: translateY(-16px);
opacity: 0;
transition: transform .32s cubic-bezier(0.4, 0, 0.2, 1), opacity .32s cubic-bezier(0.4, 0, 0.2, 1)
}

.consent-banner.visible {
transform: translateY(0);
opacity: 1
}

.consent-text {
font-size: 14px;
color: #2d4a47;
line-height: 1.6;
margin-bottom: 16px;
font-family: 'Nunito', sans-serif
}

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

.consent-btn {
flex: 1;
padding: 8px 16px;
font-size: 14px;
font-weight: 600;
font-family: 'Nunito', sans-serif;
border-radius: 2px;
border: 1.5px solid #7EBFB7;
background: transparent;
color: #2d4a47;
cursor: pointer;
line-height: 1.4;
transition: background .2s cubic-bezier(0.4, 0, 0.2, 1), color .2s cubic-bezier(0.4, 0, 0.2, 1), transform .15s cubic-bezier(0.4, 0, 0.2, 1)
}

.consent-btn:hover {
background: #7EBFB7;
color: #fff;
transform: scale(1.03)
}

.consent-btn:focus {
outline: none;
background: #7ebfb726;
border-color: #2d4a47
}

.consent-btn.decline {
border-color: #A0CBC9;
color: #5a7a77
}

.consent-btn.decline:hover {
background: #A0CBC9;
color: #fff
}

.preference-tab {
display: none;
position: fixed;
bottom: 120px;
right: 0;
z-index: 3999;
background: #7EBFB7;
color: #fff;
font-family: 'Nunito', sans-serif;
font-size: 14px;
font-weight: 600;
padding: 8px 16px;
border-radius: 2px 0 0 2px;
cursor: pointer;
border: none;
box-shadow: -1px 4px 25px -2px #7ebfb724;
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
transition: background .2s cubic-bezier(0.4, 0, 0.2, 1);
line-height: 1.4
}

.preference-tab:hover {
background: #2d4a47
}

.preference-tab:focus {
outline: none;
background: #2d4a47
}

.terms-aqj-section {
max-width: 1400px;
margin: 0 auto;
padding: 64px 32px
}

.terms-aqj-section h1 {
font-size: 56px;
line-height: 1.2;
color: #1b2a28;
margin-bottom: 32px;
margin-top: 0
}

.terms-aqj-section h2 {
font-size: 42px;
line-height: 1.2;
color: #1b2a28;
margin-top: 64px;
margin-bottom: 16px
}

.terms-aqj-section h3 {
font-size: 22px;
line-height: 1.4;
color: #1b2a28;
margin-top: 32px;
margin-bottom: 16px
}

.terms-aqj-section h4,
.terms-aqj-section h5,
.terms-aqj-section h6 {
font-size: 18px;
line-height: 1.4;
color: #1b2a28;
margin-top: 32px;
margin-bottom: 8px
}

.terms-aqj-section p {
font-size: 18px;
line-height: 1.9;
color: #2c3e3c;
margin-top: 0;
margin-bottom: 16px;
max-width: 80ch
}

.terms-aqj-section ul,
.terms-aqj-section ol {
font-size: 18px;
line-height: 1.9;
color: #2c3e3c;
margin-top: 0;
margin-bottom: 16px;
padding-left: 32px;
max-width: 80ch
}

.terms-aqj-section li {
margin-bottom: 8px
}

.terms-aqj-section li:last-child {
margin-bottom: 0
}

.terms-aqj-section a {
color: #4a9e96;
text-decoration: underline;
text-underline-offset: 3px;
transition: color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.terms-aqj-section a:hover {
color: #7EBFB7
}

.terms-aqj-section a:visited {
color: #5b8a87
}

.terms-aqj-section table {
width: 100%;
border-collapse: collapse;
font-size: 18px;
line-height: 1.6;
color: #2c3e3c;
margin-bottom: 32px;
box-shadow: -1px 4px 25px -2px #7ebfb71a;
border-radius: 2px;
overflow: hidden
}

.terms-aqj-section thead {
background-color: #7EBFB7
}

.terms-aqj-section thead th {
color: #fff;
font-size: 14px;
line-height: 1.4;
text-align: left;
padding: 16px;
font-weight: 600
}

.terms-aqj-section tbody tr {
border-bottom: 1px solid #E9DECE;
transition: background-color .15s cubic-bezier(0.4, 0, 0.2, 1)
}

.terms-aqj-section tbody tr:last-child {
border-bottom: none
}

.terms-aqj-section tbody tr:hover {
background-color: #f4f9f8
}

.terms-aqj-section td {
padding: 16px;
vertical-align: top
}

.terms-aqj-section th {
padding: 16px;
vertical-align: top
}

.terms-aqj-section hr {
border: none;
border-top: 1px solid #E9DECE;
margin-top: 32px;
margin-bottom: 32px
}

.terms-aqj-section div {
font-size: 18px;
line-height: 1.9;
color: #2c3e3c
}

@media (max-width: 768px) {
.terms-aqj-section {
padding: 32px 16px
}

.terms-aqj-section h1 {
font-size: 42px
}

.terms-aqj-section h2 {
font-size: 22px;
margin-top: 32px
}

.terms-aqj-section h3 {
font-size: 18px
}

.terms-aqj-section h4,
.terms-aqj-section h5,
.terms-aqj-section h6 {
font-size: 14px
}

.terms-aqj-section p,
.terms-aqj-section ul,
.terms-aqj-section ol,
.terms-aqj-section div {
font-size: 14px
}

.terms-aqj-section table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch
}

.terms-aqj-section thead th,
.terms-aqj-section td {
font-size: 14px;
padding: 8px
}
}

@media (min-width: 769px) and (max-width: 1280px) {
.terms-aqj-section {
padding: 64px 32px
}
}

.aboutus {
max-width: 100%;
overflow-x: hidden
}

.aboutus .pageinner {
max-width: 1400px;
margin: 0 auto;
padding: 0 32px
}

@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-32px)
}

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

@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(32px)
}

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

.aboutus .animate-left {
animation: slideInLeft .28s cubic-bezier(0.4, 0, 0.2, 1) both
}

.aboutus .animate-right {
animation: slideInRight .22s cubic-bezier(0.0, 0, 0.2, 1) both
}

.aboutus .titlesection {
background: #fff;
padding: 48px 0 80px;
position: relative
}

.aboutus .titlesection .diagonalbg {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none
}

.aboutus .titlesection .diagonalbg::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(135deg, transparent, transparent 18px, #7ebfb70f 18px, #7ebfb70f 20px)
}

.aboutus .titlerow {
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 64px;
position: relative
}

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

.aboutus .titletext .overline {
font-size: 14px;
line-height: 1.4;
color: #7EBFB7;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 16px
}

.aboutus .titletext h1 {
font-size: 56px;
line-height: 1.2;
font-weight: 800;
color: #1b2b2a;
margin: 0 0 16px
}

.aboutus .titletext h1 .firstword {
color: #7EBFB7
}

.aboutus .titletext .tagline {
font-size: 18px;
line-height: 1.6;
color: #2d3f3e;
max-width: 480px;
margin-bottom: 32px
}

.aboutus .titletext .metarow {
display: flex;
flex-direction: row;
gap: 32px;
flex-wrap: wrap
}

.aboutus .titletext .metaitem {
display: flex;
flex-direction: column;
gap: 8px
}

.aboutus .titletext .metaitem .metanum {
font-size: 42px;
line-height: 1.2;
font-weight: 800;
color: #1b2b2a
}

.aboutus .titletext .metaitem .metalabel {
font-size: 14px;
line-height: 1.4;
color: #5a7170
}

.aboutus .titleimage {
flex: 0 0 340px;
position: relative
}

.aboutus .titleimage .imageframe {
width: 340px;
height: 440px;
border-radius: 20px;
overflow: hidden;
box-shadow: -1px 12px 60px -2px #7ebfb724
}

.aboutus .titleimage .imageframe img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block
}

.aboutus .titleimage .anchorquote {
position: absolute;
bottom: -32px;
left: -32px;
font-size: 120px;
line-height: 1;
color: #7ebfb71f;
font-weight: 900;
pointer-events: none;
user-select: none;
z-index: 0
}

.aboutus .storysection {
background: linear-gradient(180deg, #f4f0ea 0%, #e9dece 100%);
padding: 64px 0;
position: relative
}

.aboutus .storysection .scalloptop {
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 32px;
background: #fff;
-webkit-mask-image: radial-gradient(circle 16px at 16px 0%, transparent 16px, #000 16px);
mask-image: radial-gradient(circle 16px at 16px 0%, transparent 16px, #000 16px);
-webkit-mask-size: 32px 32px;
mask-size: 32px 32px;
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x
}

.aboutus .storyrow {
display: flex;
flex-direction: row;
gap: 64px;
align-items: flex-start
}

.aboutus .storymain {
flex: 3 1 0;
min-width: 0
}

.aboutus .storyside {
flex: 2 1 0;
min-width: 0
}

.aboutus .storymain h2 {
font-size: 42px;
line-height: 1.2;
font-weight: 800;
color: #1b2b2a;
margin: 0 0 16px
}

.aboutus .storymain h2 .firstword {
font-size: 56px;
color: #7EBFB7
}

.aboutus .storymain .quotepara {
font-size: 18px;
line-height: 1.6;
color: #1b2b2a;
font-weight: 600;
border-top: 2px solid #7EBFB7;
padding-top: 16px;
margin: 0 0 16px
}

.aboutus .storymain .bodypara {
font-size: 18px;
line-height: 1.6;
color: #2d3f3e;
margin: 0 0 16px
}

.aboutus .storymain .inlinelist {
font-size: 14px;
line-height: 1.9;
color: #5a7170;
margin: 0 0 16px
}

.aboutus .storymain .inlinelist span {
padding: 0 8px;
color: #7EBFB7;
font-weight: 700
}

.aboutus .storyside .sideimage {
width: 100%;
height: 320px;
border-radius: 20px;
overflow: hidden;
box-shadow: -1px 4px 25px -2px #7ebfb71a;
margin-bottom: 32px
}

.aboutus .storyside .sideimage img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block
}

.aboutus .storyside .sideimage2 {
width: 100%;
height: 220px;
border-radius: 2px;
overflow: hidden;
box-shadow: -1px 1px 2px -2px #7ebfb712
}

.aboutus .storyside .sideimage2 img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block
}

.aboutus .pyramidsection {
background: #fff;
padding: 64px 0;
position: relative
}

.aboutus .pyramidsection .scalloptop {
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 32px;
background: #e9dece;
-webkit-mask-image: radial-gradient(circle 16px at 16px 0%, transparent 16px, #000 16px);
mask-image: radial-gradient(circle 16px at 16px 0%, transparent 16px, #000 16px);
-webkit-mask-size: 32px 32px;
mask-size: 32px 32px;
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x
}

.aboutus .pyramidrow {
display: flex;
flex-direction: row;
gap: 64px;
align-items: flex-start
}

.aboutus .pyramidleft {
flex: 2 1 0;
min-width: 0
}

.aboutus .pyramidright {
flex: 3 1 0;
min-width: 0
}

.aboutus .pyramidleft h2 {
font-size: 42px;
line-height: 1.2;
font-weight: 800;
color: #1b2b2a;
margin: 0 0 16px
}

.aboutus .pyramidleft h2 .firstword {
font-size: 56px;
color: #7EBFB7
}

.aboutus .pyramidleft .bodypara {
font-size: 18px;
line-height: 1.6;
color: #2d3f3e;
margin: 0 0 32px
}

.aboutus .pyramidchart {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start
}

.aboutus .pyramidchart .plevel {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.aboutus .pyramidchart .plevel:hover {
transform: translateX(8px)
}

.aboutus .pyramidchart .pbar {
height: 40px;
border-radius: 2px;
display: flex;
align-items: center;
padding: 0 16px
}

.aboutus .pyramidchart .plevel:nth-child(1) .pbar {
width: 320px;
background: #7EBFB7
}

.aboutus .pyramidchart .plevel:nth-child(2) .pbar {
width: 260px;
background: #8ec8c0
}

.aboutus .pyramidchart .plevel:nth-child(3) .pbar {
width: 200px;
background: #A0CBC9
}

.aboutus .pyramidchart .plevel:nth-child(4) .pbar {
width: 140px;
background: #b8d9d7
}

.aboutus .pyramidchart .plevel:nth-child(5) .pbar {
width: 80px;
background: #E9DECE
}

.aboutus .pyramidchart .pbarlabel {
font-size: 14px;
line-height: 1.4;
font-weight: 700;
color: #1b2b2a
}

.aboutus .pyramidchart .plevel:nth-child(1) .pbarlabel,
.aboutus .pyramidchart .plevel:nth-child(2) .pbarlabel,
.aboutus .pyramidchart .plevel:nth-child(3) .pbarlabel {
color: #fff
}

.aboutus .pyramidchart .psidelabel {
font-size: 14px;
line-height: 1.4;
color: #5a7170
}

.aboutus .teamgrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px
}

.aboutus .teamcard {
background: #f7f5f1;
border-radius: 20px;
padding: 32px;
box-shadow: -1px 4px 25px -2px #7ebfb71a;
transition: box-shadow .25s cubic-bezier(0.4, 0, 0.2, 1), transform .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.aboutus .teamcard:hover {
box-shadow: -1px 12px 60px -2px #7ebfb724;
transform: translateY(-4px)
}

.aboutus .teamcard.withportrait {
display: flex;
flex-direction: row;
gap: 16px;
align-items: flex-start;
grid-column: 1 / -1
}

.aboutus .teamcard .portraitframe {
flex: 0 0 80px;
width: 80px;
height: 103px;
border-radius: 20px;
overflow: hidden
}

.aboutus .teamcard .portraitframe img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block
}

.aboutus .teamcard .cardtext {
flex: 1 1 0;
min-width: 0
}

.aboutus .teamcard h4 {
font-size: 18px;
line-height: 1.4;
font-weight: 700;
color: #1b2b2a;
margin: 0 0 8px
}

.aboutus .teamcard .role {
font-size: 14px;
line-height: 1.4;
color: #7EBFB7;
font-weight: 600;
margin-bottom: 8px
}

.aboutus .teamcard .desc {
font-size: 14px;
line-height: 1.6;
color: #2d3f3e;
margin: 0
}

.aboutus .approachsection {
background: linear-gradient(180deg, #7EBFB7 0%, #A0CBC9 100%);
padding: 64px 0;
position: relative
}

.aboutus .approachsection .scalloptop {
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 32px;
background: #fff;
-webkit-mask-image: radial-gradient(circle 16px at 16px 0%, transparent 16px, #000 16px);
mask-image: radial-gradient(circle 16px at 16px 0%, transparent 16px, #000 16px);
-webkit-mask-size: 32px 32px;
mask-size: 32px 32px;
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x
}

.aboutus .approachsection .polygonbg {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none
}

.aboutus .approachsection .polygonbg svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .07
}

.aboutus .approachrow {
display: flex;
flex-direction: row;
gap: 64px;
align-items: flex-start
}

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

.aboutus .approachtext h2 {
font-size: 42px;
line-height: 1.2;
font-weight: 800;
color: #fff;
margin: 0 0 16px
}

.aboutus .approachtext h2 .firstword {
font-size: 56px
}

.aboutus .approachtext .quotepara {
font-size: 18px;
line-height: 1.6;
color: #fff;
font-weight: 600;
border-top: 2px solid #fff6;
padding-top: 16px;
margin: 0 0 16px
}

.aboutus .approachtext .bodypara {
font-size: 18px;
line-height: 1.6;
color: #ffffffe0;
margin: 0 0 16px
}

.aboutus .approachimages {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 16px
}

.aboutus .approachimages .imgwrap {
width: 100%;
height: 220px;
border-radius: 20px;
overflow: hidden;
box-shadow: -1px 12px 60px -2px #7ebfb724
}

.aboutus .approachimages .imgwrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block
}

.aboutus .approachimages .imgpair {
display: flex;
flex-direction: row;
gap: 16px
}

.aboutus .approachimages .imgpair .imgwrapsmall {
flex: 1 1 0;
height: 160px;
border-radius: 2px;
overflow: hidden;
box-shadow: -1px 1px 2px -2px #7ebfb712
}

.aboutus .approachimages .imgpair .imgwrapsmall img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block
}

@media (max-width: 1280px) {
.aboutus .titletext h1 {
font-size: 42px
}

.aboutus .titleimage {
flex: 0 0 280px
}

.aboutus .titleimage .imageframe {
width: 280px;
height: 360px
}

.aboutus .pyramidchart .plevel:nth-child(1) .pbar {
width: 240px
}

.aboutus .pyramidchart .plevel:nth-child(2) .pbar {
width: 190px
}

.aboutus .pyramidchart .plevel:nth-child(3) .pbar {
width: 150px
}

.aboutus .pyramidchart .plevel:nth-child(4) .pbar {
width: 110px
}

.aboutus .pyramidchart .plevel:nth-child(5) .pbar {
width: 70px
}
}

@media (max-width: 768px) {
.aboutus .pageinner {
padding: 0 16px
}

.aboutus .titlerow {
flex-direction: column;
gap: 32px;
align-items: flex-start
}

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

.aboutus .titleimage .imageframe {
width: 100%;
height: 280px
}

.aboutus .titleimage .anchorquote {
display: none
}

.aboutus .titlesection {
padding: 32px 0 64px
}

.aboutus .titletext h1 {
font-size: 42px
}

.aboutus .storyrow {
flex-direction: column;
gap: 32px
}

.aboutus .pyramidrow {
flex-direction: column;
gap: 32px
}

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

.aboutus .teamcard.withportrait {
grid-column: auto
}

.aboutus .approachrow {
flex-direction: column;
gap: 32px
}

.aboutus .pyramidchart .plevel:nth-child(1) .pbar {
width: 100%;
max-width: 260px
}

.aboutus .pyramidchart .plevel:nth-child(2) .pbar {
width: 80%;
max-width: 210px
}

.aboutus .pyramidchart .plevel:nth-child(3) .pbar {
width: 60%;
max-width: 160px
}

.aboutus .pyramidchart .plevel:nth-child(4) .pbar {
width: 45%;
max-width: 120px
}

.aboutus .pyramidchart .plevel:nth-child(5) .pbar {
width: 28%;
max-width: 80px
}
}

.contactus {
position: relative;
overflow: hidden
}

.contactus .scanlines {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
background: repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, #7ebfb708 3px, #7ebfb708 4px);
animation: scanlinedrift 18s linear infinite
}

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

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

.contactus .gridback {
position: absolute;
inset: 0;
pointer-events: none;
background-image: linear-gradient(#7ebfb70f 1px, transparent 1px), linear-gradient(90deg, #7ebfb70f 1px, transparent 1px);
background-size: 64px 64px;
z-index: 0
}

.contactus .panel {
position: relative;
z-index: 1
}

.contactus .reach {
display: grid;
grid-template-columns: 180px 1fr;
min-height: 520px;
max-width: 1400px;
margin: 0 auto;
padding: 64px 32px;
gap: 64px;
align-items: start
}

.contactus .imagestrip {
width: 180px;
height: 480px;
overflow: hidden;
border-radius: 2px;
position: relative;
flex-shrink: 0
}

.contactus .imagestrip img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block
}

.contactus .imagestrip .diagonalover {
position: absolute;
inset: 0;
background: linear-gradient(160deg, #7ebfb78c 0%, #e9dece2e 100%)
}

.contactus .textarea {
display: flex;
flex-direction: column;
gap: 32px;
padding-top: 16px
}

.contactus .pagelabel {
font-size: 14px;
color: #7EBFB7;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase
}

.contactus .maintitle {
font-size: 56px;
line-height: 1.2;
font-weight: 800;
color: #1e2a2a;
margin: 0
}

.contactus .maintitle .accent {
color: #7EBFB7 !important
}

.contactus .descriptor {
font-size: 18px;
line-height: 1.6;
color: #3a4a48;
max-width: 560px;
margin: 0
}

.contactus .actionlinks {
display: flex;
flex-direction: row;
gap: 32px;
align-items: center
}

.contactus .actionlinks a {
font-size: 14px;
font-weight: 700;
color: #1e2a2a;
text-decoration: none;
border-bottom: 2px solid #7EBFB7;
padding-bottom: 2px;
transition: color .2s cubic-bezier(0.4, 0, 0.2, 1), border-color .25s cubic-bezier(0.0, 0, 0.2, 1)
}

.contactus .actionlinks a:hover {
color: #7EBFB7;
border-color: #A0CBC9
}

.contactus .actionlinks .secondary {
color: #5a7a78;
border-bottom-color: transparent
}

.contactus .actionlinks .secondary:hover {
color: #7EBFB7;
border-bottom-color: #A0CBC9
}

.contactus .bracketleft,
.contactus .bracketright {
position: absolute;
font-size: 220px;
line-height: 1;
color: #7ebfb712;
font-weight: 200;
pointer-events: none;
user-select: none;
z-index: 0
}

.contactus .bracketleft {
left: 8px;
top: 32px
}

.contactus .bracketright {
right: 8px;
top: 32px
}

.contactus .curvedivider {
width: 100%;
overflow: hidden;
line-height: 0;
position: relative;
z-index: 1
}

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

.contactus .formblock {
background: linear-gradient(180deg, #f5f2ee 0%, #eef7f6 100%);
padding: 64px 32px;
position: relative
}

.contactus .formblock .gridback {
background-image: linear-gradient(#a0cbc914 1px, transparent 1px), linear-gradient(90deg, #a0cbc914 1px, transparent 1px);
background-size: 32px 32px
}

.contactus .forminner {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
position: relative;
z-index: 1
}

.contactus .formleft {
display: flex;
flex-direction: column;
gap: 32px
}

.contactus .formtag {
display: inline-block;
background: #7EBFB7;
color: #fff;
font-size: 14px;
font-weight: 700;
padding: 8px 16px;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: .06em
}

.contactus .formheading {
font-size: 42px;
line-height: 1.2;
font-weight: 800;
color: #1e2a2a;
margin: 0
}

.contactus .formheading .accent {
color: #7EBFB7 !important
}

.contactus .formdesc {
font-size: 18px;
line-height: 1.6;
color: #3a4a48;
margin: 0
}

.contactus .formdesc strong {
color: #7EBFB7;
font-weight: 700
}

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

.contactus .infoitem {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 16px;
padding: 16px;
background: #fff;
border-radius: 2px;
box-shadow: -1px 1px 2px -2px #7ebfb712 -1px 4px 25px -2px #7ebfb71a
}

.contactus .infoitem .iconbox {
width: 40px;
height: 40px;
background: #E9DECE;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}

.contactus .infoitem .iconbox svg {
width: 20px;
height: 20px;
stroke: #1e2a2a;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round
}

.contactus .infoitem .infocontent {
display: flex;
flex-direction: column;
gap: 8px
}

.contactus .infoitem .infolabel {
font-size: 14px;
color: #7a8f8d;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .07em
}

.contactus .infoitem .infovalue {
font-size: 18px;
color: #1e2a2a;
font-weight: 600;
line-height: 1.4
}

.contactus .infoitem .infovalue a {
color: #1e2a2a;
text-decoration: none;
transition: color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactus .infoitem .infovalue a:hover {
color: #7EBFB7
}

.contactus .formright {
display: flex;
flex-direction: column;
gap: 0
}

.contactus .contactform {
background: #fff;
border-radius: 2px;
padding: 32px;
box-shadow: -1px 4px 25px -2px #7ebfb71a -1px 12px 60px -2px #7ebfb724;
display: flex;
flex-direction: column;
gap: 16px
}

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

.contactus .fieldlabel {
font-size: 14px;
font-weight: 700;
color: #1e2a2a;
text-transform: uppercase;
letter-spacing: .06em
}

.contactus .fieldinput {
width: 100%;
padding: 16px;
border: 1.5px solid #d4e8e6;
border-radius: 2px;
font-size: 18px;
color: #1e2a2a;
background: #f8fdfc;
outline: none;
box-sizing: border-box;
transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .25s cubic-bezier(0.0, 0, 0.2, 1)
}

.contactus .fieldinput::placeholder {
color: #1e2a2a66
}

.contactus .fieldinput:focus {
border-color: #7EBFB7;
box-shadow: inset 0 4px 8px #7ebfb714
}

.contactus .timelineselect {
width: 100%;
padding: 16px;
border: 1.5px solid #d4e8e6;
border-radius: 2px;
font-size: 18px;
color: #1e2a2a;
background: #f8fdfc;
outline: none;
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237EBFB7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
cursor: pointer;
transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .25s cubic-bezier(0.0, 0, 0.2, 1)
}

.contactus .timelineselect:focus {
border-color: #7EBFB7;
box-shadow: inset 0 4px 8px #7ebfb714
}

.contactus .privacyrow {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 16px;
padding: 16px;
background: #f0f9f8;
border-radius: 2px
}

.contactus .privacyrow input[type="checkbox"] {
width: 20px;
height: 20px;
flex-shrink: 0;
accent-color: #7EBFB7;
cursor: pointer;
margin-top: 2px
}

.contactus .privacytext {
font-size: 14px;
color: #3a4a48;
line-height: 1.6
}

.contactus .privacytext a {
color: #7EBFB7;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
transition: color .15s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactus .privacytext a:hover {
color: #5aa09a
}

.contactus .submitbtn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 16px 32px;
background: #1e2a2a;
color: #fff;
font-size: 18px;
font-weight: 700;
border: none;
border-radius: 2px;
cursor: pointer;
transition: background .2s cubic-bezier(0.4, 0, 0.2, 1), transform .15s cubic-bezier(0.0, 0, 0.2, 1);
align-self: flex-start;
box-shadow: -1px 4px 25px -2px #7ebfb71a
}

.contactus .submitbtn:hover {
background: #7EBFB7;
transform: scale(1.04)
}

.contactus .submitbtn:focus {
outline: 2px solid #7EBFB7;
outline-offset: 3px
}

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

.contactus .submitbtn svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round
}

.contactus .curvedivider2 {
width: 100%;
overflow: hidden;
line-height: 0;
position: relative;
z-index: 1
}

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

.contactus .detailblock {
background: #1e2a2a;
padding: 64px 32px;
position: relative;
overflow: hidden
}

.contactus .detailblock .gridback {
background-image: linear-gradient(#7ebfb712 1px, transparent 1px), linear-gradient(90deg, #7ebfb712 1px, transparent 1px);
background-size: 64px 64px
}

.contactus .detailinner {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 32px;
position: relative;
z-index: 1;
align-items: start
}

.contactus .detailcard {
display: flex;
flex-direction: column;
gap: 16px;
padding: 32px;
border-radius: 2px;
position: relative
}

.contactus .detailcard.raised {
background: #7ebfb71f;
box-shadow: inset 0 6px 10px #7ebfb714 -1px 4px 25px -2px #7ebfb71a;
margin-top: -32px
}

.contactus .detailcard.flat {
background: #ffffff0a
}

.contactus .detailcard.tinted {
background: #e9dece14
}

.contactus .detailcard .cardicon {
width: 48px;
height: 48px;
border-radius: 2px;
background: #7ebfb733;
display: flex;
align-items: center;
justify-content: center
}

.contactus .detailcard .cardicon svg {
width: 24px;
height: 24px;
stroke: #A0CBC9;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round
}

.contactus .detailcard .cardtitle {
font-size: 22px;
font-weight: 800;
color: #fff;
line-height: 1.2;
margin: 0
}

.contactus .detailcard .cardtitle .accent {
color: #7EBFB7
}

.contactus .detailcard .cardbody {
font-size: 18px;
line-height: 1.6;
color: #ffffffb8;
margin: 0
}

.contactus .detailcard .cardmeta {
font-size: 14px;
color: #A0CBC9;
font-weight: 600;
line-height: 1.4
}

.contactus .detailcard .cardmeta span {
display: inline
}

.contactus .detailcard .cardmeta span+span::before {
content: " / ";
opacity: .5
}

@media (max-width: 1280px) {
.contactus .reach {
grid-template-columns: 140px 1fr;
gap: 32px;
padding: 64px 32px
}

.contactus .imagestrip {
width: 140px;
height: 400px
}

.contactus .maintitle {
font-size: 42px
}

.contactus .forminner {
grid-template-columns: 1fr 1fr;
gap: 32px
}

.contactus .detailinner {
grid-template-columns: 1fr 1fr
}

.contactus .detailcard.raised {
margin-top: 0
}
}

@media (max-width: 768px) {
.contactus .reach {
grid-template-columns: 1fr;
padding: 32px 16px;
gap: 32px
}

.contactus .imagestrip {
width: 100%;
height: 220px
}

.contactus .maintitle {
font-size: 42px
}

.contactus .bracketleft,
.contactus .bracketright {
display: none
}

.contactus .formblock {
padding: 32px 16px
}

.contactus .forminner {
grid-template-columns: 1fr;
gap: 32px
}

.contactus .detailblock {
padding: 32px 16px
}

.contactus .detailinner {
grid-template-columns: 1fr
}

.contactus .detailcard.raised {
margin-top: 0
}

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

.services {
max-width: 100%;
overflow-x: hidden
}

.services .pagecontainer {
max-width: 1400px;
margin: 0 auto;
padding: 0 32px
}

.services .titleblock {
position: relative;
padding: 64px 0;
background: linear-gradient(160deg, #7EBFB7 0%, #E9DECE 55%, #fff 100%);
overflow: hidden
}

.services .titleblock .stripebg {
position: absolute;
inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(135deg, #7ebfb714 0px, #7ebfb714 1px, transparent 1px, transparent 28px)
}

.services .titleblock .grainoverlay {
position: absolute;
inset: 0;
pointer-events: none;
opacity: .18;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-size: 200px 200px
}

.services .titleblock .dotgroup {
position: absolute;
bottom: 32px;
right: 64px;
pointer-events: none;
display: flex;
flex-direction: row;
gap: 8px;
align-items: flex-end
}

.services .titleblock .dotgroup span {
display: block;
border-radius: 20px;
background: #7ebfb759
}

.services .titleblock .dotgroup span:nth-child(1) {
width: 6px;
height: 6px
}

.services .titleblock .dotgroup span:nth-child(2) {
width: 10px;
height: 10px
}

.services .titleblock .dotgroup span:nth-child(3) {
width: 16px;
height: 16px
}

.services .titleblock .dotgroup span:nth-child(4) {
width: 8px;
height: 8px
}

.services .titleblock .tbinner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
max-width: 1400px;
margin: 0 auto;
padding: 0 32px
}

.services .titleblock .tblabel {
display: inline-block;
font-size: 14px;
line-height: 1.4;
background: #7ebfb738;
color: #2a6b64;
padding: 8px 16px;
border-radius: 2px;
margin-bottom: 16px;
font-weight: 600;
letter-spacing: .04em
}

.services .titleblock .tbheading {
font-size: 56px;
line-height: 1.2;
font-weight: 800;
color: #1b4a46;
margin: 0 0 16px
}

.services .titleblock .tbheading em {
font-style: normal;
font-size: 42px;
font-weight: 400;
color: #3d7f78;
display: block
}

.services .titleblock .tbdesc {
font-size: 18px;
line-height: 1.6;
color: #2e5e5a;
margin: 0;
max-width: 480px
}

.services .titleblock .tbimgwrap {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: -1px 12px 60px -2px #7ebfb724
}

.services .titleblock .tbimgwrap img {
width: 100%;
height: 420px;
object-fit: cover;
object-position: center;
display: block
}

.services .titleblock .imgcorner {
position: absolute;
top: 0;
left: 0;
width: 64px;
height: 64px;
background: #7EBFB7;
border-radius: 0 0 20px 0
}

.services .dividerrow {
display: flex;
align-items: center;
justify-content: center;
padding: 32px 0;
background: #fff
}

.services .dividerrow .monogram {
font-size: 42px;
font-weight: 800;
color: #A0CBC9;
line-height: 1.2;
letter-spacing: -.02em;
user-select: none;
display: flex;
align-items: center;
gap: 16px
}

.services .dividerrow .monogram::before,
.services .dividerrow .monogram::after {
content: '';
display: block;
width: 80px;
height: 1px;
background: linear-gradient(90deg, transparent, #A0CBC9, transparent)
}

.services .offerblock {
background: linear-gradient(180deg, #f4f0ea 0%, #fff 100%);
padding: 64px 0
}

.services .offerblock .obinner {
max-width: 1400px;
margin: 0 auto;
padding: 0 32px
}

.services .offerblock .obheadrow {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
margin-bottom: 64px;
align-items: start
}

.services .offerblock .obheading {
font-size: 42px;
line-height: 1.2;
font-weight: 700;
color: #1b4a46;
margin: 0
}

.services .offerblock .obheading strong {
font-size: 56px;
display: block;
color: #7EBFB7;
line-height: 1.2
}

.services .offerblock .obmeta {
padding-top: 8px
}

.services .offerblock .obdesc {
font-size: 18px;
line-height: 1.6;
color: #3a3a3a;
margin: 0 0 16px
}

.services .offerblock .obstats {
display: flex;
flex-direction: row;
gap: 32px;
margin-top: 32px
}

.services .offerblock .statitem {
display: flex;
flex-direction: column;
gap: 8px
}

.services .offerblock .statnum {
font-size: 42px;
font-weight: 800;
color: #7EBFB7;
line-height: 1.2
}

.services .offerblock .statlabel {
font-size: 14px;
line-height: 1.4;
color: #666
}

.services .offerblock .densegrid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 16px
}

.services .offerblock .anchorcard {
grid-row: 1 / 3;
background: #1b4a46;
border-radius: 20px;
padding: 32px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: -1px 12px 60px -2px #7ebfb724;
position: relative;
overflow: hidden
}

.services .offerblock .anchorcard .acornament {
position: absolute;
top: -32px;
right: -32px;
width: 120px;
height: 120px;
border-radius: 20px;
background: #7ebfb726;
pointer-events: none;
animation: rotatecw 18s linear infinite
}

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

to {
transform: rotate(360deg)
}
}

.services .offerblock .anchorcard .actag {
display: inline-block;
font-size: 14px;
line-height: 1.4;
background: #7ebfb72e;
color: #A0CBC9;
padding: 8px 16px;
border-radius: 2px;
font-weight: 600;
margin-bottom: 16px;
width: fit-content
}

.services .offerblock .anchorcard .achtitle {
font-size: 22px;
line-height: 1.4;
font-weight: 700;
color: #fff;
margin: 0 0 16px
}

.services .offerblock .anchorcard .acbody {
font-size: 18px;
line-height: 1.6;
color: #ffffffbf;
margin: 0 0 32px;
flex-grow: 1
}

.services .offerblock .anchorcard .acprice {
font-size: 42px;
font-weight: 800;
color: #7EBFB7;
line-height: 1.2
}

.services .offerblock .anchorcard .acpricenote {
font-size: 14px;
color: #ffffff80;
margin-top: 8px
}

.services .offerblock .anchorcard .aclink {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 32px;
font-size: 18px;
font-weight: 600;
color: #7EBFB7;
text-decoration: none;
transition: color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.services .offerblock .anchorcard .aclink:hover {
color: #A0CBC9
}

.services .offerblock .compactcard {
background: #fff;
border-radius: 20px;
padding: 16px;
box-shadow: -1px 4px 25px -2px #7ebfb71a;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
overflow: hidden;
transition: box-shadow .2s cubic-bezier(0.4, 0, 0.2, 1), transform .15s cubic-bezier(0.0, 0, 0.2, 1)
}

.services .offerblock .compactcard:active {
transform: scale(0.98);
box-shadow: inset 0 6px 10px -4px #7ebfb72e -1px 1px 2px -2px #7ebfb712
}

.services .offerblock .compactcard .ccaccent {
position: absolute;
top: 0;
right: 0;
width: 32px;
height: 32px;
background: #E9DECE;
border-radius: 0 20px 0 20px
}

.services .offerblock .compactcard .ccicon {
width: 32px;
height: 32px;
border-radius: 2px;
background: #E9DECE;
display: flex;
align-items: center;
justify-content: center;
color: #1b4a46;
flex-shrink: 0
}

.services .offerblock .compactcard .cctitle {
font-size: 14px;
font-weight: 700;
color: #1b4a46;
line-height: 1.4;
margin: 0
}

.services .offerblock .compactcard .ccdesc {
font-size: 14px;
color: #555;
line-height: 1.6;
margin: 0
}

.services .offerblock .compactcard .ccbadge {
display: inline-block;
font-size: 14px;
background: #7EBFB7;
color: #fff;
padding: 4px 8px;
border-radius: 2px;
font-weight: 600;
width: fit-content
}

.services .timeline {
background: #fff;
padding: 64px 0
}

.services .timeline .tlinner {
max-width: 1400px;
margin: 0 auto;
padding: 0 32px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start
}

.services .timeline .tlheading {
font-size: 42px;
line-height: 1.2;
font-weight: 700;
color: #1b4a46;
margin: 0 0 16px
}

.services .timeline .tlheading strong {
font-size: 56px;
display: block;
font-weight: 800;
color: #3d7f78
}

.services .timeline .tldesc {
font-size: 18px;
line-height: 1.6;
color: #3a3a3a;
margin: 0 0 32px
}

.services .timeline .tlquote {
border-radius: 20px;
background: #E9DECE;
padding: 32px;
font-size: 18px;
line-height: 1.6;
color: #2e5e5a;
font-weight: 500;
box-shadow: -1px 4px 25px -2px #7ebfb71a
}

.services .timeline .tlsteps {
display: flex;
flex-direction: column;
gap: 0;
position: relative
}

.services .timeline .tlsteps::before {
content: '';
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, #7EBFB7 0%, #E9DECE 100%);
border-radius: 2px
}

.services .timeline .tlstep {
display: flex;
flex-direction: row;
gap: 16px;
align-items: flex-start;
padding: 0 0 32px;
position: relative
}

.services .timeline .tlstep:last-child {
padding-bottom: 0
}

.services .timeline .tlstep .stepindicator {
width: 40px;
height: 40px;
border-radius: 20px;
background: #7EBFB7;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
z-index: 1;
box-shadow: -1px 4px 25px -2px #7ebfb724;
transition: background .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.services .timeline .tlstep .stepindicator svg {
width: 18px;
height: 18px;
stroke: #fff;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round
}

.services .timeline .tlstep.done .stepindicator {
background: #1b4a46
}

.services .timeline .tlstep.active .stepindicator {
background: #7EBFB7
}

.services .timeline .tlstep.pending .stepindicator {
background: #A0CBC9
}

.services .timeline .tlstep .stepcontent {
padding-top: 8px;
flex: 1
}

.services .timeline .tlstep .steptag {
display: inline-block;
font-size: 14px;
line-height: 1.4;
font-weight: 600;
padding: 4px 8px;
border-radius: 2px;
margin-bottom: 8px
}

.services .timeline .tlstep.done .steptag {
background: #E9DECE;
color: #1b4a46
}

.services .timeline .tlstep.active .steptag {
background: #7ebfb733;
color: #2a6b64
}

.services .timeline .tlstep.pending .steptag {
background: #a0cbc933;
color: #3d7f78
}

.services .timeline .tlstep .steptitle {
font-size: 18px;
font-weight: 700;
color: #1b4a46;
margin: 0 0 8px;
line-height: 1.4
}

.services .timeline .tlstep .steptext {
font-size: 14px;
line-height: 1.6;
color: #555;
margin: 0
}

.services .reviewrow {
display: flex;
flex-direction: row;
gap: 32px;
margin-top: 32px;
flex-wrap: wrap
}

.services .reviewcard {
background: #fff;
border-radius: 20px;
padding: 16px;
box-shadow: -1px 4px 25px -2px #7ebfb71a;
display: flex;
flex-direction: row;
gap: 16px;
align-items: flex-start;
flex: 1;
min-width: 200px
}

.services .reviewcard .portrait {
width: 56px;
height: 56px;
border-radius: 20px;
overflow: hidden;
flex-shrink: 0
}

.services .reviewcard .portrait img {
width: 56px;
height: 56px;
object-fit: cover;
object-position: center;
display: block
}

.services .reviewcard .reviewtext {
flex: 1
}

.services .reviewcard .reviewname {
font-size: 14px;
font-weight: 700;
color: #1b4a46;
margin: 0 0 4px;
line-height: 1.4
}

.services .reviewcard .reviewbody {
font-size: 14px;
color: #555;
line-height: 1.6;
margin: 0
}

.services .reviewcard .stars {
display: flex;
flex-direction: row;
gap: 2px;
margin-bottom: 8px
}

.services .reviewcard .stars span {
width: 10px;
height: 10px;
background: #7EBFB7;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)
}

@media (max-width: 768px) {
.services .titleblock .tbinner {
grid-template-columns: 1fr;
gap: 32px;
padding: 0 16px
}

.services .titleblock .tbheading {
font-size: 42px
}

.services .titleblock .tbimgwrap img {
height: 260px
}

.services .titleblock {
padding: 32px 0
}

.services .offerblock .obinner {
padding: 0 16px
}

.services .offerblock .obheadrow {
grid-template-columns: 1fr;
gap: 32px;
margin-bottom: 32px
}

.services .offerblock .densegrid {
grid-template-columns: 1fr;
grid-template-rows: auto
}

.services .offerblock .anchorcard {
grid-row: auto
}

.services .offerblock .obstats {
flex-direction: column;
gap: 16px
}

.services .offerblock {
padding: 32px 0
}

.services .timeline .tlinner {
grid-template-columns: 1fr;
gap: 32px;
padding: 0 16px
}

.services .timeline {
padding: 32px 0
}

.services .reviewrow {
flex-direction: column
}

.services .dividerrow .monogram::before,
.services .dividerrow .monogram::after {
width: 40px
}
}

@media (min-width: 769px) and (max-width: 1280px) {
.services .titleblock .tbheading {
font-size: 42px
}

.services .offerblock .densegrid {
grid-template-columns: 1.5fr 1fr 1fr
}

.services .offerblock .obheading strong {
font-size: 42px
}

.services .timeline .tlheading strong {
font-size: 42px
}
}

.front {
max-width: 100%;
overflow-x: hidden
}

.front .row-full {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
padding-left: 32px;
padding-right: 32px
}

@keyframes shadowpulse {

0%,
100% {
box-shadow: -1px 4px 25px -2px #7ebfb71a
}

50% {
box-shadow: -1px 12px 60px -2px #7ebfb738
}
}

@keyframes shadowpulse2 {

0%,
100% {
box-shadow: -1px 1px 2px -2px #a0cbc912 -1px 4px 25px -2px #a0cbc91a
}

50% {
box-shadow: -1px 1px 2px -2px #a0cbc91f -1px 12px 60px -2px #a0cbc933
}
}

::selection {
background: #7EBFB7;
color: #1a1a1a
}

.front .title-area {
position: relative;
padding-top: 64px;
padding-bottom: 64px;
text-align: center;
background: #fff
}

.front .title-image-wrap {
position: relative;
width: 100%;
max-width: 900px;
margin: 0 auto 32px;
border-radius: 20px;
overflow: hidden;
height: 420px
}

.front .title-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block
}

.front .title-image-wrap::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 55%;
background: linear-gradient(to bottom, #fff0 0%, #ffffffeb 100%);
pointer-events: none
}

.front .title-deco {
position: absolute;
top: 32px;
left: 50%;
transform: translateX(-50%);
width: 340px;
height: 340px;
border-radius: 50%;
background: #7ebfb712;
pointer-events: none;
z-index: 0
}

.front .title-text {
position: relative;
z-index: 1;
max-width: 680px;
margin: 0 auto
}

.front .title-text h1 {
font-size: 56px;
line-height: 1.2;
font-weight: 800;
color: #1b2b2a;
margin-bottom: 16px
}

.front .title-text h1 span {
color: #7EBFB7
}

.front .title-text p {
font-size: 18px;
line-height: 1.6;
color: #2e3d3c;
margin-bottom: 32px
}

.front .title-actions {
display: flex;
flex-direction: row;
gap: 16px;
justify-content: center;
flex-wrap: wrap
}

.front .btn-primary {
display: inline-block;
padding: 16px 32px;
background: #7EBFB7;
color: #fff;
font-size: 14px;
font-weight: 700;
border-radius: 2px;
text-decoration: none;
transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1), background .18s cubic-bezier(0.4, 0, 0.2, 1);
animation: shadowpulse 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite
}

.front .btn-primary:hover {
background: #5fa89f;
transform: scale(1.04)
}

.front .btn-secondary {
display: inline-block;
padding: 16px 32px;
background: transparent;
color: #2e3d3c;
font-size: 14px;
font-weight: 700;
border-radius: 2px;
border: 2px solid #A0CBC9;
text-decoration: none;
transition: transform .22s cubic-bezier(0.0, 0, 0.2, 1), border-color .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.front .btn-secondary:hover {
border-color: #7EBFB7;
transform: scale(1.04)
}

.front .example-area {
background: #f4f0ea;
padding-top: 64px;
padding-bottom: 64px;
position: relative
}

.front .example-area::before {
content: '';
display: block;
height: 8px;
background: linear-gradient(to bottom, #7ebfb721, transparent);
position: absolute;
top: 0;
left: 0;
right: 0
}

.front .example-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center
}

.front .example-image-wrap {
border-radius: 20px;
overflow: hidden;
height: 380px;
box-shadow: -1px 4px 25px -2px #7ebfb71a
}

.front .example-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block
}

.front .example-text h2 {
font-size: 42px;
line-height: 1.2;
font-weight: 800;
color: #1b2b2a;
margin-bottom: 16px
}

.front .example-text h2 em {
font-style: normal;
color: #7EBFB7
}

.front .example-text p {
font-size: 18px;
line-height: 1.6;
color: #2e3d3c;
margin-bottom: 16px
}

.front .example-text blockquote {
font-size: 18px;
line-height: 1.6;
color: #1b2b2a;
font-weight: 700;
border-top: 2px solid #7EBFB7;
border-bottom: 2px solid #A0CBC9;
padding: 16px 0;
margin: 16px 0
}

.front .example-tags {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px
}

.front .tag {
display: inline-block;
padding: 8px 16px;
border-radius: 2px;
font-size: 14px;
font-weight: 600;
background: #E9DECE;
color: #2e3d3c
}

.front .tag.teal {
background: #7EBFB7;
color: #fff
}

.front .tag.soft {
background: #A0CBC9;
color: #fff
}

.front .pattern-area {
background: #fff;
padding-top: 64px;
padding-bottom: 64px;
position: relative
}

.front .pattern-area::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6px;
background: linear-gradient(to bottom, #7EBFB7, #A0CBC9);
border-radius: 0 2px 2px 0
}

.front .pattern-header {
max-width: 600px;
margin-bottom: 32px
}

.front .pattern-header h2 {
font-size: 42px;
line-height: 1.2;
font-weight: 800;
color: #1b2b2a;
margin-bottom: 16px
}

.front .pattern-header p {
font-size: 18px;
line-height: 1.6;
color: #2e3d3c
}

.front .pattern-columns {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
align-items: start
}

.front .pattern-card {
border-radius: 20px;
padding: 32px;
background: #f4f0ea;
transition: box-shadow .25s cubic-bezier(0.4, 0, 0.2, 1)
}

.front .pattern-card:hover {
box-shadow: -1px 12px 60px -2px #7ebfb724
}

.front .pattern-card.accent {
background: #7EBFB7;
color: #fff;
animation: shadowpulse2 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite
}

.front .pattern-card h5 {
font-size: 22px;
line-height: 1.4;
font-weight: 800;
margin-bottom: 8px;
color: #1b2b2a
}

.front .pattern-card.accent h5 {
color: #fff
}

.front .pattern-card p {
font-size: 14px;
line-height: 1.6;
color: #2e3d3c
}

.front .pattern-card.accent p {
color: #ffffffe6
}

.front .portrait-area {
background: #E9DECE;
padding-top: 64px;
padding-bottom: 64px;
position: relative
}

.front .portrait-grid {
display: grid;
grid-template-columns: 340px 1fr;
gap: 64px;
align-items: center
}

.front .portrait-image-wrap {
border-radius: 20px;
overflow: hidden;
aspect-ratio: 3/4;
width: 100%;
box-shadow: -1px 12px 60px -2px #7ebfb724
}

.front .portrait-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block
}

.front .portrait-text h2 {
font-size: 42px;
line-height: 1.2;
font-weight: 800;
color: #1b2b2a;
margin-bottom: 16px
}

.front .portrait-text blockquote {
font-size: 22px;
line-height: 1.4;
color: #1b2b2a;
font-weight: 700;
padding: 16px 0;
border-top: 2px solid #7EBFB7;
margin: 16px 0
}

.front .portrait-text p {
font-size: 18px;
line-height: 1.6;
color: #2e3d3c;
margin-bottom: 16px
}

.front .portrait-meta {
font-size: 14px;
color: #5a6e6d;
line-height: 1.4
}

.front .portrait-meta strong {
color: #7EBFB7;
font-weight: 700
}

.front .adapt-area {
background: #1b2b2a;
padding-top: 64px;
padding-bottom: 64px;
position: relative;
overflow: hidden
}

.front .adapt-spot {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
background: radial-gradient(ellipse at center, #7ebfb721 0%, transparent 70%);
pointer-events: none;
border-radius: 50%
}

.front .adapt-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
position: relative;
z-index: 1
}

.front .adapt-text h2 {
font-size: 42px;
line-height: 1.2;
font-weight: 800;
color: #fff;
margin-bottom: 16px
}

.front .adapt-text h2 span {
color: #7EBFB7
}

.front .adapt-text p {
font-size: 18px;
line-height: 1.6;
color: #fffc;
margin-bottom: 16px
}

.front .adapt-list {
list-style: none;
padding: 0;
margin: 16px 0 0
}

.front .adapt-list li {
font-size: 14px;
line-height: 1.9;
color: #ffffffbf;
padding-left: 16px;
position: relative
}

.front .adapt-list li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: #7EBFB7
}

.front .adapt-image-wrap {
border-radius: 20px;
overflow: hidden;
height: 400px;
box-shadow: -1px 12px 60px -2px #7ebfb724
}

.front .adapt-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block
}

.front .differ-area {
background: #fff;
padding-top: 64px;
padding-bottom: 64px;
position: relative
}

.front .differ-area::before {
content: '';
display: block;
height: 40px;
background: linear-gradient(to bottom, #a0cbc92e, transparent);
position: absolute;
top: 0;
left: 0;
right: 0
}

.front .differ-header {
text-align: center;
max-width: 640px;
margin: 0 auto 32px
}

.front .differ-header h2 {
font-size: 42px;
line-height: 1.2;
font-weight: 800;
color: #1b2b2a;
margin-bottom: 16px
}

.front .differ-header p {
font-size: 18px;
line-height: 1.6;
color: #2e3d3c
}

.front .differ-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px
}

.front .differ-card {
border-radius: 20px;
padding: 32px;
background: #f4f0ea;
box-shadow: -1px 1px 2px -2px #7ebfb712;
transition: box-shadow .2s cubic-bezier(0.4, 0, 0.2, 1), transform .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.front .differ-card:hover {
box-shadow: -1px 12px 60px -2px #7ebfb724;
transform: translateY(-2px)
}

.front .differ-card-icon {
width: 48px;
height: 48px;
border-radius: 2px;
background: #7EBFB7;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px
}

.front .differ-card-icon svg {
width: 24px;
height: 24px;
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round
}

.front .differ-card h5 {
font-size: 22px;
line-height: 1.4;
font-weight: 800;
color: #1b2b2a;
margin-bottom: 8px
}

.front .differ-card p {
font-size: 14px;
line-height: 1.6;
color: #2e3d3c
}

.front .differ-image-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-top: 32px
}

.front .differ-img-wrap {
border-radius: 20px;
overflow: hidden;
height: 280px
}

.front .differ-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block
}

.front .context-area {
background: #E9DECE;
padding-top: 64px;
padding-bottom: 64px
}

.front .context-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 32px
}

.front .context-header {
grid-column: 1 / -1;
margin-bottom: 16px
}

.front .context-header h2 {
font-size: 42px;
line-height: 1.2;
font-weight: 800;
color: #1b2b2a;
margin-bottom: 16px
}

.front .context-header p {
font-size: 18px;
line-height: 1.6;
color: #2e3d3c;
max-width: 560px
}

.front .context-item {
background: #fff;
border-radius: 20px;
padding: 32px;
box-shadow: -1px 4px 25px -2px #a0cbc91a;
transition: box-shadow .25s cubic-bezier(0.0, 0, 0.2, 1)
}

.front .context-item:hover {
box-shadow: -1px 12px 60px -2px #a0cbc924
}

.front .context-item h5 {
font-size: 18px;
line-height: 1.4;
font-weight: 800;
color: #1b2b2a;
margin-bottom: 8px
}

.front .context-item p {
font-size: 14px;
line-height: 1.6;
color: #2e3d3c
}

.front .context-item .context-num {
font-size: 42px;
font-weight: 800;
color: #7EBFB7;
line-height: 1.2;
margin-bottom: 8px;
display: block
}

.front .slash-list {
font-size: 14px;
color: #5a6e6d;
line-height: 1.9;
margin-top: 8px
}

.front .slash-list span {
margin: 0 8px;
color: #A0CBC9;
font-weight: 700
}

@media (max-width: 1280px) {
.front .pattern-columns {
grid-template-columns: repeat(2, 1fr)
}

.front .example-grid {
gap: 32px
}

.front .adapt-grid {
gap: 32px
}

.front .portrait-grid {
grid-template-columns: 260px 1fr;
gap: 32px
}
}

@media (max-width: 768px) {
.front .row-full {
padding-left: 16px;
padding-right: 16px
}

.front .title-image-wrap {
height: 240px
}

.front .title-text h1 {
font-size: 42px
}

.front .example-grid {
grid-template-columns: 1fr;
gap: 32px
}

.front .example-image-wrap {
height: 240px
}

.front .pattern-columns {
grid-template-columns: 1fr;
gap: 16px
}

.front .portrait-grid {
grid-template-columns: 1fr;
gap: 32px
}

.front .portrait-image-wrap {
max-width: 260px;
margin: 0 auto
}

.front .adapt-grid {
grid-template-columns: 1fr;
gap: 32px
}

.front .adapt-image-wrap {
height: 240px
}

.front .differ-grid {
grid-template-columns: 1fr
}

.front .differ-image-row {
grid-template-columns: 1fr
}

.front .context-grid {
grid-template-columns: 1fr
}

.front .pattern-header h2,
.front .portrait-text h2,
.front .adapt-text h2,
.front .differ-header h2,
.front .context-header h2 {
font-size: 22px
}
}

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

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

.learningprogram .pageframe {
max-width: 1400px;
margin: 0 auto;
padding: 0 32px
}

@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-32px)
}

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

.learningprogram .animate-in {
animation: slideInLeft .25s cubic-bezier(0.4, 0, 0.2, 1) both
}

.learningprogram .animate-in-2 {
animation: slideInLeft .25s cubic-bezier(0.4, 0, 0.2, 1) .08s both
}

.learningprogram .animate-in-3 {
animation: slideInLeft .25s cubic-bezier(0.4, 0, 0.2, 1) .16s both
}

.learningprogram .animate-in-4 {
animation: slideInLeft .25s cubic-bezier(0.4, 0, 0.2, 1) .24s both
}

.learningprogram .titlesection {
padding: 64px 0;
background: #fff;
position: relative
}

.learningprogram .titlesection .decoration {
position: absolute;
top: 0;
right: 0;
width: 340px;
height: 340px;
pointer-events: none;
overflow: hidden
}

.learningprogram .titlesection .decoration .shape1 {
position: absolute;
top: 32px;
right: 32px;
width: 200px;
height: 200px;
background: #7ebfb714;
clip-path: polygon(20% 0%, 80% 0%, 100% 30%, 90% 80%, 50% 100%, 10% 85%, 0% 40%);
border-radius: 20px
}

.learningprogram .titlesection .decoration .shape2 {
position: absolute;
top: 64px;
right: 64px;
width: 140px;
height: 140px;
background: #a0cbc91a;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)
}

.learningprogram .titlecenter {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
z-index: 1
}

.learningprogram .titleimagewrap {
width: 320px;
height: 240px;
overflow: hidden;
border-radius: 20px;
margin-bottom: 32px;
position: relative;
box-shadow: -1px 4px 25px -2px #7ebfb71a
}

.learningprogram .titleimagewrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block
}

.learningprogram .titleimagewrap::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 0% 0%, #14141447 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, #14141438 0%, transparent 55%);
pointer-events: none
}

.learningprogram .eyebrow {
font-size: 14px;
line-height: 1.4;
letter-spacing: .08em;
text-transform: uppercase;
color: #7EBFB7;
font-weight: 700;
margin-bottom: 16px
}

.learningprogram .titlemain {
font-size: 56px;
line-height: 1.2;
font-weight: 800;
color: #1b1b1b;
margin: 0 0 16px;
max-width: 700px
}

.learningprogram .titlemain .firstword {
font-size: 56px;
color: #7EBFB7
}

.learningprogram .tagline {
font-size: 18px;
line-height: 1.6;
color: #3a3a3a;
max-width: 520px;
margin-bottom: 32px
}

.learningprogram .titlelinks {
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
flex-wrap: wrap;
justify-content: center
}

.learningprogram .primarylink {
font-size: 14px;
line-height: 1.4;
font-weight: 700;
color: #fff;
background: #7EBFB7;
padding: 16px 32px;
border-radius: 2px;
text-decoration: none;
display: inline-block;
transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1), background .18s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: -1px 4px 25px -2px #7ebfb71a
}

.learningprogram .primarylink:hover {
background: #6aada5;
transform: scale(1.04)
}

.learningprogram .secondarylink {
font-size: 14px;
line-height: 1.4;
font-weight: 600;
color: #7EBFB7;
text-decoration: underline;
text-underline-offset: 3px;
display: inline-block;
transition: color .18s cubic-bezier(0.4, 0, 0.2, 1), transform .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.learningprogram .secondarylink:hover {
color: #5a9e96;
transform: scale(1.04)
}

.learningprogram .sectiondivider {
max-width: 1400px;
margin: 0 auto;
padding: 0 32px
}

.learningprogram .sectiondivider hr {
border: none;
border-top: 1px dashed #c5d9d8;
margin: 0
}

.learningprogram .modulesection {
padding: 64px 0;
background: linear-gradient(to bottom, #f7f4f0, #fff);
position: relative
}

.learningprogram .modulesection::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%237EBFB7' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none
}

.learningprogram .modulesection .sectionlabel {
font-size: 14px;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: .07em;
color: #7EBFB7;
font-weight: 700;
margin-bottom: 8px
}

.learningprogram .modulesection .sectionheading {
font-size: 42px;
line-height: 1.2;
font-weight: 800;
color: #1b1b1b;
margin: 0 0 8px
}

.learningprogram .modulesection .sectionheading .firstword {
color: #7EBFB7
}

.learningprogram .modulesection .sectiondesc {
font-size: 18px;
line-height: 1.6;
color: #3a3a3a;
max-width: 560px;
margin-bottom: 32px
}

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

.learningprogram .modulecard {
background: #fff;
border-radius: 20px;
padding: 32px;
box-shadow: -1px 1px 2px -2px #7ebfb712 -1px 4px 25px -2px #7ebfb71a;
position: relative;
overflow: hidden;
transition: box-shadow .2s cubic-bezier(0.4, 0, 0.2, 1), transform .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.learningprogram .modulecard:hover {
box-shadow: -1px 12px 60px -2px #7ebfb724;
transform: translateY(-4px)
}

.learningprogram .modulecard .cardnum {
font-size: 42px;
line-height: 1.2;
font-weight: 900;
color: #7ebfb726;
position: absolute;
top: 16px;
right: 24px;
pointer-events: none
}

.learningprogram .modulecard .cardtag {
display: inline-block;
font-size: 14px;
line-height: 1.4;
font-weight: 700;
background: #E9DECE;
color: #5a4e3a;
border-radius: 2px;
padding: 4px 8px;
margin-bottom: 16px
}

.learningprogram .modulecard .cardtitle {
font-size: 22px;
line-height: 1.4;
font-weight: 800;
color: #1b1b1b;
margin: 0 0 8px
}

.learningprogram .modulecard .cardbody {
font-size: 14px;
line-height: 1.9;
color: #3a3a3a;
margin: 0 0 16px
}

.learningprogram .modulecard .cardlist {
font-size: 14px;
line-height: 1.6;
color: #5a5a5a;
margin: 0;
padding: 0;
list-style: none
}

.learningprogram .modulecard .cardlist li {
display: inline
}

.learningprogram .modulecard .cardlist li::after {
content: ' / ';
color: #7EBFB7;
font-weight: 700
}

.learningprogram .modulecard .cardlist li:last-child::after {
content: ''
}

.learningprogram .modulecard .tagsrow {
display: flex;
flex-direction: row;
gap: 8px;
flex-wrap: wrap;
margin-top: 16px
}

.learningprogram .modulecard .tagsrow .tag {
font-size: 14px;
padding: 4px 8px;
border-radius: 2px;
font-weight: 600;
cursor: default;
transition: transform .15s cubic-bezier(0.0, 0, 0.2, 1)
}

.learningprogram .modulecard .tagsrow .tag.teal {
background: #7ebfb726;
color: #3a7d77
}

.learningprogram .modulecard .tagsrow .tag.mint {
background: #a0cbc92e;
color: #2e6b68
}

.learningprogram .modulecard .tagsrow .tag.sand {
background: #E9DECE;
color: #5a4e3a
}

.learningprogram .modulecard:hover .tagsrow .tag {
transform: translateY(-2px)
}

.learningprogram .modulecard:hover .tagsrow .tag:nth-child(2) {
transform: translateY(-4px);
transition-delay: .04s
}

.learningprogram .modulecard:hover .tagsrow .tag:nth-child(3) {
transform: translateY(-2px);
transition-delay: .08s
}

.learningprogram .instructorsection {
padding: 64px 0;
background: #fff
}

.learningprogram .instructorsection .sectionlabel {
font-size: 14px;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: .07em;
color: #7EBFB7;
font-weight: 700;
margin-bottom: 8px
}

.learningprogram .instructorsection .sectionheading {
font-size: 42px;
line-height: 1.2;
font-weight: 800;
color: #1b1b1b;
margin: 0 0 32px
}

.learningprogram .instructorsection .sectionheading .firstword {
color: #7EBFB7
}

.learningprogram .instructorgrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-bottom: 64px
}

.learningprogram .instructorcard {
display: flex;
flex-direction: row;
gap: 24px;
align-items: flex-start;
background: #f7f4f0;
border-radius: 20px;
padding: 32px;
box-shadow: -1px 1px 2px -2px #7ebfb712;
transition: box-shadow .22s cubic-bezier(0.4, 0, 0.2, 1)
}

.learningprogram .instructorcard:hover {
box-shadow: -1px 4px 25px -2px #7ebfb71a
}

.learningprogram .instructorcard .portrait {
width: 88px;
height: 132px;
border-radius: 20px;
overflow: hidden;
flex-shrink: 0;
box-shadow: -1px 4px 25px -2px #7ebfb71a
}

.learningprogram .instructorcard .portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block
}

.learningprogram .instructorcard .instructorinfo {
flex: 1
}

.learningprogram .instructorcard .instructorname {
font-size: 22px;
line-height: 1.4;
font-weight: 800;
color: #1b1b1b;
margin: 0 0 4px
}

.learningprogram .instructorcard .instructorrole {
font-size: 14px;
line-height: 1.4;
color: #7EBFB7;
font-weight: 700;
margin-bottom: 8px
}

.learningprogram .instructorcard .instructorbio {
font-size: 14px;
line-height: 1.9;
color: #3a3a3a;
margin: 0
}

.learningprogram .noportraitcard {
background: #f7f4f0;
border-radius: 20px;
padding: 32px;
box-shadow: -1px 1px 2px -2px #7ebfb712
}

.learningprogram .noportraitcard .instructorname {
font-size: 22px;
line-height: 1.4;
font-weight: 800;
color: #1b1b1b;
margin: 0 0 4px
}

.learningprogram .noportraitcard .instructorrole {
font-size: 14px;
line-height: 1.4;
color: #7EBFB7;
font-weight: 700;
margin-bottom: 8px
}

.learningprogram .noportraitcard .instructorbio {
font-size: 14px;
line-height: 1.9;
color: #3a3a3a;
margin: 0
}

.learningprogram .datatablewrap {
border-radius: 20px;
overflow: hidden;
box-shadow: -1px 4px 25px -2px #7ebfb71a
}

.learningprogram .datatable {
width: 100%;
border-collapse: collapse;
font-size: 14px;
line-height: 1.6
}

.learningprogram .datatable thead tr {
background: #7EBFB7
}

.learningprogram .datatable thead th {
color: #fff;
font-weight: 700;
padding: 16px 24px;
text-align: left;
font-size: 14px
}

.learningprogram .datatable tbody tr {
background: #fff;
transition: background .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.learningprogram .datatable tbody tr:nth-child(even) {
background: #e9dece38
}

.learningprogram .datatable tbody tr:hover {
background: #7ebfb71a
}

.learningprogram .datatable tbody td {
padding: 16px 24px;
color: #2a2a2a;
border-bottom: 1px solid #7ebfb714;
vertical-align: top
}

.learningprogram .datatable tbody td:first-child {
font-weight: 700;
color: #1b1b1b
}

.learningprogram .datatable tbody td .badge {
display: inline-block;
font-size: 14px;
padding: 2px 8px;
border-radius: 2px;
font-weight: 600
}

.learningprogram .datatable tbody td .badge.teal {
background: #7ebfb72e;
color: #2e6b68
}

.learningprogram .datatable tbody td .badge.sand {
background: #E9DECE;
color: #5a4e3a
}

.learningprogram .datatable tbody td .badge.mint {
background: #a0cbc938;
color: #2e6b68
}

.learningprogram .quotepara {
border-radius: 2px;
padding: 24px 32px;
background: #7ebfb712;
box-shadow: inset 0 6px 10px -4px #7ebfb71f;
font-size: 18px;
line-height: 1.6;
color: #2a2a2a;
font-weight: 600;
margin: 32px 0 0
}

@media (max-width: 1280px) {
.learningprogram .cardgrid {
grid-template-columns: repeat(2, 1fr)
}
}

@media (max-width: 768px) {
.learningprogram .titlemain {
font-size: 42px
}

.learningprogram .titlemain .firstword {
font-size: 42px
}

.learningprogram .titleimagewrap {
width: 100%;
height: 200px
}

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

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

.learningprogram .instructorcard {
flex-direction: column
}

.learningprogram .instructorcard .portrait {
width: 72px;
height: 108px
}

.learningprogram .modulesection .sectionheading {
font-size: 42px
}

.learningprogram .instructorsection .sectionheading {
font-size: 42px
}

.learningprogram .pageframe {
padding: 0 16px
}

.learningprogram .datatablewrap {
overflow-x: auto
}

.learningprogram .titlesection {
padding: 32px 0
}

.learningprogram .modulesection {
padding: 32px 0
}

.learningprogram .instructorsection {
padding: 32px 0
}
}

.successPage {
min-height: 60vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 64px 32px;
background: #fff
}

.successPage .successWrapper {
max-width: 560px;
width: 100%;
text-align: center
}

.successPage .successIcon {
width: 64px;
height: 64px;
margin: 0 auto 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
background: #E9DECE;
box-shadow: -1px 4px 25px -2px #7ebfb71a
}

.successPage .successIcon svg {
display: block
}

.successPage .successHeading {
font-size: 42px;
line-height: 1.2;
font-weight: 700;
color: #1b3a38;
margin: 0 0 16px
}

.successPage .successHeading span {
color: #7EBFB7
}

.successPage .successText {
font-size: 18px;
line-height: 1.6;
color: #2e4a48;
margin: 0 0 32px
}

.successPage .successDivider {
width: 48px;
height: 2px;
background: #A0CBC9;
border-radius: 2px;
margin: 0 auto 32px
}

.successPage .successMeta {
font-size: 14px;
line-height: 1.6;
color: #4a6a68;
margin: 0 0 32px
}

.successPage .successMeta strong {
color: #7EBFB7;
font-weight: 700
}

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

.successPage .actionPrimary {
display: inline-block;
padding: 16px 32px;
background: #7EBFB7;
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
border-radius: 2px;
text-decoration: none;
border: none;
cursor: pointer;
box-shadow: -1px 4px 25px -2px #7ebfb724;
transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .25s cubic-bezier(0.0, 0, 0.2, 1)
}

.successPage .actionPrimary:hover {
transform: scale(1.04);
box-shadow: -1px 12px 60px -2px #7ebfb72e
}

.successPage .actionPrimary:focus {
outline: 2px solid #1b3a38;
outline-offset: 3px
}

.successPage .actionSecondary {
display: inline-block;
padding: 16px 32px;
background: transparent;
color: #1b3a38;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
border-radius: 2px;
text-decoration: none;
border: 2px solid #A0CBC9;
cursor: pointer;
transition: transform .18s cubic-bezier(0.4, 0, 0.2, 1), border-color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.successPage .actionSecondary:hover {
transform: scale(1.04);
border-color: #7EBFB7
}

.successPage .actionSecondary:focus {
outline: 2px solid #1b3a38;
outline-offset: 3px
}

@media (max-width: 768px) {
.successPage {
padding: 64px 16px
}

.successPage .successHeading {
font-size: 22px
}

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

.successPage .actionPrimary,
.successPage .actionSecondary {
text-align: center
}
}