html {
    box-sizing: border-box
}

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

body {
    margin: 0;
    overscroll-behavior: contain;
    overflow-x: hidden;
    font-family: 'Red Hat Display', sans-serif
}

.topbar {
    background: #CC0B02;
    position: relative;
    overflow: hidden;
    z-index: 10
}

.topbar::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 340px;
    height: 100%;
    background: linear-gradient(135deg, transparent 40%, #31c4c02e 100%);
    pointer-events: none
}

.topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px
}

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

.topnav li a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-family: 'Red Hat Display', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    padding: 8px 16px;
    border-radius: 3px;
    border: 1px solid transparent;
    transition: background .28s cubic-bezier(0.4, 0, 0.2, 1), border-color .28s cubic-bezier(0.4, 0, 0.2, 1)
}

.topnav li a:hover,
.topnav li a:focus {
    background: #ffffff1f;
    border-color: #ffffff47;
    outline: none
}

.topnav li a.active {
    background: #ffffff2e;
    border-color: #fff6
}

.topcontact {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0
}

.topcontact a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    font-family: 'Red Hat Display', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    padding: 8px 16px;
    border-radius: 3px;
    background: #ffffff1a;
    border: 1px solid #ffffff38;
    transition: background .32s ease-in-out, border-color .32s ease-in-out;
    white-space: nowrap
}

.topcontact a:hover,
.topcontact a:focus {
    background: #fff3;
    border-color: #ffffff80;
    outline: none
}

.topcontact a svg {
    flex-shrink: 0
}

.brandbar {
    background: #fff;
    border-bottom: 3px solid #F3F4E0;
    box-shadow: -1px 5px 20px 0 #cc0b021a;
    position: relative;
    z-index: 9
}

.brandbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 24px
}

.logocard {
    flex-shrink: 0;
    background: #fff;
    border-radius: 3px;
    box-shadow: -1px 3px 3px 0 #cc0b0214 0 0 0 2px #F3F4E0;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px
}

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

.brandtext {
    flex: 1;
    min-width: 0
}

.brandname {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.1;
    color: #1b1b1b;
    letter-spacing: 0;
    margin: 0 0 4px
}

.brandname span {
    color: #CC0B02
}

.branddesc {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin: 0
}

.brandaccent {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px
}

.accentbadge {
    background: linear-gradient(135deg, #F3F4E0 0%, #e8f9f8 100%);
    border: 1px solid #31C4C0;
    border-radius: 28px;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: -1px 3px 3px 0 #31c4c014
}

.accentbadge svg {
    color: #31C4C0;
    flex-shrink: 0
}

.accentbadge span {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1b1b1b;
    white-space: nowrap
}

@media (max-width: 1024px) {
    .brandaccent {
        display: none
    }

    .topcontact a span {
        display: none
    }

    .topcontact a {
        padding: 8px;
        border-radius: 3px;
        min-width: 44px;
        justify-content: center
    }
}

@media (max-width: 768px) {
    .topbar-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 16px;
        gap: 4px
    }

    .topnav {
        gap: 4px
    }

    .topnav li a {
        font-size: 16px;
        padding: 8px
    }

    .topcontact {
        align-self: flex-end
    }

    .brandbar-inner {
        padding: 16px;
        gap: 16px
    }

    .brandname {
        font-size: 21px
    }
}

@media (max-width: 480px) {
    .topnav li a {
        padding: 8px;
        font-size: 16px
    }

    .brandname {
        font-size: 21px
    }

    .branddesc {
        font-size: 16px
    }
}

.foot {
    background: #1b1b1b;
    position: relative;
    overflow: hidden
}

.foot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #CC0B02 0%, #31C4C0 100%)
}

.foot-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 48px;
    align-items: start
}

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

.footlogocard {
    background: #fff;
    border-radius: 3px;
    box-shadow: -1px 3px 3px 0 #cc0b0214 0 0 0 2px #f3f4e04d;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    flex-shrink: 0
}

.footlogocard img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    display: block
}

.foottagline {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.6;
    color: #b0b0b0;
    margin: 0
}

.footbrandname {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    margin: 0
}

.footbrandname span {
    color: #CC0B02
}

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

.footsectionlabel {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    color: #31C4C0;
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 0 0 8px
}

.footcontactitem {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #b0b0b0;
    font-family: 'Red Hat Display', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    text-decoration: none;
    transition: color .26s ease-in-out
}

.footcontactitem:hover,
.footcontactitem:focus {
    color: #fff;
    outline: none
}

.footcontactitem svg {
    flex-shrink: 0;
    margin-top: 4px;
    color: #CC0B02
}

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

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

.footlinklist li a {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #b0b0b0;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color .28s cubic-bezier(0.4, 0, 0.2, 1)
}

.footlinklist li a:hover,
.footlinklist li a:focus {
    color: #31C4C0;
    outline: none
}

.footlinklist li a svg {
    flex-shrink: 0;
    color: #CC0B02;
    opacity: .7
}

.foot-bottom {
    border-top: 1px solid #ffffff14;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap
}

.footcopy {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #fff6;
    margin: 0
}

.footdeco {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.1;
    color: #cc0b0259;
    letter-spacing: 0;
    user-select: none;
    pointer-events: none
}

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

@media (max-width: 768px) {
    .foot-main {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 48px 16px 24px
    }

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

@media (max-width: 480px) {
    .foot-main {
        padding: 24px 16px 16px
    }
}

.cookiebar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    background: #fff;
    border-bottom: 3px solid #CC0B02;
    box-shadow: -1px 9px 36px 0 #cc0b021a;
    z-index: 2000;
    display: none;
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(0.4, 0, 0.2, 1)
}

.cookiebar.visible {
    transform: translateX(0)
}

.cookiebar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap
}

.cookiebar-text {
    flex: 1;
    min-width: 220px
}

.cookiebar-headline {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    color: #1b1b1b;
    margin: 0 0 8px
}

.cookiebar-desc {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin: 0
}

.cookiebar-desc a {
    color: #CC0B02;
    text-decoration: underline;
    transition: color .26s ease-in-out
}

.cookiebar-desc a:hover,
.cookiebar-desc a:focus {
    color: #31C4C0;
    outline: none
}

.cookiebar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0
}

.cookiebar-actions button {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    cursor: pointer;
    border-radius: 3px;
    padding: 8px 16px;
    transition: background .28s ease-in-out, color .28s ease-in-out, border-color .28s ease-in-out;
    min-height: 44px
}

.btn-accept {
    background: #CC0B02;
    color: #fff;
    border: 2px solid #CC0B02;
    font-weight: 700
}

.btn-accept:hover,
.btn-accept:focus {
    background: #a50902;
    border-color: #a50902;
    outline: none
}

.btn-reject {
    background: transparent;
    color: #CC0B02;
    border: 2px solid #CC0B02;
    font-weight: 700
}

.btn-reject:hover,
.btn-reject:focus {
    background: #fff0f0;
    outline: none
}

.btn-settings-link {
    background: transparent;
    color: #444;
    border: none;
    text-decoration: underline;
    padding: 8px;
    font-weight: 400
}

.btn-settings-link:hover,
.btn-settings-link:focus {
    color: #31C4C0;
    outline: none
}

.cookiebar-toggles {
    width: 100%;
    display: none;
    padding: 16px 0 8px;
    gap: 16px;
    flex-wrap: wrap
}

.cookiebar-toggles.open {
    display: flex
}

.toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Red Hat Display', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #1b1b1b
}

.toggle-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #31C4C0;
    cursor: pointer
}

.toggle-item.required {
    color: #888
}

.toggle-item.required input {
    cursor: not-allowed
}

.settingsbtn {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 1999;
    background: #CC0B02;
    color: #fff;
    border: none;
    border-radius: 28px;
    width: 48px;
    height: 48px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: -1px 5px 20px 0 #cc0b021a;
    transition: background .26s ease-in-out
}

.settingsbtn:hover,
.settingsbtn:focus {
    background: #a50902;
    outline: none
}

.settingsbtn.shown {
    display: flex
}

.policy-block {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px;
    color: #2a2a2e
}

.policy-block h1 {
    font-size: 68px;
    line-height: 1.1;
    color: #CC0B02;
    margin-bottom: 24px;
    margin-top: 0
}

.policy-block h2 {
    font-size: 27px;
    line-height: 1.1;
    color: #1b1b20;
    margin-top: 48px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #F3F4E0
}

.policy-block h3 {
    font-size: 21px;
    line-height: 1.1;
    color: #1b1b20;
    margin-top: 24px;
    margin-bottom: 16px
}

.policy-block h4 {
    font-size: 18px;
    line-height: 1.6;
    color: #1b1b20;
    margin-top: 24px;
    margin-bottom: 8px
}

.policy-block h5 {
    font-size: 16px;
    line-height: 1.6;
    color: #31C4C0;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 24px;
    margin-bottom: 8px
}

.policy-block h6 {
    font-size: 16px;
    line-height: 1.6;
    color: #5a5a62;
    margin-top: 16px;
    margin-bottom: 8px
}

.policy-block p {
    font-size: 18px;
    line-height: 1.6;
    color: #2a2a2e;
    margin-top: 0;
    margin-bottom: 16px
}

.policy-block ul {
    margin: 0 0 16px;
    padding-left: 24px;
    list-style: none
}

.policy-block ol {
    margin: 0 0 16px;
    padding-left: 24px;
    list-style: none;
    counter-reset: policy-counter
}

.policy-block ul li {
    font-size: 18px;
    line-height: 1.6;
    color: #2a2a2e;
    margin-bottom: 8px;
    padding-left: 16px;
    position: relative
}

.policy-block ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background-color: #31C4C0
}

.policy-block ol li {
    font-size: 18px;
    line-height: 1.6;
    color: #2a2a2e;
    margin-bottom: 8px;
    padding-left: 16px;
    position: relative;
    counter-increment: policy-counter
}

.policy-block ol li::before {
    content: counter(policy-counter) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px;
    font-weight: 700;
    color: #CC0B02;
    transform: translateX(-100%)
}

.policy-block ul ul,
.policy-block ol ol,
.policy-block ul ol,
.policy-block ol ul {
    margin-top: 8px;
    margin-bottom: 4px
}

.policy-block em,
.policy-block i {
    font-style: italic;
    color: #3a3a42
}

.policy-block table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.6;
    box-shadow: -1px 5px 20px 0 #cc0b021a;
    border-radius: 3px;
    overflow: hidden
}

.policy-block thead {
    background-color: #CC0B02
}

.policy-block thead th {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 16px;
    text-align: left
}

.policy-block tbody tr {
    border-bottom: 1px solid #F3F4E0;
    transition: background-color .25s ease-in-out
}

.policy-block tbody tr:nth-child(even) {
    background-color: #F3F4E0
}

.policy-block tbody tr:hover {
    background-color: #31c4c014
}

.policy-block th {
    font-size: 16px;
    font-weight: 700;
    padding: 16px;
    text-align: left;
    color: #1b1b20
}

.policy-block td {
    font-size: 16px;
    line-height: 1.6;
    padding: 16px;
    color: #2a2a2e;
    vertical-align: top
}

.policy-block hr {
    border: none;
    border-top: 1px solid #F3F4E0;
    margin: 48px 0;
    position: relative
}

.policy-block hr::after {
    content: "";
    position: absolute;
    left: 0;
    top: -2px;
    width: 48px;
    height: 3px;
    background-color: #31C4C0;
    border-radius: 3px
}

.policy-block div {
    font-size: 18px;
    line-height: 1.6
}

@media (max-width: 1024px) {
    .policy-block {
        padding: 48px 24px
    }

    .policy-block h1 {
        font-size: 48px
    }
}

@media (max-width: 768px) {
    .policy-block {
        padding: 24px 16px
    }

    .policy-block h1 {
        font-size: 36px
    }

    .policy-block h2 {
        font-size: 21px
    }

    .policy-block h3 {
        font-size: 18px
    }

    .policy-block table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

@media (max-width: 480px) {
    .policy-block {
        padding: 16px
    }

    .policy-block h1 {
        font-size: 27px
    }

    .policy-block h2 {
        font-size: 21px;
        margin-top: 24px
    }

    .policy-block p,
    .policy-block ul li,
    .policy-block ol li {
        font-size: 16px
    }

    .policy-block thead {
        display: none
    }

    .policy-block tbody tr {
        display: block;
        margin-bottom: 16px;
        border: 1px solid #F3F4E0;
        border-radius: 3px;
        box-shadow: -1px 3px 3px 0 #cc0b0214
    }

    .policy-block td {
        display: block;
        padding: 8px 16px;
        border-bottom: 1px solid #F3F4E0
    }

    .policy-block td:last-child {
        border-bottom: none
    }
}

.analyticsdetail {
    background: #fff;
    color: #1a1a1a;
    overflow-x: hidden
}

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

.analyticsdetail .postcover {
    background: linear-gradient(160deg, #F3F4E0 60%, #31c4c02e 100%);
    padding: 80px 24px 48px;
    position: relative;
    overflow: hidden
}

.analyticsdetail .postcover::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle at 100% 0%, #cc0b0221 0%, transparent 70%);
    pointer-events: none
}

.analyticsdetail .coverdeco {
    position: absolute;
    bottom: 24px;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none
}

.analyticsdetail .coverdeco span {
    display: block;
    height: 1px;
    background: #cc0b022e
}

.analyticsdetail .coverdeco span:nth-child(1) {
    width: 180px
}

.analyticsdetail .coverdeco span:nth-child(2) {
    width: 120px
}

.analyticsdetail .coverdeco span:nth-child(3) {
    width: 70px
}

.analyticsdetail .coverinner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 48px;
    align-items: end
}

.analyticsdetail .covermeta {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.analyticsdetail .cattag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #cc0b0217;
    color: #CC0B02;
    font-size: 16px;
    font-weight: 600;
    padding: 4px 16px;
    border-radius: 3px;
    width: fit-content;
    letter-spacing: .04em;
    text-transform: uppercase
}

.analyticsdetail .posttitle {
    font-size: 68px;
    font-weight: 800;
    line-height: 1.1;
    color: #1b1b1b;
    margin: 0;
    clip-path: inset(0 0 100% 0);
    animation: revealdown .38s cubic-bezier(0.4, 0, 0.2, 1) .1s forwards
}

@keyframes revealdown {
    to {
        clip-path: inset(0 0 0% 0)
    }
}

.analyticsdetail .postsubtitle {
    font-size: 21px;
    font-weight: 300;
    line-height: 1.6;
    color: #444;
    margin: 0
}

.analyticsdetail .postmeta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap
}

.analyticsdetail .metaitem {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #555
}

.analyticsdetail .metaitem svg {
    flex-shrink: 0
}

.analyticsdetail .authorname {
    font-weight: 600;
    color: #1b1b1b
}

.analyticsdetail .coverimgwrap {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: -1px 9px 36px 0 #cc0b021a
}

.analyticsdetail .coverimgwrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle at 0% 0%, #f3f4e08c 0%, transparent 70%);
    pointer-events: none
}

.analyticsdetail .coverimgwrap img {
    width: 100%;
    display: block;
    object-fit: cover
}

.analyticsdetail .dividerasym {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    gap: 8px
}

.analyticsdetail .dividerasym::before {
    content: '';
    display: block;
    height: 2px;
    width: 75%;
    background: linear-gradient(90deg, #CC0B02 0%, #cc0b0226 100%);
    border-radius: 3px
}

.analyticsdetail .dividerasym::after {
    content: '';
    display: block;
    height: 2px;
    flex: 1;
    background: #31c4c040;
    border-radius: 3px
}

.analyticsdetail .articlearea {
    background: #fff;
    padding: 48px 24px
}

.analyticsdetail .articleinner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 48px;
    align-items: start
}

.analyticsdetail .articlecontent {
    position: relative
}

.analyticsdetail .accentbar {
    position: absolute;
    left: -24px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #CC0B02 0%, #31c4c066 100%);
    border-radius: 3px
}

.analyticsdetail .articlecontent p {
    font-size: 18px;
    line-height: 1.6;
    color: #2a2a2a;
    margin: 0 0 24px
}

.analyticsdetail .articlecontent h2 {
    font-size: 27px;
    font-weight: 700;
    line-height: 1.1;
    color: #1b1b1b;
    margin: 48px 0 16px
}

.analyticsdetail .articlecontent h4 {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.1;
    color: #1b1b1b;
    margin: 24px 0 8px
}

.analyticsdetail .articlecontent mark {
    background: #f3f4e0e6;
    color: #CC0B02;
    padding: 0 4px;
    border-radius: 3px
}

.analyticsdetail .articlecontent ins {
    text-decoration: underline;
    text-decoration-color: #31C4C0;
    text-underline-offset: 3px
}

.analyticsdetail .articlecontent ul {
    margin: 0 0 24px;
    padding-left: 24px
}

.analyticsdetail .articlecontent li {
    font-size: 18px;
    line-height: 1.6;
    color: #2a2a2a;
    margin-bottom: 8px
}

.analyticsdetail .articlecontent table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 16px
}

.analyticsdetail .articlecontent td {
    padding: 8px 16px;
    border: 1px solid #31c4c040;
    color: #2a2a2a;
    line-height: 1.6
}

.analyticsdetail .articlecontent tr:first-child td {
    background: #f3f4e0cc;
    font-weight: 600;
    color: #1b1b1b
}

.analyticsdetail .articlecontent tr:nth-child(even) td {
    background: #31c4c00a
}

.analyticsdetail .sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.analyticsdetail .sidecard {
    background: #F3F4E0;
    border-radius: 28px;
    padding: 24px;
    position: relative;
    box-shadow: -1px 5px 20px 0 #31c4c01a
}

.analyticsdetail .sidecardtitle {
    font-size: 16px;
    font-weight: 700;
    color: #1b1b1b;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 16px
}

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

.analyticsdetail .statrow+.statrow {
    border-top: 1px solid #cc0b021a
}

.analyticsdetail .staticon {
    width: 36px;
    height: 36px;
    border-radius: 3px;
    background: #cc0b0214;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.analyticsdetail .statval {
    font-size: 21px;
    font-weight: 700;
    color: #CC0B02;
    line-height: 1.1
}

.analyticsdetail .statlabel {
    font-size: 16px;
    color: #555;
    line-height: 1.6
}

.analyticsdetail .errorbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid #cc0b0259;
    color: #CC0B02;
    font-size: 16px;
    padding: 8px 16px;
    border-radius: 3px;
    text-decoration: none;
    transition: background .28s cubic-bezier(0.4, 0, 0.2, 1), border-color .35s ease-in-out;
    width: 100%;
    justify-content: center
}

.analyticsdetail .errorbtn:hover {
    background: #cc0b0212;
    border-color: #CC0B02
}

.analyticsdetail .errorbtn:focus {
    outline: 2px solid #CC0B02;
    outline-offset: 2px
}

.analyticsdetail .rectdeco {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    pointer-events: none
}

.analyticsdetail .rectdeco span {
    position: absolute;
    border: 1px solid #cc0b022e;
    border-radius: 3px
}

.analyticsdetail .rectdeco span:nth-child(1) {
    inset: 0
}

.analyticsdetail .rectdeco span:nth-child(2) {
    inset: 6px
}

.analyticsdetail .rectdeco span:nth-child(3) {
    inset: 12px
}

.analyticsdetail .dividerasym2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    gap: 8px
}

.analyticsdetail .dividerasym2::before {
    content: '';
    display: block;
    height: 1px;
    flex: 1;
    background: #31c4c04d;
    border-radius: 3px
}

.analyticsdetail .dividerasym2::after {
    content: '';
    display: block;
    height: 1px;
    width: 60%;
    background: linear-gradient(90deg, #cc0b0233 0%, #CC0B02 100%);
    border-radius: 3px
}

.analyticsdetail .bottombar {
    background: #f3f4e080;
    padding: 24px
}

.analyticsdetail .bottominner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap
}

.analyticsdetail .toptrigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #1b1b1b;
    font-size: 16px;
    font-weight: 600;
    background: #fff;
    border: 1px solid #31c4c066;
    border-radius: 3px;
    padding: 8px 16px;
    box-shadow: -1px 3px 3px 0 #31c4c014;
    transition: box-shadow .26s ease-in-out, border-color .32s cubic-bezier(0.4, 0, 0.2, 1)
}

.analyticsdetail .toptrigger:hover {
    box-shadow: -1px 5px 20px 0 #31c4c01a;
    border-color: #31C4C0
}

.analyticsdetail .toptrigger:focus {
    outline: 2px solid #31C4C0;
    outline-offset: 2px
}

.analyticsdetail .tagpill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #31c4c01a;
    color: #1b8c89;
    font-size: 16px;
    font-weight: 600;
    padding: 4px 16px;
    border-radius: 3px
}

@media (max-width: 1024px) {
    .analyticsdetail .coverinner {
        grid-template-columns: 1fr
    }

    .analyticsdetail .coverimgwrap {
        max-width: 480px
    }

    .analyticsdetail .posttitle {
        font-size: 48px
    }

    .analyticsdetail .articleinner {
        grid-template-columns: 1fr
    }

    .analyticsdetail .sidebar {
        flex-direction: row;
        flex-wrap: wrap
    }

    .analyticsdetail .sidecard {
        flex: 1 1 240px
    }

    .analyticsdetail .accentbar {
        display: none
    }
}

@media (max-width: 768px) {
    .analyticsdetail .postcover {
        padding: 48px 16px 32px
    }

    .analyticsdetail .posttitle {
        font-size: 27px
    }

    .analyticsdetail .postsubtitle {
        font-size: 18px
    }

    .analyticsdetail .articlearea {
        padding: 24px 16px
    }

    .analyticsdetail .sidebar {
        flex-direction: column
    }

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

    .analyticsdetail .coverimgwrap {
        max-width: 100%
    }
}

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

    .analyticsdetail .articlecontent table {
        font-size: 16px
    }

    .analyticsdetail .articlecontent td {
        padding: 8px
    }
}

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

.learningprogram *,
.learningprogram ::before,
.learningprogram ::after {
    box-sizing: border-box
}

.learningprogram ::selection {
    background: #cc0b021f;
    color: #1a0000
}

@keyframes dropIn {
    from {
        opacity: 0;
        transform: translateY(-28px)
    }

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

@keyframes subtlePulse {

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

    50% {
        transform: scale(1.18);
        opacity: 1
    }
}

.learningprogram .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 520px;
    max-width: 100%;
    position: relative
}

.learningprogram .split .leftpanel {
    background: #CC0B02;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden
}

.learningprogram .split .leftpanel::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: #f3f4e014;
    pointer-events: none
}

.learningprogram .split .leftpanel::after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    border-radius: 28px;
    background: #31c4c01f;
    pointer-events: none
}

.learningprogram .split .shapelayer {
    position: absolute;
    top: 50%;
    right: -30px;
    transform: translateY(-50%);
    width: 90px;
    height: 90px;
    border-radius: 28px;
    background: #f3f4e01a;
    pointer-events: none;
    animation: subtlePulse 3.2s ease-in-out infinite
}

.learningprogram .split .tagline {
    font-size: 16px;
    color: #f3f4e0b8;
    line-height: 1.6;
    margin-bottom: 8px;
    letter-spacing: 0;
    animation: dropIn .35s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: .05s
}

.learningprogram .split .heading {
    font-size: 68px;
    font-weight: 800;
    line-height: 1.1;
    color: #F3F4E0;
    margin: 0 0 24px;
    animation: dropIn .38s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: .13s
}

.learningprogram .split .heading span {
    color: #31C4C0
}

.learningprogram .split .subtext {
    font-size: 18px;
    color: #f3f4e0d9;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 380px;
    animation: dropIn .4s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: .22s
}

.learningprogram .split .actions {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    animation: dropIn .4s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: .3s
}

.learningprogram .split .btnprimary {
    display: inline-block;
    background: #F3F4E0;
    color: #CC0B02;
    font-size: 16px;
    font-weight: 700;
    padding: 16px 24px;
    border-radius: 3px;
    text-decoration: none;
    transition: background .28s ease-in-out, color .28s ease-in-out, box-shadow .32s ease-in-out;
    box-shadow: -1px 5px 20px 0 #cc0b021a;
    border: none;
    cursor: pointer
}

.learningprogram .split .btnprimary:hover {
    background: #31C4C0;
    color: #fff;
    box-shadow: -1px 9px 36px 0 #cc0b021a
}

.learningprogram .split .btnsecondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: transparent;
    border: 2px solid #f3f4e066;
    border-radius: 3px;
    color: #F3F4E0;
    text-decoration: none;
    transition: border-color .27s ease-in-out, background .27s ease-in-out;
    cursor: pointer
}

.learningprogram .split .btnsecondary:hover {
    border-color: #31C4C0;
    background: #31c4c026
}

.learningprogram .split .btnsecondary svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #F3F4E0;
    stroke-width: 2
}

.learningprogram .split .rightpanel {
    background: #31C4C0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end
}

.learningprogram .split .rightpanel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: saturate(0.7) brightness(0.88);
    transition: filter .35s ease-in-out
}

.learningprogram .split .rightpanel:hover img {
    filter: saturate(0.9) brightness(0.95)
}

.learningprogram .split .rightpanel .imgoverlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 100%, #cc0b0238 0%, transparent 65%);
    pointer-events: none
}

.learningprogram .split .rightpanel .shapetop {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 28px;
    background: #f3f4e02e;
    pointer-events: none
}

.learningprogram .metrics {
    background: #F3F4E0;
    padding: 48px 24px;
    position: relative
}

.learningprogram .metrics::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #CC0B02 0%, #31C4C0 60%, transparent 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.learningprogram .metrics .inner {
    max-width: 1200px;
    margin: 0 auto
}

.learningprogram .metrics .metricsheading {
    font-size: 27px;
    font-weight: 300;
    color: #1b0a00;
    line-height: 1.6;
    margin: 0 0 8px;
    animation: dropIn .36s cubic-bezier(0.4, 0, 0.2, 1) both
}

.learningprogram .metrics .metricsheading strong {
    font-weight: 800;
    text-transform: uppercase
}

.learningprogram .metrics .metricssub {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin: 0 0 48px;
    max-width: 520px
}

.learningprogram .metrics .statgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px
}

.learningprogram .metrics .statcard {
    background: #fff;
    border-radius: 28px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: -1px 5px 20px 0 #cc0b021a;
    transition: box-shadow .32s ease-in-out, transform .28s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden
}

.learningprogram .metrics .statcard::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #CC0B02;
    border-radius: 0 0 28px 28px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1)
}

.learningprogram .metrics .statcard:hover {
    box-shadow: -1px 9px 36px 0 #cc0b021a;
    transform: translateY(-4px)
}

.learningprogram .metrics .statcard:hover::after {
    transform: scaleX(1)
}

.learningprogram .metrics .statcard.accent {
    background: #CC0B02
}

.learningprogram .metrics .statcard.accent .statnum,
.learningprogram .metrics .statcard.accent .statlabel {
    color: #F3F4E0
}

.learningprogram .metrics .statcard.accent::after {
    background: #31C4C0
}

.learningprogram .metrics .staticon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center
}

.learningprogram .metrics .staticon svg {
    width: 28px;
    height: 28px
}

.learningprogram .metrics .statnum {
    font-size: 27px;
    font-weight: 800;
    color: #CC0B02;
    line-height: 1.1
}

.learningprogram .metrics .statlabel {
    font-size: 16px;
    color: #444;
    line-height: 1.6
}

.learningprogram .process {
    background: #fff;
    padding: 48px 24px;
    position: relative
}

.learningprogram .process::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #31C4C0 40%, #CC0B02 100%)
}

.learningprogram .process .inner {
    max-width: 1200px;
    margin: 0 auto
}

.learningprogram .process .procheader {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: end;
    margin-bottom: 48px
}

.learningprogram .process .proctitle {
    font-size: 27px;
    font-weight: 800;
    color: #1b0a00;
    line-height: 1.1;
    margin: 0
}

.learningprogram .process .proctitle em {
    font-style: normal;
    text-transform: uppercase;
    color: #CC0B02
}

.learningprogram .process .procdesc {
    font-size: 16px;
    color: #444;
    line-height: 1.6;
    margin: 0
}

.learningprogram .process .steplist {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.learningprogram .process .step {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 24px;
    align-items: start;
    padding: 24px;
    border-radius: 3px;
    transition: background .28s ease-in-out;
    cursor: default
}

.learningprogram .process .step:hover {
    background: #F3F4E0
}

.learningprogram .process .stepnum {
    width: 48px;
    height: 48px;
    border-radius: 28px;
    background: #F3F4E0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    color: #CC0B02;
    flex-shrink: 0;
    transition: background .3s ease-in-out, color .3s ease-in-out;
    box-shadow: -1px 3px 3px 0 #cc0b0214
}

.learningprogram .process .step:hover .stepnum {
    background: #CC0B02;
    color: #F3F4E0
}

.learningprogram .process .stepname {
    font-size: 18px;
    font-weight: 700;
    color: #1b0a00;
    line-height: 1.1;
    margin: 0 0 8px
}

.learningprogram .process .steptext {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin: 0
}

.learningprogram .process .dotedge {
    position: absolute;
    right: 0;
    top: 48px;
    bottom: 48px;
    width: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    pointer-events: none
}

.learningprogram .process .dotedge span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #31C4C0;
    opacity: .35
}

.learningprogram .process .dotedge span:nth-child(3n) {
    background: #CC0B02;
    opacity: .22
}

.learningprogram .reviews {
    background: #1b0a00;
    padding: 48px 24px;
    position: relative
}

.learningprogram .reviews::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: #CC0B02
}

.learningprogram .reviews .inner {
    max-width: 1200px;
    margin: 0 auto
}

.learningprogram .reviews .revtop {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 48px;
    gap: 24px
}

.learningprogram .reviews .revtitle {
    font-size: 27px;
    font-weight: 300;
    color: #F3F4E0;
    line-height: 1.1;
    margin: 0
}

.learningprogram .reviews .revtitle strong {
    font-weight: 800;
    text-transform: uppercase;
    color: #31C4C0
}

.learningprogram .reviews .revnote {
    font-size: 16px;
    color: #f3f4e099;
    line-height: 1.6;
    max-width: 340px;
    text-align: right;
    margin: 0
}

.learningprogram .reviews .revgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px
}

.learningprogram .reviews .revcard {
    background: #f3f4e00d;
    border-radius: 28px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: -1px 5px 20px 0 #31c4c01a;
    transition: background .35s ease-in-out, box-shadow .38s ease-in-out
}

.learningprogram .reviews .revcard:hover {
    background: #f3f4e017;
    box-shadow: -1px 9px 36px 0 #31c4c01a
}

.learningprogram .reviews .revquote {
    font-size: 16px;
    color: #f3f4e0e0;
    line-height: 1.6;
    margin: 0;
    flex: 1
}

.learningprogram .reviews .revauthor {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px
}

.learningprogram .reviews .revavatar {
    width: 52px;
    height: 52px;
    border-radius: 28px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: -1px 3px 3px 0 #31c4c014
}

.learningprogram .reviews .revavatar img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    object-position: top;
    display: block
}

.learningprogram .reviews .revname {
    font-size: 16px;
    font-weight: 700;
    color: #F3F4E0;
    line-height: 1.1;
    margin: 0 0 4px
}

.learningprogram .reviews .revrole {
    font-size: 16px;
    color: #f3f4e080;
    line-height: 1.1;
    margin: 0
}

.learningprogram .reviews .noavatar {
    width: 52px;
    height: 52px;
    border-radius: 28px;
    background: #31c4c02e;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.learningprogram .reviews .noavatar svg {
    width: 26px;
    height: 26px;
    fill: #31c4c0b3
}

@media (max-width: 1024px) {
    .learningprogram .split {
        grid-template-columns: 1fr
    }

    .learningprogram .split .rightpanel {
        min-height: 280px
    }

    .learningprogram .split .heading {
        font-size: 48px
    }

    .learningprogram .metrics .statgrid {
        grid-template-columns: repeat(2, 1fr)
    }

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

    .learningprogram .reviews .revgrid {
        grid-template-columns: 1fr
    }

    .learningprogram .reviews .revtop {
        flex-direction: column;
        align-items: flex-start
    }

    .learningprogram .reviews .revnote {
        text-align: left
    }
}

@media (max-width: 768px) {
    .learningprogram .split .leftpanel {
        padding: 48px 24px
    }

    .learningprogram .split .heading {
        font-size: 27px
    }

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

    .learningprogram .process .step {
        grid-template-columns: 40px 1fr;
        gap: 16px;
        padding: 16px
    }

    .learningprogram .process .dotedge {
        display: none
    }
}

@media (max-width: 480px) {
    .learningprogram .metrics .statgrid {
        grid-template-columns: 1fr
    }

    .learningprogram .split .actions {
        flex-direction: column;
        align-items: flex-start
    }

    .learningprogram .reviews .revgrid {
        grid-template-columns: 1fr
    }
}

.contactus {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-x: clip
}

.contactus .reach {
    background: #fff;
    padding: 48px 24px
}

.contactus .reach-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start
}

.contactus .reach-left {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.contactus .reach-label {
    font-size: 16px;
    line-height: 1.6;
    color: #CC0B02;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

.contactus .reach-heading {
    font-size: 68px;
    line-height: 1.1;
    font-weight: 700;
    color: #1b1b1b;
    margin: 0
}

.contactus .reach-heading span {
    font-weight: 300;
    color: #31C4C0
}

.contactus .reach-desc {
    font-size: 18px;
    line-height: 1.6;
    color: #3a3a3a;
    margin: 0
}

.contactus .channel-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px
}

.contactus .channel-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 3px;
    background: #F3F4E0;
    box-shadow: -1px 3px 3px 0 #cc0b0214;
    transition: box-shadow .28s ease-in-out, background .35s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactus .channel-item:hover {
    box-shadow: -1px 5px 20px 0 #cc0b021a;
    background: #eceee0
}

.contactus .channel-icon {
    width: 40px;
    height: 40px;
    border-radius: 3px;
    background: #CC0B02;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.contactus .channel-icon svg {
    width: 20px;
    height: 20px;
    fill: #fff
}

.contactus .channel-text {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.contactus .channel-text strong {
    font-size: 16px;
    line-height: 1.1;
    color: #1b1b1b;
    font-weight: 700
}

.contactus .channel-text a {
    font-size: 16px;
    line-height: 1.6;
    color: #CC0B02;
    text-decoration: none;
    transition: color .25s ease-in-out
}

.contactus .channel-text a:hover {
    color: #31C4C0
}

.contactus .channel-text span {
    font-size: 16px;
    line-height: 1.6;
    color: #3a3a3a
}

.contactus .divider-crosses {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    overflow: hidden
}

.contactus .cross {
    width: 10px;
    height: 10px;
    position: relative;
    flex-shrink: 0
}

.contactus .cross::before,
.contactus .cross::after {
    content: "";
    position: absolute;
    background: #31C4C0;
    border-radius: 0
}

.contactus .cross::before {
    width: 2px;
    height: 10px;
    top: 0;
    left: 4px
}

.contactus .cross::after {
    width: 10px;
    height: 2px;
    top: 4px;
    left: 0
}

.contactus .form-section {
    background: #F3F4E0;
    padding: 48px 24px;
    position: relative
}

.contactus .form-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 100%, #31c4c021 0%, transparent 60%);
    pointer-events: none
}

.contactus .form-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 48px;
    align-items: start
}

.contactus .form-meta {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 24px
}

.contactus .form-meta-heading {
    font-size: 27px;
    line-height: 1.1;
    font-weight: 700;
    color: #1b1b1b;
    margin: 0
}

.contactus .form-meta-heading span {
    font-weight: 300
}

.contactus .form-meta-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #3a3a3a;
    margin: 0
}

.contactus .badge-counter {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    background: #CC0B02;
    color: #fff;
    border-radius: 28px;
    padding: 4px 16px;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 700;
    align-self: flex-start;
    box-shadow: -1px 5px 20px 0 #cc0b021a;
    animation: shadowpulse 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite
}

@keyframes shadowpulse {
    0% {
        box-shadow: -1px 5px 20px 0 #cc0b021a
    }

    50% {
        box-shadow: -1px 9px 36px 0 #cc0b0238
    }

    100% {
        box-shadow: -1px 5px 20px 0 #cc0b021a
    }
}

.contactus .dashed-box {
    border: 2px dashed #31c4c080;
    border-radius: 3px;
    padding: 16px
}

.contactus .dashed-box-text {
    font-size: 16px;
    line-height: 1.6;
    color: #3a3a3a;
    margin: 0
}

.contactus .form-card {
    background: #fff;
    border-radius: 3px;
    padding: 48px;
    box-shadow: -1px 9px 36px 0 #cc0b021a
}

.contactus .contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px
}

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

.contactus .field-label {
    font-size: 16px;
    line-height: 1.1;
    font-weight: 700;
    color: #1b1b1b
}

.contactus .field-label .req {
    color: #CC0B02;
    margin-left: 4px
}

.contactus .field-input {
    border: 1.5px solid #d0d0c0;
    border-radius: 3px;
    padding: 16px;
    font-size: 16px;
    line-height: 1.6;
    color: #1b1b1b;
    background: #fff;
    outline: none;
    transition: border-color .28s ease-in-out, box-shadow .32s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    box-sizing: border-box
}

.contactus .field-input::placeholder {
    font-size: 15px;
    color: #9a9a8a
}

.contactus .field-input:focus {
    border-color: #31C4C0;
    box-shadow: -1px 3px 3px 0 #31c4c014
}

.contactus .field-input:invalid:not(:placeholder-shown) {
    border-color: #CC0B02
}

.contactus .channel-select-group {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.contactus .channel-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px
}

.contactus .channel-opt {
    position: relative
}

.contactus .channel-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0
}

.contactus .channel-opt label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    border: 1.5px solid #d0d0c0;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.1;
    color: #3a3a3a;
    background: #fff;
    transition: border-color .28s ease-in-out, background .32s cubic-bezier(0.4, 0, 0.2, 1), color .28s ease-in-out;
    text-align: center
}

.contactus .channel-opt label svg {
    width: 22px;
    height: 22px;
    transition: fill .28s ease-in-out
}

.contactus .channel-opt input[type="radio"]:checked+label {
    border-color: #31C4C0;
    background: #31c4c014;
    color: #1b1b1b;
    font-weight: 700
}

.contactus .channel-opt input[type="radio"]:checked+label svg {
    fill: #31C4C0
}

.contactus .channel-opt label:hover {
    border-color: #31C4C0;
    background: #31c4c00d
}

.contactus .channel-opt input[type="radio"]:focus-visible+label {
    outline: 2px solid #31C4C0;
    outline-offset: 2px
}

.contactus .field-select {
    border: 1.5px solid #d0d0c0;
    border-radius: 3px;
    padding: 16px;
    font-size: 16px;
    line-height: 1.6;
    color: #1b1b1b;
    background: #fff;
    outline: none;
    transition: border-color .28s ease-in-out, box-shadow .32s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233a3a3a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 48px
}

.contactus .field-select:focus {
    border-color: #31C4C0;
    box-shadow: -1px 3px 3px 0 #31c4c014
}

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

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

.contactus .privacy-text {
    font-size: 16px;
    line-height: 1.6;
    color: #3a3a3a;
    margin: 0
}

.contactus .privacy-text a {
    color: #CC0B02;
    text-decoration: underline;
    transition: color .25s ease-in-out
}

.contactus .privacy-text a:hover {
    color: #31C4C0
}

.contactus .submit-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #CC0B02;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 16px 48px;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 700;
    cursor: pointer;
    transition: background .28s ease-in-out, box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -1px 5px 20px 0 #cc0b021a;
    align-self: flex-start
}

.contactus .submit-btn:hover {
    background: #a80901;
    box-shadow: -1px 9px 36px 0 #cc0b022e
}

.contactus .submit-btn:focus-visible {
    outline: 3px solid #31C4C0;
    outline-offset: 3px
}

.contactus .submit-btn:active {
    background: #8c0701
}

.contactus .submit-btn.shake {
    animation: shakebtn .38s cubic-bezier(0.4, 0, 0.2, 1)
}

@keyframes shakebtn {
    0% {
        transform: translateX(0)
    }

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

    36% {
        transform: translateX(6px)
    }

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

    72% {
        transform: translateX(4px)
    }

    90% {
        transform: translateX(-2px)
    }

    100% {
        transform: translateX(0)
    }
}

.contactus .submit-btn svg {
    width: 20px;
    height: 20px;
    fill: #fff
}

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

.contactus .expand-item {
    border-radius: 3px;
    background: #fff;
    box-shadow: -1px 3px 3px 0 #cc0b0214;
    overflow: hidden
}

.contactus .expand-toggle {
    width: 100%;
    background: none;
    border: none;
    padding: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.1;
    font-weight: 700;
    color: #1b1b1b;
    text-align: left;
    transition: background .28s ease-in-out, color .28s ease-in-out
}

.contactus .expand-toggle:hover {
    background: #31c4c012;
    color: #31C4C0
}

.contactus .expand-toggle:focus-visible {
    outline: 2px solid #31C4C0;
    outline-offset: -2px
}

.contactus .expand-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform .32s cubic-bezier(0.4, 0, 0.2, 1)
}

.contactus .expand-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .38s cubic-bezier(0.4, 0, 0.2, 1), padding .32s ease-in-out;
    padding: 0 16px;
    font-size: 16px;
    line-height: 1.6;
    color: #3a3a3a
}

.contactus .expand-item.open .expand-body {
    max-height: 200px;
    padding: 0 16px 16px
}

.contactus .expand-item.open .expand-icon {
    transform: rotate(45deg)
}

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

    .contactus .reach-heading {
        font-size: 48px
    }

    .contactus .form-inner {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .contactus .form-meta {
        position: static
    }

    .contactus .form-card {
        padding: 24px
    }
}

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

    .contactus .reach-heading {
        font-size: 27px
    }

    .contactus .form-section {
        padding: 48px 16px
    }

    .contactus .channel-options {
        grid-template-columns: 1fr
    }

    .contactus .submit-btn {
        width: 100%;
        justify-content: center
    }

    .contactus .form-card {
        padding: 16px
    }
}

@media (max-width: 480px) {
    .contactus .reach-heading {
        font-size: 21px
    }

    .contactus .badge-counter {
        font-size: 16px
    }
}

.analytics {
    max-width: 100%;
    overflow-x: hidden;
    background: #fff
}

.analytics .pageheader {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 24px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px
}

.analytics .pageheader .pagelabel {
    font-size: 16px;
    color: #CC0B02;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 8px
}

.analytics .pageheader .pagetitle {
    font-size: 68px;
    line-height: 1.1;
    font-weight: 800;
    color: #111;
    margin: 0
}

.analytics .pageheader .pagetitle span {
    color: #CC0B02;
    font-weight: 300
}

.analytics .pageheader .pagedesc {
    font-size: 18px;
    line-height: 1.6;
    color: #444;
    max-width: 420px;
    margin: 0;
    text-align: right
}

.analytics .divider {
    max-width: 1200px;
    margin: 0 auto 48px;
    padding: 0 24px
}

.analytics .divider span {
    display: block;
    height: 4px;
    background: #CC0B02;
    width: 80px
}

.analytics .featstrip {
    background: #fef9f9;
    padding: 24px 0;
    border-top: 1px solid #cc0b0214;
    border-bottom: 1px solid #cc0b0214;
    margin-bottom: 48px;
    overflow: hidden
}

.analytics .featstrip .stripinner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap
}

.analytics .featstrip .featitem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 120px
}

.analytics .featstrip .featicon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center
}

.analytics .featstrip .featicon svg {
    width: 32px;
    height: 32px
}

.analytics .featstrip .featlabel {
    font-size: 16px;
    color: #333;
    text-align: center;
    font-weight: 500;
    margin: 0
}

.analytics .postsgrid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 48px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.analytics .postcard {
    border-radius: 28px;
    overflow: hidden;
    box-shadow: -1px 5px 20px 0 #cc0b021a;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1), transform .28s ease-in-out;
    position: relative
}

.analytics .postcard:hover {
    box-shadow: -1px 9px 36px 0 #cc0b021a;
    transform: translateY(-4px)
}

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

.analytics .postcard .cardimgwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .38s ease-in-out
}

.analytics .postcard:hover .cardimgwrap img {
    transform: scale(1.04)
}

.analytics .postcard .cardimgwrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 100%, #cc0b022e, transparent 70%);
    pointer-events: none
}

.analytics .postcard .stripeoverlay {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 12px, #31c4c01f 12px, #31c4c01f 14px);
    opacity: 0;
    transition: opacity .32s ease-in-out;
    pointer-events: none;
    border-radius: 28px
}

.analytics .postcard:hover .stripeoverlay {
    opacity: 1
}

.analytics .postcard .cardtag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #CC0B02;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 4px 16px;
    border-radius: 3px;
    z-index: 2;
    pointer-events: none
}

.analytics .postcard .cardbody {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1
}

.analytics .postcard .cardsubtitle {
    font-size: 16px;
    color: #31C4C0;
    font-weight: 600;
    margin: 0;
    line-height: 1.1
}

.analytics .postcard .cardtitle {
    font-size: 21px;
    font-weight: 700;
    color: #111;
    margin: 0;
    line-height: 1.1
}

.analytics .postcard .carddesc {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin: 0;
    flex: 1
}

.analytics .postcard .cardmeta {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #cc0b0214
}

.analytics .postcard .cardauthor {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    margin: 0
}

.analytics .postcard .cardstats {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px
}

.analytics .postcard .statitem {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    color: #888
}

.analytics .postcard .statitem svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0
}

.analytics .postcard .cardlink {
    display: block;
    margin: 0 24px 24px;
    padding: 8px 24px;
    background: #CC0B02;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    transition: background .28s ease-in-out, box-shadow .32s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -1px 3px 3px 0 #cc0b0214
}

.analytics .postcard .cardlink:hover {
    background: #a50901;
    box-shadow: -1px 5px 20px 0 #cc0b021a
}

.analytics .postcard .cardlink:focus {
    outline: 2px solid #31C4C0;
    outline-offset: 2px
}

.analytics .highlight {
    background: linear-gradient(180deg, transparent 55%, #31c4c059 55%);
    display: inline
}

.analytics .introsection {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px;
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: center
}

.analytics .introsection .introleft {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.analytics .introsection .introleft .introtag {
    font-size: 16px;
    color: #CC0B02;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0
}

.analytics .introsection .introleft .introh {
    font-size: 27px;
    font-weight: 700;
    color: #111;
    margin: 0;
    line-height: 1.1
}

.analytics .introsection .introleft .introp {
    font-size: 18px;
    line-height: 1.6;
    color: #444;
    margin: 0
}

.analytics .introsection .introright {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end
}

.analytics .introsection .introright .introp {
    font-size: 18px;
    line-height: 1.6;
    color: #444;
    margin: 0;
    text-align: right
}

.analytics .introsection .introright .introcta {
    display: inline-block;
    padding: 16px 48px;
    background: #CC0B02;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    font-size: 18px;
    font-weight: 700;
    box-shadow: -1px 5px 20px 0 #cc0b021a;
    transition: background .28s ease-in-out, box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1)
}

.analytics .introsection .introright .introcta:hover {
    background: #a50901;
    box-shadow: -1px 9px 36px 0 #cc0b021a
}

.analytics .introsection .introright .introcta:focus {
    outline: 2px solid #31C4C0;
    outline-offset: 2px
}

.analytics .washsection {
    position: relative;
    overflow: hidden;
    padding: 48px 0;
    animation: colorwash 8s ease-in-out infinite alternate
}

@keyframes colorwash {
    0% {
        background: #fff8f8
    }

    50% {
        background: #f3f4e0
    }

    100% {
        background: #f0fafa
    }
}

.analytics .washsection .washinner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    text-align: center
}

.analytics .washsection .washdecor {
    font-size: 68px;
    line-height: 1.1;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 2px #cc0b0226;
    pointer-events: none;
    user-select: none;
    margin: 0;
    line-height: 1
}

.analytics .washsection .washh {
    font-size: 27px;
    font-weight: 700;
    color: #111;
    margin: 0;
    line-height: 1.1
}

.analytics .washsection .washp {
    font-size: 18px;
    line-height: 1.6;
    color: #444;
    max-width: 640px;
    margin: 0
}

.analytics .imagehero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px;
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: flex-start
}

.analytics .imagehero .herotext {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.analytics .imagehero .herotext .herotag {
    font-size: 16px;
    color: #31C4C0;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0
}

.analytics .imagehero .herotext .heroh {
    font-size: 27px;
    font-weight: 700;
    color: #111;
    margin: 0;
    line-height: 1.1
}

.analytics .imagehero .herotext .herop {
    font-size: 18px;
    line-height: 1.6;
    color: #444;
    margin: 0
}

.analytics .imagehero .heroimgwrap {
    flex: 1;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: -1px 9px 36px 0 #cc0b021a;
    position: relative
}

.analytics .imagehero .heroimgwrap img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    filter: saturate(0.7) contrast(1.1)
}

.analytics .imagehero .heroimgwrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 100%, #cc0b0238, transparent 60%);
    pointer-events: none;
    z-index: 1
}

.analytics .imagehero .heroimgwrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, #00000008 3px, #00000008 4px);
    pointer-events: none;
    z-index: 2
}

.analytics .accentblock {
    background: #CC0B02;
    padding: 48px 0
}

.analytics .accentblock .accentinner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: center;
    justify-content: space-between
}

.analytics .accentblock .accentleft {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1
}

.analytics .accentblock .accenth {
    font-size: 27px;
    font-weight: 300;
    color: #fff;
    margin: 0;
    line-height: 1.1
}

.analytics .accentblock .accenth strong {
    font-weight: 800;
    font-size: 27px
}

.analytics .accentblock .accentp {
    font-size: 18px;
    line-height: 1.6;
    color: #ffffffe0;
    margin: 0
}

.analytics .accentblock .accentright {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    align-items: flex-end
}

.analytics .accentblock .accentlink {
    display: inline-block;
    padding: 16px 48px;
    background: #fff;
    color: #CC0B02;
    text-decoration: none;
    border-radius: 3px;
    font-size: 18px;
    font-weight: 700;
    box-shadow: -1px 5px 20px 0 #cc0b021a;
    transition: background .28s ease-in-out, color .28s ease-in-out
}

.analytics .accentblock .accentlink:hover {
    background: #F3F4E0;
    color: #a50901
}

.analytics .accentblock .accentlink:focus {
    outline: 2px solid #31C4C0;
    outline-offset: 2px
}

.analytics .accentblock .accentp.right {
    text-align: right;
    color: #ffffffbf;
    font-size: 16px
}

@media (max-width: 1024px) {
    .analytics .pageheader .pagetitle {
        font-size: 48px
    }

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

    .analytics .introsection {
        flex-direction: column;
        gap: 24px
    }

    .analytics .introsection .introright {
        align-items: flex-start
    }

    .analytics .introsection .introright .introp {
        text-align: left
    }

    .analytics .imagehero {
        flex-direction: column
    }

    .analytics .accentblock .accentinner {
        flex-direction: column;
        gap: 24px
    }

    .analytics .accentblock .accentright {
        align-items: flex-start
    }
}

@media (max-width: 768px) {
    .analytics .pageheader {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 16px 16px
    }

    .analytics .pageheader .pagetitle {
        font-size: 48px
    }

    .analytics .pageheader .pagedesc {
        text-align: left;
        max-width: 100%
    }

    .analytics .postsgrid {
        grid-template-columns: 1fr;
        padding: 0 16px 24px
    }

    .analytics .introsection {
        padding: 24px 16px
    }

    .analytics .imagehero {
        padding: 24px 16px
    }

    .analytics .imagehero .heroimgwrap img {
        height: 240px
    }

    .analytics .accentblock .accentinner {
        padding: 0 16px
    }

    .analytics .washsection .washdecor {
        font-size: 48px
    }

    .analytics .divider {
        padding: 0 16px
    }
}

@media (max-width: 480px) {
    .analytics .pageheader .pagetitle {
        font-size: 27px
    }

    .analytics .postcard .cardimgwrap {
        height: 160px
    }

    .analytics .featstrip .stripinner {
        gap: 8px
    }

    .analytics .featstrip .featitem {
        min-width: 80px
    }
}

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

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

.aboutus .split {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    position: relative;
    background: #fff;
    max-width: 100%
}

.aboutus .split .leftaccent {
    width: 30%;
    min-width: 280px;
    background: #F3F4E0;
    padding: 48px 24px 48px 48px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    overflow: hidden
}

.aboutus .split .leftaccent::before {
    content: "%";
    position: absolute;
    bottom: -40px;
    left: -20px;
    font-size: 320px;
    line-height: 1.1;
    color: transparent;
    -webkit-text-stroke: 2px #cc0b0214;
    pointer-events: none;
    user-select: none;
    z-index: 0
}

.aboutus .split .leftaccent .dotpath {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 48px;
    position: relative;
    z-index: 1
}

.aboutus .split .leftaccent .dotpath span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #CC0B02;
    opacity: .4;
    transition: opacity .28s ease-in-out
}

.aboutus .split .leftaccent .dotpath span:nth-child(2) {
    opacity: .25;
    margin-left: 8px
}

.aboutus .split .leftaccent .dotpath span:nth-child(3) {
    opacity: .15;
    margin-left: 16px
}

.aboutus .split .leftaccent .dotpath span:nth-child(4) {
    opacity: .08;
    margin-left: 24px
}

.aboutus .split .leftaccent .accentlabel {
    font-size: 16px;
    line-height: 1.6;
    color: #CC0B02;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 24px;
    position: relative;
    z-index: 1
}

.aboutus .split .leftaccent .lefthead {
    font-size: 68px;
    line-height: 1.1;
    font-weight: 900;
    color: #1b1b1b;
    margin: 0 0 24px;
    position: relative;
    z-index: 1
}

.aboutus .split .leftaccent .lefthead em {
    font-style: normal;
    color: #CC0B02
}

.aboutus .split .leftaccent .tagline {
    font-size: 18px;
    line-height: 1.6;
    color: #444;
    margin: 0 0 48px;
    position: relative;
    z-index: 1
}

.aboutus .split .leftaccent .imgwrap {
    position: relative;
    z-index: 1;
    margin-top: auto
}

.aboutus .split .leftaccent .imgwrap img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    object-position: center;
    border-radius: 28px;
    display: block;
    box-shadow: -1px 9px 36px 0 #cc0b021a;
    transition: box-shadow .35s cubic-bezier(0.4, 0, 0.2, 1)
}

.aboutus .split .leftaccent .imgwrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 28px;
    border: 2px solid transparent;
    transition: border-color .32s ease-in-out;
    pointer-events: none
}

.aboutus .split .leftaccent .imgwrap:hover::after {
    border-color: #CC0B02
}

.aboutus .split .leftaccent .imgwrap:hover img {
    box-shadow: -1px 9px 36px 0 #cc0b022e
}

.aboutus .split .rightcontent {
    width: 70%;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background: #fff
}

.aboutus .split .rightcontent .mathsymbol {
    position: absolute;
    top: 24px;
    right: 48px;
    font-size: 180px;
    line-height: 1.1;
    color: transparent;
    -webkit-text-stroke: 1.5px #31c4c01a;
    pointer-events: none;
    user-select: none;
    z-index: 0
}

.aboutus .split .rightcontent .colsgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px 48px;
    position: relative;
    z-index: 1
}

.aboutus .split .rightcontent .colsgrid .col {
    opacity: 0;
    animation: colappear .38s ease-in-out forwards
}

.aboutus .split .rightcontent .colsgrid .col:nth-child(1) {
    animation-delay: .1s
}

.aboutus .split .rightcontent .colsgrid .col:nth-child(2) {
    animation-delay: .22s
}

.aboutus .split .rightcontent .colsgrid .col:nth-child(3) {
    animation-delay: .34s
}

.aboutus .split .rightcontent .colsgrid .col:nth-child(4) {
    animation-delay: .46s
}

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

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

.aboutus .split .rightcontent .colsgrid .col .colhead {
    font-size: 21px;
    line-height: 1.1;
    font-weight: 700;
    color: #1b1b1b;
    margin: 0 0 16px
}

.aboutus .split .rightcontent .colsgrid .col .colhead STRONG {
    color: #CC0B02;
    text-transform: uppercase
}

.aboutus .split .rightcontent .colsgrid .col p {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin: 0
}

.aboutus .split .rightcontent .colsgrid .col .ringwrap {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px
}

.aboutus .split .rightcontent .colsgrid .col .ring {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0
}

.aboutus .split .rightcontent .colsgrid .col .ring svg {
    width: 72px;
    height: 72px;
    transform: rotate(-90deg)
}

.aboutus .split .rightcontent .colsgrid .col .ring .ringnum {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #1b1b1b
}

.aboutus .split .rightcontent .colsgrid .col .ringlabel {
    font-size: 18px;
    font-weight: 600;
    color: #1b1b1b;
    line-height: 1.1
}

.aboutus .split .rightcontent .bottombar {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid #F3F4E0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 1
}

.aboutus .split .rightcontent .bottombar .portrait {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: -1px 5px 20px 0 #31c4c01a
}

.aboutus .split .rightcontent .bottombar .portrait img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    object-position: top;
    display: block
}

.aboutus .split .rightcontent .bottombar .quoteblock {
    flex: 1
}

.aboutus .split .rightcontent .bottombar .quoteblock .quotetext {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin: 0 0 8px;
    font-style: italic
}

.aboutus .split .rightcontent .bottombar .quoteblock .quotename {
    font-size: 16px;
    font-weight: 700;
    color: #1b1b1b;
    margin: 0
}

.aboutus .split .rightcontent .bottombar .quoteblock .quoterole {
    font-size: 16px;
    color: #31C4C0;
    margin: 0;
    line-height: 1.6
}

.aboutus .divider {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #F3F4E0 20%, #F3F4E0 80%, transparent 100%);
    border: none
}

.aboutus .storyblock {
    width: 100%;
    background: radial-gradient(circle at 0% 100%, #31c4c01f 0%, transparent 60%);
    padding: 48px 0;
    position: relative
}

.aboutus .storyblock .storyinner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: flex-start
}

.aboutus .storyblock .storyleft {
    width: 42%;
    flex-shrink: 0;
    position: relative
}

.aboutus .storyblock .storyleft .imagegrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px
}

.aboutus .storyblock .storyleft .imagegrid .imgitem {
    position: relative;
    border-radius: 28px;
    overflow: hidden
}

.aboutus .storyblock .storyleft .imagegrid .imgitem::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 28px;
    border: 2px solid transparent;
    transition: border-color .29s ease-in-out;
    pointer-events: none;
    z-index: 2
}

.aboutus .storyblock .storyleft .imagegrid .imgitem:hover::after {
    border-color: #31C4C0
}

.aboutus .storyblock .storyleft .imagegrid .imgitem img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    border-radius: 28px;
    transition: transform .36s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -1px 5px 20px 0 #31c4c01a
}

.aboutus .storyblock .storyleft .imagegrid .imgitem:hover img {
    transform: scale(1.03)
}

.aboutus .storyblock .storyleft .imagegrid .imgitem.wide {
    grid-column: 1 / 3
}

.aboutus .storyblock .storyleft .imagegrid .imgitem.wide img {
    height: 220px
}

.aboutus .storyblock .storyleft .imagegrid .imgitem .overlay {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: linear-gradient(135deg, #cc0b022e 0%, transparent 60%);
    pointer-events: none;
    z-index: 1
}

.aboutus .storyblock .storyright {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.aboutus .storyblock .storyright .storymeta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px
}

.aboutus .storyblock .storyright .storymeta .metabar {
    width: 40px;
    height: 3px;
    background: #31C4C0;
    border-radius: 3px;
    flex-shrink: 0
}

.aboutus .storyblock .storyright .storymeta .metalabel {
    font-size: 16px;
    color: #31C4C0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em
}

.aboutus .storyblock .storyright .storyhead {
    font-size: 27px;
    line-height: 1.1;
    font-weight: 300;
    color: #1b1b1b;
    margin: 0
}

.aboutus .storyblock .storyright .storyhead strong {
    font-weight: 900;
    color: #CC0B02;
    text-transform: uppercase
}

.aboutus .storyblock .storyright .storypara {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin: 0
}

.aboutus .storyblock .storyright .valuesrow {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px
}

.aboutus .storyblock .storyright .valuesrow .valitem {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: 3px;
    background: #fff;
    box-shadow: -1px 3px 3px 0 #cc0b0214;
    position: relative;
    overflow: hidden;
    transition: box-shadow .32s ease-in-out
}

.aboutus .storyblock .storyright .valuesrow .valitem:hover {
    box-shadow: -1px 5px 20px 0 #cc0b021a
}

.aboutus .storyblock .storyright .valuesrow .valitem .corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 28px 28px 0;
    border-color: transparent #F3F4E0 transparent transparent;
    transition: border-width .27s ease-in-out
}

.aboutus .storyblock .storyright .valuesrow .valitem:hover .corner {
    border-width: 0 40px 40px 0
}

.aboutus .storyblock .storyright .valuesrow .valitem .valicon {
    width: 40px;
    height: 40px;
    border-radius: 3px;
    background: #F3F4E0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.aboutus .storyblock .storyright .valuesrow .valitem .valicon svg {
    width: 22px;
    height: 22px
}

.aboutus .storyblock .storyright .valuesrow .valitem .valtextblock .valhead {
    font-size: 16px;
    font-weight: 700;
    color: #1b1b1b;
    margin: 0 0 4px;
    line-height: 1.1
}

.aboutus .storyblock .storyright .valuesrow .valitem .valtextblock .valdesc {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin: 0
}

.aboutus .storyblock .storyright .actionlinks {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px
}

.aboutus .storyblock .storyright .actionlinks .btnprimary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: #CC0B02;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: -1px 5px 20px 0 #cc0b021a;
    transition: background .28s ease-in-out, box-shadow .28s ease-in-out
}

.aboutus .storyblock .storyright .actionlinks .btnprimary:hover {
    background: #a80901;
    box-shadow: -1px 9px 36px 0 #cc0b022e
}

.aboutus .storyblock .storyright .actionlinks .btnprimary:focus {
    outline: 3px solid #CC0B02;
    outline-offset: 3px
}

.aboutus .storyblock .storyright .actionlinks .btnsecondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: #F3F4E0;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    transition: background .31s cubic-bezier(0.4, 0, 0.2, 1)
}

.aboutus .storyblock .storyright .actionlinks .btnsecondary:hover {
    background: #e0e8c0
}

.aboutus .storyblock .storyright .actionlinks .btnsecondary:focus {
    outline: 3px solid #31C4C0;
    outline-offset: 3px
}

.aboutus .storyblock .storyright .actionlinks .btnsecondary svg {
    width: 22px;
    height: 22px
}

@keyframes shake {

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

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

    40% {
        transform: translateX(6px)
    }

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

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

.aboutus .shake {
    animation: shake .38s ease-in-out
}

@media (max-width: 1024px) {
    .aboutus .split {
        flex-direction: column
    }

    .aboutus .split .leftaccent {
        width: 100%;
        min-width: 0;
        padding: 48px 24px
    }

    .aboutus .split .leftaccent .lefthead {
        font-size: 48px
    }

    .aboutus .split .leftaccent .imgwrap img {
        height: 260px
    }

    .aboutus .split .rightcontent {
        width: 100%;
        padding: 48px 24px
    }

    .aboutus .split .rightcontent .colsgrid {
        grid-template-columns: 1fr 1fr;
        gap: 24px
    }

    .aboutus .storyblock .storyinner {
        flex-direction: column;
        padding: 0 24px
    }

    .aboutus .storyblock .storyleft {
        width: 100%
    }
}

@media (max-width: 768px) {
    .aboutus .split .leftaccent .lefthead {
        font-size: 48px
    }

    .aboutus .split .rightcontent .colsgrid {
        grid-template-columns: 1fr
    }

    .aboutus .split .rightcontent .bottombar {
        flex-direction: column;
        align-items: flex-start
    }

    .aboutus .storyblock .storyleft .imagegrid {
        grid-template-columns: 1fr
    }

    .aboutus .storyblock .storyleft .imagegrid .imgitem.wide {
        grid-column: 1
    }
}

@media (max-width: 480px) {
    .aboutus .split .leftaccent {
        padding: 48px 16px 24px
    }

    .aboutus .split .leftaccent .lefthead {
        font-size: 48px
    }

    .aboutus .split .rightcontent {
        padding: 24px 16px
    }

    .aboutus .storyblock .storyinner {
        padding: 0 16px
    }

    .aboutus .storyblock .storyright .actionlinks {
        flex-direction: column
    }
}

.base {
    background: #fff;
    overflow-x: hidden;
    position: relative
}

.base *,
.base ::before,
.base ::after {
    box-sizing: border-box
}

.base img {
    max-width: 100%;
    display: block
}

.base .titleblock {
    display: grid;
    grid-template-rows: auto auto;
    max-width: 100%;
    position: relative
}

.base .titleblock .imagezone {
    position: relative;
    overflow: hidden;
    min-height: 420px
}

.base .titleblock .imagezone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block
}

.base .titleblock .imagezone .stripe {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #CC0B02 0%, #31C4C0 60%, transparent 100%)
}

.base .titleblock .imagezone .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #cc0b022e 0%, #31c4c01a 100%)
}

.base .titleblock .textzone {
    background: #F3F4E0;
    padding: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: end
}

.base .titleblock .textzone .leftcol {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.base .titleblock .textzone .rightcol {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
    text-align: right
}

.base .titleblock .badge {
    display: inline-block;
    background: #CC0B02;
    color: #fff;
    font-size: 16px;
    padding: 4px 16px;
    border-radius: 3px;
    letter-spacing: .04em;
    text-transform: uppercase;
    width: fit-content
}

.base .titleblock h1 {
    font-size: 68px;
    line-height: 1.1;
    font-weight: 700;
    color: #1b1b1b;
    margin: 0
}

.base .titleblock h1 span {
    color: #CC0B02
}

.base .titleblock .tagline {
    font-size: 18px;
    line-height: 1.6;
    color: #3a3a3a;
    margin: 0;
    max-width: 420px
}

.base .titleblock .rightcol .descriptor {
    font-size: 16px;
    line-height: 1.6;
    color: #3a3a3a;
    margin: 0;
    max-width: 320px
}

.base .titleblock .rightcol .linkbtn {
    display: inline-block;
    background: transparent;
    border: 2px solid #CC0B02;
    color: #CC0B02;
    font-size: 16px;
    padding: 8px 24px;
    border-radius: 3px;
    text-decoration: none;
    font-weight: 600;
    transition: background .28s cubic-bezier(0.4, 0, 0.2, 1), color .28s cubic-bezier(0.4, 0, 0.2, 1)
}

.base .titleblock .rightcol .linkbtn:hover {
    background: #CC0B02;
    color: #fff
}

.base .divider {
    height: 2px;
    background: radial-gradient(circle at center, #31C4C0 0%, transparent 70%);
    border: none;
    margin: 0
}

.base .divider.red {
    background: radial-gradient(circle at center, #CC0B02 0%, transparent 70%)
}

.base .relationsec {
    padding: 48px 0;
    background: #fff
}

.base .relationsec .relinner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    align-items: start
}

.base .relationsec .sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 8px
}

.base .relationsec .sideitem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-radius: 28px;
    background: #F3F4E0;
    box-shadow: -1px 3px 3px 0 #31c4c014;
    transition: box-shadow .32s ease-in-out, transform .32s ease-in-out
}

.base .relationsec .sideitem:hover {
    box-shadow: -1px 5px 20px 0 #31c4c01a;
    transform: translateY(-2px)
}

.base .relationsec .sideitem .iconwrap {
    width: 48px;
    height: 48px;
    background: #CC0B02;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -1px 5px 20px 0 #cc0b021a;
    flex-shrink: 0
}

.base .relationsec .sideitem .iconwrap svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.base .relationsec .sideitem .label {
    font-size: 16px;
    color: #2a2a2a;
    font-weight: 600;
    text-align: center;
    margin: 0
}

.base .relationsec .maincontent {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.base .relationsec h2 {
    font-size: 27px;
    line-height: 1.1;
    font-weight: 700;
    color: #1b1b1b;
    margin: 0
}

.base .relationsec h2 .accent {
    text-transform: uppercase;
    color: #CC0B02
}

.base .relationsec .bodytext {
    font-size: 18px;
    line-height: 1.6;
    color: #3a3a3a;
    margin: 0
}

.base .relationsec .imgwrap {
    border-radius: 28px;
    overflow: hidden;
    box-shadow: -1px 9px 36px 0 #cc0b021a;
    position: relative
}

.base .relationsec .imgwrap img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .38s cubic-bezier(0.4, 0, 0.2, 1)
}

.base .relationsec .imgwrap:hover img {
    transform: scale(1.03)
}

.base .relationsec .imgwrap .imgoverlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 100%, #31c4c038 0%, transparent 60%);
    pointer-events: none
}

.base .examplesec {
    padding: 48px 0;
    background: #F3F4E0;
    position: relative
}

.base .examplesec .motif {
    position: absolute;
    top: 0;
    right: 0;
    width: 180px;
    height: 100%;
    pointer-events: none;
    overflow: hidden
}

.base .examplesec .motif::before {
    content: "";
    position: absolute;
    top: 24px;
    right: 16px;
    width: 8px;
    height: 8px;
    background: #cc0b022e;
    border-radius: 50%;
    box-shadow: 0 32px 0 #cc0b0224 0 64px 0 #cc0b021a 0 96px 0 #cc0b0214 0 128px 0 #cc0b020f 0 160px 0 #cc0b020a 32px 0 0 #31c4c024 32px 32px 0 #31c4c01a 32px 64px 0 #31c4c014 32px 96px 0 #31c4c00f 32px 128px 0 #31c4c00a
}

.base .examplesec .exinner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    flex-direction: column;
    gap: 48px
}

.base .examplesec .extop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center
}

.base .examplesec h2 {
    font-size: 27px;
    line-height: 1.1;
    font-weight: 300;
    color: #1b1b1b;
    margin: 0
}

.base .examplesec h2 strong {
    font-weight: 700;
    display: block;
    font-size: 27px
}

.base .examplesec .extext {
    font-size: 18px;
    line-height: 1.6;
    color: #3a3a3a;
    margin: 0
}

.base .examplesec .eximg {
    border-radius: 28px;
    overflow: hidden;
    box-shadow: -1px 9px 36px 0 #cc0b021a;
    position: relative
}

.base .examplesec .eximg img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
    display: block
}

.base .examplesec .eximg .imgoverlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 100%, #cc0b0226 0%, transparent 55%);
    pointer-events: none
}

.base .examplesec .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.base .examplesec .card {
    background: #fff;
    border-radius: 28px;
    padding: 24px;
    box-shadow: -1px 3px 3px 0 #cc0b0214;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow .35s ease-in-out, transform .35s ease-in-out
}

.base .examplesec .card:hover {
    box-shadow: -1px 9px 36px 0 #cc0b021a;
    transform: translateY(-3px)
}

.base .examplesec .card .cardnum {
    font-size: 27px;
    font-weight: 700;
    color: #CC0B02;
    line-height: 1.1
}

.base .examplesec .card h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1b1b1b;
    margin: 0;
    line-height: 1.6
}

.base .examplesec .card p {
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0
}

.base .adaptsec {
    padding: 48px 0;
    background: #fff
}

.base .adaptsec .adaptinner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px
}

.base .adaptsec .adaptgrid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 48px;
    align-items: start
}

.base .adaptsec .adaptleft {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.base .adaptsec h2 {
    font-size: 27px;
    line-height: 1.1;
    font-weight: 700;
    color: #1b1b1b;
    margin: 0
}

.base .adaptsec h2 .accent {
    text-transform: uppercase;
    color: #31C4C0
}

.base .adaptsec .adapttext {
    font-size: 18px;
    line-height: 1.6;
    color: #3a3a3a;
    margin: 0
}

.base .adaptsec .steps {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.base .adaptsec .step {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 16px;
    align-items: start;
    padding: 16px;
    border-radius: 3px;
    background: #F3F4E0;
    transition: background .28s ease-in-out
}

.base .adaptsec .step:hover {
    background: #eaecd0
}

.base .adaptsec .step .stepnum {
    width: 40px;
    height: 40px;
    background: #31C4C0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: -1px 3px 3px 0 #31c4c014
}

.base .adaptsec .step .steptxt h5 {
    font-size: 16px;
    font-weight: 600;
    color: #1b1b1b;
    margin: 0 0 4px;
    line-height: 1.6
}

.base .adaptsec .step .steptxt p {
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0
}

.base .adaptsec .adaptright {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.base .adaptsec .adaptright .imgwrap {
    border-radius: 28px;
    overflow: hidden;
    box-shadow: -1px 5px 20px 0 #31c4c01a;
    position: relative
}

.base .adaptsec .adaptright .imgwrap img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .36s cubic-bezier(0.4, 0, 0.2, 1)
}

.base .adaptsec .adaptright .imgwrap:hover img {
    transform: scale(1.04)
}

.base .adaptsec .adaptright .imgwrap .imgoverlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 100%, #31c4c033 0%, transparent 55%);
    pointer-events: none
}

.base .adaptsec .adaptright .note {
    background: #F3F4E0;
    border-radius: 28px;
    padding: 24px;
    font-size: 16px;
    line-height: 1.6;
    color: #3a3a3a;
    box-shadow: -1px 3px 3px 0 #31c4c014
}

.base .problemsec {
    padding: 48px 0;
    position: relative;
    overflow: hidden
}

.base .problemsec .bgimg {
    position: absolute;
    inset: 0;
    z-index: 0
}

.base .problemsec .bgimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block
}

.base .problemsec .bgimg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #f3f4e0f5 0%, #f3f4e0e0 50%, #cc0b021a 100%)
}

.base .problemsec .probinner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center
}

.base .problemsec .probleft {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.base .problemsec h2 {
    font-size: 27px;
    line-height: 1.1;
    font-weight: 700;
    color: #1b1b1b;
    margin: 0
}

.base .problemsec h2 .accent {
    text-transform: uppercase;
    color: #CC0B02
}

.base .problemsec .probtext {
    font-size: 18px;
    line-height: 1.6;
    color: #2a2a2a;
    margin: 0
}

.base .problemsec .probright {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.base .problemsec .probitem {
    background: #fff;
    border-radius: 28px;
    padding: 24px;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    align-items: start;
    box-shadow: -1px 5px 20px 0 #cc0b021a;
    transition: box-shadow .3s ease-in-out
}

.base .problemsec .probitem:hover {
    box-shadow: -1px 9px 36px 0 #cc0b021a
}

.base .problemsec .probitem .probicon {
    width: 48px;
    height: 48px;
    background: #CC0B02;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -1px 3px 3px 0 #cc0b0214;
    flex-shrink: 0
}

.base .problemsec .probitem .probicon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.base .problemsec .probitem h5 {
    font-size: 16px;
    font-weight: 600;
    color: #1b1b1b;
    margin: 0 0 4px;
    line-height: 1.6
}

.base .problemsec .probitem p {
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0
}

.base .standingsec {
    padding: 48px 0;
    background: #1b1b1b;
    position: relative;
    overflow: hidden
}

.base .standingsec .standinner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    flex-direction: column;
    gap: 48px
}

.base .standingsec .standtop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start
}

.base .standingsec h2 {
    font-size: 27px;
    line-height: 1.1;
    font-weight: 700;
    color: #F3F4E0;
    margin: 0
}

.base .standingsec h2 .accent {
    text-transform: uppercase;
    color: #31C4C0
}

.base .standingsec .standtext {
    font-size: 18px;
    line-height: 1.6;
    color: #c8c8b8;
    margin: 0
}

.base .standingsec .assocgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

.base .standingsec .assoccard {
    background: #f3f4e00f;
    border-radius: 28px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    box-shadow: -1px 3px 3px 0 #31c4c014;
    transition: background .32s ease-in-out, box-shadow .32s ease-in-out
}

.base .standingsec .assoccard:hover {
    background: #f3f4e01f;
    box-shadow: -1px 5px 20px 0 #31c4c01a
}

.base .standingsec .assoccard .associcon {
    width: 48px;
    height: 48px;
    background: #31C4C0;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -1px 5px 20px 0 #31c4c01a;
    flex-shrink: 0
}

.base .standingsec .assoccard .associcon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.base .standingsec .assoccard h5 {
    font-size: 16px;
    font-weight: 600;
    color: #F3F4E0;
    margin: 0;
    line-height: 1.6
}

.base .standingsec .assoccard p {
    font-size: 16px;
    line-height: 1.6;
    color: #a0a090;
    margin: 0
}

.base .standingsec .testimonials {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.base .standingsec .tcard {
    background: #f3f4e00f;
    border-radius: 28px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: -1px 3px 3px 0 #31c4c014;
    transition: background .28s ease-in-out
}

.base .standingsec .tcard:hover {
    background: #f3f4e01a
}

.base .standingsec .tcard .tquote {
    font-size: 18px;
    line-height: 1.6;
    color: #d8d8c8;
    margin: 0;
    font-style: italic
}

.base .standingsec .tcard .tauthor {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    align-items: center
}

.base .standingsec .tcard .tauthor img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    flex-shrink: 0
}

.base .standingsec .tcard .tauthor .tname {
    font-size: 16px;
    font-weight: 600;
    color: #F3F4E0;
    margin: 0
}

.base .standingsec .tcard .tauthor .trole {
    font-size: 16px;
    color: #a0a090;
    margin: 0
}

.base .standingsec .bganim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    animation: bgoscillate 7s ease-in-out infinite
}

@keyframes bgoscillate {

    0%,
    100% {
        background: #31c4c008
    }

    50% {
        background: #cc0b020a
    }
}

.base .standingsec .standinner {
    position: relative;
    z-index: 1
}

@media (max-width: 1024px) {
    .base .titleblock .textzone {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 48px 24px
    }

    .base .titleblock .textzone .rightcol {
        align-items: flex-start;
        text-align: left
    }

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

    .base .relationsec .relinner {
        grid-template-columns: 1fr;
        padding: 0 24px
    }

    .base .relationsec .sidebar {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px
    }

    .base .relationsec .sideitem {
        flex: 1 1 120px
    }

    .base .examplesec .exinner {
        padding: 0 24px
    }

    .base .examplesec .extop {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .base .examplesec .cards {
        grid-template-columns: 1fr 1fr
    }

    .base .adaptsec .adaptinner {
        padding: 0 24px
    }

    .base .adaptsec .adaptgrid {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .base .problemsec .probinner {
        grid-template-columns: 1fr;
        padding: 0 24px
    }

    .base .standingsec .standinner {
        padding: 0 24px
    }

    .base .standingsec .standtop {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .base .standingsec .assocgrid {
        grid-template-columns: repeat(2, 1fr)
    }

    .base .standingsec .testimonials {
        grid-template-columns: 1fr
    }
}

@media (max-width: 768px) {
    .base .titleblock .imagezone {
        min-height: 280px
    }

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

    .base .titleblock .textzone {
        padding: 24px 16px
    }

    .base .relationsec {
        padding: 24px 0
    }

    .base .relationsec .relinner {
        padding: 0 16px
    }

    .base .examplesec {
        padding: 24px 0
    }

    .base .examplesec .exinner {
        padding: 0 16px;
        gap: 24px
    }

    .base .examplesec .cards {
        grid-template-columns: 1fr
    }

    .base .adaptsec {
        padding: 24px 0
    }

    .base .adaptsec .adaptinner {
        padding: 0 16px
    }

    .base .problemsec {
        padding: 24px 0
    }

    .base .problemsec .probinner {
        padding: 0 16px;
        gap: 24px
    }

    .base .standingsec {
        padding: 24px 0
    }

    .base .standingsec .standinner {
        padding: 0 16px;
        gap: 24px
    }

    .base .standingsec .assocgrid {
        grid-template-columns: 1fr 1fr
    }
}

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

    .base .standingsec .assocgrid {
        grid-template-columns: 1fr
    }

    .base .adaptsec .step {
        grid-template-columns: 1fr
    }

    .base .adaptsec .step .stepnum {
        width: 32px;
        height: 32px;
        font-size: 16px
    }
}

.services {
    overflow-x: hidden
}

.services .parallax-img {
    transition: transform .38s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform
}

.services .strokes {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: absolute;
    pointer-events: none
}

.services .strokes span {
    display: block;
    height: 2px;
    background: #CC0B02;
    opacity: .18;
    border-radius: 0
}

.services .wave-divider {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    pointer-events: none
}

.services .titleblock {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 0;
    position: relative;
    align-items: start
}

.services .titleblock .imgside {
    position: relative;
    overflow: hidden
}

.services .titleblock .imgside img {
    width: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    filter: sepia(0.35) contrast(1.08) brightness(0.96) saturate(0.85);
    transition: filter .36s ease-in-out
}

.services .titleblock .imgside:hover img {
    filter: sepia(0.18) contrast(1.04) brightness(1.0) saturate(0.95)
}

.services .titleblock .circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden
}

.services .titleblock .circles span {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid #CC0B02;
    opacity: .1
}

.services .titleblock .circles span:nth-child(1) {
    width: 180px;
    height: 180px;
    top: -40px;
    right: -40px
}

.services .titleblock .circles span:nth-child(2) {
    width: 90px;
    height: 90px;
    bottom: 60px;
    right: 30px
}

.services .titleblock .circles span:nth-child(3) {
    width: 260px;
    height: 260px;
    bottom: -80px;
    left: -60px;
    border-color: #31C4C0
}

.services .titleblock .textside {
    padding: 48px 0 48px 48px;
    position: relative
}

.services .titleblock .textside .strokes {
    top: 48px;
    right: 0
}

.services .titleblock .textside .strokes span:nth-child(1) {
    width: 48px
}

.services .titleblock .textside .strokes span:nth-child(2) {
    width: 32px
}

.services .titleblock .textside .strokes span:nth-child(3) {
    width: 40px
}

.services .titleblock .textside .strokes span:nth-child(4) {
    width: 24px
}

.services .titleblock .textside .eyebrow {
    font-size: 16px;
    line-height: 1.6;
    color: #31C4C0;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 16px;
    display: block
}

.services .titleblock .textside h1 {
    font-size: 68px;
    line-height: 1.1;
    font-weight: 800;
    color: #1a1200;
    margin: 0 0 24px;
    color: #2a1500
}

.services .titleblock .textside h1 .accent {
    color: #CC0B02;
    text-transform: uppercase
}

.services .titleblock .textside .lead {
    font-size: 18px;
    line-height: 1.6;
    color: #3d3520;
    margin-bottom: 24px;
    max-width: 440px
}

.services .titleblock .textside .tagline {
    font-size: 16px;
    line-height: 1.6;
    color: #5a5040;
    border-top: 1.5px solid #F3F4E0;
    padding-top: 16px;
    max-width: 440px
}

.services .titleblock .textside .cta-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-top: 24px;
    align-items: center;
    flex-wrap: wrap
}

.services .titleblock .textside .btn-primary {
    background: #CC0B02;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 16px;
    line-height: 1.6;
    padding: 16px 24px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: -1px 5px 20px 0 #cc0b021a;
    transition: background .28s ease-in-out, box-shadow .32s ease-in-out;
    position: relative;
    overflow: hidden
}

.services .titleblock .textside .btn-primary:hover {
    background: #a80901;
    box-shadow: -1px 9px 36px 0 #cc0b021a
}

.services .titleblock .textside .btn-primary:focus-visible {
    outline: 2px solid #CC0B02;
    outline-offset: 3px
}

.services .titleblock .textside .btn-primary.shake {
    animation: shakebtn .32s ease-in-out
}

@keyframes shakebtn {

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

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

    50% {
        transform: translateX(5px)
    }

    75% {
        transform: translateX(-3px)
    }
}

.services .titleblock .textside .btn-secondary {
    background: transparent;
    color: #CC0B02;
    border: 1.5px solid #CC0B02;
    border-radius: 3px;
    font-size: 16px;
    line-height: 1.6;
    padding: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    transition: background .26s cubic-bezier(0.4, 0, 0.2, 1), color .26s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative
}

.services .titleblock .textside .btn-secondary:hover {
    background: #CC0B02;
    color: #fff
}

.services .titleblock .textside .btn-secondary:focus-visible {
    outline: 2px solid #CC0B02;
    outline-offset: 3px
}

.services .titleblock .textside .btn-secondary svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0
}

.services .titleblock .textside .hover-label {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #2a1500;
    color: #fff;
    font-size: 16px;
    line-height: 1.1;
    padding: 4px 8px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .27s ease-in-out
}

.services .titleblock .textside .btn-secondary:hover .hover-label,
.services .titleblock .textside .btn-secondary:focus-visible .hover-label {
    opacity: 1
}

.services .wavediv {
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    margin: 0
}

.services .wavediv svg {
    display: block;
    width: 100%
}

.services .detail {
    background: #CC0B02;
    padding: 48px 0 0;
    position: relative;
    overflow: hidden
}

.services .detail .bg-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden
}

.services .detail .bg-lines::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background-image: repeating-linear-gradient(45deg, #f3f4e00a 0px, #f3f4e00a 1px, transparent 1px, transparent 12px)
}

.services .detail .inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 48px;
    position: relative;
    z-index: 1
}

.services .detail .top-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 48px;
    align-items: start;
    margin-bottom: 48px
}

.services .detail .top-row .label-col h2 {
    font-size: 27px;
    line-height: 1.1;
    font-weight: 300;
    color: #F3F4E0;
    margin: 0 0 16px
}

.services .detail .top-row .label-col h2 strong {
    font-weight: 800;
    display: block;
    font-size: 27px
}

.services .detail .top-row .label-col .accent-bar {
    width: 48px;
    height: 3px;
    background: #F3F4E0;
    opacity: .5;
    border-radius: 0;
    margin-top: 16px
}

.services .detail .top-row .desc-col p {
    font-size: 18px;
    line-height: 1.6;
    color: #f3f4e0e6;
    margin: 0 0 16px
}

.services .detail .top-row .desc-col p:last-child {
    margin-bottom: 0
}

.services .detail .cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 48px
}

.services .detail .card {
    background: #f3f4e012;
    border-radius: 3px;
    padding: 24px;
    border: 1px solid #f3f4e01f;
    transition: background .29s ease-in-out, transform .33s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative
}

.services .detail .card:hover {
    background: #f3f4e021;
    transform: translateY(-4px)
}

.services .detail .card .card-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center
}

.services .detail .card .card-icon svg {
    width: 36px;
    height: 36px
}

.services .detail .card h4 {
    font-size: 18px;
    line-height: 1.1;
    font-weight: 700;
    color: #F3F4E0;
    margin: 0 0 8px
}

.services .detail .card p {
    font-size: 16px;
    line-height: 1.6;
    color: #f3f4e0cc;
    margin: 0
}

.services .detail .card .num {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 27px;
    line-height: 1.1;
    font-weight: 800;
    color: #f3f4e01a
}

.services .detail .media-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    align-items: start
}

.services .detail .media-row .imgwrap {
    position: relative;
    overflow: hidden;
    border-radius: 3px
}

.services .detail .media-row .imgwrap img {
    width: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .37s cubic-bezier(0.4, 0, 0.2, 1);
    filter: sepia(0.2) contrast(1.05) brightness(0.88) saturate(0.80)
}

.services .detail .media-row .imgwrap:hover img {
    transform: scale(1.04)
}

.services .detail .media-row .imgwrap .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 24px 16px 16px;
    background: linear-gradient(to top, #cc0b02b3, transparent);
    pointer-events: none
}

.services .detail .media-row .imgwrap .overlay span {
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
    font-weight: 600
}

.services .detail .media-row .stat-col {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.services .detail .media-row .stat-box {
    background: #f3f4e017;
    border-radius: 3px;
    padding: 24px;
    border: 1px solid #f3f4e01f;
    transition: background .31s ease-in-out
}

.services .detail .media-row .stat-box:hover {
    background: #f3f4e026
}

.services .detail .media-row .stat-box .stat-num {
    font-size: 68px;
    line-height: 1.1;
    font-weight: 800;
    color: #F3F4E0;
    display: block;
    opacity: 0;
    animation: fadenum .8s cubic-bezier(0.4, 0, 0.2, 1) .4s forwards
}

.services .detail .media-row .stat-box:nth-child(2) .stat-num {
    animation-delay: .55s
}

.services .detail .media-row .stat-box:nth-child(3) .stat-num {
    animation-delay: .7s
}

@keyframes fadenum {
    from {
        opacity: 0;
        transform: translateY(12px);
        color: #31C4C0
    }

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

.services .detail .media-row .stat-box .stat-label {
    font-size: 16px;
    line-height: 1.6;
    color: #f3f4e0bf;
    display: block;
    margin-top: 4px
}

.services .detail .media-row .cta-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: space-between;
    align-items: flex-end;
    text-align: right
}

.services .detail .media-row .cta-col h3 {
    font-size: 27px;
    line-height: 1.1;
    font-weight: 300;
    color: #F3F4E0;
    margin: 0
}

.services .detail .media-row .cta-col h3 strong {
    font-weight: 800;
    display: block
}

.services .detail .media-row .cta-col p {
    font-size: 16px;
    line-height: 1.6;
    color: #f3f4e0cc;
    margin: 0
}

.services .detail .media-row .cta-col .btn-light {
    background: #F3F4E0;
    color: #CC0B02;
    border: none;
    border-radius: 3px;
    font-size: 16px;
    line-height: 1.6;
    padding: 16px 24px;
    cursor: pointer;
    font-weight: 700;
    box-shadow: -1px 5px 20px 0 #cc0b021a;
    transition: background .27s ease-in-out, color .27s ease-in-out;
    white-space: nowrap;
    position: relative
}

.services .detail .media-row .cta-col .btn-light:hover {
    background: #fff;
    color: #a80901
}

.services .detail .media-row .cta-col .btn-light:focus-visible {
    outline: 2px solid #F3F4E0;
    outline-offset: 3px
}

.services .detail .media-row .cta-col .btn-light.shake {
    animation: shakebtn .32s ease-in-out
}

.services .detail .media-row .cta-col .link-subtle {
    font-size: 16px;
    line-height: 1.6;
    color: #f3f4e0b3;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .26s ease-in-out
}

.services .detail .media-row .cta-col .link-subtle:hover {
    color: #F3F4E0
}

.services .detail .consultants {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid #f3f4e026
}

.services .detail .consultants .consultant {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
    background: #f3f4e00f;
    border-radius: 3px;
    padding: 24px;
    border: 1px solid #f3f4e01a;
    transition: background .3s cubic-bezier(0.4, 0, 0.2, 1)
}

.services .detail .consultants .consultant:hover {
    background: #f3f4e01c
}

.services .detail .consultants .consultant .portrait {
    width: 80px;
    height: 107px;
    overflow: hidden;
    border-radius: 0;
    flex-shrink: 0
}

.services .detail .consultants .consultant .portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block
}

.services .detail .consultants .consultant .info h5 {
    font-size: 18px;
    line-height: 1.1;
    font-weight: 700;
    color: #F3F4E0;
    margin: 0 0 4px
}

.services .detail .consultants .consultant .info .role {
    font-size: 16px;
    line-height: 1.6;
    color: #31C4C0;
    font-weight: 600;
    display: block;
    margin-bottom: 8px
}

.services .detail .consultants .consultant .info p {
    font-size: 16px;
    line-height: 1.6;
    color: #f3f4e0c7;
    margin: 0
}

.services .detail .consultants .consultant .info .quote {
    font-size: 16px;
    line-height: 1.6;
    color: #f3f4e099;
    font-style: italic;
    margin-top: 8px;
    display: block
}

@media (max-width: 1024px) {
    .services .titleblock {
        grid-template-columns: 1fr 1fr;
        padding: 24px 16px 0
    }

    .services .titleblock .textside {
        padding: 24px 0 24px 24px
    }

    .services .titleblock .textside h1 {
        font-size: 48px
    }

    .services .detail .cards-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .services .detail .media-row {
        grid-template-columns: 1fr 1fr
    }

    .services .detail .media-row .imgwrap {
        display: none
    }
}

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

    .services .titleblock .imgside {
        max-height: 320px;
        overflow: hidden
    }

    .services .titleblock .textside {
        padding: 24px 0
    }

    .services .titleblock .textside h1 {
        font-size: 48px
    }

    .services .detail .top-row {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .services .detail .cards-grid {
        grid-template-columns: 1fr 1fr
    }

    .services .detail .media-row {
        grid-template-columns: 1fr
    }

    .services .detail .media-row .cta-col {
        align-items: flex-start;
        text-align: left
    }

    .services .detail .consultants {
        grid-template-columns: 1fr
    }
}

@media (max-width: 480px) {
    .services .titleblock .textside h1 {
        font-size: 27px
    }

    .services .detail .cards-grid {
        grid-template-columns: 1fr
    }

    .services .detail .inner {
        padding: 0 16px 48px
    }

    .services .detail .top-row {
        margin-bottom: 24px
    }
}

.successPage {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: #F3F4E0
}

.successPage .card {
    background: #fff;
    border-radius: 28px;
    padding: 48px;
    max-width: 560px;
    width: 100%;
    box-shadow: -1px 9px 36px 0 #cc0b021a;
    text-align: center
}

.successPage .card .iconWrap {
    width: 72px;
    height: 72px;
    border-radius: 28px;
    background: linear-gradient(circle at 0% 100%, #31c4c02e, transparent 70%);
    border: 2px solid #31c4c059;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px
}

.successPage .card .iconWrap svg {
    display: block
}

.successPage .card .heading {
    font-size: 27px;
    line-height: 1.1;
    font-weight: 700;
    color: #1b1b1b;
    margin: 0 0 16px
}

.successPage .card .heading span {
    color: #CC0B02;
    text-transform: uppercase
}

.successPage .card .desc {
    font-size: 18px;
    line-height: 1.6;
    color: #3a3a3a;
    margin: 0 0 24px
}

.successPage .card .note {
    font-size: 16px;
    line-height: 1.6;
    color: #5c5c5c;
    background: #F3F4E0;
    border-radius: 3px;
    padding: 16px;
    margin: 0 0 48px
}

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

.successPage .card .actions .btnPrimary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #CC0B02;
    color: #fff;
    font-size: 16px;
    line-height: 1.1;
    font-weight: 600;
    padding: 16px 24px;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background .25s ease-in-out, box-shadow .28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -1px 5px 20px 0 #cc0b021a
}

.successPage .card .actions .btnPrimary:hover {
    background: #a80902;
    box-shadow: -1px 9px 36px 0 #cc0b021a
}

.successPage .card .actions .btnPrimary:focus-visible {
    outline: 2px solid #CC0B02;
    outline-offset: 3px
}

.successPage .card .actions .btnSecondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #31C4C0;
    font-size: 16px;
    line-height: 1.1;
    font-weight: 600;
    padding: 16px 24px;
    border-radius: 3px;
    border: 2px solid #31c4c066;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .32s ease-in-out, color .29s cubic-bezier(0.4, 0, 0.2, 1)
}

.successPage .card .actions .btnSecondary:hover {
    border-color: #31C4C0;
    color: #1fa8a5
}

.successPage .card .actions .btnSecondary:focus-visible {
    outline: 2px solid #31C4C0;
    outline-offset: 3px
}

.successPage .card .divider {
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, #31C4C0, transparent);
    border-radius: 3px;
    margin: 0 auto 24px
}

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

    .successPage .card {
        padding: 24px 16px
    }

    .successPage .card .heading {
        font-size: 21px
    }

    .successPage .card .actions {
        flex-direction: column
    }

    .successPage .card .actions .btnPrimary,
    .successPage .card .actions .btnSecondary {
        width: 100%;
        justify-content: center
    }
}