/*
   About Us redesign, SCD-532.
   The paragraph rules carry !important because project.css sets
   "p, .p { font-size: 1rem !important; font-weight: 400 !important; line-height: 1.5rem !important }"
   on every paragraph site wide. Without matching it, all body copy here renders 16px/24 and the
   sections come out short of the design. That global rule cannot change until prod go-live.
   Desktop Figma 6jVr7YbefLWCQjcGuvD59L node 3134:20534 · Mobile Qkw1rAqYvxShVppu34QlEv node 2145:1088.
   Values are taken from the design, not approximated. Every section is a desktop/mobile pair and
   the 768px gate below decides which one renders, so both can sit on the same CMS page.
*/

/* ---------- hero, desktop ---------- */

.about-hero-desktop {
    position: relative;
    /* The glow sits at -99px, so it must not push the page sideways. */
    overflow: hidden;
    background: #fff;
}

/* The design places the glow at -99,296 in a 544x603 box. The exported file is 604x663
   because the blur spreads 30px past that box, so the offsets below step back by 30. */
.about-hero-desktop__glow {
    position: absolute;
    left: -129px;
    top: 266px;
    width: 604px;
    height: 663px;
    pointer-events: none;
    z-index: 0;
}

.about-hero-desktop__glow img {
    display: block;
    width: 100%;
    height: 100%;
}

.about-hero-desktop__intro {
    position: relative;
    z-index: 1;
    padding: clamp(24px, 7.8vw, 112px);
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}

.about-hero-desktop__eyebrow {
    margin: 0;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 30px !important;
    color: #2fb8a9;
    white-space: nowrap;
}

.about-hero-desktop__heading {
    margin: 0;
    max-width: 951px;
    font-size: 48px;
    font-weight: 600;
    line-height: 60px;
    letter-spacing: -0.96px;
    color: #000;
}

.about-hero-desktop__band {
    position: relative;
    z-index: 1;
    padding: 48px clamp(24px, 7.8vw, 112px) clamp(64px, 10.5vw, 152px);
    border-bottom: 1px solid #fff;
}

.about-hero-desktop__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 64px);
    flex-wrap: wrap;
}

/* Sized from the design but allowed to shrink; the images inside are positioned in percentages
   of this box so they scale with it rather than overflowing a narrow window. */
.about-hero-desktop__images {
    position: relative;
    flex: 0 1 463px;
    width: 463px;
    max-width: 100%;
    aspect-ratio: 463 / 493;
    height: auto;
}

.about-hero-desktop__image {
    position: absolute;
    object-fit: cover;
}

.about-hero-desktop__image--back {
    left: 0;
    top: 0;
    width: 55.31%;
    height: 91.88%;
}

.about-hero-desktop__image--front {
    left: 51.38%;
    top: 19.51%;
    width: 48.62%;
    height: 80.76%;
}

.about-hero-desktop__copy {
    flex: 1 1 631px;
    min-width: 0;
    max-width: 631px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 64px;
}

.about-hero-desktop__lead {
    margin: 0;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 32px !important;
    color: #000;
}

.about-hero-desktop__body p {
    margin: 0 0 20px;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 30px !important;
    color: #595959;
}

.about-hero-desktop__body p:last-child {
    margin-bottom: 0;
}

.about-hero-desktop__body a {
    font-weight: 500;
    color: #465da6;
    text-decoration: underline;
}

/* ---------- hero, mobile ---------- */

.about-hero-mobile {
    position: relative;
    overflow: hidden;
    background: #fff;
    padding: 24px 16px 32px;
    display: flex;
    flex-direction: column;
}

/* Design box is 341x377 at -69,116; the export is 401x437 with the same 30px blur spread. */
.about-hero-mobile__glow {
    position: absolute;
    left: -99px;
    top: 86px;
    width: 401px;
    height: 437px;
    pointer-events: none;
    z-index: 0;
}

.about-hero-mobile__glow img {
    display: block;
    width: 100%;
    height: 100%;
}

.about-hero-mobile__intro {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.about-hero-mobile__eyebrow {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    color: #2fb8a9;
}

.about-hero-mobile__eyebrow-icon {
    width: 16px;
    height: 16px;
    flex: none;
}

.about-hero-mobile__heading {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -0.72px;
    color: #262626;
}

.about-hero-mobile__images {
    position: relative;
    z-index: 1;
    /* 154.91 offset + 164.689 wide, allowed to shrink under 390 */
    width: 100%;
    max-width: 319.6px;
    aspect-ratio: 319.6 / 347;
    height: auto;
    margin-top: 24px;
}

.about-hero-mobile__image {
    position: absolute;
    object-fit: cover;
}

.about-hero-mobile__image--back {
    left: 0;
    top: 0;
    width: 58.62%;
    height: 95.5%;
}

.about-hero-mobile__image--front {
    left: 48.47%;
    top: 16.14%;
    width: 51.53%;
    height: 83.94%;
}

.about-hero-mobile__copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* 36px below the images in the design. */
    margin-top: 36px;
}

.about-hero-mobile__lead {
    margin: 0;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 28px !important;
    color: #000;
}

.about-hero-mobile__body p {
    margin: 0 0 16px;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    color: #595959;
}

.about-hero-mobile__body p:last-child {
    margin-bottom: 0;
}

.about-hero-mobile__body a {
    font-weight: 600;
    color: #465da6;
    text-decoration: underline;
}

/* ---------- our purpose, desktop ---------- */

.about-purpose-desktop {
    position: relative;
    overflow: hidden;
    background: #ebf1ff;
    padding: clamp(48px, 7.8vw, 112px) 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Same exported mark placed twice, one bleeding off each side as the design has it. */
.about-purpose-desktop__mark {
    position: absolute;
    width: 214.825px;
    height: 357px;
    pointer-events: none;
}

.about-purpose-desktop__mark--left {
    left: 46px;
    top: 66.02px;
}

.about-purpose-desktop__mark--right {
    right: 46.18px;
    top: -155.98px;
}

.about-purpose-desktop__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.about-purpose-desktop__eyebrow {
    margin: 0;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 30px !important;
    color: #2fb8a9;
    white-space: nowrap;
}

.about-purpose-desktop__statement {
    margin: 0;
    width: 100%;
    max-width: 750px;
    font-size: 36px;
    font-weight: 600;
    line-height: 44px;
    letter-spacing: -0.72px;
    text-align: center;
    color: #000;
}

/* ---------- our purpose, mobile ---------- */

.about-purpose-mobile {
    position: relative;
    overflow: hidden;
    background: #ebf1ff;
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
}

.about-purpose-mobile__mark {
    position: absolute;
    width: 93px;
    height: 154px;
    pointer-events: none;
}

.about-purpose-mobile__mark--left {
    left: 10px;
    top: 76px;
}

.about-purpose-mobile__mark--right {
    /* 292 of 390 in the design, so it keeps bleeding off the right on narrower screens */
    left: 74.87%;
    top: -40px;
}

.about-purpose-mobile__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.about-purpose-mobile__eyebrow {
    margin: 0;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    color: #2fb8a9;
    white-space: nowrap;
}

.about-purpose-mobile__statement {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
    color: #000;
}

/* ---------- stewardship, desktop ---------- */

.about-stewardship-desktop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 5vw, 72px);
    padding: clamp(32px, 7.8vw, 112px);
    background: #fff;
    flex-wrap: wrap;
}

/* The illustration is square but the frame shows the bottom 316 of it, so the box keeps that
   ratio and the artwork fills its width and anchors to the bottom as it scales. */
.about-stewardship-desktop__art {
    position: relative;
    flex: 0 1 439.136px;
    width: 439.136px;
    max-width: 100%;
    aspect-ratio: 439.136 / 316;
    height: auto;
    overflow: hidden;
}

.about-stewardship-desktop__art img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

.about-stewardship-desktop__copy {
    flex: 1 1 656px;
    min-width: 0;
    max-width: 656px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}

.about-stewardship-desktop__heading {
    margin: 0;
    font-size: 38px;
    font-weight: 600;
    line-height: 46px;
    color: #000;
    white-space: nowrap;
}

.about-stewardship-desktop__copy p {
    margin: 0;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 30px !important;
    color: #595959;
    text-align: center;
}

/* ---------- stewardship, mobile ---------- */

.about-stewardship-mobile {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px 16px 24px;
    background: #fff;
}

.about-stewardship-mobile__heading {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: rgba(0, 0, 0, 0.88);
    text-align: center;
}

.about-stewardship-mobile p {
    margin: 0;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    color: #595959;
}

.about-stewardship-mobile__art {
    position: relative;
    width: 100%;
    max-width: 358px;
    aspect-ratio: 358 / 257.615;
    height: auto;
    overflow: hidden;
}

.about-stewardship-mobile__art img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

/* ---------- commons, desktop ---------- */

.about-commons-desktop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 5vw, 72px);
    /* 154.28 either side at full width, so the pair sits centred in the 1440 frame. */
    padding: clamp(32px, 7.8vw, 112px) clamp(24px, 10.7vw, 154.28px);
    background: #fff;
    flex-wrap: wrap;
}

.about-commons-desktop__copy {
    flex: 1 1 656px;
    min-width: 0;
    max-width: 656px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}

.about-commons-desktop__heading {
    margin: 0;
    font-size: 38px;
    font-weight: 600;
    line-height: 46px;
    color: #000;
    white-space: nowrap;
}

.about-commons-desktop__copy p {
    margin: 0;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 30px !important;
    color: #595959;
    text-align: center;
}

.about-commons-desktop__art {
    position: relative;
    flex: 0 1 403.447px;
    width: 403.447px;
    max-width: 100%;
    aspect-ratio: 403.447 / 316;
    height: auto;
    overflow: hidden;
}

.about-commons-desktop__art img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

/* ---------- commons, mobile ---------- */

.about-commons-mobile {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 16px 32px;
    background: #fff;
}

.about-commons-mobile__heading {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: rgba(0, 0, 0, 0.88);
    text-align: center;
}

.about-commons-mobile p {
    margin: 0;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    color: #595959;
}

.about-commons-mobile__art {
    position: relative;
    width: 100%;
    max-width: 358px;
    aspect-ratio: 358 / 280.404;
    height: auto;
    overflow: hidden;
}

.about-commons-mobile__art img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

/* ---------- viewport gate ----------
   Last in the file on purpose. These are single-class selectors, same specificity as the section
   rules above, so the cascade only hides the other variant if these come after them. */

@media (max-width: 767.98px) {
    .about-hero-desktop,
    .about-purpose-desktop,
    .about-stewardship-desktop,
    .about-commons-desktop {
        display: none;
    }
}

@media (min-width: 768px) {
    .about-hero-mobile,
    .about-purpose-mobile,
    .about-stewardship-mobile,
    .about-commons-mobile {
        display: none;
    }
}