/* =========================================================
   APPROVED HERO — REFERENCE 1:1
   ========================================================= */

.hero-approved,
.hero-approved * {
    box-sizing: border-box;
}

.hero-approved {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    min-height:
        clamp(
            790px,
            55vw,
            920px
        );

    background:
        radial-gradient(
            circle at 87% 4%,
            rgba(95, 127, 111, .17),
            transparent 34%
        ),
        linear-gradient(
            108deg,
            #fffefa 0%,
            #fdfdfa 45%,
            #f2f6f2 100%
        );

    color: #0b281e;
}


/* =========================================================
   BACKGROUND ARCH
   ========================================================= */

.hero-approved-arch {
    position: absolute;
    z-index: 1;

    top: -22px;
    left: 20px;

    width: 455px;
    height: 405px;

    fill: none;

    stroke: #7b9586;
    stroke-width: 1.1;

    opacity: .095;

    pointer-events: none;
}

.hero-approved-arch-cross {
    stroke: #b5a36d;
    stroke-width: 3.3;

    opacity: .70;
}


/* =========================================================
   CURVED BACKGROUND LINES
   ========================================================= */

.hero-approved-arcs {
    position: absolute;
    z-index: 1;

    inset: 0;

    width: 100%;
    height: 100%;

    fill: none;

    pointer-events: none;
}

.hero-approved-arcs path {
    vector-effect: non-scaling-stroke;
}

.hero-approved-arcs .arc-gold {
    stroke: rgba(190, 159, 91, .32);
    stroke-width: 1;
}

.hero-approved-arcs .arc-green {
    stroke: rgba(83, 117, 99, .12);
    stroke-width: 1;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.hero-approved-shell {
    position: relative;
    z-index: 4;

    display: grid;

    grid-template-columns:
        43%
        57%;

    width:
        calc(100% - 160px);

    max-width: 1680px;

    min-height:
        clamp(
            790px,
            55vw,
            920px
        );

    margin:
        0 auto;
}


/* =========================================================
   LEFT COPY
   ========================================================= */

.hero-approved-copy {
    position: relative;
    z-index: 20;

    align-self: start;

    width: 800px;
    max-width: none;

    padding-top:
        clamp(
            188px,
            15vw,
            250px
        );
}


/* ---------------------------------------------------------
   EYEBROW
   --------------------------------------------------------- */

.hero-approved-eyebrow {
    display: flex;
    align-items: center;

    gap: 18px;

    margin-bottom: 30px;

    color: #68745d;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: .29em;

    text-transform: uppercase;
}

.hero-approved-eyebrow i {
    display: block;

    width: 54px;
    height: 1px;

    background:
        #a99a67;
}


/* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */

.hero-approved h1 {
    position: relative;
    z-index: 22;

    width: 820px;

    margin: 0;

    overflow: visible;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 400;

    line-height: .95;

    letter-spacing: -.057em;
}

.hero-approved h1 strong {
    display: block;

    white-space: nowrap;

    color: #09281e;

    font-size:
        clamp(
            62px,
            4.45vw,
            76px
        );

    font-weight: 700;
}

.hero-approved h1 span {
    display: block;

    margin-top: 10px;

    color: #3b674e;

    font-size:
        clamp(
            39px,
            3vw,
            53px
        );

    font-weight: 400;

    line-height: 1;

    letter-spacing: -.045em;
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

.hero-approved-description {
    width: 585px;

    margin:
        35px 0 0;

    color: #5f6c64;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 19px;
    font-weight: 400;

    line-height: 1.72;

    letter-spacing: -.008em;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.hero-approved-actions {
    display: flex;
    align-items: center;

    gap: 20px;

    margin-top: 34px;
}

.hero-approved-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    height: 62px;

    padding:
        0 25px;

    border-radius: 999px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;
    font-weight: 600;

    line-height: 1;

    text-decoration: none;

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

.hero-approved-button:hover {
    transform:
        translateY(-1px);
}

.hero-approved-button svg {
    width: 24px;
    height: 24px;

    flex: 0 0 auto;
}


/* primary */

.hero-approved-button-primary {
    width: 291px;

    border:
        1px solid #176149;

    background:
        linear-gradient(
            180deg,
            #1a6b4c,
            #115c40
        );

    color: #fff;

    box-shadow:
        0 13px 31px
        rgba(24, 91, 65, .15);
}

.hero-approved-button-primary:hover {
    background:
        #10553b;

    color: #fff;
}


/* secondary */

.hero-approved-button-secondary {
    width: 230px;

    border:
        1px solid
        rgba(158, 148, 105, .62);

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

    color: #152e23;

    backdrop-filter:
        blur(7px);
}

.hero-approved-button-secondary:hover {
    background: #fff;

    color: #152e23;
}


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

.hero-approved-values {
    display: flex;
    align-items: center;

    gap: 18px;

    width: 590px;

    margin-top: 108px;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(83, 102, 92, .13);

    color: #989f99;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 8px;
    font-weight: 600;

    letter-spacing: .39em;

    text-transform: uppercase;
}

.hero-approved-values span:first-child {
    margin-left: 85px;
}

.hero-approved-values i {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #aa9962;
}


/* =========================================================
   PHOTO AREA
   ========================================================= */

.hero-approved-media {
    position: relative;
    z-index: 4;

    align-self: start;

    min-width: 0;

    margin-right:
        -80px;

    padding-top:
        clamp(
            76px,
            5.3vw,
            90px
        );
}


/* ---------------------------------------------------------
   PHOTO
   --------------------------------------------------------- */

.hero-approved-photo {
    position: relative;

    overflow: hidden;

    width: 100%;

    aspect-ratio:
        1.39 / 1;

    border:
        2px solid
        rgba(198, 174, 105, .75);

    border-radius:
        84px 13px 13px 13px;

    background: #dce8df;

    box-shadow:
        0 25px 60px
        rgba(29, 56, 44, .11);
}

.hero-approved-photo::after {
    content: "";

    position: absolute;
    z-index: 9;

    inset: 7px;

    border:
        1px solid
        rgba(255,255,255,.48);

    border-radius:
        77px 9px 9px 9px;

    pointer-events: none;
}

.hero-approved-photo > img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        center 48%;
}


/* ---------------------------------------------------------
   IMPORTANT PHOTO WHITE FADE
   --------------------------------------------------------- */

.hero-approved-photo-fade {
    position: absolute;
    z-index: 3;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,254,249,.94) 0%,
            rgba(255,254,249,.69) 5%,
            rgba(255,254,249,.30) 11%,
            rgba(255,254,249,.07) 18%,
            transparent 25%
        ),
        linear-gradient(
            180deg,
            rgba(5,25,18,0) 58%,
            rgba(5,25,18,.035) 100%
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   PHOTO LEAVES
   --------------------------------------------------------- */

.hero-approved-photo-leaves {
    position: absolute;
    z-index: 5;

    top: -18px;
    left: -29px;

    width: 260px;
    height: 150px;

    opacity: .76;

    pointer-events: none;
}


/* ---------------------------------------------------------
   MOTTO
   --------------------------------------------------------- */

.hero-approved-motto {
    position: absolute;
    z-index: 7;

    top: 68px;
    right: 85px;

    color: #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style: italic;

    text-shadow:
        0 2px 10px
        rgba(0,0,0,.20);
}

.hero-approved-motto span,
.hero-approved-motto strong {
    display: block;

    font-size:
        clamp(
            18px,
            1.25vw,
            22px
        );

    font-weight: 400;

    line-height: 1.32;

    letter-spacing: .05em;
}

.hero-approved-motto i {
    display: block;

    width: 50px;
    height: 2px;

    margin-top: 15px;

    background: #dcc98e;
}


/* =========================================================
   SEAL
   ========================================================= */

.hero-approved-seal {
    position: absolute;
    z-index: 12;

    right: -9px;
    bottom: 4px;

    width: 184px;
    height: 184px;

    border-radius: 50%;

    background:
        rgba(255,253,247,.97);

    box-shadow:
        0 20px 45px
        rgba(30,54,44,.10);
}

.hero-approved-seal svg {
    display: block;

    width: 100%;
    height: 100%;
}

.hero-approved-seal
.seal-circle-outer,
.hero-approved-seal
.seal-circle-inner {
    fill: none;

    stroke: #b99d58;
}

.hero-approved-seal
.seal-circle-outer {
    stroke-width: .9;

    opacity: .72;
}

.hero-approved-seal
.seal-circle-inner {
    stroke-width: .65;

    opacity: .35;
}

.hero-approved-seal
.seal-text {
    fill: #a48b50;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 6.8px;

    letter-spacing: 1.7px;
}

.hero-approved-seal
.seal-cross {
    fill: none;

    stroke: #b39347;

    stroke-width: 1.65;

    stroke-linecap: round;
}


/* =========================================================
   BOTANICAL LEFT
   ========================================================= */

.hero-approved-botanical {
    pointer-events: none;
}

.hero-approved-botanical-left {
    position: absolute;
    z-index: 3;

    left: -15px;
    bottom: -24px;

    width: 220px;
    height: 330px;

    opacity: .60;
}

.hero-approved-botanical-left
.botanical-stems {
    fill: none;

    stroke: #afc0ad;
    stroke-width: 1.25;
}

.hero-approved-botanical-left
.botanical-leaves-outline {
    fill: rgba(224,232,220,.18);

    stroke: #afc0ad;
    stroke-width: 1.2;
}

.hero-approved-botanical-left
.botanical-leaves-soft {
    fill: rgba(178,199,168,.18);
}


/* =========================================================
   BOTANICAL RIGHT — FOREGROUND
   ========================================================= */

.hero-approved-botanical-right {
    position: absolute;
    z-index: 11;

    right: -48px;
    bottom: -28px;

    width: 410px;
    height: 250px;

    opacity: .85;

    pointer-events: none;
}


/* =========================================================
   LARGE DESKTOP FINE TUNING
   ========================================================= */

@media (min-width: 1500px) {

    .hero-approved-copy {
        transform:
            translateY(2px);
    }

}


/* =========================================================
   NORMAL DESKTOP
   ========================================================= */

@media (max-width: 1390px) {

    .hero-approved-shell {
        grid-template-columns:
            46%
            54%;

        width:
            calc(100% - 80px);
    }

    .hero-approved-copy {
        width: 680px;

        padding-top: 175px;
    }

    .hero-approved h1 {
        width: 720px;
    }

    .hero-approved h1 strong {
        white-space: normal;

        font-size:
            clamp(
                53px,
                4.7vw,
                66px
            );
    }

    .hero-approved-description {
        width: 535px;

        font-size: 17px;
    }

    .hero-approved-media {
        margin-right:
            -40px;
    }

    .hero-approved-values {
        margin-top: 75px;
    }

}


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

@media (max-width: 1050px) {

    .hero-approved {
        min-height: 0;
    }

    .hero-approved-shell {
        display: block;

        width:
            min(
                100% - 36px,
                900px
            );

        min-height: 0;

        padding:
            55px 0 70px;
    }

    .hero-approved-copy {
        width: auto;

        padding-top: 70px;

        transform: none;
    }

    .hero-approved h1 {
        width: auto;
    }

    .hero-approved h1 strong {
        white-space: normal;
    }

    .hero-approved-description {
        width: auto;
        max-width: 600px;
    }

    .hero-approved-media {
        margin:
            60px 0 0;

        padding: 0;
    }

    .hero-approved-photo {
        aspect-ratio:
            1.4 / 1;
    }

    .hero-approved-seal {
        right: 10px;
        bottom: -45px;
    }

    .hero-approved-values {
        margin-top: 55px;
    }

}


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

@media (max-width: 650px) {

    .hero-approved-shell {
        width:
            calc(100% - 28px);

        padding-top: 32px;
    }

    .hero-approved-copy {
        padding-top: 48px;
    }

    .hero-approved-arch {
        left: -55px;

        width: 330px;

        opacity: .07;
    }

    .hero-approved-eyebrow {
        gap: 10px;

        font-size: 8px;

        letter-spacing: .19em;
    }

    .hero-approved-eyebrow i {
        width: 29px;
    }

    .hero-approved h1 strong {
        font-size:
            clamp(
                41px,
                12vw,
                56px
            );
    }

    .hero-approved h1 span {
        font-size:
            clamp(
                30px,
                8vw,
                40px
            );
    }

    .hero-desktop-break {
        display: none;
    }

    .hero-approved-description {
        font-size: 15px;

        line-height: 1.65;
    }

    .hero-approved-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-approved-button,
    .hero-approved-button-primary,
    .hero-approved-button-secondary {
        width: 100%;
    }

    .hero-approved-values {
        justify-content: center;

        width: 100%;

        gap: 9px;

        margin-top: 45px;

        font-size: 6px;

        letter-spacing: .19em;
    }

    .hero-approved-values span:first-child {
        margin-left: 0;
    }

    .hero-approved-photo {
        aspect-ratio:
            1.1 / 1;

        border-radius:
            38px 10px 10px 10px;
    }

    .hero-approved-photo::after {
        border-radius:
            32px 7px 7px 7px;
    }

    .hero-approved-motto {
        top: 28px;
        right: 27px;
    }

    .hero-approved-seal {
        display: none;
    }

    .hero-approved-botanical-right {
        display: none;
    }

}