/* =========================================================
   UBUNTU COMPANY LIMITED
   SHEA BUTTER SERVICE PAGE

   File:
   /assets/css/shea-butter.css
========================================================= */


/* =========================================================
   PAGE VARIABLES
========================================================= */

.u-shea-page {
    --shea-bark: var(--bark, #13231A);
    --shea-bark-2: var(--bark-2, #1C3124);
    --shea-amber: var(--amber, #E3A62C);
    --shea-amber-soft: var(--amber-soft, #F0C86B);
    --shea-husk: var(--husk, #EBEDE4);
    --shea-husk-2: var(--husk-2, #DDE1D4);
    --shea-clay: var(--clay, #A9412A);
    --shea-leaf: var(--leaf, #5E7C41);
    --shea-ink: var(--ink, #16201A);
    --shea-muted: rgba(22, 32, 26, .66);
    --shea-paper: #F8F7F1;
    --shea-white: #FFFFFF;
    --shea-line: rgba(19, 35, 26, .14);
    --shea-line-light: rgba(255, 255, 255, .14);

    position: relative;

    overflow: clip;

    background:
        var(--shea-paper);

    color:
        var(--shea-ink);

    font-family:
        var(--sans);
}


/* =========================================================
   GENERAL
========================================================= */

.u-shea-page *,
.u-shea-page *::before,
.u-shea-page *::after {
    box-sizing: border-box;
}


.u-shea-page a {
    color: inherit;
}


.u-shea-page img {
    max-width: 100%;
}


.u-shea-page .kicker,
.u-shea-eyebrow {
    margin:
        0 0 17px;

    color:
        var(--shea-amber);

    font-size:
        .7rem;

    font-weight:
        700;

    letter-spacing:
        .16em;

    line-height:
        1.3;

    text-transform:
        uppercase;
}


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

.u-shea-hero {
    position:
        relative;

    padding:
        clamp(130px, 13vw, 190px)
        0
        clamp(80px, 9vw, 130px);

    overflow:
        hidden;

    background:
        var(--shea-bark);

    color:
        var(--shea-husk);
}


.u-shea-hero::before {
    content:
        "";

    position:
        absolute;

    width:
        min(620px, 55vw);

    height:
        min(620px, 55vw);

    top:
        -250px;

    right:
        -130px;

    border:
        1px solid
        rgba(227, 166, 44, .18);

    border-radius:
        50%;

    pointer-events:
        none;
}


.u-shea-hero::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        1px;

    background:
        rgba(235, 237, 228, .13);
}


/* =========================================================
   BREADCRUMB
========================================================= */

.u-shea-breadcrumb {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        clamp(45px, 6vw, 78px);

    color:
        rgba(235, 237, 228, .52);

    font-size:
        .72rem;

    letter-spacing:
        .05em;
}


.u-shea-breadcrumb a {
    text-decoration:
        none;

    transition:
        color .25s ease;
}


.u-shea-breadcrumb a:hover {
    color:
        var(--shea-amber);
}


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

.u-shea-hero-grid {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

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

    align-items:
        center;
}


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

.u-shea-hero-copy {
    max-width:
        670px;
}


.u-shea-hero-copy h1 {
    margin:
        0 0 30px;

    max-width:
        8.5ch;

    color:
        var(--shea-husk);

    font-family:
        var(--serif);

    font-size:
        clamp(
            4.5rem,
            8vw,
            8.3rem
        );

    font-weight:
        500;

    line-height:
        .86;

    letter-spacing:
        -.055em;
}


.u-shea-hero-copy h1 em {
    display:
        block;

    color:
        var(--shea-amber-soft);

    font-weight:
        400;
}


.u-shea-hero-lead {
    max-width:
        610px;

    margin:
        0 0 20px;

    color:
        rgba(235, 237, 228, .88);

    font-size:
        clamp(
            1.05rem,
            1.6vw,
            1.3rem
        );

    line-height:
        1.65;
}


.u-shea-hero-note {
    max-width:
        570px;

    margin:
        0;

    color:
        rgba(235, 237, 228, .58);

    font-size:
        .93rem;

    line-height:
        1.75;
}


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

.u-shea-hero-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        34px;
}


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

.u-shea-hero-media {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        clamp(
            450px,
            52vw,
            700px
        );

    padding:
        clamp(
            20px,
            3vw,
            42px
        );

    overflow:
        hidden;

    background:
        #E9E5DA;

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


.u-shea-hero-media::before {
    content:
        "";

    position:
        absolute;

    inset:
        18px;

    border:
        1px solid
        rgba(19, 35, 26, .12);

    pointer-events:
        none;
}


.u-shea-hero-media img {
    position:
        relative;

    z-index:
        1;

    display:
        block;

    width:
        100%;

    height:
        100%;

    max-height:
        620px;

    object-fit:
        contain;

    object-position:
        center;

    filter:
        drop-shadow(
            0 30px 35px
            rgba(19, 35, 26, .19)
        );
}


.u-shea-media-label {
    position:
        absolute;

    z-index:
        3;

    left:
        22px;

    bottom:
        22px;

    padding:
        10px 13px;

    background:
        rgba(19, 35, 26, .90);

    color:
        var(--shea-husk);

    font-size:
        .63rem;

    font-weight:
        600;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


/* =========================================================
   HERO EMPTY STATE
========================================================= */

.u-shea-hero-media-empty {
    background:
        linear-gradient(
            145deg,
            #D8D8CA,
            #ECE9DF
        );
}


.u-shea-hero-placeholder {
    text-align:
        center;
}


.u-shea-hero-placeholder span {
    display:
        block;

    margin-bottom:
        13px;

    color:
        var(--shea-muted);

    font-size:
        .69rem;

    font-weight:
        700;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;
}


.u-shea-hero-placeholder strong {
    display:
        block;

    color:
        var(--shea-bark);

    font-family:
        var(--serif);

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

    font-weight:
        500;

    line-height:
        .95;

    letter-spacing:
        -.04em;
}


/* =========================================================
   STICKY SECTION NAVIGATION
========================================================= */

.u-shea-section-nav {
    position:
        sticky;

    top:
        74px;

    z-index:
        35;

    background:
        rgba(248, 247, 241, .97);

    border-bottom:
        1px solid
        var(--shea-line);

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);
}


.admin-bar
.u-shea-section-nav {
    top:
        106px;
}


.u-shea-section-nav-inner {
    display:
        flex;

    align-items:
        center;

    gap:
        0;

    overflow-x:
        auto;

    scrollbar-width:
        none;
}


.u-shea-section-nav-inner::-webkit-scrollbar {
    display:
        none;
}


.u-shea-section-nav a {
    position:
        relative;

    flex:
        0 0 auto;

    padding:
        18px 16px;

    color:
        var(--shea-muted);

    font-size:
        .69rem;

    font-weight:
        700;

    letter-spacing:
        .08em;

    text-decoration:
        none;

    text-transform:
        uppercase;

    white-space:
        nowrap;

    transition:
        color .25s ease;
}


.u-shea-section-nav a:first-child {
    padding-left:
        0;
}


.u-shea-section-nav a::after {
    content:
        "";

    position:
        absolute;

    left:
        16px;

    right:
        16px;

    bottom:
        -1px;

    height:
        2px;

    background:
        var(--shea-amber);

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform .25s ease;
}


.u-shea-section-nav a:hover {
    color:
        var(--shea-ink);
}


.u-shea-section-nav a:hover::after {
    transform:
        scaleX(1);
}


/* =========================================================
   SHARED SECTION
========================================================= */

.u-shea-section {
    position:
        relative;

    padding:
        clamp(
            90px,
            10vw,
            150px
        )
        0;

    border-bottom:
        1px solid
        var(--shea-line);

    scroll-margin-top:
        135px;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.u-shea-section-head {
    display:
        grid;

    grid-template-columns:
        minmax(120px, .22fr)
        minmax(0, 1fr);

    gap:
        clamp(
            30px,
            5vw,
            70px
        );

    margin-bottom:
        clamp(
            50px,
            7vw,
            90px
        );
}


.u-shea-section-number {
    padding-top:
        11px;

    color:
        var(--shea-muted);

    font-size:
        .66rem;

    font-weight:
        700;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


.u-shea-section-head h2 {
    max-width:
        900px;

    margin:
        0;

    color:
        var(--shea-bark);

    font-family:
        var(--serif);

    font-size:
        clamp(
            3.2rem,
            6vw,
            6rem
        );

    font-weight:
        500;

    line-height:
        .94;

    letter-spacing:
        -.045em;
}


.u-shea-section-intro {
    max-width:
        710px;

    margin:
        25px 0 0;

    color:
        var(--shea-muted);

    font-size:
        1.03rem;

    line-height:
        1.7;
}


/* =========================================================
   01 — MATERIAL
========================================================= */

.u-shea-ingredient {
    background:
        var(--shea-paper);
}


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

    grid-template-columns:
        minmax(110px, .18fr)
        minmax(0, 1fr)
        minmax(240px, .35fr);

    gap:
        clamp(
            30px,
            5vw,
            65px
        );

    align-items:
        start;
}


.u-shea-material-label {
    color:
        var(--shea-muted);

    font-size:
        .68rem;

    font-weight:
        700;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


.u-shea-material-copy {
    max-width:
        760px;
}


.u-shea-material-copy p {
    margin:
        0 0 25px;

    color:
        rgba(22, 32, 26, .78);

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

    line-height:
        1.8;
}


.u-shea-material-copy p:first-child {
    color:
        var(--shea-ink);

    font-family:
        var(--serif);

    font-size:
        clamp(
            1.35rem,
            2vw,
            1.75rem
        );

    line-height:
        1.55;
}


/* =========================================================
   MATERIAL FACTS
========================================================= */

.u-shea-material-facts {
    border-left:
        1px solid
        var(--shea-line);
}


.u-shea-material-facts > div {
    padding:
        0 0 30px 30px;
}


.u-shea-material-facts > div + div {
    padding-top:
        30px;

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


.u-shea-material-facts span {
    display:
        block;

    margin-bottom:
        11px;

    color:
        var(--shea-muted);

    font-size:
        .63rem;

    font-weight:
        700;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


.u-shea-material-facts strong {
    display:
        block;

    color:
        var(--shea-bark);

    font-family:
        var(--serif);

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

    font-weight:
        500;

    line-height:
        1.15;
}


.u-shea-material-facts p {
    margin:
        8px 0 0;

    color:
        var(--shea-muted);

    font-size:
        .84rem;
}


/* =========================================================
   02 — GRADES
========================================================= */

.u-shea-grades {
    background:
        #EEEDE4;
}


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

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

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


.u-shea-grade-card {
    position:
        relative;

    min-height:
        570px;

    padding:
        clamp(
            35px,
            5vw,
            68px
        );

    overflow:
        hidden;

    background:
        var(--shea-paper);
}


.u-shea-grade-card + .u-shea-grade-card {
    border-left:
        1px solid
        var(--shea-line);
}


.u-shea-grade-card::before {
    content:
        "";

    position:
        absolute;

    width:
        260px;

    height:
        260px;

    right:
        -130px;

    top:
        -130px;

    border:
        1px solid
        rgba(19, 35, 26, .10);

    border-radius:
        50%;
}


.u-shea-grade-natural {
    background:
        #E4E8DB;
}


.u-shea-grade-refined {
    background:
        #F5F0E4;
}


.u-shea-grade-index {
    margin-bottom:
        clamp(
            70px,
            8vw,
            115px
        );

    color:
        var(--shea-amber);

    font-family:
        var(--serif);

    font-size:
        2rem;

    line-height:
        1;
}


.u-shea-grade-label {
    margin:
        0 0 12px;

    color:
        var(--shea-muted);

    font-size:
        .67rem;

    font-weight:
        700;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


.u-shea-grade-card h3 {
    max-width:
        420px;

    margin:
        0 0 16px;

    color:
        var(--shea-bark);

    font-family:
        var(--serif);

    font-size:
        clamp(
            2rem,
            3vw,
            3.2rem
        );

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        -.035em;
}


.u-shea-grade-tag {
    margin:
        0 0 28px !important;

    color:
        var(--shea-clay) !important;

    font-family:
        var(--serif);

    font-size:
        1.05rem !important;

    font-style:
        italic;
}


.u-shea-grade-card > p:not(.u-shea-grade-label):not(.u-shea-grade-tag) {
    max-width:
        590px;

    color:
        rgba(22, 32, 26, .70);

    font-size:
        .96rem;

    line-height:
        1.75;
}


/* =========================================================
   PULL QUOTE
========================================================= */

.u-shea-quote {
    position:
        relative;

    padding:
        clamp(
            90px,
            10vw,
            145px
        )
        0;

    overflow:
        hidden;

    background:
        var(--shea-bark);

    color:
        var(--shea-husk);

    text-align:
        center;
}


.u-shea-quote::before {
    content:
        "“";

    position:
        absolute;

    top:
        -55px;

    left:
        50%;

    transform:
        translateX(-50%);

    color:
        rgba(227, 166, 44, .09);

    font-family:
        var(--serif);

    font-size:
        19rem;

    line-height:
        1;
}


.u-shea-quote p {
    position:
        relative;

    z-index:
        1;

    max-width:
        1050px;

    margin:
        0 auto;

    color:
        var(--shea-husk);

    font-family:
        var(--serif);

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

    font-style:
        italic;

    font-weight:
        400;

    line-height:
        1.05;

    letter-spacing:
        -.035em;
}


/* =========================================================
   03 — ORIGIN
========================================================= */

.u-shea-origin {
    background:
        var(--shea-paper);
}


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

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

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

    align-items:
        start;
}


.u-shea-origin-copy p {
    margin:
        0 0 25px;

    color:
        rgba(22, 32, 26, .72);

    font-size:
        1.02rem;

    line-height:
        1.8;
}


.u-shea-origin-copy blockquote {
    margin:
        42px 0 0;

    padding:
        26px 0 0;

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

    color:
        var(--shea-bark);

    font-family:
        var(--serif);

    font-size:
        clamp(
            1.6rem,
            2.5vw,
            2.4rem
        );

    font-style:
        italic;

    line-height:
        1.25;
}


/* =========================================================
   ORIGIN VISUAL
========================================================= */

.u-shea-origin-visual {
    position:
        relative;

    min-height:
        610px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    padding:
        clamp(
            35px,
            5vw,
            70px
        );

    overflow:
        hidden;

    background:
        var(--shea-bark);

    color:
        var(--shea-husk);
}


.u-shea-origin-visual::before,
.u-shea-origin-visual::after {
    content:
        "";

    position:
        absolute;

    border:
        1px solid
        rgba(227, 166, 44, .18);

    border-radius:
        50%;
}


.u-shea-origin-visual::before {
    width:
        460px;

    height:
        460px;

    top:
        -150px;

    right:
        -180px;
}


.u-shea-origin-visual::after {
    width:
        280px;

    height:
        280px;

    left:
        -150px;

    bottom:
        -110px;
}


.u-shea-origin-word {
    position:
        relative;

    z-index:
        2;

    color:
        var(--shea-amber-soft);

    font-family:
        var(--serif);

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

    font-style:
        italic;

    line-height:
        .9;

    letter-spacing:
        -.05em;
}


.u-shea-origin-locations {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

    gap:
        0;

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


.u-shea-origin-locations span {
    padding:
        17px 0;

    color:
        rgba(235, 237, 228, .74);

    border-bottom:
        1px solid
        var(--shea-line-light);

    font-size:
        .75rem;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.u-shea-origin-locations span:nth-child(even) {
    padding-left:
        24px;

    border-left:
        1px solid
        var(--shea-line-light);
}


/* =========================================================
   04 — PROCESS
========================================================= */

.u-shea-process {
    background:
        #EEEDE4;
}


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

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

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


.u-shea-process-step {
    position:
        relative;

    min-height:
        360px;

    padding:
        clamp(
            28px,
            4vw,
            48px
        );

    background:
        var(--shea-paper);

    border-bottom:
        1px solid
        var(--shea-line);

    transition:
        background .3s ease;
}


.u-shea-process-step:nth-child(odd) {
    border-right:
        1px solid
        var(--shea-line);
}


.u-shea-process-step:nth-last-child(-n+2) {
    border-bottom:
        0;
}


.u-shea-process-step:hover {
    background:
        #F3F0E6;
}


.u-shea-process-number {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        43px;

    height:
        43px;

    margin-bottom:
        30px;

    border-radius:
        50%;

    background:
        var(--shea-amber);

    color:
        var(--shea-bark);

    font-size:
        .72rem;

    font-weight:
        800;
}


.u-shea-process-step h3 {
    margin:
        0 0 12px;

    color:
        var(--shea-bark);

    font-family:
        var(--serif);

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

    font-weight:
        500;

    line-height:
        1.08;
}


.u-shea-process-step strong {
    display:
        block;

    max-width:
        560px;

    margin-bottom:
        15px;

    color:
        var(--shea-ink);

    font-size:
        .94rem;

    line-height:
        1.55;
}


.u-shea-process-step p {
    max-width:
        590px;

    margin:
        0 0 12px;

    color:
        var(--shea-muted);

    font-size:
        .89rem;

    line-height:
        1.68;
}


.u-shea-process-step ul {
    display:
        grid;

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

    gap:
        7px 20px;

    margin:
        20px 0 0;

    padding:
        20px 0 0;

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

    list-style:
        none;
}


.u-shea-process-step li {
    position:
        relative;

    padding-left:
        14px;

    color:
        var(--shea-muted);

    font-size:
        .76rem;

    line-height:
        1.45;
}


.u-shea-process-step li::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        .55em;

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        var(--shea-amber);
}


/* =========================================================
   PACK SIZES
========================================================= */

.u-shea-pack-sizes {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        20px;
}


.u-shea-pack-sizes span {
    padding:
        7px 10px;

    background:
        var(--shea-bark);

    color:
        var(--shea-husk);

    font-size:
        .65rem;

    font-weight:
        700;

    letter-spacing:
        .06em;
}


/* =========================================================
   05 — APPLICATIONS
========================================================= */

.u-shea-applications {
    background:
        var(--shea-paper);
}


.u-shea-app-intro {
    max-width:
        880px;

    margin:
        0 0 65px
        calc(22% + 30px);
}


.u-shea-app-intro p {
    margin:
        0 0 20px;

    color:
        var(--shea-muted);

    font-size:
        1.05rem;

    line-height:
        1.75;
}


.u-shea-app-intro strong {
    color:
        var(--shea-ink);
}


/* =========================================================
   APPLICATION GRID
========================================================= */

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

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

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


.u-shea-app-grid article {
    position:
        relative;

    min-height:
        210px;

    padding:
        35px 38px 35px 0;

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


.u-shea-app-grid article:nth-child(even) {
    padding-left:
        38px;

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


.u-shea-app-grid article > span {
    display:
        block;

    margin-bottom:
        28px;

    color:
        var(--shea-amber);

    font-size:
        .65rem;

    font-weight:
        700;

    letter-spacing:
        .11em;
}


.u-shea-app-grid h3 {
    margin:
        0 0 9px;

    color:
        var(--shea-bark);

    font-family:
        var(--serif);

    font-size:
        clamp(
            1.5rem,
            2vw,
            2.15rem
        );

    font-weight:
        500;
}


.u-shea-app-grid p {
    max-width:
        570px;

    margin:
        0;

    color:
        var(--shea-muted);

    font-size:
        .88rem;

    line-height:
        1.65;
}


/* =========================================================
   APPLICATION QUOTE
========================================================= */

.u-shea-application-quote {
    max-width:
        900px;

    margin:
        70px 0 0
        calc(22% + 30px);

    padding:
        30px 0 0;

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

    color:
        var(--shea-bark);

    font-family:
        var(--serif);

    font-size:
        clamp(
            1.5rem,
            2.4vw,
            2.35rem
        );

    font-style:
        italic;

    line-height:
        1.3;
}


/* =========================================================
   06 — BUYERS
========================================================= */

.u-shea-buyers {
    background:
        #F0EEE6;
}


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

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

    gap:
        16px;
}


.u-shea-buyer-card {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        350px;

    padding:
        30px;

    overflow:
        hidden;

    background:
        var(--shea-paper);

    border:
        1px solid
        var(--shea-line);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


.u-shea-buyer-card::before {
    content:
        "";

    position:
        absolute;

    width:
        110px;

    height:
        110px;

    right:
        -55px;

    top:
        -55px;

    border:
        1px solid
        rgba(227, 166, 44, .15);

    border-radius:
        50%;
}


.u-shea-buyer-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(19, 35, 26, .22);

    box-shadow:
        0 20px 42px
        rgba(19, 35, 26, .08);
}


.u-shea-buyer-index {
    display:
        block;

    margin-bottom:
        48px;

    color:
        var(--shea-amber);

    font-size:
        .67rem;

    font-weight:
        800;

    letter-spacing:
        .11em;
}


.u-shea-buyer-card h3 {
    max-width:
        330px;

    margin:
        0 0 13px;

    color:
        var(--shea-bark);

    font-family:
        var(--serif);

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

    font-weight:
        500;

    line-height:
        1.1;
}


.u-shea-buyer-card > p {
    max-width:
        390px;

    margin:
        0 0 30px;

    color:
        var(--shea-muted);

    font-size:
        .87rem;

    line-height:
        1.65;
}


/* =========================================================
   GRADE TAGS
========================================================= */

.u-shea-grade-tags {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;

    margin-top:
        auto;
}


.u-shea-grade-tags span {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        29px;

    padding:
        6px 10px;

    border-radius:
        999px;

    background:
        var(--shea-leaf);

    color:
        #FFF;

    font-size:
        .62rem;

    font-weight:
        700;

    line-height:
        1.2;
}


/* Last buyer card */

.u-shea-buyer-card:last-child {
    background:
        var(--shea-bark);

    color:
        var(--shea-husk);
}


.u-shea-buyer-card:last-child h3 {
    color:
        var(--shea-husk);
}


.u-shea-buyer-card:last-child > p {
    color:
        rgba(235, 237, 228, .66);
}


/* =========================================================
   07 — BUYING
========================================================= */

.u-shea-buying {
    background:
        var(--shea-paper);
}


.u-shea-buying-layout {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, .7fr);

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

    align-items:
        start;
}


.u-shea-buying-copy {
    max-width:
        760px;
}


.u-shea-buying-copy p {
    margin:
        0 0 27px;

    color:
        var(--shea-muted);

    font-size:
        clamp(
            1rem,
            1.5vw,
            1.15rem
        );

    line-height:
        1.8;
}


.u-shea-buying-copy strong {
    color:
        var(--shea-ink);
}


/* =========================================================
   BUYING FACTS
========================================================= */

.u-shea-buying-facts {
    border-top:
        1px solid
        var(--shea-line);
}


.u-shea-buying-facts > div {
    display:
        grid;

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

    gap:
        25px;

    align-items:
        center;

    padding:
        25px 0;

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


.u-shea-buying-facts span {
    color:
        var(--shea-muted);

    font-size:
        .68rem;

    font-weight:
        700;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}


.u-shea-buying-facts strong {
    color:
        var(--shea-bark);

    font-family:
        var(--serif);

    font-size:
        clamp(
            1.45rem,
            2.4vw,
            2.25rem
        );

    font-weight:
        500;

    text-align:
        right;
}


/* =========================================================
   BUYING ACTIONS
========================================================= */

.u-shea-buying-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        18px 26px;

    margin-top:
        55px;

    padding-top:
        30px;

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


.u-shea-text-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--shea-bark);

    font-size:
        .79rem;

    font-weight:
        700;

    text-decoration:
        none;
}


.u-shea-text-link span {
    color:
        var(--shea-amber);

    transition:
        transform .25s ease;
}


.u-shea-text-link:hover span {
    transform:
        translateX(4px);
}


/* =========================================================
   08 — IMPACT
========================================================= */

.u-shea-impact {
    background:
        #DDE3D8;

    border-bottom:
        0;
}


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

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

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


.u-shea-impact-copy h2 {
    max-width:
        650px;

    margin:
        0 0 28px;

    color:
        var(--shea-bark);

    font-family:
        var(--serif);

    font-size:
        clamp(
            3.4rem,
            6vw,
            6.2rem
        );

    font-weight:
        500;

    line-height:
        .92;

    letter-spacing:
        -.045em;
}


.u-shea-impact-copy > p:not(.kicker) {
    max-width:
        580px;

    color:
        rgba(22, 32, 26, .70);

    font-size:
        1rem;

    line-height:
        1.75;
}


/* =========================================================
   IMPACT METRICS
========================================================= */

.u-shea-impact-metrics {
    border-top:
        1px solid
        rgba(19, 35, 26, .20);
}


.u-shea-impact-metrics > div {
    display:
        grid;

    grid-template-columns:
        minmax(150px, .42fr)
        minmax(0, 1fr);

    gap:
        30px;

    align-items:
        center;

    padding:
        25px 0;

    border-bottom:
        1px solid
        rgba(19, 35, 26, .20);
}


.u-shea-impact-metrics strong {
    color:
        var(--shea-bark);

    font-family:
        var(--serif);

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

    font-weight:
        500;

    line-height:
        1;
}


.u-shea-impact-metrics span {
    color:
        rgba(22, 32, 26, .62);

    font-size:
        .72rem;

    font-weight:
        700;

    letter-spacing:
        .07em;

    line-height:
        1.55;

    text-transform:
        uppercase;
}


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

.u-shea-cta {
    position:
        relative;

    padding:
        clamp(
            95px,
            11vw,
            165px
        )
        0;

    overflow:
        hidden;

    background:
        var(--shea-bark);

    color:
        var(--shea-husk);
}


.u-shea-cta::before {
    content:
        "";

    position:
        absolute;

    width:
        650px;

    height:
        650px;

    right:
        -300px;

    bottom:
        -370px;

    border:
        1px solid
        rgba(227, 166, 44, .18);

    border-radius:
        50%;
}


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

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(300px, .75fr);

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

    align-items:
        end;
}


.u-shea-cta h2 {
    max-width:
        850px;

    margin:
        0;

    color:
        var(--shea-husk);

    font-family:
        var(--serif);

    font-size:
        clamp(
            3.6rem,
            6.5vw,
            6.8rem
        );

    font-weight:
        500;

    line-height:
        .9;

    letter-spacing:
        -.05em;
}


.u-shea-cta-copy > p {
    margin:
        0;

    color:
        rgba(235, 237, 228, .68);

    font-size:
        .96rem;

    line-height:
        1.75;
}


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

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        28px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .u-shea-hero-grid {
        grid-template-columns:
            1fr 1fr;

        gap:
            45px;
    }


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


    .u-shea-origin-grid,
    .u-shea-buying-layout,
    .u-shea-impact-grid,
    .u-shea-cta-inner {
        gap:
            55px;
    }

}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 850px) {

    .u-shea-hero {
        padding-top:
            125px;
    }


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


    .u-shea-hero-copy {
        max-width:
            100%;
    }


    .u-shea-hero-copy h1 {
        max-width:
            8ch;
    }


    .u-shea-hero-media {
        min-height:
            520px;
    }


    .u-shea-section-head {
        grid-template-columns:
            1fr;

        gap:
            18px;
    }


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


    .u-shea-material-facts {
        display:
            grid;

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

        border-left:
            0;

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


    .u-shea-material-facts > div {
        padding:
            28px 25px 0 0;
    }


    .u-shea-material-facts > div + div {
        padding:
            28px 0 0 25px;

        border-top:
            0;

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


    .u-shea-grade-grid,
    .u-shea-origin-grid,
    .u-shea-buying-layout,
    .u-shea-impact-grid,
    .u-shea-cta-inner {
        grid-template-columns:
            1fr;
    }


    .u-shea-grade-card + .u-shea-grade-card {
        border-left:
            0;

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


    .u-shea-grade-card {
        min-height:
            500px;
    }


    .u-shea-origin-visual {
        min-height:
            520px;
    }


    .u-shea-app-intro,
    .u-shea-application-quote {
        margin-left:
            0;
    }


    .u-shea-cta-copy {
        max-width:
            580px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    .u-shea-hero {
        padding:
            112px 0 70px;
    }


    .u-shea-breadcrumb {
        margin-bottom:
            42px;
    }


    .u-shea-hero-copy h1 {
        font-size:
            clamp(
                3.7rem,
                17vw,
                5.3rem
            );
    }


    .u-shea-hero-lead {
        font-size:
            1rem;
    }


    .u-shea-hero-actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .u-shea-hero-actions .btn {
        width:
            100%;

        justify-content:
            center;
    }


    .u-shea-hero-media {
        min-height:
            410px;

        padding:
            20px;
    }


    .u-shea-section-nav {
        top:
            68px;
    }


    .admin-bar
    .u-shea-section-nav {
        top:
            114px;
    }


    .u-shea-section-nav a {
        padding:
            15px 12px;

        font-size:
            .61rem;
    }


    .u-shea-section-nav a:first-child {
        padding-left:
            4px;
    }


    .u-shea-section {
        padding:
            78px 0;
    }


    .u-shea-section-head {
        margin-bottom:
            45px;
    }


    .u-shea-section-head h2 {
        font-size:
            clamp(
                2.8rem,
                14vw,
                4.25rem
            );
    }


    .u-shea-material-copy p:first-child {
        font-size:
            1.25rem;
    }


    .u-shea-material-facts {
        grid-template-columns:
            1fr;
    }


    .u-shea-material-facts > div,
    .u-shea-material-facts > div + div {
        padding:
            25px 0;

        border-left:
            0;

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


    .u-shea-grade-card {
        min-height:
            0;

        padding:
            35px 25px 42px;
    }


    .u-shea-grade-index {
        margin-bottom:
            60px;
    }


    .u-shea-origin-visual {
        min-height:
            430px;

        padding:
            30px 24px;
    }


    .u-shea-origin-locations {
        grid-template-columns:
            1fr;
    }


    .u-shea-origin-locations span:nth-child(even) {
        padding-left:
            0;

        border-left:
            0;
    }


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


    .u-shea-process-step,
    .u-shea-process-step:nth-child(odd),
    .u-shea-process-step:nth-last-child(-n+2) {
        min-height:
            0;

        border-right:
            0;

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


    .u-shea-process-step:last-child {
        border-bottom:
            0;
    }


    .u-shea-process-step ul {
        grid-template-columns:
            1fr;
    }


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


    .u-shea-app-grid article,
    .u-shea-app-grid article:nth-child(even) {
        min-height:
            0;

        padding:
            30px 0;

        border-left:
            0;
    }


    .u-shea-buyers-grid {
        grid-template-columns:
            1fr;

        gap:
            12px;
    }


    .u-shea-buyer-card {
        min-height:
            310px;

        padding:
            26px 22px;
    }


    .u-shea-buying-facts > div {
        grid-template-columns:
            1fr;

        gap:
            8px;
    }


    .u-shea-buying-facts strong {
        text-align:
            left;
    }


    .u-shea-buying-actions {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .u-shea-impact-metrics > div {
        grid-template-columns:
            1fr;

        gap:
            8px;

        padding:
            22px 0;
    }


    .u-shea-cta h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.6rem
            );
    }


    .u-shea-cta-actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .u-shea-cta-actions .btn {
        width:
            100%;

        justify-content:
            center;
    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 420px) {

    .u-shea-hero-media {
        min-height:
            350px;
    }


    .u-shea-media-label {
        left:
            14px;

        right:
            14px;

        bottom:
            14px;

        text-align:
            center;
    }


    .u-shea-grade-tags {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    .u-shea-page *,
    .u-shea-page *::before,
    .u-shea-page *::after {
        scroll-behavior:
            auto !important;

        animation:
            none !important;

        transition:
            none !important;
    }

}






/* =========================================================
   SHEA BUTTER MEDIA
   Videos from original Shea Butter source
========================================================= */


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

.u-shea-hero-media-video {
    position:
        relative;

    padding:
        0;

    background:
        #13231A;
}


.u-shea-hero-media-video::before {
    display:
        none;
}


.u-shea-hero-video {
    display:
        block;

    width:
        100%;

    height:
        100%;

    min-height:
        clamp(
            450px,
            52vw,
            700px
        );

    object-fit:
        cover;

    object-position:
        center;

    background:
        #13231A;
}


/* =========================================================
   VIDEO LABEL
========================================================= */

.u-shea-hero-media-video .u-shea-media-label,
.u-shea-origin-video-wrap .u-shea-media-label {
    position:
        absolute;

    z-index:
        5;

    left:
        22px;

    bottom:
        22px;

    padding:
        10px 13px;

    background:
        rgba(19, 35, 26, .90);

    color:
        var(--shea-husk);

    font-size:
        .63rem;

    font-weight:
        600;

    letter-spacing:
        .13em;

    line-height:
        1.3;

    text-transform:
        uppercase;

    pointer-events:
        none;
}


/* =========================================================
   ORIGIN MEDIA PANEL
========================================================= */

.u-shea-origin-visual-media {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-start;

    gap:
        clamp(
            28px,
            4vw,
            45px
        );
}


/* =========================================================
   ORIGIN VIDEO
========================================================= */

.u-shea-origin-video-wrap {
    position:
        relative;

    z-index:
        3;

    width:
        100%;

    aspect-ratio:
        16 / 10;

    overflow:
        hidden;

    background:
        #0F1C14;

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


.u-shea-origin-video {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    background:
        #0F1C14;
}


/* =========================================================
   RETAIN EXISTING NILOTICA DESIGN
========================================================= */

.u-shea-origin-visual-media
.u-shea-origin-word {
    margin:
        0;

    position:
        relative;

    z-index:
        2;
}


.u-shea-origin-visual-media
.u-shea-origin-locations {
    position:
        relative;

    z-index:
        2;

    width:
        100%;

    margin-top:
        auto;
}


/* =========================================================
   VIDEO CONTROLS
========================================================= */

.u-shea-origin-video::-webkit-media-controls-panel {
    background:
        linear-gradient(
            transparent,
            rgba(0, 0, 0, .55)
        );
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .u-shea-hero-video {
        min-height:
            520px;
    }


    .u-shea-origin-video-wrap {
        aspect-ratio:
            16 / 10;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    .u-shea-hero-video {
        min-height:
            410px;
    }


    .u-shea-origin-visual-media {
        min-height:
            auto;
    }


    .u-shea-origin-video-wrap {
        aspect-ratio:
            4 / 3;
    }


    .u-shea-hero-media-video
    .u-shea-media-label,
    .u-shea-origin-video-wrap
    .u-shea-media-label {
        left:
            14px;

        right:
            14px;

        bottom:
            14px;

        text-align:
            center;
    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 420px) {

    .u-shea-hero-video {
        min-height:
            350px;
    }

}