.about-hero {
    position: relative;
    overflow: hidden;
    padding: 110px 0 105px;
    background: radial-gradient(circle at 7% 12%, rgba(238, 232, 248, .74), transparent 27%), radial-gradient(circle at 93% 18%, rgba(223, 244, 232, .86), transparent 29%), #fff
}

.about-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 70px;
    align-items: center
}

.about-hero-copy h1 {
    max-width: 760px;
    font-size: clamp(52px, 5.7vw, 80px);
    line-height: 1;
    letter-spacing: -4px
}

.about-hero-copy h1 span {
    display: block;
    color: var(--mintStrong)
}

.about-hero-copy>p {
    max-width: 650px;
    margin-top: 26px;
    color: var(--muted);
    font-size: 18px
}

.about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 31px
}

.about-origin-card {
    padding: 42px;
    border: 1px solid var(--line);
    border-radius: 34px;
    background: rgba(255, 255, 255, .95);
    box-shadow: var(--shadow)
}

.about-origin-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 25px;
    border-radius: 17px;
    background: var(--mint);
    color: var(--mintStrong)
}

.about-origin-icon svg {
    width: 24px;
    height: 24px
}

.about-origin-card>span {
    font-size: 9px;
    letter-spacing: 1.5px;
    font-weight: 900;
    color: #78817b
}

.about-origin-card h2 {
    margin-top: 8px;
    font-size: 36px;
    line-height: 1.05;
    letter-spacing: -1.8px
}

.about-origin-card>p {
    margin-top: 16px;
    color: var(--muted);
    font-size: 14px
}

.about-origin-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 24px
}

.about-origin-tags span {
    padding: 7px 10px;
    border: 1px solid #e2e6e7;
    border-radius: 999px;
    background: #f8faf9;
    color: #667069;
    font-size: 9px;
    font-weight: 800
}

.about-stats {
    padding: 24px 0 65px;
    background: #fff
}

.about-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 25px;
    background: #fbfcfc
}

.about-stat {
    padding: 28px 24px;
    text-align: center;
    border-right: 1px solid var(--line)
}

.about-stat:last-child {
    border-right: 0
}

.about-stat strong {
    display: block;
    font-size: 31px;
    line-height: 1;
    letter-spacing: -1.5px
}

.about-stat span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 750
}

.about-story {
    padding: 115px 0;
    background: #fff
}

.about-story-grid {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 75px;
    align-items: center
}

.about-story-copy h2 {
    max-width: 650px;
    font-size: clamp(40px, 4.4vw, 61px);
    line-height: 1.03;
    letter-spacing: -3px
}

.about-story-copy p {
    max-width: 650px;
    margin-top: 19px;
    color: var(--muted);
    font-size: 15px
}

.about-story-visual {
    display: grid;
    gap: 13px;
    padding: 37px;
    border: 1px solid var(--line);
    border-radius: 34px;
    background: linear-gradient(145deg, #f9fbfb, #f8f5fc)
}

.story-step {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 14px;
    align-items: start;
    padding: 19px;
    border: 1px solid #e4e7e9;
    border-radius: 17px;
    background: rgba(255, 255, 255, .86)
}

.story-step>span {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 900
}

.story-step-one>span {
    background: var(--pink)
}

.story-step-two>span {
    background: var(--blue)
}

.story-step-three>span {
    background: var(--mint)
}

.story-step-four>span {
    background: var(--lav)
}

.story-step strong {
    display: block;
    font-size: 13px
}

.story-step p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px
}

.about-philosophy {
    padding: 115px 0;
    background: radial-gradient(circle at 10% 50%, rgba(223, 244, 232, .63), transparent 24%), #fbfcfc
}

.philosophy-wrap {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 65px;
    align-items: center
}

.philosophy-copy h2 {
    font-size: clamp(42px, 4.3vw, 60px);
    line-height: 1.03;
    letter-spacing: -2.7px
}

.philosophy-copy p {
    margin-top: 19px;
    color: var(--muted);
    font-size: 15px
}

.philosophy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.philosophy-grid article {
    min-height: 210px;
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff
}

.philosophy-grid svg {
    width: 23px;
    height: 23px;
    margin-bottom: 18px;
    color: var(--mintStrong)
}

.philosophy-grid h3 {
    font-size: 18px;
    letter-spacing: -.6px
}

.philosophy-grid p {
    margin-top: 8px;
    color: var(--muted);
    font-size: 11px
}

.leadership-section {
    padding: 115px 0;
    background: #fff
}

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

.leader-card {
    min-height: 410px;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 29px
}

.leader-joe {
    background: linear-gradient(160deg, #fff, var(--mint))
}

.leader-erin {
    background: linear-gradient(160deg, #fff, var(--blue))
}

.leader-kara {
    background: linear-gradient(160deg, #fff, var(--lav))
}

.leader-monogram {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin-bottom: 31px;
    border: 1px solid rgba(220, 225, 227, .95);
    border-radius: 20px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 9px 23px rgba(37, 45, 52, .06);
    font-size: 18px;
    font-weight: 900
}

.leader-card>span {
    font-size: 9px;
    letter-spacing: 1.4px;
    font-weight: 900;
    color: #6e777e
}

.leader-card h3 {
    margin-top: 8px;
    font-size: 29px;
    line-height: 1.05;
    letter-spacing: -1.3px
}

.leader-card p {
    margin-top: 17px;
    color: var(--muted);
    font-size: 13px
}

.about-industry {
    padding: 115px 0;
    background: #fbfcfc
}

.about-industry-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    align-items: center
}

.industry-copy h2 {
    max-width: 650px;
    font-size: clamp(40px, 4.4vw, 60px);
    line-height: 1.04;
    letter-spacing: -2.7px
}

.industry-copy p {
    max-width: 690px;
    margin-top: 19px;
    color: var(--muted);
    font-size: 15px
}

.industry-quote {
    position: relative;
    overflow: hidden;
    padding: 49px;
    border-radius: 32px;
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow)
}

.industry-quote::before {
    content: "";
    position: absolute;
    width: 310px;
    height: 310px;
    right: -95px;
    bottom: -115px;
    border-radius: 50%;
    background: rgba(95, 174, 131, .16)
}

.industry-quote span,
.industry-quote strong {
    position: relative;
    z-index: 1
}

.industry-quote span {
    display: block;
    font-size: 9px;
    letter-spacing: 1.5px;
    font-weight: 900;
    color: rgba(255, 255, 255, .56)
}

.industry-quote strong {
    display: block;
    margin-top: 19px;
    font-size: 34px;
    line-height: 1.13;
    letter-spacing: -1.4px
}

.about-final-cta {
    padding: 125px 20px;
    text-align: center;
    background: #fff
}

.about-final-cta h2 {
    max-width: 920px;
    margin: auto;
    font-size: clamp(44px, 5vw, 68px);
    line-height: 1.03;
    letter-spacing: -3px
}

.about-final-cta p {
    max-width: 650px;
    margin: 20px auto 30px;
    color: var(--muted);
    font-size: 16px
}

.about-final-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px
}

@media(max-width:1050px) {

    .about-hero-grid,
    .about-story-grid,
    .philosophy-wrap,
    .about-industry-grid {
        grid-template-columns: 1fr
    }

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

@media(max-width:760px) {
    .about-hero {
        padding: 78px 0 82px
    }

    .about-hero-copy h1 {
        font-size: 48px;
        letter-spacing: -2.8px
    }

    .about-stat-grid,
    .leadership-grid,
    .philosophy-grid {
        grid-template-columns: 1fr
    }

    .about-stat {
        border-right: 0;
        border-bottom: 1px solid var(--line)
    }

    .about-stat:last-child {
        border-bottom: 0
    }

    .about-origin-card,
    .about-story-visual,
    .industry-quote {
        padding: 30px
    }
}
/* =========================================
   LEADERSHIP PHOTOS
========================================= */

.leader-photo {
    position: relative;

    width: 100%;
    height: 240px;

    margin: 18px 0 22px;

    overflow: hidden;

    border: 1px solid rgba(220, 225, 227, .95);
    border-radius: 20px;

    background: rgba(255, 255, 255, .65);

    box-shadow: 0 10px 28px rgba(37, 45, 52, .07);
}

.leader-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}/* =========================================
   LEADERSHIP PHOTOS
========================================= */

.leader-photo {
    position: relative;

    width: 100%;
    height: 240px;

    margin: 18px 0 22px;

    overflow: hidden;

    border: 1px solid rgba(220, 225, 227, .95);
    border-radius: 20px;

    background: rgba(255, 255, 255, .65);

    box-shadow: 0 10px 28px rgba(37, 45, 52, .07);
}

.leader-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}
.leader-erin .leader-photo img,
.leader-kara .leader-photo img {
    object-fit: cover;
    transform: scale(.88);
}
.leader-photo {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(220, 225, 227, .95);
}

.leader-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    position: relative;
    z-index: 2;
}

.leader-joe .leader-photo {
    background:
        linear-gradient(rgba(255,255,255,.40), rgba(255,255,255,.40)),
        url("joe.jpg") center / cover no-repeat;
}

.leader-erin .leader-photo {
    background:
        linear-gradient(rgba(255,255,255,.40), rgba(255,255,255,.40)),
        url("erin.jpg") center / cover no-repeat;
}

.leader-kara .leader-photo {
    background:
        linear-gradient(rgba(255,255,255,.40), rgba(255,255,255,.40)),
        url("rob.jpg") center / cover no-repeat;
}
.leader-erin .leader-photo img {
    width: 92%;
    height: 92%;

    object-fit: contain;
    object-position: center center;

    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    z-index: 2;
}