.page-hero--about {
    background-color: #35434c;
    background-position: center, center 68%;
    background-repeat: no-repeat;
    background-size: cover, 100% auto;
}

.about-intro {
    padding: 110px 0;
    background: #fff;
}

.about-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
    gap: clamp(55px, 8vw, 105px);
    align-items: center;
}

.about-intro__content {
    max-width: 680px;
}

.about-intro__visual {
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: 0;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgb(7 27 45 / 16%);
}

.about-intro__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
}

.about-intro__visual:hover img {
    transform: scale(1.035);
}

.about-intro__content h2,
.about-approach__heading h2,
.about-cta h2 {
    margin-bottom: 24px;
    font-size: clamp(2rem, 4vw, 3.35rem);
}

.about-intro__content p:not(.section-heading__eyebrow) {
    color: var(--color-muted);
    font-size: 1.05rem;
}

.about-values {
    padding: 110px 0;
    background: var(--color-light);
}

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

.about-value {
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

.about-value:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
}

.about-value__media {
    width: 100%;
    height: clamp(180px, 15vw, 220px);
    overflow: hidden;
}

.about-value__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
}

.about-value:hover .about-value__media img {
    transform: scale(1.045);
}

.about-value__content {
    padding: 30px 30px 34px;
}

.about-value__content > span {
    display: grid;
    width: 60px;
    height: 60px;
    margin-bottom: 27px;
    place-items: center;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary), #168bc0);
    font-size: 1.25rem;
}

.about-value h3 {
    margin-bottom: 14px;
    font-size: 1.35rem;
}

.about-value p {
    margin: 0;
    color: var(--color-muted);
}

.about-approach {
    padding: 115px 0;
    color: #fff;
    background: var(--color-primary-dark);
}

.about-approach__grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(440px, 1.15fr);
    gap: clamp(55px, 8vw, 105px);
    align-items: start;
}

.about-approach__heading {
    position: sticky;
    top: 120px;
}

.about-approach__heading h2 {
    color: #fff;
}

.about-approach__heading p:last-child {
    color: rgb(255 255 255 / 68%);
}

.about-approach__steps {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 0;
    list-style: none;
}

.about-approach__steps li {
    display: grid;
    padding: 28px 0;
    grid-template-columns: 55px 1fr;
    gap: 20px;
    border-bottom: 1px solid rgb(255 255 255 / 14%);
}

.about-approach__steps li:first-child {
    padding-top: 0;
}

.about-approach__steps > li > span {
    padding-top: 4px;
    color: #55bdf0;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.about-approach__steps h3 {
    margin-bottom: 8px;
    color: #fff;
    font-size: 1.35rem;
}

.about-approach__steps p {
    margin: 0;
    color: rgb(255 255 255 / 64%);
}

.about-cta {
    padding: 95px 0;
    background: #fff;
}

.about-cta__card {
    display: flex;
    padding: clamp(38px, 6vw, 70px);
    align-items: center;
    justify-content: space-between;
    gap: 45px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 90% 10%, rgb(85 189 240 / 18%), transparent 22rem),
        var(--color-light);
}

.about-cta__card > div:first-child {
    max-width: 700px;
}

.about-cta h2 {
    margin-bottom: 16px;
}

.about-cta__card p:last-child {
    margin: 0;
    color: var(--color-muted);
}

.about-cta__actions {
    display: grid;
    min-width: 210px;
    gap: 15px;
}

.about-cta__phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--color-primary-dark);
    font-weight: 750;
}

@media (max-width: 900px) {
    .about-intro__grid,
    .about-approach__grid {
        grid-template-columns: 1fr;
    }

    .about-approach__heading {
        position: static;
    }

    .about-values__grid {
        grid-template-columns: 1fr;
    }

    .about-value__media {
        height: clamp(220px, 52vw, 390px);
    }

    .about-cta__card {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 540px) {
    .page-hero--about {
        background-position: center, center 62%;
        background-size: cover, cover;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-value,
    .about-value__media img,
    .about-intro__visual img {
        transition: none;
    }

    .about-value:hover,
    .about-value:hover .about-value__media img,
    .about-intro__visual:hover img {
        transform: none;
    }
}