/* =========================================================
   VWS — OUR WORK PAGE
   Community-first NGO editorial design
   Header / navbar / footer remain shared site components.
========================================================= */

.ourwork-page{
    --ow-primary:#C97824;
    --ow-primary-dark:#A94F24;
    --ow-primary-light:#E0A052;
    --ow-secondary:#2F2B27;
    --ow-secondary-light:#4A3B31;
    --ow-accent:#8A6842;
    --ow-white:#FFFFFF;
    --ow-off-white:#FBF8F2;
    --ow-section:#F2EDE4;
    --ow-text:#34302B;
    --ow-muted:#756E66;
    --ow-line:#E5DED4;
    --ow-soft:#EEE6DA;
    color:var(--ow-text);
    overflow:hidden;
    background:var(--ow-white);
}

.ourwork-page *,
.ourwork-page *::before,
.ourwork-page *::after{box-sizing:border-box;}

.ourwork-page a{color:inherit;}
.ourwork-page .container{position:relative;z-index:2;}

/* =========================================================
   HERO — warm, photographic, human
========================================================= */

.ourwork-hero{
    position:relative;
    min-height:400px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#fff;
    border-bottom:1px solid var(--ow-line);
}

.ourwork-hero::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-210px;
    top:-190px;
    border-radius:50%;
    background:rgba(224,160,82,.13);
}

.ourwork-hero::after{
    content:"";
    position:absolute;
    left:-170px;
    bottom:-220px;
    width:390px;
    height:390px;
    border-radius:50%;
    background:rgba(201,120,36,.06);
}

.ourwork-hero-pattern,
.ourwork-hero-glow{display:none;}

.ourwork-hero-grid{
    min-height:405px;
    display:grid;
    grid-template-columns:minmax(0,1.02fr) minmax(430px,.98fr);
    gap:72px;
    align-items:center;
}

.ourwork-hero-content{padding:40px 0 10px;}

.ourwork-eyebrow,
.ourwork-section-label{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:16px;
    color:var(--ow-primary-dark);
    font:800 10px/1 'Lora', serif !important;
    letter-spacing:2px;
    text-transform:uppercase;
}

.ourwork-eyebrow i{font-size:11px;color:var(--ow-primary);}

.ourwork-eyebrow::after{
    content:"";
    width:28px;
    height:1px;
    background:var(--ow-primary-light);
}

.ourwork-hero h1{
    max-width:670px;
    margin:0;
    color:var(--ow-secondary);
    font:700 clamp(35px,4vw,56px)/1.06 'Lora', serif !important;
    letter-spacing:-2px;
}

.ourwork-hero h1 span{
    display:block;
    color:var(--ow-primary-dark);
    font-family:Georgia,serif;
    font-weight:400;
    letter-spacing:-1.2px;
}

.ourwork-hero-content>p{
    max-width:590px;
    margin:23px 0 28px;
    color:var(--ow-muted);
    font:400 15px/1.8 'Open Sans',sans-serif;
}

.ourwork-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:11px;
}

.ourwork-primary-btn,
.ourwork-secondary-btn{
    min-height:46px;
    padding:0 20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border-radius:7px;
    text-decoration:none;
    font:700 13px/1 'Lora', serif !important;
    transition:.25s ease;
}

.ourwork-primary-btn{
    color:#fff;
    background:var(--ow-primary);
    box-shadow:0 8px 20px rgba(169,79,36,.14);
}

.ourwork-primary-btn:hover{
    color:#fff;
    background:var(--ow-primary-dark);
    transform:translateY(-2px);
}

.ourwork-secondary-btn{
    color:var(--ow-secondary);
    border:1px solid var(--ow-line);
    background:#fff;
}

.ourwork-secondary-btn:hover{
    color:var(--ow-primary-dark);
    border-color:var(--ow-primary-light);
    transform:translateY(-2px);
}

/* Editorial photo panel. Add assets/images/ourwork/our-work-hero.jpg
   for the intended photographic presentation; the warm fallback remains clean. */
.ourwork-hero-visual{
    position:relative;
    min-height:405px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.ourwork-photo-frame{
    position:relative;
    width:min(100%,450px);
    height:405px;
    overflow:hidden;
    background:
        linear-gradient(135deg,rgba(201,120,36,.18),rgba(74,59,49,.12)),
        url("../images/ourwork/our-work-hero.jpg") center/cover no-repeat,
        #D8C8B5;
    border:10px solid #fff;
    border-radius:90px 4px 90px 4px;
    box-shadow:0 20px 48px rgba(47,43,39,.13);
}

.ourwork-photo-frame::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 48%,rgba(47,43,39,.62));
}

.ourwork-photo-overlay{position:absolute;inset:0;}

.ourwork-photo-caption{
    position:absolute;
    left:28px;
    bottom:25px;
    color:#fff;
}

.ourwork-photo-caption span{
    display:block;
    margin-bottom:8px;
    font:800 9px/1 'Lora', serif !important;
    letter-spacing:2px;
}

.ourwork-photo-caption strong{
    display:block;
    font:600 23px/1.18 'Lora', serif !important;
    letter-spacing:-.5px;
}

.ourwork-note-card{
    position:absolute;
    left:-12px;
    bottom:22px;
    width:205px;
    padding:18px 19px;
    background:#fff;
    border:1px solid var(--ow-line);
    border-radius:4px 22px 4px 22px;
    box-shadow:0 12px 30px rgba(47,43,39,.10);
}

.ourwork-note-label{
    display:block;
    margin-bottom:9px;
    color:var(--ow-primary-dark);
    font:800 9px/1 'Lora', serif !important;
    letter-spacing:1.7px;
}

.ourwork-note-card p{
    margin:0;
    color:var(--ow-text);
    font:600 12px/1.55 'Open Sans',sans-serif;
}

.ourwork-photo-mark{
    position:absolute;
    right:8px;
    top:24px;
    color:rgba(255,255,255,.9);
    font:800 12px/1 'Lora', serif !important;
    letter-spacing:3px;
}

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

.ourwork-intro{
    padding:84px 0;
    background:#fff;
}

.ourwork-intro-grid{
    display:grid;
    grid-template-columns:minmax(230px,.75fr) minmax(0,1.25fr);
    gap:72px;
    align-items:start;
}

.ourwork-section-heading h2,
.ourwork-process-content h2,
.ourwork-centered-heading h2{
    margin:0;
    color:var(--ow-secondary);
    font:700 clamp(31px,3.4vw,43px)/1.12 'Lora', serif !important;
    letter-spacing:-1.3px;
}

.ourwork-section-heading h2 span,
.ourwork-process-content h2 span,
.ourwork-centered-heading h2 span{
    color:var(--ow-primary-dark);
    font-family:Georgia,serif;
    font-weight:400;
}

.ourwork-intro-content{
    max-width:700px;
    padding-top:3px;
}

.ourwork-intro-content p{
    margin:0 0 16px;
    color:var(--ow-muted);
    font:400 14px/1.8 'Open Sans',sans-serif;
}

.ourwork-intro-content .ourwork-lead{
    margin-bottom:19px;
    color:var(--ow-text);
    font:600 17px/1.65 'Open Sans',sans-serif;
}

/* =========================================================
   AREAS OF WORK — warm programme cards
   Soft cards, subtle lift and a warmer hover state.
========================================================= */

.ourwork-focus{
    padding:0 0 20px;
    background:#FFFFFF;
}

.ourwork-centered-heading{
    max-width:680px;
    margin:-35px auto 10px;
    text-align:center;
}

.ourwork-centered-heading p{
    max-width:590px;
    margin:10px auto 0;
    color:var(--ow-muted);
    font:400 14px/1.75 'Open Sans',sans-serif;
}

.ourwork-focus-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.ourwork-focus-card{
    position:relative;
min-height:0;
padding:18px 25px 18px;
    overflow:hidden;

    border:1px solid #E8DDD0;
    border-radius:22px 6px 22px 6px;

    background:#FBF7F0;

    box-shadow:
        0 4px 10px rgba(47,43,39,.05),
        0 14px 28px rgba(47,43,39,.07);

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

.ourwork-focus-card:hover{
    background:#FFF9F1;
    border-color:#D8C2A8;

    transform:translateY(-7px);

    box-shadow:
        0 8px 14px rgba(47,43,39,.06),
        0 20px 38px rgba(47,43,39,.12);
}

.ourwork-card-heading{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start;
    gap:12px;
    margin:0 0 12px;
    width:100%;
}

.ourwork-card-heading h3{
    display:block !important;
    flex:1 1 auto;
    margin:0 !important;
    padding:0 !important;

    color:var(--ow-secondary);
    font:700 18px/1.3 'Lora', serif !important;

    white-space:normal;
}
/* ---------------------------------------------------------
   INDIVIDUAL NGO PROGRAMME CARD COLOURS
--------------------------------------------------------- */

.ourwork-focus-card:nth-child(1){
    background:#FFF8ED;
}

.ourwork-focus-card:nth-child(2){
    background:#FFF3F0;
}

.ourwork-focus-card:nth-child(3){
    background:#F7F1EA;
}

.ourwork-focus-card:nth-child(4){
    background:#FFF7E8;
}

.ourwork-focus-card:nth-child(5){
    background:#F1F6ED;
}

.ourwork-focus-card:nth-child(6){
    background:#F4F1F8;
}

.ourwork-focus-card:nth-child(7){
    background:#F1F5F7;
}

.ourwork-card-number{
    position:absolute;
    top:29px;
    right:29px;
    color:#BBA995;
    font:700 9px/1 'Lora', serif !important;
    letter-spacing:1.7px;
}

.ourwork-focus-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    margin:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#FFFFFF;
    color:var(--ow-primary-dark);

    font-size:16px;

    box-shadow:
        0 4px 10px rgba(47,43,39,.07);

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

.ourwork-focus-card:hover .ourwork-focus-icon{
    background:#FFFDF9;
    transform:scale(1.06);
    box-shadow:
        0 6px 14px rgba(47,43,39,.10);
}

.ourwork-focus-card h3{
    max-width:none;
    margin:0;

    color:var(--ow-secondary);
    font:700 18px/1.3 'Lora', serif !important;
}

.ourwork-focus-card p{
    max-width:540px;
    margin:0;
    padding-right:10px;

    color:var(--ow-muted);
    font:400 12.5px/1.58 'Open Sans',sans-serif;
}

.ourwork-card-line{
    width:28px;
    height:2px;
    margin-top:13px;
    background:var(--ow-primary);
    transition:width .28s ease;
}

.ourwork-focus-card:hover .ourwork-card-line{width:50px;}

/* Linked programme remains a normal programme card. */
.ourwork-focus-card:has(>a){position:relative;}
.ourwork-focus-card>a{
    display:block;
    height:100%;
    color:inherit;
    text-decoration:none;
}
.ourwork-focus-card:has(>a)::before,
.ourwork-focus-card:has(>a)::after{
    display:none;
}

/* =========================================================
   HOW WE WORK — replace technical orbit with human process
========================================================= */

.ourwork-process{
    padding:88px 0;
    background:#fff;
}

.ourwork-process-grid{
    display:grid;
    grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr);
    gap:78px;
    align-items:center;
}

.ourwork-process-visual{
    position:relative;
    min-height:390px;
    padding:45px 48px;
    background:var(--ow-off-white);
    border:1px solid var(--ow-line);
}

.ourwork-process-kicker{
    margin-bottom:32px;
    color:var(--ow-primary-dark);
    font:800 9px/1 'Lora', serif !important;
    letter-spacing:2px;
}

.ourwork-process-quote{
    position:relative;
    max-width:390px;
    padding-left:22px;
    border-left:2px solid var(--ow-primary);
}

.quote-mark{
    position:absolute;
    left:18px;
    top:-25px;
    color:rgba(201,120,36,.16);
    font:700 82px/1 Georgia,serif;
}

.ourwork-process-quote p{
    position:relative;
    z-index:1;
    margin:0;
    color:var(--ow-secondary);
    font:500 21px/1.55 Georgia,serif;
}

.ourwork-process-line{
    position:relative;
    height:1px;
    margin:45px 0 24px;
    background:var(--ow-line);
}

.process-line-dot{
    position:absolute;
    left:0;
    top:50%;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--ow-primary);
    transform:translateY(-50%);
}

.ourwork-process-place{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--ow-muted);
    font:700 10px/1 'Lora', serif !important;
    letter-spacing:1px;
    text-transform:uppercase;
}

.ourwork-process-place i{color:var(--ow-primary);}

.ourwork-process-content> .ourwork-lead{
    max-width:600px;
    margin:18px 0 27px;
    color:var(--ow-muted);
    font:400 14px/1.8 'Open Sans',sans-serif;
}

.ourwork-process-list{
    display:grid;
    gap:0;
}

.ourwork-process-item{
    display:grid;
    grid-template-columns:36px 1fr;
    gap:15px;
    padding:17px 0;
    border-top:1px solid var(--ow-line);
}

.ourwork-process-item:last-child{border-bottom:1px solid var(--ow-line);}

.ourwork-process-number{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--ow-soft);
    color:var(--ow-primary-dark);
    font:800 9px/1 'Lora', serif !important;
}

.ourwork-process-item h3{
    margin:0 0 4px;
    color:var(--ow-secondary);
    font:700 15px/1.3 'Lora', serif !important;
}

.ourwork-process-item p{
    margin:0;
    color:var(--ow-muted);
    font:400 12px/1.65 'Open Sans',sans-serif;
}

/* =========================================================
   GET INVOLVED
========================================================= */

.ourwork-involve{
    padding:82px 0;
    background:var(--ow-section);
}

.ourwork-involve-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.ourwork-involve-card{
    min-height:205px;
    padding:27px 27px 24px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    border:1px solid var(--ow-line);
    border-radius:10px;
    background:#fff;
    color:inherit;
    text-decoration:none;
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.ourwork-involve-card:hover{
    transform:translateY(-4px);
    border-color:#D7C3AC;
    box-shadow:0 12px 30px rgba(47,43,39,.08);
}

.ourwork-involve-icon{
    width:42px;
    height:42px;
    margin-bottom:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--ow-soft);
    color:var(--ow-primary-dark);
    font-size:16px;
}

.ourwork-involve-card h3{
    margin:0 0 8px;
    color:var(--ow-secondary);
    font:700 17px/1.3 'Lora', serif !important;
}

.ourwork-involve-card p{
    margin:0;
    color:var(--ow-muted);
    font:400 12px/1.7 'Open Sans',sans-serif;
}

.ourwork-arrow{
    width:30px;
    height:30px;
    margin-top:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-top:1px solid var(--ow-line);
    color:var(--ow-primary-dark);
    font-size:11px;
    transition:transform .25s ease;
}

.ourwork-involve-card:hover .ourwork-arrow{transform:translateX(4px);}

/* =========================================================
   FINAL CTA — warm NGO close, not corporate-tech
========================================================= */

.ourwork-cta{
    position:relative;
    padding:82px 0;
    overflow:hidden;
    text-align:center;
    color:#fff;
    background:var(--ow-secondary);
}

.ourwork-cta-glow{display:none;}

.ourwork-cta-content{position:relative;z-index:2;max-width:700px;margin:auto;}

.ourwork-cta-content>span{
    display:inline-block;
    margin-bottom:14px;
    color:#E0A052;
    font:800 9px/1 'Lora', serif !important;
    letter-spacing:2px;
}

.ourwork-cta-content h2{
    margin:0;
    color:#fff;
    font:700 clamp(34px,4.5vw,50px)/1.08 'Lora', serif !important;
    letter-spacing:-1.3px;
}

.ourwork-cta-content h2 span{
    display:block;
    color:#E0A052;
    font-family:Georgia,serif;
    font-weight:400;
}

.ourwork-cta-content p{
    max-width:570px;
    margin:17px auto 27px;
    color:rgba(255,255,255,.76);
    font:400 14px/1.8 'Open Sans',sans-serif;
}

.ourwork-cta-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
}

.ourwork-cta-primary,
.ourwork-cta-secondary{
    min-height:45px;
    padding:0 21px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border-radius:7px;
    text-decoration:none;
    font:700 13px/1 'Lora', serif !important;
    transition:.25s ease;
}

.ourwork-cta-primary{
    color:#fff;
    background:var(--ow-primary);
}

.ourwork-cta-secondary{
    color:#fff;
    border:1px solid rgba(255,255,255,.25);
    background:transparent;
}

.ourwork-cta-primary:hover,
.ourwork-cta-secondary:hover{
    color:#fff;
    transform:translateY(-2px);
}

.ourwork-cta-primary:hover{background:var(--ow-primary-dark);}

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

@media(max-width:1000px){
    .ourwork-hero-grid{
        grid-template-columns:1fr;
        gap:20px;
        padding:10px 0 60px;
    }

    .ourwork-hero-content{
        padding:70px 0 10px;
        text-align:center;
    }

    .ourwork-hero-content>p{margin-left:auto;margin-right:auto;}
    .ourwork-hero-actions{justify-content:center;}
    .ourwork-hero-visual{min-height:400px;}

    .ourwork-intro-grid{
        grid-template-columns:1fr;
        gap:28px;
    }

    .ourwork-process-grid{
        grid-template-columns:1fr;
        gap:45px;
    }
}

@media(max-width:700px){
    .ourwork-hero{min-height:auto;}
    .ourwork-hero-grid{min-height:auto;}
    .ourwork-hero-content{padding:55px 0 5px;}
    .ourwork-hero h1{font-size:clamp(36px,10vw,50px);letter-spacing:-1.2px;}
    .ourwork-hero-content>p{font-size:14px;}
    .ourwork-hero-actions{flex-direction:column;align-items:stretch;}
    .ourwork-primary-btn,.ourwork-secondary-btn{width:100%;}

    .ourwork-hero-visual{min-height:370px;margin-top:8px;}
    .ourwork-photo-frame{height:350px;border-width:7px;}
    .ourwork-note-card{left:0;bottom:10px;width:190px;padding:15px;}
    .ourwork-photo-caption{left:22px;bottom:21px;}
    .ourwork-photo-caption strong{font-size:19px;}

    .ourwork-intro,
    .ourwork-focus,
    .ourwork-process,
    .ourwork-involve{padding:68px 0;}

    .ourwork-centered-heading{margin-bottom:34px;}

    .ourwork-focus-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

.ourwork-focus-card,
.ourwork-focus-card:nth-child(1),
.ourwork-focus-card:nth-child(2){
    min-height:auto;
    padding:20px 20px;
    border:1px solid #E8DDD0;
    border-radius:18px 5px 18px 5px;
}
.ourwork-card-heading{
    gap:12px;
    margin-bottom:13px;
}

.ourwork-focus-icon{
    flex-basis:40px;
    width:40px;
    height:40px;
}

.ourwork-focus-card h3{
    font-size:17px !important;
}

    .ourwork-focus-card:hover{
        transform:translateY(-3px);
    }

    .ourwork-focus-card p{
        padding-right:22px;
    }
    .ourwork-process-visual{min-height:320px;padding:34px 28px;}
    .ourwork-process-quote p{font-size:18px;}

    .ourwork-involve-grid{grid-template-columns:1fr;}
    .ourwork-cta{padding:68px 0;}
    .ourwork-cta-buttons{flex-direction:column;align-items:stretch;}
    .ourwork-cta-primary,.ourwork-cta-secondary{width:100%;}
}

@media(prefers-reduced-motion:reduce){
    .ourwork-page *,
    .ourwork-page *::before,
    .ourwork-page *::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important;
    }
}


/* Calm entrance motion */
.ourwork-page .ow-reveal{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .65s ease,transform .65s ease;
    transition-delay:var(--ow-delay,0ms);
}
.ourwork-page .ow-reveal.is-visible{
    opacity:1;
    transform:none;
}
@media(prefers-reduced-motion:reduce){
    .ourwork-page .ow-reveal{
        opacity:1;
        transform:none;
        transition:none;
    }
}