/* Liberation Foundation — Compassion Green design system (PHP build) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --background: 38 40% 97%;
  --foreground: 165 25% 12%;
  --card: 0 0% 100%;
  --muted: 38 30% 93%;
  --muted-fg: 165 12% 38%;
  --primary: 158 64% 28%;
  --primary-fg: 38 40% 97%;
  --primary-glow: 152 55% 45%;
  --secondary: 38 45% 92%;
  --accent: 35 85% 55%;
  --border: 38 25% 86%;
  --whatsapp: 142 70% 45%;
  --radius: 0.85rem;
  --shadow-soft: 0 4px 20px -8px hsl(165 30% 20% / .12);
  --shadow-elegant: 0 20px 50px -20px hsl(158 64% 20% / .25);
  --shadow-glow: 0 0 40px hsl(var(--primary-glow) / .4);
  --gradient-hero: linear-gradient(135deg, hsl(38 50% 96%) 0%, hsl(150 40% 90%) 60%, hsl(158 50% 80%) 100%);
  --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow)));
  --gradient-soft: linear-gradient(180deg, hsl(38 45% 97%), hsl(38 40% 94%));
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  line-height:1.55;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.01em;line-height:1.1}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

.container{width:100%;max-width:1180px;margin:0 auto;padding:0 1.25rem}

/* Header */
.header{position:fixed;inset:0 0 auto 0;z-index:40;transition:all .3s ease}
.header.scrolled{background:hsla(38,40%,97%,.88);backdrop-filter:blur(10px);border-bottom:1px solid hsl(var(--border));box-shadow:var(--shadow-soft)}
.header .row{display:flex;align-items:center;justify-content:space-between;height:72px;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:'Fraunces',serif;font-size:1.1rem;font-weight:600}
.brand .logo{display:grid;place-items:center;width:36px;height:36px;border-radius:999px;background:var(--gradient-primary);color:hsl(var(--primary-fg));box-shadow:var(--shadow-soft)}
.nav{display:none;gap:.25rem}
.nav a{padding:.5rem .85rem;border-radius:999px;font-size:.9rem;font-weight:500;color:hsl(var(--foreground)/.8);transition:all .3s}
.nav a:hover{background:hsl(var(--secondary));color:hsl(var(--foreground))}
.header-right{display:flex;align-items:center;gap:.5rem}
.lang{display:inline-flex;padding:2px;border:1px solid hsl(var(--border));background:hsl(var(--card));border-radius:999px;font-size:.72rem;font-weight:700}
.lang a{padding:.3rem .65rem;border-radius:999px;text-transform:uppercase;color:hsl(var(--muted-fg));transition:all .3s}
.lang a.active{background:hsl(var(--primary));color:hsl(var(--primary-fg));box-shadow:var(--shadow-soft)}
.menu-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid hsl(var(--border));background:hsl(var(--card))}
.mobile-nav{display:none;border-top:1px solid hsl(var(--border));background:hsla(38,40%,97%,.96);backdrop-filter:blur(8px)}
.mobile-nav.open{display:block}
.mobile-nav nav{display:flex;flex-direction:column;padding:.5rem 0}
.mobile-nav a{padding:.7rem 1.25rem;font-size:.95rem;font-weight:500;border-radius:.5rem}
.mobile-nav a:hover{background:hsl(var(--secondary))}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.15rem;border-radius:999px;font-size:.9rem;font-weight:600;transition:all .3s;border:1px solid transparent}
.btn-primary{background:var(--gradient-primary);color:hsl(var(--primary-fg));box-shadow:var(--shadow-soft)}
.btn-primary:hover{box-shadow:var(--shadow-glow);transform:translateY(-1px)}
.btn-outline{border-color:hsl(var(--primary)/.3);background:hsla(0,0%,100%,.6);backdrop-filter:blur(6px);color:hsl(var(--foreground))}
.btn-secondary{background:hsl(var(--card));color:hsl(var(--foreground));box-shadow:var(--shadow-soft)}
.btn-secondary:hover{background:hsla(0,0%,100%,.9)}
.btn-lg{padding:.85rem 1.35rem;font-size:.95rem}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--gradient-hero);padding:9rem 0 5rem;}
.hero::before,.hero::after{content:"";position:absolute;width:24rem;height:24rem;border-radius:999px;filter:blur(60px);pointer-events:none}
.hero::before{top:-6rem;right:-4rem;background:hsl(var(--primary-glow)/.3)}
.hero::after{bottom:-6rem;left:-4rem;background:hsl(var(--accent)/.2)}
.hero .grid{display:grid;gap:3rem;align-items:center;position:relative}
.eyebrow-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border:1px solid hsl(var(--primary)/.2);background:hsla(0,0%,100%,.7);backdrop-filter:blur(6px);color:hsl(var(--primary));border-radius:999px;font-size:.75rem;font-weight:500}
.hero h1{margin-top:1.4rem;font-size:clamp(2.4rem,6vw,4.5rem)}
.hero .sub{margin-top:1.3rem;max-width:34rem;color:hsl(var(--muted-fg));font-size:1.05rem}
.hero .cta{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.75rem}
.hero .stats{margin-top:2.2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;max-width:32rem}
.stat-card{padding:.75rem;border:1px solid hsl(var(--border));background:hsla(0,0%,100%,.6);backdrop-filter:blur(6px);border-radius:1rem;font-size:.85rem;font-weight:600}
.stat-card .dot{font-size:.7rem;color:hsl(var(--muted-fg));text-transform:uppercase;letter-spacing:.08em}
.hero-img-wrap{position:relative}
.hero-img-wrap::before{content:"";position:absolute;inset:-1rem;background:var(--gradient-primary);opacity:.2;filter:blur(40px);border-radius:2rem}
.hero-img{position:relative;border-radius:2rem;overflow:hidden;box-shadow:var(--shadow-elegant);border:1px solid hsl(var(--card))}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-caption{position:absolute;left:1rem;right:1rem;bottom:1rem;padding:1rem;background:hsla(0,0%,100%,.92);backdrop-filter:blur(6px);border-radius:1rem;font-size:.9rem;font-weight:500}

/* Sections */
section{padding:5rem 0}
.section-soft{background:var(--gradient-soft)}
.section-heading{text-align:center;max-width:46rem;margin:0 auto}
.section-heading .eyebrow{display:inline-block;font-size:.78rem;font-weight:600;color:hsl(var(--primary));text-transform:uppercase;letter-spacing:.14em;padding:.3rem .8rem;border-radius:999px;background:hsl(var(--primary)/.08)}
.section-heading h2{margin-top:.85rem;font-size:clamp(2rem,4vw,2.8rem)}
.section-heading p{margin-top:.85rem;color:hsl(var(--muted-fg));font-size:1.02rem}

/* About */
.about-grid{margin-top:3rem;display:grid;gap:2.5rem}
.about-text p+p{margin-top:1rem}
.about-text{color:hsl(var(--muted-fg));font-size:1.02rem}
.mission-card{border:1px solid hsl(var(--primary)/.15);background:var(--gradient-soft);padding:1.75rem;border-radius:1.5rem;box-shadow:var(--shadow-soft)}
.mission-card h3{font-size:1.5rem}
.mission-card p{margin-top:.75rem;color:hsl(var(--muted-fg))}
.values{margin-top:3.5rem;display:grid;gap:1rem;grid-template-columns:1fr}
.value{border:1px solid hsl(var(--border));background:hsl(var(--card));padding:1.5rem;border-radius:1.25rem;transition:all .3s}
.value:hover{transform:translateY(-4px);border-color:hsl(var(--primary)/.3);box-shadow:var(--shadow-elegant)}
.value .icon{display:grid;place-items:center;width:44px;height:44px;border-radius:.85rem;background:hsl(var(--primary)/.1);color:hsl(var(--primary));font-size:1.2rem}
.value:hover .icon{background:var(--gradient-primary);color:hsl(var(--primary-fg))}
.value h4{margin-top:1rem;font-size:1.15rem}
.value p{margin-top:.4rem;color:hsl(var(--muted-fg));font-size:.9rem}

/* Programs */
.programs-grid{margin-top:3.5rem;display:grid;gap:1.5rem;grid-template-columns:1fr}
.program{position:relative;overflow:hidden;border:1px solid hsl(var(--border));background:hsl(var(--card));padding:2rem;border-radius:1.75rem;box-shadow:var(--shadow-soft);transition:all .3s}
.program:hover{transform:translateY(-4px);box-shadow:var(--shadow-elegant)}
.program::before{content:"";position:absolute;top:-4rem;right:-4rem;width:12rem;height:12rem;border-radius:999px;background:hsl(var(--primary)/.05);transition:all .3s}
.program:hover::before{background:hsl(var(--primary)/.1)}
.program .icon{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:1rem;background:var(--gradient-primary);color:hsl(var(--primary-fg));box-shadow:var(--shadow-soft);font-size:1.4rem}
.program h3{position:relative;margin-top:1.4rem;font-size:1.6rem}
.program p{position:relative;margin-top:.75rem;color:hsl(var(--muted-fg))}
.support-link{position:relative;display:inline-flex;align-items:center;gap:.35rem;margin-top:1.4rem;color:hsl(var(--primary));font-weight:600;font-size:.9rem;transition:all .3s}
.support-link:hover{gap:.65rem}

/* Team */
.team-grid{margin-top:3.5rem;display:grid;gap:1.5rem;grid-template-columns:1fr}
.member{display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid hsl(var(--border));background:hsl(var(--card));padding:2rem;border-radius:1.75rem;box-shadow:var(--shadow-soft);transition:all .3s}
.member:hover{transform:translateY(-4px);box-shadow:var(--shadow-elegant)}
.avatar{display:grid;place-items:center;width:96px;height:96px;border-radius:999px;background:var(--gradient-primary);color:hsl(var(--primary-fg));font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600;box-shadow:var(--shadow-elegant)}
.member h3{margin-top:1.2rem;font-size:1.2rem}
.member .role{margin-top:.3rem;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:hsl(var(--primary))}

/* Gallery */
.gallery-grid{margin-top:3rem;display:grid;gap:.75rem;grid-template-columns:1fr}
.gallery figure{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:1rem;box-shadow:var(--shadow-soft)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery figure:hover img{transform:scale(1.05)}

/* Get involved */
.involved-grid{margin-top:3rem;display:grid;gap:1.5rem;grid-template-columns:1fr}
.involved-card{position:relative;overflow:hidden;border:1px solid hsl(var(--primary)/.2);background:var(--gradient-primary);color:hsl(var(--primary-fg));padding:2rem;border-radius:1.75rem;box-shadow:var(--shadow-elegant)}
.involved-card::before{content:"";position:absolute;top:-2.5rem;right:-2.5rem;width:11rem;height:11rem;border-radius:999px;background:hsla(0,0%,100%,.1);filter:blur(30px)}
.involved-card .icon{font-size:2rem}
.involved-card h3{margin-top:1.2rem;font-size:1.7rem}
.involved-card p{margin-top:.75rem;max-width:28rem;color:hsla(0,0%,100%,.92)}
.involved-card .btn{margin-top:1.4rem}

/* Contact */
.contact-grid{margin-top:3rem;display:grid;gap:2rem;grid-template-columns:1fr}
.contact-form{border:1px solid hsl(var(--border));background:hsl(var(--card));padding:1.75rem;border-radius:1.5rem;box-shadow:var(--shadow-soft)}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.85rem;font-weight:500;margin-bottom:.4rem}
.field input,.field select,.field textarea{
  width:100%;padding:.7rem .9rem;border:1px solid hsl(var(--border));background:hsl(var(--card));
  border-radius:.65rem;font:inherit;color:hsl(var(--foreground));transition:all .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:hsl(var(--primary));box-shadow:0 0 0 3px hsl(var(--primary)/.15)}
.field textarea{resize:vertical;min-height:120px}
.field-grid{display:grid;gap:1rem;grid-template-columns:1fr}
.error{margin-top:.3rem;font-size:.78rem;color:hsl(0 75% 48%)}
.form-actions{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.wa-link{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1rem;border:1px solid hsl(var(--whatsapp)/.3);background:hsl(var(--whatsapp)/.1);color:hsl(var(--whatsapp));border-radius:999px;font-size:.85rem;font-weight:600;transition:all .3s}
.wa-link:hover{background:hsl(var(--whatsapp)/.15)}
.alert-success{padding:1rem 1.25rem;border-radius:1rem;background:hsl(var(--primary)/.1);color:hsl(var(--primary));border:1px solid hsl(var(--primary)/.25);font-weight:600;margin-bottom:1.5rem}
.contact-aside{border:1px solid hsl(var(--primary)/.15);background:hsl(var(--card));padding:1.75rem;border-radius:1.5rem;box-shadow:var(--shadow-soft)}
.contact-aside h3{font-size:1.4rem}
.contact-aside ul{list-style:none;margin-top:1.4rem;display:flex;flex-direction:column;gap:1.1rem;font-size:.9rem}
.contact-aside li{display:flex;gap:.85rem;align-items:flex-start}
.contact-aside .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:.85rem;background:hsl(var(--primary)/.1);color:hsl(var(--primary));flex-shrink:0}
.contact-aside .ic.wa{background:hsl(var(--whatsapp)/.15);color:hsl(var(--whatsapp))}
.contact-aside .lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:hsl(var(--muted-fg))}
.contact-aside .val{font-weight:600;color:hsl(var(--foreground))}
.contact-aside a:hover{color:hsl(var(--primary))}

/* Footer */
footer{border-top:1px solid hsl(var(--border));background:hsl(var(--secondary)/.4);padding:3.5rem 0 1.5rem}
.footer-grid{display:grid;gap:2.5rem;grid-template-columns:1fr}
.footer h4{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em}
.footer ul{list-style:none;margin-top:1rem;display:flex;flex-direction:column;gap:.5rem;font-size:.88rem;color:hsl(var(--muted-fg))}
.footer ul a:hover, .footer ul button:hover{color:hsl(var(--primary))}
.footer .social{display:flex;gap:.5rem;margin-top:1.2rem}
.footer .social a{display:grid;place-items:center;width:36px;height:36px;border-radius:999px;border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--foreground)/.7);transition:all .3s}
.footer .social a:hover{border-color:hsl(var(--primary)/.4);color:hsl(var(--primary))}
.footer .tag{margin-top:1rem;max-width:20rem;font-size:.88rem;color:hsl(var(--muted-fg))}
.footer .copy{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid hsl(var(--border));text-align:center;font-size:.78rem;color:hsl(var(--muted-fg))}

/* WhatsApp floating */
.wa-fab{
  position:fixed;bottom:1.25rem;right:1.25rem;z-index:50;
  display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;border-radius:999px;
  background:hsl(var(--whatsapp));color:#fff;box-shadow:var(--shadow-elegant);
  font-weight:600;font-size:.88rem;transition:transform .2s;
  animation:wa-pulse 2s ease-out infinite;
}
.wa-fab:hover{transform:scale(1.05)}
.wa-fab svg{width:26px;height:26px;fill:currentColor}
@keyframes wa-pulse{
  0%,100%{box-shadow:0 0 0 0 hsl(var(--whatsapp) / .55), var(--shadow-elegant)}
  50%{box-shadow:0 0 0 14px hsl(var(--whatsapp) / 0), var(--shadow-elegant)}
}
@keyframes float-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.float-up{animation:float-up .7s ease-out both}

/* Responsive */
@media (min-width:640px){
  .values{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .field-grid{grid-template-columns:1fr 1fr}
  .wa-fab span{display:inline}
}
@media (min-width:900px){
  .nav{display:flex}
  .menu-btn{display:none}
  .hero .grid{grid-template-columns:1.1fr 1fr}
  .about-grid{grid-template-columns:1.2fr 1fr}
  .values{grid-template-columns:repeat(4,1fr)}
  .programs-grid{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .involved-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1.3fr 1fr}
  .footer-grid{grid-template-columns:repeat(3,1fr)}
}


/* =====================================
   MOBILE RESPONSIVE PATCH
   Liberation Foundation
===================================== */

/* Prevent horizontal scrolling */
*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

.container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding-left:16px;
    padding-right:16px;
}

/* Long text safety */
a,
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
div{
    overflow-wrap:break-word;
    word-wrap:break-word;
}

/* ========================
   Header
======================== */

.header .row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
}

.brand{
    min-width:0;
}

.nav{
    display:flex;
    gap:1rem;
}

.menu-btn{
    display:none;
}

/* ========================
   Hero
======================== */

.hero .grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2rem;
    align-items:center;
}

.hero h1{
    font-size:clamp(2rem,5vw,4rem);
    line-height:1.1;
}

.hero .sub{
    max-width:100%;
}

.cta{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:12px;
}

.stat-card{
    min-width:0;
}

/* ========================
   About
======================== */

.about-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:2rem;
}

.values{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1rem;
}

/* ========================
   Programs
======================== */

.programs-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1.5rem;
}

/* ========================
   Team
======================== */

.team-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:1.5rem;
}

/* ========================
   Gallery
======================== */

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
}

.gallery-grid figure{
    margin:0;
    overflow:hidden;
}

.gallery-grid img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ========================
   Involved
======================== */

.involved-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.5rem;
}

/* ========================
   Contact
======================== */

.contact-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:2rem;
}

.field-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
}

input,
textarea,
select{
    width:100%;
    max-width:100%;
}

.form-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.contact-aside ul{
    padding:0;
    margin:0;
}

.contact-aside li{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.contact-aside .val{
    word-break:break-word;
}

/* ========================
   Footer
======================== */

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:2rem;
}

.social{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
}

/* ========================
   Lucide Icons
======================== */

.icon i,
.ic i,
.logo i,
.btn i,
.eyebrow-pill i{
    width:18px;
    height:18px;
    stroke-width:2;
    vertical-align:middle;
    flex-shrink:0;
}

.logo i{
    width:24px;
    height:24px;
}

.btn i{
    margin-right:6px;
}

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

@media (max-width: 992px){

    .hero .grid{
        grid-template-columns:1fr;
    }

    .about-grid{
        grid-template-columns:1fr;
    }

    .contact-grid{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }

    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .involved-grid{
        grid-template-columns:1fr;
    }
}

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

@media (max-width: 768px){

    .nav{
        display:none;
    }

    .menu-btn{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .header .row{
        gap:.5rem;
    }

    .hero{
        padding-top:2rem;
    }

    .hero h1{
        font-size:2rem;
    }

    .cta{
        flex-direction:column;
        align-items:stretch;
    }

    .cta .btn{
        width:100%;
        justify-content:center;
    }

    .stats{
        grid-template-columns:1fr;
    }

    .field-grid{
        grid-template-columns:1fr;
    }

    .gallery-grid{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:1fr;
    }

    .values{
        grid-template-columns:1fr;
    }

    .programs-grid{
        grid-template-columns:1fr;
    }

    .team-grid{
        grid-template-columns:1fr;
    }

    .contact-aside li{
        flex-wrap:wrap;
    }

    .wa-fab span{
        display:none;
    }
}

/* =====================================
   EXTRA SMALL DEVICES
===================================== */

@media (max-width: 480px){

    .container{
        padding-left:12px;
        padding-right:12px;
    }

    

    .btn{
        width:100%;
    }

    .hero-caption{
        font-size:.9rem;
    }

    .member,
    .program,
    .value,
    .involved-card{
        padding:1rem;
    }
}