.page-about {
    --about-shell: 1200px;
    --about-text: #314158;
    --about-muted: #62748e;
    --about-light: #90a1b9;
    --about-teal: #5fa8ab;
    --about-navy: #32348f;
}

.page-about main {
    overflow: hidden;
}

.about-shell {
    width: min(calc(100% - 48px), var(--about-shell));
    margin-inline: auto;
}

.about-hero {
    position: relative;
    height: 554px;
    padding-top: 63px;
    background: #fff;
}

.about-hero__copy {
    position: relative;
    z-index: 2;
    width: 598px;
    height: 404px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    margin-inline: auto;
    text-align: center;
}

.about-hero__heading {
    position: relative;
    width: 100%;
    height: 216px;
}

.about-hero__dots {
    position: absolute;
    z-index: -1;
    inset-block-start: -36px;
    left: 50%;
    width: 124px;
    height: 124px;
    background: url("../about/hero-dots.svg") center / 124px 124px no-repeat;
    transform: translateX(-50%);
}

.about-hero__heading p,
.about-hero__heading h1 {
    margin: 0;
    letter-spacing: -1.35px;
}

.about-hero__heading p {
    height: 64px;
    color: var(--about-teal);
    font-size: 40px;
    line-height: 64px;
    font-weight: 400;
}

.about-hero__heading h1 {
    height: 144px;
    margin-top: 8px;
    color: var(--about-text);
    font-size: 44px;
    line-height: 72px;
    font-weight: 950;
}

.about-hero__detail {
    width: 500px;
    height: 156px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.about-hero__detail > p {
    width: 600px;
    height: 60px;
    margin: 0;
    color: var(--about-muted);
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
    letter-spacing: -.48px;
    opacity: .8;
    transform: scaleX(.833333);
    transform-origin: center top;
}

.about-hero__actions,
.about-contact__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    direction: ltr;
}

.about-button {
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 20px;
    border-radius: 18px;
    font-size: 16px;
    line-height: 32px;
    font-weight: 600;
    letter-spacing: -.48px;
    white-space: nowrap;
}

.about-hero__actions .about-button {
    width: 148px;
}

.about-button--muted {
    color: #494b9b;
    background: #e8e8f3;
}

.about-button--teal {
    color: #fff;
    background: var(--about-teal);
}

.about-button--pale {
    min-width: 160px;
    color: var(--about-teal);
    background: #edf5f6;
}

.about-button--navy {
    width: 160px;
    color: #f8fafc;
    background: var(--about-navy);
}

.about-hero__side {
    position: absolute;
    z-index: 1;
    top: 28px;
    width: 291px;
    height: 285px;
    max-width: none;
    pointer-events: none;
}

.about-hero__side--start {
    left: -44px;
}

.about-hero__side--end {
    right: -44px;
    top: 170px;
}

.about-hero__side > img {
    position: absolute;
    left: 3px;
    top: -3px;
    width: 285px;
    height: 291px;
    max-width: none;
    transform: rotate(-90deg);
}

.about-hero__side--end > img {
    transform: rotate(-90deg) scaleY(-1);
}

.about-hero__side--mobile {
    display: none;
}

.about-stats {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 264px;
    display: block;
    margin: 0;
    overflow: hidden;
    margin-top: 0;
}

.about-stats__background,
.about-stats__background img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 264px;
    display: block;
}

.about-stats__grid {
    position: absolute;
    z-index: 1;
    top: 106px;
    left: 50%;
    width: min(calc(100% - 240px), 1200px);
    height: 86px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    direction: ltr;
    transform: translateX(-50%);
}

.about-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.about-stat strong {
    height: 48px;
    color: #f8fafc;
    font-size: 44px;
    line-height: 72px;
    font-weight: 950;
    letter-spacing: -1.35px;
}

.about-stat span {
    height: 23px;
    color: #f1f5f9;
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
    letter-spacing: -.48px;
    opacity: .5;
}

.about-story {
    height: 592px;
    background: #fff;
}

.about-story__layout {
    height: 100%;
    display: grid;
    grid-template-columns: 540px 596px;
    gap: 64px;
    align-items: start;
    padding-top: 72px;
    direction: ltr;
}

.about-story__copy {
    width: 540px;
    height: 423px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 24.5px;
    text-align: right;
    direction: rtl;
}

.about-section-heading {
    width: 100%;
    height: 208px;
}

.about-section-heading p,
.about-section-heading h2 {
    margin: 0;
}

.about-section-heading p {
    color: var(--about-teal);
    font-size: 40px;
    line-height: 56px;
    font-weight: 400;
    letter-spacing: -1.08px;
}

.about-section-heading h2 {
    width: 570px;
    height: 144px;
    margin-top: 8px;
    color: var(--about-text);
    font-size: 44px;
    line-height: 72px;
    font-weight: 950;
    letter-spacing: -1.35px;
    transform: scaleX(.947368);
    transform-origin: right top;
}

.about-story__description {
    width: 540px;
    height: 60px;
    margin: 34.5px 0 0;
    color: var(--about-muted);
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
    letter-spacing: -.48px;
}

.about-story__facts {
    width: 540px;
    height: 86px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 34.5px 0 0;
    direction: rtl;
}

.about-story__facts > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 4px;
}

.about-story__facts dt {
    color: var(--about-light);
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
    letter-spacing: -.48px;
}

.about-story__facts dd {
    margin: 0;
    font-size: 32px;
    line-height: 52px;
    font-weight: 800;
    letter-spacing: -.96px;
}

.about-story__facts > div:nth-child(1) dd,
.about-story__facts > div:nth-child(3) dd {
    color: var(--about-teal);
}

.about-story__facts > div:nth-child(2) dd {
    color: #494b9b;
}

.about-story__media {
    width: 596px;
    height: 472px;
    margin: 0;
    overflow: hidden;
    border-radius: 32px;
    background: #1d293d;
    direction: rtl;
}

.about-story__media img {
    width: 100%;
    height: 100%;
    display: block;
    max-width: none;
    object-fit: cover;
    object-position: left center;
}

.about-why {
    height: 378px;
    padding-top: 40px;
    background: #fff;
}

.about-why__card {
    position: relative;
    width: 100%;
    height: 298px;
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    overflow: hidden;
    padding: 48px 56px;
    border-radius: 48px;
    direction: rtl;
}

.about-why__background {
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    background:
        url("../product-detail/banner-frame31.png") center bottom / cover no-repeat,
        linear-gradient(180deg, #e2e8f0, #cad5e2);
    background-blend-mode: overlay, normal;
}

.about-why__head,
.about-why__description {
    position: relative;
    z-index: 1;
}

.about-why__head {
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: start;
    gap: 8px;
}

.about-why__meta {
    display: contents;
}

.about-why__head h2 {
    min-width: 180px;
    margin: 0;
    color: var(--about-navy);
    font-size: 36px;
    line-height: 56px;
    font-weight: 950;
    letter-spacing: -1.08px;
}

.about-why__head h2 span {
    display: block;
    color: #1d293d;
    font-weight: 600;
}

.about-why__meta > p {
    min-width: 180px;
    margin: 0;
    color: var(--about-muted);
    font-size: 16px;
    line-height: 32px;
    font-weight: 600;
    letter-spacing: -.48px;
}

.about-why__link {
    position: relative;
    width: 68px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    color: #fff;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: -.48px;
}

.about-why__link > img {
    position: absolute;
    inset-block-start: -14px;
    inset-inline-start: 0;
    width: 14px;
    height: 14px;
    max-width: none;
    transform: rotate(180deg) scaleY(-1);
}

.about-why__link > span {
    width: 68px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px 0 14px 14px;
    background: var(--about-teal);
}

.about-why__description {
    padding-left: 40px;
    color: #45556c;
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
    letter-spacing: -.48px;
    text-align: right;
}

.about-why__description p {
    margin: 0;
}

.about-values {
    height: 526px;
    padding-top: 56px;
    background: #fff;
}

.about-values__heading {
    width: 100%;
    height: 86px;
    text-align: center;
}

.about-values__heading h2 {
    margin: 0;
    color: #020618;
    font-size: 32px;
    line-height: 52px;
    font-weight: 800;
    letter-spacing: -.96px;
}

.about-values__heading p {
    margin: 4px 0 0;
    color: var(--about-muted);
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
    letter-spacing: -.48px;
}

.about-values__subtitle--mobile {
    display: none;
}

.about-values__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 48px;
    direction: ltr;
}

.about-value {
    height: 280px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 32px;
    overflow: hidden;
    padding: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 25px;
    text-align: right;
}

.about-value__title {
    width: 100%;
    display: contents;
}

.about-value__title img {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
}

.about-value h3 {
    width: 100%;
    margin: 0;
    color: var(--about-text);
    font-size: 26px;
    line-height: 44px;
    font-weight: 800;
    letter-spacing: -.75px;
}

.about-value > p {
    width: 112.5%;
    height: 72px;
    margin: 0;
    color: var(--about-muted);
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: -.42px;
    text-align: justify;
    transform: scaleX(.888888);
    transform-origin: right top;
}

.about-contact {
    height: 565px;
    background: #fff;
}

.about-contact__main {
    height: 453px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 48px 20px 56px;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}

.about-contact__icon {
    width: 64px;
    height: 64px;
    display: flex;
    flex: 0 0 64px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--about-teal);
}

.about-contact__icon img {
    width: 21px;
    height: 24px;
}

.about-contact__copy {
    width: 564px;
    height: 149px;
}

.about-contact__copy h2 {
    margin: 0;
    color: var(--about-text);
    font-size: 40px;
    line-height: 64px;
    font-weight: 950;
    letter-spacing: -1.35px;
}

.about-contact__copy p {
    margin: 25px 0 0;
    color: var(--about-muted);
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
    letter-spacing: -.48px;
}

.about-contact__strip {
    width: 100%;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    margin: 0;
    color: var(--about-muted);
    font-style: normal;
    direction: ltr;
}

.about-contact__strip a {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 32px;
    font-weight: 600;
    letter-spacing: -.48px;
}

.about-contact__strip img {
    flex: 0 0 auto;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .about-hero__side {
        opacity: .7;
    }

    .about-stats__grid {
        width: calc(100% - 80px);
    }

    .about-story__layout {
        width: calc(100% - 80px);
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
        gap: 40px;
    }

    .about-story__copy,
    .about-story__description,
    .about-story__facts,
    .about-story__media {
        width: 100%;
    }

    .about-why .about-shell,
    .about-values .about-shell {
        width: calc(100% - 80px);
    }

    .about-values {
        height: auto;
        padding-bottom: 56px;
    }

    .about-values__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .page-about {
        padding-block-end: 0 !important;
    }

    .about-shell {
        width: 100%;
    }

    .about-hero {
        height: 608px;
        padding: 176px 24px 40px;
    }

    .about-hero__copy {
        width: 100%;
        height: 392px;
        gap: 24px;
    }

    .about-hero__heading {
        height: 152px;
    }

    .about-hero__dots {
        display: none;
    }

    .about-hero__heading p,
    .about-hero__heading h1 {
        letter-spacing: -1.35px;
    }

    .about-hero__heading p {
        height: 48px;
        font-size: 28px;
        line-height: 48px;
    }

    .about-hero__heading h1 {
        height: 96px;
        margin-top: 8px;
        font-size: 28px;
        line-height: 48px;
    }

    .about-hero__detail {
        width: 100%;
        height: 216px;
        gap: 40px;
    }

    .about-hero__detail > p {
        width: 100%;
        height: 120px;
        font-size: 16px;
        line-height: 30px;
        transform: none;
    }

    .about-hero__actions {
        width: 100%;
    }

    .about-hero__side--desktop {
        display: none;
    }

    .about-hero__side--mobile {
        top: 18px;
        width: 188px;
        height: 156px;
        display: block;
        opacity: 1;
    }

    .about-hero__side--start {
        left: -48px;
    }

    .about-hero__side--end {
        right: -48px;
        top: 18px;
    }

    .about-hero__side--mobile > img {
        left: 16px;
        top: -16px;
        width: 156px;
        height: 188px;
        transform: rotate(-90deg);
    }

    .about-hero__side--mobile.about-hero__side--end > img {
        transform: rotate(-90deg) scaleY(-1);
    }

    .about-stats {
        height: 242px;
        margin-top: 0;
    }

    .about-stats__background,
    .about-stats__background img {
        top: 8px;
        width: 100%;
        height: 234px;
    }

    .about-stats__grid {
        top: 41px;
        width: 100%;
        height: 165px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, 1fr);
        row-gap: 24px;
        padding: 8px 0 0;
        transform: translateX(-50%);
    }

    .about-stat {
        gap: 0;
    }

    .about-stat strong {
        height: 40px;
        font-size: 28px;
        line-height: 48px;
    }

    .about-stat span {
        height: 23px;
        font-size: 15px;
        line-height: 30px;
    }

    .about-stat--desktop-only {
        display: none;
    }

    .about-story {
        height: auto;
        min-height: 732.765px;
        padding: 40px 24px 24px;
    }

    .about-story__layout {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 40px;
        padding: 0;
    }

    .about-story__copy {
        width: 100%;
        height: 350px;
        margin: 0;
    }

    .about-section-heading {
        height: 160px;
    }

    .about-section-heading p {
        height: 56px;
        font-size: 28px;
        line-height: 56px;
    }

    .about-section-heading h2 {
        width: 116.5%;
        height: 96px;
        margin-top: 8px;
        font-size: 28px;
        line-height: 48px;
        transform: scaleX(.858536);
    }

    .about-story__description {
        width: 100%;
        height: 60px;
        margin-top: 28px;
        font-size: 15px;
        line-height: 30px;
    }

    .about-story__facts {
        width: 100%;
        height: 74px;
        margin-top: 28px;
    }

    .about-story__facts > div {
        align-items: flex-start;
    }

    .about-story__facts dt {
        font-size: 15px;
        line-height: 30px;
    }

    .about-story__facts dd {
        font-size: 24px;
        line-height: 40px;
    }

    .about-story__media {
        width: 100%;
        height: auto;
        aspect-ratio: 596 / 472;
        border-radius: 24px;
    }

    .about-why {
        height: auto;
        min-height: 568px;
        padding: 20px;
    }

    .about-why__card {
        width: 100%;
        height: auto;
        min-height: 528px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 32px;
        border-radius: 32px;
    }

    .about-why__head {
        width: 100%;
        height: 80px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        direction: rtl;
    }

    .about-why__head h2 {
        width: auto;
        min-width: 0;
        flex: 1 1 0;
        align-self: stretch;
        font-size: 24px;
        line-height: 40px;
        letter-spacing: -1.08px;
        direction: rtl;
    }

    .about-why__meta {
        width: 135px;
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        align-items: flex-start;
        direction: rtl;
    }

    .about-why__meta > p {
        width: 104.55%;
        min-width: 0;
        margin-bottom: -8px;
        text-align: right;
        font-size: 16px;
        line-height: 32px;
        direction: rtl;
        white-space: nowrap;
        transform: scaleX(.9565);
        transform-origin: right center;
    }

    .about-why__link {
        height: 42px;
        flex-direction: column;
        align-items: flex-start;
    }

    .about-why__link > img {
        position: static;
        flex: 0 0 14px;
    }

    .about-why__description {
        width: 108%;
        padding: 0;
        font-size: 15px;
        line-height: 30px;
        transform: scaleX(.925926);
        transform-origin: right top;
    }

    .about-values {
        height: auto;
        min-height: 770px;
        padding: 24px 20px;
    }

    .about-values__heading {
        height: auto;
        min-height: 76px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .about-values__heading h2 {
        font-size: 24px;
        line-height: 40px;
    }

    .about-values__heading p {
        width: 100%;
        margin: 0;
        font-size: 15px;
        line-height: 30px;
        white-space: nowrap;
        transform: scaleX(.94);
    }

    .about-values__subtitle--desktop {
        display: none;
    }

    .about-values__subtitle--mobile {
        display: inline;
    }

    .about-values__grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 32px;
    }

    .about-value {
        width: 100%;
        height: 144px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 16px;
        padding: 24px;
        border-radius: 25px;
    }

    .about-value:first-child {
        height: 134px;
        padding: 20px 20px 18px;
    }

    .about-value__title {
        height: 32px;
        display: flex;
        flex: 0 0 32px;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
    }

    .about-value__title img {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .about-value h3 {
        width: auto;
        font-size: 20px;
        line-height: 32px;
        letter-spacing: -.66px;
        transform: scaleX(.92);
        transform-origin: right center;
    }

    .about-value > p {
        width: 103.7%;
        min-height: 48px;
        height: auto;
        margin: 0;
        flex: 0 0 auto;
        font-size: 13px;
        line-height: 24px;
        letter-spacing: -.36px;
        transform: scaleX(.9643);
        transform-origin: right center;
    }

    .about-contact {
        height: auto;
        min-height: 510px;
    }

    .about-contact__main {
        height: 390px;
        gap: 32px;
        padding: 24px 20px 32px;
    }

    .about-contact__copy {
        width: 100%;
        height: 154px;
    }

    .about-contact__copy h2 {
        font-size: 26px;
        line-height: 44px;
        letter-spacing: -.75px;
    }

    .about-contact__copy p {
        margin-top: 12px;
        font-size: 15px;
        line-height: 30px;
    }

    .about-contact__actions {
        width: 100%;
    }

    .about-contact__actions .about-button {
        height: 52px;
        font-size: 15px;
        line-height: 28px;
    }

    .about-contact__actions .about-button--pale {
        width: 152px;
        min-width: 0;
    }

    .about-contact__strip {
        height: 120px;
        align-content: center;
        flex-wrap: wrap;
        gap: 16px 32px;
        padding: 24px 20px;
    }

    .about-contact__strip a {
        height: 28px;
        font-size: 15px;
        line-height: 28px;
    }

    .about-contact__strip a:nth-child(1) {
        order: 3;
    }

    .about-contact__strip a:nth-child(2) {
        order: 1;
    }

    .about-contact__strip a:nth-child(3) {
        order: 2;
    }
}

@media (max-width: 374px) {
    .about-hero {
        height: auto;
        min-height: 608px;
        padding-inline: 16px;
    }

    .about-hero__heading h1 {
        font-size: 25px;
    }

    .about-hero__actions {
        gap: 12px;
    }

    .about-hero__actions .about-button {
        width: min(148px, calc(50vw - 22px));
        padding-inline: 10px;
        font-size: 15px;
    }

    .about-story {
        padding-inline: 20px;
    }

    .about-section-heading h2 {
        font-size: 25px;
    }

    .about-story__description {
        font-size: 14px;
    }

    .about-story__facts dt {
        font-size: 13px;
    }

    .about-why {
        padding-inline: 16px;
    }

    .about-why__card {
        padding-inline: 24px;
    }

    .about-values {
        padding-inline: 16px;
    }

    .about-values__heading p {
        font-size: 14px;
    }

    .about-value {
        padding-inline: 18px;
    }

    .about-value > p {
        font-size: 12px;
    }

    .about-contact__main {
        padding-inline: 16px;
    }

    .about-contact__actions {
        gap: 12px;
    }

    .about-contact__actions .about-button {
        width: calc(50% - 6px);
        padding-inline: 8px;
    }
}

@media (max-width: 340px) {
    .about-value {
        height: 168px;
    }

    .about-value:first-child {
        height: 158px;
    }
}

@media (min-width: 375px) and (max-width: 384px) {
    .about-value > p {
        width: 113%;
        transform: scaleX(.885);
    }
}

@media (min-width: 385px) and (max-width: 399px) {
    .about-value > p {
        width: 108.5%;
        transform: scaleX(.9217);
    }
}