.why-pmf{
    position:relative;
    min-height:330px;
    overflow:hidden;
    color:#fff;
    background:#4f403e
}

.why-pmf-bg{
    position:absolute;
    inset:0;
    z-index:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 52%;
    filter:saturate(.58) sepia(.12)
}

.why-pmf-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(
            90deg,
            rgba(69,52,48,.89) 0%,
            rgba(69,52,48,.82) 32%,
            rgba(69,52,48,.72) 58%,
            rgba(69,52,48,.64) 100%
        ),
        rgba(107,72,65,.12)
}

.why-pmf-shell{
    position:relative;
    z-index:2;
    min-height:330px;
    display:grid;
    grid-template-columns:minmax(320px,.95fr) minmax(0,1.65fr);
    align-items:center;
    gap:clamp(48px,6vw,96px);
    padding-block:54px
}

.why-pmf-intro{
    min-width:0;
    max-width:560px
}

.why-pmf-intro h2{
    margin:0;
    color:#fff;
    font-family:var(--serif);
    font-size:calc(clamp(36px,3.1vw,51px) - 4px);
    line-height:.98;
    font-weight:500;
    letter-spacing:-.025em
}

.why-pmf-intro h2 span{
    color:#fff3f0
}

.why-pmf-copy{
    max-width:520px;
    margin:18px 0 0;
    color:rgba(255,255,255,.84);
    font-size:15px;
    line-height:1.6
}

.why-pmf-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:43px;
    margin-top:22px;
    padding:0 22px;
    border-radius:999px;
    background:#c86f82;
    color:#fff;
    font-size:11px;
    line-height:1;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    transition:background-color .2s ease
}

.why-pmf-cta:hover{
    background:#b95f73
}

.why-pmf-cta--mobile{
    display:none;
    opacity:0;
    transform:translateY(12px)
}

.why-pmf-points{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(26px,3vw,48px);
    align-items:start
}

.why-pmf-point{
    min-width:0;
    text-align:center
}

.why-pmf-icon{
    width:180px;
    height:142px;
    margin:0 auto 16px;
    display:grid;
    place-items:center;
    color:#efabb7
}

.why-pmf-art{
    display:block;
    overflow:visible;
    fill:none;
    stroke:currentColor;
    stroke-linecap:round;
    stroke-linejoin:round;
    shape-rendering:geometricPrecision
}

.why-pmf-art--place{
    width:178px;
    height:auto;
    stroke-width:1.25
}

.why-pmf-art--kids{
    width:118px;
    height:auto;
    stroke-width:1.25
}

.why-pmf-art--care{
    width:96px;
    height:auto;
    stroke-width:1.15
}

.why-pmf-art path{
    stroke-dasharray:1;
    stroke-dashoffset:1;
    vector-effect:non-scaling-stroke
}

.why-pmf-point h3,
.why-pmf-point p{
    opacity:0;
    transform:translateY(12px)
}

.why-pmf-point h3{
    margin:0;
    color:#fff;
    font-family:var(--serif);
    font-size:23px;
    line-height:1.05;
    font-weight:600
}

.why-pmf-point p{
    max-width:230px;
    margin:9px auto 0;
    color:rgba(255,255,255,.82);
    font-size:13px;
    line-height:1.55
}

.why-pmf.is-animated .why-pmf-point:nth-child(1) .why-pmf-art path{
    animation:whyPmfDraw 1.45s cubic-bezier(.22,.61,.36,1) forwards
}

.why-pmf.is-animated .why-pmf-point:nth-child(1) h3{
    animation:whyPmfTextIn .48s ease 1.05s forwards
}

.why-pmf.is-animated .why-pmf-point:nth-child(1) p{
    animation:whyPmfTextIn .48s ease 1.22s forwards
}

.why-pmf.is-animated .why-pmf-point:nth-child(2) .why-pmf-art path{
    animation:whyPmfDraw 1.35s cubic-bezier(.22,.61,.36,1) 1.2s forwards
}

.why-pmf.is-animated .why-pmf-point:nth-child(2) h3{
    animation:whyPmfTextIn .48s ease 2.15s forwards
}

.why-pmf.is-animated .why-pmf-point:nth-child(2) p{
    animation:whyPmfTextIn .48s ease 2.32s forwards
}

.why-pmf.is-animated .why-pmf-point:nth-child(3) .why-pmf-art path{
    animation:whyPmfDraw 1.35s cubic-bezier(.22,.61,.36,1) 2.35s forwards
}

.why-pmf.is-animated .why-pmf-point:nth-child(3) h3{
    animation:whyPmfTextIn .48s ease 3.3s forwards
}

.why-pmf.is-animated .why-pmf-point:nth-child(3) p{
    animation:whyPmfTextIn .48s ease 3.47s forwards
}

.why-pmf.is-animated .why-pmf-cta--mobile{
    animation:whyPmfTextIn .48s ease 3.85s forwards
}

@keyframes whyPmfDraw{
    to{
        stroke-dashoffset:0
    }
}

@keyframes whyPmfTextIn{
    to{
        opacity:1;
        transform:translateY(0)
    }
}

@media(prefers-reduced-motion:reduce){
    .why-pmf-art path{
        animation:none!important;
        stroke-dashoffset:0!important
    }

    .why-pmf-point h3,
    .why-pmf-point p,
    .why-pmf-cta--mobile{
        animation:none!important;
        opacity:1;
        transform:none
    }
}

@media(max-width:1050px){
    .why-pmf-shell{
        grid-template-columns:1fr;
        gap:40px;
        padding-block:58px
    }

    .why-pmf-intro{
        max-width:680px;
        margin:auto;
        text-align:center
    }

    .why-pmf-copy{
        margin-inline:auto
    }
}

@media(max-width:720px){
    .why-pmf-shell{
        padding-block:54px
    }

    .why-pmf-cta--desktop{
        display:none
    }

    .why-pmf-points{
        grid-template-columns:1fr;
        gap:34px
    }

    .why-pmf-point{
        max-width:410px;
        margin:auto
    }

    .why-pmf-point p{
        max-width:360px;
        font-size:14px
    }

    .why-pmf-icon{
        margin-bottom:10px
    }

    .why-pmf-cta--mobile{
        display:inline-flex;
        justify-self:center;
        margin-top:8px
    }
}

@media(max-width:520px){
    .why-pmf-shell{
        padding-block:48px
    }

    .why-pmf-intro h2{
        font-size:calc(clamp(36px,10vw,44px) - 4px)
    }

    .why-pmf-copy{
        font-size:15px
    }

    .why-pmf-point h3{
        font-size:22px
    }

    .why-pmf-icon{
        width:168px;
        height:134px
    }

    .why-pmf-art--place{
        width:164px
    }

    .why-pmf-art--kids{
        width:110px
    }

    .why-pmf-art--care{
        width:90px
    }
}