.milo-reference-hero {
    position: relative;
    display: block;
    width: min(1480px, calc(100% - 28px));
    height: 390px;
    margin: 8px auto 10px;
    overflow: hidden;
    border: 1px solid rgba(39, 78, 59, .1);
    border-radius: 16px;
    background: #f5eee4;
    box-shadow: 0 10px 28px rgba(38, 62, 47, .07);
}

.milo-reference-copy {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 2;
    display: grid;
    place-items: center;
    align-content: center;
    width: 58%;
    padding: 32px 118px 30px 84px;
    overflow: hidden;
    border-radius: 14px 175px 175px 14px;
    background: linear-gradient(135deg, #244d39, #1d4432);
    color: #fffdf8;
    box-shadow: 20px 0 38px rgba(25, 59, 43, .08);
    text-align: center;
}

.milo-reference-brand {
    display: grid;
    justify-items: center;
}

.milo-reference-brand strong {
    font: 500 clamp(48px, 4.2vw, 64px)/.95 Georgia, "Times New Roman", serif;
    letter-spacing: .07em;
}

.milo-reference-brand small {
    margin-top: 10px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(255, 253, 248, .36);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .32em;
}

.milo-reference-brand i {
    margin-top: 9px;
    color: #cf7657;
    font-size: 16px;
    font-style: normal;
}

.milo-reference-copy>p {
    margin: 17px 0 20px;
    color: rgba(255, 253, 248, .9);
    font: 15px/1.42 Georgia, "Times New Roman", serif;
}

.milo-reference-join {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 9px 22px;
    border: 1px solid rgba(36, 77, 57, .16);
    border-radius: 999px;
    background: #fffaf0;
    color: #244d39;
    box-shadow: 0 7px 18px rgba(11, 35, 24, .14);
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.milo-reference-join:hover {
    transform: translateY(-2px);
    box-shadow: 0 11px 23px rgba(11, 35, 24, .2);
}

.milo-reference-branch {
    position: absolute;
    width: 84px;
    height: 274px;
    background: currentColor;
    color: rgba(255, 250, 240, .88);
    -webkit-mask: url('../images/milo-botanical-branch.svg') center/contain no-repeat;
    mask: url('../images/milo-botanical-branch.svg') center/contain no-repeat;
    opacity: .94;
}

.branch-left {
    bottom: 13px;
    left: 16px;
}

.branch-right {
    right: 43px;
    bottom: 13px;
    transform: scaleX(-1);
}

.milo-reference-photo {
    position: absolute;
    inset: 0 0 0 43%;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    background: #e8ded1;
}

.milo-reference-photo>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% center;
}

.milo-reference-note {
    position: absolute;
    right: 48px;
    top: 50%;
    display: grid;
    width: 102px;
    height: 102px;
    place-items: center;
    align-content: center;
    border-radius: 50%;
    background: rgba(255, 250, 240, .95);
    color: #244d39;
    box-shadow: 0 8px 24px rgba(48, 53, 45, .1);
    text-align: center;
    transform: translateY(-20%);
}

.milo-reference-note span {
    margin-bottom: 7px;
    color: #244d39;
    font-size: 13px;
}

.milo-reference-note b {
    font-size: 12px;
    line-height: 1.35;
}

.milo-reference-photo-branch {
    position: absolute;
    right: -3px;
    bottom: -4px;
    width: 92px;
    height: 190px;
    background: currentColor;
    color: #315c46;
    -webkit-mask: url('../images/milo-botanical-branch.svg') center/contain no-repeat;
    mask: url('../images/milo-botanical-branch.svg') center/contain no-repeat;
}

.story-benefits.container {
    width: min(1480px, calc(100% - 28px));
    max-width: none;
    padding-right: 82px;
    padding-left: 82px;
}

.category-branch {
    position: absolute;
    z-index: 0;
    bottom: 2px;
    width: 64px;
    height: 146px;
    background: currentColor;
    color: #315c46;
    -webkit-mask: url('../images/milo-botanical-branch.svg') center/contain no-repeat;
    mask: url('../images/milo-botanical-branch.svg') center/contain no-repeat;
    pointer-events: none;
}

.category-branch-left {
    left: 13px;
}

.category-branch-right {
    right: 13px;
    transform: scaleX(-1);
}

.story-benefits>a {
    position: relative;
    z-index: 1;
}

@media(max-width:1100px) {
    .milo-reference-hero { height: 330px; }

    .milo-reference-copy {
        width: 59%;
        padding-inline: 56px 88px;
        border-radius: 12px 145px 145px 12px;
    }

    .milo-reference-brand strong {
        font-size: 52px;
    }

    .milo-reference-copy>p {
        font-size: 14px;
    }

    .milo-reference-branch {
        width: 78px;
    }
}

@media(max-width:780px) {
    .milo-reference-hero {
        height: auto;
    }

    .milo-reference-copy {
        position: relative;
        inset: auto;
        width: 100%;
        min-height: 355px;
        padding: 34px 48px;
        border-radius: 0 0 110px 0;
    }

    .milo-reference-photo {
        position: relative;
        inset: auto;
        height: 340px;
    }

    .milo-reference-note {
        right: 22px;
        width: 105px;
        height: 105px;
    }

    .story-benefits.container {
        padding-inline: 24px;
    }

    .category-branch {
        display: none;
    }
}

@media(max-width:520px) {
    .milo-reference-hero {
        width: calc(100% - 18px);
        margin-top: 7px;
        border-radius: 14px;
    }

    .milo-reference-copy {
        min-height: 325px;
        padding: 32px 35px 34px;
        border-radius: 0 0 85px 0;
    }

    .milo-reference-brand strong {
        font-size: 49px;
    }

    .milo-reference-brand small {
        font-size: 8px;
    }

    .milo-reference-copy>p {
        font-size: 15px;
    }

    .milo-reference-photo {
        height: 285px;
    }

    .milo-reference-note {
        right: 14px;
        top: 52%;
        width: 92px;
        height: 92px;
    }

    .milo-reference-note b {
        font-size: 12px;
    }

    .branch-left {
        left: -4px;
    }

    .branch-right {
        right: 2px;
    }
}