/* =========================================================
   UBUNTU LTD
   ABOUT PAGE
========================================================= */


/* =========================================================
   HERO
========================================================= */

.u-about-hero {
    position: relative;

    min-height: 760px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background:
        url("../img/women.png")
        center 38%
        / cover
        no-repeat;
}


.u-about-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(19,35,26,.08) 0%,
            rgba(19,35,26,.28) 40%,
            rgba(19,35,26,.9) 100%
        );
}


.u-about-hero-inner {
    position: relative;

    z-index: 2;

    width: 100%;

    padding-top: 190px;

    padding-bottom:
        clamp(64px,8vw,105px);

    color: #fff;
}


.u-about-eyebrow {
    margin: 0 0 1.1rem;

    color: var(--amber-soft);

    font-size: .76rem;

    font-weight: 700;

    letter-spacing: .18em;
}


.u-about-hero h1 {
    max-width: 1050px;

    margin: 0;

    color: #fff;

    font-size:
        clamp(
            3rem,
            7vw,
            6.6rem
        );

    font-weight: 400;

    line-height: .96;

    letter-spacing: -.04em;
}


.u-about-hero-copy {
    max-width: 660px;

    margin:
        2rem 0 0;

    color:
        rgba(255,255,255,.78);

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.2rem
        );

    line-height: 1.7;
}


/* =========================================================
   STORY
========================================================= */

.u-about-story {
    padding-block:
        clamp(78px,9vw,140px);

    background:
        var(--paper);
}


.u-about-story-grid {
    display: grid;

    grid-template-columns:
        minmax(0,.9fr)
        minmax(0,1.1fr);

    gap:
        clamp(45px,7vw,100px);

    align-items: center;
}


.u-about-story-copy h2 {
    max-width: 12ch;

    margin-bottom: 1.5rem;

    font-size:
        clamp(
            2.6rem,
            5vw,
            4.8rem
        );
}


.u-about-lede {
    color: var(--ink);

    font-size:
        clamp(
            1.08rem,
            1.5vw,
            1.28rem
        );

    line-height: 1.65;
}


.u-about-story-copy p:not(.kicker) {
    max-width: 60ch;
}


.u-about-story-image {
    position: relative;
}


.u-about-story-image img {
    display: block;

    width: 100%;

    height: auto;

    max-height: 720px;

    object-fit: cover;
}


.u-about-image-note {
    position: absolute;

    right: -1px;

    bottom: -1px;

    width:
        min(
            290px,
            64%
        );

    padding: 24px 26px;

    background: var(--bark);

    color: var(--husk);
}


.u-about-image-note span {
    display: block;

    margin-bottom: .4rem;

    color: var(--amber);

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .16em;
}


.u-about-image-note strong {
    display: block;

    font-family: var(--serif);

    font-size: 1.45rem;

    font-weight: 500;
}


/* =========================================================
   PURPOSE
========================================================= */

.u-purpose {
    padding-block:
        clamp(76px,9vw,130px);

    background:
        var(--husk);
}


.u-purpose-head {
    margin-bottom:
        clamp(38px,5vw,65px);
}


.u-purpose-head h2 {
    font-size:
        clamp(
            2.4rem,
            4.6vw,
            4.4rem
        );
}


.u-purpose-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 20px;
}


.u-purpose-card {
    position: relative;

    min-height: 480px;

    padding:
        clamp(
            34px,
            5vw,
            66px
        );

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    overflow: hidden;
}


.u-purpose-card-dark {
    background: var(--bark);

    color: var(--husk);
}


.u-purpose-card-light {
    background: var(--amber);
    color: var(--bark);
}


.u-purpose-number {
    position: absolute;

    top: 30px;

    right: 34px;

    font-family: var(--serif);

    font-size:
        clamp(
            4rem,
            9vw,
            8rem
        );

    font-weight: 300;

    line-height: 1;

    opacity: .13;
}


.u-purpose-label {
    margin-bottom: .8rem;

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .16em;
}


.u-purpose-card-dark
.u-purpose-label {
    color: var(--amber);
}


.u-purpose-card h3 {
    max-width: 13ch;

    margin-bottom: 1rem;

    font-size:
        clamp(
            2rem,
            3.7vw,
            3.6rem
        );
}


.u-purpose-card p:last-child {
    max-width: 56ch;

    margin-bottom: 0;

    opacity: .78;
}


/* =========================================================
   SHEA WOMAN
========================================================= */

.u-shea-woman {
    padding-block:
        clamp(78px,9vw,140px);

    background: var(--paper);
}


.u-shea-woman-grid {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,.95fr);

    gap:
        clamp(46px,7vw,105px);

    align-items: center;
}


.u-shea-woman-image img {
    display: block;

    width: 100%;

    min-height: 640px;

    object-fit: cover;
}


.u-shea-woman-copy h2 {
    max-width: 12ch;

    margin-bottom: 1.4rem;

    font-size:
        clamp(
            2.5rem,
            4.7vw,
            4.5rem
        );
}


.u-shea-woman-copy > p {
    max-width: 59ch;
}


.u-impact-stats {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 28px;

    margin-top: 2.6rem;

    padding-top: 2rem;

    border-top:
        1px solid
        var(--line);
}


.u-impact-stats strong {
    display: block;

    margin-bottom: .7rem;

    color: var(--clay);

    font-family: var(--serif);

    font-size:
        clamp(
            2.7rem,
            5vw,
            4.5rem
        );

    line-height: 1;
}


.u-impact-stats span {
    display: block;

    color: var(--ink-60);

    font-size: .9rem;

    line-height: 1.55;
}


/* =========================================================
   SUPPLY CHAIN
========================================================= */

.u-supply {
    padding-block:
        clamp(78px,9vw,138px);

    background: var(--bark);

    color: var(--husk);
}


.u-supply-head {
    max-width: 750px;

    margin-bottom:
        clamp(48px,6vw,80px);
}


.u-supply-head h2 {
    max-width: 11ch;

    margin-bottom: 1.2rem;

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.8rem
        );
}


.u-supply-head > p:last-child {
    max-width: 58ch;

    color:
        rgba(235,237,228,.66);
}


.u-supply-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    border-top:
        1px solid
        var(--line-dark);
}


.u-supply-step {
    min-height: 330px;

    padding:
        28px
        clamp(18px,2.3vw,34px);

    border-right:
        1px solid
        var(--line-dark);
}


.u-supply-step:first-child {
    padding-left: 0;
}


.u-supply-step:last-child {
    border-right: 0;
}


.u-supply-step > span {
    display: block;

    margin-bottom: 6rem;

    color: var(--amber);

    font-size: .74rem;

    font-weight: 700;

    letter-spacing: .16em;
}


.u-supply-step h3 {
    margin-bottom: .8rem;

    color: #fff;

    font-size: 1.45rem;
}


.u-supply-step p {
    color:
        rgba(235,237,228,.62);

    font-size: .91rem;

    line-height: 1.7;
}


/* =========================================================
   SUSTAINABILITY
========================================================= */

.u-sustainability {
    position: relative;

    overflow: hidden;

    padding-block:
        clamp(80px,10vw,150px);

    background: var(--husk-2);
}


.u-sustainability-grid {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(400px,.85fr);

    gap:
        clamp(50px,8vw,120px);

    align-items: center;
}


.u-sustainability-copy h2 {
    max-width: 11ch;

    margin-bottom: 1.5rem;

    font-size:
        clamp(
            2.6rem,
            5vw,
            4.8rem
        );
}


.u-sustainability-copy > p {
    max-width: 58ch;
}


.u-sustainability-copy blockquote {
    max-width: 18ch;

    margin:
        2.4rem 0 0;

    color: var(--clay);

    font-family: var(--serif);

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.8rem
        );

    font-style: italic;

    line-height: 1.2;
}


.u-sustainability-visual {
    position: relative;

    min-height: 560px;

    display: grid;

    place-items: center;
}


.u-sustainability-orb {
    position: relative;

    z-index: 2;

    width:
        min(
            420px,
            82vw
        );

    aspect-ratio: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 40px;

    border-radius: 50%;

    background: var(--leaf);

    color: var(--husk);

    text-align: center;
}


.u-sustainability-orb::before {
    content: "";

    position: absolute;

    inset: 28px;

    border:
        1px solid
        rgba(235,237,228,.28);

    border-radius: 50%;
}


.u-sustainability-orb span {
    position: relative;

    z-index: 2;

    margin-bottom: .7rem;

    color: var(--amber-soft);

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .18em;
}


.u-sustainability-orb strong {
    position: relative;

    z-index: 2;

    max-width: 8ch;

    font-family: var(--serif);

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.7rem
        );

    font-weight: 500;

    line-height: 1.05;
}


.u-sustainability-lines {
    position: absolute;

    inset: 0;

    pointer-events: none;
}


.u-sustainability-lines span {
    position: absolute;

    border:
        1px solid
        rgba(94,124,65,.2);

    border-radius: 50%;
}


.u-sustainability-lines span:nth-child(1) {
    inset: 2%;
}


.u-sustainability-lines span:nth-child(2) {
    inset: 12%;
}


.u-sustainability-lines span:nth-child(3) {
    inset: 22%;
}


/* =========================================================
   VALUES
========================================================= */

.u-values {
    padding-block:
        clamp(78px,9vw,140px);

    background: var(--paper);
}


.u-values-head {
    margin-bottom:
        clamp(45px,6vw,78px);
}


.u-values-head h2 {
    max-width: 14ch;

    font-size:
        clamp(
            2.5rem,
            4.7vw,
            4.5rem
        );
}


.u-values-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    border-top:
        1px solid
        var(--line);
}


.u-value-card {
    min-height: 330px;

    padding:
        28px
        clamp(18px,2.2vw,32px);

    border-right:
        1px solid
        var(--line);
}


.u-value-card:first-child {
    padding-left: 0;
}


.u-value-card:last-child {
    border-right: 0;
}


.u-value-index {
    display: block;

    margin-bottom: 5.5rem;

    color: var(--clay);

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .15em;
}


.u-value-card h3 {
    margin-bottom: .8rem;

    font-size: 1.45rem;
}


.u-value-card p {
    margin: 0;

    color: var(--ink-60);

    font-size: .91rem;

    line-height: 1.7;
}


/* =========================================================
   FINAL CTA
========================================================= */

.u-about-cta {
    position: relative;

    min-height: 650px;

    display: flex;

    align-items: flex-end;

    overflow: hidden;

    background:
        var(--bark);
}


.u-about-cta-art {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(19,35,26,.96) 0%,
            rgba(19,35,26,.75) 48%,
            rgba(19,35,26,.18) 100%
        ),
        url("../img/packed-products.png")
        center right
        / cover
        no-repeat;
}


.u-about-cta-inner {
    position: relative;

    z-index: 2;

    width: 100%;

    padding-top: 120px;

    padding-bottom:
        clamp(60px,8vw,100px);

    color: var(--husk);
}


.u-about-cta h2 {
    max-width: 10ch;

    margin-bottom: 1.2rem;

    color: #fff;

    font-size:
        clamp(
            2.7rem,
            6vw,
            5.8rem
        );
}


.u-about-cta-inner > p:not(.kicker) {
    max-width: 52ch;

    color:
        rgba(235,237,228,.72);
}


.u-about-cta-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 2rem;
}


.u-about-cta
.btn-ghost {
    color: var(--husk);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {

    .u-about-story-grid,
    .u-shea-woman-grid,
    .u-sustainability-grid {
        grid-template-columns: 1fr;
    }


    .u-purpose-grid {
        grid-template-columns: 1fr;
    }


    .u-supply-grid,
    .u-values-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    .u-supply-step,
    .u-value-card {
        border-bottom:
            1px solid
            var(--line-dark);
    }


    .u-values-grid
    .u-value-card {
        border-bottom:
            1px solid
            var(--line);
    }


    .u-shea-woman-image img {
        min-height: 0;
    }


    .u-sustainability-visual {
        min-height: 500px;
    }

}


@media (max-width: 620px) {

    .u-about-hero {
        min-height: 620px;
    }


    .u-about-hero h1 {
        font-size:
            clamp(
                2.7rem,
                13vw,
                4.3rem
            );
    }


    .u-about-story-image img {
        min-height: 420px;

        object-fit: cover;
    }


    .u-impact-stats,
    .u-supply-grid,
    .u-values-grid {
        grid-template-columns: 1fr;
    }


    .u-supply-step,
    .u-value-card {
        min-height: auto;

        padding:
            30px 0;
    }


    .u-supply-step {
        border-right: 0;
    }


    .u-value-card {
        border-right: 0;
    }


    .u-supply-step > span,
    .u-value-index {
        margin-bottom: 2rem;
    }


    .u-sustainability-visual {
        min-height: 400px;
    }


    .u-about-cta-art {
        background:
            linear-gradient(
                180deg,
                rgba(19,35,26,.35) 0%,
                rgba(19,35,26,.96) 78%
            ),
            url("../img/packed-products.png")
            center
            / cover
            no-repeat;
    }

}





.u-about-cta {
    position: relative;

    min-height: 650px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    /* Different from footer */
    background: var(--bark-2);
}


.u-about-cta-art {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(28,49,36,.98) 0%,
            rgba(28,49,36,.88) 42%,
            rgba(28,49,36,.45) 72%,
            rgba(28,49,36,.20) 100%
        ),
        url("../img/packed-products.png")
        center right
        / cover
        no-repeat;
}


@media (max-width: 620px) {

    .u-about-cta-art {
        background:
            linear-gradient(
                180deg,
                rgba(28,49,36,.28) 0%,
                rgba(28,49,36,.72) 48%,
                rgba(28,49,36,.98) 82%
            ),
            url("../img/packed-products.png")
            center
            / cover
            no-repeat;
    }

}