@import "https://cdn.jsdelivr.net/npm/@fontsource/eb-garamond@latest/400.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/eb-garamond@latest/700.css";

* {
box-sizing: border-box
}

body {
margin: 0;
min-height: 100dvh;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
font-family: 'EB Garamond', Georgia, serif;
font-size: 17px;
line-height: 1.5;
color: #1b2a3b;
background-color: #f4f7fb;
overflow-x: hidden
}

.topbar {
background: linear-gradient(90deg, #3D689E 0%, #2a4d7a 100%);
padding: 8px 32px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 32px
}

.topbar-phone {
display: flex;
align-items: center;
gap: 8px;
color: #8DF3EC;
font-size: 15px;
letter-spacing: .04em;
text-decoration: none;
transition: color .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.topbar-phone:hover {
color: #fff
}

.topbar-phone .tyicon {
font-size: 17px
}

.topbar-email {
display: flex;
align-items: center;
gap: 8px;
color: #8DF3EC;
font-size: 15px;
text-decoration: none;
transition: color .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.topbar-email:hover {
color: #fff
}

.glasshead {
position: relative;
background: #ffffffb8;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid #3d689e24;
box-shadow: 0 5px 25px 0 #3d689e17;
z-index: 100
}

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

.logomount {
display: flex;
justify-content: center;
padding: 16px 0 8px;
border-bottom: 1px solid #3d689e14
}

.logocard {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #3d689e2e;
box-shadow: 0 1px 3px 0 #3d689e0d 0 5px 25px 0 #3d689e17;
border-radius: 20px 0 20px 0;
padding: 8px 16px;
width: 120px;
height: 75px
}

.logocard img {
width: 90px;
height: 59px;
object-fit: contain;
display: block
}

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

.navmount a {
font-family: 'EB Garamond', Georgia, serif;
font-size: 17px;
font-weight: 700;
color: #2a4d7a;
text-decoration: none;
text-transform: uppercase;
letter-spacing: .08em;
padding: 8px 16px;
border-radius: 2px;
position: relative;
transition: color .5s ease, background-color .5s ease;
min-height: 44px;
display: flex;
align-items: center
}

.navmount a::after {
content: '';
position: absolute;
bottom: 4px;
left: 16px;
right: 16px;
height: 2px;
background: #6EB0DA;
border-radius: 0;
transform: scaleX(0);
transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform-origin: left
}

.navmount a:hover {
color: #3D689E
}

.navmount a:hover::after {
transform: scaleX(1)
}

.navmount a:focus {
outline: none;
color: #3D689E;
background: #3d689e0f
}

.navmount a:focus::before {
content: 'go';
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
font-family: 'EB Garamond', Georgia, serif;
color: #3D689E;
background: #ffffffe6;
padding: 2px 6px;
border-radius: 2px;
border: 1px solid #3d689e33;
letter-spacing: .04em;
white-space: nowrap;
pointer-events: none
}

.navdot {
width: 4px;
height: 4px;
background: #6eb0da80;
border-radius: 2px;
display: inline-block;
flex-shrink: 0
}

.siteftr {
background: #1b2a3b;
border-top: 2px solid #3D689E;
padding: 32px 0 0
}

.ftrshell {
max-width: 1400px;
margin: 0 auto;
padding: 0 32px;
display: flex;
align-items: flex-start;
gap: 64px
}

.ftrbrand {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding-right: 64px;
border-right: 1px solid #6eb0da33
}

.ftrlogocard {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #3d689e4d;
box-shadow: 0 1px 3px 0 #3d689e0d;
border-radius: 20px 0 20px 0;
padding: 8px;
width: 80px;
height: 52px
}

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

.ftrbrandname {
font-family: 'EB Garamond', Georgia, serif;
font-size: 15px;
color: #8df3ecb3;
letter-spacing: .06em;
text-transform: uppercase;
line-height: 1.2
}

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

.ftrnav {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0
}

.ftrnav a {
font-family: 'EB Garamond', Georgia, serif;
font-size: 15px;
color: #ffffffb8;
text-decoration: none;
padding: 8px 16px;
border-right: 1px solid #6eb0da33;
transition: color .7s ease;
line-height: 1.5;
min-height: 44px;
display: flex;
align-items: center
}

.ftrnav a:first-child {
padding-left: 0
}

.ftrnav a:last-child {
border-right: none
}

.ftrnav a:hover {
color: #8DF3EC
}

.ftrnav a:focus {
outline: none;
color: #8DF3EC
}

.ftrcontact {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px
}

.ftrcontact-item {
display: flex;
align-items: center;
gap: 8px;
font-family: 'EB Garamond', Georgia, serif;
font-size: 15px;
color: #ffffff8c;
text-decoration: none;
transition: color .6s ease
}

.ftrcontact-item:hover {
color: #6EB0DA
}

.ftrcontact-item .tyicon {
color: #3D689E;
font-size: 17px
}

.ftrbar {
margin-top: 32px;
border-top: 1px solid #6eb0da1f;
padding: 16px 32px;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px
}

.ftrcopy {
font-family: 'EB Garamond', Georgia, serif;
font-size: 15px;
color: #ffffff59;
line-height: 1.5
}

.ftrtelegram {
display: flex;
align-items: center;
gap: 8px;
font-family: 'EB Garamond', Georgia, serif;
font-size: 15px;
color: #8df3ec99;
text-decoration: none;
transition: color .55s ease
}

.ftrtelegram:hover {
color: #8DF3EC
}

.ftrtelegram .tyicon {
font-size: 17px
}

@media (max-width: 960px) {
.topbar {
padding: 8px 16px;
gap: 16px;
flex-wrap: wrap;
justify-content: center
}

.headshell {
padding: 0 16px
}

.navmount {
gap: 0;
justify-content: center
}

.navmount a {
font-size: 15px;
padding: 8px 12px
}

.navdot {
display: none
}

.ftrshell {
flex-direction: column;
gap: 32px;
padding: 0 16px
}

.ftrbrand {
border-right: none;
border-bottom: 1px solid #6eb0da33;
padding-right: 0;
padding-bottom: 32px;
flex-direction: row;
align-items: center;
gap: 16px;
width: 100%
}

.ftrbar {
padding: 16px;
flex-direction: column;
align-items: flex-start;
gap: 8px
}
}

@media (max-width: 480px) {
.topbar {
flex-direction: column;
gap: 8px;
align-items: flex-start
}

.logomount {
padding: 16px 0 8px
}

.ftrnav {
flex-direction: column;
gap: 0
}

.ftrnav a {
border-right: none;
border-bottom: 1px solid #6eb0da1f;
padding-left: 0;
width: 100%
}

.ftrnav a:last-child {
border-bottom: none
}

.ftrcontact {
flex-direction: column;
align-items: flex-start;
gap: 8px
}
}

@media (min-width: 1440px) {
.headshell {
padding: 0 64px
}

.ftrshell {
padding: 0 64px
}

.ftrbar {
padding: 16px 64px
}
}

.agreement-onv-content {
max-width: 1400px;
margin: 0 auto;
padding: 64px 32px
}

.agreement-onv-content p {
font-size: 17px;
line-height: 1.75;
color: #2a2a35;
margin-bottom: 16px
}

.agreement-onv-content strong,
.agreement-onv-content b {
font-weight: 700;
color: #3D689E
}

.agreement-onv-content em,
.agreement-onv-content i {
font-style: italic;
color: #2a2a35
}

.agreement-onv-content a {
color: #3D689E;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), text-decoration-color .5s ease
}

.agreement-onv-content a:hover {
color: #6EB0DA;
text-decoration-color: #8DF3EC
}

.agreement-onv-content hr {
border: none;
border-top: 1px solid #d4e4f2;
margin: 32px 0
}

@media (max-width: 960px) {
.agreement-onv-content {
padding: 32px 16px
}
}

@media (max-width: 480px) {
.agreement-onv-content {
padding: 32px 8px
}

.agreement-onv-content p {
font-size: 15px
}
}

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

.successstoriesdetail .breadcrumb {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
align-items: center;
padding: 16px 0;
font-size: 15px;
color: #3D689E
}

.successstoriesdetail .breadcrumb a {
color: #3D689E;
text-decoration: none;
transition: color .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.successstoriesdetail .breadcrumb a:hover {
color: #6EB0DA
}

.successstoriesdetail .breadcrumb .sep {
color: #6EB0DA;
font-size: 15px
}

.successstoriesdetail .breadcrumb .current {
color: #555
}

.successstoriesdetail .articletop {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: center;
padding: 32px 0;
position: relative
}

.successstoriesdetail .articletop::before {
content: "";
position: absolute;
top: 0;
right: -32px;
width: 180px;
height: 180px;
background: radial-gradient(circle at 80% 20%, #8ef3ec2e 0%, #6eb0da14 60%, transparent 80%);
border-radius: 20px;
pointer-events: none;
z-index: 0
}

.successstoriesdetail .articletop::after {
content: "";
position: absolute;
bottom: 32px;
left: -16px;
width: 80px;
height: 80px;
background: #6eb0da1a;
border-radius: 20px;
pointer-events: none;
z-index: 0
}

.successstoriesdetail .articletopleft {
position: relative;
z-index: 1
}

.successstoriesdetail .tagrow {
display: flex;
flex-direction: row;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 16px
}

.successstoriesdetail .tag {
font-size: 15px;
background: #6eb0da1f;
color: #3D689E;
padding: 8px 16px;
border-radius: 2px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase
}

.successstoriesdetail .categorytag {
font-size: 15px;
background: #8ef3ec26;
color: #2a5a8a;
padding: 8px 16px;
border-radius: 2px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase
}

.successstoriesdetail .articletitle {
font-size: 50px;
line-height: 1.2;
color: #1a2e44;
margin: 0 0 16px;
font-weight: 700
}

.successstoriesdetail .articletitle .underlinekey {
position: relative;
display: inline-block
}

.successstoriesdetail .articletitle .underlinekey::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
height: 3px;
width: 0;
background: #6EB0DA;
border-radius: 2px;
animation: drawline .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) .5s forwards
}

@keyframes drawline {
to {
width: 100%
}
}

.successstoriesdetail .metarow {
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
font-size: 15px;
color: #557;
flex-wrap: wrap
}

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

.successstoriesdetail .metaicon {
width: 16px;
height: 16px;
flex-shrink: 0
}

.successstoriesdetail .articleimgwrap {
position: relative;
z-index: 1;
border-radius: 20px;
overflow: hidden;
aspect-ratio: 1/1;
box-shadow: 0 10px 52px 0 #3d689e1c
}

.successstoriesdetail .articleimgwrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.successstoriesdetail .articleimgwrap::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 40%;
background: linear-gradient(to bottom, #14233773 0%, transparent 100%);
pointer-events: none
}

.successstoriesdetail .articleimgwrap img:hover {
transform: scale(1.03)
}

.successstoriesdetail .dots {
position: absolute;
bottom: 16px;
right: 16px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
pointer-events: none;
z-index: 0
}

.successstoriesdetail .dot {
border-radius: 20px;
background: #6eb0da40
}

.successstoriesdetail .dot.sm {
width: 6px;
height: 6px
}

.successstoriesdetail .dot.md {
width: 10px;
height: 10px
}

.successstoriesdetail .dot.lg {
width: 14px;
height: 14px
}

.successstoriesdetail .articlecontent {
padding: 32px 0;
display: grid;
grid-template-columns: 1fr 320px;
gap: 64px;
align-items: start
}

.successstoriesdetail .prose {
font-size: 17px;
line-height: 1.75;
color: #222
}

.successstoriesdetail .prose p {
margin: 0 0 16px;
counter-increment: para;
padding-left: 32px;
position: relative
}

.successstoriesdetail .prose p::before {
content: counter(para, decimal-leading-zero);
position: absolute;
left: 0;
top: 0;
font-size: 15px;
color: #6EB0DA;
font-weight: 700;
line-height: 1.75
}

.successstoriesdetail .prose {
counter-reset: para
}

.successstoriesdetail .prose h2 {
font-size: 20px;
line-height: 1.2;
color: #1a2e44;
margin: 32px 0 16px;
font-weight: 700;
position: relative;
padding-left: 32px
}

.successstoriesdetail .prose h2 .numfade {
position: absolute;
left: -8px;
top: -8px;
font-size: 68px;
line-height: 1.2;
color: #6eb0da14;
font-weight: 900;
pointer-events: none;
z-index: 0;
white-space: nowrap
}

.successstoriesdetail .prose h3 {
font-size: 17px;
line-height: 1.5;
color: #2a4a6e;
margin: 16px 0 8px;
font-weight: 700
}

.successstoriesdetail .prose ul {
list-style: none;
padding: 0 0 0 32px;
margin: 0 0 16px
}

.successstoriesdetail .prose ul li {
position: relative;
padding-left: 24px;
margin-bottom: 8px;
font-size: 17px;
line-height: 1.75
}

.successstoriesdetail .prose ul li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 12px;
height: 12px;
background: none;
border: 2px solid #6EB0DA;
border-radius: 2px;
transform: rotate(45deg)
}

.successstoriesdetail .prose ol {
padding: 0 0 0 48px;
margin: 0 0 16px
}

.successstoriesdetail .prose ol li {
font-size: 17px;
line-height: 1.75;
margin-bottom: 8px;
color: #222
}

.successstoriesdetail .prose blockquote {
margin: 16px 0;
padding: 16px 32px;
background: linear-gradient(135deg, #8ef3ec14 0%, #6eb0da0f 100%);
border-radius: 20px;
font-size: 17px;
line-height: 1.75;
color: #2a4a6e;
font-style: italic
}

.successstoriesdetail .prose blockquote cite {
display: block;
font-size: 15px;
color: #6EB0DA;
font-style: normal;
margin-top: 8px;
font-weight: 600
}

.successstoriesdetail .prose table {
width: 100%;
border-collapse: collapse;
margin: 16px 0;
font-size: 15px
}

.successstoriesdetail .prose table thead {
background: #3d689e14
}

.successstoriesdetail .prose table th {
padding: 8px 16px;
text-align: left;
font-weight: 700;
color: #1a2e44;
font-size: 15px
}

.successstoriesdetail .prose table td {
padding: 8px 16px;
color: #333;
border-bottom: 1px solid #6eb0da26
}

.successstoriesdetail .prose abbr {
text-decoration: underline dotted #6EB0DA;
cursor: help
}

.successstoriesdetail .sidebar {
display: flex;
flex-direction: column;
gap: 32px;
position: sticky;
top: 32px
}

.successstoriesdetail .reactionblock {
background: linear-gradient(160deg, #ffff 0%, #8ef3ec12 100%);
border-radius: 20px;
padding: 32px;
box-shadow: 0 5px 25px 0 #3d689e17
}

.successstoriesdetail .reactionblock h4 {
font-size: 17px;
line-height: 1.5;
color: #1a2e44;
margin: 0 0 16px;
font-weight: 700
}

.successstoriesdetail .reactions {
display: flex;
flex-direction: row;
gap: 8px;
flex-wrap: wrap
}

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

.successstoriesdetail .reactions label {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px;
border-radius: 20px;
border: 2px solid #6eb0da33;
cursor: pointer;
transition: background .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
font-size: 15px;
color: #557;
min-width: 64px;
text-align: center
}

.successstoriesdetail .reactions label:hover {
background: #8ef3ec1f;
border-color: #8DF3EC
}

.successstoriesdetail .reactions input[type="radio"]:focus+label {
outline: 2px solid #3D689E;
outline-offset: 2px
}

.successstoriesdetail .reactionactive label {
background: #6eb0da26;
border-color: #6EB0DA;
color: #1a2e44;
font-weight: 700
}

.successstoriesdetail .reactionsvg {
width: 28px;
height: 28px
}

.successstoriesdetail .viewscard {
background: #3D689E;
border-radius: 20px;
padding: 32px;
color: #fff;
box-shadow: 0 10px 52px 0 #3d689e1c;
position: relative;
overflow: hidden
}

.successstoriesdetail .viewscard::before {
content: "";
position: absolute;
top: -32px;
right: -32px;
width: 120px;
height: 120px;
background: #8ef3ec1f;
border-radius: 20px;
pointer-events: none;
animation: colorwave 4s ease infinite alternate
}

@keyframes colorwave {
0% {
background: #8ef3ec14;
transform: scale(1)
}

100% {
background: #8ef3ec2e;
transform: scale(1.15)
}
}

.successstoriesdetail .viewscard h5 {
font-size: 15px;
line-height: 1.5;
color: #ffffffbf;
margin: 0 0 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em
}

.successstoriesdetail .viewscard .viewcount {
font-size: 50px;
line-height: 1.2;
font-weight: 700;
color: #8DF3EC;
display: block
}

.successstoriesdetail .viewscard .viewlabel {
font-size: 15px;
color: #ffffffb3
}

.successstoriesdetail .ctablock {
padding: 64px 0;
background: linear-gradient(160deg, #3d689e0a 0%, #8ef3ec12 100%);
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
position: relative
}

.successstoriesdetail .ctablock .dotgroup {
position: absolute;
top: 32px;
left: 32px;
display: flex;
flex-direction: row;
gap: 8px;
pointer-events: none
}

.successstoriesdetail .ctablock .dotgroup span {
border-radius: 20px;
background: #6eb0da33;
display: block
}

.successstoriesdetail .ctablock h3 {
font-size: 20px;
line-height: 1.5;
color: #1a2e44;
margin: 0;
font-weight: 700
}

.successstoriesdetail .ctablock p {
font-size: 17px;
line-height: 1.75;
color: #444;
max-width: 480px;
margin: 0
}

.successstoriesdetail .btn {
display: inline-block;
padding: 16px 32px;
border-radius: 2px;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
text-decoration: none;
cursor: pointer;
border: none;
position: relative;
overflow: hidden;
transition: color .5s ease;
z-index: 1
}

.successstoriesdetail .btn::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0;
background: #1a2e44;
transition: height .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: -1;
border-radius: 2px
}

.successstoriesdetail .btn:hover::after {
height: 100%
}

.successstoriesdetail .btnprimary {
background: #3D689E;
color: #fff
}

.successstoriesdetail .btnprimary:hover {
color: #8DF3EC
}

.successstoriesdetail .btnsecondary {
background: transparent;
color: #3D689E;
border: 2px solid #3D689E
}

.successstoriesdetail .btnsecondary:hover {
color: #8DF3EC
}

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

.successstoriesdetail .articleimgwrap {
max-width: 480px
}

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

.successstoriesdetail .sidebar {
position: static
}

.successstoriesdetail .articletitle {
font-size: 50px
}
}

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

.successstoriesdetail .articletitle {
font-size: 20px
}

.successstoriesdetail .reactions {
gap: 8px
}

.successstoriesdetail .reactionblock {
padding: 16px
}

.successstoriesdetail .viewscard {
padding: 16px
}
}

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

.base .pagewrap {
max-width: 1400px;
margin: 0 auto;
padding: 0 32px
}

.base .titleblock {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 520px;
position: relative
}

.base .titleblock .textside {
display: flex;
flex-direction: column;
justify-content: center;
padding: 64px 64px 64px 32px;
position: relative;
z-index: 1
}

.base .titleblock .dots {
position: absolute;
top: 32px;
left: 16px;
display: grid;
grid-template-columns: repeat(5, 8px);
gap: 8px
}

.base .titleblock .dots span {
width: 4px;
height: 4px;
background: #6EB0DA;
border-radius: 2px;
opacity: .5
}

.base .titleblock .dots span:nth-child(odd) {
opacity: .25
}

.base .titleblock .dots span:nth-child(3n) {
opacity: .6
}

.base .titleblock .eyebrow {
font-size: 15px;
letter-spacing: .12em;
text-transform: uppercase;
color: #3D689E;
margin-bottom: 16px;
line-height: 1.2
}

.base .titleblock h1 {
font-size: 68px;
line-height: 1.2;
color: #1b2e45;
margin-bottom: 32px
}

.base .titleblock h1 .accentword {
position: relative;
display: inline-block
}

.base .titleblock h1 .accentword::after {
content: '';
position: absolute;
bottom: 2px;
left: 0;
width: 0;
height: 2px;
background: #3D689E;
animation: drawline .8s cubic-bezier(0.25, 0.46, 0.45, 0.94) .6s forwards
}

@keyframes drawline {
to {
width: 100%
}
}

.base .titleblock .actionlink {
display: inline-block;
font-size: 15px;
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
background: #3D689E;
padding: 16px 32px;
border-radius: 2px;
text-decoration: none;
position: relative;
overflow: hidden;
transition: color .6s ease;
align-self: flex-start
}

.base .titleblock .actionlink::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: #1b2e45;
transition: height .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 0
}

.base .titleblock .actionlink:hover::before {
height: 100%
}

.base .titleblock .actionlink span {
position: relative;
z-index: 1
}

.base .titleblock .imageside {
position: relative;
overflow: hidden
}

.base .titleblock .imageside img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 1/1;
filter: saturate(0.75) brightness(0.9) hue-rotate(0deg);
animation: slowzoom 8s ease forwards
}

@keyframes slowzoom {
from {
transform: scale(1.08)
}

to {
transform: scale(1)
}
}

.base .titleblock .diamonddeco {
position: absolute;
bottom: 32px;
right: 32px;
width: 24px;
height: 24px;
background: #8DF3EC;
transform: rotate(45deg);
z-index: 2;
opacity: .8
}

.base .divider {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 32px 0
}

.base .divider .line {
width: 80px;
height: 1px;
background: #6EB0DA;
opacity: .4
}

.base .divider .diamond {
width: 8px;
height: 8px;
background: #3D689E;
transform: rotate(45deg);
opacity: .6
}

.base .outcomes {
background: #f0f6fb;
padding: 64px 0;
position: relative
}

.base .outcomes::before {
content: '';
position: absolute;
top: 0;
left: -100vw;
right: -100vw;
bottom: 0;
background: #f0f6fb;
z-index: 0
}

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

.base .outcomes .outerhead {
display: flex;
flex-direction: column;
margin-bottom: 32px
}

.base .outcomes .numfade {
font-size: 68px;
line-height: 1.2;
color: #3D689E;
opacity: .07;
font-weight: 700;
margin-bottom: -32px;
display: block
}

.base .outcomes h2 {
font-size: 50px;
line-height: 1.2;
color: #1b2e45;
position: relative
}

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

.base .outcomes .card {
background: #fff;
border-radius: 20px;
padding: 32px;
box-shadow: 0 5px 25px 0 #3d689e17;
position: relative;
transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .6s ease
}

.base .outcomes .card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 52px 0 #3d689e1c
}

.base .outcomes .card .cardicon {
width: 32px;
height: 32px;
margin-bottom: 16px
}

.base .outcomes .card h4 {
font-size: 17px;
line-height: 1.5;
color: #1b2e45;
margin-bottom: 8px
}

.base .outcomes .card p {
font-size: 15px;
line-height: 1.75;
color: #3a4f63
}

.base .outcomes .card .num {
font-size: 15px;
color: #3D689E;
font-weight: 600;
margin-top: 8px
}

.base .outcomes .connectors {
position: relative;
height: 2px;
margin: 32px 0;
display: flex;
align-items: center
}

.base .outcomes .connline {
height: 2px;
background: linear-gradient(90deg, #3D689E 0%, #8DF3EC 100%);
width: 0;
animation: connDraw .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) .4s forwards;
border-radius: 2px
}

@keyframes connDraw {
to {
width: 100%
}
}

.base .invest {
padding: 64px 0;
background: #fff
}

.base .invest .pagewrap {
display: grid;
grid-template-columns: 5fr 4fr;
gap: 64px;
align-items: center
}

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

.base .invest .outerhead {
display: flex;
flex-direction: column
}

.base .invest .numfade {
font-size: 68px;
line-height: 1.2;
color: #3D689E;
opacity: .07;
font-weight: 700;
margin-bottom: -32px;
display: block
}

.base .invest h2 {
font-size: 50px;
line-height: 1.2;
color: #1b2e45;
margin-bottom: 16px
}

.base .invest p {
font-size: 15px;
line-height: 1.75;
color: #3a4f63
}

.base .invest .tiers {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px
}

.base .invest .tier {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
border-radius: 2px;
border: 1px solid #3d689e26;
background: #fff;
box-shadow: 0 1px 3px 0 #3d689e0d;
transition: border-color .5s ease, box-shadow .5s ease
}

.base .invest .tier:hover {
border-color: #6EB0DA;
box-shadow: 0 5px 25px 0 #3d689e17
}

.base .invest .tier .tierlabel {
font-size: 15px;
font-weight: 600;
color: #1b2e45;
min-width: 120px;
letter-spacing: .04em;
text-transform: uppercase
}

.base .invest .tier .tierdesc {
font-size: 15px;
color: #3a4f63;
line-height: 1.5
}

.base .invest .imgcol {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 52px 0 #3d689e1c
}

.base .invest .imgcol img {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
display: block;
animation: slowpan 10s ease-in-out infinite alternate
}

@keyframes slowpan {
from {
transform: scale(1.04) translateX(0)
}

to {
transform: scale(1.04) translateX(-2%)
}
}

.base .invest .diamondcorner {
position: absolute;
top: 16px;
right: 16px;
width: 20px;
height: 20px;
background: #8DF3EC;
transform: rotate(45deg);
z-index: 2;
opacity: .9
}

.base .environ {
padding: 64px 0;
position: relative;
background: #1b2e45
}

.base .environ::before {
content: '';
position: absolute;
top: 0;
left: -100vw;
right: -100vw;
bottom: 0;
background: #1b2e45;
z-index: 0
}

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

.base .environ .outerhead {
display: flex;
flex-direction: column;
margin-bottom: 32px
}

.base .environ .numfade {
font-size: 68px;
line-height: 1.2;
color: #8DF3EC;
opacity: .08;
font-weight: 700;
margin-bottom: -32px;
display: block
}

.base .environ h2 {
font-size: 50px;
line-height: 1.2;
color: #fff;
margin-bottom: 16px
}

.base .environ .subtext {
font-size: 17px;
line-height: 1.75;
color: #8DF3EC;
max-width: 520px
}

.base .environ .pillgrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-top: 32px
}

.base .environ .pill {
display: flex;
flex-direction: column;
gap: 8px;
padding: 32px;
border-radius: 20px;
background: #6eb0da14;
border: 1px solid #8df3ec26;
transition: background .7s ease, border-color .7s ease
}

.base .environ .pill:hover {
background: #6eb0da26;
border-color: #8df3ec59
}

.base .environ .pill h5 {
font-size: 17px;
line-height: 1.5;
color: #8DF3EC
}

.base .environ .pill p {
font-size: 15px;
line-height: 1.75;
color: #a8c8df
}

.base .environ .crosspattern {
position: absolute;
top: 0;
right: 0;
width: 280px;
height: 280px;
z-index: 0;
pointer-events: none
}

.base .environ .crosspattern svg {
width: 100%;
height: 100%;
opacity: .06
}

.base .environ .imagecol {
margin-top: 32px;
border-radius: 20px;
overflow: hidden;
position: relative;
box-shadow: 0 10px 52px 0 #3d689e1c
}

.base .environ .imagecol img {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
display: block;
animation: slowzoom2 9s ease-in-out infinite alternate
}

@keyframes slowzoom2 {
from {
transform: scale(1)
}

to {
transform: scale(1.04)
}
}

.base .environ .twocol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: start
}

.base .experience {
padding: 64px 0;
background: #fff
}

.base .experience .outerhead {
display: flex;
flex-direction: column;
margin-bottom: 32px
}

.base .experience .numfade {
font-size: 68px;
line-height: 1.2;
color: #3D689E;
opacity: .07;
font-weight: 700;
margin-bottom: -32px;
display: block
}

.base .experience h2 {
font-size: 50px;
line-height: 1.2;
color: #1b2e45;
margin-bottom: 16px
}

.base .experience .stories {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px
}

.base .experience .story {
padding: 32px;
border-radius: 20px;
background: #f0f6fb;
box-shadow: 0 1px 3px 0 #3d689e0d;
display: flex;
flex-direction: column;
gap: 16px;
transition: box-shadow .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.base .experience .story:hover {
box-shadow: 0 10px 52px 0 #3d689e1c
}

.base .experience .story .quote {
font-size: 17px;
line-height: 1.75;
color: #1b2e45
}

.base .experience .story .author {
display: flex;
flex-direction: column;
gap: 4px
}

.base .experience .story .author .name {
font-size: 15px;
font-weight: 600;
color: #3D689E
}

.base .experience .story .author .role {
font-size: 15px;
color: #3a4f63
}

.base .experience .story .svgbullet {
width: 20px;
height: 20px;
flex-shrink: 0
}

.base .experience .ratingrow {
display: flex;
align-items: center;
gap: 16px;
margin-top: 32px;
padding: 32px;
background: #f0f6fb;
border-radius: 20px
}

.base .experience .ratingrow .ratingnum {
font-size: 50px;
line-height: 1.2;
color: #3D689E;
font-weight: 700
}

.base .experience .ratingrow .ratingdetail {
display: flex;
flex-direction: column;
gap: 4px
}

.base .experience .ratingrow .ratingdetail .starsrow {
display: flex;
gap: 4px
}

.base .experience .ratingrow .ratingdetail .starsrow svg {
width: 20px;
height: 20px
}

.base .experience .ratingrow .ratingdetail .reviewcount {
font-size: 15px;
color: #3a4f63;
line-height: 1.5
}

.base .pnum {
display: inline-block;
font-size: 15px;
color: #3D689E;
font-weight: 600;
margin-right: 8px;
opacity: .7
}

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

.base .customlist li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 15px;
line-height: 1.75;
color: #3a4f63
}

.base .customlist li svg {
flex-shrink: 0;
margin-top: 4px
}

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

.base .titleblock .textside {
padding: 64px 32px
}

.base .titleblock h1 {
font-size: 50px
}

.base .titleblock .imageside {
height: 320px
}

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

.base .invest .pagewrap {
grid-template-columns: 1fr
}

.base .invest .imgcol {
max-width: 480px
}

.base .environ .twocol {
grid-template-columns: 1fr
}

.base .environ .pillgrid {
grid-template-columns: 1fr
}

.base .experience .stories {
grid-template-columns: 1fr
}
}

@media (max-width: 480px) {
.base .titleblock h1 {
font-size: 50px
}

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

.base .outcomes h2,
.base .invest h2,
.base .environ h2,
.base .experience h2 {
font-size: 20px
}

.base .outcomes .numfade,
.base .invest .numfade,
.base .environ .numfade,
.base .experience .numfade {
font-size: 50px
}

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

.base .divider .line {
width: 40px
}

.base .invest .pagewrap {
gap: 32px
}
}

.contactus {
max-width: 1400px;
margin: 0 auto;
overflow: hidden
}

.contactus .reach {
padding: 64px 32px;
background: #fff;
position: relative
}

.contactus .reach::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(158deg, #8df3ec14 0%, #fff0 60%), linear-gradient(320deg, #6eb0da0f 0%, #fff0 50%);
pointer-events: none
}

.contactus .reach .strokes {
position: absolute;
top: 32px;
right: 32px;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none
}

.contactus .reach .strokes span {
display: block;
height: 2px;
background: #6eb0da59;
border-radius: 2px
}

.contactus .reach .strokes span:nth-child(1) {
width: 32px
}

.contactus .reach .strokes span:nth-child(2) {
width: 24px
}

.contactus .reach .strokes span:nth-child(3) {
width: 16px
}

.contactus .reach .strokes span:nth-child(4) {
width: 8px
}

.contactus .reach .grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 64px;
max-width: 1400px;
position: relative
}

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

.contactus .reach .details .label {
font-size: 15px;
letter-spacing: .12em;
text-transform: uppercase;
color: #3D689E;
font-weight: 600
}

.contactus .reach .details h1 {
font-size: 50px;
line-height: 1.2;
color: #1b2d45;
margin: 0;
font-weight: 700
}

.contactus .reach .details h1 .underword {
position: relative;
display: inline-block
}

.contactus .reach .details h1 .underword::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
height: 3px;
width: 0;
background: #3D689E;
border-radius: 2px;
animation: drawline .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) .5s forwards
}

@keyframes drawline {
to {
width: 100%
}
}

.contactus .reach .details .desc {
font-size: 17px;
line-height: 1.75;
color: #2c3e52
}

.contactus .reach .details .desc p {
margin: 0 0 8px
}

.contactus .reach .details .infoblocks {
display: flex;
flex-direction: column;
gap: 16px
}

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

.contactus .reach .details .infoitem .icon {
width: 36px;
height: 36px;
border-radius: 2px;
background: #3d689e14;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}

.contactus .reach .details .infoitem .icon svg {
width: 18px;
height: 18px
}

.contactus .reach .details .infoitem .text {
display: flex;
flex-direction: column;
gap: 8px
}

.contactus .reach .details .infoitem .text .ilabel {
font-size: 15px;
font-weight: 600;
color: #3D689E;
text-transform: uppercase;
letter-spacing: .08em
}

.contactus .reach .details .infoitem .text a,
.contactus .reach .details .infoitem .text span {
font-size: 15px;
line-height: 1.5;
color: #2c3e52;
text-decoration: none;
transition: color .6s ease
}

.contactus .reach .details .infoitem .text a:hover {
color: #3D689E
}

.contactus .formblock {
background: #fff;
border-radius: 20px;
padding: 64px;
box-shadow: 0 10px 52px 0 #3d689e1c;
position: relative;
overflow: hidden
}

.contactus .formblock::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #3D689E, #6EB0DA, #8DF3EC);
border-radius: 20px 20px 0 0
}

.contactus .formblock .fnum {
position: absolute;
top: 16px;
right: 32px;
font-size: 68px;
line-height: 1.2;
font-weight: 800;
color: #8df3ec2e;
pointer-events: none;
user-select: none
}

.contactus .formblock h2 {
font-size: 20px;
line-height: 1.2;
color: #1b2d45;
margin: 0 0 8px;
font-weight: 700
}

.contactus .formblock .subdesc {
font-size: 15px;
line-height: 1.5;
color: #4a6070;
margin: 0 0 32px
}

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

.contactus .formblock .row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px
}

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

.contactus .formblock .field label {
font-size: 15px;
font-weight: 600;
color: #2c3e52;
letter-spacing: .04em
}

.contactus .formblock .field input,
.contactus .formblock .field select {
font-size: 15px;
line-height: 1.5;
padding: 16px;
border: 1.5px solid #3d689e33;
border-radius: 2px;
background: #f4f8fc;
color: #1b2d45;
outline: none;
transition: border-color .6s ease, box-shadow .5s ease;
box-shadow: inset 0 1px 3px 0 #3d689e0d;
width: 100%;
appearance: none;
-webkit-appearance: none
}

.contactus .formblock .field input:focus,
.contactus .formblock .field select:focus {
border-color: #3D689E;
box-shadow: inset 0 1px 3px 0 #3d689e14 0 0 0 3px #3d689e14
}

.contactus .formblock .field input::placeholder {
color: #8aacca
}

.contactus .formblock .field .selectwrap {
position: relative
}

.contactus .formblock .field .selectwrap select {
padding-right: 40px;
cursor: pointer
}

.contactus .formblock .field .selectwrap .arrow {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
pointer-events: none
}

.contactus .formblock .field .selectwrap .arrow svg {
width: 14px;
height: 14px;
fill: #3D689E
}

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

.contactus .formblock .timeline .tlabel {
font-size: 15px;
font-weight: 600;
color: #2c3e52;
letter-spacing: .04em
}

.contactus .formblock .timeline .toptions {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px
}

.contactus .formblock .timeline .toptions input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0
}

.contactus .formblock .timeline .toptions label {
display: flex;
align-items: center;
justify-content: center;
padding: 16px 8px;
border: 1.5px solid #3d689e33;
border-radius: 2px;
font-size: 15px;
color: #2c3e52;
cursor: pointer;
text-align: center;
line-height: 1.5;
background: #f4f8fc;
transition: border-color .55s ease, background .55s ease, color .55s ease
}

.contactus .formblock .timeline .toptions input[type="radio"]:checked+label {
border-color: #3D689E;
background: #3d689e14;
color: #3D689E;
font-weight: 600
}

.contactus .formblock .timeline .toptions label:hover {
border-color: #6EB0DA;
background: #6eb0da14
}

.contactus .formblock .privacy {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 16px;
padding: 16px;
background: #8df3ec14;
border-radius: 2px
}

.contactus .formblock .privacy input[type="checkbox"] {
width: 18px;
height: 18px;
flex-shrink: 0;
accent-color: #3D689E;
cursor: pointer;
margin-top: 2px
}

.contactus .formblock .privacy .ptext {
font-size: 15px;
line-height: 1.75;
color: #4a6070
}

.contactus .formblock .privacy .ptext a {
color: #3D689E;
text-decoration: underline;
transition: color .6s ease
}

.contactus .formblock .privacy .ptext a:hover {
color: #1b2d45
}

.contactus .formblock .submitrow {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px
}

.contactus .formblock .btn {
position: relative;
padding: 16px 32px;
font-size: 15px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
background: #3D689E;
border: none;
border-radius: 2px;
cursor: pointer;
overflow: hidden;
transition: color .55s ease
}

.contactus .formblock .btn::after {
content: "";
position: absolute;
left: 0;
bottom: -100%;
width: 100%;
height: 100%;
background: #1b2d45;
border-radius: 2px;
transition: bottom .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 0
}

.contactus .formblock .btn:hover::after {
bottom: 0
}

.contactus .formblock .btn span {
position: relative;
z-index: 1
}

.contactus .formblock .btn:focus {
outline: 3px solid #3d689e66;
outline-offset: 2px
}

.contactus .formblock .btn:active {
transform: translateY(1px)
}

.contactus .divider {
position: relative;
height: 40px;
overflow: hidden;
background: #fff
}

.contactus .divider svg {
position: absolute;
bottom: 0;
left: 0;
width: 100%
}

.contactus .channels {
padding: 64px 32px;
background: #8DF3EC;
position: relative
}

.contactus .channels::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(200deg, #6eb0da40 0%, #8df3ec00 70%);
pointer-events: none
}

.contactus .channels .inner {
max-width: 1400px;
position: relative
}

.contactus .channels .toprow {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
gap: 32px;
align-items: start;
margin-bottom: 64px
}

.contactus .channels .toprow .numblock {
display: flex;
flex-direction: column;
gap: 8px
}

.contactus .channels .toprow .numblock .bignum {
font-size: 68px;
line-height: 1.2;
font-weight: 800;
color: #3d689e26;
user-select: none
}

.contactus .channels .toprow .numblock h2 {
font-size: 20px;
line-height: 1.2;
color: #1b2d45;
margin: 0;
font-weight: 700
}

.contactus .channels .toprow .stat {
display: flex;
flex-direction: column;
gap: 8px;
padding: 32px;
background: #fff;
border-radius: 20px;
box-shadow: 0 5px 25px 0 #3d689e17
}

.contactus .channels .toprow .stat .sval {
font-size: 50px;
line-height: 1.2;
font-weight: 800;
color: #3D689E
}

.contactus .channels .toprow .stat .sdesc {
font-size: 15px;
line-height: 1.5;
color: #2c3e52
}

.contactus .channels .toprow .text {
font-size: 17px;
line-height: 1.75;
color: #1b2d45
}

.contactus .channels .toprow .text p {
margin: 0 0 8px
}

.contactus .channels .cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px
}

.contactus .channels .card {
background: #fff;
border-radius: 20px;
padding: 32px;
box-shadow: 0 5px 25px 0 #3d689e17;
display: flex;
flex-direction: column;
gap: 16px;
transition: box-shadow .65s ease, transform .65s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.contactus .channels .card:hover {
box-shadow: 0 10px 52px 0 #3d689e1c;
transform: translateY(-4px)
}

.contactus .channels .card .cicon {
width: 48px;
height: 48px;
border-radius: 2px;
background: #3d689e14;
display: flex;
align-items: center;
justify-content: center
}

.contactus .channels .card .cicon svg {
width: 24px;
height: 24px
}

.contactus .channels .card h4 {
font-size: 17px;
line-height: 1.2;
color: #1b2d45;
margin: 0;
font-weight: 700
}

.contactus .channels .card .cval {
font-size: 15px;
line-height: 1.5;
color: #2c3e52;
text-decoration: none;
transition: color .6s ease
}

.contactus .channels .card .cval:hover {
color: #3D689E
}

.contactus .channels .card .ctag {
font-size: 15px;
line-height: 1.5;
color: #4a6070
}

.contactus .anim1 {
animation: clipdown .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) .1s both
}

.contactus .anim2 {
animation: clipdown .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) .25s both
}

.contactus .anim3 {
animation: clipdown .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) .4s both
}

.contactus .anim4 {
animation: clipdown .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) .55s both
}

.contactus .anim5 {
animation: clipdown .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) .7s both
}

@keyframes clipdown {
from {
clip-path: inset(0 0 100% 0);
opacity: 0
}

to {
clip-path: inset(0 0 0% 0);
opacity: 1
}
}

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

.contactus .formblock {
padding: 32px
}

.contactus .formblock .row {
grid-template-columns: 1fr
}

.contactus .formblock .timeline .toptions {
grid-template-columns: repeat(2, 1fr)
}

.contactus .channels .toprow {
grid-template-columns: 1fr;
gap: 16px
}

.contactus .channels .cards {
grid-template-columns: 1fr 1fr
}
}

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

.contactus .reach .details h1 {
font-size: 50px
}

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

.contactus .channels .cards {
grid-template-columns: 1fr
}

.contactus .formblock .timeline .toptions {
grid-template-columns: 1fr 1fr
}
}

.successstories {
max-width: 1400px;
margin: 0 auto;
padding: 0 32px;
overflow: hidden
}

.successstories .pagetop {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 0;
padding: 64px 0 0;
position: relative
}

.successstories .pagetop .textzone {
flex: 1 1 55%;
padding: 64px 64px 64px 0;
position: relative;
z-index: 1
}

.successstories .pagetop .dotgrid {
position: absolute;
top: 0;
left: -16px;
width: 220px;
height: 180px;
pointer-events: none;
z-index: 0
}

.successstories .pagetop .dotgrid svg {
width: 100%;
height: 100%
}

.successstories .pagetop .numaccent {
font-size: 68px;
line-height: 1.2;
color: #6EB0DA;
opacity: .13;
position: absolute;
top: 32px;
left: 0;
font-weight: 900;
letter-spacing: -2px;
user-select: none;
z-index: 0
}

.successstories .pagetop .textzone h1 {
font-size: 50px;
line-height: 1.2;
color: #1b3a5c;
position: relative;
z-index: 1;
margin: 0 0 16px
}

.successstories .pagetop .textzone h1 .underword {
position: relative;
display: inline-block
}

.successstories .pagetop .textzone h1 .underword::after {
content: '';
position: absolute;
bottom: 2px;
left: 0;
width: 0;
height: 2px;
background: #3D689E;
animation: drawline .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) .4s forwards
}

@keyframes drawline {
to {
width: 100%
}
}

.successstories .pagetop .textzone .lead {
font-size: 17px;
line-height: 1.75;
color: #2c4a6a;
position: relative;
z-index: 1;
margin: 0;
max-width: 480px
}

.successstories .pagetop .imgzone {
flex: 1 1 45%;
position: relative;
overflow: hidden;
border-radius: 20px;
min-height: 320px
}

.successstories .pagetop .imgzone img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
aspect-ratio: 1/1
}

.successstories .pagetop .imgzone .scanlines {
position: absolute;
inset: 0;
background: repeating-linear-gradient(to bottom, transparent, transparent 3px, #3d689e0f 3px, #3d689e0f 4px);
pointer-events: none;
border-radius: 20px
}

.successstories .pagetop .imgzone .vignette {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 30% 50%, transparent 40%, #1b3a5c38 100%);
pointer-events: none;
border-radius: 20px
}

.successstories .splitreveal {
animation: splitopen .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
}

@keyframes splitopen {
from {
clip-path: inset(0 50% 0 50%);
opacity: 0
}

to {
clip-path: inset(0 0% 0 0%);
opacity: 1
}
}

.successstories .dotsrow {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
padding: 32px 0 0
}

.successstories .dotsrow span {
width: 6px;
height: 6px;
border-radius: 50%;
background: #6EB0DA;
display: block;
opacity: .5
}

.successstories .dotsrow span:first-child {
background: #3D689E;
opacity: 1
}

.successstories .dotsrow span:nth-child(3) {
background: #8DF3EC;
opacity: .7
}

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

.successstories .postcard {
background: #fff;
border-radius: 20px;
box-shadow: 0 5px 25px 0 #3d689e17;
overflow: hidden;
display: flex;
flex-direction: column;
border: 1.5px solid transparent;
transition: border-color .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .5s ease;
position: relative
}

.successstories .postcard:hover {
border-color: #6EB0DA;
border-style: dashed;
box-shadow: 0 10px 52px 0 #3d689e1c
}

.successstories .postcard .imgwrap {
width: 100%;
aspect-ratio: 1/1;
overflow: hidden;
position: relative
}

.successstories .postcard .imgwrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.successstories .postcard:hover .imgwrap img {
transform: scale(1.06)
}

.successstories .postcard .cardtag {
position: absolute;
top: 16px;
left: 16px;
background: #3D689E;
color: #fff;
font-size: 15px;
line-height: 1.2;
padding: 8px 16px;
border-radius: 2px;
letter-spacing: .08em;
text-transform: uppercase;
z-index: 1
}

.successstories .postcard .cardbody {
padding: 32px 32px 16px;
flex: 1;
display: flex;
flex-direction: column;
gap: 8px
}

.successstories .postcard .cardmeta {
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
font-size: 15px;
line-height: 1.2;
color: #5a7fa8
}

.successstories .postcard .cardmeta .metaitem {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px
}

.successstories .postcard .cardmeta svg {
width: 14px;
height: 14px;
flex-shrink: 0
}

.successstories .postcard h4 {
font-size: 20px;
line-height: 1.5;
color: #1b3a5c;
margin: 8px 0 0
}

.successstories .postcard .carddesc {
font-size: 15px;
line-height: 1.75;
color: #2c4a6a;
margin: 0
}

.successstories .postcard .categorytag {
display: inline-block;
font-size: 15px;
line-height: 1.2;
color: #3D689E;
border: 1.5px solid #6EB0DA;
border-radius: 2px;
padding: 8px 16px;
margin-top: 8px;
text-transform: uppercase;
letter-spacing: .06em;
align-self: flex-start
}

.successstories .postcard .readmore {
display: inline-block;
margin-top: 16px;
font-size: 15px;
line-height: 1.2;
color: #fff;
background: #3D689E;
border-radius: 2px;
padding: 8px 16px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: .08em;
position: relative;
overflow: hidden;
transition: color .5s ease;
align-self: flex-start
}

.successstories .postcard .readmore::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: #1b3a5c;
transition: height .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 0
}

.successstories .postcard .readmore:hover::before {
height: 100%
}

.successstories .postcard .readmore span {
position: relative;
z-index: 1
}

.successstories .divider {
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, #6EB0DA 30%, #8DF3EC 70%, transparent);
margin: 32px 0
}

.successstories .metricstrip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
background: linear-gradient(160deg, #1b3a5c 0%, #3D689E 60%, #6EB0DA 100%);
border-radius: 20px;
padding: 64px 32px;
margin: 0 0 64px;
position: relative;
overflow: hidden
}

.successstories .metricstrip::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 80% 50%, #8df3ec14 0%, transparent 70%);
pointer-events: none
}

.successstories .metricstrip .metricitem {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 0 32px;
border-right: 1px solid #8df3ec2e
}

.successstories .metricstrip .metricitem:last-child {
border-right: none
}

.successstories .metricstrip .metricnum {
font-size: 50px;
line-height: 1.2;
color: #8DF3EC;
font-weight: 700
}

.successstories .metricstrip .metriclabel {
font-size: 15px;
line-height: 1.5;
color: #fffc;
text-align: center;
letter-spacing: .05em;
text-transform: uppercase
}

.successstories .asymblock {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 32px;
padding: 0 0 64px;
align-items: start
}

.successstories .asymblock .richside {
background: #f0f6fb;
border-radius: 20px;
padding: 64px;
position: relative;
overflow: hidden;
box-shadow: 0 1px 3px 0 #3d689e0d
}

.successstories .asymblock .richside::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, #3d689e0a 0%, transparent 60%);
pointer-events: none
}

.successstories .asymblock .richside .bignumber {
font-size: 68px;
line-height: 1.2;
color: #6EB0DA;
opacity: .12;
position: absolute;
top: 16px;
right: 32px;
font-weight: 900;
user-select: none;
pointer-events: none
}

.successstories .asymblock .richside h2 {
font-size: 50px;
line-height: 1.2;
color: #1b3a5c;
margin: 0 0 32px;
position: relative;
z-index: 1
}

.successstories .asymblock .richside .paragraph {
display: flex;
flex-direction: row;
gap: 16px;
align-items: flex-start;
margin: 0 0 16px
}

.successstories .asymblock .richside .paragraph .pnum {
font-size: 15px;
line-height: 1.2;
color: #6EB0DA;
font-weight: 700;
flex-shrink: 0;
padding-top: 2px
}

.successstories .asymblock .richside .paragraph p {
font-size: 17px;
line-height: 1.75;
color: #2c4a6a;
margin: 0
}

.successstories .asymblock .richside .svglist {
list-style: none;
padding: 0;
margin: 32px 0 0;
display: flex;
flex-direction: column;
gap: 16px
}

.successstories .asymblock .richside .svglist li {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
font-size: 17px;
line-height: 1.5;
color: #1b3a5c
}

.successstories .asymblock .richside .svglist li svg {
flex-shrink: 0;
width: 18px;
height: 18px
}

.successstories .asymblock .minside {
display: flex;
flex-direction: column;
gap: 32px
}

.successstories .asymblock .minside .minsidebox {
background: #fff !important;
border-radius: 20px;
padding: 32px;
box-shadow: 0 5px 25px 0 #3d689e17;
display: flex;
flex-direction: column;
gap: 16px;
border: 1.5px solid #e8f1f9
}

.successstories .asymblock .minside .minsidebox h5 {
font-size: 17px;
line-height: 1.5;
color: #3D689E;
margin: 0;
text-transform: uppercase;
letter-spacing: .08em
}

.successstories .asymblock .minside .minsidebox p {
font-size: 15px;
line-height: 1.75;
color: #2c4a6a;
margin: 0
}

.successstories .asymblock .minside .imgboxwrap {
border-radius: 20px;
overflow: hidden;
aspect-ratio: 1/1;
box-shadow: 0 5px 25px 0 #3d689e17
}

.successstories .asymblock .minside .imgboxwrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.successstories .asymblock .minside .imgboxwrap:hover img {
transform: scale(1.06)
}

.successstories .contactband {
background: #f0f6fb;
border-radius: 20px;
padding: 64px;
margin: 0 0 64px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 32px;
position: relative;
overflow: hidden;
box-shadow: 0 1px 3px 0 #3d689e0d
}

.successstories .contactband::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, #8df3ec12 0%, transparent 55%);
pointer-events: none
}

.successstories .contactband .bandtext {
max-width: 540px;
position: relative;
z-index: 1
}

.successstories .contactband .bandtext h3 {
font-size: 20px;
line-height: 1.5;
color: #1b3a5c;
margin: 0 0 8px
}

.successstories .contactband .bandtext p {
font-size: 17px;
line-height: 1.75;
color: #2c4a6a;
margin: 0
}

.successstories .contactband .bandactions {
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
flex-shrink: 0;
position: relative;
z-index: 1
}

.successstories .contactband .bandactions .btnprimary {
display: inline-block;
font-size: 15px;
line-height: 1.2;
color: #fff;
background: #3D689E;
border-radius: 2px;
padding: 16px 32px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: .08em;
position: relative;
overflow: hidden;
transition: color .5s ease
}

.successstories .contactband .bandactions .btnprimary::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: #1b3a5c;
transition: height .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 0
}

.successstories .contactband .bandactions .btnprimary:hover::before {
height: 100%
}

.successstories .contactband .bandactions .btnprimary span {
position: relative;
z-index: 1
}

.successstories .contactband .bandactions .btnsecondary {
display: inline-block;
font-size: 15px;
line-height: 1.2;
color: #3D689E;
background: transparent;
border-radius: 2px;
padding: 16px 32px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: .08em;
border: 1.5px solid #3D689E;
transition: background .5s ease, color .5s ease
}

.successstories .contactband .bandactions .btnsecondary:hover {
background: #3D689E;
color: #fff
}

.successstories .thirdimg {
width: 100%;
border-radius: 20px;
overflow: hidden;
aspect-ratio: 1/1;
margin: 0 0 64px;
position: relative;
box-shadow: 0 10px 52px 0 #3d689e1c;
max-height: 480px
}

.successstories .thirdimg img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
aspect-ratio: unset;
transition: transform .8s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.successstories .thirdimg:hover img {
transform: scale(1.04)
}

.successstories .thirdimg .imgoverlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, #1b3a5c8c 0%, transparent 55%);
pointer-events: none
}

.successstories .thirdimg .imgcaption {
position: absolute;
bottom: 32px;
left: 32px;
right: 32px;
color: #fff;
z-index: 1
}

.successstories .thirdimg .imgcaption h3 {
font-size: 20px;
line-height: 1.5;
margin: 0 0 8px
}

.successstories .thirdimg .imgcaption p {
font-size: 15px;
line-height: 1.75;
margin: 0;
opacity: .88
}

@media (max-width: 960px) {
.successstories .pagetop {
flex-direction: column;
padding: 32px 0 0
}

.successstories .pagetop .textzone {
padding: 32px 0
}

.successstories .pagetop .imgzone {
min-height: 260px
}

.successstories .cardgrid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
padding: 32px 0 16px
}

.successstories .metricstrip {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
padding: 32px
}

.successstories .metricstrip .metricitem {
border-right: none;
padding: 0
}

.successstories .asymblock {
grid-template-columns: 1fr
}

.successstories .asymblock .richside {
padding: 32px
}

.successstories .contactband {
flex-direction: column;
align-items: flex-start;
padding: 32px
}

.successstories .contactband .bandactions {
flex-direction: column;
align-items: flex-start
}
}

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

.successstories .cardgrid {
grid-template-columns: 1fr
}

.successstories .metricstrip {
grid-template-columns: 1fr
}

.successstories .pagetop .textzone h1 {
font-size: 20px
}

.successstories .asymblock .richside h2 {
font-size: 20px
}

.successstories .contactband {
padding: 32px 16px
}

.successstories .postcard .cardbody {
padding: 16px
}
}

.aboutus {
max-width: 1400px;
margin: 0 auto;
overflow: hidden
}

.aboutus .manifesto {
padding: 64px 64px 32px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: end;
position: relative
}

.aboutus .manifesto .corner-tl,
.aboutus .manifesto .corner-br {
position: absolute;
width: 48px;
height: 48px;
pointer-events: none
}

.aboutus .manifesto .corner-tl {
top: 32px;
left: 32px;
border-top: 2px solid #3D689E;
border-left: 2px solid #3D689E
}

.aboutus .manifesto .corner-br {
bottom: 16px;
right: 32px;
border-bottom: 2px solid #6EB0DA;
border-right: 2px solid #6EB0DA
}

.aboutus .manifesto .imageside {
position: relative
}

.aboutus .manifesto .imageframe {
border-radius: 20px;
overflow: hidden;
aspect-ratio: 1/1;
box-shadow: 0 10px 52px 0 #3d689e1c
}

.aboutus .manifesto .imageframe img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: blur(0px)
}

.aboutus .manifesto .framedeco {
position: absolute;
bottom: -16px;
right: -16px;
width: 80px;
height: 80px;
border-radius: 2px;
background: #8DF3EC;
opacity: .35;
z-index: -1
}

.aboutus .manifesto .textside {
display: flex;
flex-direction: column;
gap: 32px;
padding-top: 64px
}

.aboutus .manifesto .tagline {
font-size: 15px;
letter-spacing: .12em;
text-transform: uppercase;
color: #3D689E;
font-weight: 600
}

.aboutus .manifesto .declaration h1 {
font-size: 50px;
line-height: 1.2;
color: #1b2d45;
margin: 0 0 16px
}

.aboutus .manifesto .declaration h1 .underlined {
position: relative;
display: inline-block
}

.aboutus .manifesto .declaration h1 .underlined::after {
content: '';
position: absolute;
bottom: 2px;
left: 0;
width: 0;
height: 2px;
background: #3D689E;
animation: drawline .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) .4s forwards
}

@keyframes drawline {
to {
width: 100%
}
}

.aboutus .manifesto .declaration p {
font-size: 17px;
line-height: 1.75;
color: #2c3e55;
margin: 0
}

.aboutus .manifesto .declaration p::before {
content: counter(para);
counter-increment: para;
font-size: 15px;
font-weight: 700;
color: #6EB0DA;
margin-right: 8px
}

.aboutus .manifesto .declaration {
counter-reset: para
}

.aboutus .storyband {
margin: 32px 0 0;
padding: 64px;
background: linear-gradient(160deg, #f0f6fc 0%, #e8f4f9 60%, #d6f5f3 100%);
position: relative
}

.aboutus .storyband .zigzag {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 16px;
overflow: hidden
}

.aboutus .storyband .zigzag svg {
display: block;
width: 100%;
height: 16px
}

.aboutus .storyband .bandgrid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: start
}

.aboutus .storyband .bandleft {
display: flex;
flex-direction: column;
gap: 32px
}

.aboutus .storyband h2 {
font-size: 50px;
line-height: 1.2;
color: #1b2d45;
margin: 0;
position: relative
}

.aboutus .storyband h2 .faded {
position: absolute;
top: -16px;
left: -8px;
font-size: 68px;
color: #3D689E;
opacity: .07;
line-height: 1;
font-weight: 900;
pointer-events: none;
z-index: 0
}

.aboutus .storyband h2 span:not(.faded) {
position: relative;
z-index: 1
}

.aboutus .storyband .prose {
display: flex;
flex-direction: column;
gap: 16px;
counter-reset: stpara
}

.aboutus .storyband .prose p {
font-size: 17px;
line-height: 1.75;
color: #2c3e55;
margin: 0
}

.aboutus .storyband .prose p::before {
content: counter(stpara);
counter-increment: stpara;
font-size: 15px;
font-weight: 700;
color: #3D689E;
margin-right: 8px
}

.aboutus .storyband .steps {
display: flex;
flex-direction: column;
gap: 16px
}

.aboutus .storyband .steps h3 {
font-size: 20px;
line-height: 1.5;
color: #1b2d45;
margin: 0 0 16px
}

.aboutus .storyband .step {
display: flex;
flex-direction: row;
gap: 16px;
align-items: flex-start;
padding: 16px;
background: #fff;
border-radius: 20px;
box-shadow: 0 1px 3px 0 #3d689e0d;
transition: box-shadow .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.aboutus .storyband .step:hover {
box-shadow: 0 5px 25px 0 #3d689e17
}

.aboutus .storyband .stepnum {
font-size: 20px;
font-weight: 900;
color: #3D689E;
min-width: 32px;
line-height: 1.2
}

.aboutus .storyband .steptext {
display: flex;
flex-direction: column;
gap: 8px
}

.aboutus .storyband .steptext h4 {
font-size: 17px;
line-height: 1.5;
color: #1b2d45;
margin: 0
}

.aboutus .storyband .steptext p {
font-size: 15px;
line-height: 1.75;
color: #4a6078;
margin: 0
}

.aboutus .storyband .stepicon {
width: 32px;
height: 32px;
border-radius: 2px;
background: #e8f4f9;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}

.aboutus .storyband .stepicon svg {
width: 18px;
height: 18px
}

.aboutus .imgrow {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
margin-top: 32px
}

.aboutus .imgrow .imgbox {
border-radius: 20px;
overflow: hidden;
aspect-ratio: 1/1;
box-shadow: 0 5px 25px 0 #3d689e17
}

.aboutus .imgrow .imgbox img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.aboutus .imgrow .imgbox:hover img {
transform: scale(1.04)
}

.aboutus .subscribecard {
margin: 64px;
border-radius: 20px;
box-shadow: 0 10px 52px 0 #3d689e1c;
background: #fff;
display: grid;
grid-template-columns: 1fr 1fr;
overflow: hidden;
border: 2px solid #e4eff8
}

.aboutus .subscribecard .cardvisual {
background: linear-gradient(135deg, #3D689E 0%, #6EB0DA 70%, #8DF3EC 100%);
padding: 64px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 32px;
position: relative
}

.aboutus .subscribecard .cardvisual .tripattern {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: 0;
pointer-events: none
}

.aboutus .subscribecard .cardvisual .tripattern svg {
width: 100%;
height: 100%;
opacity: .12
}

.aboutus .subscribecard .cardvisual h2 {
font-size: 50px;
line-height: 1.2;
color: #fff;
margin: 0;
position: relative;
z-index: 1
}

.aboutus .subscribecard .cardvisual p {
font-size: 17px;
line-height: 1.75;
color: #ffffffe0;
margin: 0;
position: relative;
z-index: 1
}

.aboutus .subscribecard .cardvisual .incentive {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
position: relative;
z-index: 1
}

.aboutus .subscribecard .cardvisual .incentive svg {
width: 20px;
height: 20px;
flex-shrink: 0
}

.aboutus .subscribecard .cardvisual .incentive span {
font-size: 15px;
color: #8DF3EC;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .1em
}

.aboutus .subscribecard .cardform {
padding: 64px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 32px
}

.aboutus .subscribecard .cardform h3 {
font-size: 20px;
line-height: 1.5;
color: #1b2d45;
margin: 0
}

.aboutus .subscribecard .cardform p {
font-size: 15px;
line-height: 1.75;
color: #4a6078;
margin: 0
}

.aboutus .subscribecard .cardform form {
display: flex;
flex-direction: column;
gap: 16px
}

.aboutus .subscribecard .cardform .field {
position: relative;
display: flex;
flex-direction: column;
gap: 8px
}

.aboutus .subscribecard .cardform label {
font-size: 15px;
color: #2c3e55;
font-weight: 600
}

.aboutus .subscribecard .cardform .inputwrap {
position: relative
}

.aboutus .subscribecard .cardform .inputwrap svg {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: #6EB0DA;
pointer-events: none
}

.aboutus .subscribecard .cardform input {
width: 100%;
padding: 16px 16px 16px 40px;
border: 2px solid #d4e6f4;
border-radius: 2px;
font-size: 15px;
color: #1b2d45;
background: #f5f9fd;
box-sizing: border-box;
transition: border-color .5s ease;
box-shadow: inset 0 1px 3px 0 #3d689e0d
}

.aboutus .subscribecard .cardform input:focus {
outline: none;
border-color: #3D689E
}

.aboutus .subscribecard .cardform input::placeholder {
color: #8aacc8
}

.aboutus .subscribecard .cardform .submitbtn {
position: relative;
overflow: hidden;
border: none;
background: #3D689E;
color: #fff;
font-size: 15px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
padding: 16px 32px;
border-radius: 2px;
cursor: pointer;
transition: color .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 0;
margin-top: 8px
}

.aboutus .subscribecard .cardform .submitbtn::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: #1b2d45;
transition: height .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: -1
}

.aboutus .subscribecard .cardform .submitbtn:hover::before {
height: 100%
}

.aboutus .subscribecard .cardform .submitbtn:focus {
outline: 2px solid #3D689E;
outline-offset: 2px
}

.aboutus .manifesto .imageside,
.aboutus .manifesto .textside {
animation: slidein .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
}

.aboutus .manifesto .imageside {
animation-name: slidefromleft;
animation-delay: .1s
}

.aboutus .manifesto .textside {
animation-name: slidefromright;
animation-delay: .2s
}

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

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

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

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

.aboutus .storyband .bandleft {
animation: slidefrombelow .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) .3s both
}

.aboutus .storyband .steps {
animation: slidefrombelow .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) .5s both
}

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

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

@media (max-width: 960px) {
.aboutus .manifesto {
grid-template-columns: 1fr;
padding: 32px;
gap: 32px
}

.aboutus .manifesto .textside {
padding-top: 0
}

.aboutus .storyband {
padding: 32px
}

.aboutus .storyband .bandgrid {
grid-template-columns: 1fr;
gap: 32px
}

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

.aboutus .imgrow .imgbox:last-child {
display: none
}

.aboutus .subscribecard {
grid-template-columns: 1fr;
margin: 32px
}

.aboutus .subscribecard .cardvisual {
padding: 32px
}

.aboutus .subscribecard .cardform {
padding: 32px
}
}

@media (max-width: 480px) {
.aboutus .manifesto {
padding: 16px;
gap: 16px
}

.aboutus .manifesto .declaration h1 {
font-size: 20px
}

.aboutus .storyband {
padding: 16px
}

.aboutus .storyband h2 {
font-size: 20px
}

.aboutus .storyband h2 .faded {
font-size: 50px
}

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

.aboutus .imgrow .imgbox:not(:first-child) {
display: none
}

.aboutus .subscribecard {
margin: 16px
}

.aboutus .subscribecard .cardvisual {
padding: 16px;
gap: 16px
}

.aboutus .subscribecard .cardvisual h2 {
font-size: 20px
}

.aboutus .subscribecard .cardform {
padding: 16px;
gap: 16px
}
}

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

.successPage .card {
max-width: 560px;
width: 100%;
background: #f5fbfe;
border: 1px solid #d0eaf7;
border-radius: 20px;
padding: 64px 32px;
box-shadow: 0 10px 52px 0 #3d689e1c;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px
}

.successPage .icon {
width: 64px;
height: 64px;
flex-shrink: 0
}

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

.successPage .text .heading {
font-size: 50px;
line-height: 1.2;
color: #3D689E;
margin: 0
}

.successPage .text .sub {
font-size: 17px;
line-height: 1.75;
color: #2a3f5a;
margin: 0;
max-width: 400px
}

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

.successPage .actions .btn {
display: inline-block;
padding: 16px 32px;
border-radius: 2px;
font-size: 15px;
line-height: 1.2;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
border: none;
position: relative;
overflow: hidden;
transition: color .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.successPage .actions .btn::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0;
transition: height .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 0
}

.successPage .actions .btn:hover::before {
height: 100%
}

.successPage .actions .btn span {
position: relative;
z-index: 1
}

.successPage .actions .primary {
background: #3D689E;
color: #fff;
box-shadow: 0 5px 25px 0 #3d689e17
}

.successPage .actions .primary::before {
background: #2a4f7a
}

.successPage .actions .primary:hover {
color: #fff
}

.successPage .actions .primary:focus {
outline: 2px solid #6EB0DA;
outline-offset: 3px
}

.successPage .actions .secondary {
background: transparent;
color: #3D689E;
border: 1px solid #3D689E
}

.successPage .actions .secondary::before {
background: #eef5fb
}

.successPage .actions .secondary:hover {
color: #3D689E
}

.successPage .actions .secondary:focus {
outline: 2px solid #6EB0DA;
outline-offset: 3px
}

@media (max-width: 480px) {
.successPage {
padding: 32px 16px
}

.successPage .card {
padding: 32px 16px;
gap: 16px
}

.successPage .text .heading {
font-size: 20px
}

.successPage .text .sub {
font-size: 15px
}

.successPage .actions {
flex-direction: column;
width: 100%
}

.successPage .actions .btn {
text-align: center
}
}