/* =====================================================
   PREMIUM EDITORIAL LEGACY SECTION
   SPICEST LIGHT WEBSITE THEME
===================================================== */

.psl-section{
    --psl-olive: #7A8B5A;
    --psl-olive-dark: #52623E;
    --psl-olive-soft: #DDE5CF;
    --psl-olive-pale: #EDF1E6;

    --psl-orange: #F28A2E;
    --psl-gold: #D5B36A;

    --psl-cream: #F7F4EA;
    --psl-paper: #FCFAF5;
    --psl-white: #FFFFFF;

    --psl-dark: #20251C;
    --psl-text: #30352C;
    --psl-muted: #777D72;

    position: relative;

    overflow: hidden;

    padding: 110px 0 95px;

    background:
        linear-gradient(
            180deg,
            #F9F7F0 0%,
            #F4F1E7 100%
        );

    isolation: isolate;
}


/* =====================================================
   SUBTLE PAPER TEXTURE
===================================================== */

.psl-section::before{
    content: "";

    position: absolute;
    inset: 0;

    z-index: -3;

    pointer-events: none;

    opacity: .30;

    background-image:
        linear-gradient(
            rgba(122,139,90,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(122,139,90,.025) 1px,
            transparent 1px
        );

    background-size:
        34px 34px;
}


/* Soft central wash */

.psl-section::after{
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    left: 50%;
    top: 48%;

    z-index: -2;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(122,139,90,.09),
            transparent 67%
        );
}


/* =====================================================
   BOTANICAL LINE ART
===================================================== */

.psl-botanical{
    position: absolute;

    width: 210px;
    height: 410px;

    z-index: -1;

    pointer-events: none;

    opacity: .28;
}


.psl-botanical-left{
    left: -45px;
    bottom: 20px;
}


.psl-botanical-right{
    right: -45px;
    top: 20px;

    transform:
        scaleX(-1);
}


.psl-draw-path{
    fill: none;

    stroke:
        var(--psl-olive);

    stroke-width: 1.4;

    stroke-linecap: round;

    stroke-dasharray: 600;
    stroke-dashoffset: 600;

    transition:
        stroke-dashoffset 2.2s
        cubic-bezier(.22,1,.36,1);
}


.psl-section.is-visible
.psl-draw-path{
    stroke-dashoffset: 0;
}


.psl-path-delay{
    transition-delay: .35s;
}


.psl-path-delay-two{
    transition-delay: .65s;
}


/* =====================================================
   INTRO
===================================================== */

.psl-intro{
    position: relative;

    z-index: 3;

    margin-bottom: 58px;
}


.psl-eyebrow{
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color:
        var(--psl-olive-dark);

    font-size: 12px;

    font-weight: 850;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


.psl-eyebrow-mark{
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color:
        var(--psl-olive-dark);

    background:
        var(--psl-olive-soft);

    border:
        1px solid
        rgba(122,139,90,.15);
}


.psl-intro-grid{
    display: grid;

    grid-template-columns:
        1.35fr .65fr;

    align-items: end;

    gap: 60px;
}


/* =====================================================
   TITLE
===================================================== */

.psl-title{
    margin: 0;

    max-width: 760px;

    color:
        var(--psl-dark);

    font-size:
        clamp(38px, 4.4vw, 63px);

    font-weight: 900;

    line-height: 1.01;

    letter-spacing: -3.5px;
}


.psl-title span{
    position: relative;

    display: inline-block;

    color:
        var(--psl-olive);
}


/* Editorial marker underline */

.psl-title span::after{
    content: "";

    position: absolute;

    left: 2%;
    right: 2%;
    bottom: -6px;

    height: 9px;

    z-index: -1;

    border-radius:
        50% 45% 55% 40%;

    background:
        linear-gradient(
            90deg,
            rgba(242,138,46,.10),
            rgba(242,138,46,.38),
            rgba(213,179,106,.24),
            transparent
        );

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform 1.1s
        cubic-bezier(.22,1,.36,1)
        .6s;
}


.psl-section.is-visible
.psl-title span::after{
    transform:
        scaleX(1);
}


/* Intro text */

.psl-intro-text{
    margin: 0;

    color:
        #4e5349;

    font-size: 15px;

    line-height: 1.65;
}


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

.psl-story-grid{
    position: relative;

    z-index: 4;

    display: grid;

    grid-template-columns:
        .92fr 1.35fr .92fr;

    align-items: stretch;

    gap: 20px;
}


/* =====================================================
   STAT PANELS
===================================================== */

.psl-stat-panel{
    position: relative;

    min-height: 430px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    padding: 28px;

    border-radius: 4px 34px 4px 34px;

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

    border:
        1px solid
        rgba(122,139,90,.13);

    box-shadow:
        0 24px 65px
        rgba(57,66,48,.07);

    transition:
        transform .55s
        cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease,
        background .45s ease;
}


/* Different shape on right */

.psl-stat-right{
    border-radius:
        34px 4px 34px 4px;
}


/* Giant background index */

.psl-stat-panel::before{
    content:
        attr(data-bg);

    position: absolute;

    right: -10px;
    bottom: -45px;

    color:
        rgba(122,139,90,.045);

    font-size: 180px;

    font-weight: 1000;

    line-height: 1;

    pointer-events: none;
}


/* Hover */

.psl-stat-panel:hover{
    transform:
        translateY(-9px);

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

    box-shadow:
        0 34px 80px
        rgba(57,66,48,.12);
}


/* Top */

.psl-stat-top{
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}


.psl-stat-index{
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color:
        var(--psl-olive-dark);

    background:
        var(--psl-olive-pale);

    border:
        1px solid
        rgba(122,139,90,.13);

    font-size: 10px;

    font-weight: 900;
}


.psl-stat-label{
    color:
        var(--psl-muted);

    font-size: 12.5px;

    font-weight: 850;

    letter-spacing: 1.3px;

    text-transform: uppercase;

    text-align: right;
}


/* =====================================================
   BIG NUMBERS
===================================================== */

.psl-number-wrap{
    display: flex;
    align-items: flex-start;

    margin-top: auto;
    margin-bottom: 20px;
}


.psl-big-number{
    color:
        var(--psl-dark);

    font-size:
        clamp(65px, 7vw, 105px);

    font-weight: 950;

    line-height: .82;

    letter-spacing: -7px;

    font-variant-numeric:
        tabular-nums;
}


.psl-plus{
    margin:
        3px 0 0 8px;

    color:
        var(--psl-orange);

    font-size: 27px;

    font-weight: 900;
}


.psl-stat-panel p{
    position: relative;

    z-index: 2;

    margin:
        0 0 22px;

    color:
        #4e5349;

    font-size: 14px;

    line-height: 1.6;
}


/* =====================================================
   SIGNATURE LINE
===================================================== */

.psl-signature-line{
    width: 100%;
    height: 2px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(122,139,90,.10);
}


.psl-signature-line span{
    display: block;

    width: 45%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--psl-olive),
            var(--psl-orange)
        );

    transform:
        translateX(-110%);

    transition:
        transform 1.3s
        cubic-bezier(.22,1,.36,1)
        .7s;
}


.psl-section.is-visible
.psl-signature-line span{
    transform:
        translateX(0);
}


/* =====================================================
   CENTER IMAGE STORY
===================================================== */

.psl-image-story{
    position: relative;

    min-width: 0;

    margin: 0;
}


.psl-image-frame{
    position: relative;

    height: 100%;
    min-height: 430px;

    overflow: hidden;

    border-radius:
        38px 5px 38px 5px;

    background:
        var(--psl-olive-soft);

    box-shadow:
        0 30px 75px
        rgba(48,57,40,.14);
}


/* Main image */

.psl-main-image{
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform:
        scale(1.12);

    transition:
        transform 1.5s
        cubic-bezier(.22,1,.36,1);
}


.psl-section.is-visible
.psl-main-image{
    transform:
        scale(1.02);
}


.psl-image-frame:hover
.psl-main-image{
    transform:
        scale(1.075);
}


/* =====================================================
   UNIQUE CURTAIN REVEAL
===================================================== */

.psl-image-curtain{
    position: absolute;
    inset: 0;

    z-index: 6;

    background:
        linear-gradient(
            135deg,
            #7A8B5A,
            #65764C
        );

    transform:
        translateY(0);

    transition:
        transform 1.25s
        cubic-bezier(.77,0,.18,1)
        .25s;
}


.psl-image-curtain::after{
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--psl-orange),
            var(--psl-gold),
            transparent
        );
}


.psl-section.is-visible
.psl-image-curtain{
    transform:
        translateY(-101%);
}


/* =====================================================
   EDITORIAL CORNERS
===================================================== */

.psl-corner{
    position: absolute;

    z-index: 4;

    width: 42px;
    height: 42px;

    pointer-events: none;
}


.psl-corner-one{
    top: 18px;
    left: 18px;

    border-top:
        1px solid rgba(255,255,255,.75);

    border-left:
        1px solid rgba(255,255,255,.75);
}


.psl-corner-two{
    right: 18px;
    bottom: 18px;

    border-right:
        1px solid rgba(255,255,255,.75);

    border-bottom:
        1px solid rgba(255,255,255,.75);
}


/* =====================================================
   IMAGE CAPTION
===================================================== */

.psl-image-caption{
    position: absolute;

    left: 20px;
    bottom: 20px;

    z-index: 5;

    display: flex;
    align-items: center;

    gap: 11px;

    max-width:
        calc(100% - 40px);

    padding:
        11px 15px;

    border-radius: 16px;

    color: #fff;

    background:
        rgba(22,28,18,.72);

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

    backdrop-filter:
        blur(13px);

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

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.18);
}


.psl-caption-icon{
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 12px;

    color:
        var(--psl-olive-dark);

    background:
        #E2EACF;
}


.psl-image-caption > span:last-child{
    display: flex;
    flex-direction: column;
}


.psl-image-caption small{
    color:
        rgba(255,255,255,.55);

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: .8px;
}


.psl-image-caption strong{
    margin-top: 2px;

    color: #fff;

    font-size: 12px;
}


/* =====================================================
   VERTICAL EDITORIAL TEXT
===================================================== */

.psl-vertical-text{
    position: absolute;

    top: 50%;
    right: 13px;

    z-index: 4;

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

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    writing-mode:
        vertical-rl;

    transform:
        translateY(-50%)
        rotate(180deg);
}


/* =====================================================
   QUALITY RIBBON
===================================================== */

.psl-quality-ribbon{
    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1.1fr;

    align-items: center;

    gap: 20px;

    margin-top: 22px;

    padding:
        18px 20px;

    border-radius:
        20px;

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

    border:
        1px solid
        rgba(122,139,90,.13);

    box-shadow:
        0 20px 55px
        rgba(57,66,48,.07);
}


/* Ribbon items */

.psl-ribbon-item{
    display: flex;
    align-items: center;

    gap: 11px;
}


.psl-ribbon-icon{
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 12px;

    color:
        var(--psl-olive-dark);

    background:
        var(--psl-olive-pale);

    transition:
        transform .4s
        cubic-bezier(.22,1,.36,1),
        background .35s ease;
}


.psl-ribbon-item:hover
.psl-ribbon-icon{
    transform:
        translateY(-4px);

    background:
        var(--psl-olive-soft);
}


.psl-ribbon-item > span:last-child{
    display: flex;
    flex-direction: column;
}


.psl-ribbon-item small{
    color:
        var(--psl-muted);

    font-size: 10.5px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .8px;
}


.psl-ribbon-item strong{
    margin-top: 2px;

    color:
        var(--psl-dark);

    font-size: 13.5px;

    font-weight: 800;
}


/* Dividers */

.psl-ribbon-divider{
    width: 1px;
    height: 32px;

    background:
        rgba(122,139,90,.14);
}


/* =====================================================
   ABOUT BUTTON
===================================================== */

.psl-about-btn{
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    min-height: 50px;

    overflow: hidden;

    padding:
        7px 8px 7px 20px;

    border-radius: 999px;

    color: #fff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 850;

    background:
        var(--psl-olive);

    box-shadow:
        0 15px 35px
        rgba(122,139,90,.20);

    transition:
        transform .4s
        cubic-bezier(.22,1,.36,1),
        box-shadow .4s ease,
        background .35s ease;
}


/* Button fill animation */

.psl-about-btn::before{
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background:
        var(--psl-orange);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform .45s
        cubic-bezier(.22,1,.36,1);
}


.psl-about-btn:hover::before{
    transform:
        scaleX(1);

    transform-origin:
        left;
}


.psl-about-btn > span{
    position: relative;

    z-index: 2;
}


.psl-btn-icon{
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 50%;

    color:
        var(--psl-olive-dark);

    background: #fff;

    transition:
        transform .4s
        cubic-bezier(.22,1,.36,1);
}


.psl-about-btn:hover{
    color: #fff;

    transform:
        translateY(-3px);

    box-shadow:
        0 22px 45px
        rgba(242,138,46,.24);
}


.psl-about-btn:hover
.psl-btn-icon{
    transform:
        translateX(3px);
}


/* =====================================================
   SCROLL REVEAL
===================================================== */

.psl-reveal{
    opacity: 0;

    transform:
        translateY(32px);

    transition:
        opacity .85s
        cubic-bezier(.22,1,.36,1),
        transform .95s
        cubic-bezier(.22,1,.36,1);
}


.psl-intro
.psl-reveal:nth-child(1){
    transition-delay: .08s;
}


.psl-intro-grid
.psl-reveal:nth-child(1){
    transition-delay: .18s;
}


.psl-intro-grid
.psl-reveal:nth-child(2){
    transition-delay: .30s;
}


.psl-story-grid
.psl-reveal:nth-child(1){
    transition-delay: .18s;
}


.psl-story-grid
.psl-reveal:nth-child(2){
    transition-delay: .32s;
}


.psl-story-grid
.psl-reveal:nth-child(3){
    transition-delay: .46s;
}


.psl-quality-ribbon{
    transition-delay: .58s;
}


.psl-section.is-visible
.psl-reveal{
    opacity: 1;

    transform:
        translateY(0);
}


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

@media(max-width:1199.98px){

    .psl-section{
        padding:
            95px 0 85px;
    }

    .psl-story-grid{
        grid-template-columns:
            .9fr 1.2fr .9fr;
    }

    .psl-stat-panel{
        min-height: 400px;

        padding: 24px;
    }

    .psl-image-frame{
        min-height: 400px;
    }

    .psl-quality-ribbon{
        gap: 14px;

        padding:
            16px;
    }

    .psl-ribbon-item strong{
        font-size: 12.5px;
    }

}


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

@media(max-width:991.98px){

    .psl-section{
        padding:
            80px 0 70px;
    }

    .psl-intro-grid{
        grid-template-columns:
            1fr;

        gap: 22px;
    }

    .psl-intro-text{
        max-width: 650px;
    }

    .psl-story-grid{
        grid-template-columns:
            1fr 1fr;
    }

    .psl-image-story{
        grid-column:
            1 / -1;

        grid-row: 1;
    }

    .psl-image-frame{
        min-height: 480px;
    }

    .psl-stat-panel{
        min-height: 330px;
    }

    .psl-quality-ribbon{
        grid-template-columns:
            1fr 1fr;

        gap: 16px;
    }

    .psl-ribbon-divider{
        display: none;
    }

    .psl-about-btn{
        width: 100%;
    }

}


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

@media(max-width:767.98px){

    .psl-section{
        padding:
            70px 0 60px;
    }

    .psl-intro{
        margin-bottom:
            40px;
    }

    .psl-title{
        font-size:
            clamp(39px, 11vw, 55px);

        letter-spacing:
            -2.5px;
    }

    .psl-story-grid{
        grid-template-columns:
            1fr;

        gap: 16px;
    }

    .psl-image-story{
        grid-column: auto;
    }

    .psl-image-frame{
        min-height: 420px;
    }

    .psl-stat-panel{
        min-height: 300px;
    }

    .psl-big-number{
        letter-spacing:
            -5px;
    }

    .psl-botanical{
        opacity: .16;
    }

}


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

@media(max-width:575.98px){

    .psl-section{
        padding:
            60px 0 50px;
    }

    .psl-eyebrow{
        font-size: 9px;

        letter-spacing: 1.2px;
    }

    .psl-title{
        font-size:
            clamp(36px, 12vw, 48px);

        letter-spacing:
            -2px;
    }

    .psl-intro-text{
        font-size: 14px;
    }

    .psl-image-frame{
        min-height: 360px;

        border-radius:
            28px 5px 28px 5px;
    }

    .psl-stat-panel{
        min-height: 280px;

        padding: 22px;

        border-radius:
            4px 26px 4px 26px;
    }

    .psl-stat-right{
        border-radius:
            26px 4px 26px 4px;
    }

    .psl-big-number{
        font-size:
            clamp(62px, 22vw, 88px);
    }

    .psl-quality-ribbon{
        grid-template-columns:
            1fr;

        padding: 16px;
    }

    .psl-ribbon-item{
        padding:
            4px 2px;
    }

    .psl-about-btn{
        margin-top: 4px;
    }

    .psl-image-caption{
        left: 14px;
        bottom: 14px;

        max-width:
            calc(100% - 28px);
    }

}


/* =====================================================
   ACCESSIBILITY
===================================================== */

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

    .psl-draw-path{
        stroke-dashoffset: 0 !important;

        transition: none !important;
    }

    .psl-reveal{
        opacity: 1 !important;

        transform: none !important;

        transition: none !important;
    }

    .psl-image-curtain{
        display: none !important;
    }

    .psl-main-image{
        transform: none !important;

        transition: none !important;
    }

    .psl-signature-line span{
        transform: none !important;

        transition: none !important;
    }

}