body {
    margin: 0;
    min-height: 100dvh;
    overflow-x: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-family: 'Montserrat', sans-serif
}

.topbar {
    background: linear-gradient(90deg, #4A706A 0%, #6B8A89 60%, #7FAFBA 100%);
    display: flex;
    align-items: stretch;
    min-height: 100px;
    position: relative
}

.brandblock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #3a5a55;
    padding: 16px 32px;
    gap: 8px;
    min-width: 180px;
    flex-shrink: 0
}

.logoframe {
    width: 80px;
    height: 80px;
    border: 1px solid #ffffff8c;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -1px 2px 5px 0 #4a706a12 -1px 4px 25px 0 #4a706a1a;
    flex-shrink: 0
}

.logoframe img {
    width: 68px;
    height: 68px;
    object-fit: contain;
    display: block
}

.brandname {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .04em;
    text-align: center;
    line-height: 1.15
}

.brandyear {
    font-size: 15px;
    color: #ffffffb8;
    line-height: 1.15;
    text-align: center
}

.navshell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding: 16px 32px;
    gap: 16px
}

.navlinks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 32px;
    list-style: none;
    margin: 0;
    padding: 0
}

.navlinks li a {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid #ffffff59;
    border-radius: 0;
    display: inline-block;
    transition: background .5s cubic-bezier(0.22, 1, 0.36, 1), border-color .45s cubic-bezier(0.22, 1, 0.36, 1), color .45s cubic-bezier(0.22, 1, 0.36, 1);
    line-height: 1.45
}

.navlinks li a:hover {
    background: #ffffff2e;
    border-color: #ffffffb3;
    color: #fff
}

.navlinks li a:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
    text-decoration: underline
}

.contactrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 32px
}

.contactitem {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffffe0;
    font-size: 15px;
    line-height: 1.45;
    text-decoration: none;
    transition: color .5s ease-in-out
}

.contactitem:hover {
    color: #fff
}

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

.contactitem i {
    font-size: 18px;
    flex-shrink: 0
}

.ftrbody {
    background: #6B8A89;
    padding: 64px 0 0
}

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

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

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

.ftrlogoframe {
    width: 80px;
    height: 80px;
    border: 1px solid #fff6;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -1px 2px 5px 0 #6b8a8912 -1px 4px 25px 0 #6b8a891a;
    flex-shrink: 0
}

.ftrlogoframe img {
    width: 68px;
    height: 68px;
    object-fit: contain;
    display: block
}

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

.ftrbrandname {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.15
}

.ftrtag {
    font-size: 15px;
    color: #ffffffbf;
    line-height: 1.45
}

.ftrdesc {
    font-size: 15px;
    color: #ffffffd1;
    line-height: 1.7;
    max-width: 420px
}

.ftrcontacts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px
}

.ftrlink {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffffd9;
    font-size: 15px;
    line-height: 1.45;
    text-decoration: none;
    transition: color .55s ease-in-out
}

.ftrlink:hover {
    color: #fff
}

.ftrlink:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
    text-decoration: underline
}

.ftrlink i {
    font-size: 18px;
    flex-shrink: 0;
    color: #ffffffb3
}

.ftrright {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 200px
}

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

.ftrnavhead {
    font-size: 15px;
    font-weight: 700;
    color: #fff9;
    text-transform: uppercase;
    letter-spacing: .1em;
    line-height: 1.15;
    margin-bottom: 8px
}

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

.ftrnavlist li a {
    font-size: 15px;
    color: #ffffffd9;
    text-decoration: none;
    line-height: 1.7;
    padding: 4px 0;
    display: inline-block;
    border-bottom: 1px solid transparent;
    transition: color .5s cubic-bezier(0.22, 1, 0.36, 1), border-color .5s cubic-bezier(0.22, 1, 0.36, 1)
}

.ftrnavlist li a:hover {
    color: #fff;
    border-bottom-color: #ffffff80
}

.ftrnavlist li a:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
    text-decoration: underline
}

.ftrbar {
    background: #4A706A;
    margin-top: 64px;
    padding: 16px 32px
}

.ftrbarmount {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px
}

.ftrcopy {
    font-size: 15px;
    color: #ffffffb8;
    line-height: 1.45
}

.ftraddr {
    font-size: 15px;
    color: #fff9;
    line-height: 1.45;
    display: flex;
    align-items: center;
    gap: 8px
}

.ftraddr i {
    font-size: 15px;
    flex-shrink: 0
}

.gdprmount {
    display: none
}

@media (max-width: 1280px) {
    .ftrmount {
        gap: 32px
    }

    .navshell {
        padding: 16px
    }
}

@media (max-width: 768px) {
    .topbar {
        flex-direction: column;
        min-height: auto
    }

    .brandblock {
        flex-direction: row;
        justify-content: flex-start;
        padding: 16px;
        gap: 16px;
        min-width: 0
    }

    .navshell {
        padding: 16px;
        gap: 8px
    }

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

    .ftrright {
        min-width: 0;
        width: 100%
    }

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

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

    .logoframe {
        width: 64px;
        height: 64px
    }

    .logoframe img {
        width: 52px;
        height: 52px
    }

    .navlinks {
        gap: 8px 16px
    }

    .ftrbody {
        padding: 32px 0 0
    }

    .ftrmount {
        padding: 0 16px
    }

    .ftrbar {
        padding: 16px
    }
}

.gdprmount {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 560px;
    z-index: 2000;
    display: none
}

.gdprcard {
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: -1px 9px 52px 0 #4a706a1c;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.gdprdesc {
    font-size: 15px;
    color: #2a3d3b;
    line-height: 1.7;
    font-family: 'Montserrat', sans-serif
}

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

.gdprtogglearea.open {
    display: flex
}

.gdprtogglerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid #4a706a1f
}

.gdprtogglelabel {
    font-size: 15px;
    color: #2a3d3b;
    line-height: 1.45;
    font-family: 'Montserrat', sans-serif
}

.gdprtogglestatus {
    font-size: 15px;
    color: #4A706A;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif
}

.gdprtoggleinput {
    width: 20px;
    height: 20px;
    accent-color: #4A706A;
    cursor: pointer
}

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

.gdprbtnaccept {
    font-size: 15px;
    font-weight: 700;
    color: #4A706A;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.45;
    transition: color .5s cubic-bezier(0.22, 1, 0.36, 1)
}

.gdprbtnaccept:hover {
    color: #3a5a55
}

.gdprbtnaccept:focus {
    outline: 2px solid #4A706A;
    outline-offset: 2px
}

.gdprbtnreject {
    font-size: 15px;
    font-weight: 700;
    color: #4A706A;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.45;
    transition: color .5s cubic-bezier(0.22, 1, 0.36, 1)
}

.gdprbtnreject:hover {
    color: #3a5a55
}

.gdprbtnreject:focus {
    outline: 2px solid #4A706A;
    outline-offset: 2px
}

.gdprbtnset {
    font-size: 15px;
    color: #6B8A89;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.45;
    transition: color .5s cubic-bezier(0.22, 1, 0.36, 1)
}

.gdprbtnset:hover {
    color: #4A706A
}

.gdprbtnset:focus {
    outline: 2px solid #4A706A;
    outline-offset: 2px
}

.gdprbtnconfirm {
    font-size: 15px;
    font-weight: 700;
    color: #4A706A;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.45;
    display: none;
    transition: color .5s cubic-bezier(0.22, 1, 0.36, 1)
}

.gdprbtnconfirm:hover {
    color: #3a5a55
}

.gdprbtnconfirm:focus {
    outline: 2px solid #4A706A;
    outline-offset: 2px
}

.terms-body {
    max-width: 1140px;
    margin: 0 auto;
    padding: 64px 32px;
    color: #1b2b2a
}

.terms-body h1 {
    font-size: 52px;
    line-height: 1.15;
    font-weight: 700;
    color: #1b2b2a;
    margin-bottom: 32px;
    margin-top: 0;
    padding-bottom: 16px;
    border-bottom: 2px solid #4A706A
}

.terms-body h2 {
    font-size: 38px;
    line-height: 1.15;
    font-weight: 700;
    color: #1b2b2a;
    margin-top: 64px;
    margin-bottom: 16px
}

.terms-body h3 {
    font-size: 28px;
    line-height: 1.45;
    font-weight: 600;
    color: #2c3e3d;
    margin-top: 32px;
    margin-bottom: 16px
}

.terms-body h4 {
    font-size: 22px;
    line-height: 1.45;
    font-weight: 600;
    color: #2c3e3d;
    margin-top: 32px;
    margin-bottom: 8px
}

.terms-body h5 {
    font-size: 18px;
    line-height: 1.45;
    font-weight: 600;
    color: #3a5250;
    margin-top: 32px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .06em
}

.terms-body h6 {
    font-size: 15px;
    line-height: 1.45;
    font-weight: 600;
    color: #4A706A;
    margin-top: 16px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .08em
}

.terms-body p {
    font-size: 18px;
    line-height: 1.7;
    color: #1b2b2a;
    margin-top: 0;
    margin-bottom: 16px
}

.terms-body ul,
.terms-body ol {
    font-size: 18px;
    line-height: 1.7;
    color: #1b2b2a;
    margin-top: 0;
    margin-bottom: 16px;
    padding-left: 32px
}

.terms-body li {
    margin-bottom: 8px
}

.terms-body strong,
.terms-body b {
    font-weight: 700;
    color: #1b2b2a
}

.terms-body em,
.terms-body i {
    font-style: italic;
    color: #3a5250
}

.terms-body a {
    color: #4A706A;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .5s cubic-bezier(0.22, 1, 0.36, 1), text-decoration-color .5s cubic-bezier(0.22, 1, 0.36, 1)
}

.terms-body a:hover {
    color: #6B8A89;
    text-decoration-color: #7FAFBA
}

.terms-body hr {
    border: none;
    border-top: 1px solid #c2d4d2;
    margin-top: 64px;
    margin-bottom: 64px;
    height: 0
}

.terms-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.7;
    color: #1b2b2a;
    margin-bottom: 32px;
    box-shadow: -1px 4px 25px 0 #4a706a1a;
    border-radius: 20px;
    overflow: hidden
}

.terms-body thead {
    background-color: #4A706A
}

.terms-body thead th {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 16px;
    text-align: left;
    border: none
}

.terms-body tbody {
    background-color: #fff
}

.terms-body tbody tr {
    border-bottom: 1px solid #dce9e8;
    transition: background-color .45s ease-in-out
}

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

.terms-body tbody tr:hover {
    background-color: #f0f6f5
}

.terms-body td {
    padding: 16px;
    font-size: 15px;
    line-height: 1.7;
    color: #1b2b2a;
    vertical-align: top;
    border: none
}

.terms-body th {
    padding: 16px;
    text-align: left
}

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

    .terms-body h1 {
        font-size: 38px
    }

    .terms-body h2 {
        font-size: 28px;
        margin-top: 32px
    }

    .terms-body h3 {
        font-size: 22px
    }

    .terms-body h4 {
        font-size: 18px
    }

    .terms-body h5,
    .terms-body h6 {
        font-size: 15px
    }

    .terms-body table {
        display: block;
        overflow-x: auto;
        border-radius: 20px
    }
}

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

    .terms-body h1 {
        font-size: 28px
    }

    .terms-body h2 {
        font-size: 22px
    }

    .terms-body h3 {
        font-size: 18px
    }

    .terms-body h4,
    .terms-body h5,
    .terms-body h6 {
        font-size: 15px
    }

    .terms-body p,
    .terms-body ul,
    .terms-body ol {
        font-size: 15px
    }

    .terms-body hr {
        margin-top: 32px;
        margin-bottom: 32px
    }
}

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

.csd .artWrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 32px
}

.csd .tagLine {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 32px 0 0
}

.csd .artTag {
    display: inline-block;
    padding: 4px 16px;
    border: 1.5px solid #4A706A;
    border-radius: 20px;
    font-size: 15px;
    color: #4A706A;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
    transition: background .5s cubic-bezier(0.22, 1, 0.36, 1), color .5s cubic-bezier(0.22, 1, 0.36, 1)
}

.csd .artTag:hover {
    background: #4A706A;
    color: #fff
}

.csd .pubDate {
    font-size: 15px;
    color: #6B8A89;
    line-height: 1.45
}

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

.csd .titleBlock::before {
    content: '';
    position: absolute;
    top: 0;
    left: -32px;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, #4A706A, #7FAFBA, transparent);
    border-radius: 0
}

.csd .titleText {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative
}

.csd .cornerAccent {
    position: absolute;
    top: -16px;
    right: 0;
    width: 48px;
    height: 48px;
    pointer-events: none
}

.csd .cornerAccent svg {
    width: 100%;
    height: 100%
}

.csd .artH1 {
    font-size: 52px;
    line-height: 1.15;
    color: #1b2e2c;
    margin: 0;
    font-weight: 700
}

.csd .artSub {
    font-size: 22px;
    line-height: 1.45;
    color: #4A706A;
    margin: 0;
    font-style: italic
}

.csd .authorRow {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-top: 8px
}

.csd .authorLabel {
    font-size: 15px;
    color: #6B8A89
}

.csd .authorName {
    font-size: 15px;
    color: #1b2e2c;
    font-weight: 600
}

.csd .imgCol {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: -1px 9px 52px 0 #4a706a1c
}

.csd .imgCol::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #4a706a73, transparent 60%);
    pointer-events: none
}

.csd .artImg {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 20px
}

.csd .imgBorder {
    position: absolute;
    top: 8px;
    left: 8px;
    right: -8px;
    bottom: -8px;
    border: 2px solid #7FAFBA;
    border-radius: 20px;
    pointer-events: none;
    z-index: 0
}

.csd .divider1 {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    height: 16px
}

.csd .divider1 span {
    display: block;
    height: 2px;
    border-radius: 0;
    background: #4A706A;
    opacity: .3
}

.csd .bodySection {
    padding: 64px 0;
    background: #f4f7f6;
    position: relative
}

.csd .bodySection::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom, #7FAFBA, #4A706A)
}

.csd .bodyGrid {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 64px;
    align-items: start
}

.csd .artBody {
    color: #1b2e2c;
    font-size: 18px;
    line-height: 1.7
}

.csd .artBody p {
    margin: 0 0 16px
}

.csd .artBody h2 {
    font-size: 28px;
    line-height: 1.45;
    color: #1b2e2c;
    margin: 32px 0 16px;
    font-weight: 700;
    position: relative;
    display: inline-block
}

.csd .artBody h2::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #4A706A;
    border-radius: 0;
    margin-left: 8px;
    vertical-align: middle
}

.csd .artBody h3 {
    font-size: 22px;
    line-height: 1.45;
    color: #4A706A;
    margin: 32px 0 8px;
    font-weight: 600
}

.csd .artBody em {
    font-style: italic;
    font-size: 20px;
    color: #4A706A
}

.csd .artBody blockquote {
    margin: 32px 0;
    padding: 16px 32px;
    border-left: 4px solid #4A706A;
    border-right: 1px solid #7FAFBA;
    background: #fff;
    border-radius: 0 20px 20px 0;
    font-size: 22px;
    line-height: 1.45;
    color: #1b2e2c;
    font-style: italic;
    box-shadow: -1px 4px 25px 0 #4a706a1a
}

.csd .artBody cite {
    display: block;
    margin-top: 8px;
    font-size: 15px;
    color: #6B8A89;
    font-style: normal
}

.csd .artBody ul,
.csd .artBody ol {
    padding-left: 32px;
    margin: 0 0 16px
}

.csd .artBody li {
    margin-bottom: 8px;
    line-height: 1.7
}

.csd .artBody figure {
    margin: 32px 0;
    border-radius: 20px;
    overflow: hidden
}

.csd .artBody figcaption {
    font-size: 15px;
    color: #6B8A89;
    margin-top: 8px;
    text-align: center;
    font-style: italic
}

.csd .sidebar {
    display: flex;
    flex-direction: column;
    gap: 32px
}

.csd .metricCard {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: -1px 4px 25px 0 #4a706a1a;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: hidden
}

.csd .metricCard::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at bottom right, #7fafba2e, transparent 70%);
    pointer-events: none
}

.csd .metricLabel {
    font-size: 15px;
    color: #6B8A89;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600
}

.csd .metricVal {
    font-size: 52px;
    line-height: 1.15;
    color: #4A706A;
    font-weight: 700;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px
}

.csd .arrow {
    display: inline-block;
    width: 28px;
    height: 28px
}

.csd .metricDesc {
    font-size: 15px;
    color: #1b2e2c;
    line-height: 1.45
}

.csd .geoCard {
    background: #4A706A;
    border-radius: 20px;
    padding: 32px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: -1px 9px 52px 0 #4a706a1c
}

.csd .geoTitle {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45
}

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

.csd .geoList li {
    font-size: 15px;
    line-height: 1.45;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    opacity: .92
}

.csd .geoList li i {
    color: #7FAFBA;
    font-size: 15px
}

.csd .divider2 {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    height: 16px
}

.csd .divider2 span {
    display: block;
    height: 2px;
    background: #7FAFBA;
    opacity: .35
}

.csd .statsSection {
    padding: 64px 0;
    background: #fff;
    position: relative
}

.csd .statsSection::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom, #4A706A, transparent)
}

.csd .statsWrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 32px
}

.csd .statsHead {
    font-size: 38px;
    line-height: 1.15;
    color: #1b2e2c;
    font-weight: 700;
    margin: 0 0 32px;
    position: relative;
    display: inline-block
}

.csd .statsHead::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #7FAFBA;
    border-radius: 0;
    margin-left: 8px;
    vertical-align: middle
}

.csd .statsGrid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
    align-items: start
}

.csd .statFeat {
    background: linear-gradient(160deg, #4A706A 60%, #6B8A89);
    border-radius: 20px;
    padding: 32px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: -1px 9px 52px 0 #4a706a1c;
    position: relative;
    overflow: hidden
}

.csd .geoShape {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    border: 2px solid #7fafba4d;
    border-radius: 20px;
    animation: rotSlow 14s linear infinite;
    pointer-events: none
}

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

    to {
        transform: rotate(360deg)
    }
}

.csd .statFeatNum {
    font-size: 68px;
    line-height: 1.15;
    font-weight: 700;
    color: #fff
}

.csd .statFeatLabel {
    font-size: 18px;
    line-height: 1.45;
    color: #ffffffd9
}

.csd .statFeatSub {
    font-size: 15px;
    line-height: 1.45;
    color: #ffffffb3
}

.csd .statItem {
    background: #f4f7f6;
    border-radius: 20px;
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    box-shadow: -1px 2px 5px 0 #4a706a12;
    transition: box-shadow .55s cubic-bezier(0.22, 1, 0.36, 1), transform .55s cubic-bezier(0.22, 1, 0.36, 1)
}

.csd .statItem:hover {
    box-shadow: -1px 9px 52px 0 #4a706a1c;
    transform: translateY(-4px)
}

.csd .statNum {
    font-size: 38px;
    line-height: 1.15;
    color: #4A706A;
    font-weight: 700
}

.csd .statDesc {
    font-size: 15px;
    color: #6B8A89;
    line-height: 1.45
}

.csd .quoteSection {
    padding: 64px 0;
    background: #f4f7f6;
    position: relative
}

.csd .quoteWrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center
}

.csd .quoteBox {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: -1px 4px 25px 0 #4a706a1a;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative
}

.csd .qMark {
    width: 40px;
    height: 40px;
    flex-shrink: 0
}

.csd .qText {
    font-size: 22px;
    line-height: 1.45;
    color: #1b2e2c;
    font-style: italic;
    margin: 0
}

.csd .qAuthor {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid #4a706a26
}

.csd .qName {
    font-size: 15px;
    font-weight: 600;
    color: #4A706A
}

.csd .qRole {
    font-size: 15px;
    color: #6B8A89
}

.csd .supportStats {
    display: flex;
    flex-direction: column;
    gap: 32px
}

.csd .suppItem {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border-radius: 20px;
    box-shadow: -1px 2px 5px 0 #4a706a12;
    transition: box-shadow .6s cubic-bezier(0.22, 1, 0.36, 1)
}

.csd .suppItem:hover {
    box-shadow: -1px 4px 25px 0 #4a706a1a
}

.csd .suppIcon {
    width: 40px;
    height: 40px;
    background: #4A706A;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.csd .suppIcon i {
    color: #fff;
    font-size: 18px
}

.csd .suppText {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.csd .suppNum {
    font-size: 28px;
    line-height: 1.15;
    color: #4A706A;
    font-weight: 700
}

.csd .suppDesc {
    font-size: 15px;
    color: #6B8A89;
    line-height: 1.45
}

.csd .waveAnim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 0
}

.csd .waveSvg {
    position: absolute;
    bottom: 0;
    left: -10%;
    width: 120%;
    opacity: .04;
    animation: wavePass 18s ease-in-out infinite
}

@keyframes wavePass {
    0% {
        transform: translateX(0) scaleY(1)
    }

    50% {
        transform: translateX(5%) scaleY(1.08)
    }

    100% {
        transform: translateX(0) scaleY(1)
    }
}

.csd .ctaSection {
    padding: 64px 0;
    background: #fff;
    position: relative
}

.csd .ctaWrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px
}

.csd .ctaText {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 600px
}

.csd .ctaHead {
    font-size: 28px;
    line-height: 1.45;
    color: #1b2e2c;
    font-weight: 700;
    margin: 0
}

.csd .ctaSub {
    font-size: 18px;
    color: #6B8A89;
    line-height: 1.45;
    margin: 0
}

.csd .ctaBtn {
    display: inline-block;
    padding: 16px 32px;
    border: 2px solid #4A706A;
    border-radius: 20px;
    background: transparent;
    color: #4A706A;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .6s cubic-bezier(0.22, 1, 0.36, 1), color .6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .6s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: -1px 2px 5px 0 #4a706a12
}

.csd .ctaBtn:hover {
    background: #4A706A;
    color: #fff;
    box-shadow: -1px 9px 52px 0 #4a706a1c
}

.csd .ctaBtn:focus {
    outline: 2px solid #4A706A;
    outline-offset: 4px
}

@keyframes shake {

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

    20% {
        transform: translateX(-6px)
    }

    40% {
        transform: translateX(6px)
    }

    60% {
        transform: translateX(-4px)
    }

    80% {
        transform: translateX(4px)
    }
}

.csd .ctaBtn.shake {
    animation: shake .5s cubic-bezier(0.22, 1, 0.36, 1)
}

@media (max-width: 1280px) {
    .csd .statsGrid {
        grid-template-columns: 1fr 1fr
    }

    .csd .statFeat {
        grid-column: span 2
    }
}

@media (max-width: 768px) {
    .csd .titleBlock {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 32px 0
    }

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

    .csd .statsGrid {
        grid-template-columns: 1fr
    }

    .csd .statFeat {
        grid-column: span 1
    }

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

    .csd .ctaWrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px
    }

    .csd .artH1 {
        font-size: 38px
    }

    .csd .titleBlock::before {
        display: none
    }
}

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

    .csd .bodyGrid {
        padding: 0 16px
    }

    .csd .statsWrap {
        padding: 0 16px
    }

    .csd .quoteWrap {
        padding: 0 16px
    }

    .csd .ctaWrap {
        padding: 0 16px
    }

    .csd .artH1 {
        font-size: 28px
    }

    .csd .artSub {
        font-size: 18px
    }

    .csd .artImg {
        height: 260px
    }

    .csd .statFeatNum {
        font-size: 52px
    }
}

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

.cstud .pgwrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 32px
}

.cstud .titlesec {
    padding: 64px 32px 48px;
    position: relative;
    background: linear-gradient(135deg, #4A706A 0%, #6B8A89 50%, #7FAFBA 100%);
    background-size: 300% 300%;
    animation: gradshift 8s ease-in-out infinite;
    overflow: hidden
}

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

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

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

.cstud .titlesec .dotgrid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, #ffffff2e 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none
}

.cstud .titlesec .pgwrap {
    position: relative;
    z-index: 1
}

.cstud .titlesec h1 {
    font-size: 52px;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 16px;
    letter-spacing: 0
}

.cstud .titlesec h1 em {
    font-style: italic;
    color: #d4ede8;
    font-size: 56px
}

.cstud .titlesec .subdesc {
    font-size: 18px;
    line-height: 1.7;
    color: #ffffffe0;
    max-width: 560px;
    margin: 0
}

.cstud .cardssec {
    padding: 64px 32px;
    background: #fff
}

.cstud .cardssec .pgwrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0
}

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

.cstud .card {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: -1px 4px 25px 0 #4a706a1a;
    background: #fff;
    transition: box-shadow .5s cubic-bezier(0.22, 1, 0.36, 1), transform .5s cubic-bezier(0.22, 1, 0.36, 1);
    clip-path: inset(0 0 0 0 round 20px);
    animation: wipein .65s cubic-bezier(0.22, 1, 0.36, 1) both
}

@keyframes wipein {
    from {
        clip-path: inset(0 100% 0 0 round 20px)
    }

    to {
        clip-path: inset(0 0 0 0 round 20px)
    }
}

.cstud .card:nth-child(2) {
    animation-delay: .08s
}

.cstud .card:nth-child(3) {
    animation-delay: .16s
}

.cstud .card:nth-child(4) {
    animation-delay: .24s
}

.cstud .card:nth-child(5) {
    animation-delay: .32s
}

.cstud .card:nth-child(6) {
    animation-delay: .4s
}

.cstud .card:hover {
    box-shadow: -1px 9px 52px 0 #4a706a1c;
    transform: translateY(-4px)
}

.cstud .cardimg {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    position: relative
}

.cstud .cardimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1)
}

.cstud .card:hover .cardimg img {
    transform: scale(1.04)
}

.cstud .cardtag {
    display: inline-block;
    font-size: 15px;
    line-height: 1.45;
    color: #4A706A;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0 0 8px
}

.cstud .cardbody {
    padding: 24px 24px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative
}

.cstud .cardbody::before {
    content: '';
    display: block;
    width: 4px;
    height: 40px;
    background: #4A706A;
    border-radius: 0;
    position: absolute;
    left: 0;
    top: 24px;
    border-right: 2px solid #7FAFBA
}

.cstud .cardh {
    font-size: 22px;
    line-height: 1.45;
    color: #1e2e2c;
    margin: 0 0 8px
}

.cstud .cardsub {
    font-size: 15px;
    line-height: 1.7;
    color: #3a5552;
    margin: 0 0 8px;
    font-style: italic
}

.cstud .carddesc {
    font-size: 15px;
    line-height: 1.7;
    color: #3a4e4c;
    margin: 0 0 16px;
    flex: 1
}

.cstud .cardmeta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #4a706a1f
}

.cstud .cardauthor {
    font-size: 15px;
    line-height: 1.45;
    color: #4A706A;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px
}

.cstud .cardauthor i {
    font-size: 15px;
    color: #6B8A89
}

.cstud .carddate {
    font-size: 15px;
    line-height: 1.45;
    color: #6B8A89;
    margin-left: auto
}

.cstud .cardlink {
    display: inline-block;
    font-size: 15px;
    line-height: 1.45;
    color: #4A706A;
    text-decoration: none;
    font-weight: 600;
    padding: 8px 0;
    border-bottom: 2px solid #7FAFBA;
    transition: color .45s cubic-bezier(0.22, 1, 0.36, 1), border-color .45s cubic-bezier(0.22, 1, 0.36, 1);
    background: transparent;
    margin-top: 8px
}

.cstud .cardlink:hover {
    color: #7FAFBA;
    border-color: #4A706A
}

.cstud .expertssec {
    padding: 64px 32px;
    background: radial-gradient(circle at 100% 100%, #6B8A89 0%, transparent 65%), #f2f7f6
}

.cstud .expertssec .pgwrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0
}

.cstud .exphead {
    font-size: 38px;
    line-height: 1.15;
    color: #1e2e2c;
    margin: 0 0 8px
}

.cstud .exphead span {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #4A706A;
    border-radius: 0;
    margin-left: 6px;
    vertical-align: middle;
    margin-bottom: 4px
}

.cstud .expintro {
    font-size: 18px;
    line-height: 1.7;
    color: #3a5552;
    max-width: 520px;
    margin: 0 0 48px;
    text-align: center
}

.cstud .exprow {
    display: flex;
    flex-direction: row;
    gap: 32px;
    align-items: flex-start
}

.cstud .expcard {
    flex: 1;
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: -1px 4px 25px 0 #6b8a891a;
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
    transition: box-shadow .55s cubic-bezier(0.22, 1, 0.36, 1)
}

.cstud .expcard:hover {
    box-shadow: -1px 9px 52px 0 #4a706a1c
}

.cstud .expimg {
    width: 80px;
    min-width: 80px;
    aspect-ratio: 4/5;
    border-radius: 20px;
    overflow: hidden
}

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

.cstud .expinfo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.cstud .expname {
    font-size: 18px;
    line-height: 1.45;
    color: #1e2e2c;
    font-weight: 700;
    margin: 0
}

.cstud .exprole {
    font-size: 15px;
    line-height: 1.45;
    color: #4A706A;
    margin: 0;
    font-style: italic
}

.cstud .expbio {
    font-size: 15px;
    line-height: 1.7;
    color: #3a4e4c;
    margin: 0
}

.cstud .callsec {
    padding: 64px 32px;
    background: #4A706A;
    position: relative;
    overflow: hidden
}

.cstud .callsec .curveline {
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 260px;
    height: 260px;
    border: 3px solid #ffffff1a;
    border-radius: 0;
    pointer-events: none;
    transform: rotate(18deg)
}

.cstud .callsec .curveline2 {
    position: absolute;
    top: -60px;
    left: -30px;
    width: 200px;
    height: 200px;
    border: 2px solid #ffffff12;
    border-radius: 20px;
    pointer-events: none;
    transform: rotate(-12deg)
}

.cstud .callsec .pgwrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 64px
}

.cstud .calltext {
    flex: 1
}

.cstud .callh {
    font-size: 38px;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 16px
}

.cstud .callp {
    font-size: 18px;
    line-height: 1.7;
    color: #ffffffd9;
    margin: 0;
    max-width: 460px
}

.cstud .callactions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    min-width: 220px
}

.cstud .callbtn {
    display: inline-block;
    font-size: 18px;
    line-height: 1.45;
    color: #4A706A;
    background: #fff;
    border: 2px solid #fff;
    border-radius: 0;
    padding: 16px 32px;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
    transition: background .5s cubic-bezier(0.22, 1, 0.36, 1), color .5s cubic-bezier(0.22, 1, 0.36, 1)
}

.cstud .callbtn:hover {
    background: transparent;
    color: #fff
}

.cstud .callseclink {
    font-size: 15px;
    line-height: 1.45;
    color: #ffffffbf;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .45s ease-in-out
}

.cstud .callseclink:hover {
    color: #fff
}

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

@media (max-width: 768px) {
    .cstud .titlesec h1 {
        font-size: 38px
    }

    .cstud .titlesec h1 em {
        font-size: 40px
    }

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

    .cstud .exprow {
        flex-direction: column
    }

    .cstud .callsec .pgwrap {
        flex-direction: column;
        gap: 32px
    }

    .cstud .callactions {
        width: 100%
    }

    .cstud .exphead {
        font-size: 28px
    }

    .cstud .callh {
        font-size: 28px
    }
}

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

    .cstud .cardssec {
        padding: 32px 16px
    }

    .cstud .expertssec {
        padding: 32px 16px
    }

    .cstud .callsec {
        padding: 32px 16px
    }

    .cstud .titlesec h1 {
        font-size: 28px
    }

    .cstud .titlesec h1 em {
        font-size: 30px
    }

    .cstud .expcard {
        flex-direction: column;
        padding: 24px
    }

    .cstud .expimg {
        width: 72px;
        min-width: 72px
    }
}

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

.opn .bound {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px
}

.opn .titlewrap {
    background: #f5f3f0;
    position: relative;
    padding-top: 64px
}

.opn .titlegrid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 64px;
    align-items: start
}

.opn .titlepic {
    position: relative
}

.opn .titlepic img {
    width: 220px;
    height: 280px;
    object-fit: cover;
    object-position: center;
    display: block
}

.opn .titlepic::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    width: 40px;
    height: 40px;
    border-top: 2px solid #4A706A;
    border-left: 2px solid #4A706A;
    pointer-events: none
}

.opn .titlepic::after {
    content: "";
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 40px;
    height: 40px;
    border-bottom: 2px solid #4A706A;
    border-right: 2px solid #4A706A;
    pointer-events: none
}

.opn .titletext {
    padding-top: 32px;
    padding-bottom: 64px
}

.opn .titletext h1 {
    font-size: 68px;
    line-height: 1.15;
    color: #1e2e2c;
    margin: 0 0 32px;
    letter-spacing: -.5px
}

.opn .titletext h1 em {
    font-style: italic;
    color: #4A706A;
    font-size: 72px
}

.opn .wavediv {
    width: 100%;
    display: block;
    line-height: 0;
    margin-top: -1px
}

.opn .wavediv svg {
    width: 100%;
    height: 64px;
    display: block
}

.opn .gapsec {
    background: #fff;
    padding-top: 64px;
    padding-bottom: 64px
}

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

.opn .gapleft {
    position: relative;
    padding-left: 24px
}

.opn .gapleft::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #4A706A, #7FAFBA);
    border-radius: 0
}

.opn .gapleft h2 {
    font-size: 38px;
    line-height: 1.15;
    color: #1e2e2c;
    margin: 0 0 16px
}

.opn .gapleft h2::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #4A706A;
    border-radius: 0;
    margin-left: 8px;
    vertical-align: middle;
    position: relative;
    top: -2px
}

.opn .gapleft p {
    font-size: 18px;
    line-height: 1.7;
    color: #2d3e3c;
    margin: 0 0 16px
}

.opn .gapright {
    position: relative
}

.opn .gapright img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
    border-radius: 0;
    transition: box-shadow .5s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: -1px 4px 25px 0 #4a706a1a
}

.opn .gapright::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    transition: border-color .55s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 1
}

.opn .gapright:hover::before {
    border-color: #4A706A
}

.opn .gapright:hover img {
    box-shadow: -1px 9px 52px 0 #4a706a1c
}

.opn .hesitsec {
    background: linear-gradient(160deg, #eef4f3 60%, #d8eaec 100%);
    padding-top: 64px;
    padding-bottom: 64px;
    position: relative
}

.opn .hesitinner {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 64px;
    align-items: start
}

.opn .hesitcard {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: -1px 4px 25px 0 #4a706a1a
}

.opn .hesitcard h2 {
    font-size: 28px;
    line-height: 1.45;
    color: #1e2e2c;
    margin: 0 0 16px
}

.opn .hesitcard h2::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #7FAFBA;
    border-radius: 0;
    margin-left: 8px;
    vertical-align: middle;
    position: relative;
    top: -2px
}

.opn .hesitcard p {
    font-size: 18px;
    line-height: 1.7;
    color: #2d3e3c;
    margin: 0 0 16px
}

.opn .hesitcard p:last-child {
    margin-bottom: 0
}

.opn .hesitcard em {
    font-style: italic;
    font-size: 20px;
    color: #4A706A
}

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

.opn .hesitlist li {
    background: #fff;
    border-radius: 20px;
    padding: 16px 32px;
    font-size: 18px;
    line-height: 1.45;
    color: #2d3e3c;
    box-shadow: -1px 2px 5px 0 #4a706a12;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px
}

.opn .hesitlist li .icomark {
    width: 20px;
    height: 20px;
    flex-shrink: 0
}

.opn .expersec {
    background: #fff;
    padding-top: 64px;
    padding-bottom: 64px
}

.opn .expersec h2 {
    font-size: 38px;
    line-height: 1.15;
    color: #1e2e2c;
    margin: 0 0 8px;
    text-align: center
}

.opn .expersec h2::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #4A706A;
    border-radius: 0;
    margin-left: 8px;
    vertical-align: middle;
    position: relative;
    top: -2px
}

.opn .expersub {
    font-size: 18px;
    line-height: 1.7;
    color: #4d6462;
    text-align: center;
    max-width: 560px;
    margin: 0 auto 32px
}

.opn .expergrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px
}

.opn .expercard {
    border-radius: 20px;
    padding: 32px;
    background: #f5f3f0;
    box-shadow: -1px 2px 5px 0 #4a706a12;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: box-shadow .6s cubic-bezier(0.22, 1, 0.36, 1)
}

.opn .expercard:hover {
    box-shadow: -1px 9px 52px 0 #4a706a1c
}

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

.opn .experportrait {
    width: 80px;
    height: 102px;
    object-fit: cover;
    object-position: center;
    display: block;
    flex-shrink: 0
}

.opn .expermeta {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.opn .expermeta strong {
    font-size: 18px;
    color: #1e2e2c;
    line-height: 1.45
}

.opn .expermeta span {
    font-size: 15px;
    color: #4A706A;
    line-height: 1.45
}

.opn .expercard p {
    font-size: 18px;
    line-height: 1.7;
    color: #2d3e3c;
    margin: 0
}

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

.opn .expernoportrait strong {
    font-size: 18px;
    color: #1e2e2c
}

.opn .expernoportrait span {
    font-size: 15px;
    color: #4A706A
}

.opn .currentsec {
    background: #1e2e2c;
    padding-top: 64px;
    padding-bottom: 64px;
    position: relative;
    overflow: hidden
}

.opn .currentbg {
    position: absolute;
    top: 0;
    right: 0;
    width: 480px;
    height: 100%;
    background: radial-gradient(circle at 100% 100%, #6b8a892e 0%, transparent 70%);
    pointer-events: none
}

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

.opn .currentleft h2 {
    font-size: 38px;
    line-height: 1.15;
    color: #e8f0ef;
    margin: 0 0 16px
}

.opn .currentleft h2::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #7FAFBA;
    border-radius: 0;
    margin-left: 8px;
    vertical-align: middle;
    position: relative;
    top: -2px
}

.opn .currentleft p {
    font-size: 18px;
    line-height: 1.7;
    color: #b8ceca;
    margin: 0 0 16px
}

.opn .currentleft p:last-child {
    margin-bottom: 0
}

.opn .currentright {
    position: relative
}

.opn .currentright img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
    border-radius: 20px;
    box-shadow: -1px 9px 52px 0 #4a706a1c;
    transition: border .5s cubic-bezier(0.22, 1, 0.36, 1)
}

.opn .currentright::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    border: 2px solid transparent;
    transition: border-color .5s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none
}

.opn .currentright:hover::after {
    border-color: #7FAFBA
}

.opn .topicrow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px
}

.opn .topictag {
    background: #7fafba26;
    border: 1px solid #7fafba59;
    border-radius: 0;
    padding: 8px 16px;
    font-size: 15px;
    color: #9ecad4;
    line-height: 1.45
}

.opn .numssec {
    background: #f5f3f0;
    padding-top: 64px;
    padding-bottom: 64px
}

.opn .numssec h2 {
    font-size: 38px;
    line-height: 1.15;
    color: #1e2e2c;
    margin: 0 0 8px;
    text-align: center
}

.opn .numssec h2::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #4A706A;
    border-radius: 0;
    margin-left: 8px;
    vertical-align: middle;
    position: relative;
    top: -2px
}

.opn .numssub {
    font-size: 18px;
    line-height: 1.7;
    color: #4d6462;
    text-align: center;
    max-width: 520px;
    margin: 0 auto 64px
}

.opn .numsgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px
}

.opn .numscard {
    background: #fff;
    border-radius: 20px;
    padding: 32px 16px;
    text-align: center;
    box-shadow: -1px 2px 5px 0 #4a706a12;
    transition: box-shadow .55s cubic-bezier(0.22, 1, 0.36, 1), transform .55s cubic-bezier(0.22, 1, 0.36, 1)
}

.opn .numscard:hover {
    box-shadow: -1px 9px 52px 0 #4a706a1c;
    transform: translateY(-4px)
}

.opn .numsval {
    font-size: 52px;
    line-height: 1.15;
    color: #4A706A;
    display: block;
    margin-bottom: 8px
}

.opn .numscard h4 {
    font-size: 15px;
    line-height: 1.45;
    color: #1e2e2c;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: .08em
}

.opn .numscard p {
    font-size: 15px;
    line-height: 1.7;
    color: #4d6462;
    margin: 0
}

.opn .numsfoot {
    margin-top: 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center
}

.opn .numsquote {
    background: #4A706A;
    border-radius: 20px;
    padding: 32px;
    color: #e8f0ef
}

.opn .numsquote p {
    font-size: 22px;
    line-height: 1.45;
    margin: 0 0 16px;
    font-style: italic
}

.opn .numsquote span {
    font-size: 15px;
    color: #9ecad4
}

.opn .numsfootright {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 32px;
    border-left: 3px solid #7FAFBA
}

.opn .numsfootright h4 {
    font-size: 22px;
    line-height: 1.45;
    color: #1e2e2c;
    margin: 0
}

.opn .numsfootright p {
    font-size: 18px;
    line-height: 1.7;
    color: #2d3e3c;
    margin: 0
}

.opn .btnprimary {
    display: inline-block;
    padding: 16px 32px;
    border: 2px solid #4A706A;
    border-radius: 0;
    background: transparent;
    color: #4A706A;
    font-size: 18px;
    line-height: 1.45;
    cursor: pointer;
    text-decoration: none;
    transition: background .5s cubic-bezier(0.22, 1, 0.36, 1), color .5s cubic-bezier(0.22, 1, 0.36, 1)
}

.opn .btnprimary:hover {
    background: #4A706A;
    color: #fff
}

.opn .btnprimary:focus {
    outline: 2px solid #4A706A;
    outline-offset: 3px
}

.opn .btnprimary.shake {
    animation: shakebtn .5s cubic-bezier(0.22, 1, 0.36, 1)
}

@keyframes shakebtn {

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

    20% {
        transform: translateX(-6px)
    }

    40% {
        transform: translateX(6px)
    }

    60% {
        transform: translateX(-4px)
    }

    80% {
        transform: translateX(4px)
    }
}

.opn .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s cubic-bezier(0.22, 1, 0.36, 1), transform .6s cubic-bezier(0.22, 1, 0.36, 1)
}

.opn .reveal.d1 {
    transition-delay: .1s
}

.opn .reveal.d2 {
    transition-delay: .22s
}

.opn .reveal.d3 {
    transition-delay: .36s
}

.opn .reveal.d4 {
    transition-delay: .5s
}

.opn .reveal.vis {
    opacity: 1;
    transform: translateY(0)
}

@media (max-width: 1280px) {
    .opn .titlegrid {
        grid-template-columns: 180px 1fr;
        gap: 32px
    }

    .opn .titletext h1 {
        font-size: 52px
    }

    .opn .titletext h1 em {
        font-size: 56px
    }

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

@media (max-width: 768px) {
    .opn .titlegrid {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .opn .titlepic img {
        width: 100%;
        height: 240px
    }

    .opn .titlepic {
        width: 100%
    }

    .opn .titletext h1 {
        font-size: 38px
    }

    .opn .titletext h1 em {
        font-size: 42px
    }

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

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

    .opn .expergrid {
        grid-template-columns: 1fr
    }

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

    .opn .numsgrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px
    }

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

    .opn .numsfootright {
        padding-left: 16px
    }
}

@media (max-width: 480px) {
    .opn .bound {
        padding-left: 16px;
        padding-right: 16px
    }

    .opn .titletext h1 {
        font-size: 28px
    }

    .opn .titletext h1 em {
        font-size: 32px
    }

    .opn .numsgrid {
        grid-template-columns: 1fr
    }

    .opn .topicrow {
        gap: 8px
    }

    .opn .gapleft h2 {
        font-size: 28px
    }

    .opn .expersec h2,
    .opn .numssec h2,
    .opn .currentleft h2 {
        font-size: 28px
    }
}

.ctus {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden
}

.ctus .reach {
    background: #f5f3ef;
    padding: 64px 16px;
    position: relative
}

.ctus .reach::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 100%, #6b8a8921 0%, transparent 65%);
    pointer-events: none
}

.ctus .reachinner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start
}

.ctus .reachtext {
    display: flex;
    flex-direction: column;
    gap: 32px
}

.ctus .reachlabel {
    font-size: 15px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #4A706A;
    font-weight: 600
}

.ctus .reachhead {
    font-size: 52px;
    line-height: 1.15;
    color: #1b2b29;
    font-weight: 700;
    margin: 0
}

.ctus .reachhead em {
    font-style: italic;
    font-size: 58px;
    color: #4A706A
}

.ctus .reachdesc {
    font-size: 18px;
    line-height: 1.7;
    color: #2e4442;
    margin: 0;
    max-width: 440px
}

.ctus .infolist {
    display: flex;
    flex-direction: column;
    gap: 32px;
    list-style: none;
    padding: 0;
    margin: 0
}

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

.ctus .infoicon {
    width: 44px;
    height: 44px;
    border-radius: 20px;
    background: #fff;
    box-shadow: -1px 2px 5px 0 #4a706a12 -1px 4px 25px 0 #4a706a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.ctus .infoicon svg {
    width: 20px;
    height: 20px
}

.ctus .infobody {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.ctus .infotag {
    font-size: 15px;
    color: #6B8A89;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 600
}

.ctus .infoval {
    font-size: 18px;
    line-height: 1.45;
    color: #1b2b29;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color .5s cubic-bezier(0.22, 1, 0.36, 1), color .45s ease-in-out;
    display: inline
}

.ctus .infoval:hover {
    color: #4A706A;
    border-bottom-color: #4A706A
}

.ctus .dotrow {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    padding: 16px 0 0
}

.ctus .dot {
    border-radius: 0;
    background: #4A706A;
    opacity: .18
}

.ctus .dotlg {
    width: 12px;
    height: 12px;
    border-radius: 20px;
    opacity: .35
}

.ctus .dotmd {
    width: 8px;
    height: 8px;
    border-radius: 20px
}

.ctus .dotsm {
    width: 5px;
    height: 5px;
    border-radius: 20px;
    opacity: .12
}

.ctus .dotxl {
    width: 16px;
    height: 16px;
    border-radius: 20px;
    opacity: .22
}

.ctus .formblock {
    background: #fff;
    padding: 64px 16px
}

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

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

.ctus .formsidetag {
    font-size: 15px;
    color: #6B8A89;
    text-transform: uppercase;
    letter-spacing: .11em;
    font-weight: 600
}

.ctus .formsidehead {
    font-size: 38px;
    line-height: 1.15;
    color: #1b2b29;
    font-weight: 700;
    margin: 0
}

.ctus .formsidedot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 20px;
    background: #4A706A;
    margin-left: 4px;
    vertical-align: middle;
    position: relative;
    top: -3px
}

.ctus .formsidenote {
    font-size: 15px;
    line-height: 1.7;
    color: #4a5e5c;
    margin: 0
}

.ctus .glowborder {
    border-radius: 20px;
    border: 2px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #4A706A, #7FAFBA) border-box;
    padding: 32px;
    animation: borderglow .7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    box-shadow: -1px 4px 25px 0 #4a706a1a
}

@keyframes borderglow {
    from {
        box-shadow: -1px 2px 5px 0 #4a706a00 -1px 4px 25px 0 #4a706a00;
        border-color: transparent
    }

    to {
        box-shadow: -1px 4px 25px 0 #4a706a1a -1px 9px 52px 0 #4a706a1c;
        border-color: unset
    }
}

.ctus .form {
    display: flex;
    flex-direction: column;
    gap: 32px
}

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

.ctus .fieldrow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.ctus .flabel {
    font-size: 15px;
    color: #2e4442;
    font-weight: 600;
    letter-spacing: .03em
}

.ctus .finput {
    border: 1.5px solid #c8d8d6;
    border-radius: 20px;
    padding: 16px;
    font-size: 18px;
    color: #1b2b29;
    background: #f9faf9;
    box-shadow: inset -1px 2px 5px 0 #4a706a0d;
    transition: border-color .5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .55s ease-in-out;
    outline: none;
    width: 100%;
    box-sizing: border-box
}

.ctus .finput::placeholder {
    color: #9ab4b0;
    font-size: 15px
}

.ctus .finput:focus {
    border-color: #4A706A;
    box-shadow: inset -1px 2px 5px 0 #4a706a14 -1px 2px 5px 0 #4a706a12
}

.ctus .fselect {
    border: 1.5px solid #c8d8d6;
    border-radius: 20px;
    padding: 16px;
    font-size: 18px;
    color: #1b2b29;
    background: #f9faf9;
    box-shadow: inset -1px 2px 5px 0 #4a706a0d;
    transition: border-color .5s cubic-bezier(0.22, 1, 0.36, 1);
    outline: none;
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    cursor: pointer
}

.ctus .fselect:focus {
    border-color: #4A706A
}

.ctus .fselectwrap {
    position: relative
}

.ctus .fselectwrap::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #4A706A;
    pointer-events: none
}

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

.ctus .topichead {
    font-size: 15px;
    color: #2e4442;
    font-weight: 600;
    letter-spacing: .03em
}

.ctus .topiclist {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0
}

.ctus .topicitem {
    display: flex;
    align-items: center
}

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

.ctus .topicitem label {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1.5px solid #c8d8d6;
    font-size: 15px;
    color: #2e4442;
    cursor: pointer;
    transition: background .45s cubic-bezier(0.22, 1, 0.36, 1), border-color .45s ease-in-out, color .45s ease-in-out;
    background: #f9faf9
}

.ctus .topicitem input[type="radio"]:checked+label {
    background: #4A706A;
    border-color: #4A706A;
    color: #fff
}

.ctus .topicitem label:hover {
    border-color: #4A706A;
    color: #4A706A
}

.ctus .ftextarea {
    border: 1.5px solid #c8d8d6;
    border-radius: 20px;
    padding: 16px;
    font-size: 18px;
    color: #1b2b29;
    background: #f9faf9;
    box-shadow: inset -1px 2px 5px 0 #4a706a0d;
    transition: border-color .5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .55s ease-in-out;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 120px
}

.ctus .ftextarea::placeholder {
    color: #9ab4b0;
    font-size: 15px
}

.ctus .ftextarea:focus {
    border-color: #4A706A;
    box-shadow: inset -1px 2px 5px 0 #4a706a14
}

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

.ctus .privacychk {
    width: 20px;
    height: 20px;
    accent-color: #4A706A;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px
}

.ctus .privacytxt {
    font-size: 15px;
    line-height: 1.7;
    color: #4a5e5c;
    margin: 0
}

.ctus .privacytxt a {
    color: #4A706A;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .45s ease-in-out
}

.ctus .privacytxt a:hover {
    color: #6B8A89
}

.ctus .submitbtn {
    align-self: flex-start;
    padding: 16px 32px;
    border-radius: 20px;
    border: 2px solid #4A706A;
    background: transparent;
    color: #4A706A;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background .55s cubic-bezier(0.22, 1, 0.36, 1), color .5s ease-in-out, box-shadow .6s cubic-bezier(0.22, 1, 0.36, 1);
    letter-spacing: .03em
}

.ctus .submitbtn:hover {
    background: #4A706A;
    color: #fff;
    box-shadow: -1px 4px 25px 0 #4a706a1a
}

.ctus .submitbtn:focus {
    outline: 2px solid #4A706A;
    outline-offset: 3px
}

.ctus .submitbtn:active {
    background: #3a5a54;
    border-color: #3a5a54;
    color: #fff
}

@keyframes shake {

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

    20% {
        transform: translateX(-6px)
    }

    40% {
        transform: translateX(6px)
    }

    60% {
        transform: translateX(-4px)
    }

    80% {
        transform: translateX(4px)
    }
}

.ctus .submitbtn:invalid,
.ctus .form:invalid .submitbtn:active {
    animation: shake .55s cubic-bezier(0.22, 1, 0.36, 1)
}

.ctus .caseline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: #eef4f3;
    border-radius: 20px;
    border-left: 3px solid #4A706A;
    border-top: 1px solid #c8d8d6
}

.ctus .caselinetext {
    font-size: 15px;
    color: #2e4442;
    line-height: 1.45;
    margin: 0
}

.ctus .caselinetext a {
    color: #4A706A;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .45s ease-in-out, text-decoration-thickness .45s ease-in-out;
    text-decoration-thickness: 1.5px
}

.ctus .caselinetext a:hover {
    color: #6B8A89;
    text-decoration-thickness: 3px
}

@media (max-width: 1280px) {
    .ctus .reachinner {
        gap: 32px
    }

    .ctus .forminner {
        gap: 32px
    }

    .ctus .reachhead {
        font-size: 38px
    }

    .ctus .reachhead em {
        font-size: 44px
    }
}

@media (max-width: 768px) {
    .ctus .reachinner {
        grid-template-columns: 1fr;
        gap: 32px
    }

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

    .ctus .fieldrow {
        grid-template-columns: 1fr
    }

    .ctus .formside {
        position: static
    }

    .ctus .reachhead {
        font-size: 38px
    }

    .ctus .reachhead em {
        font-size: 42px
    }

    .ctus .formsidehead {
        font-size: 28px
    }

    .ctus .reach {
        padding: 64px 16px
    }

    .ctus .formblock {
        padding: 64px 16px
    }

    .ctus .glowborder {
        padding: 32px 16px
    }
}

@media (max-width: 480px) {
    .ctus .reachhead {
        font-size: 28px
    }

    .ctus .reachhead em {
        font-size: 32px
    }

    .ctus .formsidehead {
        font-size: 22px
    }

    .ctus .topiclist {
        flex-direction: column
    }

    .ctus .reach {
        padding: 32px 16px
    }

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

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

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

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

.abu .pg {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px
}

.abu .titblk {
    padding-top: 64px;
    padding-bottom: 64px;
    background: linear-gradient(180deg, #6b8a891a 0%, #fff0 100%);
    position: relative
}

.abu .titblk .pg {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 64px
}

.abu .imgcol {
    flex: 0 0 340px;
    position: relative;
    border-radius: 20px;
    overflow: hidden
}

.abu .imgcol img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1)
}

.abu .imgcol:hover img {
    transform: scale(1.03)
}

.abu .imgfade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 40%, #ffffffd9 100%);
    border-radius: 20px;
    pointer-events: none
}

.abu .brcktl {
    position: absolute;
    top: -12px;
    left: -12px;
    width: 40px;
    height: 40px;
    border-top: 3px solid #4A706A;
    border-left: 3px solid #4A706A;
    border-radius: 0;
    pointer-events: none;
    z-index: 1
}

.abu .brckbr {
    position: absolute;
    bottom: -12px;
    right: -12px;
    width: 40px;
    height: 40px;
    border-bottom: 3px solid #7FAFBA;
    border-right: 3px solid #7FAFBA;
    border-radius: 0;
    pointer-events: none;
    z-index: 1
}

.abu .txtcol {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 32px;
    padding-top: 32px;
    padding-bottom: 32px
}

.abu .eyebrow {
    font-size: 15px;
    line-height: 1.45;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #4A706A;
    margin-bottom: 16px;
    display: block
}

.abu .h1main {
    font-size: 52px;
    line-height: 1.15;
    color: #1b2e2c;
    margin: 0 0 8px
}

.abu .h1main em {
    font-style: italic;
    font-size: 58px;
    color: #4A706A
}

.abu .tagline {
    font-size: 22px;
    line-height: 1.45;
    color: #3a5a56;
    margin: 0 0 32px;
    font-weight: 400
}

.abu .dotaccent {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 0;
    background: #4A706A;
    margin-left: 6px;
    vertical-align: middle;
    transform: rotate(45deg)
}

.abu .stmnt {
    font-size: 18px;
    line-height: 1.7;
    color: #2d4442;
    margin: 0 0 16px;
    max-width: 520px
}

.abu .stmntit {
    font-size: 18px;
    line-height: 1.7;
    color: #4A706A;
    font-style: italic;
    font-size: 20px;
    margin: 0 0 32px;
    max-width: 520px
}

.abu .metarow {
    display: flex;
    flex-direction: row;
    gap: 32px;
    margin-top: 8px
}

.abu .metaitem {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.abu .metanum {
    font-size: 38px;
    line-height: 1.15;
    color: #4A706A;
    font-weight: 700
}

.abu .metalbl {
    font-size: 15px;
    line-height: 1.45;
    color: #5a7a76
}

@keyframes revealRotate {
    from {
        opacity: 0;
        transform: rotate(-3deg) translateY(24px)
    }

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

.abu .titblk .imgcol {
    animation: revealRotate .65s cubic-bezier(0.22, 1, 0.36, 1) both
}

.abu .titblk .txtcol {
    animation: revealRotate .55s .12s cubic-bezier(0.22, 1, 0.36, 1) both
}

.abu .dtlblk {
    padding-top: 64px;
    padding-bottom: 64px;
    background: #fff
}

.abu .dtlblk .pg {
    display: flex;
    flex-direction: column;
    gap: 64px
}

.abu .dtltop {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px
}

.abu .pillar {
    padding: 32px;
    border-radius: 20px;
    background: #fff;
    box-shadow: -1px 4px 25px 0 #4a706a1a;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: box-shadow .5s cubic-bezier(0.22, 1, 0.36, 1), transform .5s cubic-bezier(0.22, 1, 0.36, 1)
}

.abu .pillar:hover {
    box-shadow: -1px 9px 52px 0 #4a706a1c;
    transform: translateY(-4px)
}

.abu .piico {
    width: 44px;
    height: 44px;
    border-radius: 0;
    background: linear-gradient(135deg, #4a706a1f 0%, #7fafba2e 100%);
    display: flex;
    align-items: center;
    justify-content: center
}

.abu .piico i {
    font-size: 22px;
    color: #4A706A
}

.abu .pih {
    font-size: 22px;
    line-height: 1.15;
    color: #1b2e2c;
    margin: 0
}

.abu .pip {
    font-size: 15px;
    line-height: 1.7;
    color: #3d5c59;
    margin: 0
}

.abu .dtlmid {
    display: flex;
    flex-direction: row;
    gap: 64px;
    align-items: center
}

.abu .dtlmidimg {
    flex: 0 0 420px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: -1px 9px 52px 0 #4a706a1c
}

.abu .dtlmidimg img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 20px
}

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

.abu .dtlmidtxt h2 {
    font-size: 38px;
    line-height: 1.15;
    color: #1b2e2c;
    margin: 0
}

.abu .dtlmidtxt p {
    font-size: 18px;
    line-height: 1.7;
    color: #2d4442;
    margin: 0
}

.abu .dtlbot {
    display: flex;
    flex-direction: row;
    gap: 32px;
    align-items: stretch
}

.abu .teamcard {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px;
    border-radius: 20px;
    background: linear-gradient(160deg, #6b8a8914 0%, #7fafba0f 100%);
    box-shadow: -1px 2px 5px 0 #4a706a12
}

.abu .portrait {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #4A706A;
    flex-shrink: 0
}

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

.abu .tcname {
    font-size: 22px;
    line-height: 1.15;
    color: #1b2e2c;
    margin: 0;
    text-align: center
}

.abu .tcrole {
    font-size: 15px;
    line-height: 1.45;
    color: #4A706A;
    text-align: center;
    margin: 0
}

.abu .tcquote {
    font-size: 15px;
    line-height: 1.7;
    color: #3d5c59;
    text-align: center;
    font-style: italic;
    margin: 0
}

.abu .teamtxt {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center
}

.abu .teamtxt h3 {
    font-size: 28px;
    line-height: 1.15;
    color: #1b2e2c;
    margin: 0
}

.abu .teamtxt p {
    font-size: 18px;
    line-height: 1.7;
    color: #2d4442;
    margin: 0
}

.abu .imgrow {
    flex: 0 0 320px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: -1px 4px 25px 0 #4a706a1a
}

.abu .imgrow img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 20px
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(32px) rotate(-1.5deg)
    }

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

.abu .pillar {
    animation: fadeUp .6s cubic-bezier(0.22, 1, 0.36, 1) both
}

.abu .pillar:nth-child(1) {
    animation-delay: .08s
}

.abu .pillar:nth-child(2) {
    animation-delay: .18s
}

.abu .pillar:nth-child(3) {
    animation-delay: .28s
}

.abu .dtlmidimg {
    animation: fadeUp .65s .1s cubic-bezier(0.22, 1, 0.36, 1) both
}

.abu .dtlmidtxt {
    animation: fadeUp .55s .2s cubic-bezier(0.22, 1, 0.36, 1) both
}

.abu .teamcard {
    animation: fadeUp .6s .15s cubic-bezier(0.22, 1, 0.36, 1) both
}

@media (max-width: 1280px) {
    .abu .titblk .pg {
        gap: 32px
    }

    .abu .imgcol {
        flex: 0 0 280px
    }

    .abu .h1main {
        font-size: 38px
    }

    .abu .h1main em {
        font-size: 44px
    }
}

@media (max-width: 768px) {
    .abu .titblk .pg {
        flex-direction: column;
        gap: 32px
    }

    .abu .imgcol {
        flex: none;
        width: 100%;
        height: 260px
    }

    .abu .txtcol {
        padding-left: 0;
        padding-top: 0;
        padding-bottom: 0
    }

    .abu .h1main {
        font-size: 38px
    }

    .abu .h1main em {
        font-size: 42px
    }

    .abu .metarow {
        gap: 16px
    }

    .abu .dtltop {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .abu .dtlmid {
        flex-direction: column;
        gap: 32px
    }

    .abu .dtlmidimg {
        flex: none;
        width: 100%
    }

    .abu .dtlbot {
        flex-direction: column;
        gap: 32px
    }

    .abu .teamcard {
        flex: none;
        width: 100%
    }

    .abu .imgrow {
        flex: none;
        width: 100%;
        height: 220px
    }
}

@media (max-width: 480px) {
    .abu .pg {
        padding-left: 16px;
        padding-right: 16px
    }

    .abu .titblk {
        padding-top: 32px;
        padding-bottom: 32px
    }

    .abu .dtlblk {
        padding-top: 32px;
        padding-bottom: 32px
    }

    .abu .h1main {
        font-size: 28px
    }

    .abu .h1main em {
        font-size: 32px
    }

    .abu .tagline {
        font-size: 18px
    }

    .abu .metanum {
        font-size: 28px
    }

    .abu .dtlblk .pg {
        gap: 32px
    }

    .abu .pillar {
        padding: 16px
    }

    .abu .teamcard {
        padding: 16px
    }
}

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

.sucPg .sucWrap {
    max-width: 1140px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.sucPg .sucIcon {
    width: 72px;
    height: 72px;
    margin-bottom: 32px;
    flex-shrink: 0
}

.sucPg .sucIcon svg circle {
    fill: none;
    stroke: #4A706A;
    stroke-width: 2.5
}

.sucPg .sucIcon svg polyline {
    fill: none;
    stroke: #4A706A;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.sucPg .sucTitle {
    font-size: 38px;
    line-height: 1.15;
    color: #1b2e2c;
    margin: 0 0 16px;
    font-weight: 700
}

.sucPg .sucTitle span {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #4A706A;
    border-radius: 0;
    vertical-align: middle;
    margin-left: 6px;
    margin-bottom: 6px
}

.sucPg .sucSub {
    font-size: 18px;
    line-height: 1.7;
    color: #2d4a47;
    max-width: 520px;
    margin: 0 0 32px
}

.sucPg .sucNote {
    font-size: 15px;
    line-height: 1.45;
    color: #4A706A;
    max-width: 420px;
    margin: 0 0 64px;
    border-top: 1px solid #d0e0de;
    border-bottom: 1px solid #d0e0de;
    padding: 16px 32px
}

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

.sucPg .sucHome {
    display: inline-block;
    padding: 16px 32px;
    font-size: 15px;
    line-height: 1.45;
    color: #4A706A;
    border: 1.5px solid #4A706A;
    border-radius: 0;
    text-decoration: none;
    background: transparent;
    transition: background .5s cubic-bezier(0.22, 1, 0.36, 1), color .5s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: -1px 2px 5px 0 #4a706a12
}

.sucPg .sucHome:hover,
.sucPg .sucHome:focus {
    background: #4A706A;
    color: #fff;
    outline: none
}

.sucPg .sucHome:focus-visible {
    outline: 2px solid #4A706A;
    outline-offset: 3px
}

.sucPg .sucContact {
    display: inline-block;
    padding: 16px 32px;
    font-size: 15px;
    line-height: 1.45;
    color: #6B8A89;
    border: 1.5px solid #6B8A89;
    border-radius: 0;
    text-decoration: none;
    background: transparent;
    transition: background .6s cubic-bezier(0.22, 1, 0.36, 1), color .6s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: -1px 2px 5px 0 #6b8a8912
}

.sucPg .sucContact:hover,
.sucPg .sucContact:focus {
    background: #6B8A89;
    color: #fff;
    outline: none
}

.sucPg .sucContact:focus-visible {
    outline: 2px solid #6B8A89;
    outline-offset: 3px
}

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

    .sucPg .sucTitle {
        font-size: 28px
    }

    .sucPg .sucSub {
        font-size: 18px
    }

    .sucPg .sucNote {
        padding: 16px
    }

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

@media (max-width: 480px) {
    .sucPg .sucTitle {
        font-size: 22px
    }

    .sucPg .sucIcon {
        width: 56px;
        height: 56px
    }

    .sucPg .sucHome,
    .sucPg .sucContact {
        width: 100%;
        text-align: center
    }
}