/*
|--------------------------------------------------------------------------
| Shakti Sports Massage
| Component Layer
|--------------------------------------------------------------------------
|
| Bootstrap handles:
| - Grid
| - Container
| - Navbar mechanics
| - Responsive utilities
| - Base components
|
| This file handles:
| - SSM Navbar
| - SSM Buttons
| - SSM Footer
| - SSM-specific shared UI
|
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| SSM BUTTONS
|--------------------------------------------------------------------------
*/

.ssm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 48px;

    padding: 12px 22px;

    border: 1px solid transparent;
    border-radius: 8px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ssm-btn:hover {
    transform: translateY(-1px);
}

.ssm-btn:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 4px rgba(230, 0, 18, 0.14);
}

.ssm-btn--primary {
    background: #e50914;
    border-color: #e50914;

    color: #ffffff;
}

.ssm-btn--primary:hover {
    background: #c90812;
    border-color: #c90812;

    color: #ffffff;
}

.ssm-btn--dark {
    background: #111111;
    border-color: #111111;

    color: #ffffff;
}

.ssm-btn--dark:hover {
    background: #000000;
    border-color: #000000;

    color: #ffffff;
}

.ssm-btn--light {
    background: #ffffff;
    border-color: #ffffff;

    color: #e50914;
}

.ssm-btn--light:hover {
    background: #f3f3f3;
    border-color: #f3f3f3;

    color: #c90812;
}


/*
|--------------------------------------------------------------------------
| SSM HEADER
|--------------------------------------------------------------------------
*/

.ssm-header {
    position: relative;

    z-index: 1030;
}

.ssm-navbar {
    min-height: 82px;

    padding-block: 0;

    background: rgba(255, 255, 255, 0.97);

    border-bottom: 1px solid #ededed;

    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.035);
}

.ssm-navbar__container {
    min-height: 82px;

    display: flex;
    align-items: center;
}


/*
|--------------------------------------------------------------------------
| Brand
|--------------------------------------------------------------------------
*/

.ssm-navbar__brand {
    display: inline-flex;
    align-items: center;

    margin-right: 36px;
    padding: 0;

    color: #111111;

    text-decoration: none;
}

.ssm-navbar__brand:hover {
    color: #111111;
}

.ssm-navbar__logo {
    display: block;

    width: auto;
    max-width: 180px;
    max-height: 58px;

    object-fit: contain;
}

.ssm-navbar__brand-text {
    max-width: 180px;

    color: #111111;

    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
}


/*
|--------------------------------------------------------------------------
| Desktop Navigation
|--------------------------------------------------------------------------
*/

.ssm-navbar__collapse {
    align-items: center;
}

.ssm-navbar__nav {
    align-items: center;

    gap: 6px;

    margin-left: auto;
}

.ssm-navbar__item {
    position: relative;
}

.ssm-navbar__link {
    position: relative;

    display: inline-flex;
    align-items: center;

    min-height: 82px;

    padding:
        0 14px !important;

    color: #555555;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition:
        color 180ms ease;
}

.ssm-navbar__link::after {
    content: "";

    position: absolute;

    right: 14px;
    bottom: 20px;
    left: 14px;

    height: 2px;

    background: #e50914;

    transform: scaleX(0);

    transform-origin: center;

    transition:
        transform 180ms ease;
}

.ssm-navbar__link:hover,
.ssm-navbar__link.active {
    color: #e50914;
}

.ssm-navbar__link:hover::after,
.ssm-navbar__link.active::after {
    transform: scaleX(1);
}


/*
|--------------------------------------------------------------------------
| Header Actions
|--------------------------------------------------------------------------
*/

.ssm-navbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-left: 22px;
}

.ssm-navbar__contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 40px;

    padding: 8px 10px;

    color: #555555;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;

    border-radius: 7px;

    transition:
        background-color 180ms ease,
        color 180ms ease;
}

.ssm-navbar__contact:hover {
    color: #111111;
    background: #f5f5f5;
}

.ssm-navbar__contact--whatsapp:hover {
    color: #128c7e;
    background: rgba(37, 211, 102, 0.08);
}

.ssm-navbar__contact i {
    font-size: 15px;
}

.ssm-navbar__appointment {
    margin-left: 4px;

    min-width: 182px;
}


/*
|--------------------------------------------------------------------------
| Mobile Toggle
|--------------------------------------------------------------------------
*/

.ssm-navbar__toggler {
    width: 44px;
    height: 44px;

    padding: 0;

    border: 1px solid #e4e4e4;
    border-radius: 8px;

    background: #f7f7f7;

    box-shadow: none !important;
}

.ssm-navbar__toggler:hover {
    background: #eeeeee;
}

.ssm-navbar__toggler:focus {
    box-shadow:
        0 0 0 4px rgba(229, 9, 20, 0.12) !important;
}

.ssm-navbar__toggler-icon {
    display: flex;

    width: 20px;
    height: 16px;

    margin: auto;

    flex-direction: column;
    justify-content: space-between;
}

.ssm-navbar__toggler-icon span {
    display: block;

    width: 100%;
    height: 2px;

    border-radius: 999px;

    background: #111111;
}


/*
|--------------------------------------------------------------------------
| SSM FOOTER
|--------------------------------------------------------------------------
*/



/*
|--------------------------------------------------------------------------
| SSM FOOTER
|--------------------------------------------------------------------------
*/

.ssm-footer {
    position: relative;

    background: #050505;

    color: #ffffff;

    overflow: hidden;
}


/*
|--------------------------------------------------------------------------
| Main Footer
|--------------------------------------------------------------------------
*/

.ssm-footer__main {
    display: grid;

    grid-template-columns:
        minmax(260px, 1.45fr)
        minmax(150px, 0.75fr)
        minmax(180px, 0.85fr)
        minmax(240px, 1fr);

    gap: 64px;

    padding-top: 82px;
    padding-bottom: 64px;
}


/*
|--------------------------------------------------------------------------
| Brand
|--------------------------------------------------------------------------
*/

.ssm-footer__brand {
    max-width: 390px;
}

.ssm-footer__brand-link {
    display: inline-flex;

    align-items: center;

    margin-bottom: 20px;

    color: #ffffff;

    text-decoration: none;
}

.ssm-footer__logo {
    display: block;

    width: auto;

    max-width: 190px;
    max-height: 64px;

    object-fit: contain;
}

.ssm-footer__brand-name {
    color: #ffffff;

    font-size: 22px;
    font-weight: 800;

    line-height: 1.15;
}

.ssm-footer__tagline {
    margin: 0 0 14px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;
}

.ssm-footer__description {
    max-width: 370px;

    margin: 0;

    color: #929292;

    font-size: 14px;

    line-height: 1.8;
}


/*
|--------------------------------------------------------------------------
| Social
|--------------------------------------------------------------------------
*/

.ssm-footer__social {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 25px;
}

.ssm-footer__social-link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border:
        1px solid #2b2b2b;

    border-radius: 50%;

    background: #101010;

    color: #ffffff;

    font-size: 15px;

    text-decoration: none;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.ssm-footer__social-link:hover {
    background: #e50914;

    border-color: #e50914;

    color: #ffffff;

    transform: translateY(-3px);
}


/*
|--------------------------------------------------------------------------
| Column Heading
|--------------------------------------------------------------------------
*/

.ssm-footer__heading {
    margin: 0 0 24px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Navigation
|--------------------------------------------------------------------------
*/

.ssm-footer__nav-list {
    display: flex;

    flex-direction: column;

    gap: 14px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.ssm-footer__nav-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #929292;

    font-size: 14px;

    text-decoration: none;

    transition:
        color 180ms ease,
        transform 180ms ease;
}

.ssm-footer__nav-link i {
    font-size: 10px;

    opacity: 0;

    transform: translateX(-5px);

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.ssm-footer__nav-link:hover {
    color: #ffffff;

    transform: translateX(3px);
}

.ssm-footer__nav-link:hover i {
    opacity: 1;

    transform: translateX(0);
}


/*
|--------------------------------------------------------------------------
| Contact
|--------------------------------------------------------------------------
*/

.ssm-footer__contact-list {
    display: flex;

    flex-direction: column;

    gap: 20px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.ssm-footer__contact-item {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    color: #929292;

    font-size: 14px;

    line-height: 1.55;
}

.ssm-footer__contact-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    border-radius: 9px;

    background: rgba(229, 9, 20, 0.10);

    color: #e50914;

    font-size: 14px;
}

.ssm-footer__contact-label {
    display: block;

    margin-bottom: 3px;

    color: #707070;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}

.ssm-footer__contact-link,
.ssm-footer__contact-text {
    display: block;

    color: #ffffff;

    font-size: 13px;

    text-decoration: none;
}

.ssm-footer__contact-link:hover {
    color: #e50914;
}

.ssm-footer__directions {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition:
        color 180ms ease;
}

.ssm-footer__directions:hover {
    color: #e50914;
}


/*
|--------------------------------------------------------------------------
| APPOINTMENT CTA
|--------------------------------------------------------------------------
*/

.ssm-footer__cta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 70px;

    min-height: 154px;

    padding:
        30px 36px;

    background:
        linear-gradient(
            105deg,
            #ed0712 0%,
            #d30712 100%
        );

    border-radius: 18px;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.24);
}

.ssm-footer__cta-content {
    flex: 1 1 auto;

    min-width: 0;
}

.ssm-footer__cta-eyebrow {
    display: block;

    margin-bottom: 8px;

    color: rgba(255, 255, 255, 0.76);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}

.ssm-footer__cta-title {
    margin: 0;

    color: #ffffff !important;

    font-size: clamp(
        1.8rem,
        3vw,
        2.65rem
    );

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -0.035em;
}

.ssm-footer__cta-text {
    max-width: 680px;

    margin: 10px 0 0;

    color: rgba(255, 255, 255, 0.78) !important;

    font-size: 13px;

    line-height: 1.55;
}


/*
|--------------------------------------------------------------------------
| CTA Button
|--------------------------------------------------------------------------
*/

.ssm-footer__cta-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    gap: 12px;

    min-width: 195px;
    min-height: 54px;

    padding:
        14px 23px;

    border: 0;

    border-radius: 9px;

    background: #ffffff;

    color: #e50914 !important;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.12);

    transition:
        background-color 180ms ease,
        color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ssm-footer__cta-button i {
    font-size: 12px;

    transition:
        transform 180ms ease;
}

.ssm-footer__cta-button:hover {
    background: #111111;

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.25);
}

.ssm-footer__cta-button:hover i {
    transform: translateX(4px);
}


/*
|--------------------------------------------------------------------------
| Bottom
|--------------------------------------------------------------------------
*/

.ssm-footer__bottom {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 25px;

    margin-top: 34px;

    padding:
        23px 0;

    border-top:
        1px solid #202020;
}

.ssm-footer__copyright,
.ssm-footer__powered {
    margin: 0;

    color: #666666;

    font-size: 11px;

    line-height: 1.5;
}

.ssm-footer__legal {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 18px;
}

.ssm-footer__legal-link {
    color: #666666;

    font-size: 11px;

    text-decoration: none;

    transition:
        color 180ms ease;
}

.ssm-footer__legal-link:hover {
    color: #ffffff;
}

.ssm-footer__powered {
    text-align: right;
}

.ssm-footer__powered span {
    color: #aaaaaa;

    font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| GO TO TOP
|--------------------------------------------------------------------------
|
| Supports our current JS regardless of whether it uses:
| #back-to-top or .ssm-back-to-top
|--------------------------------------------------------------------------
*/

#back-to-top,
.ssm-back-to-top,
.back-to-top {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 1050;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    padding: 0;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;

    background: #e50914;

    color: #ffffff;

    font-size: 15px;

    line-height: 1;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.22);

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(12px);

    transition:
        opacity 200ms ease,
        visibility 200ms ease,
        transform 200ms ease,
        background-color 180ms ease;
}

#back-to-top.show,
#back-to-top.is-visible,
.ssm-back-to-top.show,
.ssm-back-to-top.is-visible,
.back-to-top.show,
.back-to-top.is-visible {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}

#back-to-top:hover,
.ssm-back-to-top:hover,
.back-to-top:hover {
    background: #111111;

    color: #ffffff;

    transform:
        translateY(-3px);
}

#back-to-top:focus-visible,
.ssm-back-to-top:focus-visible,
.back-to-top:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 4px rgba(229, 9, 20, 0.22),
        0 8px 25px rgba(0, 0, 0, 0.22);
}


/*
|--------------------------------------------------------------------------
| FOOTER RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 1199.98px) {

    .ssm-footer__main {
        grid-template-columns:
            minmax(220px, 1.3fr)
            repeat(2, minmax(140px, 0.8fr))
            minmax(210px, 1fr);

        gap: 42px;
    }

    .ssm-footer__cta {
        gap: 45px;
    }

}


@media (max-width: 991.98px) {

    .ssm-footer__main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 45px 35px;

        padding-top: 65px;
        padding-bottom: 55px;
    }

    .ssm-footer__brand {
        max-width: 100%;
    }

    .ssm-footer__cta {
        gap: 35px;
    }

    .ssm-footer__bottom {
        grid-template-columns:
            1fr 1fr;
    }

    .ssm-footer__legal {
        justify-content: flex-end;
    }

    .ssm-footer__powered {
        grid-column: 1 / -1;

        text-align: left;
    }

}


@media (max-width: 767.98px) {

    .ssm-footer__main {
        grid-template-columns: 1fr;

        gap: 35px;

        padding-top: 55px;
        padding-bottom: 45px;
    }

    .ssm-footer__cta {
        flex-direction: column;

        align-items: stretch;

        justify-content: center;

        gap: 25px;

        min-height: auto;

        padding:
            28px 22px;

        text-align: left;
    }

    .ssm-footer__cta-title {
        font-size: 1.8rem;
    }

    .ssm-footer__cta-button {
        width: 100%;
    }

    .ssm-footer__bottom {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 14px;

        margin-top: 28px;
    }

    .ssm-footer__legal {
        justify-content: flex-start;

        gap: 10px 18px;
    }

    .ssm-footer__powered {
        text-align: left;
    }

    #back-to-top,
    .ssm-back-to-top,
    .back-to-top {
        right: 16px;
        bottom: 16px;

        width: 43px;
        height: 43px;
    }

}


@media (max-width: 575.98px) {

    .ssm-footer__cta {
        padding:
            24px 18px;

        border-radius: 14px;
    }

    .ssm-footer__cta-title {
        font-size: 1.6rem;
    }

    .ssm-footer__cta-text {
        font-size: 12px;
    }

}

/*
|--------------------------------------------------------------------------
| SSM HERO
|--------------------------------------------------------------------------
*/

.ssm-hero {
    position: relative;

    min-height: 680px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 45%,
            rgba(229, 9, 20, 0.12) 0%,
            rgba(229, 9, 20, 0.035) 24%,
            transparent 52%
        ),
        #080808;

    color: #ffffff;
}


/*
|--------------------------------------------------------------------------
| Hero Background Decoration
|--------------------------------------------------------------------------
*/

.ssm-hero__background {
    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    overflow: hidden;
}

.ssm-hero__background-word {
    position: absolute;

    right: -30px;
    bottom: -35px;

    color: rgba(255, 255, 255, 0.018);

    font-size: clamp(
        8rem,
        19vw,
        18rem
    );

    font-weight: 900;

    line-height: 0.8;

    letter-spacing: -0.08em;

    user-select: none;
}

.ssm-hero__background-line {
    position: absolute;

    top: 0;
    right: 20%;

    width: 1px;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255, 255, 255, 0.07),
            transparent
        );

    transform:
        rotate(18deg)
        scaleY(1.5);

    transform-origin: center;
}


/*
|--------------------------------------------------------------------------
| Inner Layout
|--------------------------------------------------------------------------
*/

.ssm-hero__inner {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(480px, 1.08fr);

    align-items: center;

    gap: clamp(
        45px,
        6vw,
        100px
    );

    min-height: 680px;

    padding:
        70px 0;
}


/*
|--------------------------------------------------------------------------
| Hero Content
|--------------------------------------------------------------------------
*/

.ssm-hero__content {
    position: relative;

    z-index: 3;

    max-width: 600px;
}


/*
|--------------------------------------------------------------------------
| Eyebrow
|--------------------------------------------------------------------------
*/

.ssm-hero__eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: #e50914;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.16em;

    line-height: 1.2;

    text-transform: uppercase;
}

.ssm-hero__eyebrow-line {
    display: block;

    width: 30px;
    height: 2px;

    background: #e50914;
}


/*
|--------------------------------------------------------------------------
| Main Heading
|--------------------------------------------------------------------------
*/

.ssm-hero__title {
    max-width: 650px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(
        3rem,
        5.5vw,
        5.4rem
    );

    font-weight: 850;

    line-height: 0.98;

    letter-spacing: -0.055em;
}


/*
|--------------------------------------------------------------------------
| Description
|--------------------------------------------------------------------------
*/

.ssm-hero__description {
    max-width: 535px;

    margin:
        25px 0 0;

    color: #a2a2a2;

    font-size: 15px;

    line-height: 1.8;
}


/*
|--------------------------------------------------------------------------
| Hero Actions
|--------------------------------------------------------------------------
*/

.ssm-hero__actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;
}


/*
|--------------------------------------------------------------------------
| Hero Buttons
|--------------------------------------------------------------------------
*/

.ssm-hero__button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 52px;

    padding:
        13px 21px;

    border-radius: 8px;

    font-size: 13px;
    font-weight: 800;

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}


/*
|--------------------------------------------------------------------------
| Primary Button
|--------------------------------------------------------------------------
*/

.ssm-hero__button--primary {
    border:
        1px solid #e50914;

    background: #e50914;

    color: #ffffff;
}

.ssm-hero__button--primary:hover {
    border-color: #ff1a25;

    background: #ff1a25;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(229, 9, 20, 0.22);
}

.ssm-hero__button--primary i {
    transition:
        transform 180ms ease;
}

.ssm-hero__button--primary:hover i {
    transform: translateX(4px);
}


/*
|--------------------------------------------------------------------------
| Secondary Button
|--------------------------------------------------------------------------
*/

.ssm-hero__button--secondary {
    border:
        1px solid #303030;

    background: rgba(255, 255, 255, 0.025);

    color: #ffffff;
}

.ssm-hero__button--secondary:hover {
    border-color: #454545;

    background: #151515;

    color: #ffffff;

    transform: translateY(-2px);
}

.ssm-hero__button--secondary .fa-whatsapp {
    color: #25d366;

    font-size: 15px;
}


/*
|--------------------------------------------------------------------------
| Trust Points
|--------------------------------------------------------------------------
*/

.ssm-hero__trust {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 34px;

    padding-top: 23px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);
}

.ssm-hero__trust-item {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #898989;

    font-size: 11px;
    font-weight: 700;

    line-height: 1.3;
}

.ssm-hero__trust-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    color: #e50914;

    font-size: 11px;
}

.ssm-hero__trust-divider {
    width: 1px;
    height: 15px;

    background:
        rgba(255, 255, 255, 0.12);
}


/*
|--------------------------------------------------------------------------
| Client Showcase
|--------------------------------------------------------------------------
*/

.ssm-hero__showcase {
    position: relative;

    width: 100%;

    min-width: 0;
}


/*
|--------------------------------------------------------------------------
| Showcase Heading
|--------------------------------------------------------------------------
*/

.ssm-hero__showcase-heading {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 14px;

    padding-left: 5px;
}

.ssm-hero__showcase-eyebrow {
    color: #ffffff;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.ssm-hero__showcase-count {
    color: #686868;

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.08em;
}


/*
|--------------------------------------------------------------------------
| Slides Container
|--------------------------------------------------------------------------
*/

.ssm-hero__slides {
    position: relative;

    width: 100%;

    aspect-ratio: 1.18 / 1;

    overflow: hidden;

    border-radius: 18px;

    background: #111111;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.38);
}


/*
|--------------------------------------------------------------------------
| Individual Slide
|--------------------------------------------------------------------------
*/

.ssm-hero__slide {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: scale(1.025);

    transition:
        opacity 500ms ease,
        visibility 500ms ease,
        transform 700ms ease;
}

.ssm-hero__slide.is-active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: scale(1);
}


/*
|--------------------------------------------------------------------------
| Client Image
|--------------------------------------------------------------------------
*/

.ssm-hero__image-wrap {
    position: absolute;

    inset: 0;

    overflow: hidden;
}

.ssm-hero__client-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform: scale(1.01);

    transition:
        transform 6s ease;
}

.ssm-hero__slide.is-active
.ssm-hero__client-image {
    transform: scale(1.055);
}


/*
|--------------------------------------------------------------------------
| Image Overlay
|--------------------------------------------------------------------------
*/

.ssm-hero__image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.04) 15%,
            rgba(0, 0, 0, 0.08) 38%,
            rgba(0, 0, 0, 0.82) 100%
        );

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Client Information
|--------------------------------------------------------------------------
*/

.ssm-hero__client-info {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 25px;

    height: 100%;

    margin-top: auto;

    padding:
        28px 30px;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.55),
            transparent
        );
}

.ssm-hero__client-label {
    display: block;

    margin-bottom: 7px;

    color: #e50914;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}

.ssm-hero__client-name {
    margin: 0;

    color: #ffffff;

    font-size: clamp(
        1.45rem,
        2.7vw,
        2.25rem
    );

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -0.035em;
}

.ssm-hero__client-role {
    margin:
        7px 0 0;

    color: rgba(255, 255, 255, 0.7);

    font-size: 12px;

    line-height: 1.4;
}


/*
|--------------------------------------------------------------------------
| Client Corner Icon
|--------------------------------------------------------------------------
*/

.ssm-hero__client-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    border:
        1px solid rgba(255, 255, 255, 0.22);

    border-radius: 50%;

    background:
        rgba(0, 0, 0, 0.28);

    color: #ffffff;

    font-size: 12px;

    backdrop-filter: blur(8px);
}


/*
|--------------------------------------------------------------------------
| Slider Controls
|--------------------------------------------------------------------------
*/

.ssm-hero__controls {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 18px;
}


/*
|--------------------------------------------------------------------------
| Arrow Buttons
|--------------------------------------------------------------------------
*/

.ssm-hero__control {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    padding: 0;

    border:
        1px solid #292929;

    border-radius: 50%;

    background: #111111;

    color: #ffffff;

    font-size: 11px;

    cursor: pointer;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.ssm-hero__control:hover {
    border-color: #e50914;

    background: #e50914;

    color: #ffffff;

    transform: translateY(-2px);
}

.ssm-hero__control:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px
        rgba(229, 9, 20, 0.25);
}


/*
|--------------------------------------------------------------------------
| Progress Indicators
|--------------------------------------------------------------------------
*/

.ssm-hero__progress {
    display: flex;

    align-items: center;

    flex: 1 1 auto;

    gap: 6px;

    min-width: 0;
}

.ssm-hero__indicator {
    position: relative;

    display: block;

    flex: 1 1 0;

    width: auto;
    max-width: 60px;
    height: 3px;

    padding: 0;

    border: 0;

    border-radius: 999px;

    background: #292929;

    cursor: pointer;

    overflow: hidden;

    transition:
        background-color 180ms ease;
}

.ssm-hero__indicator::after {
    content: "";

    position: absolute;

    inset: 0;

    width: 0;

    border-radius: inherit;

    background: #e50914;

    transition:
        width 180ms ease;
}

.ssm-hero__indicator.is-active {
    background: #414141;
}

.ssm-hero__indicator.is-active::after {
    width: 100%;
}

.ssm-hero__indicator:hover {
    background: #555555;
}

.ssm-hero__indicator:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px
        rgba(229, 9, 20, 0.22);
}


/*
|--------------------------------------------------------------------------
| Empty State
|--------------------------------------------------------------------------
*/

.ssm-hero__empty {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    aspect-ratio: 1.18 / 1;

    border:
        1px solid #222222;

    border-radius: 18px;

    background: #111111;

    text-align: center;
}

.ssm-hero__empty-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    margin-bottom: 15px;

    border-radius: 50%;

    background:
        rgba(229, 9, 20, 0.1);

    color: #e50914;

    font-size: 18px;
}

.ssm-hero__empty-text {
    margin: 0;

    color: #777777;

    font-size: 13px;
}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .ssm-hero *,
    .ssm-hero *::before,
    .ssm-hero *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

    .ssm-hero__client-image {
        transform: none !important;
    }

}

/*
|--------------------------------------------------------------------------
| SSM HERO — FINAL VISUAL OVERRIDES
|--------------------------------------------------------------------------
*/

.ssm-hero {
    min-height: 620px;
}

.ssm-hero__inner {
    min-height: 620px;

    padding-top: 55px;
    padding-bottom: 55px;

    gap: clamp(40px, 5vw, 75px);
}

.ssm-hero__title {
    font-size: clamp(
        2.8rem,
        5vw,
        4.8rem
    );
}

.ssm-hero__description {
    margin-top: 20px;
}

.ssm-hero__actions {
    margin-top: 27px;
}

.ssm-hero__button {
    font-size: 12px;

    padding-left: 19px;
    padding-right: 19px;
}

.ssm-hero__trust {
    margin-top: 28px;
    padding-top: 19px;
}

.ssm-hero__slides {
    aspect-ratio: 1.28 / 1;
}

@media (max-width: 767.98px) {

    .ssm-hero {
        min-height: auto;
    }

    .ssm-hero__inner {
        min-height: auto;

        gap: 30px;

        padding-top: 42px;
        padding-bottom: 38px;
    }

    .ssm-hero__eyebrow {
        margin-bottom: 13px;
    }

    .ssm-hero__title {
        font-size: clamp(
            2.15rem,
            10.5vw,
            3rem
        );

        line-height: 1.02;
    }

    .ssm-hero__description {
        margin-top: 16px;

        font-size: 13px;

        line-height: 1.65;
    }

    .ssm-hero__actions {
        gap: 8px;

        margin-top: 22px;
    }

    .ssm-hero__button {
        justify-content: flex-start;

        min-height: 47px;

        padding:
            11px 18px;

        font-size: 12px;
    }

    .ssm-hero__button i {
        font-size: 12px;
    }

    .ssm-hero__trust {
        gap: 10px;

        margin-top: 22px;

        padding-top: 16px;
    }

    .ssm-hero__trust-item {
        font-size: 9.5px;
    }

    .ssm-hero__showcase-heading {
        margin-bottom: 9px;
    }

    .ssm-hero__slides {
        aspect-ratio: 1.05 / 1;

        border-radius: 12px;
    }

}

/*
|--------------------------------------------------------------------------
| Hero Client Icon
|--------------------------------------------------------------------------
*/

.ssm-hero__client-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(255, 255, 255, 0.22);

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.28);

    color: #ffffff;

    backdrop-filter: blur(8px);

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.ssm-hero__client-arrow {
    position: relative;

    display: block;

    width: 12px;
    height: 12px;

    border-top: 1.5px solid #ffffff;
    border-right: 1.5px solid #ffffff;

    transform: rotate(45deg);
}

.ssm-hero__client-icon:hover {
    border-color: #e50914;

    background: #e50914;

    transform: translateY(-2px);
}


/*
|--------------------------------------------------------------------------
| SSM ABOUT
|--------------------------------------------------------------------------
*/

.ssm-about {
    position: relative;

    overflow: hidden;

    padding:
        105px 0
        110px;

    background: #ffffff;

    color: #111111;
}


/*
|--------------------------------------------------------------------------
| Background Decoration
|--------------------------------------------------------------------------
*/

.ssm-about__background {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}

.ssm-about__background-word {
    position: absolute;

    right: -45px;
    bottom: -35px;

    color: rgba(17, 17, 17, 0.025);

    font-size: clamp(
        9rem,
        18vw,
        18rem
    );

    font-weight: 900;

    line-height: 0.8;

    letter-spacing: -0.08em;

    user-select: none;
}


/*
|--------------------------------------------------------------------------
| Main Layout
|--------------------------------------------------------------------------
*/

.ssm-about__inner {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(360px, 0.9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: clamp(
        60px,
        8vw,
        125px
    );
}


/*
|--------------------------------------------------------------------------
| Visual
|--------------------------------------------------------------------------
*/

.ssm-about__visual {
    position: relative;

    min-width: 0;
}


/*
|--------------------------------------------------------------------------
| Image Wrapper
|--------------------------------------------------------------------------
*/

.ssm-about__image-wrap {
    position: relative;

    width: 100%;

    aspect-ratio: 0.86 / 1;

    overflow: hidden;

    border-radius: 18px;

    background: #eeeeee;

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.10);
}


/*
|--------------------------------------------------------------------------
| Image
|--------------------------------------------------------------------------
*/

.ssm-about__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 700ms ease;
}

.ssm-about__image-wrap:hover
.ssm-about__image {
    transform: scale(1.025);
}


/*
|--------------------------------------------------------------------------
| Image Overlay
|--------------------------------------------------------------------------
*/

.ssm-about__image-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent 48%,
            rgba(0, 0, 0, 0.58) 100%
        );
}


/*
|--------------------------------------------------------------------------
| Identity Card
|--------------------------------------------------------------------------
*/

.ssm-about__identity {
    position: absolute;

    right: 22px;
    bottom: 22px;

    z-index: 3;

    display: flex;

    align-items: center;

    gap: 12px;

    max-width: calc(100% - 44px);

    padding:
        13px 16px;

    border:
        1px solid rgba(255, 255, 255, 0.20);

    border-radius: 11px;

    background:
        rgba(0, 0, 0, 0.58);

    color: #ffffff;

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);
}


/*
|--------------------------------------------------------------------------
| Identity Icon
|--------------------------------------------------------------------------
*/

.ssm-about__identity-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    border-radius: 9px;

    background: #e50914;

    color: #ffffff;

    font-size: 13px;
}


/*
|--------------------------------------------------------------------------
| Identity Content
|--------------------------------------------------------------------------
*/

.ssm-about__identity-content {
    display: flex;

    flex-direction: column;

    min-width: 0;
}

.ssm-about__identity-content strong {
    display: block;

    overflow: hidden;

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    line-height: 1.3;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.ssm-about__identity-content small {
    display: block;

    margin-top: 3px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 9px;
    font-weight: 600;

    line-height: 1.35;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Visual Number
|--------------------------------------------------------------------------
*/

.ssm-about__visual-number {
    position: absolute;

    top: -23px;
    left: -23px;

    z-index: -1;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 74px;
    height: 74px;

    border-radius: 50%;

    background: #e50914;

    color: #ffffff;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 0.08em;

    box-shadow:
        0 12px 30px rgba(229, 9, 20, 0.18);
}


/*
|--------------------------------------------------------------------------
| Content
|--------------------------------------------------------------------------
*/

.ssm-about__content {
    max-width: 650px;
}


/*
|--------------------------------------------------------------------------
| Eyebrow
|--------------------------------------------------------------------------
*/

.ssm-about__eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 19px;

    color: #e50914;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.16em;

    line-height: 1.2;

    text-transform: uppercase;
}

.ssm-about__eyebrow-line {
    display: block;

    width: 28px;
    height: 2px;

    background: #e50914;
}


/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/

.ssm-about__title {
    max-width: 620px;

    margin: 0;

    color: #101010;

    font-size: clamp(
        2.4rem,
        4.4vw,
        4.3rem
    );

    font-weight: 850;

    line-height: 1;

    letter-spacing: -0.055em;
}


/*
|--------------------------------------------------------------------------
| Description
|--------------------------------------------------------------------------
*/

.ssm-about__description {
    max-width: 590px;

    margin:
        24px 0 0;

    color: #555555;

    font-size: 15px;

    line-height: 1.85;
}

.ssm-about__description--secondary {
    margin-top: 12px;

    color: #777777;

    font-size: 13px;

    line-height: 1.75;
}


/*
|--------------------------------------------------------------------------
| Feature Grid
|--------------------------------------------------------------------------
*/

.ssm-about__features {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 13px 15px;

    margin-top: 30px;
}


/*
|--------------------------------------------------------------------------
| Feature
|--------------------------------------------------------------------------
*/

.ssm-about__feature {
    display: flex;

    align-items: flex-start;

    gap: 11px;

    min-width: 0;

    padding:
        15px 14px;

    border:
        1px solid #eeeeee;

    border-radius: 10px;

    background: #fafafa;

    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ssm-about__feature:hover {
    border-color: #e8e8e8;

    background: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.06);
}


/*
|--------------------------------------------------------------------------
| Feature Icon
|--------------------------------------------------------------------------
*/

.ssm-about__feature-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    border-radius: 8px;

    background:
        rgba(229, 9, 20, 0.08);

    color: #e50914;

    font-size: 12px;
}


/*
|--------------------------------------------------------------------------
| Feature Content
|--------------------------------------------------------------------------
*/

.ssm-about__feature-content {
    display: flex;

    flex-direction: column;

    min-width: 0;
}

.ssm-about__feature-content strong {
    color: #171717;

    font-size: 11px;
    font-weight: 800;

    line-height: 1.35;
}

.ssm-about__feature-content small {
    margin-top: 4px;

    color: #888888;

    font-size: 9px;
    font-weight: 500;

    line-height: 1.45;
}


/*
|--------------------------------------------------------------------------
| Actions
|--------------------------------------------------------------------------
*/

.ssm-about__actions {
    display: flex;

    align-items: center;

    margin-top: 31px;
}


/*
|--------------------------------------------------------------------------
| About Button
|--------------------------------------------------------------------------
*/

.ssm-about__button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 11px;

    min-height: 49px;

    padding:
        13px 20px;

    border:
        1px solid #e50914;

    border-radius: 8px;

    background: #e50914;

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    line-height: 1;

    text-decoration: none;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ssm-about__button i {
    font-size: 10px;

    transition:
        transform 180ms ease;
}

.ssm-about__button:hover {
    border-color: #111111;

    background: #111111;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.14);
}

.ssm-about__button:hover i {
    transform: translateX(4px);
}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .ssm-about *,
    .ssm-about *::before,
    .ssm-about *::after {
        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

    .ssm-about__image {
        transform: none !important;
    }

}




/*
|--------------------------------------------------------------------------
| SSM SERVICES
|--------------------------------------------------------------------------
*/

.ssm-services {
    position: relative;

    overflow: hidden;

    padding:
        105px 0
        110px;

    background: #f5f5f3;

    color: #171717;
}


/*
|--------------------------------------------------------------------------
| Background Decoration
|--------------------------------------------------------------------------
*/

.ssm-services__background {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}

.ssm-services__background-word {
    position: absolute;

    left: -55px;
    bottom: -35px;

    color: rgba(23, 23, 23, 0.028);

    font-size: clamp(
        8rem,
        17vw,
        17rem
    );

    font-weight: 900;

    line-height: 0.8;

    letter-spacing: -0.08em;

    user-select: none;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.ssm-services__header {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(280px, 0.9fr);

    align-items: end;

    gap: 60px;

    margin-bottom: 45px;
}


/*
|--------------------------------------------------------------------------
| Heading
|--------------------------------------------------------------------------
*/

.ssm-services__heading {
    max-width: 680px;
}


/*
|--------------------------------------------------------------------------
| Eyebrow
|--------------------------------------------------------------------------
*/

.ssm-services__eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: #e50914;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.16em;

    line-height: 1.2;

    text-transform: uppercase;
}

.ssm-services__eyebrow-line {
    display: block;

    width: 28px;
    height: 2px;

    background: #e50914;
}


/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/

.ssm-services__title {
    max-width: 650px;

    margin: 0;

    color: #171717;

    font-size: clamp(
        2.45rem,
        4.5vw,
        4.35rem
    );

    font-weight: 850;

    line-height: 0.98;

    letter-spacing: -0.055em;
}


/*
|--------------------------------------------------------------------------
| Intro
|--------------------------------------------------------------------------
*/

.ssm-services__intro {
    max-width: 430px;

    justify-self: end;
}

.ssm-services__description {
    margin: 0;

    color: #666666;

    font-size: 14px;

    line-height: 1.8;
}


/*
|--------------------------------------------------------------------------
| Services Grid
|--------------------------------------------------------------------------
*/

.ssm-services__grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;
}


/*
|--------------------------------------------------------------------------
| Service Card
|--------------------------------------------------------------------------
*/

.ssm-services__card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    min-height: 285px;

    border:
        1px solid #e4e4e1;

    border-radius: 14px;

    background: #ffffff;

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.ssm-services__card:hover {
    border-color: #d8d8d5;

    transform: translateY(-5px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.08);
}


/*
|--------------------------------------------------------------------------
| Card Image
|--------------------------------------------------------------------------
*/

.ssm-services__card-image {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;
}

.ssm-services__card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0.92;

    transition:
        transform 600ms ease;
}

.ssm-services__card:hover
.ssm-services__card-image img {
    transform: scale(1.05);
}


/*
|--------------------------------------------------------------------------
| Card Image Overlay
|--------------------------------------------------------------------------
*/

.ssm-services__card-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.04) 20%,
            rgba(0, 0, 0, 0.82) 100%
        );
}


/*
|--------------------------------------------------------------------------
| Card Content
|--------------------------------------------------------------------------
*/

.ssm-services__card-content {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    min-height: 285px;

    padding:
        24px 23px;
}


/*
|--------------------------------------------------------------------------
| Card Number
|--------------------------------------------------------------------------
*/

.ssm-services__card-number {
    position: absolute;

    top: 20px;
    right: 21px;

    color: #c8c8c5;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.08em;
}

.ssm-services__card:hover
.ssm-services__card-number {
    color: #e50914;
}


/*
|--------------------------------------------------------------------------
| Card Icon
|--------------------------------------------------------------------------
*/

.ssm-services__card-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    margin-bottom: auto;

    border-radius: 10px;

    background:
        rgba(229, 9, 20, 0.08);

    color: #e50914;

    font-size: 14px;

    transition:
        background-color 200ms ease,
        color 200ms ease,
        transform 200ms ease;
}

.ssm-services__card:hover
.ssm-services__card-icon {
    background: #e50914;

    color: #ffffff;

    transform: translateY(-2px);
}


/*
|--------------------------------------------------------------------------
| Card Body
|--------------------------------------------------------------------------
*/

.ssm-services__card-body {
    position: relative;

    max-width: 90%;

    margin-top: 25px;
}


/*
|--------------------------------------------------------------------------
| Card Title
|--------------------------------------------------------------------------
*/

.ssm-services__card-title {
    margin: 0;

    color: #171717;

    font-size: 18px;
    font-weight: 850;

    line-height: 1.15;

    letter-spacing: -0.025em;

    transition:
        color 180ms ease;
}

.ssm-services__card:hover
.ssm-services__card-title {
    color: #e50914;
}


/*
|--------------------------------------------------------------------------
| Card Description
|--------------------------------------------------------------------------
*/

.ssm-services__card-description {
    max-width: 320px;

    margin:
        9px 0 0;

    color: #777777;

    font-size: 11px;

    line-height: 1.65;
}


/*
|--------------------------------------------------------------------------
| Card Price
|--------------------------------------------------------------------------
*/

.ssm-services__card-price {
    display: inline-flex;

    align-items: baseline;

    gap: 5px;

    margin-top: 12px;
}

.ssm-services__card-price span {
    color: #999999;

    font-size: 9px;
}

.ssm-services__card-price strong {
    color: #333333;

    font-size: 11px;
    font-weight: 800;
}


/*
|--------------------------------------------------------------------------
| Card Link
|--------------------------------------------------------------------------
*/

.ssm-services__card-link {
    position: absolute;

    right: 22px;
    bottom: 21px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border:
        1px solid #e3e3e0;

    border-radius: 50%;

    background: #ffffff;

    color: #171717;

    font-size: 10px;

    text-decoration: none;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.ssm-services__card-link:hover {
    border-color: #e50914;

    background: #e50914;

    color: #ffffff;

    transform: translateX(3px);
}


/*
|--------------------------------------------------------------------------
| Image Card Variant
|--------------------------------------------------------------------------
|
| When a service has an image, text switches to white so it remains
| readable over the image.
|
*/

.ssm-services__card:has(
    .ssm-services__card-image
) .ssm-services__card-title {
    color: #ffffff;
}

.ssm-services__card:has(
    .ssm-services__card-image
) .ssm-services__card-description {
    color: rgba(255, 255, 255, 0.72);
}

.ssm-services__card:has(
    .ssm-services__card-image
) .ssm-services__card-number {
    color: rgba(255, 255, 255, 0.55);
}

.ssm-services__card:has(
    .ssm-services__card-image
) .ssm-services__card-link {
    border-color: rgba(255, 255, 255, 0.25);

    background:
        rgba(0, 0, 0, 0.25);

    color: #ffffff;

    backdrop-filter: blur(8px);
}


/*
|--------------------------------------------------------------------------
| Footer / CTA
|--------------------------------------------------------------------------
*/

.ssm-services__footer {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content: center;

    margin-top: 38px;
}


/*
|--------------------------------------------------------------------------
| View All Button
|--------------------------------------------------------------------------
*/

.ssm-services__button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding:
        12px 19px;

    border:
        1px solid #e50914;

    border-radius: 8px;

    background: #e50914;

    color: #ffffff;

    font-size: 11px;
    font-weight: 800;

    line-height: 1;

    text-decoration: none;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ssm-services__button i {
    font-size: 9px;

    transition:
        transform 180ms ease;
}

.ssm-services__button:hover {
    border-color: #171717;

    background: #171717;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.12);
}

.ssm-services__button:hover i {
    transform: translateX(4px);
}


/*
|--------------------------------------------------------------------------
| Empty State
|--------------------------------------------------------------------------
*/

.ssm-services__empty {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 260px;

    padding: 40px;

    border:
        1px solid #e4e4e1;

    border-radius: 14px;

    background: #ffffff;

    text-align: center;
}

.ssm-services__empty-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    margin-bottom: 15px;

    border-radius: 50%;

    background:
        rgba(229, 9, 20, 0.08);

    color: #e50914;

    font-size: 16px;
}

.ssm-services__empty-title {
    margin: 0;

    color: #171717;

    font-size: 18px;
    font-weight: 800;
}

.ssm-services__empty-text {
    max-width: 400px;

    margin:
        8px 0 0;

    color: #777777;

    font-size: 12px;

    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .ssm-services *,
    .ssm-services *::before,
    .ssm-services *::after {
        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

    .ssm-services__card-image img {
        transform: none !important;
    }

}


/*
|--------------------------------------------------------------------------
| SSM WHY
|--------------------------------------------------------------------------
*/

.ssm-why {
    position: relative;

    overflow: hidden;

    padding:
        105px 0
        110px;

    background: #ffffff;

    color: #171717;
}


/*
|--------------------------------------------------------------------------
| Background Decoration
|--------------------------------------------------------------------------
*/

.ssm-why__background {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}

.ssm-why__background-word {
    position: absolute;

    right: -45px;
    bottom: -40px;

    color: rgba(23, 23, 23, 0.025);

    font-size: clamp(
        10rem,
        19vw,
        19rem
    );

    font-weight: 900;

    line-height: 0.8;

    letter-spacing: -0.08em;

    user-select: none;
}


/*
|--------------------------------------------------------------------------
| Main Layout
|--------------------------------------------------------------------------
*/

.ssm-why__inner {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(360px, 0.92fr)
        minmax(0, 1.08fr);

    align-items: center;

    gap: clamp(
        60px,
        8vw,
        120px
    );
}


/*
|--------------------------------------------------------------------------
| Visual
|--------------------------------------------------------------------------
*/

.ssm-why__visual {
    position: relative;

    min-width: 0;
}

.ssm-why__image-wrap {
    position: relative;

    width: 100%;

    aspect-ratio: 0.9 / 1;

    overflow: hidden;

    border-radius: 18px;

    background: #eeeeeb;

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.10);
}


/*
|--------------------------------------------------------------------------
| Image
|--------------------------------------------------------------------------
*/

.ssm-why__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 700ms ease;
}

.ssm-why__image-wrap:hover
.ssm-why__image {
    transform: scale(1.025);
}


/*
|--------------------------------------------------------------------------
| Image Overlay
|--------------------------------------------------------------------------
*/

.ssm-why__image-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent 40%,
            rgba(0, 0, 0, 0.65) 100%
        );
}


/*
|--------------------------------------------------------------------------
| Visual Label
|--------------------------------------------------------------------------
*/

.ssm-why__visual-label {
    position: absolute;

    right: 20px;
    bottom: 20px;

    z-index: 3;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    max-width:
        calc(100% - 40px);

    padding:
        11px 14px;

    border:
        1px solid rgba(255, 255, 255, 0.20);

    border-radius: 9px;

    background:
        rgba(0, 0, 0, 0.55);

    color: #ffffff;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.05em;

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);
}

.ssm-why__visual-label-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 31px;
    height: 31px;

    border-radius: 7px;

    background: #e50914;

    color: #ffffff;

    font-size: 10px;
}


/*
|--------------------------------------------------------------------------
| Visual Number
|--------------------------------------------------------------------------
*/

.ssm-why__visual-number {
    position: absolute;

    top: -23px;
    left: -23px;

    z-index: -1;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 74px;
    height: 74px;

    border-radius: 50%;

    background: #171717;

    color: #ffffff;

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.08em;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.15);
}


/*
|--------------------------------------------------------------------------
| Content
|--------------------------------------------------------------------------
*/

.ssm-why__content {
    max-width: 650px;
}


/*
|--------------------------------------------------------------------------
| Eyebrow
|--------------------------------------------------------------------------
*/

.ssm-why__eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 19px;

    color: #e50914;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.16em;

    line-height: 1.2;

    text-transform: uppercase;
}

.ssm-why__eyebrow-line {
    display: block;

    width: 28px;
    height: 2px;

    background: #e50914;
}


/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/

.ssm-why__title {
    max-width: 620px;

    margin: 0;

    color: #171717;

    font-size: clamp(
        2.4rem,
        4.4vw,
        4.25rem
    );

    font-weight: 850;

    line-height: 1;

    letter-spacing: -0.055em;
}


/*
|--------------------------------------------------------------------------
| Description
|--------------------------------------------------------------------------
*/

.ssm-why__description {
    max-width: 590px;

    margin:
        24px 0 0;

    color: #626262;

    font-size: 15px;

    line-height: 1.85;
}


/*
|--------------------------------------------------------------------------
| Trust Points
|--------------------------------------------------------------------------
*/

.ssm-why__points {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-top: 30px;
}


/*
|--------------------------------------------------------------------------
| Individual Point
|--------------------------------------------------------------------------
*/

.ssm-why__point {
    display: flex;

    align-items: flex-start;

    gap: 11px;

    min-width: 0;

    padding:
        14px 13px;

    border:
        1px solid #e5e5e2;

    border-radius: 10px;

    background: #f9f9f7;

    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ssm-why__point:hover {
    border-color: #ddddda;

    background: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.06);
}


/*
|--------------------------------------------------------------------------
| Point Icon
|--------------------------------------------------------------------------
*/

.ssm-why__point-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    border-radius: 8px;

    background:
        rgba(229, 9, 20, 0.08);

    color: #e50914;

    font-size: 11px;

    transition:
        background-color 180ms ease,
        color 180ms ease;
}

.ssm-why__point:hover
.ssm-why__point-icon {
    background: #e50914;

    color: #ffffff;
}


/*
|--------------------------------------------------------------------------
| Point Content
|--------------------------------------------------------------------------
*/

.ssm-why__point-content {
    min-width: 0;
}

.ssm-why__point-title {
    margin: 0;

    color: #171717;

    font-size: 11px;
    font-weight: 800;

    line-height: 1.35;
}

.ssm-why__point-description {
    margin:
        4px 0 0;

    color: #858585;

    font-size: 9px;

    line-height: 1.55;
}


/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.ssm-why__actions {
    display: flex;

    align-items: center;

    margin-top: 31px;
}

.ssm-why__button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding:
        12px 19px;

    border:
        1px solid #e50914;

    border-radius: 8px;

    background: #e50914;

    color: #ffffff;

    font-size: 11px;
    font-weight: 800;

    line-height: 1;

    text-decoration: none;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ssm-why__button i {
    font-size: 9px;

    transition:
        transform 180ms ease;
}

.ssm-why__button:hover {
    border-color: #171717;

    background: #171717;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.12);
}

.ssm-why__button:hover i {
    transform: translateX(4px);
}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .ssm-why *,
    .ssm-why *::before,
    .ssm-why *::after {
        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

    .ssm-why__image {
        transform: none !important;
    }

}

/*
|--------------------------------------------------------------------------
| SSM WHY — SOFT BACKGROUND FIX
|--------------------------------------------------------------------------
*/

.ssm-why {
    background-color: #f5f5f3;
}



/*
|--------------------------------------------------------------------------
| SSM CLIENTS
|--------------------------------------------------------------------------
*/

.ssm-clients {
    position: relative;

    overflow: hidden;

    padding:
        105px 0
        110px;

    background: #f5f5f3;

    color: #171717;
}


/*
|--------------------------------------------------------------------------
| Background Decoration
|--------------------------------------------------------------------------
*/

.ssm-clients__background {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}

.ssm-clients__background-word {
    position: absolute;

    right: -55px;
    bottom: -38px;

    color: rgba(23, 23, 23, 0.027);

    font-size: clamp(
        9rem,
        18vw,
        18rem
    );

    font-weight: 900;

    line-height: 0.8;

    letter-spacing: -0.08em;

    user-select: none;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.ssm-clients__header {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(280px, 0.9fr);

    align-items: end;

    gap: 60px;

    margin-bottom: 42px;
}

.ssm-clients__heading {
    max-width: 700px;
}


/*
|--------------------------------------------------------------------------
| Eyebrow
|--------------------------------------------------------------------------
*/

.ssm-clients__eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: #e50914;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.16em;

    line-height: 1.2;

    text-transform: uppercase;
}

.ssm-clients__eyebrow-line {
    display: block;

    width: 28px;
    height: 2px;

    background: #e50914;
}


/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/

.ssm-clients__title {
    max-width: 680px;

    margin: 0;

    color: #171717;

    font-size: clamp(
        2.45rem,
        4.5vw,
        4.3rem
    );

    font-weight: 850;

    line-height: 0.98;

    letter-spacing: -0.055em;
}


/*
|--------------------------------------------------------------------------
| Intro
|--------------------------------------------------------------------------
*/

.ssm-clients__intro {
    max-width: 430px;

    justify-self: end;
}

.ssm-clients__description {
    margin: 0;

    color: #666666;

    font-size: 14px;

    line-height: 1.8;
}


/*
|--------------------------------------------------------------------------
| Viewport
|--------------------------------------------------------------------------
*/

.ssm-clients__viewport {
    position: relative;

    z-index: 2;

    width: 100%;

    overflow: hidden;
}


/*
|--------------------------------------------------------------------------
| Track
|--------------------------------------------------------------------------
*/

.ssm-clients__track {
    display: flex;

    align-items: stretch;

    gap: 16px;

    width: max-content;

    transition:
        transform 500ms cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        );
}


/*
|--------------------------------------------------------------------------
| Client Card
|--------------------------------------------------------------------------
*/

.ssm-clients__card {
    position: relative;

    display: flex;

    flex-direction: column;

    flex: 0 0 250px;

    width: 250px;

    overflow: hidden;

    border:
        1px solid #e3e3e0;

    border-radius: 14px;

    background: #ffffff;

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.ssm-clients__card:hover {
    border-color: #d6d6d3;

    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.08);
}


/*
|--------------------------------------------------------------------------
| Client Image
|--------------------------------------------------------------------------
*/

.ssm-clients__card-image {
    position: relative;

    width: 100%;

    aspect-ratio: 0.95 / 1;

    overflow: hidden;

    background: #e9e9e6;
}

.ssm-clients__card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 600ms ease;
}

.ssm-clients__card:hover
.ssm-clients__card-image img {
    transform: scale(1.045);
}


/*
|--------------------------------------------------------------------------
| Image Overlay
|--------------------------------------------------------------------------
*/

.ssm-clients__card-image-overlay {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent 45%,
            rgba(0, 0, 0, 0.30) 100%
        );
}


/*
|--------------------------------------------------------------------------
| Initial Fallback
|--------------------------------------------------------------------------
*/

.ssm-clients__card-initial {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            135deg,
            #242424,
            #111111
        );

    color: #ffffff;

    font-size: 58px;
    font-weight: 900;

    letter-spacing: -0.05em;
}


/*
|--------------------------------------------------------------------------
| Card Number
|--------------------------------------------------------------------------
*/

.ssm-clients__card-number {
    position: absolute;

    top: 14px;
    right: 14px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 31px;
    height: 25px;

    padding:
        0 7px;

    border:
        1px solid rgba(255, 255, 255, 0.20);

    border-radius: 5px;

    background:
        rgba(0, 0, 0, 0.35);

    color: #ffffff;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.06em;

    backdrop-filter: blur(7px);
}


/*
|--------------------------------------------------------------------------
| Card Content
|--------------------------------------------------------------------------
*/

.ssm-clients__card-content {
    display: flex;

    flex-direction: column;

    flex: 1;

    min-width: 0;

    padding:
        18px 17px
        19px;
}


/*
|--------------------------------------------------------------------------
| Client Name
|--------------------------------------------------------------------------
*/

.ssm-clients__card-name {
    margin: 0;

    color: #171717;

    font-size: 15px;
    font-weight: 850;

    line-height: 1.2;

    letter-spacing: -0.02em;
}


/*
|--------------------------------------------------------------------------
| Client Role
|--------------------------------------------------------------------------
*/

.ssm-clients__card-role {
    display: block;

    margin-top: 5px;

    color: #e50914;

    font-size: 8px;
    font-weight: 800;

    line-height: 1.3;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Client Content
|--------------------------------------------------------------------------
*/

.ssm-clients__card-content-text {
    display: -webkit-box;

    overflow: hidden;

    margin:
        11px 0 0;

    color: #777777;

    font-size: 10px;

    line-height: 1.65;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;
}


/*
|--------------------------------------------------------------------------
| Rating
|--------------------------------------------------------------------------
*/

.ssm-clients__rating {
    display: flex;

    align-items: center;

    gap: 3px;

    margin-top: auto;

    padding-top: 15px;

    color: #e50914;

    font-size: 8px;
}


/*
|--------------------------------------------------------------------------
| Navigation
|--------------------------------------------------------------------------
*/

.ssm-clients__navigation {
    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    margin-top: 28px;
}


/*
|--------------------------------------------------------------------------
| Navigation Buttons
|--------------------------------------------------------------------------
*/

.ssm-clients__nav-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;

    padding: 0;

    border:
        1px solid #dededb;

    border-radius: 50%;

    background: #ffffff;

    color: #171717;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.ssm-clients__nav-button:hover {
    border-color: #e50914;

    background: #e50914;

    color: #ffffff;

    transform: translateY(-2px);
}

.ssm-clients__nav-button:focus-visible {
    outline: none;

    border-color: #e50914;

    box-shadow:
        0 0 0 3px rgba(229, 9, 20, 0.16);
}

.ssm-clients__nav-button i {
    font-size: 9px;
}


/*
|--------------------------------------------------------------------------
| Progress
|--------------------------------------------------------------------------
*/

.ssm-clients__progress {
    position: relative;

    width: 120px;
    height: 2px;

    overflow: hidden;

    background: #dededb;
}

.ssm-clients__progress-bar {
    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 100%;

    background: #e50914;

    transition:
        width 350ms ease;
}


/*
|--------------------------------------------------------------------------
| Footer CTA
|--------------------------------------------------------------------------
*/

.ssm-clients__footer {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content: center;

    margin-top: 36px;
}


/*
|--------------------------------------------------------------------------
| CTA Button
|--------------------------------------------------------------------------
*/

.ssm-clients__button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding:
        12px 19px;

    border:
        1px solid #e50914;

    border-radius: 8px;

    background: #e50914;

    color: #ffffff;

    font-size: 11px;
    font-weight: 800;

    line-height: 1;

    text-decoration: none;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ssm-clients__button i {
    font-size: 9px;

    transition:
        transform 180ms ease;
}

.ssm-clients__button:hover {
    border-color: #171717;

    background: #171717;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.12);
}

.ssm-clients__button:hover i {
    transform: translateX(4px);
}


/*
|--------------------------------------------------------------------------
| Empty State
|--------------------------------------------------------------------------
*/

.ssm-clients__empty {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 240px;

    padding: 35px;

    border:
        1px solid #e3e3e0;

    border-radius: 14px;

    background: #ffffff;

    text-align: center;
}

.ssm-clients__empty-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    margin-bottom: 14px;

    border-radius: 50%;

    background:
        rgba(229, 9, 20, 0.08);

    color: #e50914;

    font-size: 15px;
}

.ssm-clients__empty-title {
    margin: 0;

    color: #171717;

    font-size: 17px;
    font-weight: 800;
}

.ssm-clients__empty-text {
    max-width: 380px;

    margin:
        8px 0 0;

    color: #777777;

    font-size: 11px;

    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .ssm-clients *,
    .ssm-clients *::before,
    .ssm-clients *::after {
        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

}

/*
|--------------------------------------------------------------------------
| SSM PARTNERS
|--------------------------------------------------------------------------
*/

.ssm-partners {
    position: relative;

    overflow: hidden;

    padding:
        105px 0
        110px;

    background: #ffffff;

    color: #171717;
}


/*
|--------------------------------------------------------------------------
| Background Decoration
|--------------------------------------------------------------------------
*/

.ssm-partners__background {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}

.ssm-partners__background-word {
    position: absolute;

    left: -65px;
    bottom: -40px;

    color: rgba(23, 23, 23, 0.025);

    font-size: clamp(
        9rem,
        18vw,
        18rem
    );

    font-weight: 900;

    line-height: 0.8;

    letter-spacing: -0.08em;

    user-select: none;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.ssm-partners__header {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(280px, 0.9fr);

    align-items: end;

    gap: 60px;

    margin-bottom: 42px;
}

.ssm-partners__heading {
    max-width: 700px;
}


/*
|--------------------------------------------------------------------------
| Eyebrow
|--------------------------------------------------------------------------
*/

.ssm-partners__eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: #e50914;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.16em;

    line-height: 1.2;

    text-transform: uppercase;
}

.ssm-partners__eyebrow-line {
    display: block;

    width: 28px;
    height: 2px;

    background: #e50914;
}


/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/

.ssm-partners__title {
    max-width: 680px;

    margin: 0;

    color: #171717;

    font-size: clamp(
        2.45rem,
        4.5vw,
        4.3rem
    );

    font-weight: 850;

    line-height: 0.98;

    letter-spacing: -0.055em;
}


/*
|--------------------------------------------------------------------------
| Intro
|--------------------------------------------------------------------------
*/

.ssm-partners__intro {
    max-width: 430px;

    justify-self: end;
}

.ssm-partners__description {
    margin: 0;

    color: #666666;

    font-size: 14px;

    line-height: 1.8;
}


/*
|--------------------------------------------------------------------------
| Partners Grid
|--------------------------------------------------------------------------
*/

.ssm-partners__grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;
}


/*
|--------------------------------------------------------------------------
| Partner Card
|--------------------------------------------------------------------------
*/

.ssm-partners__card {
    min-width: 0;
}

.ssm-partners__card-link {
    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 190px;

    padding:
        20px 18px;

    overflow: hidden;

    border:
        1px solid #e4e4e1;

    border-radius: 12px;

    background: #f9f9f7;

    color: #171717;

    text-decoration: none;

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background-color 220ms ease,
        box-shadow 220ms ease;
}

a.ssm-partners__card-link:hover {
    border-color: #d7d7d4;

    background: #ffffff;

    transform: translateY(-4px);

    box-shadow:
        0 16px 35px rgba(0, 0, 0, 0.07);
}


/*
|--------------------------------------------------------------------------
| Logo
|--------------------------------------------------------------------------
*/

.ssm-partners__logo {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin-bottom: 20px;

    overflow: hidden;

    border:
        1px solid #e1e1de;

    border-radius: 10px;

    background: #ffffff;

    transition:
        border-color 180ms ease,
        transform 180ms ease;
}

.ssm-partners__card-link:hover
.ssm-partners__logo {
    border-color: #e50914;

    transform: translateY(-2px);
}

.ssm-partners__logo img {
    display: block;

    max-width: 38px;
    max-height: 38px;

    width: auto;
    height: auto;

    object-fit: contain;
}


/*
|--------------------------------------------------------------------------
| Logo Initial
|--------------------------------------------------------------------------
*/

.ssm-partners__logo-initial {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background: #171717;

    color: #ffffff;

    font-size: 21px;
    font-weight: 850;

    letter-spacing: -0.04em;
}


/*
|--------------------------------------------------------------------------
| Content
|--------------------------------------------------------------------------
*/

.ssm-partners__content {
    min-width: 0;

    padding-right: 28px;
}


/*
|--------------------------------------------------------------------------
| Partner Name
|--------------------------------------------------------------------------
*/

.ssm-partners__name {
    margin: 0;

    color: #171717;

    font-size: 14px;
    font-weight: 850;

    line-height: 1.2;

    letter-spacing: -0.02em;
}


/*
|--------------------------------------------------------------------------
| Partner Type
|--------------------------------------------------------------------------
*/

.ssm-partners__type {
    display: block;

    margin-top: 5px;

    color: #e50914;

    font-size: 8px;
    font-weight: 800;

    line-height: 1.3;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Partner Description
|--------------------------------------------------------------------------
*/

.ssm-partners__description-text {
    display: -webkit-box;

    overflow: hidden;

    margin:
        9px 0 0;

    color: #7a7a7a;

    font-size: 9px;

    line-height: 1.6;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;
}


/*
|--------------------------------------------------------------------------
| External / Detail Arrow
|--------------------------------------------------------------------------
*/

.ssm-partners__arrow {
    position: absolute;

    right: 15px;
    bottom: 15px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border:
        1px solid #dededb;

    border-radius: 50%;

    background: #ffffff;

    color: #171717;

    font-size: 8px;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.ssm-partners__card-link:hover
.ssm-partners__arrow {
    border-color: #e50914;

    background: #e50914;

    color: #ffffff;

    transform: translate(2px, -2px);
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.ssm-partners__footer {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content: center;

    margin-top: 36px;
}


/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.ssm-partners__button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding:
        12px 19px;

    border:
        1px solid #e50914;

    border-radius: 8px;

    background: #e50914;

    color: #ffffff;

    font-size: 11px;
    font-weight: 800;

    line-height: 1;

    text-decoration: none;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ssm-partners__button i {
    font-size: 9px;

    transition:
        transform 180ms ease;
}

.ssm-partners__button:hover {
    border-color: #171717;

    background: #171717;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.12);
}

.ssm-partners__button:hover i {
    transform: translateX(4px);
}


/*
|--------------------------------------------------------------------------
| Empty State
|--------------------------------------------------------------------------
*/

.ssm-partners__empty {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 230px;

    padding: 35px;

    border:
        1px solid #e3e3e0;

    border-radius: 14px;

    background: #f9f9f7;

    text-align: center;
}

.ssm-partners__empty-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    margin-bottom: 14px;

    border-radius: 50%;

    background:
        rgba(229, 9, 20, 0.08);

    color: #e50914;

    font-size: 15px;
}

.ssm-partners__empty-title {
    margin: 0;

    color: #171717;

    font-size: 17px;
    font-weight: 800;
}

.ssm-partners__empty-text {
    max-width: 380px;

    margin:
        8px 0 0;

    color: #777777;

    font-size: 11px;

    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .ssm-partners *,
    .ssm-partners *::before,
    .ssm-partners *::after {
        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

}

/*
|--------------------------------------------------------------------------
| SSM APPOINTMENT
|--------------------------------------------------------------------------
*/

.ssm-appointment {
    position: relative;

    overflow: hidden;

    padding:
        95px 0
        100px;

    background: #171717;

    color: #ffffff;
}


/*
|--------------------------------------------------------------------------
| Inner
|--------------------------------------------------------------------------
*/

.ssm-appointment__inner {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 70px;

    min-height: 280px;

    padding:
        52px 55px;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #202020 0%,
            #171717 60%,
            #111111 100%
        );

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.18);
}


/*
|--------------------------------------------------------------------------
| Decorative Number
|--------------------------------------------------------------------------
*/

.ssm-appointment__number {
    position: absolute;

    top: -45px;
    right: 32%;

    color: rgba(255, 255, 255, 0.025);

    font-size: 12rem;
    font-weight: 900;

    line-height: 1;

    letter-spacing: -0.08em;

    user-select: none;

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Content
|--------------------------------------------------------------------------
*/

.ssm-appointment__content {
    position: relative;

    z-index: 2;

    max-width: 680px;
}


/*
|--------------------------------------------------------------------------
| Eyebrow
|--------------------------------------------------------------------------
*/

.ssm-appointment__eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

    color: #e50914;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.16em;

    line-height: 1.2;

    text-transform: uppercase;
}

.ssm-appointment__eyebrow-line {
    display: block;

    width: 28px;
    height: 2px;

    background: #e50914;
}


/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/

.ssm-appointment__title {
    max-width: 650px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(
        2.5rem,
        4.7vw,
        4.5rem
    );

    font-weight: 850;

    line-height: 0.96;

    letter-spacing: -0.055em;
}


/*
|--------------------------------------------------------------------------
| Description
|--------------------------------------------------------------------------
*/

.ssm-appointment__description {
    max-width: 570px;

    margin:
        18px 0 0;

    color: #aaaaaa;

    font-size: 13px;

    line-height: 1.75;
}


/*
|--------------------------------------------------------------------------
| Meta
|--------------------------------------------------------------------------
*/

.ssm-appointment__meta {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 18px;

    color: #858585;

    font-size: 9px;

    line-height: 1.4;
}

.ssm-appointment__meta-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    color: #e50914;

    font-size: 8px;
}


/*
|--------------------------------------------------------------------------
| Actions
|--------------------------------------------------------------------------
*/

.ssm-appointment__actions {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 9px;

    width: 180px;

    flex-shrink: 0;
}


/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.ssm-appointment__button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding:
        12px 17px;

    border-radius: 8px;

    font-size: 10px;
    font-weight: 800;

    line-height: 1;

    text-decoration: none;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}


/*
|--------------------------------------------------------------------------
| Primary Button
|--------------------------------------------------------------------------
*/

.ssm-appointment__button--primary {
    border:
        1px solid #e50914;

    background: #e50914;

    color: #ffffff;
}

.ssm-appointment__button--primary:hover {
    border-color: #ffffff;

    background: #ffffff;

    color: #171717;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.20);
}

.ssm-appointment__button--primary i {
    font-size: 8px;

    transition:
        transform 180ms ease;
}

.ssm-appointment__button--primary:hover i {
    transform: translateX(4px);
}


/*
|--------------------------------------------------------------------------
| WhatsApp Button
|--------------------------------------------------------------------------
*/

.ssm-appointment__button--whatsapp {
    border:
        1px solid rgba(255, 255, 255, 0.14);

    background:
        rgba(255, 255, 255, 0.05);

    color: #ffffff;
}

.ssm-appointment__button--whatsapp:hover {
    border-color: rgba(255, 255, 255, 0.30);

    background:
        rgba(255, 255, 255, 0.10);

    color: #ffffff;

    transform: translateY(-2px);
}


/*
|--------------------------------------------------------------------------
| WhatsApp Icon
|--------------------------------------------------------------------------
*/

.ssm-appointment__whatsapp-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: #25d366;

    color: #ffffff;

    font-size: 10px;
}


/*
|--------------------------------------------------------------------------
| Background
|--------------------------------------------------------------------------
*/

.ssm-appointment__background {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}

.ssm-appointment__background::before {
    content: "";

    position: absolute;

    top: -180px;
    right: -120px;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(229, 9, 20, 0.13) 0%,
            rgba(229, 9, 20, 0.04) 35%,
            transparent 70%
        );
}

.ssm-appointment__background-word {
    position: absolute;

    right: -45px;
    bottom: -35px;

    color: rgba(255, 255, 255, 0.025);

    font-size: clamp(
        7rem,
        16vw,
        15rem
    );

    font-weight: 900;

    line-height: 0.8;

    letter-spacing: -0.09em;

    user-select: none;
}


/*
|--------------------------------------------------------------------------
| Focus
|--------------------------------------------------------------------------
*/

.ssm-appointment__button:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px rgba(229, 9, 20, 0.35);
}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .ssm-appointment *,
    .ssm-appointment *::before,
    .ssm-appointment *::after {
        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

}

/*
|--------------------------------------------------------------------------
| SSM RETRY FOOTER
|--------------------------------------------------------------------------
*/

.ssm-retry-footer {
    position: relative;

    overflow: hidden;

    background: #111111;

    color: #ffffff;
}


/*
|--------------------------------------------------------------------------
| Main
|--------------------------------------------------------------------------
*/

.ssm-retry-footer__main {
    display: grid;

    grid-template-columns:
        minmax(260px, 1.45fr)
        minmax(140px, 0.7fr)
        minmax(170px, 0.85fr)
        minmax(240px, 1fr);

    gap: 55px;

    padding:
        78px 0
        70px;
}


/*
|--------------------------------------------------------------------------
| Brand
|--------------------------------------------------------------------------
*/

.ssm-retry-footer__brand {
    min-width: 0;
}

.ssm-retry-footer__brand-link {
    display: inline-block;

    color: #ffffff;

    text-decoration: none;
}

.ssm-retry-footer__brand-name {
    display: block;

    max-width: 280px;

    color: #ffffff;

    font-size: 22px;
    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -0.035em;
}

.ssm-retry-footer__tagline {
    display: block;

    margin-top: 12px;

    color: #e50914;

    font-size: 9px;
    font-weight: 800;

    line-height: 1.3;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.ssm-retry-footer__description {
    max-width: 390px;

    margin:
        18px 0 0;

    color: #858585;

    font-size: 11px;

    line-height: 1.8;
}


/*
|--------------------------------------------------------------------------
| Social
|--------------------------------------------------------------------------
*/

.ssm-retry-footer__social {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 25px;
}

.ssm-retry-footer__social-link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border:
        1px solid #2b2b2b;

    border-radius: 50%;

    background: #181818;

    color: #b5b5b5;

    font-size: 11px;

    text-decoration: none;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.ssm-retry-footer__social-link:hover {
    border-color: #e50914;

    background: #e50914;

    color: #ffffff;

    transform: translateY(-2px);
}


/*
|--------------------------------------------------------------------------
| Columns
|--------------------------------------------------------------------------
*/

.ssm-retry-footer__column {
    min-width: 0;
}

.ssm-retry-footer__heading {
    margin:
        0 0 23px;

    color: #ffffff;

    font-size: 10px;
    font-weight: 800;

    line-height: 1.2;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Navigation
|--------------------------------------------------------------------------
*/

.ssm-retry-footer__links {
    display: flex;

    flex-direction: column;

    gap: 13px;

    margin: 0;

    padding: 0;

    list-style: none;
}

.ssm-retry-footer__links a {
    position: relative;

    display: inline-block;

    width: fit-content;

    color: #777777;

    font-size: 11px;

    line-height: 1.4;

    text-decoration: none;

    transition:
        color 180ms ease,
        transform 180ms ease;
}

.ssm-retry-footer__links a::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: -3px;

    width: 0;
    height: 1px;

    background: #e50914;

    transition:
        width 180ms ease;
}

.ssm-retry-footer__links a:hover {
    color: #ffffff;

    transform: translateX(3px);
}

.ssm-retry-footer__links a:hover::before {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Contact
|--------------------------------------------------------------------------
*/

.ssm-retry-footer__contact {
    min-width: 0;
}

.ssm-retry-footer__contact-item {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 15px;

    color: #ffffff;

    text-decoration: none;
}

.ssm-retry-footer__contact-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    flex-shrink: 0;

    border-radius: 9px;

    background:
        rgba(229, 9, 20, 0.10);

    color: #e50914;

    font-size: 10px;

    transition:
        background-color 180ms ease,
        color 180ms ease;
}

.ssm-retry-footer__contact-item:hover
.ssm-retry-footer__contact-icon {
    background: #e50914;

    color: #ffffff;
}

.ssm-retry-footer__contact-content {
    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;
}

.ssm-retry-footer__contact-content small {
    color: #666666;

    font-size: 8px;
    font-weight: 800;

    line-height: 1.2;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.ssm-retry-footer__contact-content strong {
    overflow-wrap: anywhere;

    color: #c9c9c9;

    font-size: 10px;
    font-weight: 500;

    line-height: 1.45;
}


/*
|--------------------------------------------------------------------------
| WhatsApp
|--------------------------------------------------------------------------
*/

.ssm-retry-footer__whatsapp {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 6px;

    min-height: 39px;

    padding:
        9px 13px;

    border:
        1px solid #2c2c2c;

    border-radius: 7px;

    background: #171717;

    color: #ffffff;

    font-size: 9px;
    font-weight: 800;

    text-decoration: none;

    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}

.ssm-retry-footer__whatsapp > i:first-child {
    color: #25d366;

    font-size: 13px;
}

.ssm-retry-footer__whatsapp > i:last-child {
    margin-left: 3px;

    color: #777777;

    font-size: 7px;

    transition:
        transform 180ms ease;
}

.ssm-retry-footer__whatsapp:hover {
    border-color: #25d366;

    background: #1b1b1b;

    transform: translateY(-2px);
}

.ssm-retry-footer__whatsapp:hover
> i:last-child {
    color: #25d366;

    transform: translateX(3px);
}


/*
|--------------------------------------------------------------------------
| Bottom
|--------------------------------------------------------------------------
*/

.ssm-retry-footer__bottom {
    display: grid;

    grid-template-columns:
        1fr auto auto;

    align-items: center;

    gap: 30px;

    min-height: 72px;

    border-top:
        1px solid #252525;
}


/*
|--------------------------------------------------------------------------
| Copyright
|--------------------------------------------------------------------------
*/

.ssm-retry-footer__copyright {
    color: #5f5f5f;

    font-size: 9px;

    line-height: 1.5;
}


/*
|--------------------------------------------------------------------------
| Legal
|--------------------------------------------------------------------------
*/

.ssm-retry-footer__legal {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;
}

.ssm-retry-footer__legal a {
    color: #666666;

    font-size: 9px;

    line-height: 1.4;

    text-decoration: none;

    transition:
        color 180ms ease;
}

.ssm-retry-footer__legal a:hover {
    color: #ffffff;
}


/*
|--------------------------------------------------------------------------
| Back To Top
|--------------------------------------------------------------------------
*/

.ssm-retry-footer__top {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border-radius: 50%;

    background: #e50914;

    color: #ffffff;

    font-size: 11px;

    text-decoration: none;

    transition:
        background-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.ssm-retry-footer__top:hover {
    background: #ffffff;

    color: #171717;

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.25);
}


/*
|--------------------------------------------------------------------------
| Focus
|--------------------------------------------------------------------------
*/

.ssm-retry-footer a:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px rgba(229, 9, 20, 0.35);
}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    .ssm-retry-footer *,
    .ssm-retry-footer *::before,
    .ssm-retry-footer *::after {
        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

}
/*
|--------------------------------------------------------------------------
| SSM SERVICES — SHARED COMPONENT
|--------------------------------------------------------------------------
|
| User-side Services listing page.
|
| Page-specific structure:
| - Services hero
| - Service cards
| - Empty state
| - Services CTA
|
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| SERVICES PAGE
|--------------------------------------------------------------------------
*/

.services-page {
    position: relative;

    overflow: hidden;

    background: var(--bg-body);

    color: var(--text-primary);
}


/*
|--------------------------------------------------------------------------
| SERVICES HERO
|--------------------------------------------------------------------------
*/

.services-page__hero {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 430px;

    padding:
        90px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(229, 9, 20, 0.12),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #070707 0%,
            #101010 100%
        );

    color: var(--color-white);
}

.services-page__hero::before {
    content: "";

    position: absolute;

    top: -180px;
    right: -120px;

    width: 520px;
    height: 520px;

    border:
        1px solid rgba(255, 255, 255, 0.06);

    border-radius: 50%;

    pointer-events: none;
}

.services-page__hero::after {
    content: "";

    position: absolute;

    right: 17%;
    bottom: -120px;

    width: 360px;
    height: 360px;

    border:
        1px solid rgba(229, 9, 20, 0.12);

    border-radius: 50%;

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Hero Inner
|--------------------------------------------------------------------------
*/

.services-page__hero-inner {
    position: relative;

    z-index: 2;

    width: min(
        calc(100% - 48px),
        var(--ssm-container-width)
    );

    margin-inline: auto;

    max-width: 850px;
}


/*
|--------------------------------------------------------------------------
| Hero Eyebrow
|--------------------------------------------------------------------------
*/

.services-page__eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: var(--color-primary);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.16em;

    line-height: 1.2;

    text-transform: uppercase;
}

.services-page__eyebrow::before {
    content: "";

    width: 28px;
    height: 2px;

    background: var(--color-primary);
}


/*
|--------------------------------------------------------------------------
| Hero Heading
|--------------------------------------------------------------------------
*/

.services-page__hero h1 {
    max-width: 780px;

    margin: 0;

    color: var(--color-white);

    font-size: clamp(
        3rem,
        6vw,
        5.2rem
    );

    font-weight: var(--weight-extrabold);

    line-height: 0.98;

    letter-spacing: -0.055em;
}

.services-page__hero h1 span {
    color: var(--color-primary);
}


/*
|--------------------------------------------------------------------------
| Hero Description
|--------------------------------------------------------------------------
*/

.services-page__hero p {
    max-width: 650px;

    margin:
        24px 0 0;

    color: var(--text-light-muted);

    font-size: 15px;

    line-height: 1.8;
}


/*
|--------------------------------------------------------------------------
| SERVICES LISTING
|--------------------------------------------------------------------------
*/

.services-page__listing {
    position: relative;

    padding:
        100px 0
        105px;

    background: var(--bg-body);
}


/*
|--------------------------------------------------------------------------
| Listing Container
|--------------------------------------------------------------------------
*/

.services-page__container {
    width: min(
        calc(100% - 48px),
        var(--ssm-container-width)
    );

    margin-inline: auto;
}


/*
|--------------------------------------------------------------------------
| Services Grid
|--------------------------------------------------------------------------
*/

.services-page__grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 28px;
}


/*
|--------------------------------------------------------------------------
| Service Card
|--------------------------------------------------------------------------
*/

.services-page__card {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    background: var(--bg-surface);

    border:
        1px solid var(--border-color);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-xs);

    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}

.services-page__card:hover {
    transform: translateY(-6px);

    border-color: #d9d9d9;

    box-shadow: var(--shadow-lg);
}


/*
|--------------------------------------------------------------------------
| Card Image
|--------------------------------------------------------------------------
*/

.services-page__card-image {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #151515,
            #292929
        );

    text-decoration: none;
}

.services-page__card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 500ms ease;
}

.services-page__card:hover
.services-page__card-image img {
    transform: scale(1.045);
}


/*
|--------------------------------------------------------------------------
| Image Overlay
|--------------------------------------------------------------------------
*/

.services-page__card-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.36),
            transparent 50%
        );

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Placeholder
|--------------------------------------------------------------------------
*/

.services-page__card-placeholder {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background:
        radial-gradient(
            circle at center,
            rgba(229, 9, 20, 0.12),
            transparent 55%
        ),
        #111111;

    color: rgba(255, 255, 255, 0.35);

    font-size: 34px;
}


/*
|--------------------------------------------------------------------------
| Card Arrow
|--------------------------------------------------------------------------
*/

.services-page__card-arrow {
    position: absolute;

    top: 18px;
    right: 18px;

    z-index: 2;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius: 50%;

    background:
        rgba(0, 0, 0, 0.52);

    backdrop-filter: blur(8px);

    color: var(--color-white);

    font-size: 13px;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.services-page__card:hover
.services-page__card-arrow {
    background: var(--color-primary);

    color: var(--color-white);

    transform: rotate(4deg);
}


/*
|--------------------------------------------------------------------------
| Card Content
|--------------------------------------------------------------------------
*/

.services-page__card-content {
    position: relative;

    display: flex;

    flex: 1;

    flex-direction: column;

    padding:
        26px 26px 28px;
}


/*
|--------------------------------------------------------------------------
| Card Number
|--------------------------------------------------------------------------
*/

.services-page__card-number {
    display: block;

    margin-bottom: 14px;

    color: var(--color-primary);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.14em;
}


/*
|--------------------------------------------------------------------------
| Card Title
|--------------------------------------------------------------------------
*/

.services-page__card-content h2 {
    margin: 0;

    color: var(--text-primary);

    font-size: 1.45rem;

    font-weight: var(--weight-extrabold);

    line-height: 1.15;

    letter-spacing: -0.035em;
}


/*
|--------------------------------------------------------------------------
| Card Description
|--------------------------------------------------------------------------
*/

.services-page__card-content p {
    margin:
        13px 0 0;

    color: var(--text-secondary);

    font-size: 13px;

    line-height: 1.75;
}


/*
|--------------------------------------------------------------------------
| Card Link
|--------------------------------------------------------------------------
*/

.services-page__card-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    width: fit-content;

    margin-top: auto;
    padding-top: 24px;

    color: var(--text-primary);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    transition:
        color var(--transition-fast);
}

.services-page__card-link i {
    font-size: 10px;

    transition:
        transform var(--transition-fast);
}

.services-page__card-link:hover {
    color: var(--color-primary);
}

.services-page__card-link:hover i {
    transform: translateX(4px);
}


/*
|--------------------------------------------------------------------------
| EMPTY STATE
|--------------------------------------------------------------------------
*/

.services-page__empty {
    display: flex;

    align-items: center;

    flex-direction: column;

    max-width: 620px;

    margin-inline: auto;

    padding:
        70px 30px;

    border:
        1px solid var(--border-color);

    border-radius: var(--radius-lg);

    background: var(--bg-light);

    text-align: center;
}

.services-page__empty-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 68px;
    height: 68px;

    margin-bottom: 22px;

    border-radius: 50%;

    background:
        rgba(229, 9, 20, 0.08);

    color: var(--color-primary);

    font-size: 23px;
}

.services-page__empty h2 {
    margin: 0;

    font-size: 1.8rem;
}

.services-page__empty p {
    max-width: 460px;

    margin-top: 12px;

    font-size: 14px;
}

.services-page__empty-button {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 25px;

    min-height: 46px;

    padding:
        12px 19px;

    border-radius: var(--radius-sm);

    background: var(--color-primary);

    color: var(--color-white);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.services-page__empty-button:hover {
    background: var(--color-primary-dark);

    color: var(--color-white);

    transform: translateY(-2px);
}


/*
|--------------------------------------------------------------------------
| SERVICES CTA
|--------------------------------------------------------------------------
*/

.services-page__cta {
    position: relative;

    padding:
        85px 0;

    overflow: hidden;

    background: var(--color-black);

    color: var(--color-white);
}

.services-page__cta::before {
    content: "";

    position: absolute;

    top: -180px;
    right: -100px;

    width: 500px;
    height: 500px;

    border:
        1px solid rgba(229, 9, 20, 0.12);

    border-radius: 50%;
}

.services-page__cta-inner {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

    width: min(
        calc(100% - 48px),
        var(--ssm-container-width)
    );

    margin-inline: auto;
}

.services-page__cta h2 {
    max-width: 650px;

    margin: 0;

    color: var(--color-white);

    font-size: clamp(
        2rem,
        4vw,
        3.4rem
    );

    line-height: 1.03;
}

.services-page__cta p {
    max-width: 570px;

    margin-top: 15px;

    color: var(--text-light-muted);

    font-size: 14px;

    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| CTA Button
|--------------------------------------------------------------------------
*/

.services-page__cta-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    gap: 11px;

    min-width: 175px;
    min-height: 52px;

    padding:
        13px 22px;

    border-radius: var(--radius-sm);

    background: var(--color-primary);

    color: var(--color-white);

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

    box-shadow:
        0 10px 25px rgba(229, 9, 20, 0.18);

    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.services-page__cta-button i {
    transition:
        transform var(--transition-fast);
}

.services-page__cta-button:hover {
    background: var(--color-primary-light);

    color: var(--color-white);

    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(229, 9, 20, 0.25);
}

.services-page__cta-button:hover i {
    transform: translateX(4px);
}

/*
|--------------------------------------------------------------------------
| SERVICES PAGE
|--------------------------------------------------------------------------
*/

.ssm-services-page {
    overflow: hidden;
    background: var(--bg-body);
    color: var(--text-primary);
}


/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.ssm-services-page__hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 430px;
    padding: 90px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 82% 45%,
            rgba(229, 9, 20, 0.13),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #070707 0%,
            #121212 100%
        );
    color: var(--color-white);
}

.ssm-services-page__hero::before {
    content: "";
    position: absolute;
    top: -190px;
    right: -130px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}

.ssm-services-page__hero::after {
    content: "";
    position: absolute;
    right: 18%;
    bottom: -170px;
    width: 400px;
    height: 400px;
    border: 1px solid rgba(229, 9, 20, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.ssm-services-page__hero-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
}


/*
|--------------------------------------------------------------------------
| EYEBROW
|--------------------------------------------------------------------------
*/

.ssm-services-page__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ssm-services-page__eyebrow-line {
    width: 28px;
    height: 2px;
    flex: 0 0 auto;
    background: var(--color-primary);
}


/*
|--------------------------------------------------------------------------
| HERO TITLE
|--------------------------------------------------------------------------
*/

.ssm-services-page__title {
    max-width: 820px;
    margin: 0;
    color: var(--color-white);
    font-size: clamp(3rem, 6vw, 5.2rem);
    font-weight: var(--weight-extrabold);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.ssm-services-page__description {
    max-width: 650px;
    margin: 25px 0 0;
    color: var(--text-light-muted);
    font-size: 15px;
    line-height: 1.8;
}


/*
|--------------------------------------------------------------------------
| LISTING
|--------------------------------------------------------------------------
*/

.ssm-services-page__listing {
    padding: 100px 0 110px;
    background: var(--bg-body);
}

.ssm-services-page__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}


/*
|--------------------------------------------------------------------------
| SERVICE CARD
|--------------------------------------------------------------------------
*/

.ssm-services-page__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}

.ssm-services-page__card:hover {
    transform: translateY(-6px);
    border-color: #d9d9d9;
    box-shadow: var(--shadow-lg);
}


/*
|--------------------------------------------------------------------------
| IMAGE
|--------------------------------------------------------------------------
*/

.ssm-services-page__card-image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #111;
    text-decoration: none;
}

.ssm-services-page__card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.ssm-services-page__card:hover
.ssm-services-page__card-image img {
    transform: scale(1.045);
}

.ssm-services-page__card-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.48),
            transparent 60%
        );
    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| EMPTY IMAGE
|--------------------------------------------------------------------------
*/

.ssm-services-page__card-image--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            circle at center,
            rgba(229, 9, 20, 0.14),
            transparent 55%
        ),
        #111;
}

.ssm-services-page__card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.5);
    font-size: 28px;
}


/*
|--------------------------------------------------------------------------
| IMAGE ACTION
|--------------------------------------------------------------------------
*/

.ssm-services-page__card-image-action {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(8px);
    color: var(--color-white);
    font-size: 12px;
    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.ssm-services-page__card:hover
.ssm-services-page__card-image-action {
    background: var(--color-primary);
    transform: translateX(2px);
}


/*
|--------------------------------------------------------------------------
| CARD CONTENT
|--------------------------------------------------------------------------
*/

.ssm-services-page__card-content {
    position: relative;
    display: flex;
    gap: 18px;
    padding: 27px 26px 28px;
}

.ssm-services-page__card-number {
    position: absolute;
    top: 22px;
    right: 25px;
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.ssm-services-page__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(229, 9, 20, 0.08);
    color: var(--color-primary);
    font-size: 18px;
}

.ssm-services-page__card-body {
    min-width: 0;
    padding-right: 30px;
}

.ssm-services-page__card-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.4rem;
    font-weight: var(--weight-extrabold);
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.ssm-services-page__card-description {
    margin: 12px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.75;
}


/*
|--------------------------------------------------------------------------
| PRICE
|--------------------------------------------------------------------------
*/

.ssm-services-page__card-price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 15px;
}

.ssm-services-page__card-price span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
}

.ssm-services-page__card-price strong {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 800;
}


/*
|--------------------------------------------------------------------------
| CARD LINK
|--------------------------------------------------------------------------
*/

.ssm-services-page__card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: 20px;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.ssm-services-page__card-link i {
    font-size: 9px;
    transition: transform var(--transition-fast);
}

.ssm-services-page__card-link:hover {
    color: var(--color-primary);
}

.ssm-services-page__card-link:hover i {
    transform: translateX(4px);
}


/*
|--------------------------------------------------------------------------
| EMPTY STATE
|--------------------------------------------------------------------------
*/

.ssm-services-page__empty {
    display: flex;
    align-items: center;
    flex-direction: column;
    max-width: 620px;
    margin-inline: auto;
    padding: 70px 30px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-light);
    text-align: center;
}

.ssm-services-page__empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: rgba(229, 9, 20, 0.08);
    color: var(--color-primary);
    font-size: 23px;
}

.ssm-services-page__empty-title {
    margin: 0;
    font-size: 1.8rem;
}

.ssm-services-page__empty-text {
    max-width: 460px;
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.7;
}

.ssm-services-page__empty-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 25px;
    min-height: 46px;
    padding: 12px 19px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.ssm-services-page__empty-button:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-2px);
}


/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.ssm-services-page__cta {
    position: relative;
    overflow: hidden;
    padding: 85px 0;
    background: var(--color-black);
    color: var(--color-white);
}

.ssm-services-page__cta::before {
    content: "";
    position: absolute;
    top: -200px;
    right: -120px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(229, 9, 20, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.ssm-services-page__cta-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.ssm-services-page__cta-content {
    max-width: 700px;
}

.ssm-services-page__cta-title {
    margin: 0;
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.03;
    letter-spacing: -0.04em;
}

.ssm-services-page__cta-description {
    max-width: 570px;
    margin: 15px 0 0;
    color: var(--text-light-muted);
    font-size: 14px;
    line-height: 1.7;
}

.ssm-services-page__cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 11px;
    min-width: 175px;
    min-height: 52px;
    padding: 13px 22px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.ssm-services-page__cta-button:hover {
    background: var(--color-primary-light);
    color: var(--color-white);
    transform: translateY(-2px);
}

.ssm-services-page__cta-button i {
    transition: transform var(--transition-fast);
}

.ssm-services-page__cta-button:hover i {
    transform: translateX(4px);
}

/*
|--------------------------------------------------------------------------
| SERVICE DETAIL PAGE
|--------------------------------------------------------------------------
*/

.ssm-service-detail {
    overflow: hidden;
    background: var(--bg-body);
    color: var(--text-primary);
}


/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.ssm-service-detail__hero {
    position: relative;
    padding: 85px 0 95px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(229, 9, 20, 0.10),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #080808 0%,
            #131313 100%
        );
    color: var(--color-white);
}

.ssm-service-detail__hero::before {
    content: "";
    position: absolute;
    top: -240px;
    right: -130px;
    width: 600px;
    height: 600px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 50%;
    pointer-events: none;
}

.ssm-service-detail__hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 75px;
}


/*
|--------------------------------------------------------------------------
| HERO MEDIA
|--------------------------------------------------------------------------
*/

.ssm-service-detail__hero-media {
    position: relative;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: #111;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.28);
}

.ssm-service-detail__hero-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ssm-service-detail__hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            transparent 35%,
            rgba(0, 0, 0, 0.42)
        );
    pointer-events: none;
}

.ssm-service-detail__hero-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(
            circle at center,
            rgba(229, 9, 20, 0.16),
            transparent 55%
        ),
        #111;
    color: rgba(255, 255, 255, 0.42);
    font-size: 70px;
}

.ssm-service-detail__hero-icon {
    position: absolute;
    right: 25px;
    bottom: 25px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(10px);
    color: var(--color-primary);
    font-size: 20px;
}


/*
|--------------------------------------------------------------------------
| HERO CONTENT
|--------------------------------------------------------------------------
*/

.ssm-service-detail__hero-content {
    min-width: 0;
    max-width: 680px;
}

.ssm-service-detail__back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 32px;
    color: var(--text-light-muted);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.ssm-service-detail__back i {
    font-size: 10px;
    transition: transform var(--transition-fast);
}

.ssm-service-detail__back:hover {
    color: var(--color-white);
}

.ssm-service-detail__back:hover i {
    transform: translateX(-4px);
}


/*
|--------------------------------------------------------------------------
| EYEBROW
|--------------------------------------------------------------------------
*/

.ssm-service-detail__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ssm-service-detail__eyebrow-line {
    width: 28px;
    height: 2px;
    flex: 0 0 auto;
    background: var(--color-primary);
}


/*
|--------------------------------------------------------------------------
| TITLE
|--------------------------------------------------------------------------
*/

.ssm-service-detail__title {
    max-width: 700px;
    margin: 0;
    color: var(--color-white);
    font-size: clamp(2.8rem, 5.2vw, 5rem);
    font-weight: var(--weight-extrabold);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.ssm-service-detail__short-description {
    max-width: 620px;
    margin: 24px 0 0;
    color: var(--text-light-muted);
    font-size: 15px;
    line-height: 1.8;
}


/*
|--------------------------------------------------------------------------
| PRICE
|--------------------------------------------------------------------------
*/

.ssm-service-detail__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 28px;
}

.ssm-service-detail__price span {
    color: var(--text-light-muted);
    font-size: 11px;
    font-weight: 600;
}

.ssm-service-detail__price strong {
    color: var(--color-white);
    font-size: 1.55rem;
    font-weight: 800;
}


/*
|--------------------------------------------------------------------------
| HERO ACTIONS
|--------------------------------------------------------------------------
*/

.ssm-service-detail__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 13px;
    margin-top: 32px;
}

.ssm-service-detail__primary-button,
.ssm-service-detail__secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 13px 21px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.ssm-service-detail__primary-button {
    gap: 10px;
    background: var(--color-primary);
    color: var(--color-white);
}

.ssm-service-detail__primary-button:hover {
    background: var(--color-primary-light);
    color: var(--color-white);
    transform: translateY(-2px);
}

.ssm-service-detail__primary-button i {
    font-size: 10px;
    transition: transform var(--transition-fast);
}

.ssm-service-detail__primary-button:hover i {
    transform: translateX(4px);
}

.ssm-service-detail__secondary-button {
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--color-white);
}

.ssm-service-detail__secondary-button:hover {
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--color-white);
    transform: translateY(-2px);
}


/*
|--------------------------------------------------------------------------
| CONTENT
|--------------------------------------------------------------------------
*/

.ssm-service-detail__content {
    padding: 105px 0;
    background: var(--bg-body);
}

.ssm-service-detail__content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 85px;
    align-items: start;
}

.ssm-service-detail__content-main {
    min-width: 0;
}

.ssm-service-detail__content-main h2 {
    max-width: 720px;
    margin: 0 0 25px;
    font-size: clamp(2rem, 4vw, 3.3rem);
    font-weight: var(--weight-extrabold);
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.ssm-service-detail__description {
    max-width: 760px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.95;
}

.ssm-service-detail__description p {
    margin-bottom: 18px;
}


/*
|--------------------------------------------------------------------------
| INFO CARD
|--------------------------------------------------------------------------
*/

.ssm-service-detail__content-side {
    position: sticky;
    top: 110px;
}

.ssm-service-detail__info-card {
    padding: 32px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
}

.ssm-service-detail__info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
    border-radius: 13px;
    background: rgba(229, 9, 20, 0.08);
    color: var(--color-primary);
    font-size: 20px;
}

.ssm-service-detail__info-card h3 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: var(--weight-extrabold);
    line-height: 1.15;
}

.ssm-service-detail__info-card p {
    margin: 13px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.75;
}

.ssm-service-detail__info-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 24px;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.ssm-service-detail__info-button:hover {
    color: var(--color-primary);
}

.ssm-service-detail__info-button i {
    font-size: 9px;
    transition: transform var(--transition-fast);
}

.ssm-service-detail__info-button:hover i {
    transform: translateX(4px);
}


/*
|--------------------------------------------------------------------------
| BOTTOM CTA
|--------------------------------------------------------------------------
*/

.ssm-service-detail__cta {
    position: relative;
    overflow: hidden;
    padding: 85px 0;
    background: var(--color-black);
    color: var(--color-white);
}

.ssm-service-detail__cta::before {
    content: "";
    position: absolute;
    top: -220px;
    right: -130px;
    width: 550px;
    height: 550px;
    border: 1px solid rgba(229, 9, 20, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.ssm-service-detail__cta-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.ssm-service-detail__cta-inner h2 {
    max-width: 650px;
    margin: 0;
    color: var(--color-white);
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.ssm-service-detail__cta-inner p {
    margin: 14px 0 0;
    color: var(--text-light-muted);
    font-size: 14px;
}

.ssm-service-detail__cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 10px;
    min-width: 170px;
    min-height: 51px;
    padding: 13px 21px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.ssm-service-detail__cta-button:hover {
    background: var(--color-primary-light);
    color: var(--color-white);
    transform: translateY(-2px);
}

.ssm-service-detail__cta-button i {
    font-size: 10px;
    transition: transform var(--transition-fast);
}

.ssm-service-detail__cta-button:hover i {
    transform: translateX(4px);
}


/*
|--------------------------------------------------------------------------
| NOT FOUND
|--------------------------------------------------------------------------
*/

.ssm-service-detail__not-found {
    min-height: 65vh;
    display: flex;
    align-items: center;
    padding: 90px 0;
}

.ssm-service-detail__not-found-inner {
    max-width: 650px;
    margin-inline: auto;
    text-align: center;
}

.ssm-service-detail__not-found-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 25px;
    border-radius: 50%;
    background: rgba(229, 9, 20, 0.08);
    color: var(--color-primary);
    font-size: 22px;
}

.ssm-service-detail__not-found-inner h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.05;
}

.ssm-service-detail__not-found-inner p {
    max-width: 520px;
    margin: 15px auto 0;
    color: var(--text-secondary);
    line-height: 1.7;
}

.ssm-service-detail__not-found-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 27px;
    min-height: 48px;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.ssm-service-detail__not-found-button:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

/*
|--------------------------------------------------------------------------
| ABOUT PAGE
|--------------------------------------------------------------------------
*/

.ssm-about-page {
    overflow: hidden;
    background: var(--bg-body);
    color: var(--text-primary);
}


/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.ssm-about-page__hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 460px;
    padding: 95px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 82% 35%,
            rgba(229, 9, 20, 0.13),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #070707 0%,
            #141414 100%
        );
    color: var(--color-white);
}

.ssm-about-page__hero::before {
    content: "";
    position: absolute;
    top: -210px;
    right: -120px;
    width: 570px;
    height: 570px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 50%;
    pointer-events: none;
}

.ssm-about-page__hero::after {
    content: "";
    position: absolute;
    right: 18%;
    bottom: -190px;
    width: 390px;
    height: 390px;
    border: 1px solid rgba(229, 9, 20, 0.10);
    border-radius: 50%;
    pointer-events: none;
}

.ssm-about-page__hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}


/*
|--------------------------------------------------------------------------
| EYEBROW
|--------------------------------------------------------------------------
*/

.ssm-about-page__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ssm-about-page__eyebrow-line {
    width: 28px;
    height: 2px;
    flex: 0 0 auto;
    background: var(--color-primary);
}


/*
|--------------------------------------------------------------------------
| HERO TITLE
|--------------------------------------------------------------------------
*/

.ssm-about-page__title {
    max-width: 850px;
    margin: 0;
    color: var(--color-white);
    font-size: clamp(3rem, 6vw, 5.2rem);
    font-weight: var(--weight-extrabold);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.ssm-about-page__hero-description {
    max-width: 680px;
    margin: 25px 0 0;
    color: var(--text-light-muted);
    font-size: 15px;
    line-height: 1.8;
}


/*
|--------------------------------------------------------------------------
| INTRO
|--------------------------------------------------------------------------
*/

.ssm-about-page__intro {
    padding: 110px 0;
    background: var(--bg-body);
}

.ssm-about-page__intro-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);
    align-items: center;
    gap: 85px;
}


/*
|--------------------------------------------------------------------------
| INTRO MEDIA
|--------------------------------------------------------------------------
*/

.ssm-about-page__intro-media {
    position: relative;
    aspect-ratio: 4 / 4.5;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: #111;
    box-shadow: var(--shadow-lg);
}

.ssm-about-page__intro-media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ssm-about-page__intro-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(
            circle at center,
            rgba(229, 9, 20, 0.15),
            transparent 55%
        ),
        #111;
    color: rgba(255, 255, 255, 0.35);
    font-size: 75px;
}

.ssm-about-page__intro-badge {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 43px;
    padding: 10px 15px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(10px);
    color: var(--color-white);
    font-size: 10px;
    font-weight: 800;
}

.ssm-about-page__intro-badge i {
    color: var(--color-primary);
}


/*
|--------------------------------------------------------------------------
| INTRO CONTENT
|--------------------------------------------------------------------------
*/

.ssm-about-page__intro-content {
    max-width: 650px;
}

.ssm-about-page__intro-content h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(2.4rem, 4.5vw, 4rem);
    font-weight: var(--weight-extrabold);
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.ssm-about-page__description {
    max-width: 610px;
    margin-top: 24px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.9;
}


/*
|--------------------------------------------------------------------------
| INTRO ACTIONS
|--------------------------------------------------------------------------
*/

.ssm-about-page__intro-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    margin-top: 30px;
}

.ssm-about-page__primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 49px;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.ssm-about-page__primary-button:hover {
    background: var(--color-primary-light);
    color: var(--color-white);
    transform: translateY(-2px);
}

.ssm-about-page__primary-button i {
    font-size: 9px;
    transition: transform var(--transition-fast);
}

.ssm-about-page__primary-button:hover i {
    transform: translateX(4px);
}

.ssm-about-page__text-button {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.ssm-about-page__text-button:hover {
    color: var(--color-primary);
}


/*
|--------------------------------------------------------------------------
| APPROACH
|--------------------------------------------------------------------------
*/

.ssm-about-page__approach {
    padding: 105px 0 115px;
    background: var(--bg-light);
}

.ssm-about-page__section-heading {
    max-width: 720px;
    margin-bottom: 55px;
}

.ssm-about-page__section-heading h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(2.3rem, 4.5vw, 3.8rem);
    font-weight: var(--weight-extrabold);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.ssm-about-page__section-heading p {
    max-width: 650px;
    margin: 17px 0 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.8;
}


/*
|--------------------------------------------------------------------------
| VALUES
|--------------------------------------------------------------------------
*/

.ssm-about-page__values {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 25px;
}

.ssm-about-page__value {
    position: relative;
    min-height: 300px;
    padding: 32px 30px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-xs);
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}

.ssm-about-page__value:hover {
    transform: translateY(-6px);
    border-color: #d8d8d8;
    box-shadow: var(--shadow-md);
}

.ssm-about-page__value-number {
    position: absolute;
    top: 25px;
    right: 27px;
    color: rgba(229, 9, 20, 0.5);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.ssm-about-page__value-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 28px;
    border-radius: 13px;
    background: rgba(229, 9, 20, 0.08);
    color: var(--color-primary);
    font-size: 20px;
}

.ssm-about-page__value h3 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: var(--weight-extrabold);
    line-height: 1.15;
}

.ssm-about-page__value p {
    max-width: 340px;
    margin: 13px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.75;
}


/*
|--------------------------------------------------------------------------
| EXPERIENCE
|--------------------------------------------------------------------------
*/

.ssm-about-page__experience {
    padding: 110px 0;
    background: var(--bg-body);
}

.ssm-about-page__experience-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.9fr);
    align-items: center;
    gap: 90px;
}

.ssm-about-page__experience-content {
    max-width: 650px;
}

.ssm-about-page__experience-content h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(2.4rem, 4.5vw, 4rem);
    font-weight: var(--weight-extrabold);
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.ssm-about-page__experience-content p {
    max-width: 620px;
    margin: 18px 0 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.85;
}

.ssm-about-page__experience-content .ssm-about-page__primary-button {
    margin-top: 28px;
}


/*
|--------------------------------------------------------------------------
| EXPERIENCE PANEL
|--------------------------------------------------------------------------
*/

.ssm-about-page__experience-panel {
    padding: 10px 0;
}

.ssm-about-page__experience-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 27px 0;
    border-bottom: 1px solid var(--border-color);
}

.ssm-about-page__experience-item:first-child {
    padding-top: 0;
}

.ssm-about-page__experience-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ssm-about-page__experience-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(229, 9, 20, 0.08);
    color: var(--color-primary);
    font-size: 17px;
}

.ssm-about-page__experience-item h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: var(--weight-extrabold);
}

.ssm-about-page__experience-item p {
    max-width: 450px;
    margin: 7px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.ssm-about-page__cta {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background: var(--color-black);
    color: var(--color-white);
}

.ssm-about-page__cta::before {
    content: "";
    position: absolute;
    top: -220px;
    right: -140px;
    width: 570px;
    height: 570px;
    border: 1px solid rgba(229, 9, 20, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.ssm-about-page__cta-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 55px;
}

.ssm-about-page__cta-inner h2 {
    max-width: 760px;
    margin: 0;
    color: var(--color-white);
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    font-weight: var(--weight-extrabold);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.ssm-about-page__cta-inner p {
    margin: 15px 0 0;
    color: var(--text-light-muted);
    font-size: 14px;
    line-height: 1.7;
}

.ssm-about-page__cta-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 13px;
}

.ssm-about-page__cta-primary,
.ssm-about-page__cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.ssm-about-page__cta-primary {
    gap: 10px;
    background: var(--color-primary);
    color: var(--color-white);
}

.ssm-about-page__cta-primary:hover {
    background: var(--color-primary-light);
    color: var(--color-white);
    transform: translateY(-2px);
}

.ssm-about-page__cta-primary i {
    font-size: 9px;
    transition: transform var(--transition-fast);
}

.ssm-about-page__cta-primary:hover i {
    transform: translateX(4px);
}

.ssm-about-page__cta-secondary {
    border: 1px solid rgba(255, 255, 255, 0.17);
    color: var(--color-white);
}

.ssm-about-page__cta-secondary:hover {
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--color-white);
    transform: translateY(-2px);
}

/*
|--------------------------------------------------------------------------
| GALLERY PAGE
|--------------------------------------------------------------------------
*/

.ssm-gallery-page {
    overflow: hidden;
    background: var(--bg-body);
    color: var(--text-primary);
}


/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.ssm-gallery-page__hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 430px;
    padding: 90px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 82% 38%,
            rgba(229, 9, 20, 0.13),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #070707 0%,
            #141414 100%
        );
    color: var(--color-white);
}

.ssm-gallery-page__hero::before {
    content: "";
    position: absolute;
    top: -210px;
    right: -130px;
    width: 570px;
    height: 570px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 50%;
    pointer-events: none;
}

.ssm-gallery-page__hero::after {
    content: "";
    position: absolute;
    right: 18%;
    bottom: -180px;
    width: 380px;
    height: 380px;
    border: 1px solid rgba(229, 9, 20, 0.11);
    border-radius: 50%;
    pointer-events: none;
}

.ssm-gallery-page__hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}


/*
|--------------------------------------------------------------------------
| EYEBROW
|--------------------------------------------------------------------------
*/

.ssm-gallery-page__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ssm-gallery-page__eyebrow-line {
    width: 28px;
    height: 2px;
    flex: 0 0 auto;
    background: var(--color-primary);
}


/*
|--------------------------------------------------------------------------
| HERO TITLE
|--------------------------------------------------------------------------
*/

.ssm-gallery-page__title {
    max-width: 850px;
    margin: 0;
    color: var(--color-white);
    font-size: clamp(3rem, 6vw, 5.2rem);
    font-weight: var(--weight-extrabold);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.ssm-gallery-page__description {
    max-width: 650px;
    margin: 24px 0 0;
    color: var(--text-light-muted);
    font-size: 15px;
    line-height: 1.8;
}


/*
|--------------------------------------------------------------------------
| GALLERY LISTING
|--------------------------------------------------------------------------
*/

.ssm-gallery-page__listing {
    padding: 105px 0 115px;
    background: var(--bg-body);
}

.ssm-gallery-page__grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 24px;
}


/*
|--------------------------------------------------------------------------
| GALLERY ITEM
|--------------------------------------------------------------------------
*/

.ssm-gallery-page__item {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: #111;
    box-shadow: var(--shadow-sm);
}

.ssm-gallery-page__image-link {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    color: var(--color-white);
    text-decoration: none;
}

.ssm-gallery-page__image-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 600ms ease,
        filter 400ms ease;
}

.ssm-gallery-page__item:hover
.ssm-gallery-page__image-link img {
    transform: scale(1.055);
    filter: brightness(0.78);
}


/*
|--------------------------------------------------------------------------
| OVERLAY
|--------------------------------------------------------------------------
*/

.ssm-gallery-page__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.78) 0%,
            rgba(0, 0, 0, 0.16) 58%,
            transparent 100%
        );
    opacity: 0.82;
    transition: opacity 350ms ease;
}

.ssm-gallery-page__item:hover
.ssm-gallery-page__overlay {
    opacity: 1;
}


/*
|--------------------------------------------------------------------------
| ZOOM ICON
|--------------------------------------------------------------------------
*/

.ssm-gallery-page__zoom {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(8px);
    color: var(--color-white);
    font-size: 11px;
    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.ssm-gallery-page__item:hover
.ssm-gallery-page__zoom {
    background: var(--color-primary);
    transform: scale(1.05);
}


/*
|--------------------------------------------------------------------------
| ITEM CONTENT
|--------------------------------------------------------------------------
*/

.ssm-gallery-page__item-content {
    position: absolute;
    right: 22px;
    bottom: 20px;
    left: 22px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transform: translateY(7px);
    opacity: 0.9;
    transition:
        transform 350ms ease,
        opacity 350ms ease;
}

.ssm-gallery-page__item:hover
.ssm-gallery-page__item-content {
    transform: translateY(0);
    opacity: 1;
}

.ssm-gallery-page__item-content strong {
    color: var(--color-white);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
}

.ssm-gallery-page__item-content small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    line-height: 1.5;
}


/*
|--------------------------------------------------------------------------
| EMPTY STATE
|--------------------------------------------------------------------------
*/

.ssm-gallery-page__empty {
    display: flex;
    align-items: center;
    flex-direction: column;
    max-width: 650px;
    margin-inline: auto;
    padding: 75px 30px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-light);
    text-align: center;
}

.ssm-gallery-page__empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin-bottom: 23px;
    border-radius: 50%;
    background: rgba(229, 9, 20, 0.08);
    color: var(--color-primary);
    font-size: 24px;
}

.ssm-gallery-page__empty h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: var(--weight-extrabold);
}

.ssm-gallery-page__empty p {
    max-width: 470px;
    margin: 13px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.75;
}

.ssm-gallery-page__empty-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 25px;
    min-height: 47px;
    padding: 12px 19px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.ssm-gallery-page__empty-button:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-2px);
}


/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.ssm-gallery-page__cta {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background: var(--color-black);
    color: var(--color-white);
}

.ssm-gallery-page__cta::before {
    content: "";
    position: absolute;
    top: -220px;
    right: -130px;
    width: 570px;
    height: 570px;
    border: 1px solid rgba(229, 9, 20, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.ssm-gallery-page__cta-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.ssm-gallery-page__cta-inner h2 {
    max-width: 720px;
    margin: 0;
    color: var(--color-white);
    font-size: clamp(2.2rem, 4.5vw, 3.7rem);
    font-weight: var(--weight-extrabold);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.ssm-gallery-page__cta-inner p {
    margin: 14px 0 0;
    color: var(--text-light-muted);
    font-size: 14px;
    line-height: 1.7;
}

.ssm-gallery-page__cta-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 13px;
}

.ssm-gallery-page__cta-primary,
.ssm-gallery-page__cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.ssm-gallery-page__cta-primary {
    gap: 10px;
    background: var(--color-primary);
    color: var(--color-white);
}

.ssm-gallery-page__cta-primary:hover {
    background: var(--color-primary-light);
    color: var(--color-white);
    transform: translateY(-2px);
}

.ssm-gallery-page__cta-primary i {
    font-size: 9px;
    transition: transform var(--transition-fast);
}

.ssm-gallery-page__cta-primary:hover i {
    transform: translateX(4px);
}

.ssm-gallery-page__cta-secondary {
    border: 1px solid rgba(255, 255, 255, 0.17);
    color: var(--color-white);
}

.ssm-gallery-page__cta-secondary:hover {
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--color-white);
    transform: translateY(-2px);
}

/*
|--------------------------------------------------------------------------
| PARTNERS PAGE
|--------------------------------------------------------------------------
*/

.ssm-partners-page {
    overflow: hidden;
    background: var(--bg-body);
    color: var(--text-primary);
}


/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.ssm-partners-page__hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 430px;
    padding: 90px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 82% 38%,
            rgba(229, 9, 20, 0.13),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #070707 0%,
            #141414 100%
        );
    color: var(--color-white);
}

.ssm-partners-page__hero::before {
    content: "";
    position: absolute;
    top: -210px;
    right: -130px;
    width: 570px;
    height: 570px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 50%;
    pointer-events: none;
}

.ssm-partners-page__hero::after {
    content: "";
    position: absolute;
    right: 18%;
    bottom: -180px;
    width: 380px;
    height: 380px;
    border: 1px solid rgba(229, 9, 20, 0.11);
    border-radius: 50%;
    pointer-events: none;
}

.ssm-partners-page__hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}


/*
|--------------------------------------------------------------------------
| EYEBROW
|--------------------------------------------------------------------------
*/

.ssm-partners-page__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ssm-partners-page__eyebrow-line {
    width: 28px;
    height: 2px;
    flex: 0 0 auto;
    background: var(--color-primary);
}


/*
|--------------------------------------------------------------------------
| HERO TITLE
|--------------------------------------------------------------------------
*/

.ssm-partners-page__title {
    max-width: 850px;
    margin: 0;
    color: var(--color-white);
    font-size: clamp(3rem, 6vw, 5.2rem);
    font-weight: var(--weight-extrabold);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.ssm-partners-page__description {
    max-width: 660px;
    margin: 24px 0 0;
    color: var(--text-light-muted);
    font-size: 15px;
    line-height: 1.8;
}


/*
|--------------------------------------------------------------------------
| PARTNERS LISTING
|--------------------------------------------------------------------------
*/

.ssm-partners-page__listing {
    padding: 105px 0 115px;
    background: var(--bg-body);
}

.ssm-partners-page__grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 25px;
}


/*
|--------------------------------------------------------------------------
| PARTNER CARD
|--------------------------------------------------------------------------
*/

.ssm-partners-page__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-xs);
    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

.ssm-partners-page__card:hover {
    transform: translateY(-7px);
    border-color: #d5d5d5;
    box-shadow: var(--shadow-md);
}


/*
|--------------------------------------------------------------------------
| CARD NUMBER
|--------------------------------------------------------------------------
*/

.ssm-partners-page__card-number {
    position: absolute;
    top: 20px;
    right: 22px;
    z-index: 4;
    color: rgba(229, 9, 20, 0.58);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
}


/*
|--------------------------------------------------------------------------
| CARD VISUAL
|--------------------------------------------------------------------------
*/

.ssm-partners-page__card-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 230px;
    padding: 35px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at center,
            rgba(229, 9, 20, 0.055),
            transparent 60%
        ),
        #f8f8f8;
}

.ssm-partners-page__card-visual img {
    display: block;
    max-width: 82%;
    max-height: 145px;
    object-fit: contain;
    transition:
        transform 450ms ease;
}

.ssm-partners-page__card:hover
.ssm-partners-page__card-visual img {
    transform: scale(1.045);
}


/*
|--------------------------------------------------------------------------
| PLACEHOLDER
|--------------------------------------------------------------------------
*/

.ssm-partners-page__card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: rgba(229, 9, 20, 0.08);
    color: var(--color-primary);
    font-size: 28px;
}


/*
|--------------------------------------------------------------------------
| CARD CONTENT
|--------------------------------------------------------------------------
*/

.ssm-partners-page__card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 27px 27px 29px;
}

.ssm-partners-page__card-content h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.35rem;
    font-weight: var(--weight-extrabold);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.ssm-partners-page__card-content p {
    margin: 11px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.75;
}


/*
|--------------------------------------------------------------------------
| WEBSITE LINK
|--------------------------------------------------------------------------
*/

.ssm-partners-page__website {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 21px;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    transition:
        color var(--transition-fast),
        gap var(--transition-fast);
}

.ssm-partners-page__website:hover {
    gap: 11px;
    color: var(--color-primary-dark);
}

.ssm-partners-page__website i {
    font-size: 9px;
}


/*
|--------------------------------------------------------------------------
| EMPTY STATE
|--------------------------------------------------------------------------
*/

.ssm-partners-page__empty {
    display: flex;
    align-items: center;
    flex-direction: column;
    max-width: 650px;
    margin-inline: auto;
    padding: 75px 30px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-light);
    text-align: center;
}

.ssm-partners-page__empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin-bottom: 23px;
    border-radius: 50%;
    background: rgba(229, 9, 20, 0.08);
    color: var(--color-primary);
    font-size: 24px;
}

.ssm-partners-page__empty h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: var(--weight-extrabold);
}

.ssm-partners-page__empty p {
    max-width: 470px;
    margin: 13px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.75;
}

.ssm-partners-page__empty-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 25px;
    min-height: 47px;
    padding: 12px 19px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.ssm-partners-page__empty-button:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-2px);
}


/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.ssm-partners-page__cta {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background: var(--color-black);
    color: var(--color-white);
}

.ssm-partners-page__cta::before {
    content: "";
    position: absolute;
    top: -220px;
    right: -130px;
    width: 570px;
    height: 570px;
    border: 1px solid rgba(229, 9, 20, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.ssm-partners-page__cta-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.ssm-partners-page__cta-inner h2 {
    max-width: 720px;
    margin: 0;
    color: var(--color-white);
    font-size: clamp(2.2rem, 4.5vw, 3.7rem);
    font-weight: var(--weight-extrabold);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.ssm-partners-page__cta-inner p {
    margin: 14px 0 0;
    color: var(--text-light-muted);
    font-size: 14px;
    line-height: 1.7;
}

.ssm-partners-page__cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 10px;
    min-height: 50px;
    padding: 12px 21px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.ssm-partners-page__cta-button:hover {
    background: var(--color-primary-light);
    color: var(--color-white);
    transform: translateY(-2px);
}

.ssm-partners-page__cta-button i {
    font-size: 9px;
    transition: transform var(--transition-fast);
}

.ssm-partners-page__cta-button:hover i {
    transform: translateX(4px);
}

/*
|--------------------------------------------------------------------------
| PARTNERS PAGE
|--------------------------------------------------------------------------
*/

.ssm-partners-page {
    overflow: hidden;
    background: var(--bg-body);
    color: var(--text-primary);
}


/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.ssm-partners-page__hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 430px;
    padding: 90px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 82% 38%,
            rgba(229, 9, 20, 0.13),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #070707 0%,
            #141414 100%
        );
    color: var(--color-white);
}

.ssm-partners-page__hero::before {
    content: "";
    position: absolute;
    top: -210px;
    right: -130px;
    width: 570px;
    height: 570px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 50%;
    pointer-events: none;
}

.ssm-partners-page__hero::after {
    content: "";
    position: absolute;
    right: 18%;
    bottom: -180px;
    width: 380px;
    height: 380px;
    border: 1px solid rgba(229, 9, 20, 0.11);
    border-radius: 50%;
    pointer-events: none;
}

.ssm-partners-page__hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}


/*
|--------------------------------------------------------------------------
| EYEBROW
|--------------------------------------------------------------------------
*/

.ssm-partners-page__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ssm-partners-page__eyebrow-line {
    width: 28px;
    height: 2px;
    flex: 0 0 auto;
    background: var(--color-primary);
}


/*
|--------------------------------------------------------------------------
| HERO TITLE
|--------------------------------------------------------------------------
*/

.ssm-partners-page__title {
    max-width: 850px;
    margin: 0;
    color: var(--color-white);
    font-size: clamp(3rem, 6vw, 5.2rem);
    font-weight: var(--weight-extrabold);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.ssm-partners-page__description {
    max-width: 660px;
    margin: 24px 0 0;
    color: var(--text-light-muted);
    font-size: 15px;
    line-height: 1.8;
}


/*
|--------------------------------------------------------------------------
| LISTING
|--------------------------------------------------------------------------
*/

.ssm-partners-page__listing {
    padding: 105px 0 115px;
    background: var(--bg-body);
}

.ssm-partners-page__grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 24px;
}


/*
|--------------------------------------------------------------------------
| CARD
|--------------------------------------------------------------------------
*/

.ssm-partners-page__card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-xs);
    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

.ssm-partners-page__card:hover {
    transform: translateY(-6px);
    border-color: #d5d5d5;
    box-shadow: var(--shadow-md);
}


/*
|--------------------------------------------------------------------------
| CARD LINK
|--------------------------------------------------------------------------
*/

.ssm-partners-page__card-link {
    position: relative;
    display: flex;
    min-height: 100%;
    align-items: center;
    gap: 24px;
    padding: 30px 28px;
    color: inherit;
    text-decoration: none;
}

a.ssm-partners-page__card-link {
    cursor: pointer;
}

div.ssm-partners-page__card-link {
    cursor: default;
}


/*
|--------------------------------------------------------------------------
| LOGO
|--------------------------------------------------------------------------
*/

.ssm-partners-page__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 105px;
    width: 105px;
    height: 105px;
    padding: 16px;
    border-radius: 18px;
    background:
        radial-gradient(
            circle at center,
            rgba(229, 9, 20, 0.055),
            transparent 70%
        ),
        #f7f7f7;
    overflow: hidden;
}

.ssm-partners-page__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 450ms ease;
}

.ssm-partners-page__card:hover
.ssm-partners-page__logo img {
    transform: scale(1.06);
}


/*
|--------------------------------------------------------------------------
| LOGO INITIAL
|--------------------------------------------------------------------------
*/

.ssm-partners-page__logo-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: rgba(229, 9, 20, 0.08);
    color: var(--color-primary);
    font-size: 28px;
    font-weight: 900;
}


/*
|--------------------------------------------------------------------------
| CONTENT
|--------------------------------------------------------------------------
*/

.ssm-partners-page__content {
    min-width: 0;
    flex: 1;
}

.ssm-partners-page__name {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: var(--weight-extrabold);
    line-height: 1.2;
}

.ssm-partners-page__type {
    display: inline-block;
    margin-top: 7px;
    color: var(--color-primary);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ssm-partners-page__description-text {
    margin: 9px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| ARROW
|--------------------------------------------------------------------------
*/

.ssm-partners-page__arrow {
    position: absolute;
    top: 19px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(229, 9, 20, 0.07);
    color: var(--color-primary);
    font-size: 10px;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.ssm-partners-page__card:hover
.ssm-partners-page__arrow {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translate(2px, -2px);
}


/*
|--------------------------------------------------------------------------
| FOOTER BUTTON
|--------------------------------------------------------------------------
*/

.ssm-partners-page__footer {
    display: flex;
    justify-content: center;
    margin-top: 45px;
}

.ssm-partners-page__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.ssm-partners-page__button:hover {
    background: var(--color-primary-light);
    color: var(--color-white);
    transform: translateY(-2px);
}

.ssm-partners-page__button i {
    font-size: 9px;
    transition: transform var(--transition-fast);
}

.ssm-partners-page__button:hover i {
    transform: translateX(4px);
}


/*
|--------------------------------------------------------------------------
| EMPTY STATE
|--------------------------------------------------------------------------
*/

.ssm-partners-page__empty {
    display: flex;
    align-items: center;
    flex-direction: column;
    max-width: 650px;
    margin-inline: auto;
    padding: 75px 30px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-light);
    text-align: center;
}

.ssm-partners-page__empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin-bottom: 23px;
    border-radius: 50%;
    background: rgba(229, 9, 20, 0.08);
    color: var(--color-primary);
    font-size: 24px;
}

.ssm-partners-page__empty-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: var(--weight-extrabold);
}

.ssm-partners-page__empty-text {
    max-width: 470px;
    margin: 13px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.75;
}


/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.ssm-partners-page__cta {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background: var(--color-black);
    color: var(--color-white);
}

.ssm-partners-page__cta::before {
    content: "";
    position: absolute;
    top: -220px;
    right: -130px;
    width: 570px;
    height: 570px;
    border: 1px solid rgba(229, 9, 20, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.ssm-partners-page__cta-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.ssm-partners-page__cta-inner h2 {
    max-width: 720px;
    margin: 0;
    color: var(--color-white);
    font-size: clamp(2.2rem, 4.5vw, 3.7rem);
    font-weight: var(--weight-extrabold);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.ssm-partners-page__cta-inner p {
    margin: 14px 0 0;
    color: var(--text-light-muted);
    font-size: 14px;
    line-height: 1.7;
}

.ssm-partners-page__cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 10px;
    min-height: 50px;
    padding: 12px 21px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.ssm-partners-page__cta-button:hover {
    background: var(--color-primary-light);
    color: var(--color-white);
    transform: translateY(-2px);
}

.ssm-partners-page__cta-button i {
    font-size: 9px;
    transition: transform var(--transition-fast);
}

.ssm-partners-page__cta-button:hover i {
    transform: translateX(4px);
}
/*
|--------------------------------------------------------------------------
| CONTACT PAGE
|--------------------------------------------------------------------------
*/

.ssm-contact-page {
    overflow: hidden;
    background: var(--bg-body);
    color: var(--text-primary);
}


/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.ssm-contact-page__hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 430px;
    padding: 90px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 82% 38%,
            rgba(229, 9, 20, 0.13),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #070707 0%,
            #141414 100%
        );
    color: var(--color-white);
}

.ssm-contact-page__hero::before {
    content: "";
    position: absolute;
    top: -210px;
    right: -130px;
    width: 570px;
    height: 570px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 50%;
    pointer-events: none;
}

.ssm-contact-page__hero::after {
    content: "";
    position: absolute;
    right: 18%;
    bottom: -180px;
    width: 380px;
    height: 380px;
    border: 1px solid rgba(229, 9, 20, 0.11);
    border-radius: 50%;
    pointer-events: none;
}

.ssm-contact-page__hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}


/*
|--------------------------------------------------------------------------
| EYEBROW
|--------------------------------------------------------------------------
*/

.ssm-contact-page__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ssm-contact-page__eyebrow-line {
    width: 28px;
    height: 2px;
    flex: 0 0 auto;
    background: var(--color-primary);
}


/*
|--------------------------------------------------------------------------
| HERO TITLE
|--------------------------------------------------------------------------
*/

.ssm-contact-page__title {
    max-width: 850px;
    margin: 0;
    color: var(--color-white);
    font-size: clamp(3rem, 6vw, 5.2rem);
    font-weight: var(--weight-extrabold);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.ssm-contact-page__hero .ssm-contact-page__description {
    max-width: 650px;
    margin: 24px 0 0;
    color: var(--text-light-muted);
    font-size: 15px;
    line-height: 1.8;
}


/*
|--------------------------------------------------------------------------
| MAIN CONTACT SECTION
|--------------------------------------------------------------------------
*/

.ssm-contact-page__main {
    padding: 105px 0 110px;
    background: var(--bg-body);
}

.ssm-contact-page__layout {
    display: grid;
    grid-template-columns:
        minmax(280px, 0.78fr)
        minmax(0, 1.22fr);
    gap: 75px;
    align-items: start;
}


/*
|--------------------------------------------------------------------------
| CONTACT INFORMATION
|--------------------------------------------------------------------------
*/

.ssm-contact-page__info {
    position: relative;
}

.ssm-contact-page__section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-transform: uppercase;
}

.ssm-contact-page__section-label::before {
    content: "";
    width: 20px;
    height: 2px;
    background: var(--color-primary);
}

.ssm-contact-page__info h2,
.ssm-contact-page__form-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(2rem, 3.2vw, 3rem);
    font-weight: var(--weight-extrabold);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.ssm-contact-page__info-intro {
    max-width: 480px;
    margin: 18px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.8;
}


/*
|--------------------------------------------------------------------------
| CONTACT DETAILS
|--------------------------------------------------------------------------
*/

.ssm-contact-page__details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 34px;
}

.ssm-contact-page__detail {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
    color: inherit;
    text-decoration: none;
}

a.ssm-contact-page__detail {
    transition: color var(--transition-fast);
}

a.ssm-contact-page__detail:hover {
    color: var(--color-primary);
}

.ssm-contact-page__detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: rgba(229, 9, 20, 0.07);
    color: var(--color-primary);
    font-size: 14px;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);
}

a.ssm-contact-page__detail:hover
.ssm-contact-page__detail-icon {
    background: var(--color-primary);
    color: var(--color-white);
}

.ssm-contact-page__detail-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 4px;
}

.ssm-contact-page__detail-content small {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ssm-contact-page__detail-content strong {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
}


/*
|--------------------------------------------------------------------------
| SOCIAL
|--------------------------------------------------------------------------
*/

.ssm-contact-page__social {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 28px;
}

.ssm-contact-page__social > span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ssm-contact-page__social-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ssm-contact-page__social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 12px;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.ssm-contact-page__social-links a:hover {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-3px);
}


/*
|--------------------------------------------------------------------------
| FORM WRAPPER
|--------------------------------------------------------------------------
*/

.ssm-contact-page__form-wrapper {
    padding: 42px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
}

.ssm-contact-page__form-header {
    margin-bottom: 30px;
}

.ssm-contact-page__form-header .ssm-contact-page__section-label {
    margin-bottom: 12px;
}


/*
|--------------------------------------------------------------------------
| FORM
|--------------------------------------------------------------------------
*/

.ssm-contact-page__form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 21px 18px;
}

.ssm-contact-page__field {
    min-width: 0;
}

.ssm-contact-page__field--full {
    grid-column: 1 / -1;
}

.ssm-contact-page__field label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 800;
}

.ssm-contact-page__field label span {
    color: var(--color-primary);
}

.ssm-contact-page__field input,
.ssm-contact-page__field textarea {
    display: block;
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    outline: none;
    background: var(--bg-light);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.ssm-contact-page__field input {
    min-height: 50px;
    padding: 13px 15px;
}

.ssm-contact-page__field textarea {
    min-height: 160px;
    padding: 14px 15px;
    resize: vertical;
}

.ssm-contact-page__field input::placeholder,
.ssm-contact-page__field textarea::placeholder {
    color: var(--text-muted);
}

.ssm-contact-page__field input:focus,
.ssm-contact-page__field textarea:focus {
    border-color: var(--color-primary);
    background: var(--bg-surface);
    box-shadow:
        0 0 0 3px rgba(229, 9, 20, 0.07);
}


/*
|--------------------------------------------------------------------------
| FIELD ERROR
|--------------------------------------------------------------------------
*/

.ssm-contact-page__field-error {
    display: block;
    min-height: 16px;
    margin-top: 5px;
    color: var(--color-primary);
    font-size: 10px;
    line-height: 1.4;
}

.ssm-contact-page__field.is-error input,
.ssm-contact-page__field.is-error textarea {
    border-color: var(--color-primary);
}


/*
|--------------------------------------------------------------------------
| FORM FOOTER
|--------------------------------------------------------------------------
*/

.ssm-contact-page__form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.ssm-contact-page__form-footer p {
    max-width: 390px;
    margin: 0;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.65;
}


/*
|--------------------------------------------------------------------------
| SUBMIT
|--------------------------------------------------------------------------
*/

.ssm-contact-page__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 10px;
    min-height: 50px;
    padding: 12px 21px;
    border: 0;
    border-radius: var(--radius-sm);
    outline: none;
    background: var(--color-primary);
    color: var(--color-white);
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast),
        opacity var(--transition-fast);
}

.ssm-contact-page__submit:hover:not(:disabled) {
    background: var(--color-primary-light);
    transform: translateY(-2px);
}

.ssm-contact-page__submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.ssm-contact-page__submit i {
    font-size: 9px;
    transition: transform var(--transition-fast);
}

.ssm-contact-page__submit:hover:not(:disabled) i {
    transform: translateX(4px);
}


/*
|--------------------------------------------------------------------------
| FORM MESSAGE
|--------------------------------------------------------------------------
*/

.ssm-contact-page__form-message {
    margin-bottom: 20px;
    padding: 13px 15px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 12px;
    line-height: 1.55;
}

.ssm-contact-page__form-message.is-success {
    border-color: rgba(25, 135, 84, 0.2);
    background: rgba(25, 135, 84, 0.07);
    color: #176b46;
}

.ssm-contact-page__form-message.is-error {
    border-color: rgba(229, 9, 20, 0.18);
    background: rgba(229, 9, 20, 0.06);
    color: var(--color-primary);
}


/*
|--------------------------------------------------------------------------
| MAP
|--------------------------------------------------------------------------
*/

.ssm-contact-page__map {
    padding: 0 0 105px;
    background: var(--bg-body);
}

.ssm-contact-page__map-wrapper {
    position: relative;
    min-height: 380px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: #eeeeee;
    box-shadow: var(--shadow-sm);
}

.ssm-contact-page__map-wrapper iframe {
    display: block;
    width: 100%;
    min-height: 380px;
    border: 0;
}


/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.ssm-contact-page__cta {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background: var(--color-black);
    color: var(--color-white);
}

.ssm-contact-page__cta::before {
    content: "";
    position: absolute;
    top: -220px;
    right: -130px;
    width: 570px;
    height: 570px;
    border: 1px solid rgba(229, 9, 20, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.ssm-contact-page__cta-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.ssm-contact-page__cta-inner h2 {
    max-width: 720px;
    margin: 0;
    color: var(--color-white);
    font-size: clamp(2.2rem, 4.5vw, 3.7rem);
    font-weight: var(--weight-extrabold);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.ssm-contact-page__cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 10px;
    min-height: 50px;
    padding: 12px 21px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.ssm-contact-page__cta-button:hover {
    background: var(--color-primary-light);
    color: var(--color-white);
    transform: translateY(-2px);
}

.ssm-contact-page__cta-button i {
    font-size: 9px;
    transition: transform var(--transition-fast);
}

.ssm-contact-page__cta-button:hover i {
    transform: translateX(4px);
}
/*
|--------------------------------------------------------------------------
| SSM HEADER / NAVBAR
|--------------------------------------------------------------------------
*/

.ssm-header {
    position: relative;
    z-index: 1030;
    width: 100%;
    background: #050505;
}

.ssm-navbar {
    min-height: 82px;
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: #050505;
}

.ssm-navbar__container {
    min-height: 82px;
}


/*
|--------------------------------------------------------------------------
| BRAND
|--------------------------------------------------------------------------
*/

.ssm-navbar__brand {
    display: inline-flex;
    align-items: center;
    height: 82px;
    padding: 0;
    color: #fff;
    text-decoration: none;
}

.ssm-navbar__brand:hover {
    color: #fff;
}

.ssm-navbar__brand-text {
    color: #fff;
    font-family:
        "Playfair Display",
        "Cormorant Garamond",
        Georgia,
        serif;
    font-size: 22px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;
    white-space: nowrap;
}


/*
|--------------------------------------------------------------------------
| NAVIGATION
|--------------------------------------------------------------------------
*/

.ssm-navbar__collapse {
    justify-content: flex-end;
}

.ssm-navbar__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.ssm-navbar__item {
    position: relative;
}

.ssm-navbar__link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 82px;
    padding: 0 15px !important;
    color: rgba(255,255,255,.67) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    transition: color .22s ease;
}

.ssm-navbar__link::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 0;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s ease;
}

.ssm-navbar__link:hover {
    color: #fff !important;
}

.ssm-navbar__link:hover::after,
.ssm-navbar__link.active::after {
    transform: scaleX(1);
}

.ssm-navbar__link.active {
    color: #fff !important;
}


/*
|--------------------------------------------------------------------------
| BOOK APPOINTMENT
|--------------------------------------------------------------------------
*/

.ssm-navbar__actions {
    display: flex;
    align-items: center;
    margin-left: 18px;
}

.ssm-navbar__appointment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 48px;
    padding: 0 19px;
    border-radius: 8px;
    background: var(--color-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color .22s ease,
        transform .22s ease,
        box-shadow .22s ease;
}

.ssm-navbar__appointment:hover {
    background: var(--color-primary-light);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 9px 25px rgba(229,9,20,.22);
}

.ssm-navbar__appointment i {
    font-size: 9px;
    transition: transform .22s ease;
}

.ssm-navbar__appointment:hover i {
    transform: translateX(4px);
}


/*
|--------------------------------------------------------------------------
| MOBILE TOGGLE
|--------------------------------------------------------------------------
*/

.ssm-navbar__toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 9px;
    background: rgba(255,255,255,.04);
    box-shadow: none !important;
}

.ssm-navbar__toggler:focus {
    box-shadow:
        0 0 0 3px rgba(229,9,20,.12) !important;
}

.ssm-navbar__toggler-icon {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.ssm-navbar__toggler-icon span {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: width .2s ease;
}

.ssm-navbar__toggler-icon span:nth-child(2) {
    width: 14px;
}

.ssm-navbar__toggler:hover
.ssm-navbar__toggler-icon span:nth-child(2) {
    width: 19px;
}


/*
|--------------------------------------------------------------------------
| SCROLLED STATE
|--------------------------------------------------------------------------
*/

.ssm-header.is-scrolled {
    background: rgba(5,5,5,.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
}

/*
|--------------------------------------------------------------------------
| APPOINTMENT PAGE
|--------------------------------------------------------------------------
*/

.appointment-page {
    background: #050505;
    color: #fff;
}


/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.appointment-hero {
    position: relative;
    overflow: hidden;
    padding: 145px 0 125px;
    background:
        radial-gradient(
            circle at 82% 35%,
            rgba(229, 9, 20, .13),
            transparent 34%
        ),
        radial-gradient(
            circle at 65% 100%,
            rgba(229, 9, 20, .06),
            transparent 35%
        ),
        #050505;
}

.appointment-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent 0,
            rgba(255,255,255,.025) 50%,
            transparent 100%
        );
}

.appointment-hero__content {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.appointment-hero h1 {
    margin: 25px 0 25px;
    color: #fff;
    font-size: clamp(52px, 6.3vw, 94px);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: .94;
}

.appointment-hero h1 span {
    color: rgba(255,255,255,.48);
}

.appointment-hero p {
    max-width: 650px;
    margin: 0;
    color: rgba(255,255,255,.58);
    font-size: 17px;
    line-height: 1.75;
}


/*
|--------------------------------------------------------------------------
| SECTION LABEL
|--------------------------------------------------------------------------
*/

.appointment-page .ssm-section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ed111b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}

.appointment-page .ssm-section-label span {
    display: block;
    width: 31px;
    height: 2px;
    background: #ed111b;
}


/*
|--------------------------------------------------------------------------
| MAIN SECTION
|--------------------------------------------------------------------------
*/

.appointment-section {
    position: relative;
    padding: 110px 0 125px;
    background: #f7f7f5;
    color: #111;
}

.appointment-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: 8%;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(229,9,20,.06);
    border-radius: 50%;
    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| APPOINTMENT CARD
|--------------------------------------------------------------------------
*/

.appointment-card {
    position: relative;
    padding: 52px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 25px 70px rgba(0,0,0,.06);
}

.appointment-card__header {
    margin-bottom: 42px;
}

.appointment-card__header h2 {
    margin: 18px 0 12px;
    color: #111;
    font-size: clamp(36px, 4vw, 54px);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1;
}

.appointment-card__header p {
    max-width: 600px;
    margin: 0;
    color: #777;
    font-size: 15px;
    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| FORM
|--------------------------------------------------------------------------
*/

.appointment-form {
    width: 100%;
}

.appointment-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.appointment-form__group {
    margin-bottom: 23px;
}

.appointment-form__label {
    display: block;
    margin-bottom: 9px;
    color: #161616;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}

.appointment-form__label span {
    color: #ed111b;
}


/*
|--------------------------------------------------------------------------
| FORM CONTROLS
|--------------------------------------------------------------------------
*/

.appointment-form__control {
    min-height: 55px;
    border: 1px solid #dedede;
    border-radius: 9px;
    background: #fff;
    color: #161616;
    font-size: 14px;
    box-shadow: none !important;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.appointment-form__control::placeholder {
    color: #a2a2a2;
}

.appointment-form__control:hover {
    border-color: #c9c9c9;
}

.appointment-form__control:focus {
    border-color: #ed111b;
    box-shadow: 0 0 0 3px rgba(237,17,27,.08) !important;
}

select.appointment-form__control {
    cursor: pointer;
}

textarea.appointment-form__control {
    min-height: 135px;
    padding-top: 15px;
    resize: vertical;
}


/*
|--------------------------------------------------------------------------
| SERVICE EMPTY
|--------------------------------------------------------------------------
*/

.appointment-form__empty {
    padding: 17px;
    border: 1px solid #f0cccc;
    border-radius: 9px;
    background: #fff6f6;
    color: #b00009;
    font-size: 13px;
}


/*
|--------------------------------------------------------------------------
| SERVICE SUMMARY
|--------------------------------------------------------------------------
*/

.appointment-service-summary {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 0;
    margin: -2px 0 28px;
    overflow: hidden;
    border: 1px solid rgba(237,17,27,.12);
    border-radius: 12px;
    background: #fff7f7;
}

.appointment-service-summary > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 17px 19px;
    border-right: 1px solid rgba(237,17,27,.09);
}

.appointment-service-summary > div:last-child {
    border-right: 0;
}

.appointment-service-summary span {
    color: #888;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.appointment-service-summary strong {
    color: #171717;
    font-size: 14px;
    font-weight: 800;
}


/*
|--------------------------------------------------------------------------
| SUBMIT
|--------------------------------------------------------------------------
*/

.appointment-form__submit {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 12px;
}

.appointment-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 54px;
    padding: 0 25px;
    border: 0;
    border-radius: 8px;
    background: #ed111b;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.appointment-submit:hover {
    background: #d90d16;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(237,17,27,.2);
}

.appointment-submit i {
    font-size: 10px;
    transition: transform .2s ease;
}

.appointment-submit:hover i {
    transform: translateX(4px);
}

.appointment-submit:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.appointment-form__submit small {
    max-width: 300px;
    color: #888;
    font-size: 11px;
    line-height: 1.55;
}


/*
|--------------------------------------------------------------------------
| RESPONSE
|--------------------------------------------------------------------------
*/

.appointment-response {
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
}

.appointment-response.is-success {
    border: 1px solid #b8dfc0;
    background: #effaf1;
    color: #236b31;
}

.appointment-response.is-error {
    border: 1px solid #f1c1c1;
    background: #fff3f3;
    color: #a40008;
}


/*
|--------------------------------------------------------------------------
| SIDEBAR
|--------------------------------------------------------------------------
*/

.appointment-sidebar {
    position: sticky;
    top: 110px;
}

.appointment-sidebar__block {
    padding: 15px 5px 35px;
}

.appointment-sidebar__block h3 {
    margin: 20px 0 17px;
    color: #111;
    font-size: clamp(35px, 3.5vw, 51px);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: .98;
}

.appointment-sidebar__block h3 strong {
    color: #ed111b;
}

.appointment-sidebar__block p {
    max-width: 390px;
    margin: 0;
    color: #747474;
    font-size: 14px;
    line-height: 1.75;
}


/*
|--------------------------------------------------------------------------
| FEATURES
|--------------------------------------------------------------------------
*/

.appointment-sidebar__features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 30px 0;
    border-top: 1px solid rgba(0,0,0,.08);
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.appointment-feature {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
}

.appointment-feature__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    background: #fff0f1;
    color: #ed111b;
    font-size: 15px;
}

.appointment-feature div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.appointment-feature strong {
    color: #171717;
    font-size: 13px;
    font-weight: 800;
}

.appointment-feature span {
    color: #888;
    font-size: 11px;
    line-height: 1.5;
}


/*
|--------------------------------------------------------------------------
| CONTACT BLOCK
|--------------------------------------------------------------------------
*/

.appointment-sidebar__contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 30px;
    padding: 28px;
    border-radius: 14px;
    background: #111;
    color: #fff;
}

.appointment-sidebar__contact > span {
    color: #ed111b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
}

.appointment-sidebar__contact > strong {
    margin: 5px 0 10px;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.05;
}

.appointment-sidebar__contact a,
.appointment-sidebar__contact div {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255,255,255,.62);
    font-size: 12px;
    line-height: 1.55;
    text-decoration: none;
}

.appointment-sidebar__contact a:hover {
    color: #fff;
}

.appointment-sidebar__contact i {
    width: 15px;
    margin-top: 2px;
    color: #ed111b;
    text-align: center;
}


/*
|--------------------------------------------------------------------------
| RESPONSIVE — TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 991.98px) {

    .appointment-hero {
        padding: 110px 0 95px;
    }

    .appointment-section {
        padding: 80px 0 90px;
    }

    .appointment-card {
        padding: 40px;
    }

    .appointment-sidebar {
        position: static;
    }

}


/*
|--------------------------------------------------------------------------
| RESPONSIVE — MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .appointment-hero {
        padding: 90px 0 75px;
    }

    .appointment-hero h1 {
        font-size: clamp(45px, 12vw, 66px);
    }

    .appointment-hero p {
        font-size: 14px;
    }

    .appointment-section {
        padding: 60px 0 70px;
    }

    .appointment-card {
        padding: 28px 22px;
        border-radius: 15px;
    }

    .appointment-card__header {
        margin-bottom: 32px;
    }

    .appointment-card__header h2 {
        font-size: 38px;
    }

    .appointment-form__row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .appointment-service-summary {
        grid-template-columns: 1fr;
    }

    .appointment-service-summary > div {
        border-right: 0;
        border-bottom: 1px solid rgba(237,17,27,.09);
    }

    .appointment-service-summary > div:last-child {
        border-bottom: 0;
    }

    .appointment-form__submit {
        align-items: stretch;
        flex-direction: column;
        gap: 13px;
    }

    .appointment-submit {
        width: 100%;
    }

    .appointment-form__submit small {
        max-width: none;
    }

    .appointment-sidebar__block {
        padding-top: 15px;
    }

}


/*
|--------------------------------------------------------------------------
| RESPONSIVE — SMALL MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 575.98px) {

    .appointment-hero {
        padding: 75px 0 65px;
    }

    .appointment-hero h1 {
        font-size: 45px;
    }

    .appointment-card {
        padding: 25px 18px;
    }

    .appointment-card__header h2 {
        font-size: 34px;
    }

    .appointment-sidebar__block h3 {
        font-size: 39px;
    }

    .appointment-sidebar__contact {
        padding: 24px 20px;
    }

}


/* ==========================================================================
   SHAKTI SPORTS MASSAGE
   CLIENT SHOWCASE
   RETRY NEW ISOLATED VERSION
   ========================================================================== */


/* ==========================================================================
   ROOT / SECTION
   ========================================================================== */

.retry-new-ssm-clients {
    --retry-new-ssm-black: #111111;
    --retry-new-ssm-deep-black: #0a0a0a;
    --retry-new-ssm-white: #ffffff;
    --retry-new-ssm-off-white: #f5f5f3;
    --retry-new-ssm-grey: #777777;
    --retry-new-ssm-light-grey: #dedede;
    --retry-new-ssm-red: #ff1e25;

    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;

    padding: 130px 0 120px;

    background: var(--retry-new-ssm-off-white);
    color: var(--retry-new-ssm-black);

    isolation: isolate;
}


/* ==========================================================================
   BACKGROUND WORD
   ========================================================================== */

.retry-new-ssm-clients__bg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
    overflow: hidden;

    z-index: -1;
}


.retry-new-ssm-clients__bg-word {
    position: absolute;

    left: -30px;
    bottom: -80px;

    font-size: clamp(180px, 22vw, 420px);
    font-weight: 900;
    line-height: 0.75;

    letter-spacing: -0.08em;

    color: rgba(0, 0, 0, 0.025);

    white-space: nowrap;
    user-select: none;
}


/* ==========================================================================
   INNER
   ========================================================================== */

.retry-new-ssm-clients__inner {
    position: relative;

    width: calc(100% - 120px);
    max-width: 1440px;

    margin: 0 auto;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.retry-new-ssm-clients__header {
    display: grid;

    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);

    gap: 80px;

    align-items: end;

    margin-bottom: 70px;
}


/* ==========================================================================
   EYEBROW
   ========================================================================== */

.retry-new-ssm-clients__eyebrow {
    display: flex;

    align-items: center;
    gap: 14px;

    margin-bottom: 25px;

    color: var(--retry-new-ssm-red);

    font-size: 12px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.retry-new-ssm-clients__eyebrow-line {
    display: block;

    width: 32px;
    height: 2px;

    flex: 0 0 32px;

    background: var(--retry-new-ssm-red);
}


/* ==========================================================================
   TITLE
   ========================================================================== */

.retry-new-ssm-clients__title {
    max-width: 850px;

    margin: 0;

    color: var(--retry-new-ssm-black);

    font-size: clamp(48px, 5.2vw, 82px);
    font-weight: 800;

    line-height: 0.94;

    letter-spacing: -0.055em;
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.retry-new-ssm-clients__intro {
    padding-bottom: 5px;
}


.retry-new-ssm-clients__description {
    max-width: 420px;

    margin: 0;

    color: #777777;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.7;
}


/* ==========================================================================
   SLIDER
   ========================================================================== */

.retry-new-ssm-client-slider {
    position: relative;

    width: 100%;
}


/* ==========================================================================
   VIEWPORT
   ========================================================================== */

.retry-new-ssm-client-slider__viewport {
    position: relative;

    width: 100%;

    overflow: hidden;
}


/* ==========================================================================
   TRACK
   ========================================================================== */

.retry-new-ssm-client-slider__track {
    display: flex;

    align-items: stretch;

    gap: 18px;

    width: max-content;

    will-change: transform;

    transform: translate3d(0, 0, 0);

    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================================
   CLIENT CARD
   ========================================================================== */

.retry-new-ssm-client-card {
    position: relative;

    display: flex;
    flex-direction: column;

    flex: 0 0 315px;

    width: 315px;
    min-width: 315px;
    max-width: 315px;

    min-height: 515px;

    overflow: hidden;

    border-radius: 16px;

    background: var(--retry-new-ssm-white);

    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.05),
        0 12px 35px rgba(0, 0, 0, 0.055);

    transition:
        transform 400ms ease,
        box-shadow 400ms ease;
}


.retry-new-ssm-client-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.04),
        0 22px 50px rgba(0, 0, 0, 0.10);
}


/* ==========================================================================
   CARD IMAGE
   ========================================================================== */

.retry-new-ssm-client-card__image {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 360px;

    flex: 0 0 360px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #1c1c1c 0%,
            #121212 55%,
            #0b0b0b 100%
        );
}


/* ==========================================================================
   CARD IMAGE
   ========================================================================== */

.retry-new-ssm-client-card__image img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    display: block;

    transition:
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}


.retry-new-ssm-client-card:hover
.retry-new-ssm-client-card__image img {
    transform: scale(1.045);
}


/* ==========================================================================
   IMAGE OVERLAY
   ========================================================================== */

.retry-new-ssm-client-card__image-overlay {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.10) 0%,
            rgba(0, 0, 0, 0.00) 45%,
            rgba(0, 0, 0, 0.20) 100%
        );
}


/* ==========================================================================
   INITIAL
   ========================================================================== */

.retry-new-ssm-client-card__initial {
    position: relative;

    z-index: 2;

    color: #ffffff;

    font-size: 72px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: -0.05em;
}


/* ==========================================================================
   CARD NUMBER
   ========================================================================== */

.retry-new-ssm-client-card__number {
    position: absolute;

    top: 16px;
    left: 16px;

    z-index: 3;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border: 1px solid rgba(255, 255, 255, 0.18);

    border-radius: 7px;

    background: var(--retry-new-ssm-red);

    color: #ffffff;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.06em;
}


/* ==========================================================================
   CARD CONTENT
   ========================================================================== */

.retry-new-ssm-client-card__content {
    display: flex;
    flex-direction: column;

    flex: 1;

    min-height: 155px;

    padding: 24px 24px 20px;
}


/* ==========================================================================
   IDENTITY
   ========================================================================== */

.retry-new-ssm-client-card__identity {
    min-width: 0;
}


.retry-new-ssm-client-card__name {
    margin: 0 0 8px;

    color: var(--retry-new-ssm-black);

    font-size: 22px;
    font-weight: 750;

    line-height: 1.15;

    letter-spacing: -0.025em;
}


.retry-new-ssm-client-card__role {
    display: block;

    color: var(--retry-new-ssm-red);

    font-size: 10px;
    font-weight: 800;

    line-height: 1.3;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


/* ==========================================================================
   VIEW PROFILE
   ========================================================================== */

.retry-new-ssm-client-card__profile {
    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin-top: auto;
    padding: 18px 0 0;

    border: 0;
    border-top: 1px solid #e4e4e4;

    border-radius: 0;

    background: transparent;

    color: var(--retry-new-ssm-black);

    font-family: inherit;

    font-size: 12px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.06em;

    text-align: left;
    text-transform: uppercase;

    cursor: pointer;

    appearance: none;

    transition:
        color 250ms ease,
        border-color 250ms ease;
}


.retry-new-ssm-client-card__profile:hover {
    color: var(--retry-new-ssm-red);

    border-top-color: #cfcfcf;
}


.retry-new-ssm-client-card__profile-arrow {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    transition:
        transform 250ms ease,
        color 250ms ease;
}


.retry-new-ssm-client-card__profile:hover
.retry-new-ssm-client-card__profile-arrow {
    transform: translateX(4px);

    color: var(--retry-new-ssm-red);
}


/* ==========================================================================
   SLIDER CONTROLS
   ========================================================================== */

.retry-new-ssm-client-slider__controls {
    display: flex;

    align-items: center;

    gap: 14px;

    width: 100%;

    margin-top: 30px;
}


/* ==========================================================================
   SLIDER BUTTON
   ========================================================================== */

.retry-new-ssm-client-slider__control {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    border: 1px solid #d5d5d5;

    border-radius: 50%;

    background: #ffffff;

    color: #111111;

    font-family: inherit;

    cursor: pointer;

    appearance: none;

    transition:
        background 250ms ease,
        color 250ms ease,
        border-color 250ms ease,
        transform 250ms ease;
}


.retry-new-ssm-client-slider__control:hover {
    border-color: var(--retry-new-ssm-red);

    background: var(--retry-new-ssm-red);

    color: #ffffff;

    transform: translateY(-2px);
}


.retry-new-ssm-client-slider__control:active {
    transform: translateY(0);
}


/* ==========================================================================
   PROGRESS
   ========================================================================== */

.retry-new-ssm-client-slider__progress {
    position: relative;

    width: 150px;
    height: 2px;

    overflow: hidden;

    background: #d4d4d4;
}


.retry-new-ssm-client-slider__progress-fill {
    display: block;

    width: 0;
    height: 100%;

    background: var(--retry-new-ssm-red);

    transition: width 700ms ease;
}


/* ==========================================================================
   SECTION FOOTER
   ========================================================================== */

.retry-new-ssm-clients__footer {
    display: flex;

    justify-content: flex-end;

    margin-top: 55px;
}


/* ==========================================================================
   CTA
   ========================================================================== */

.retry-new-ssm-clients__cta {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 15px;

    min-height: 54px;

    padding: 0 24px;

    border: 1px solid var(--retry-new-ssm-black);
    border-radius: 3px;

    background: var(--retry-new-ssm-black);

    color: #ffffff;

    font-family: inherit;

    font-size: 12px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.08em;

    text-decoration: none;
    text-transform: uppercase;

    transition:
        background 250ms ease,
        color 250ms ease,
        border-color 250ms ease,
        transform 250ms ease;
}


.retry-new-ssm-clients__cta:hover {
    border-color: var(--retry-new-ssm-red);

    background: var(--retry-new-ssm-red);

    color: #ffffff;

    transform: translateY(-2px);
}


.retry-new-ssm-clients__cta i {
    transition: transform 250ms ease;
}


.retry-new-ssm-clients__cta:hover i {
    transform: translateX(4px);
}


/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.retry-new-ssm-clients__empty {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    min-height: 300px;

    padding: 40px;

    border: 1px solid #dddddd;
    border-radius: 16px;

    background: #ffffff;

    text-align: center;
}


.retry-new-ssm-clients__empty-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

    margin-bottom: 20px;

    border-radius: 50%;

    background: #111111;

    color: #ffffff;
}


.retry-new-ssm-clients__empty h3 {
    margin: 0 0 8px;

    font-size: 22px;
}


.retry-new-ssm-clients__empty p {
    margin: 0;

    color: #777777;
}


/* ==========================================================================
   PROFILE MODAL
   ========================================================================== */

.retry-new-ssm-client-modal {
    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100vw;
    height: 100dvh;

    padding: 30px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 300ms ease,
        visibility 300ms ease;
}


.retry-new-ssm-client-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* ==========================================================================
   MODAL BACKDROP
   ========================================================================== */

.retry-new-ssm-client-modal__backdrop {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.76);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    cursor: pointer;
}


/* ==========================================================================
   MODAL DIALOG
   ========================================================================== */

.retry-new-ssm-client-modal__dialog {
    position: relative;

    display: grid;

    grid-template-columns: 270px minmax(0, 1fr);

    width: min(760px, 100%);

    max-height: min(620px, calc(100dvh - 60px));

    overflow: hidden;

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 35px 100px rgba(0, 0, 0, 0.35);

    transform: translateY(20px) scale(0.97);

    transition:
        transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}


.retry-new-ssm-client-modal.is-open
.retry-new-ssm-client-modal__dialog {
    transform: translateY(0) scale(1);
}


/* ==========================================================================
   MODAL CLOSE
   ========================================================================== */

.retry-new-ssm-client-modal__close {
    position: absolute;

    top: 18px;
    right: 18px;

    z-index: 10;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border: 0;
    border-radius: 50%;

    background: #111111;

    color: #ffffff;

    font-family: inherit;

    font-size: 18px;

    cursor: pointer;

    appearance: none;

    transition:
        background 250ms ease,
        transform 250ms ease;
}


.retry-new-ssm-client-modal__close:hover {
    background: var(--retry-new-ssm-red);

    transform: rotate(5deg) scale(1.05);
}


/* ==========================================================================
   MODAL IMAGE
   ========================================================================== */

.retry-new-ssm-client-modal__image {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 430px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #1b1b1b 0%,
            #111111 55%,
            #080808 100%
        );
}


.retry-new-ssm-client-modal__image img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 430px;

    object-fit: cover;

    object-position: center;
}


.retry-new-ssm-client-modal__initial {
    display: none;

    color: #ffffff;

    font-size: 100px;
    font-weight: 700;

    line-height: 1;
}


/* ==========================================================================
   MODAL CONTENT
   ========================================================================== */

.retry-new-ssm-client-modal__content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;

    padding: 70px 50px 50px;
}


.retry-new-ssm-client-modal__eyebrow {
    display: block;

    margin-bottom: 18px;

    color: var(--retry-new-ssm-red);

    font-size: 10px;
    font-weight: 800;

    line-height: 1.3;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.retry-new-ssm-client-modal__name {
    margin: 0 0 10px;

    color: #111111;

    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


.retry-new-ssm-client-modal__role {
    display: block;

    margin-bottom: 28px;

    color: #666666;

    font-size: 11px;
    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.retry-new-ssm-client-modal__description {
    max-width: 460px;

    margin: 0;

    color: #555555;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.75;
}


/* ==========================================================================
   BODY LOCK
   ========================================================================== */

body.retry-new-ssm-modal-open {
    overflow: hidden;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .retry-new-ssm-clients {
        padding: 105px 0 100px;
    }


    .retry-new-ssm-clients__inner {
        width: calc(100% - 70px);
    }


    .retry-new-ssm-clients__header {
        grid-template-columns: 1fr 0.65fr;

        gap: 45px;

        margin-bottom: 55px;
    }


    .retry-new-ssm-client-card {
        flex-basis: 300px;

        width: 300px;
        min-width: 300px;
        max-width: 300px;
    }


    .retry-new-ssm-client-card__image {
        height: 335px;

        flex-basis: 335px;
    }

}


/* ==========================================================================
   TABLET / SMALL DESKTOP
   ========================================================================== */

@media (max-width: 850px) {

    .retry-new-ssm-clients__header {
        display: block;
    }


    .retry-new-ssm-clients__intro {
        margin-top: 25px;
    }


    .retry-new-ssm-clients__description {
        max-width: 560px;
    }


    .retry-new-ssm-client-card {
        flex-basis: 290px;

        width: 290px;
        min-width: 290px;
        max-width: 290px;
    }


    .retry-new-ssm-client-card__image {
        height: 325px;

        flex-basis: 325px;
    }


    .retry-new-ssm-client-modal__dialog {
        grid-template-columns: 230px minmax(0, 1fr);
    }


    .retry-new-ssm-client-modal__content {
        padding: 60px 38px 40px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .retry-new-ssm-clients {
        padding: 80px 0 75px;
    }


    .retry-new-ssm-clients__inner {
        width: calc(100% - 32px);
    }


    .retry-new-ssm-clients__header {
        margin-bottom: 38px;
    }


    .retry-new-ssm-clients__eyebrow {
        margin-bottom: 18px;

        font-size: 10px;
    }


    .retry-new-ssm-clients__title {
        font-size: clamp(40px, 12vw, 58px);

        line-height: 0.95;
    }


    .retry-new-ssm-clients__description {
        margin-top: 20px;

        font-size: 14px;

        line-height: 1.65;
    }


    /* ----------------------------------------------------------------------
       MOBILE CARD
       ---------------------------------------------------------------------- */

    .retry-new-ssm-client-slider__track {
        gap: 14px;
    }


    .retry-new-ssm-client-card {
        flex-basis: calc(100vw - 52px);

        width: calc(100vw - 52px);
        min-width: calc(100vw - 52px);
        max-width: calc(100vw - 52px);

        min-height: 500px;

        border-radius: 14px;
    }


    .retry-new-ssm-client-card__image {
        height: 340px;

        flex-basis: 340px;
    }


    .retry-new-ssm-client-card__content {
        min-height: 160px;

        padding: 22px 20px 18px;
    }


    .retry-new-ssm-client-card__name {
        font-size: 21px;
    }


    .retry-new-ssm-client-card__profile {
        padding-top: 16px;
    }


    /* ----------------------------------------------------------------------
       CONTROLS
       ---------------------------------------------------------------------- */

    .retry-new-ssm-client-slider__controls {
        justify-content: flex-start;

        margin-top: 22px;
    }


    .retry-new-ssm-client-slider__control {
        width: 44px;
        height: 44px;

        flex-basis: 44px;
    }


    .retry-new-ssm-client-slider__progress {
        width: 100px;
    }


    /* ----------------------------------------------------------------------
       FOOTER
       ---------------------------------------------------------------------- */

    .retry-new-ssm-clients__footer {
        justify-content: flex-start;

        margin-top: 38px;
    }


    /* ----------------------------------------------------------------------
       MODAL
       ---------------------------------------------------------------------- */

    .retry-new-ssm-client-modal {
        padding: 16px;
    }


    .retry-new-ssm-client-modal__dialog {
        display: flex;

        flex-direction: column;

        width: 100%;
        max-width: 430px;

        max-height: calc(100dvh - 32px);

        border-radius: 16px;
    }


    .retry-new-ssm-client-modal__image {
        width: 100%;
        min-height: 260px;

        height: 260px;
        flex: 0 0 260px;
    }


    .retry-new-ssm-client-modal__image img {
        min-height: 260px;
    }


    .retry-new-ssm-client-modal__content {
        display: block;

        overflow-y: auto;

        padding: 30px 25px 30px;
    }


    .retry-new-ssm-client-modal__eyebrow {
        margin-bottom: 12px;

        font-size: 9px;
    }


    .retry-new-ssm-client-modal__name {
        margin-bottom: 8px;

        font-size: 34px;
    }


    .retry-new-ssm-client-modal__role {
        margin-bottom: 20px;
    }


    .retry-new-ssm-client-modal__description {
        font-size: 14px;

        line-height: 1.7;
    }


    .retry-new-ssm-client-modal__close {
        top: 12px;
        right: 12px;

        width: 40px;
        height: 40px;

        font-size: 16px;
    }

}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 380px) {

    .retry-new-ssm-clients__inner {
        width: calc(100% - 24px);
    }


    .retry-new-ssm-client-card {
        flex-basis: calc(100vw - 38px);

        width: calc(100vw - 38px);
        min-width: calc(100vw - 38px);
        max-width: calc(100vw - 38px);
    }


    .retry-new-ssm-client-card__image {
        height: 315px;

        flex-basis: 315px;
    }


    .retry-new-ssm-client-modal__image {
        height: 230px;
        min-height: 230px;

        flex-basis: 230px;
    }


    .retry-new-ssm-client-modal__image img {
        min-height: 230px;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .retry-new-ssm-client-card,
    .retry-new-ssm-client-card__image img,
    .retry-new-ssm-client-card__profile,
    .retry-new-ssm-client-card__profile-arrow,
    .retry-new-ssm-client-slider__control,
    .retry-new-ssm-clients__cta,
    .retry-new-ssm-client-modal,
    .retry-new-ssm-client-modal__dialog {
        transition: none;
    }


    .retry-new-ssm-client-slider__track {
        transition: none;
    }

}
.retry-new-ssm-client-slider__viewport {
    cursor: grab;
}

.retry-new-ssm-client-slider__viewport.is-dragging {
    cursor: grabbing;
}

.retry-new-ssm-client-slider__viewport.is-dragging * {
    user-select: none;
}