/*=========================================================
    Village Welfare Society
    Global Styles
=========================================================*/

/*==============================
    RESET
==============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:var(--body-font);

    font-size:16px;

    color:var(--text-dark);
    
    background:#FBF8F2;

/*    background:var(--off-white);*/

    overflow-x:hidden;

    line-height:1.7;

}

/*==============================
    LINKS
==============================*/

a{

    text-decoration:none;

    transition:var(--transition-fast);

}

a:hover{

    text-decoration:none;

}

/*==============================
    IMAGES
==============================*/

img{

    max-width:100%;

    display:block;

}

/*==============================
    HEADINGS
==============================*/

h1,h2,h3,h4,h5,h6{

    font-family:var(--heading-font);

    font-weight:700;

    color:var(--secondary-color);

    margin-bottom:20px;

}

h1{

    font-size:60px;

}

h2{

    font-size:42px;

}

h3{

    font-size:32px;

}

h4{

    font-size:26px;

}

p{

    color:var(--text-light);

    margin-bottom:20px;

}

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

section{

    position:relative;

    padding:100px 0;

}

/*==============================
    CONTAINER
==============================*/

.container{

    max-width:1320px;

}

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

.btn-primary-custom{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:linear-gradient(
        135deg,
        var(--primary-color),
        var(--primary-dark)
    );

    color:#fff;

    padding:16px 36px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

    box-shadow:var(--shadow-md);

}

.btn-primary-custom:hover{

    color:#fff;

    transform:translateY(-4px);

}

.btn-secondary-custom{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:transparent;

    color:#fff;

    border:2px solid #fff;

    padding:16px 36px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.btn-secondary-custom:hover{

    background:#fff;

    color:var(--primary-color);

}

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

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    display:inline-block;

    color:var(--primary-color);

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:12px;

}

.section-title h2{

    margin-bottom:15px;

}

.section-title p{

    max-width:700px;

    margin:auto;

}

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

.hero{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

}

.hero video{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

   /* background:rgba(0,0,0,.35); */
   background:linear-gradient(
        rgba(0,0,0,.05),
        rgba(0,0,0,.00)
    );

}

.hero-content{

    position:relative;

    z-index:10;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#fff;

}

.hero-content h1{

    color:#fff;

    font-size:72px;

    font-weight:800;

    margin-bottom:25px;

}

.hero-content p{

    color:#fff;

    font-size:22px;

    max-width:850px;

    margin:auto;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

/*==============================
    SCROLL INDICATOR
==============================*/

.scroll-down{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    z-index:10;

}

.scroll-down span{

    display:block;

    width:30px;

    height:50px;

    border:2px solid #fff;

    border-radius:50px;

    position:relative;

}

.scroll-down span::before{

    content:"";

    position:absolute;

    left:50%;

    top:8px;

    width:6px;

    height:6px;

    background:#fff;

    border-radius:50%;

    transform:translateX(-50%);

    animation:scrollMouse 2s infinite;

}

@keyframes scrollMouse{

0%{

    opacity:1;

    top:8px;

}

100%{

    opacity:0;

    top:30px;

}

}

/*==============================
    CARD
==============================*/

.card{

    border:none;

    border-radius:20px;

    box-shadow:var(--shadow-sm);

    transition:.35s;

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

/*==============================
    UTILITIES
==============================*/

.text-primary{

    color:var(--primary-color)!important;

}

.text-white{

    color:#fff!important;

}

.bg-light-section{

    background:var(--section-bg);

}

/*==============================
    RESPONSIVE
==============================*/

@media(max-width:992px){

.hero-content h1{

    font-size:48px;

}

.hero-content p{

    font-size:18px;

}

section{

    padding:70px 0;

}

}

@media(max-width:768px){

.hero-content h1{

    font-size:36px;

}

.hero-content p{

    font-size:16px;

}

.btn-primary-custom,

.btn-secondary-custom{

    width:100%;

    justify-content:center;

}

.hero-buttons{

    flex-direction:column;

}

}

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

.hero-text{

    max-width:900px;

    animation:heroFade 1.5s ease;

}

.hero-tag{

    display:inline-block;

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

    backdrop-filter:blur(10px);

    padding:12px 22px;

    border-radius:40px;

    color:#fff;

    margin-bottom:25px;

    font-weight:600;

    letter-spacing:.5px;

}

.hero-tag i{

    color:#F0B85B;

    margin-right:10px;

}

.hero-content h1{

    line-height:1.1;

    text-shadow:0 10px 30px rgba(0,0,0,.30);

}

.hero-content p{

    text-shadow:0 5px 20px rgba(0,0,0,.25);

}

.hero-buttons{

    margin-top:45px;

}

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

@keyframes heroFade{

0%{

    opacity:0;

    transform:translateY(60px);

}

100%{

    opacity:1;

    transform:translateY(0);

}

}


/*==================================================
                IMPACT SECTION
==================================================*/

.impact-section{

    position:relative;

    z-index:50;

    margin-top:-30px;

    padding:0 0 80px;

}

.impact-wrapper{

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

    backdrop-filter:blur(20px);

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

    border-radius:25px;

    padding:55px 30px;

    box-shadow:

       0 30px 80px rgba(0,0,0,.12),

       0 10px 25px rgba(169,78,36,.07);

}

.impact-item{

    position:relative;

}

.impact-item:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;

    top:20px;

    width:1px;

    height:120px;

    background:#DDD5CA;

}

.impact-icon{

    width:75px;

    height:75px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #C97824,
        #E0A052
    );

    color:#fff;

    font-size:30px;

    margin-bottom:20px;

}

.impact-item h2{

    font-size:48px;

    font-weight:800;

    margin-bottom:10px;

    color:#34302B;

}

.impact-item p{

    color:#756E66;

    font-size:18px;

    margin:0;

}

/* Mobile */

@media(max-width:991px){

.impact-section{

    margin-top:40px;

}

.impact-item{

    margin-bottom:40px;

}

.impact-item::after{

    display:none;

}

}

/*=========================================================
   VWSWB COMPACT CLASSIC REFINEMENT
   Preserves markup/functionality; tightens visual rhythm.
=========================================================*/
body{font-size:15px;line-height:1.65;background:var(--off-white);}
h1,h2,h3,h4,h5,h6{color:var(--secondary-color);letter-spacing:-.025em;}
h1{font-size:56px;} h2{font-size:40px;} h3{font-size:29px;} h4{font-size:23px;}
p{margin-bottom:16px;}
section{padding:72px 0;}
.container{max-width:1260px;}
.btn-primary-custom{background:var(--primary-color);padding:13px 28px;border-radius:10px;box-shadow:0 8px 22px rgba(169,78,36,.14);}
.btn-primary-custom:hover{background:var(--primary-dark);transform:translateY(-2px);}
.section-title{margin-bottom:48px;}
.section-title span{color:var(--primary-color);}
.hero-content h1{font-size:64px;font-weight:700;letter-spacing:-.035em;}
.hero-content p{font-size:19px;line-height:1.65;}
.hero-buttons{margin-top:30px;gap:14px;}
.hero-overlay{background:linear-gradient(180deg,rgba(32,27,22,.18),rgba(32,27,22,.40));}
.hero-tag{padding:9px 18px;margin-bottom:18px;}
.impact-section{margin-top:-24px;padding:0 0 54px;}
.impact-wrapper{background:#fff;border:1px solid #E5DED4;border-radius:16px;padding:30px 18px;box-shadow:0 18px 42px rgba(47,43,39,.10);}
.impact-item:not(:last-child)::after{top:12px;height:82px;background:#DDD5CA;}
.impact-icon{width:62px;height:62px;font-size:24px;margin-bottom:14px;background:var(--primary-color);box-shadow:none;}
.impact-item h2{font-size:40px;font-weight:700;line-height:1.05;margin-bottom:6px;color:var(--secondary-color);}
.impact-item p{font-size:14px;color:var(--text-light);}
@media(max-width:991px){.hero-content h1{font-size:48px;}section{padding:62px 0;}.impact-section{margin-top:22px;padding-bottom:42px;}.impact-wrapper{padding:26px 12px;}.impact-item{margin-bottom:28px;}}
@media(max-width:768px){.hero-content h1{font-size:38px;}.hero-content p{font-size:16px;}.impact-item h2{font-size:34px;}}


/* Global editorial typography refinement */
body{font-family:'Lora', serif !important;font-size:15px;line-height:1.58;}
p{font-family:'Lora', serif !important;font-size:15px;line-height:1.58;}
.section-title p,.hero-content p,.about-text,.focus-card p{letter-spacing:-.005em;}


/* =========================================================
   VWS LANDING HERO — DESKTOP PHOTO STACK
   Added to the CURRENT running hero CSS.
   Mobile rules above remain unchanged.
========================================================= */

@media (min-width: 993px){

    /* Desktop hero becomes a warm editorial canvas. */
    .hero{
        position:relative;
        height:100vh;
        min-height:650px;
        overflow:hidden;
        background:#fff;
    }

    /* Remove the desktop video only. Mobile keeps the original video. */
    .hero > video{
        display:none !important;
    }

    .hero > .hero-overlay{
        display:none !important;
    }

    /* IMPORTANT: text remains inside the original hero-content.
       The photo stack is a separate sibling, not inside this container. */
    .hero > .hero-content{
        position:relative !important;
        z-index:30 !important;
        width:100% !important;
        max-width:1260px !important;
        height:100% !important;
        margin:0 auto !important;
        padding-left:30px !important;
        padding-right:30px !important;

        display:flex !important;
        justify-content:flex-start !important;
        align-items:center !important;

        text-align:left !important;
        color:var(--secondary-color) !important;
    }

    .hero > .hero-content > .hero-text{
        position:relative !important;
        z-index:40 !important;
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;

        width:47% !important;
        max-width:590px !important;
        margin:0 !important;
        padding:0 !important;

        text-align:left !important;
        color:var(--secondary-color) !important;
        animation:heroDesktopTextIn .8s ease both !important;
    }

    /* Small editorial eyebrow */
    /*.hero > .hero-content > .hero-text .hero-tag{
        display:inline-flex !important;
        align-items:center !important;
        gap:9px !important;

        margin:0 0 20px !important;
        padding:0 !important;

        background:transparent !important;
        border:0 !important;
        border-radius:0 !important;
        backdrop-filter:none !important;

        color:var(--primary-dark) !important;
        font-family:var(--heading-font) !important;
        font-size:10px !important;
        font-weight:800 !important;
        letter-spacing:1.8px !important;
        line-height:1 !important;
        text-transform:uppercase !important;
    }

    .hero > .hero-content > .hero-text .hero-tag i{
        color:var(--primary-color) !important;
        margin:0 !important;
        font-size:11px !important;
    }

    .hero > .hero-content > .hero-text .hero-tag::after{
        content:"" !important;
        width:34px !important;
        height:1px !important;
        margin-left:2px !important;
        background:var(--primary-light) !important;
    } */
    
    /* =========================================================
   HERO IDENTITY
   Organization name + heritage line
========================================================= */

.hero > .hero-content > .hero-text .hero-identity {
    display:block !important;

    width:100% !important;
    max-width:590px !important;

    margin:0 0 38px !important;
}


/* First line */

.hero > .hero-content > .hero-text .hero-identity-row {
    display:flex !important;
    align-items:center !important;

    width:100% !important;
}


.hero > .hero-content > .hero-text .hero-identity-row i {
    flex-shrink:0 !important;

    margin:0 11px 0 0 !important;

    color:var(--primary-color) !important;

    font-size:10px !important;

    line-height:1 !important;
}


.hero > .hero-content > .hero-text .hero-identity-name {
    font-family:'Lora', serif !important;

    font-size:45px !important;

    font-weight:600 !important;

    line-height:1.15 !important;

    letter-spacing:-.3px !important;

    color:var(--secondary-color) !important;

    white-space:nowrap !important;
}

.hero > .hero-content > .hero-text .hero-identity-name1 {
    font-family:'Lora', serif !important;

    font-size:30px !important;

    font-weight:600 !important;

    line-height:1.15 !important;

    letter-spacing:-.3px !important;

    color:var(--secondary-color) !important;

    white-space:nowrap !important;
}


/* Second line */

.hero > .hero-content > .hero-text .hero-identity-subline {
    display:flex !important;
    align-items:center !important;

    margin:7px 0 0 21px !important;
}


.hero > .hero-content > .hero-text .hero-identity-subline > span:first-child {
    font-family:'Lora', serif !important;

    font-size:20px !important;

    font-weight:500 !important;

    line-height:1.4 !important;

    letter-spacing:.1px !important;

    color:var(--text-light) !important;

    white-space:nowrap !important;
}


/* Small orange line */

.hero > .hero-content > .hero-text .hero-identity-line {
    display:block !important;

    width:28px !important;
    height:1px !important;

    margin-left:17px !important;

    background:var(--primary-color) !important;

    flex-shrink:0 !important;
}

    /* Designer/editorial heading */
    .hero > .hero-content > .hero-text h1{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;

        max-width:580px !important;
        margin:0 0 21px !important;

        color:var(--secondary-color) !important;
        font-family:var(--heading-font) !important;
        font-size:clamp(50px,5.1vw,70px) !important;
        font-weight:700 !important;
        line-height:1.01 !important;
        letter-spacing:-3px !important;
        text-align:left !important;
        text-shadow:none !important;
    }

    .hero > .hero-content > .hero-text h1 span{
        display:block !important;
        margin-top:2px !important;

        color:var(--primary-dark) !important;
        font-family:Georgia,"Times New Roman",serif !important;
        font-size:1.04em !important;
        font-weight:400 !important;
        font-style:italic !important;
        line-height:1.02 !important;
        letter-spacing:-2px !important;
    }

    .hero > .hero-content > .hero-text h1::after{
        content:"" !important;
        display:block !important;
        width:58px !important;
        height:3px !important;
        margin-top:22px !important;
        background:var(--primary-color) !important;
    }

    .hero > .hero-content > .hero-text p{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;

        max-width:545px !important;
        margin:0 0 29px !important;

        color:var(--text-light) !important;
        font-family:var(--body-font) !important;
        font-size:15px !important;
        font-weight:400 !important;
        line-height:1.8 !important;
        text-align:left !important;
        text-shadow:none !important;
    }

    .hero > .hero-content > .hero-text .hero-buttons{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:12px !important;
        margin-top:0 !important;
    }

    .hero > .hero-content > .hero-text .hero-buttons a{
        min-height:46px !important;
        padding:0 22px !important;
        border-radius:9px !important;

        font-family:var(--heading-font) !important;
        font-size:13px !important;
        font-weight:700 !important;
    }

    .hero > .hero-content > .hero-text .btn-primary-custom{
        background:var(--primary-color) !important;
        border:1px solid var(--primary-color) !important;
        color:#fff !important;
        box-shadow:0 9px 24px rgba(169,79,36,.15) !important;
    }

    .hero > .hero-content > .hero-text .btn-primary-custom:hover{
        background:var(--primary-dark) !important;
        border-color:var(--primary-dark) !important;
        color:#fff !important;
        transform:translateY(-2px) !important;
    }

    .hero > .hero-content > .hero-text .btn-secondary-custom{
        background:#fff !important;
        border:1px solid var(--border-color) !important;
        color:var(--secondary-color) !important;
    }

    .hero > .hero-content > .hero-text .btn-secondary-custom:hover{
        background:var(--off-white) !important;
        border-color:var(--primary-light) !important;
        color:var(--primary-dark) !important;
        transform:translateY(-2px) !important;
    }

    /* =====================================================
       EIGHT-CARD PHOTO FORMATION
       Fixed positions reproduce the supplied black/white
       reference rather than a random/shuffle carousel.
    ===================================================== */
    .hero-photo-stack{
        position:absolute !important;
        z-index:10 !important;

        top:55% !important;
        right:3.5% !important;

        width:min(48vw,610px) !important;
        height:min(82vh,650px) !important;

        transform:translateY(-50%) !important;

        pointer-events:none !important;
    }

    .hero-photo-card{
        position:absolute !important;

        top:50% !important;
        left:50% !important;

        width:285px !important;
        height:400px !important;

        padding:8px !important;

        background:#fff !important;
        border:1px solid rgba(255,255,255,.98) !important;
        border-radius:4px !important;

        overflow:hidden !important;

        opacity:1 !important;
        transform-origin:center center !important;
        will-change:transform !important;

        transition:
            transform .46s cubic-bezier(.34,.04,.24,1),
            box-shadow .46s ease !important;
    }

    .hero-photo-card img{
        display:block !important;
        width:100% !important;
        height:100% !important;

        object-fit:cover !important;
        border-radius:16px !important;

        background:#F1ECE4 !important;
    }

    /*
       Clockwise slot order:
       0 FRONT
       1 upper-right
       2 right
       3 lower-right
       4 lower-left
       5 left
       6 upper-left
       7 top/back
    */

    .hero-photo-card.stack-slot-0{
        z-index:18 !important;
        opacity:1 !important;
        filter:none !important;
        transform:translate(-50%,-50%) rotate(0deg) scale(1.35) !important;
        border-radius:16px !important;
        box-shadow:0 28px 56px rgba(47,43,39,.20) !important;
    }

    .hero-photo-card.stack-slot-1{
        z-index:17 !important;
        opacity:.88 !important;
        filter:saturate(.92) brightness(.98) !important;
        transform:translate(calc(-50% + 92px),calc(-50% - 30px)) rotate(6deg) scale(.91) !important;
    }

    .hero-photo-card.stack-slot-2{
        z-index:16 !important;
        opacity:.78 !important;
        filter:saturate(.88) brightness(.96) !important;
        transform:translate(calc(-50% + 125px),calc(-50% + 12px)) rotate(9deg) scale(.84) !important;
    }

    .hero-photo-card.stack-slot-3{
        z-index:15 !important;
        opacity:.70 !important;
        filter:saturate(.82) brightness(.94) !important;
        transform:translate(calc(-50% + 78px),calc(-50% + 78px)) rotate(6deg) scale(.80) !important;
    }

    .hero-photo-card.stack-slot-4{
        z-index:14 !important;
        opacity:.70 !important;
        filter:saturate(.82) brightness(.94) !important;
        transform:translate(calc(-50% - 68px),calc(-50% + 84px)) rotate(-6deg) scale(.80) !important;
    }

    .hero-photo-card.stack-slot-5{
        z-index:13 !important;
        opacity:.78 !important;
        filter:saturate(.88) brightness(.96) !important;
        transform:translate(calc(-50% - 124px),calc(-50% + 13px)) rotate(-9deg) scale(.85) !important;
    }

    .hero-photo-card.stack-slot-6{
        z-index:12 !important;
        opacity:.88 !important;
        filter:saturate(.92) brightness(.98) !important;
        transform:translate(calc(-50% - 91px),calc(-50% - 44px)) rotate(-6deg) scale(.91) !important;
    }

    .hero-photo-card.stack-slot-7{
        z-index:11 !important;
        opacity:.62 !important;
        filter:saturate(.78) brightness(.92) !important;
        transform:translate(calc(-50% + 2px),calc(-50% - 124px)) rotate(2deg) scale(.82) !important;
    }

    @keyframes heroDesktopTextIn{
        from{
            opacity:0;
            transform:translateX(-22px);
        }
        to{
            opacity:1;
            transform:translateX(0);
        }
    }
}

/* =========================================================
   VWS LANDING HERO — MOBILE PHOTO STACK
   Desktop remains completely untouched.
========================================================= */

@media (max-width:992px){

    /* -----------------------------------------
       MOBILE HERO BACKGROUND
    ----------------------------------------- */

    .hero{
        position:relative !important;
        width:100% !important;
        height:auto !important;
        min-height:850px !important;
        overflow:hidden !important;
        background:#FBF8F2 !important;
        padding:0 !important;
    }


    /* -----------------------------------------
       REMOVE MOBILE VIDEO
    ----------------------------------------- */

    .hero > video{
        display:none !important;
    }

    .hero > .hero-overlay{
        display:none !important;
    }


    /* -----------------------------------------
       MOBILE HERO TEXT
    ----------------------------------------- */

    .hero > .hero-content{
        position:relative !important;
        z-index:30 !important;

        width:100% !important;
        max-width:none !important;

        height:auto !important;
        min-height:0 !important;

        margin:0 !important;

        padding:105px 20px 0 !important;

        display:flex !important;
        justify-content:center !important;
        align-items:flex-start !important;

        text-align:center !important;

        color:var(--secondary-color) !important;
    }


    .hero > .hero-content > .hero-text{
        width:100% !important;
        max-width:500px !important;

        margin:0 auto !important;
        padding:0 !important;

        text-align:center !important;

        color:var(--secondary-color) !important;

        animation:heroMobileTextIn .8s ease both !important;
    }


    /* Small welcome text */

    .hero > .hero-content > .hero-text .hero-tag{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

        gap:8px !important;

        margin:0 0 16px !important;
        padding:0 !important;

        background:transparent !important;
        border:0 !important;
        border-radius:0 !important;

        backdrop-filter:none !important;

        color:var(--primary-dark) !important;

        font-family:var(--heading-font) !important;
        font-size:9px !important;
        font-weight:800 !important;

        letter-spacing:1.4px !important;
        line-height:1.3 !important;

        text-transform:uppercase !important;
    }


    .hero > .hero-content > .hero-text .hero-tag i{
        color:var(--primary-color) !important;
        margin:0 !important;
        font-size:10px !important;
    }


    .hero > .hero-content > .hero-text .hero-tag::after{
        content:"" !important;

        width:24px !important;
        height:1px !important;

        margin-left:1px !important;

        background:var(--primary-light) !important;
    }
    
    /* =========================================================
   MOBILE HERO IDENTITY
========================================================= */

.hero > .hero-content > .hero-text .hero-identity {
    display:block !important;

    width:100% !important;
    max-width:500px !important;

    margin:0 auto 30px !important;

    text-align:left !important;
}


/* First line */

.hero > .hero-content > .hero-text .hero-identity-row {
    display:flex !important;
    align-items:center !important;

    justify-content:center !important;
}


.hero > .hero-content > .hero-text .hero-identity-row i {
    flex-shrink:0 !important;

    margin-right:9px !important;

    color:var(--primary-color) !important;

    font-size:9px !important;
}


.hero > .hero-content > .hero-text .hero-identity-name {
    font-family:'Lora', serif !important;

    font-size:32px !important;

    font-weight:600 !important;

    line-height:1.2 !important;

    letter-spacing:-.2px !important;

    color:var(--secondary-color) !important;

    white-space:nowrap !important;
}
.hero > .hero-content > .hero-text .hero-identity-name1 {
    font-family:'Lora', serif !important;

    font-size:21px !important;

    font-weight:600 !important;

    line-height:1.2 !important;

    letter-spacing:-.2px !important;

    color:var(--secondary-color) !important;

    white-space:nowrap !important;
    
    text-align:center !important;
}


/* Second line */

.hero > .hero-content > .hero-text .hero-identity-subline {
    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    margin:7px 0 0 !important;
}


.hero > .hero-content > .hero-text .hero-identity-subline > span:first-child {
    font-family:'Lora', serif !important;

    font-size:19px !important;

    font-weight:500 !important;

    line-height:1.5 !important;

    color:var(--text-light) !important;

    white-space:nowrap !important;
}


.hero > .hero-content > .hero-text .hero-identity-line {
    display:block !important;

    width:24px !important;

    height:1px !important;

    margin-left:13px !important;

    background:var(--primary-color) !important;

    flex-shrink:0 !important;
}


    /* -----------------------------------------
       MOBILE HEADING
    ----------------------------------------- */

    .hero > .hero-content > .hero-text h1{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;

        width:100% !important;
        max-width:460px !important;

        margin:0 auto 18px !important;

        color:var(--secondary-color) !important;

        font-family:var(--heading-font) !important;

        font-size:clamp(38px,10vw,48px) !important;
        font-weight:700 !important;

        line-height:1.03 !important;

        letter-spacing:-1.8px !important;

        text-align:center !important;

        text-shadow:none !important;
    }


    .hero > .hero-content > .hero-text h1 span{
        display:block !important;

        margin-top:3px !important;

        color:var(--primary-dark) !important;

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

        font-size:1.04em !important;
        font-weight:400 !important;
        font-style:italic !important;

        line-height:1.03 !important;

        letter-spacing:-1.2px !important;
    }


    .hero > .hero-content > .hero-text h1::after{
        content:"" !important;

        display:block !important;

        width:48px !important;
        height:3px !important;

        margin:18px auto 0 !important;

        background:var(--primary-color) !important;
    }


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

    .hero > .hero-content > .hero-text p{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;

        width:100% !important;
        max-width:450px !important;

        margin:0 auto 23px !important;

        color:var(--text-light) !important;

        font-family:var(--body-font) !important;

        font-size:14px !important;
        font-weight:400 !important;

        line-height:1.7 !important;

        text-align:center !important;

        text-shadow:none !important;
    }


    /* -----------------------------------------
       MOBILE BUTTONS
    ----------------------------------------- */

    .hero > .hero-content > .hero-text .hero-buttons{
        display:flex !important;

        flex-direction:column !important;

        align-items:stretch !important;

        justify-content:center !important;

        width:100% !important;
        max-width:330px !important;

        margin:0 auto !important;

        gap:9px !important;
    }


    .hero > .hero-content > .hero-text .hero-buttons a{
        width:100% !important;

        min-height:45px !important;

        padding:0 18px !important;

        justify-content:center !important;

        border-radius:9px !important;

        font-family:var(--heading-font) !important;

        font-size:12px !important;
        font-weight:700 !important;
    }


    .hero > .hero-content > .hero-text .btn-primary-custom{
        background:var(--primary-color) !important;

        border:1px solid var(--primary-color) !important;

        color:#fff !important;

        box-shadow:0 8px 20px rgba(169,79,36,.13) !important;
    }


    .hero > .hero-content > .hero-text .btn-secondary-custom{
        background:#fff !important;

        border:1px solid var(--border-color) !important;

        color:var(--secondary-color) !important;
    }


    /* -----------------------------------------
       MOBILE PHOTO FORMATION
    ----------------------------------------- */

    .hero > .hero-photo-stack{

        display:block !important;

        position:relative !important;

        z-index:10 !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        width:100% !important;

        max-width:350px !important;

        height:280px !important;

        margin:28px auto 0 !important;

        transform:none !important;

        pointer-events:none !important;
    }


    /* -----------------------------------------
       MOBILE PHOTO CARD SIZE
    ----------------------------------------- */

    .hero > .hero-photo-stack .hero-photo-card{

        /* All mobile cards start from one fixed center.
           The stack-slot rules below create the formation. */
        position:absolute !important;

        top:50% !important;
        left:50% !important;

        width:145px !important;
        height:205px !important;

        padding:6px !important;

        background:#fff !important;

        border:1px solid rgba(255,255,255,.98) !important;

        border-radius:8px !important;

        overflow:hidden !important;

        opacity:1 !important;

        transform-origin:center center !important;

        will-change:transform !important;

        transition:
            transform .46s cubic-bezier(.34,.04,.24,1),
            box-shadow .46s ease !important;
    }


    .hero > .hero-photo-stack .hero-photo-card img{

        display:block !important;

        width:100% !important;
        height:100% !important;

        object-fit:cover !important;

        border-radius:12px !important;

        background:#F1ECE4 !important;
    }


    /* -----------------------------------------
       FRONT CARD
    ----------------------------------------- */

    .hero > .hero-photo-stack .hero-photo-card.stack-slot-0{

        z-index:18 !important;

        opacity:1 !important;

        filter:none !important;

        transform:
            translate(-50%,-50%)
            rotate(0deg)
            scale(1.18) !important;

        border-radius:14px !important;

        box-shadow:
            0 22px 40px rgba(47,43,39,.18) !important;
    }


    /* -----------------------------------------
       CARD 1 — UPPER RIGHT
    ----------------------------------------- */

    .hero > .hero-photo-stack .hero-photo-card.stack-slot-1{

        z-index:17 !important;

        opacity:.88 !important;

        filter:saturate(.92) brightness(.98) !important;

        transform:
            translate(calc(-50% + 58px),
                      calc(-50% - 18px))
            rotate(6deg)
            scale(.87) !important;
    }


    /* -----------------------------------------
       CARD 2 — RIGHT
    ----------------------------------------- */

    .hero > .hero-photo-stack .hero-photo-card.stack-slot-2{

        z-index:16 !important;

        opacity:.78 !important;

        filter:saturate(.88) brightness(.96) !important;

        transform:
            translate(calc(-50% + 76px),
                      calc(-50% + 5px))
            rotate(8deg)
            scale(.80) !important;
    }


    /* -----------------------------------------
       CARD 3 — LOWER RIGHT
    ----------------------------------------- */

    .hero > .hero-photo-stack .hero-photo-card.stack-slot-3{

        z-index:15 !important;

        opacity:.70 !important;

        filter:saturate(.82) brightness(.94) !important;

        transform:
            translate(calc(-50% + 50px),
                      calc(-50% + 52px))
            rotate(6deg)
            scale(.76) !important;
    }


    /* -----------------------------------------
       CARD 4 — LOWER LEFT
    ----------------------------------------- */

    .hero > .hero-photo-stack .hero-photo-card.stack-slot-4{

        z-index:14 !important;

        opacity:.70 !important;

        filter:saturate(.82) brightness(.94) !important;

        transform:
            translate(calc(-50% - 50px),
                      calc(-50% + 55px))
            rotate(-6deg)
            scale(.76) !important;
    }


    /* -----------------------------------------
       CARD 5 — LEFT
    ----------------------------------------- */

    .hero > .hero-photo-stack .hero-photo-card.stack-slot-5{

        z-index:13 !important;

        opacity:.78 !important;

        filter:saturate(.88) brightness(.96) !important;

        transform:
            translate(calc(-50% - 76px),
                      calc(-50% + 5px))
            rotate(-8deg)
            scale(.80) !important;
    }


    /* -----------------------------------------
       CARD 6 — UPPER LEFT
    ----------------------------------------- */

    .hero > .hero-photo-stack .hero-photo-card.stack-slot-6{

        z-index:12 !important;

        opacity:.88 !important;

        filter:saturate(.92) brightness(.98) !important;

        transform:
            translate(calc(-50% - 58px),
                      calc(-50% - 25px))
            rotate(-6deg)
            scale(.87) !important;
    }


    /* -----------------------------------------
       CARD 7 — TOP / BACK
    ----------------------------------------- */

    .hero > .hero-photo-stack .hero-photo-card.stack-slot-7{

        z-index:11 !important;

        opacity:.62 !important;

        filter:saturate(.78) brightness(.92) !important;

        transform:
            translate(calc(-50% + 1px),
                      calc(-50% - 70px))
            rotate(2deg)
            scale(.78) !important;
    }


    /* Mobile does not need desktop scroll indicator */

    .scroll-down{
        display:none !important;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media(max-width:600px){

    .hero{
        min-height:820px !important;
    }

    .hero > .hero-content{
        padding:100px 18px 0 !important;
    }

    .hero > .hero-content > .hero-text h1{
        font-size:clamp(36px,10.5vw,44px) !important;
    }

    .hero > .hero-content > .hero-text p{
        font-size:13.5px !important;
        line-height:1.65 !important;
    }

    .hero > .hero-photo-stack{
        max-width:330px !important;
        height:260px !important;

        margin-top:25px !important;
    }

    .hero > .hero-photo-stack .hero-photo-card{
        width:135px !important;
        height:195px !important;
    }
    
    .hero > .hero-content > .hero-text .hero-identity-name {
    font-size:30px !important;
}
    .hero > .hero-content > .hero-text .hero-identity-name1 {
    font-size:17px !important;
    text-align:center !important;
}

.hero > .hero-content > .hero-text .hero-identity-subline > span:first-child {
    font-size:15px !important;
}

.hero > .hero-content > .hero-text .hero-identity-line {
    width:20px !important;
    margin-left:10px !important;
}
}


/* =========================================================
   MOBILE HERO TEXT ANIMATION
========================================================= */

@keyframes heroMobileTextIn{

    from{
        opacity:0;
        transform:translateY(18px);
    }

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