body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden
}

.layoutFrame {
    box-sizing: border-box
}

.topbar {
    box-sizing: border-box;
    background: linear-gradient(135deg, #fff 0%, #f5feff 100%);
    border-bottom: 1px solid #1edfeb26;
    box-shadow: 1px 5px 14px 0 #1edfeb14;
    position: relative;
    z-index: 100
}

.topbarInner {
    max-width: 1366px;
    margin: 0 auto;
    padding: 24px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    box-sizing: border-box
}

.brandmark {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0
}

.brandmarkImage {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border: 1px solid #fff;
    padding: 6px;
    background: #fdd5d11f;
    border-radius: 4px;
    box-shadow: 1px 1px 2px 0 #a9370c12
}

.brandmarkText {
    font-family: 'Fira Code', monospace;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.2;
    color: #A9370C;
    letter-spacing: -.02em
}

.menubar {
    display: flex;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end
}

.menuLink {
    font-family: 'Fira Code', monospace;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: #2d2d2d;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 36px;
    background: #1edfeb0a;
    border: 1px solid #1edfeb1f;
    transition: background-color .52s cubic-bezier(0.22, 1, 0.36, 1), border-color .48s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .56s cubic-bezier(0.22, 1, 0.36, 1);
    white-space: nowrap
}

.menuLink:hover {
    background: #1edfeb14;
    border-color: #1edfeb47;
    box-shadow: 1px 5px 14px 0 #1edfeb14
}

.menuLink:focus {
    outline: 2px dashed #1EDFEB;
    outline-offset: 3px
}

.noticeStrip {
    background: linear-gradient(90deg, #fdd5d140 0%, #fdd5d114 100%);
    padding: 12px 36px;
    border-top: 1px solid #a9370c1a
}

.noticeStripInner {
    max-width: 1366px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px
}

.noticeIcon {
    width: 18px;
    height: 18px;
    fill: #A9370C;
    flex-shrink: 0
}

.noticeText {
    font-family: 'Fira Code', monospace;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: #3d3d3d;
    letter-spacing: .02em
}

.noticeLink {
    color: #A9370C;
    text-decoration: underline;
    font-weight: 400;
    transition: color .44s ease-in-out
}

.noticeLink:hover {
    color: #1EDFEB
}

.basement {
    background: linear-gradient(180deg, #fafcfc 0%, #fff 100%);
    border-top: 1px solid #1edfeb26;
    padding: 72px 36px 36px;
    box-sizing: border-box
}

.basementInner {
    max-width: 1366px;
    margin: 0 auto;
    box-sizing: border-box
}

.basementGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 72px;
    margin-bottom: 72px
}

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

.basementHeading {
    font-family: 'Fira Code', monospace;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.2;
    color: #A9370C;
    margin: 0;
    letter-spacing: -.01em
}

.basementText {
    font-family: 'Fira Code', monospace;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: #3d3d3d;
    margin: 0
}

.basementTextStrong {
    font-weight: 400;
    color: #2d2d2d
}

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

.basementLinkItem {
    display: flex;
    align-items: center;
    gap: 12px
}

.basementLinkItemIcon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: #1EDFEB
}

.basementLinkText {
    font-family: 'Fira Code', monospace;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: #2d2d2d;
    text-decoration: none;
    transition: color .48s cubic-bezier(0.22, 1, 0.36, 1)
}

.basementLinkText:hover {
    color: #1EDFEB
}

.basementLinkText:focus {
    outline: 2px dashed #1EDFEB;
    outline-offset: 2px
}

.contactDetail {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.contactLabel {
    font-family: 'Fira Code', monospace;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: #A9370C;
    letter-spacing: .04em;
    text-transform: uppercase
}

.contactValue {
    font-family: 'Fira Code', monospace;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: #3d3d3d
}

.contactValueLink {
    color: #2d2d2d;
    text-decoration: none;
    transition: color .52s cubic-bezier(0.22, 1, 0.36, 1)
}

.contactValueLink:hover {
    color: #1EDFEB
}

.basementBrand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 36px 0 0;
    border-top: 1px solid #1edfeb26
}

.basementBrandImage {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border: 1px solid #fff;
    padding: 6px;
    background: #fdd5d11f;
    border-radius: 4px;
    box-shadow: 1px 1px 2px 0 #a9370c12
}

.basementCopyright {
    font-family: 'Fira Code', monospace;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: #6d6d6d;
    text-align: center
}

.basementLegal {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 24px
}

.basementLegalLink {
    font-family: 'Fira Code', monospace;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: #5d5d5d;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 4px;
    transition: color .46s ease-in-out, background-color .5s ease-in-out
}

.basementLegalLink:hover {
    color: #1EDFEB;
    background: #1edfeb0f
}

.basementLegalLink:focus {
    outline: 2px dashed #1EDFEB;
    outline-offset: 2px
}

.consentBanner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #fff 0%, #f5feff 100%);
    border-top: 2px solid #1EDFEB;
    box-shadow: 1px 10px 60px 0 #1edfeb1a;
    padding: 24px 36px;
    z-index: 1500;
    box-sizing: border-box;
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .64s cubic-bezier(0.22, 1, 0.36, 1), transform .64s cubic-bezier(0.22, 1, 0.36, 1)
}

.consentBanner.visible {
    opacity: 1;
    transform: translateY(0)
}

.consentBannerInner {
    max-width: 1366px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    flex-wrap: wrap
}

.consentTextBlock {
    flex: 1;
    min-width: 280px
}

.consentHeading {
    font-family: 'Fira Code', monospace;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.2;
    color: #A9370C;
    margin: 0 0 12px
}

.consentDescription {
    font-family: 'Fira Code', monospace;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: #3d3d3d;
    margin: 0
}

.consentPolicyLink {
    color: #A9370C;
    text-decoration: underline;
    font-weight: 400;
    transition: color .44s ease-in-out
}

.consentPolicyLink:hover {
    color: #1EDFEB
}

.consentActions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center
}

.consentBtn {
    font-family: 'Fira Code', monospace;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    padding: 12px 36px;
    border-radius: 36px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color .54s cubic-bezier(0.22, 1, 0.36, 1), border-color .48s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .6s cubic-bezier(0.22, 1, 0.36, 1), transform .42s ease-in-out;
    white-space: nowrap
}

.consentBtn:focus {
    outline: 2px dashed #1EDFEB;
    outline-offset: 3px
}

.consentBtnAccept {
    background: #1EDFEB;
    color: #0d0d0d;
    border-color: #1EDFEB
}

.consentBtnAccept:hover {
    background: #17c4cf;
    border-color: #17c4cf;
    box-shadow: 1px 5px 14px 0 #1edfeb14;
    transform: translateY(-1px)
}

.consentBtnDecline {
    background: transparent;
    color: #A9370C;
    border-color: #A9370C
}

.consentBtnDecline:hover {
    background: #a9370c14;
    border-color: #8a2e0a;
    box-shadow: 1px 5px 14px 0 #a9370c14
}

.consentBtnSettings {
    background: transparent;
    color: #5d5d5d;
    border-color: #1edfeb40;
    padding: 12px 24px
}

.consentBtnSettings:hover {
    background: #1edfeb0f;
    border-color: #1edfeb73
}

.consentPanel {
    display: none;
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid #1edfeb26;
    width: 100%
}

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

.consentToggleRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 24px;
    background: #fdd5d114;
    border-radius: 4px;
    border: 1px solid #a9370c1f
}

.consentToggleLabel {
    font-family: 'Fira Code', monospace;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: #2d2d2d
}

.consentToggleSwitch {
    position: relative;
    width: 52px;
    height: 28px;
    background: #e0e0e0;
    border-radius: 36px;
    cursor: pointer;
    transition: background-color .5s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0
}

.consentToggleSwitch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 36px;
    transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 1px 1px 2px 0 #a9370c12
}

.consentToggleSwitch.active {
    background: #1EDFEB
}

.consentToggleSwitch.active::after {
    transform: translateX(24px)
}

.consentPanelActions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    justify-content: flex-end
}

@media (max-width: 900px) {
    .topbarInner {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px
    }

    .menubar {
        width: 100%;
        justify-content: flex-start
    }

    .basementGrid {
        grid-template-columns: 1fr;
        gap: 48px
    }

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

    .consentActions {
        width: 100%;
        justify-content: stretch
    }

    .consentBtn {
        flex: 1
    }
}

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

    .noticeStrip {
        padding: 12px 24px
    }

    .basement {
        padding: 48px 24px 24px
    }

    .consentBanner {
        padding: 24px
    }

    .menubar {
        flex-direction: column;
        gap: 12px;
        align-items: stretch
    }

    .menuLink {
        text-align: center
    }

    .consentActions {
        flex-direction: column
    }

    .consentToggleRow {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }
}

.content-policy {
    max-width: 1366px;
    margin: 0 auto;
    padding: 72px 24px;
    background: #fff
}

.content-policy h1 {
    font-size: 68px;
    line-height: 1.2;
    margin: 0 0 36px;
    color: #0a0a0a
}

.content-policy h2 {
    font-size: 37px;
    line-height: 1.2;
    margin: 72px 0 24px;
    color: #1a1a1a
}

.content-policy h3 {
    font-size: 27px;
    line-height: 1.2;
    margin: 36px 0 12px;
    color: #2a2a2a
}

.content-policy h4 {
    font-size: 16px;
    line-height: 1.7;
    margin: 24px 0 12px;
    color: #3a3a3a;
    font-weight: 600
}

.content-policy h5 {
    font-size: 16px;
    line-height: 1.7;
    margin: 24px 0 6px;
    color: #4a4a4a;
    font-weight: 500
}

.content-policy h6 {
    font-size: 16px;
    line-height: 1.7;
    margin: 24px 0 6px;
    color: #5a5a5a;
    font-weight: 400
}

.content-policy p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 24px;
    color: #2a2a2a
}

.content-policy strong,
.content-policy b {
    font-weight: 600;
    color: #1a1a1a
}

.content-policy a {
    color: #A9370C;
    text-decoration: none;
    border-bottom: 1px solid #a9370c4d;
    transition: border-color .5s cubic-bezier(0.22, 1, 0.36, 1)
}

.content-policy a:hover {
    border-bottom-color: #A9370C
}

.content-policy table {
    width: 100%;
    border-collapse: collapse;
    margin: 36px 0;
    font-size: 16px;
    line-height: 1.7
}

.content-policy thead {
    background: #f5f5f5
}

.content-policy th {
    padding: 12px 24px;
    text-align: left;
    font-weight: 600;
    color: #1a1a1a;
    border-bottom: 2px solid #d5d5d5
}

.content-policy td {
    padding: 12px 24px;
    color: #2a2a2a;
    border-bottom: 1px solid #e5e5e5
}

.content-policy tbody tr:last-child td {
    border-bottom: none
}

.content-policy hr {
    border: none;
    height: 1px;
    background: #d5d5d5;
    margin: 72px 0
}

.content-policy div {
    margin: 24px 0
}

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

    .content-policy h1 {
        font-size: 37px;
        margin: 0 0 24px
    }

    .content-policy h2 {
        font-size: 27px;
        margin: 36px 0 12px
    }

    .content-policy h3 {
        font-size: 16px;
        margin: 24px 0 12px;
        font-weight: 600
    }

    .content-policy table {
        font-size: 16px
    }

    .content-policy th,
    .content-policy td {
        padding: 6px 12px
    }
}

.postview {
    background: #fff;
    color: #1a1a1a;
    max-width: 1366px;
    margin: 0 auto;
    position: relative;
    overflow-x: clip
}

.postview::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, #1edfeb05 2px, #1edfeb05 4px);
    pointer-events: none;
    z-index: 1;
    animation: scanlineDrift 8s linear infinite
}

@keyframes scanlineDrift {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(4px)
    }
}

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

.postview .topintro {
    background: linear-gradient(127deg, #1a1a1a 0%, #1a1a1a 48%, #2d2d2d 48%, #2d2d2d 100%);
    padding: 72px 24px;
    position: relative;
    border-bottom: 2px solid #1EDFEB;
    z-index: 2
}

.postintrohold {
    max-width: 920px;
    margin: 0 auto
}

.posth1 {
    font-size: 68px;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 24px;
    letter-spacing: -.02em
}

.posth1 .punctmark {
    color: #1EDFEB
}

.viewcount {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #ffffff14;
    padding: 6px 24px;
    border-radius: 36px;
    font-size: 16px;
    line-height: 1.7;
    color: #FDD5D1
}

.viewcount svg {
    width: 18px;
    height: 18px;
    fill: #1EDFEB
}

.postview .maincontent {
    padding: 72px 24px;
    background: #fff;
    position: relative;
    z-index: 2
}

.maincontent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: #fafafa;
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%)
}

.contenthold {
    max-width: 920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px
}

.leadimg {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: 1px 10px 60px 0 #1edfeb1a
}

.leadimg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(127deg, #1edfeb26 0%, #a9370c26 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .55s cubic-bezier(0.22, 1, 0.36, 1)
}

.leadimg:hover::after {
    opacity: 1
}

.leadimg img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    opacity: 0;
    animation: fadeInImage .6s ease-in-out .2s forwards
}

@keyframes fadeInImage {
    to {
        opacity: 1
    }
}

.articlebody {
    font-size: 16px;
    line-height: 1.7;
    color: #2d2d2d
}

.articlebody p {
    margin: 0 0 24px
}

.articlebody p:first-of-type {
    font-size: 27px;
    line-height: 1.7;
    color: #1a1a1a;
    margin-bottom: 36px
}

.articlebody h2 {
    font-size: 37px;
    line-height: 1.2;
    color: #1a1a1a;
    margin: 72px 0 24px;
    font-style: italic
}

.articlebody h3 {
    font-size: 27px;
    line-height: 1.2;
    color: #1a1a1a;
    margin: 36px 0 24px
}

.articlebody em {
    font-style: italic;
    color: #A9370C
}

.articlebody code {
    background: #f5f5f5;
    padding: 6px 12px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 16px;
    color: #1a1a1a;
    display: inline-block
}

.articlebody table {
    width: 100%;
    border-collapse: collapse;
    margin: 36px 0;
    border: 1px solid #e5e5e5
}

.articlebody thead {
    background: #f5f5f5
}

.articlebody th {
    padding: 12px 24px;
    text-align: left;
    font-size: 16px;
    line-height: 1.7;
    color: #1a1a1a;
    border-bottom: 2px solid #1EDFEB
}

.articlebody td {
    padding: 12px 24px;
    font-size: 16px;
    line-height: 1.7;
    color: #2d2d2d;
    border-bottom: 1px solid #e5e5e5
}

.articlebody tbody tr:hover {
    background: #fafafa
}

.articlebody details {
    margin: 24px 0;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 24px;
    background: #fafafa
}

.articlebody summary {
    font-size: 16px;
    line-height: 1.7;
    color: #1a1a1a;
    cursor: pointer;
    font-weight: 600;
    transition: color .45s cubic-bezier(0.22, 1, 0.36, 1)
}

.articlebody summary:hover {
    color: #1EDFEB
}

.articlebody a {
    color: #A9370C;
    text-decoration: none;
    background: linear-gradient(90deg, #1EDFEB 0%, #1EDFEB 33%, #A9370C 33%, #A9370C 66%, #FDD5D1 66%, #FDD5D1 100%);
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .5s cubic-bezier(0.22, 1, 0.36, 1)
}

.articlebody a:hover {
    background-size: 100% 100%;
    color: #1a1a1a
}

.postview .utilbar {
    padding: 72px 24px;
    background: #fff;
    border-top: 2px solid #A9370C;
    position: relative;
    z-index: 2
}

.utilhold {
    max-width: 920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px
}

.sharecard {
    background: #fff;
    padding: 36px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    position: relative;
    box-shadow: 8px 8px 0 0 #a9370c26;
    transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .6s cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
    max-width: 480px
}

.sharecard:hover {
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0 0 #a9370c40
}

.sharelabel {
    font-size: 27px;
    line-height: 1.2;
    color: #1a1a1a;
    margin: 0 0 24px;
    text-align: center
}

.copybtn {
    width: 100%;
    padding: 12px 36px;
    background: #1a1a1a;
    color: #fff;
    border: 2px solid #1a1a1a;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.7;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background .5s cubic-bezier(0.22, 1, 0.36, 1), color .5s cubic-bezier(0.22, 1, 0.36, 1)
}

.copybtn::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 0;
    height: calc(100% + 4px);
    border-left: 2px solid #1EDFEB;
    border-top: 2px solid #1EDFEB;
    transition: width .4s cubic-bezier(0.22, 1, 0.36, 1)
}

.copybtn::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 0;
    height: calc(100% + 4px);
    border-right: 2px solid #1EDFEB;
    border-bottom: 2px solid #1EDFEB;
    transition: width .4s cubic-bezier(0.22, 1, 0.36, 1) .2s
}

.copybtn:hover::before,
.copybtn:hover::after {
    width: calc(100% + 4px)
}

.copybtn:hover {
    background: #fff;
    color: #1a1a1a
}

.copybtn:active {
    transform: scale(0.98)
}

.postview .keyterms {
    padding: 72px 24px;
    background: linear-gradient(217deg, #f5f5f5 0%, #f5f5f5 52%, #fff 52%, #fff 100%);
    position: relative;
    z-index: 2
}

.keyhold {
    max-width: 920px;
    margin: 0 auto
}

.keyh2 {
    font-size: 37px;
    line-height: 1.2;
    color: #1a1a1a;
    margin: 0 0 36px;
    text-align: center
}

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

.termbox {
    background: #fff;
    padding: 24px;
    border-radius: 4px;
    border-top: 3px solid #1EDFEB;
    border-bottom: 3px solid #A9370C;
    position: relative;
    transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1)
}

.termbox:hover {
    transform: translateY(-6px)
}

.termtitle {
    font-size: 16px;
    line-height: 1.7;
    color: #A9370C;
    margin: 0 0 12px;
    font-weight: 600
}

.termdesc {
    font-size: 16px;
    line-height: 1.7;
    color: #2d2d2d;
    margin: 0
}

@media (max-width: 1024px) {
    .posth1 {
        font-size: 37px
    }

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

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

    .posth1 {
        font-size: 27px
    }

    .postview .maincontent {
        padding: 36px 24px
    }

    .articlebody p:first-of-type {
        font-size: 16px
    }

    .articlebody h2 {
        font-size: 27px;
        margin: 36px 0 24px
    }

    .articlebody h3 {
        font-size: 16px
    }

    .termgrid {
        grid-template-columns: 1fr
    }

    .keyh2 {
        font-size: 27px
    }

    .postview .utilbar {
        padding: 36px 24px
    }
}

.casestud {
    max-width: 1366px;
    margin: 0 auto;
    background: #fff;
    color: #2a2a2a
}

.casestud .topstrip {
    background: linear-gradient(180deg, #1EDFEB 0%, #1EDFEB 30%, #1edfeb00 100%);
    padding: 72px 24px 36px;
    position: relative;
    overflow: hidden
}

.casestud .topstrip::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 24px;
    width: 6px;
    height: 6px;
    background: #A9370C;
    border-radius: 50%;
    box-shadow: 24px 24px 0 #A9370C, 48px 12px 0 #A9370C, 72px 36px 0 #A9370C, 96px 24px 0 #A9370C, 120px 12px 0 #A9370C, 144px 36px 0 #A9370C
}

.casestud .topstrip::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 24px;
    width: 6px;
    height: 6px;
    background: #FDD5D1;
    border-radius: 50%;
    box-shadow: -24px 24px 0 #FDD5D1, -48px 12px 0 #FDD5D1, -72px 36px 0 #FDD5D1, -96px 24px 0 #FDD5D1, -120px 12px 0 #FDD5D1
}

.casestud .toptxt {
    max-width: 720px
}

.casestud .toptxt h1 {
    font-size: 68px;
    line-height: 1.2;
    margin: 0 0 12px;
    color: #2a2a2a
}

.casestud .toptxt h1 .accent {
    color: #A9370C
}

.casestud .toptxt .tagln {
    font-size: 27px;
    line-height: 1.7;
    margin: 0 0 24px;
    color: #4a4a4a
}

.casestud .topimg {
    max-width: 480px;
    margin: 24px 0 0;
    opacity: 0;
    transform: rotate(-2deg);
    animation: imgreveal 600ms cubic-bezier(0.22, 1, 0.36, 1) 400ms forwards
}

@keyframes imgreveal {
    to {
        opacity: 1;
        transform: rotate(0deg)
    }
}

.casestud .topimg img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%);
    border-radius: 4px;
    box-shadow: 1px 5px 14px 0 #1edfeb14
}

.casestud .toplinks {
    display: flex;
    gap: 24px;
    margin: 24px 0 0
}

.casestud .toplinks a {
    font-size: 16px;
    color: #2a2a2a;
    text-decoration: none;
    padding: 12px 24px;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    transition: border-color 500ms cubic-bezier(0.22, 1, 0.36, 1), color 500ms cubic-bezier(0.22, 1, 0.36, 1)
}

.casestud .toplinks a:hover {
    border-color: #1EDFEB;
    border-style: dashed;
    color: #1EDFEB
}

.casestud .divband1 {
    height: 6px;
    background: linear-gradient(90deg, #1EDFEB 0%, #1EDFEB 33%, #A9370C 33%, #A9370C 66%, #FDD5D1 66%, #FDD5D1 100%)
}

.casestud .gridstories {
    padding: 72px 24px;
    background: #fafbfc;
    position: relative
}

.casestud .gridstories::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(./visual_library/crew_02.jpg);
    background-size: cover;
    background-position: center;
    opacity: .04;
    pointer-events: none
}

.casestud .gridstories h2 {
    font-size: 37px;
    line-height: 1.2;
    margin: 0 0 36px;
    font-style: italic;
    color: #2a2a2a;
    position: relative;
    z-index: 1
}

.casestud .gridstories h2 .firstwd {
    color: #1EDFEB
}

.casestud .gridlayout {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 24px;
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: sectionfade 700ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards
}

@keyframes sectionfade {
    to {
        opacity: 1
    }
}

.casestud .largecard {
    grid-row: span 2;
    background: #fff;
    padding: 36px;
    border-radius: 36px;
    border-right: 2px solid #1EDFEB;
    box-shadow: 1px 10px 60px 0 #a9370c1a;
    transition: border-style 450ms ease-in-out
}

.casestud .largecard:hover {
    border-style: dashed
}

.casestud .largecard h3 {
    font-size: 27px;
    line-height: 1.2;
    margin: 0 0 12px;
    color: #2a2a2a
}

.casestud .largecard .metric {
    font-size: 68px;
    line-height: 1.2;
    color: #A9370C;
    margin: 0 0 12px;
    font-weight: 700
}

.casestud .largecard p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 24px;
    color: #4a4a4a
}

.casestud .largecard .detail {
    font-size: 16px;
    line-height: 1.7;
    color: #2a2a2a;
    margin: 0
}

.casestud .smallcard {
    background: #fff;
    padding: 24px;
    border-radius: 4px;
    border-right: 2px solid #FDD5D1;
    box-shadow: 1px 1px 2px 0 #1edfeb12;
    transition: border-style 500ms cubic-bezier(0.22, 1, 0.36, 1)
}

.casestud .smallcard:hover {
    border-style: dashed
}

.casestud .smallcard h4 {
    font-size: 16px;
    line-height: 1.2;
    margin: 0 0 6px;
    color: #1EDFEB;
    letter-spacing: .05em
}

.casestud .smallcard .num {
    font-size: 37px;
    line-height: 1.2;
    color: #2a2a2a;
    margin: 0 0 6px;
    font-weight: 700
}

.casestud .smallcard p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
    color: #4a4a4a
}

.casestud .divband2 {
    height: 6px;
    background: linear-gradient(90deg, #FDD5D1 0%, #FDD5D1 50%, #1EDFEB 50%, #1EDFEB 100%)
}

.casestud .colorzone {
    padding: 72px 24px;
    background: #fff;
    display: flex;
    gap: 36px;
    align-items: flex-start
}

.casestud .leftzone {
    flex: 1;
    background: #f0fdfe;
    padding: 36px;
    border-radius: 36px;
    border-right: 2px solid #1EDFEB;
    opacity: 0;
    transform: rotate(1deg);
    animation: zonereveal 600ms cubic-bezier(0.22, 1, 0.36, 1) 300ms forwards
}

@keyframes zonereveal {
    to {
        opacity: 1;
        transform: rotate(0deg)
    }
}

.casestud .leftzone h3 {
    font-size: 27px;
    line-height: 1.2;
    margin: 0 0 24px;
    color: #2a2a2a
}

.casestud .leftzone h3 .firstwd {
    color: #1EDFEB
}

.casestud .leftzone p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 24px;
    color: #4a4a4a
}

.casestud .leftzone .listpair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.casestud .leftzone ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.casestud .leftzone li {
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 12px;
    color: #2a2a2a;
    padding-left: 24px;
    position: relative
}

.casestud .leftzone li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 12px;
    height: 12px;
    background: #1EDFEB;
    border-radius: 50%
}

.casestud .rightzone {
    flex: 1;
    background: #fff5f4;
    padding: 36px;
    border-radius: 4px;
    border-right: 2px solid #A9370C;
    opacity: 0;
    transform: rotate(-1deg);
    animation: zonereveal 600ms cubic-bezier(0.22, 1, 0.36, 1) 500ms forwards
}

.casestud .rightzone h3 {
    font-size: 27px;
    line-height: 1.2;
    margin: 0 0 24px;
    color: #2a2a2a
}

.casestud .rightzone h3 .firstwd {
    color: #A9370C
}

.casestud .rightzone .imgwrap {
    margin: 0 0 24px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 1px 5px 14px 0 #a9370c14
}

.casestud .rightzone .imgwrap img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 600ms ease-in-out
}

.casestud .rightzone .imgwrap img[src] {
    opacity: 1
}

.casestud .rightzone p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 12px;
    color: #4a4a4a
}

.casestud .rightzone .highlight {
    background: #FDD5D1;
    padding: 24px;
    border-radius: 4px;
    margin: 24px 0 0
}

.casestud .rightzone .highlight h5 {
    font-size: 16px;
    line-height: 1.2;
    margin: 0 0 6px;
    color: #A9370C;
    letter-spacing: .05em
}

.casestud .rightzone .highlight p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
    color: #2a2a2a
}

.casestud .divband3 {
    height: 6px;
    background: linear-gradient(90deg, #A9370C 0%, #A9370C 25%, #FDD5D1 25%, #FDD5D1 75%, #1EDFEB 75%, #1EDFEB 100%)
}

.casestud .procon {
    padding: 72px 24px;
    background: #fafbfc;
    position: relative;
    overflow: hidden
}

.casestud .procon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(./visual_library/280426_crew_1_5.jpg);
    background-size: cover;
    background-position: center;
    opacity: .03;
    pointer-events: none;
    filter: blur(4px)
}

.casestud .procon h2 {
    font-size: 37px;
    line-height: 1.2;
    margin: 0 0 36px;
    color: #2a2a2a;
    position: relative;
    z-index: 1
}

.casestud .procon h2 .firstwd {
    color: #A9370C
}

.casestud .procongrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: sectionfade 700ms cubic-bezier(0.22, 1, 0.36, 1) 400ms forwards
}

.casestud .probox {
    background: #e8fcfd;
    padding: 36px;
    border-radius: 36px;
    border-right: 2px solid #1EDFEB;
    box-shadow: 1px 10px 60px 0 #1edfeb1a;
    transition: border-style 600ms cubic-bezier(0.22, 1, 0.36, 1)
}

.casestud .probox:hover {
    border-style: dashed
}

.casestud .probox h3 {
    font-size: 27px;
    line-height: 1.2;
    margin: 0 0 24px;
    color: #1EDFEB;
    display: flex;
    align-items: center;
    gap: 12px
}

.casestud .probox h3::before {
    content: '';
    width: 24px;
    height: 24px;
    background: #1EDFEB;
    border-radius: 50%;
    flex-shrink: 0
}

.casestud .probox ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.casestud .probox li {
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 12px;
    color: #2a2a2a;
    padding-left: 24px;
    position: relative
}

.casestud .probox li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 0;
    height: 0;
    border-left: 6px solid #1EDFEB;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent
}

.casestud .conbox {
    background: #fff0ee;
    padding: 36px;
    border-radius: 4px;
    border-right: 2px solid #A9370C;
    box-shadow: 1px 5px 14px 0 #a9370c14;
    transition: border-style 600ms cubic-bezier(0.22, 1, 0.36, 1)
}

.casestud .conbox:hover {
    border-style: dashed
}

.casestud .conbox h3 {
    font-size: 27px;
    line-height: 1.2;
    margin: 0 0 24px;
    color: #A9370C;
    display: flex;
    align-items: center;
    gap: 12px
}

.casestud .conbox h3::before {
    content: '';
    width: 24px;
    height: 24px;
    background: #A9370C;
    flex-shrink: 0;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)
}

.casestud .conbox ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.casestud .conbox li {
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 12px;
    color: #2a2a2a;
    padding-left: 24px;
    position: relative
}

.casestud .conbox li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 12px;
    height: 2px;
    background: #A9370C
}

.casestud .procon .summary {
    margin: 36px 0 0;
    padding: 36px;
    background: #fff;
    border-radius: 36px;
    box-shadow: 1px 10px 60px 0 #1edfeb1a;
    position: relative;
    z-index: 1
}

.casestud .procon .summary h4 {
    font-size: 27px;
    line-height: 1.2;
    margin: 0 0 12px;
    color: #2a2a2a;
    font-style: italic
}

.casestud .procon .summary p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
    color: #4a4a4a
}

.casestud .procon .summary p a {
    color: #1EDFEB;
    text-decoration: none;
    position: relative;
    background: linear-gradient(90deg, #1EDFEB 0%, #1EDFEB 50%, #A9370C 50%, #A9370C 100%);
    background-size: 100% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 2px;
    transition: background-size 400ms cubic-bezier(0.22, 1, 0.36, 1)
}

.casestud .procon .summary p a:hover {
    background-size: 100% 3px
}

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

    .casestud .largecard {
        grid-column: span 2;
        grid-row: span 1
    }

    .casestud .colorzone {
        flex-direction: column
    }

    .casestud .procongrid {
        grid-template-columns: 1fr
    }
}

@media (max-width: 768px) {
    .casestud .toptxt h1 {
        font-size: 37px
    }

    .casestud .toptxt .tagln {
        font-size: 16px
    }

    .casestud .toplinks {
        flex-direction: column
    }

    .casestud .gridlayout {
        grid-template-columns: 1fr
    }

    .casestud .largecard {
        grid-column: span 1
    }

    .casestud .leftzone .listpair {
        grid-template-columns: 1fr
    }

    .casestud .gridstories h2,
    .casestud .procon h2,
    .casestud .leftzone h3,
    .casestud .rightzone h3,
    .casestud .probox h3,
    .casestud .conbox h3,
    .casestud .procon .summary h4 {
        font-size: 27px
    }

    .casestud .largecard .metric {
        font-size: 37px
    }
}

@media (max-width: 480px) {
    .casestud .topstrip {
        padding: 36px 12px 24px
    }

    .casestud .gridstories,
    .casestud .colorzone,
    .casestud .procon {
        padding: 36px 12px
    }

    .casestud .leftzone,
    .casestud .rightzone,
    .casestud .probox,
    .casestud .conbox,
    .casestud .procon .summary {
        padding: 24px
    }
}

.authprof {
    max-width: 1366px;
    margin: 0 auto;
    background: #fff
}

.authprof .leadwrap {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 72px;
    padding: 72px 36px;
    align-items: start;
    position: relative
}

.authprof .leadwrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(90deg, #1edfeb08 1px, transparent 1px), linear-gradient(0deg, #1edfeb08 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0
}

.authprof .leadcol {
    position: relative;
    z-index: 1
}

.authprof .leadcol.text {
    padding: 36px 0
}

.authprof .leadcol.visual {
    position: relative
}

.authprof .leadimg {
    width: 100%;
    height: 620px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    opacity: 0;
    animation: imgfadein .6s cubic-bezier(0.22, 1, 0.36, 1) .2s forwards;
    position: relative
}

.authprof .leadimg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(0deg, #00000008 0px, transparent 1px, transparent 2px, #00000008 3px);
    pointer-events: none;
    mix-blend-mode: overlay
}

@keyframes imgfadein {
    to {
        opacity: 1
    }
}

.authprof .leadtitle {
    font-size: 68px;
    line-height: 1.2;
    color: #0a0a0a;
    margin: 0 0 24px;
    letter-spacing: -.02em
}

.authprof .leadintro {
    font-size: 27px;
    line-height: 1.7;
    color: #2a2a2a;
    margin: 0
}

.authprof .zigzagdiv {
    height: 36px;
    position: relative;
    overflow: hidden
}

.authprof .zigzagdiv svg {
    width: 100%;
    height: 100%;
    display: block
}

.authprof .journeyblock {
    padding: 72px 36px;
    background: linear-gradient(162deg, #fff 0%, #fff 45%, #FDD5D1 45%, #FDD5D1 100%);
    position: relative
}

.authprof .journeygrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
    max-width: 1200px;
    margin: 0 auto
}

.authprof .journeyhead {
    font-size: 37px;
    line-height: 1.2;
    color: #0a0a0a;
    margin: 0 0 36px;
    grid-column: 1 / -1
}

.authprof .journeycard {
    background: #fff;
    padding: 36px;
    border-radius: 36px;
    box-shadow: 1px 5px 14px 0 #1edfeb14;
    position: relative;
    overflow: hidden;
    transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .5s cubic-bezier(0.22, 1, 0.36, 1)
}

.authprof .journeycard:hover {
    transform: translateY(-6px);
    box-shadow: 1px 10px 60px 0 #1edfeb1a
}

.authprof .journeycard::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 80% 20%, #a9370c0a 0%, transparent 50%);
    pointer-events: none
}

.authprof .cardnum {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 42px;
    height: 42px;
    background: #1EDFEB;
    color: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 1px 1px 2px 0 #1edfeb12
}

.authprof .cardtitle {
    font-size: 27px;
    line-height: 1.2;
    color: #0a0a0a;
    margin: 0 0 12px;
    font-style: italic
}

.authprof .cardbody {
    font-size: 16px;
    line-height: 1.7;
    color: #3a3a3a;
    margin: 0
}

.authprof .steptrack {
    padding: 72px 36px;
    background: #fff
}

.authprof .stepinner {
    max-width: 1100px;
    margin: 0 auto
}

.authprof .stephead {
    font-size: 37px;
    line-height: 1.2;
    color: #0a0a0a;
    margin: 0 0 72px;
    text-align: center
}

.authprof .steplist {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    gap: 24px
}

.authprof .steplist::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 60px;
    right: 60px;
    height: 3px;
    background: linear-gradient(90deg, #1EDFEB 0%, #1EDFEB 33%, #A9370C 33%, #A9370C 66%, #FDD5D1 66%);
    z-index: 0
}

.authprof .stepitem {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1
}

.authprof .stepcirc {
    width: 60px;
    height: 60px;
    border-radius: 36px;
    background: #fff;
    border: 4px solid #1EDFEB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    font-weight: 700;
    color: #1EDFEB;
    margin: 0 0 24px;
    transition: background .6s cubic-bezier(0.22, 1, 0.36, 1), color .6s cubic-bezier(0.22, 1, 0.36, 1), border-color .6s cubic-bezier(0.22, 1, 0.36, 1)
}

.authprof .stepitem:nth-child(2) .stepcirc {
    border-color: #A9370C;
    color: #A9370C
}

.authprof .stepitem:nth-child(3) .stepcirc {
    border-color: #A9370C;
    color: #A9370C
}

.authprof .stepitem:nth-child(4) .stepcirc {
    border-color: #FDD5D1;
    color: #A9370C
}

.authprof .stepitem:hover .stepcirc {
    background: #1EDFEB;
    color: #fff;
    border-color: #1EDFEB
}

.authprof .stepitem:nth-child(2):hover .stepcirc {
    background: #A9370C;
    border-color: #A9370C
}

.authprof .stepitem:nth-child(3):hover .stepcirc {
    background: #A9370C;
    border-color: #A9370C
}

.authprof .stepitem:nth-child(4):hover .stepcirc {
    background: #A9370C;
    border-color: #A9370C
}

.authprof .steplabel {
    font-size: 16px;
    line-height: 1.7;
    color: #2a2a2a;
    text-align: center;
    margin: 0
}

.authprof .steplabel strong {
    display: block;
    font-size: 27px;
    line-height: 1.2;
    color: #0a0a0a;
    margin: 0 0 6px
}

.authprof .centerdiv {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.authprof .centerdiv::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #1EDFEB 20%, #A9370C 50%, #1EDFEB 80%, transparent 100%);
    transform: translateY(-50%)
}

.authprof .centerdeco {
    width: 48px;
    height: 48px;
    background: #fff;
    border: 3px solid #1EDFEB;
    border-radius: 36px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

.authprof .centerdeco::before {
    content: '';
    width: 16px;
    height: 16px;
    background: #A9370C;
    border-radius: 36px
}

.authprof .valuesec {
    padding: 72px 36px;
    background: #fff;
    position: relative;
    overflow: hidden
}

.authprof .valuesec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fdd5d126;
    backdrop-filter: blur(80px);
    z-index: 0
}

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

.authprof .valuetop {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 72px;
    align-items: center;
    margin: 0 0 72px
}

.authprof .valuehead {
    font-size: 37px;
    line-height: 1.2;
    color: #0a0a0a;
    margin: 0
}

.authprof .valueimg {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 36px;
    display: block;
    box-shadow: 1px 10px 60px 0 #a9370c1a;
    opacity: 0;
    animation: imgfadein .6s cubic-bezier(0.22, 1, 0.36, 1) .4s forwards
}

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

.authprof .valuebox {
    background: #fff;
    padding: 36px 24px;
    border-radius: 4px;
    box-shadow: 1px 1px 2px 0 #a9370c12;
    transition: box-shadow .55s ease-in-out;
    position: relative
}

.authprof .valuebox::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1EDFEB 0%, #A9370C 100%);
    opacity: 0;
    transition: opacity .55s ease-in-out
}

.authprof .valuebox:hover {
    box-shadow: 1px 5px 14px 0 #a9370c14
}

.authprof .valuebox:hover::before {
    opacity: 1
}

.authprof .valuetitle {
    font-size: 27px;
    line-height: 1.2;
    color: #0a0a0a;
    margin: 0 0 12px;
    font-style: italic
}

.authprof .valuedesc {
    font-size: 16px;
    line-height: 1.7;
    color: #3a3a3a;
    margin: 0
}

.authprof .approachsec {
    padding: 72px 36px;
    background: #fff
}

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

.authprof .approachhead {
    font-size: 37px;
    line-height: 1.2;
    color: #0a0a0a;
    margin: 0 0 36px
}

.authprof .approachflex {
    display: flex;
    gap: 36px;
    align-items: flex-start
}

.authprof .approachcol {
    flex: 1
}

.authprof .approachcol.wide {
    flex: 1.3
}

.authprof .approachimg {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    box-shadow: 1px 5px 14px 0 #1edfeb14;
    opacity: 0;
    animation: imgfadein .6s cubic-bezier(0.22, 1, 0.36, 1) .3s forwards;
    position: relative
}

.authprof .approachimg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #1edfeb14 0%, transparent 100%);
    pointer-events: none
}

.authprof .approachtext {
    font-size: 16px;
    line-height: 1.7;
    color: #2a2a2a;
    margin: 0 0 24px
}

.authprof .approachlist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
}

.authprof .approachlist li {
    font-size: 16px;
    line-height: 1.7;
    color: #3a3a3a;
    padding: 12px 12px 12px 36px;
    position: relative;
    background: #1edfeb08;
    border-radius: 4px
}

.authprof .approachlist li::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #A9370C;
    border-radius: 36px
}

.authprof .revealtxt {
    display: inline-block;
    opacity: 0;
    animation: wordreveal .4s cubic-bezier(0.22, 1, 0.36, 1) forwards
}

.authprof .revealtxt:nth-child(1) {
    animation-delay: .1s
}

.authprof .revealtxt:nth-child(2) {
    animation-delay: .2s
}

.authprof .revealtxt:nth-child(3) {
    animation-delay: .3s
}

.authprof .revealtxt:nth-child(4) {
    animation-delay: .4s
}

.authprof .revealtxt:nth-child(5) {
    animation-delay: .5s
}

@keyframes wordreveal {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

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

@media (max-width: 1024px) {
    .authprof .leadwrap {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 36px 24px
    }

    .authprof .leadimg {
        height: 480px
    }

    .authprof .leadtitle {
        font-size: 37px
    }

    .authprof .leadintro {
        font-size: 16px
    }

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

    .authprof .journeyblock {
        padding: 36px 24px
    }

    .authprof .journeyhead {
        font-size: 27px;
        margin: 0 0 24px
    }

    .authprof .steptrack {
        padding: 36px 24px
    }

    .authprof .stephead {
        font-size: 27px;
        margin: 0 0 36px
    }

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

    .authprof .steplist::before {
        display: none
    }

    .authprof .stepcirc {
        margin: 0 auto 12px
    }

    .authprof .valuetop {
        grid-template-columns: 1fr;
        gap: 36px;
        margin: 0 0 36px
    }

    .authprof .valuegrid {
        grid-template-columns: 1fr
    }

    .authprof .valuesec {
        padding: 36px 24px
    }

    .authprof .valuehead {
        font-size: 27px
    }

    .authprof .valueimg {
        height: 280px
    }

    .authprof .approachsec {
        padding: 36px 24px
    }

    .authprof .approachhead {
        font-size: 27px
    }

    .authprof .approachflex {
        flex-direction: column;
        gap: 24px
    }

    .authprof .approachimg {
        height: 360px
    }

    .authprof .approachlist {
        grid-template-columns: 1fr
    }
}

@media (max-width: 640px) {
    .authprof .leadwrap {
        padding: 24px 12px
    }

    .authprof .leadtitle {
        font-size: 27px
    }

    .authprof .leadimg {
        height: 320px
    }

    .authprof .journeyblock {
        padding: 24px 12px
    }

    .authprof .journeycard {
        padding: 24px
    }

    .authprof .cardnum {
        width: 36px;
        height: 36px;
        top: 12px;
        right: 12px
    }

    .authprof .steptrack {
        padding: 24px 12px
    }

    .authprof .valuesec {
        padding: 24px 12px
    }

    .authprof .valueimg {
        height: 220px
    }

    .authprof .valuebox {
        padding: 24px 12px
    }

    .authprof .approachsec {
        padding: 24px 12px
    }

    .authprof .approachimg {
        height: 280px
    }
}

.jrnl {
    max-width: 1366px;
    margin: 0 auto;
    background: #fff;
    position: relative
}

.jrnl .titlezone {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 72px;
    padding: 96px 36px 48px;
    position: relative;
    overflow: visible;
    background: linear-gradient(180deg, #fafcfc 0%, #fff 100%)
}

.jrnl .titlezone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, #1edfeb05 2px, #1edfeb05 4px), repeating-linear-gradient(90deg, transparent, transparent 2px, #a9370c05 2px, #a9370c05 4px);
    pointer-events: none
}

.jrnl .imgwrap {
    flex: 0 0 280px;
    position: relative;
    z-index: 1
}

.jrnl .imgwrap img {
    width: 280px;
    height: 380px;
    object-fit: cover;
    display: block;
    clip-path: polygon(0 0, 100% 8%, 100% 92%, 0 100%);
    filter: brightness(0.92) contrast(1.05);
    transition: filter .58s cubic-bezier(0.22, 1, 0.36, 1)
}

.jrnl .imgwrap img:hover {
    filter: brightness(1.08) contrast(1.02)
}

.jrnl .txtcontent {
    flex: 1;
    position: relative;
    z-index: 1
}

.jrnl .maintitle {
    font-size: 68px;
    line-height: 1.2;
    margin: 0 0 24px;
    color: #2a2a2a;
    font-weight: 600
}

.jrnl .maintitle .accent {
    background: linear-gradient(127deg, #1EDFEB 0%, #1EDFEB 45%, #A9370C 55%, #A9370C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.jrnl .subtitle {
    font-size: 27px;
    line-height: 1.7;
    color: #4a4a4a;
    margin: 0
}

.jrnl .articlesgrid {
    padding: 72px 36px;
    background: #fff;
    position: relative
}

.jrnl .articlesgrid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 85%;
    height: 2px;
    background: linear-gradient(73deg, transparent 0%, #1EDFEB 30%, #1EDFEB 40%, #A9370C 60%, #A9370C 70%, transparent 100%);
    transform: translateX(-50%)
}

.jrnl .gridcontainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    opacity: 0;
    animation: gridreveal .7s cubic-bezier(0.22, 1, 0.36, 1) .3s forwards
}

@keyframes gridreveal {
    to {
        opacity: 1
    }
}

.jrnl .postcard {
    background: #fefefe;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    transition: transform .52s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .52s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column
}

.jrnl .postcard:hover {
    transform: translateY(-6px);
    box-shadow: 1px 10px 60px 0 #1edfeb1a
}

.jrnl .postcard:nth-child(1) {
    animation: cardappear .65s cubic-bezier(0.22, 1, 0.36, 1) .5s backwards
}

.jrnl .postcard:nth-child(2) {
    animation: cardappear .65s cubic-bezier(0.22, 1, 0.36, 1) .7s backwards
}

.jrnl .postcard:nth-child(3) {
    animation: cardappear .65s cubic-bezier(0.22, 1, 0.36, 1) .9s backwards
}

.jrnl .postcard:nth-child(4) {
    animation: cardappear .65s cubic-bezier(0.22, 1, 0.36, 1) 1.1s backwards
}

.jrnl .postcard:nth-child(5) {
    animation: cardappear .65s cubic-bezier(0.22, 1, 0.36, 1) 1.3s backwards
}

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

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

.jrnl .postimgwrap {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative
}

.jrnl .postimgwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.88);
    transition: filter .61s cubic-bezier(0.22, 1, 0.36, 1), transform .61s cubic-bezier(0.22, 1, 0.36, 1)
}

.jrnl .postcard:hover .postimgwrap img {
    filter: brightness(1.12);
    transform: scale(1.05)
}

.jrnl .postcontent {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.jrnl .posttitle {
    font-size: 27px;
    line-height: 1.2;
    margin: 0 0 12px;
    color: #2a2a2a;
    font-weight: 500
}

.jrnl .postdesc {
    font-size: 16px;
    line-height: 1.7;
    color: #5a5a5a;
    margin: 0 0 24px;
    flex: 1
}

.jrnl .postfooter {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.jrnl .readlink {
    font-size: 16px;
    color: #1EDFEB;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    padding-bottom: 2px;
    transition: color .43s ease-in-out
}

.jrnl .readlink::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #1EDFEB 0%, #1EDFEB 50%, #A9370C 50%, #A9370C 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .54s cubic-bezier(0.22, 1, 0.36, 1)
}

.jrnl .readlink:hover::after {
    transform: scaleX(1)
}

.jrnl .readlink:hover {
    color: #A9370C
}

.jrnl .viewcount {
    font-size: 16px;
    color: #8a8a8a;
    display: flex;
    align-items: center;
    gap: 6px
}

.jrnl .viewcount::before {
    content: '';
    width: 16px;
    height: 16px;
    background: #8a8a8a;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)
}

.jrnl .planningpath {
    padding: 72px 36px;
    background: radial-gradient(ellipse at center, #f9feff 0%, #fff 70%);
    position: relative
}

.jrnl .planningpath::before {
    content: '';
    position: absolute;
    top: 36px;
    right: 36px;
    width: 12px;
    height: 12px;
    border-radius: 36px;
    background: #1EDFEB;
    opacity: .3
}

.jrnl .planningpath::after {
    content: '';
    position: absolute;
    top: 48px;
    right: 72px;
    width: 6px;
    height: 6px;
    border-radius: 36px;
    background: #A9370C;
    opacity: .4
}

.jrnl .pathheading {
    font-size: 37px;
    line-height: 1.2;
    color: #2a2a2a;
    margin: 0 0 36px;
    font-weight: 500
}

.jrnl .pathcols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px
}

.jrnl .pathcol {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.jrnl .pathitem {
    padding: 24px;
    background: #fefefe;
    border: 1px solid #ececec;
    border-radius: 4px;
    box-shadow: 1px 1px 2px 0 #1edfeb12;
    transition: box-shadow .48s ease-in-out, border-color .48s ease-in-out
}

.jrnl .pathitem:hover {
    border-color: #1EDFEB;
    box-shadow: 1px 5px 14px 0 #1edfeb14
}

.jrnl .pathitemtitle {
    font-size: 27px;
    line-height: 1.2;
    color: #2a2a2a;
    margin: 0 0 12px;
    font-weight: 500;
    font-style: italic
}

.jrnl .pathitemtext {
    font-size: 16px;
    line-height: 1.7;
    color: #5a5a5a;
    margin: 0
}

.jrnl .timelinezone {
    padding: 72px 36px;
    background: #fff;
    position: relative
}

.jrnl .timelinezone::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 75%;
    height: 3px;
    background: linear-gradient(251deg, transparent 0%, #A9370C 25%, #A9370C 35%, #1EDFEB 65%, #1EDFEB 75%, transparent 100%);
    transform: translateX(-50%)
}

.jrnl .timelinezone::after {
    content: '';
    position: absolute;
    bottom: 24px;
    left: 48px;
    width: 18px;
    height: 18px;
    border-radius: 36px;
    background: #FDD5D1;
    opacity: .5
}

.jrnl .timelineheading {
    font-size: 37px;
    line-height: 1.2;
    color: #2a2a2a;
    margin: 0 0 36px;
    font-weight: 500;
    text-align: center
}

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

.jrnl .timelinecard {
    background: #fafafa;
    padding: 24px;
    border-radius: 36px;
    position: relative;
    transition: background .56s cubic-bezier(0.22, 1, 0.36, 1), transform .56s cubic-bezier(0.22, 1, 0.36, 1)
}

.jrnl .timelinecard:hover {
    background: #FDD5D1;
    transform: translateY(-4px)
}

.jrnl .timelinenumber {
    font-size: 68px;
    line-height: 1.2;
    color: #1EDFEB;
    margin: 0 0 12px;
    font-weight: 600;
    opacity: .4
}

.jrnl .timelinetitle {
    font-size: 27px;
    line-height: 1.2;
    color: #2a2a2a;
    margin: 0 0 12px;
    font-weight: 500
}

.jrnl .timelinetext {
    font-size: 16px;
    line-height: 1.7;
    color: #5a5a5a;
    margin: 0
}

.jrnl .mistakeszone {
    padding: 72px 36px;
    background: linear-gradient(180deg, #fff 0%, #f7f7f7 100%);
    position: relative
}

.jrnl .mistakeszone::before {
    content: '';
    position: absolute;
    top: 48px;
    right: 96px;
    width: 8px;
    height: 8px;
    border-radius: 36px;
    background: #A9370C;
    opacity: .35
}

.jrnl .mistakeszone::after {
    content: '';
    position: absolute;
    top: 72px;
    right: 48px;
    width: 14px;
    height: 14px;
    border-radius: 36px;
    background: #1EDFEB;
    opacity: .25
}

.jrnl .mistakesheading {
    font-size: 37px;
    line-height: 1.2;
    color: #2a2a2a;
    margin: 0 0 24px;
    font-weight: 500
}

.jrnl .mistakesintro {
    font-size: 16px;
    line-height: 1.7;
    color: #5a5a5a;
    margin: 0 0 36px;
    max-width: 820px
}

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

.jrnl .mistakeitem {
    background: #fff;
    padding: 24px;
    border-radius: 4px;
    border: 1px solid #e4e4e4;
    position: relative;
    transition: border-color .44s ease-in-out
}

.jrnl .mistakeitem:hover {
    border-color: #A9370C
}

.jrnl .mistakeitem:active {
    animation: flashaccent .1s ease-in-out
}

@keyframes flashaccent {

    0%,
    100% {
        background: #fff
    }

    50% {
        background: #FDD5D1
    }
}

.jrnl .mistakenumber {
    font-size: 16px;
    color: #A9370C;
    margin: 0 0 12px;
    font-weight: 600;
    letter-spacing: .05em
}

.jrnl .mistaketitle {
    font-size: 27px;
    line-height: 1.2;
    color: #2a2a2a;
    margin: 0 0 12px;
    font-weight: 500;
    font-style: italic
}

.jrnl .mistaketext {
    font-size: 16px;
    line-height: 1.7;
    color: #5a5a5a;
    margin: 0
}

.jrnl .toolszone {
    padding: 72px 36px;
    background: radial-gradient(ellipse at 30% 40%, #f0fcfd 0%, #fff 60%);
    position: relative
}

.jrnl .toolsheading {
    font-size: 37px;
    line-height: 1.2;
    color: #2a2a2a;
    margin: 0 0 36px;
    font-weight: 500;
    text-align: center
}

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

.jrnl .toolcard {
    background: #fefefe;
    padding: 36px;
    border-radius: 36px;
    box-shadow: 1px 5px 14px 0 #a9370c14;
    transition: transform .62s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .62s cubic-bezier(0.22, 1, 0.36, 1)
}

.jrnl .toolcard:hover {
    transform: translateY(-8px);
    box-shadow: 1px 10px 60px 0 #a9370c1a
}

.jrnl .toolicon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #1EDFEB 0%, #A9370C 100%);
    border-radius: 4px;
    margin: 0 0 24px
}

.jrnl .tooltitle {
    font-size: 27px;
    line-height: 1.2;
    color: #2a2a2a;
    margin: 0 0 12px;
    font-weight: 500
}

.jrnl .tooltext {
    font-size: 16px;
    line-height: 1.7;
    color: #5a5a5a;
    margin: 0
}

.jrnl .metricsbox {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.jrnl .metricitem {
    background: #fff;
    padding: 24px;
    border-radius: 4px;
    border: 2px solid #1EDFEB;
    text-align: center
}

.jrnl .metricvalue {
    font-size: 68px;
    line-height: 1.2;
    color: #1EDFEB;
    margin: 0 0 6px;
    font-weight: 600
}

.jrnl .metriclabel {
    font-size: 16px;
    color: #5a5a5a;
    margin: 0
}

.jrnl .arrowconnect {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    justify-content: center
}

.jrnl .arrowconnect .num {
    font-size: 37px;
    line-height: 1.2;
    color: #2a2a2a;
    font-weight: 600
}

.jrnl .arrowconnect .arrow {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #A9370C
}

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

    .jrnl .timelinegrid {
        grid-template-columns: repeat(2, 1fr)
    }

    .jrnl .toolsgrid {
        grid-template-columns: 1fr
    }
}

@media (max-width: 768px) {
    .jrnl .titlezone {
        flex-direction: column;
        gap: 36px;
        padding: 72px 24px 36px
    }

    .jrnl .imgwrap {
        flex: 0 0 auto
    }

    .jrnl .maintitle {
        font-size: 37px
    }

    .jrnl .subtitle {
        font-size: 16px
    }

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

    .jrnl .pathcols {
        grid-template-columns: 1fr
    }

    .jrnl .timelinegrid {
        grid-template-columns: 1fr
    }

    .jrnl .mistakeslist {
        grid-template-columns: 1fr
    }

    .jrnl .articlesgrid,
    .jrnl .planningpath,
    .jrnl .timelinezone,
    .jrnl .mistakeszone,
    .jrnl .toolszone {
        padding: 48px 24px
    }
}

.srvcs {
    background: #fff;
    color: #1a1a1a;
    overflow-x: clip
}

.srvcs .toparea {
    position: relative;
    background: linear-gradient(127deg, #1EDFEB 0%, #1EDFEB 33.33%, #fff 33.33%, #fff 66.66%, #A9370C 66.66%, #A9370C 100%);
    padding: 72px 24px;
    overflow: hidden
}

.srvcs .toparea::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 12%;
    width: 180px;
    height: 180px;
    border: 2px solid #a9370c26;
    border-radius: 4px;
    transform: rotate(15deg);
    animation: spinshape 45s linear infinite
}

.srvcs .toparea::after {
    content: '';
    position: absolute;
    bottom: 48px;
    right: 18%;
    width: 240px;
    height: 240px;
    border: 3px solid #1edfeb1f;
    border-radius: 36px;
    transform: rotate(-22deg);
    animation: spinshape 60s linear infinite reverse
}

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

    to {
        transform: rotate(360deg)
    }
}

.srvcs .topwrap {
    max-width: 1366px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

.srvcs .leadtext {
    font-size: 68px;
    line-height: 1.2;
    color: #2d2d2d;
    margin: 0 0 24px;
    letter-spacing: -.02em
}

.srvcs .leadtext .accent {
    color: #A9370C;
    font-style: italic
}

.srvcs .leadpara {
    font-size: 27px;
    line-height: 1.7;
    color: #3a3a3a;
    margin: 0;
    max-width: 820px
}

.srvcs .curveline {
    position: absolute;
    width: 420px;
    height: 320px;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    opacity: .08;
    pointer-events: none
}

.srvcs .curveline svg {
    width: 100%;
    height: 100%
}

.srvcs .splitzone {
    max-width: 1366px;
    margin: 0 auto;
    padding: 72px 24px;
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    gap: 72px;
    align-items: start
}

.srvcs .divstrip {
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, #1EDFEB 0%, #FDD5D1 50%, #A9370C 100%);
    justify-self: center
}

.srvcs .leftcol {
    padding: 36px 0
}

.srvcs .rightcol {
    padding: 36px 0;
    transform: translateY(120px)
}

.srvcs .colhead {
    font-size: 37px;
    line-height: 1.2;
    color: #2d2d2d;
    margin: 0 0 36px;
    font-style: italic
}

.srvcs .coltext {
    font-size: 16px;
    line-height: 1.7;
    color: #4a4a4a;
    margin: 0 0 24px
}

.srvcs .checklist {
    list-style: none;
    padding: 0;
    margin: 36px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.srvcs .checklist li {
    font-size: 16px;
    line-height: 1.7;
    color: #3a3a3a;
    padding: 12px 12px 12px 36px;
    position: relative;
    background: #fdd5d126;
    border-radius: 4px;
    transition: background .52s cubic-bezier(0.22, 1, 0.36, 1)
}

.srvcs .checklist li:hover {
    background: #fdd5d152
}

.srvcs .checklist li::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid #A9370C;
    border-radius: 36px
}

.srvcs .imgwrap {
    width: 100%;
    height: 420px;
    border-radius: 36px;
    overflow: hidden;
    position: relative;
    box-shadow: 1px 10px 60px 0 #1edfeb1a
}

.srvcs .imgwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .64s cubic-bezier(0.22, 1, 0.36, 1), opacity .5s ease-in-out;
    opacity: 0
}

.srvcs .imgwrap img.loaded {
    opacity: 1
}

.srvcs .imgwrap:hover img {
    transform: scale(1.08)
}

.srvcs .complexblock {
    background: #fafafa;
    padding: 72px 24px;
    position: relative;
    overflow: hidden
}

.srvcs .complexblock::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(./visual_library/plans_4_4.jpg) center/cover no-repeat;
    opacity: .04;
    pointer-events: none
}

.srvcs .complexblock::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(217deg, #1edfeb05 0%, #1edfeb05 100%);
    pointer-events: none;
    animation: gradshift1 18s ease-in-out infinite
}

@keyframes gradshift1 {

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

    50% {
        transform: translateX(-3%) translateY(2%)
    }
}

.srvcs .complexinner {
    max-width: 1366px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

.srvcs .complexhead {
    font-size: 37px;
    line-height: 1.2;
    color: #2d2d2d;
    margin: 0 0 72px;
    text-align: center
}

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

.srvcs .stepcard {
    background: #fff;
    border-radius: 4px;
    padding: 36px 24px;
    position: relative;
    box-shadow: 1px 5px 14px 0 #a9370c14;
    transition: transform .48s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .48s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden
}

.srvcs .stepcard::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 72px 72px 0;
    border-color: transparent #1EDFEB transparent transparent;
    transition: border-width .56s ease-in-out
}

.srvcs .stepcard:hover {
    transform: translateY(-6px);
    box-shadow: 1px 10px 60px 0 #a9370c1a
}

.srvcs .stepcard:hover::before {
    border-width: 0 96px 96px 0
}

.srvcs .stepnum {
    font-size: 68px;
    line-height: 1.2;
    color: #1edfeb2e;
    margin: 0 0 12px;
    font-weight: 700
}

.srvcs .steptitle {
    font-size: 27px;
    line-height: 1.2;
    color: #2d2d2d;
    margin: 0 0 12px
}

.srvcs .stepdesc {
    font-size: 16px;
    line-height: 1.7;
    color: #4a4a4a;
    margin: 0
}

.srvcs .toolszone {
    max-width: 1366px;
    margin: 0 auto;
    padding: 72px 24px
}

.srvcs .toolshead {
    font-size: 37px;
    line-height: 1.2;
    color: #2d2d2d;
    margin: 0 0 12px
}

.srvcs .toolssub {
    font-size: 16px;
    line-height: 1.7;
    color: #5a5a5a;
    margin: 0 0 48px
}

.srvcs .toolsline {
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, #A9370C 0%, #A9370C 50%, transparent 50%);
    margin: 0 0 48px
}

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

.srvcs .toolitem {
    background: #fff;
    border: 2px solid #f0f0f0;
    border-radius: 36px;
    padding: 24px;
    text-align: center;
    transition: border-color .44s ease-in-out, transform .44s ease-in-out;
    position: relative
}

.srvcs .toolitem::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 36px;
    padding: 2px;
    background: linear-gradient(135deg, #1EDFEB, #A9370C);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .44s ease-in-out
}

.srvcs .toolitem:hover {
    border-color: transparent;
    transform: translateY(-4px)
}

.srvcs .toolitem:hover::before {
    opacity: 1
}

.srvcs .toolicon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 4px;
    background: linear-gradient(135deg, #1edfeb1f, #fdd5d11f);
    display: flex;
    align-items: center;
    justify-content: center
}

.srvcs .toolicon svg {
    width: 24px;
    height: 24px;
    fill: #A9370C
}

.srvcs .toolname {
    font-size: 16px;
    line-height: 1.7;
    color: #2d2d2d;
    margin: 0
}

.srvcs .metriczone {
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
    padding: 72px 24px;
    position: relative
}

.srvcs .metriczone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(312deg, #a9370c08 0%, #a9370c08 100%);
    animation: gradshift2 22s ease-in-out infinite
}

@keyframes gradshift2 {

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

    50% {
        transform: translateX(2%) translateY(-3%)
    }
}

.srvcs .metricinner {
    max-width: 1366px;
    margin: 0 auto;
    position: relative;
    z-index: 2
}

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

.srvcs .metricbox {
    text-align: center;
    padding: 36px 24px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 1px 1px 2px 0 #1edfeb12;
    transition: box-shadow .62s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden
}

.srvcs .metricbox::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #1EDFEB 0%, #A9370C 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .68s cubic-bezier(0.22, 1, 0.36, 1)
}

.srvcs .metricbox:hover {
    box-shadow: 1px 5px 14px 0 #1edfeb14
}

.srvcs .metricbox:hover::after {
    transform: scaleX(1)
}

.srvcs .metricval {
    font-size: 68px;
    line-height: 1.2;
    color: #1EDFEB;
    margin: 0 0 6px;
    font-weight: 700
}

.srvcs .metriclabel {
    font-size: 16px;
    line-height: 1.7;
    color: #5a5a5a;
    margin: 0
}

@media (max-width: 1200px) {
    .srvcs .splitzone {
        grid-template-columns: 1fr;
        gap: 48px
    }

    .srvcs .divstrip {
        display: none
    }

    .srvcs .rightcol {
        transform: translateY(0)
    }

    .srvcs .stepgrid {
        grid-template-columns: 1fr
    }

    .srvcs .toolgrid {
        grid-template-columns: repeat(2, 1fr)
    }

    .srvcs .metricgrid {
        grid-template-columns: 1fr
    }
}

@media (max-width: 768px) {
    .srvcs .leadtext {
        font-size: 37px
    }

    .srvcs .leadpara {
        font-size: 16px
    }

    .srvcs .colhead {
        font-size: 27px
    }

    .srvcs .complexhead {
        font-size: 27px
    }

    .srvcs .toolshead {
        font-size: 27px
    }

    .srvcs .checklist {
        grid-template-columns: 1fr
    }

    .srvcs .toolgrid {
        grid-template-columns: 1fr
    }

    .srvcs .metricval {
        font-size: 37px
    }

    .srvcs .toparea {
        padding: 48px 24px
    }

    .srvcs .splitzone,
    .srvcs .complexblock,
    .srvcs .toolszone,
    .srvcs .metriczone {
        padding: 48px 24px
    }

    .srvcs .steptitle {
        font-size: 16px
    }

    .srvcs .stepnum {
        font-size: 37px
    }
}

.prtl {
    max-width: 1366px;
    margin: 0 auto;
    background: #fff
}

.prtl .splitHero {
    display: flex;
    min-height: 520px;
    position: relative;
    overflow: hidden
}

.prtl .splitHero .leftZone {
    flex: 1;
    background: linear-gradient(127deg, #1EDFEB 0%, #1EDFEB 48%, #A9370C 48%, #A9370C 100%);
    padding: 72px 36px 72px 72px;
    display: flex;
    align-items: center;
    position: relative
}

.prtl .splitHero .rightZone {
    flex: 1;
    background: #FDD5D1;
    padding: 36px 72px 36px 36px;
    display: flex;
    align-items: center;
    position: relative
}

.prtl .splitHero .blurSpot {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .15;
    pointer-events: none
}

.prtl .splitHero .spot1 {
    width: 280px;
    height: 280px;
    background: #fff;
    top: -60px;
    left: -40px
}

.prtl .splitHero .spot2 {
    width: 340px;
    height: 340px;
    background: #A9370C;
    bottom: -80px;
    right: -60px
}

.prtl .splitHero .spot3 {
    width: 220px;
    height: 220px;
    background: #1EDFEB;
    top: 50%;
    right: 20%
}

.prtl .heroTxt {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 520px
}

.prtl .heroTxt h1 {
    font-size: 68px;
    line-height: 1.2;
    margin: 0 0 24px;
    font-weight: 700
}

.prtl .heroTxt .tagline {
    font-size: 27px;
    line-height: 1.7;
    color: #fff;
    opacity: .95
}

.prtl .statGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 480px
}

.prtl .statBox {
    background: #ffffff40;
    padding: 24px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1)
}

.prtl .statBox:active {
    transform: scale(1.08)
}

.prtl .statBox .num {
    font-size: 68px;
    line-height: 1.2;
    font-weight: 700;
    color: #2a2a2a;
    margin: 0 0 6px
}

.prtl .statBox .label {
    font-size: 16px;
    line-height: 1.7;
    color: #2a2a2a;
    font-weight: 500
}

.prtl .edPick {
    background: #fafcfd;
    padding: 72px 36px;
    position: relative
}

.prtl .edPick::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 2px;
    background: linear-gradient(90deg, #1EDFEB 0%, #1EDFEB 33%, #A9370C 33%, #A9370C 66%, #FDD5D1 66%, #FDD5D1 100%)
}

.prtl .edPick .pickHead {
    text-align: center;
    margin: 0 0 48px
}

.prtl .edPick .pickHead h2 {
    font-size: 37px;
    line-height: 1.2;
    color: #2a2a2a;
    margin: 0 0 12px;
    font-weight: 700
}

.prtl .edPick .pickHead .subline {
    font-size: 16px;
    line-height: 1.7;
    color: #5a5a5a
}

.prtl .pickList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    max-width: 1200px;
    margin: 0 auto
}

.prtl .pickCard {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 1px 5px 14px 0 #1edfeb14;
    transition: transform .62s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .62s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0;
    transform: translateY(40px);
    animation: riseUp .68s cubic-bezier(0.22, 1, 0.36, 1) forwards
}

.prtl .pickCard:nth-child(1) {
    animation-delay: .1s
}

.prtl .pickCard:nth-child(2) {
    animation-delay: .25s
}

.prtl .pickCard:nth-child(3) {
    animation-delay: .4s
}

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

.prtl .pickCard:hover {
    transform: translateY(-6px);
    box-shadow: 1px 10px 60px 0 #1edfeb1a
}

.prtl .pickCard .imgWrap {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative
}

.prtl .pickCard .imgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .52s ease-in-out;
    opacity: 0
}

.prtl .pickCard .imgWrap img.loaded {
    opacity: 1
}

.prtl .pickCard .pickCont {
    padding: 24px
}

.prtl .pickCard .pickCont h3 {
    font-size: 27px;
    line-height: 1.2;
    color: #2a2a2a;
    margin: 0 0 12px;
    font-weight: 600
}

.prtl .pickCard .pickCont .reason {
    font-size: 16px;
    line-height: 1.7;
    color: #5a5a5a;
    margin: 0 0 12px
}

.prtl .pickCard .pickCont .readLink {
    font-size: 16px;
    line-height: 1.7;
    color: #1EDFEB;
    text-decoration: none;
    display: inline-block;
    position: relative;
    transition: color .48s cubic-bezier(0.22, 1, 0.36, 1)
}

.prtl .pickCard .pickCont .readLink::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #1EDFEB 0%, #1EDFEB 50%, #A9370C 50%, #A9370C 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1)
}

.prtl .pickCard .pickCont .readLink:hover::after {
    transform: scaleX(1)
}

.prtl .postFeed {
    background: #fff;
    padding: 72px 36px;
    position: relative
}

.prtl .postFeed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border-top: 3px solid #1EDFEB;
    border-left: 3px solid #1EDFEB
}

.prtl .postFeed::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 36px;
    height: 36px;
    border-top: 3px solid #A9370C;
    border-right: 3px solid #A9370C
}

.prtl .feedHead {
    text-align: center;
    margin: 0 0 48px
}

.prtl .feedHead h2 {
    font-size: 37px;
    line-height: 1.2;
    color: #2a2a2a;
    margin: 0 0 12px;
    font-weight: 700
}

.prtl .feedHead .intro {
    font-size: 16px;
    line-height: 1.7;
    color: #5a5a5a;
    max-width: 680px;
    margin: 0 auto
}

.prtl .postGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
    max-width: 1200px;
    margin: 0 auto
}

.prtl .postItem {
    background: #fafcfd;
    border-radius: 36px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 1px 1px 2px 0 #a9370c12;
    transition: transform .58s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .58s cubic-bezier(0.22, 1, 0.36, 1)
}

.prtl .postItem:hover {
    transform: translateY(-4px);
    box-shadow: 1px 10px 60px 0 #a9370c1a
}

.prtl .postItem .postImg {
    width: 100%;
    height: 240px;
    overflow: hidden;
    position: relative
}

.prtl .postItem .postImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .48s ease-in-out;
    opacity: 0
}

.prtl .postItem .postImg img.loaded {
    opacity: 1
}

.prtl .postItem .postBody {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column
}

.prtl .postItem .postBody h3 {
    font-size: 27px;
    line-height: 1.2;
    color: #2a2a2a;
    margin: 0 0 12px;
    font-weight: 600
}

.prtl .postItem .postBody .excerpt {
    font-size: 16px;
    line-height: 1.7;
    color: #5a5a5a;
    margin: 0 0 12px;
    flex: 1
}

.prtl .postItem .postBody .meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px
}

.prtl .postItem .postBody .meta .viewCount {
    font-size: 16px;
    line-height: 1.7;
    color: #8a8a8a;
    display: flex;
    align-items: center;
    gap: 6px
}

.prtl .postItem .postBody .meta .viewCount .dotIndicator {
    width: 8px;
    height: 8px;
    background: #1EDFEB;
    border-radius: 50%;
    position: relative
}

.prtl .postItem .postBody .meta .viewCount .dotIndicator::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 4px;
    height: 4px;
    background: #A9370C;
    border-radius: 50%
}

.prtl .postItem .postBody .readBtn {
    display: inline-block;
    padding: 12px 24px;
    background: #2a2a2a;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.7;
    align-self: flex-start;
    position: relative;
    overflow: hidden;
    transition: background .52s cubic-bezier(0.22, 1, 0.36, 1)
}

.prtl .postItem .postBody .readBtn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #1EDFEB;
    border-radius: 4px;
    opacity: 0;
    transition: opacity .52s cubic-bezier(0.22, 1, 0.36, 1)
}

.prtl .postItem .postBody .readBtn:hover {
    background: #3a3a3a
}

.prtl .postItem .postBody .readBtn:hover::before {
    opacity: 1
}

.prtl .whyReturn {
    background: linear-gradient(172deg, #fff 0%, #fff 50%, #fafcfd 50%, #fafcfd 100%);
    padding: 72px 36px;
    position: relative
}

.prtl .whyReturn .stairDivider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(90deg, #1EDFEB 0%, #1EDFEB 25%, transparent 25%, transparent 50%, #A9370C 50%, #A9370C 75%, transparent 75%, transparent 100%);
    background-size: 48px 100%
}

.prtl .whyReturn .whyWrap {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    gap: 48px;
    align-items: center
}

.prtl .whyReturn .whyTxt {
    flex: 1.2
}

.prtl .whyReturn .whyTxt h2 {
    font-size: 37px;
    line-height: 1.2;
    color: #2a2a2a;
    margin: 0 0 24px;
    font-weight: 700;
    font-style: italic
}

.prtl .whyReturn .whyTxt .reason {
    font-size: 16px;
    line-height: 1.7;
    color: #5a5a5a;
    margin: 0 0 12px
}

.prtl .whyReturn .whyImg {
    flex: 1;
    overflow: hidden;
    border-radius: 4px
}

.prtl .whyReturn .whyImg img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    box-shadow: 1px 5px 14px 0 #1edfeb14;
    transition: opacity .5s ease-in-out;
    opacity: 0
}

.prtl .whyReturn .whyImg img.loaded {
    opacity: 1
}

.prtl .sections {
    background: #fff;
    padding: 72px 36px;
    position: relative
}

.prtl .sections::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border-bottom: 3px solid #FDD5D1;
    border-left: 3px solid #FDD5D1
}

.prtl .sections::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    border-bottom: 3px solid #1EDFEB;
    border-right: 3px solid #1EDFEB
}

.prtl .sections .sectHead {
    text-align: center;
    margin: 0 0 48px
}

.prtl .sections .sectHead h2 {
    font-size: 37px;
    line-height: 1.2;
    color: #2a2a2a;
    margin: 0 0 12px;
    font-weight: 700
}

.prtl .sections .sectHead .desc {
    font-size: 16px;
    line-height: 1.7;
    color: #5a5a5a;
    max-width: 680px;
    margin: 0 auto
}

.prtl .sectColumns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto
}

.prtl .sectCard {
    background: #fafcfd;
    padding: 24px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    box-shadow: 1px 1px 2px 0 #a9370c12;
    transition: transform .64s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0;
    transform: translateY(40px);
    animation: riseUp .68s cubic-bezier(0.22, 1, 0.36, 1) forwards
}

.prtl .sectCard:nth-child(1) {
    animation-delay: .15s
}

.prtl .sectCard:nth-child(2) {
    animation-delay: .3s
}

.prtl .sectCard:nth-child(3) {
    animation-delay: .45s
}

.prtl .sectCard:nth-child(4) {
    animation-delay: .6s
}

.prtl .sectCard:active {
    transform: scale(1.05)
}

.prtl .sectCard .iconWrap {
    width: 56px;
    height: 56px;
    margin: 0 0 12px;
    position: relative
}

.prtl .sectCard .iconWrap .iconShape {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1EDFEB 0%, #A9370C 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.prtl .sectCard .iconWrap .iconShape::before {
    content: '';
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%
}

.prtl .sectCard .iconWrap .dotIndicator {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: #A9370C;
    border-radius: 50%;
    border: 2px solid #fafcfd
}

.prtl .sectCard h3 {
    font-size: 27px;
    line-height: 1.2;
    color: #2a2a2a;
    margin: 0 0 12px;
    font-weight: 600
}

.prtl .sectCard .sectDesc {
    font-size: 16px;
    line-height: 1.7;
    color: #5a5a5a
}

.prtl .nextStep {
    background: #fafcfd;
    padding: 72px 36px;
    position: relative
}

.prtl .nextStep .stairDivider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(90deg, transparent 0%, transparent 25%, #FDD5D1 25%, #FDD5D1 50%, transparent 50%, transparent 75%, #1EDFEB 75%, #1EDFEB 100%);
    background-size: 48px 100%
}

.prtl .nextStep .stepWrap {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    gap: 48px;
    align-items: center;
    flex-direction: row-reverse
}

.prtl .nextStep .stepImg {
    flex: 1;
    overflow: hidden;
    border-radius: 36px
}

.prtl .nextStep .stepImg img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    box-shadow: 1px 10px 60px 0 #1edfeb1a;
    transition: opacity .5s ease-in-out;
    opacity: 0
}

.prtl .nextStep .stepImg img.loaded {
    opacity: 1
}

.prtl .nextStep .stepTxt {
    flex: 1.2
}

.prtl .nextStep .stepTxt h2 {
    font-size: 37px;
    line-height: 1.2;
    color: #2a2a2a;
    margin: 0 0 24px;
    font-weight: 700
}

.prtl .nextStep .stepTxt .stepDesc {
    font-size: 16px;
    line-height: 1.7;
    color: #5a5a5a;
    margin: 0 0 24px
}

.prtl .nextStep .stepTxt .ctaBtn {
    display: inline-block;
    padding: 12px 36px;
    background: #4a4a4a;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    transition: background .56s cubic-bezier(0.22, 1, 0.36, 1)
}

.prtl .nextStep .stepTxt .ctaBtn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #1EDFEB;
    border-radius: 4px;
    opacity: 0;
    transition: opacity .56s cubic-bezier(0.22, 1, 0.36, 1)
}

.prtl .nextStep .stepTxt .ctaBtn:hover {
    background: #2a2a2a
}

.prtl .nextStep .stepTxt .ctaBtn:hover::before {
    opacity: 1
}

.prtl .metrics {
    background: linear-gradient(218deg, #1EDFEB 0%, #1EDFEB 35%, #fff 35%, #fff 100%);
    padding: 72px 36px;
    position: relative
}

.prtl .metrics::before {
    content: '';
    position: absolute;
    top: 0;
    left: 36px;
    right: 36px;
    height: 2px;
    background: linear-gradient(90deg, #A9370C 0%, #A9370C 50%, #FDD5D1 50%, #FDD5D1 100%)
}

.prtl .metrics .metHead {
    text-align: center;
    margin: 0 0 48px
}

.prtl .metrics .metHead h2 {
    font-size: 37px;
    line-height: 1.2;
    color: #2a2a2a;
    margin: 0 0 12px;
    font-weight: 700;
    font-style: italic
}

.prtl .metGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    max-width: 1000px;
    margin: 0 auto
}

.prtl .metBox {
    background: #fff;
    padding: 36px 24px;
    border-radius: 4px;
    text-align: center;
    box-shadow: 1px 5px 14px 0 #a9370c14;
    position: relative;
    overflow: hidden;
    transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0;
    transform: translateY(40px);
    animation: riseUp .68s cubic-bezier(0.22, 1, 0.36, 1) forwards
}

.prtl .metBox:nth-child(1) {
    animation-delay: .2s
}

.prtl .metBox:nth-child(2) {
    animation-delay: .35s
}

.prtl .metBox:nth-child(3) {
    animation-delay: .5s
}

.prtl .metBox:active {
    transform: scale(1.06)
}

.prtl .metBox .metNum {
    font-size: 68px;
    line-height: 1.2;
    font-weight: 700;
    color: #2a2a2a;
    margin: 0 0 6px;
    position: relative
}

.prtl .metBox .metNum::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #1EDFEB 0%, #1EDFEB 50%, #A9370C 50%, #A9370C 100%)
}

.prtl .metBox .metLabel {
    font-size: 16px;
    line-height: 1.7;
    color: #5a5a5a;
    margin: 12px 0 0
}

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

    .prtl .splitHero .leftZone,
    .prtl .splitHero .rightZone {
        padding: 48px 36px
    }

    .prtl .postGrid {
        grid-template-columns: 1fr
    }

    .prtl .pickList {
        grid-template-columns: 1fr
    }

    .prtl .sectColumns {
        grid-template-columns: repeat(2, 1fr)
    }

    .prtl .metGrid {
        grid-template-columns: 1fr
    }

    .prtl .whyReturn .whyWrap,
    .prtl .nextStep .stepWrap {
        flex-direction: column
    }
}

@media (max-width: 640px) {
    .prtl .heroTxt h1 {
        font-size: 37px
    }

    .prtl .heroTxt .tagline {
        font-size: 16px
    }

    .prtl .statGrid {
        grid-template-columns: 1fr
    }

    .prtl .statBox .num,
    .prtl .metBox .metNum {
        font-size: 37px
    }

    .prtl .edPick .pickHead h2,
    .prtl .feedHead h2,
    .prtl .whyReturn .whyTxt h2,
    .prtl .sections .sectHead h2,
    .prtl .nextStep .stepTxt h2,
    .prtl .metrics .metHead h2 {
        font-size: 27px
    }

    .prtl .sectColumns {
        grid-template-columns: 1fr
    }

    .prtl .splitHero .leftZone,
    .prtl .splitHero .rightZone {
        padding: 36px 24px
    }

    .prtl .edPick,
    .prtl .postFeed,
    .prtl .whyReturn,
    .prtl .sections,
    .prtl .nextStep,
    .prtl .metrics {
        padding: 48px 24px
    }
}

.confirmpage {
    max-width: 1366px;
    margin: 0 auto;
    padding: 72px 24px;
    background: linear-gradient(127deg, #fff 0%, #fff 33%, #FDD5D1 33%, #FDD5D1 66%, #1EDFEB 66%);
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center
}

.confirmwrap {
    background: #fff;
    padding: 72px 36px;
    border-radius: 4px;
    box-shadow: 1px 10px 60px 0 #1edfeb1a;
    max-width: 720px;
    width: 100%;
    text-align: center
}

.confirmicon {
    width: 96px;
    height: 96px;
    margin: 0 auto 36px;
    position: relative
}

.confirmicon svg {
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: fadein .6s cubic-bezier(0.22, 1, 0.36, 1) .2s forwards
}

@keyframes fadein {
    to {
        opacity: 1
    }
}

.confirmicon circle {
    fill: none;
    stroke: #1EDFEB;
    stroke-width: 3;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    animation: drawcircle .5s cubic-bezier(0.22, 1, 0.36, 1) .3s forwards
}

@keyframes drawcircle {
    to {
        stroke-dashoffset: 0
    }
}

.confirmicon path {
    fill: none;
    stroke: #A9370C;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 70;
    stroke-dashoffset: 70;
    animation: drawcheck .4s cubic-bezier(0.22, 1, 0.36, 1) .6s forwards
}

@keyframes drawcheck {
    to {
        stroke-dashoffset: 0
    }
}

.confirmtitle {
    font-size: 37px;
    line-height: 1.2;
    color: #2a2a2a;
    margin: 0 0 24px
}

.confirmmsg {
    font-size: 16px;
    line-height: 1.7;
    color: #4a4a4a;
    margin: 0 0 36px
}

.confirmactions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap
}

.btnprimary {
    background: #1EDFEB;
    color: #2a2a2a;
    border: 2px solid #1EDFEB;
    padding: 12px 36px;
    border-radius: 4px;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    transition: background .5s cubic-bezier(0.22, 1, 0.36, 1), border-color .5s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden
}

.btnprimary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #A9370C;
    transition: width .6s ease-in-out;
    z-index: -1
}

.btnprimary:hover {
    background: #A9370C;
    border-color: #A9370C;
    color: #fff
}

.btnprimary:hover::before {
    width: 100%
}

.btnsecondary {
    background: transparent;
    color: #A9370C;
    border: 2px solid #A9370C;
    padding: 12px 36px;
    border-radius: 4px;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    transition: background .5s cubic-bezier(0.22, 1, 0.36, 1), color .5s cubic-bezier(0.22, 1, 0.36, 1)
}

.btnsecondary:hover {
    background: #A9370C;
    color: #fff
}

.confirmdetails {
    margin: 36px 0 0;
    padding: 24px;
    background: #fafbfc;
    border-radius: 4px;
    text-align: left
}

.detailrow {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 16px;
    line-height: 1.7;
    border-bottom: 1px solid #e8eaed
}

.detailrow:last-child {
    border-bottom: none
}

.detaillabel {
    color: #6a6a6a
}

.detailvalue {
    color: #2a2a2a;
    font-weight: 500
}

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

    .confirmwrap {
        padding: 36px 24px
    }

    .confirmtitle {
        font-size: 27px
    }

    .confirmactions {
        flex-direction: column
    }

    .btnprimary,
    .btnsecondary {
        width: 100%;
        text-align: center
    }

    .detailrow {
        flex-direction: column;
        gap: 6px
    }
}