/**
 * SwingDesire About Us page.
 *
 * Loaded only on /about-us/.
 */


/**
 * Hard page reset.
 *
 * These selectors deliberately include the body
 * class so existing homepage styles cannot override
 * the About Us layout.
 */
body.sd-mainsite-about {
    background: #ffffff !important;
}

body.sd-mainsite-about .sd-about-page {
    display: block;
    overflow: hidden;
    color: #211528;
    background: #ffffff;
}

body.sd-mainsite-about .sd-about-page h1,
body.sd-mainsite-about .sd-about-page h2,
body.sd-mainsite-about .sd-about-page h3,
body.sd-mainsite-about .sd-about-page p {
    margin-top: 0;
}

body.sd-mainsite-about .sd-about-page h1 span,
body.sd-mainsite-about .sd-about-page h2 span {
    color: #b833ea !important;
}


/**
 * Remove inherited section overlays.
 */
body.sd-mainsite-about .sd-about-story::before,
body.sd-mainsite-about .sd-about-story::after,
body.sd-mainsite-about .sd-about-values::before,
body.sd-mainsite-about .sd-about-values::after,
body.sd-mainsite-about .sd-about-difference::before,
body.sd-mainsite-about .sd-about-difference::after,
body.sd-mainsite-about .sd-about-community::before,
body.sd-mainsite-about .sd-about-community::after,
body.sd-mainsite-about .sd-about-vision::before,
body.sd-mainsite-about .sd-about-vision::after {
    display: none !important;
    content: none !important;
}


/**
 * Hero.
 */
body.sd-mainsite-about .sd-about-hero {
    position: relative;
    display: flex;
    min-height: 680px;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: #100718;
}

body.sd-mainsite-about .sd-about-hero-media,
body.sd-mainsite-about .sd-about-hero-overlay {
    position: absolute;
    inset: 0;
}

body.sd-mainsite-about .sd-about-hero-media {
    z-index: -3;
}

body.sd-mainsite-about .sd-about-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 34%;
}

body.sd-mainsite-about .sd-about-hero-overlay {
    z-index: -2;
    background:
        linear-gradient(
            90deg,
            rgba(15, 5, 22, 0.97) 0%,
            rgba(22, 7, 32, 0.9) 42%,
            rgba(22, 7, 32, 0.4) 72%,
            rgba(22, 7, 32, 0.2) 100%
        ),
        linear-gradient(
            0deg,
            rgba(15, 5, 22, 0.58) 0%,
            transparent 45%
        );
}

body.sd-mainsite-about .sd-about-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 145px;
    padding-bottom: 100px;
}

body.sd-mainsite-about .sd-about-hero-copy {
    width: min(800px, 100%);
}

body.sd-mainsite-about .sd-about-hero-copy .sd-main-eyebrow {
    margin-bottom: 20px;
}

body.sd-mainsite-about .sd-about-hero-copy h1 {
    margin-bottom: 26px;
    color: #ffffff !important;
    font-size: clamp(44px, 5.6vw, 78px);
    line-height: 0.98;
    letter-spacing: -0.045em;
}

body.sd-mainsite-about .sd-about-hero-copy h1 span {
    display: block;
    margin-top: 10px;
    color: #c833eb !important;
}

body.sd-mainsite-about .sd-about-hero-description {
    width: min(640px, 100%);
    margin-bottom: 34px;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 18px;
    line-height: 1.8;
}

body.sd-mainsite-about .sd-about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}


/**
 * Shared headings.
 */
body.sd-mainsite-about
.sd-about-page
.sd-main-centered-heading {
    max-width: 790px;
    margin-right: auto;
    margin-bottom: 54px;
    margin-left: auto;
    text-align: center;
}

body.sd-mainsite-about
.sd-about-page
.sd-main-centered-heading h2,
body.sd-mainsite-about
.sd-about-story-copy h2,
body.sd-mainsite-about
.sd-about-community-copy h2,
body.sd-mainsite-about
.sd-about-vision h2 {
    margin-bottom: 22px;
    color: #211528 !important;
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

body.sd-mainsite-about
.sd-about-page
.sd-main-centered-heading h2 span,
body.sd-mainsite-about
.sd-about-story-copy h2 span,
body.sd-mainsite-about
.sd-about-community-copy h2 span,
body.sd-mainsite-about
.sd-about-vision h2 span {
    display: block;
    color: #b833ea !important;
}

body.sd-mainsite-about .sd-about-heading-copy {
    max-width: 680px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    color: #706876 !important;
    font-size: 17px;
    line-height: 1.8;
}


/**
 * Story section.
 */
body.sd-mainsite-about .sd-about-story {
    position: relative;
    z-index: 1;
    display: block;
    padding: 110px 0;
    overflow: visible;
    background: #ffffff !important;
    background-image: none !important;
}

body.sd-mainsite-about .sd-about-story-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 0.9fr);
    gap: 80px;
    align-items: center;
}

body.sd-mainsite-about
.sd-about-story-copy {
    position: relative;
    z-index: 4;
    background: transparent !important;
}

body.sd-mainsite-about
.sd-about-story-copy .sd-main-eyebrow,
body.sd-mainsite-about
.sd-about-community-copy .sd-main-eyebrow {
    margin-bottom: 18px;
}

body.sd-mainsite-about
.sd-about-story-copy h2 {
    color: #211528 !important;
}

body.sd-mainsite-about
.sd-about-story-copy p,
body.sd-mainsite-about
.sd-about-community-copy p {
    margin-bottom: 20px;
    color: #6e6673 !important;
    font-size: 16px;
    line-height: 1.85;
}

body.sd-mainsite-about
.sd-about-story-copy .sd-about-lead {
    color: #372b3d !important;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.75;
}

body.sd-mainsite-about .sd-about-story-media {
    position: relative;
    z-index: 4;
    min-height: 570px;
    background: transparent !important;
}

body.sd-mainsite-about
.sd-about-story-media > img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 570px;
    max-width: none;
    border-radius: 30px;
    object-fit: cover;
    box-shadow:
        0 28px 70px
        rgba(62, 24, 82, 0.18);
}

body.sd-mainsite-about .sd-about-story-card {
    position: absolute;
    right: -28px;
    bottom: 28px;
    z-index: 3;
    display: grid;
    width: min(330px, calc(100% - 36px));
    padding: 25px;
    border:
        1px solid
        rgba(255, 255, 255, 0.24);
    border-radius: 22px;
    color: #ffffff;
    background:
        rgba(37, 12, 50, 0.94);
    box-shadow:
        0 20px 46px
        rgba(26, 7, 34, 0.28);
    backdrop-filter: blur(18px);
}

body.sd-mainsite-about
.sd-about-story-card-icon {
    display: inline-flex;
    width: 45px;
    height: 45px;
    margin-bottom: 16px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #8b20e6,
            #d71989
        );
}

body.sd-mainsite-about
.sd-about-story-card-icon svg {
    width: 22px;
    height: 22px;
}

body.sd-mainsite-about
.sd-about-story-card strong {
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 17px;
}

body.sd-mainsite-about
.sd-about-story-card small {
    color:
        rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.65;
}


/**
 * Values.
 */
body.sd-mainsite-about .sd-about-values {
    position: relative;
    z-index: 1;
    display: block;
    padding: 110px 0;
    background: #f8f5fa !important;
    background-image: none !important;
}

body.sd-mainsite-about
.sd-about-values-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 24px;
}

body.sd-mainsite-about
.sd-about-value-card {
    position: relative;
    padding: 40px 34px;
    overflow: hidden;
    border: 1px solid #ece4f0;
    border-radius: 24px;
    background: #ffffff !important;
    box-shadow:
        0 18px 40px
        rgba(53, 27, 66, 0.07);
}

body.sd-mainsite-about
.sd-about-value-card::after {
    position: absolute;
    right: -60px;
    bottom: -70px;
    display: block !important;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background:
        rgba(139, 32, 230, 0.06);
    content: "" !important;
}

body.sd-mainsite-about
.sd-about-value-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 58px;
    height: 58px;
    margin-bottom: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #7f25db,
            #cb178d
        );
    box-shadow:
        0 12px 24px
        rgba(139, 32, 230, 0.22);
}

body.sd-mainsite-about
.sd-about-value-icon svg {
    width: 25px;
    height: 25px;
}

body.sd-mainsite-about
.sd-about-value-card h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
    color: #26192d !important;
    font-size: 22px;
}

body.sd-mainsite-about
.sd-about-value-card p {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    color: #716977 !important;
    font-size: 15px;
    line-height: 1.8;
}


/**
 * Difference section.
 */
body.sd-mainsite-about
.sd-about-difference {
    position: relative;
    z-index: 1;
    display: block;
    padding: 110px 0;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(183, 51, 234, 0.2),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #180821 0%,
            #281033 100%
        ) !important;
}

body.sd-mainsite-about
.sd-about-difference-heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 0.65fr);
    gap: 60px;
    margin-bottom: 52px;
    align-items: end;
}

body.sd-mainsite-about
.sd-about-difference-heading h2 {
    margin-bottom: 0;
    color: #ffffff !important;
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

body.sd-mainsite-about
.sd-about-difference-heading h2 span {
    display: block;
    color: #c833eb !important;
}

body.sd-mainsite-about
.sd-about-difference-heading > p {
    margin-bottom: 8px;
    color:
        rgba(255, 255, 255, 0.72) !important;
    font-size: 16px;
    line-height: 1.8;
}

body.sd-mainsite-about
.sd-about-difference-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 20px;
}

body.sd-mainsite-about
.sd-about-difference-card {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr);
    gap: 20px;
    padding: 28px;
    border:
        1px solid
        rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background:
        rgba(255, 255, 255, 0.055) !important;
    backdrop-filter: blur(12px);
}

body.sd-mainsite-about
.sd-about-difference-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #8b20e6,
            #d71989
        );
}

body.sd-mainsite-about
.sd-about-difference-icon svg {
    width: 22px;
    height: 22px;
}

body.sd-mainsite-about
.sd-about-difference-card h3 {
    margin-bottom: 10px;
    color: #ffffff !important;
    font-size: 19px;
}

body.sd-mainsite-about
.sd-about-difference-card p {
    margin-bottom: 0;
    color:
        rgba(255, 255, 255, 0.7) !important;
    font-size: 14px;
    line-height: 1.75;
}


/**
 * Community section.
 */
body.sd-mainsite-about
.sd-about-community {
    position: relative;
    z-index: 1;
    display: block;
    padding: 110px 0;
    background: #ffffff !important;
    background-image: none !important;
}

body.sd-mainsite-about
.sd-about-community-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        minmax(420px, 0.9fr)
        minmax(0, 1fr);
    gap: 80px;
    align-items: center;
}

body.sd-mainsite-about
.sd-about-community-media {
    position: relative;
}

body.sd-mainsite-about
.sd-about-community-media::before {
    position: absolute;
    top: -22px;
    left: -22px;
    display: block !important;
    width: 48%;
    height: 48%;
    border:
        2px solid
        rgba(139, 32, 230, 0.18);
    border-radius: 30px;
    content: "" !important;
}

body.sd-mainsite-about
.sd-about-community-media img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 590px;
    max-width: none;
    border-radius: 30px;
    object-fit: cover;
    box-shadow:
        0 28px 70px
        rgba(62, 24, 82, 0.15);
}

body.sd-mainsite-about
.sd-about-community-copy {
    position: relative;
    z-index: 3;
}

body.sd-mainsite-about
.sd-about-community-copy h2 {
    display: block;
    color: #211528 !important;
}

body.sd-mainsite-about
.sd-about-community-copy h2 span {
    display: block;
    color: #b833ea !important;
}

body.sd-mainsite-about
.sd-about-promise-list {
    display: grid;
    gap: 13px;
    margin-top: 34px;
}

body.sd-mainsite-about
.sd-about-promise-list > span {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    color: #372b3d !important;
    font-size: 14px;
    font-weight: 600;
}

body.sd-mainsite-about
.sd-about-promise-list i {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #8b20e6;
    background: #f3eafa;
    font-style: normal;
}

body.sd-mainsite-about
.sd-about-promise-list svg {
    width: 17px;
    height: 17px;
}


/**
 * Vision.
 */
body.sd-mainsite-about
.sd-about-vision {
    position: relative;
    z-index: 1;
    display: block;
    padding: 105px 0;
    text-align: center;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(185, 51, 234, 0.12),
            transparent 42%
        ),
        #f8f5fa !important;
}

body.sd-mainsite-about
.sd-about-vision-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

body.sd-mainsite-about
.sd-about-vision-icon {
    display: inline-flex;
    width: 66px;
    height: 66px;
    margin-bottom: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #7f25db,
            #cb178d
        );
    box-shadow:
        0 16px 34px
        rgba(139, 32, 230, 0.25);
}

body.sd-mainsite-about
.sd-about-vision-icon svg {
    width: 29px;
    height: 29px;
}

body.sd-mainsite-about
.sd-about-vision h2 {
    max-width: 860px;
    margin-right: auto;
    margin-left: auto;
    color: #211528 !important;
}

body.sd-mainsite-about
.sd-about-vision h2 span {
    display: block;
    color: #b833ea !important;
}

body.sd-mainsite-about
.sd-about-vision-inner > p:last-child {
    max-width: 760px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    color: #706876 !important;
    font-size: 17px;
    line-height: 1.85;
}

body.sd-mainsite-about
.sd-about-final-cta {
    border-top: 0;
}


/**
 * Tablet.
 */
@media (max-width: 1024px) {

    body.sd-mainsite-about
    .sd-about-hero {
        min-height: 620px;
    }

    body.sd-mainsite-about
    .sd-about-story-grid,
    body.sd-mainsite-about
    .sd-about-community-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    body.sd-mainsite-about
    .sd-about-story-copy,
    body.sd-mainsite-about
    .sd-about-community-copy {
        max-width: 760px;
    }

    body.sd-mainsite-about
    .sd-about-story-media,
    body.sd-mainsite-about
    .sd-about-community-media {
        width: min(720px, 100%);
    }

    body.sd-mainsite-about
    .sd-about-story-media {
        min-height: 520px;
    }

    body.sd-mainsite-about
    .sd-about-story-media > img,
    body.sd-mainsite-about
    .sd-about-community-media img {
        height: 520px;
    }

    body.sd-mainsite-about
    .sd-about-values-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    body.sd-mainsite-about
    .sd-about-value-card:last-child {
        grid-column: 1 / -1;
    }

    body.sd-mainsite-about
    .sd-about-difference-heading {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}


/**
 * Mobile.
 */
@media (max-width: 767px) {

    body.sd-mainsite-about
    .sd-about-hero {
        min-height: 680px;
        align-items: flex-end;
    }

    body.sd-mainsite-about
    .sd-about-hero-media img {
        object-position: 62% center;
    }

    body.sd-mainsite-about
    .sd-about-hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(15, 5, 22, 0.98) 0%,
                rgba(18, 6, 26, 0.93) 58%,
                rgba(18, 6, 26, 0.5) 100%
            );
    }

    body.sd-mainsite-about
    .sd-about-hero-inner {
        padding-top: 150px;
        padding-bottom: 64px;
    }

    body.sd-mainsite-about
    .sd-about-hero-copy h1 {
        font-size:
            clamp(40px, 12vw, 57px);
        line-height: 1.02;
    }

    body.sd-mainsite-about
    .sd-about-hero-description {
        font-size: 16px;
        line-height: 1.7;
    }

    body.sd-mainsite-about
    .sd-about-hero-actions {
        display: grid;
    }

    body.sd-mainsite-about
    .sd-about-hero-actions
    .sd-main-button {
        width: 100%;
        justify-content: center;
    }

    body.sd-mainsite-about
    .sd-about-story,
    body.sd-mainsite-about
    .sd-about-values,
    body.sd-mainsite-about
    .sd-about-difference,
    body.sd-mainsite-about
    .sd-about-community,
    body.sd-mainsite-about
    .sd-about-vision {
        padding-top: 76px;
        padding-bottom: 76px;
    }

    body.sd-mainsite-about
    .sd-about-page
    .sd-main-centered-heading {
        margin-bottom: 38px;
    }

    body.sd-mainsite-about
    .sd-about-page
    .sd-main-centered-heading h2,
    body.sd-mainsite-about
    .sd-about-story-copy h2,
    body.sd-mainsite-about
    .sd-about-difference-heading h2,
    body.sd-mainsite-about
    .sd-about-community-copy h2,
    body.sd-mainsite-about
    .sd-about-vision h2 {
        font-size:
            clamp(32px, 10vw, 44px);
    }

    body.sd-mainsite-about
    .sd-about-story-grid,
    body.sd-mainsite-about
    .sd-about-community-grid {
        gap: 40px;
    }

    body.sd-mainsite-about
    .sd-about-story-copy
    .sd-about-lead {
        font-size: 17px;
    }

    body.sd-mainsite-about
    .sd-about-story-media {
        min-height: auto;
        padding-bottom: 88px;
    }

    body.sd-mainsite-about
    .sd-about-story-media > img,
    body.sd-mainsite-about
    .sd-about-community-media img {
        height: 430px;
        border-radius: 22px;
    }

    body.sd-mainsite-about
    .sd-about-story-card {
        right: 16px;
        bottom: 0;
        left: 16px;
        width: auto;
    }

    body.sd-mainsite-about
    .sd-about-values-grid,
    body.sd-mainsite-about
    .sd-about-difference-grid {
        grid-template-columns: 1fr;
    }

    body.sd-mainsite-about
    .sd-about-value-card:last-child {
        grid-column: auto;
    }

    body.sd-mainsite-about
    .sd-about-value-card {
        padding: 32px 26px;
    }

    body.sd-mainsite-about
    .sd-about-difference-card {
        grid-template-columns: 1fr;
    }

    body.sd-mainsite-about
    .sd-about-community-media::before {
        top: -12px;
        left: -12px;
        border-radius: 22px;
    }

    body.sd-mainsite-about
    .sd-about-promise-list > span {
        align-items: start;
        line-height: 1.55;
    }
}


/**
 * Small mobile.
 */
@media (max-width: 420px) {

    body.sd-mainsite-about
    .sd-about-hero-copy h1 {
        font-size: 39px;
    }

    body.sd-mainsite-about
    .sd-about-story-media > img,
    body.sd-mainsite-about
    .sd-about-community-media img {
        height: 370px;
    }

    body.sd-mainsite-about
    .sd-about-story-card {
        padding: 21px;
    }
}

/**
 * Full-width hero background with contained content.
 */
body.sd-mainsite-about .sd-about-hero {
    width: 100%;
    max-width: none;
    margin: 0;
}

body.sd-mainsite-about .sd-about-hero-inner {
    width: 100%;
    max-width: 1500px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 40px;
    padding-left: 40px;
    box-sizing: border-box;
}

@media (max-width: 767px) {

    body.sd-mainsite-about .sd-about-hero-inner {
        padding-right: 20px;
        padding-left: 20px;
    }
}

body.sd-mainsite-about .sd-about-value-card h3,
body.sd-mainsite-about .sd-about-difference-card h3,
body.sd-mainsite-about .sd-about-story-card strong,
body.sd-mainsite-about .sd-about-page h1,
body.sd-mainsite-about .sd-about-page h2,
body.sd-mainsite-about .sd-about-page h3 {
    font-family: var(--sd-main-body-font) !important;
}