:root{
  --primary:#064E3B;
  --primary-dark:#042f24;
  --secondary:#D97706;
  --accent:#FCD34D;
  --bg:#FDFCF5;
  --surface:#fff;
  --text:#374151;
  --muted:#6B7280;
  --error:#DC2626;
  --success:#16A34A;

  --shadow-sm:0 1px 3px rgba(0,0,0,.10);
  --shadow-md:0 4px 14px rgba(0,0,0,.08);
  --shadow-lg:0 10px 40px rgba(0,0,0,.12);
}

.dark{
  --bg:#0f172a;
  --surface:#1e293b;
  --text:#e2e8f0;
  --muted:#94a3b8;

  --shadow-sm:0 1px 3px rgba(0,0,0,.30);
  --shadow-md:0 4px 14px rgba(0,0,0,.30);
  --shadow-lg:0 10px 40px rgba(0,0,0,.50);
}

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Lato',sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  transition:background-color .3s,color .3s;
}
h1,h2,h3{font-family:'Playfair Display',serif}
img{max-width:100%;height:auto;display:block}

/* A11y */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip-link{
  position:absolute;top:-100%;left:50%;transform:translateX(-50%);
  background:var(--primary);color:#fff;
  padding:.75rem 1.5rem;border-radius:0 0 .5rem .5rem;
  z-index:9999;text-decoration:none;
  transition:top .2s;
}
.skip-link:focus{top:0;outline:3px solid var(--accent)}
:focus-visible{outline:3px solid var(--secondary);outline-offset:3px}

.noscript-banner{
  background:var(--secondary);
  color:#fff;
  padding:1rem;
  text-align:center;
}

/* Layout */
.container{max-width:1280px;margin:0 auto;padding:0 1rem}
@media(min-width:1024px){.container{padding:0 2.5rem}}
.section{padding:4rem 0}
@media(min-width:768px){.section{padding:6rem 0}}
.section-alt{background:var(--bg)}
.section-white{background:var(--surface)}
.center{text-align:center;margin-top:3rem}

/* Header */
.header{
  position:sticky;top:0;z-index:100;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  transition:background-color .3s;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:5rem}
.header-actions{display:flex;align-items:center;gap:.5rem}

.logo{
  display:flex;align-items:center;gap:.75rem;
  font-size:1.25rem;font-weight:700;
  font-family:'Playfair Display',serif;
  color:var(--primary);
  text-decoration:none;
}
.dark .logo{color:var(--accent)}
.logo-img{object-fit:contain}

.nav-desktop{display:none}
@media(min-width:1024px){.nav-desktop{display:flex;align-items:center;gap:2rem}}

.nav-link{
  color:var(--primary);
  text-decoration:none;
  font-weight:500;
  padding:.5rem 0;
  transition:color .2s;
}
.dark .nav-link{color:var(--text)}
.nav-link:hover{color:var(--secondary)}

.nav-cta,.btn-primary{
  padding:.625rem 1.5rem;
  background:var(--secondary);
  color:#fff;
  border-radius:9999px;
  font-weight:600;
  text-decoration:none;
  border:none;
  cursor:pointer;
  display:inline-block;
  transition:all .2s;
}
.nav-cta:hover,.btn-primary:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(217,119,6,.30);
}

.nav-donate{
  padding:.625rem 1.5rem;
  background:transparent;
  border:2px solid var(--secondary);
  color:var(--secondary);
  border-radius:9999px;
  font-weight:600;
  text-decoration:none;
  transition:all .2s;
}
.nav-donate:hover{background:var(--secondary);color:#fff}

/* Mobile nav */
.menu-btn,.theme-btn{
  display:flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;
  background:transparent;border:none;
  color:var(--primary);
  cursor:pointer;border-radius:.5rem;
}
.dark .menu-btn,.dark .theme-btn{color:var(--text)}
@media(min-width:1024px){.menu-btn{display:none}}

.mobile-nav{
  display:none;
  position:absolute;
  top:5rem;left:0;right:0;
  background:var(--surface);
  box-shadow:var(--shadow-lg);
  padding:1rem;
  z-index:99;
}
.mobile-nav.open{display:block}
@media(min-width:1024px){.mobile-nav{display:none!important}}

.mobile-nav a{
  display:block;padding:1rem;
  color:var(--primary);
  text-decoration:none;font-weight:500;
  text-align:center;border-radius:.5rem;
}
.dark .mobile-nav a{color:var(--text)}
.mobile-nav a:hover{background:rgba(0,0,0,.05)}

/* Hero */
.hero{
  background:
    linear-gradient(135deg,rgba(6,78,59,.92),rgba(0,0,0,.70)),
    url('assets/hero-bg.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:var(--primary);
}
.hero-content{
  text-align:center;
  max-width:56rem;
  margin:0 auto;
  padding:4rem 1rem;
}
@media(min-width:768px){.hero{padding:8rem 0}.hero-content{padding:0 1rem}}
.hero h1{
  font-size:clamp(2rem,5vw,3.75rem);
  font-weight:800;
  margin-bottom:1.5rem;
  animation:fadeUp .8s ease-out;
  color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.30);
}
.hero p{
  font-size:clamp(1.125rem,2.5vw,1.5rem);
  font-weight:300;
  opacity:.95;
  max-width:48rem;
  margin:0 auto 2.5rem;
  animation:fadeUp .8s ease-out .1s both;
  color:#e2e8f0;
}
.hero-btns{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  animation:fadeUp .8s ease-out .2s both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.btn-primary{
  padding:1rem 2rem;
  font-size:1.125rem;
}
.btn-secondary{
  padding:1rem 2rem;
  background:#fff;
  color:var(--primary);
  font-size:1.125rem;
  font-weight:600;
  border-radius:9999px;
  text-decoration:none;
  transition:all .2s;
  box-shadow:0 4px 14px rgba(0,0,0,.20);
}
.btn-secondary:hover{background:#f3f4f6;transform:translateY(-2px)}

/* Typography */
.section-title{
  font-size:clamp(1.75rem,4vw,2.5rem);
  color:var(--primary);
  text-align:center;
  margin-bottom:1rem;
}
.dark .section-title{color:var(--accent)}
.section-title::after{
  content:'';
  display:block;
  width:5rem;height:4px;
  background:var(--secondary);
  margin:.75rem auto 0;
  border-radius:2px;
}
.section-subtitle{
  text-align:center;
  font-size:1.125rem;
  color:var(--muted);
  max-width:48rem;
  margin:0 auto 3rem;
}
.section-mini-title{
  font-size:1.5rem;
  color:var(--primary);
  margin-bottom:1rem;
}
.dark .section-mini-title{color:var(--accent)}

/* Grids */
.grid-2{display:grid;gap:3rem}
@media(min-width:1024px){.grid-2{grid-template-columns:1fr 1fr;align-items:center}}
.grid-3{display:grid;gap:2rem}
@media(min-width:768px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-4{display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr)}}

/* Cards */
.card{
  background:var(--surface);
  border-radius:1rem;
  padding:2rem;
  box-shadow:var(--shadow-md);
  border-top:4px solid var(--secondary);
  transition:transform .3s,box-shadow .3s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card h3{font-size:1.375rem;color:var(--primary);margin-bottom:.75rem}
.dark .card h3{color:var(--accent)}
.card p{color:var(--muted);margin-bottom:1rem}
.card ul{list-style:disc;padding-left:1.25rem;color:var(--muted);font-size:.9375rem}

/* Stats */
.stat-card{
  background:var(--primary);
  color:#fff;
  padding:1.5rem;
  border-radius:1rem;
  text-align:center;
  box-shadow:0 4px 20px rgba(6,78,59,.30);
  transition:transform .3s;
}
.stat-card:hover{transform:scale(1.05)}
.stat-value{font-size:1.75rem;font-weight:700;font-family:'Playfair Display',serif}
.stat-label{font-size:.875rem;opacity:.9;margin-top:.25rem}

/* Images */
.img-box{
  background:linear-gradient(135deg,var(--primary),#053529);
  border-radius:1rem;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.img-cover{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.img-box:hover .img-cover{transform:scale(1.03)}

/* Icons */
.icon{width:2.5rem;height:2.5rem;color:var(--secondary);margin-bottom:1rem}
.icon-sm{width:1.5rem;height:1.5rem;color:var(--secondary);flex-shrink:0}
.icon-stat{width:3rem;height:3rem;color:var(--accent);margin-bottom:.75rem}

/* Lists */
.text-content p{margin-bottom:1rem;font-size:1.125rem}
.feature-list{margin-top:1.5rem}
.feature-list li{
  display:flex;align-items:center;gap:.75rem;
  margin-bottom:.75rem;font-weight:500;
  list-style:none;
}

/* Schedule */
.schedule-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2rem}
.schedule-item{
  background:var(--bg);
  padding:1rem;
  border-radius:.75rem;
  text-align:center;
  border:1px solid rgba(0,0,0,.05);
}
.schedule-time{font-weight:700;color:var(--primary);margin-bottom:.25rem}
.dark .schedule-time{color:var(--accent)}
.schedule-label{font-size:.875rem;color:var(--muted)}

/* Steps */
.step{
  background:var(--surface);
  padding:1.5rem;
  border-radius:1rem;
  box-shadow:var(--shadow-md);
  border-bottom:4px solid var(--secondary);
}
.step-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}
.step-num{
  width:2.5rem;height:2.5rem;
  background:var(--secondary);
  color:#fff;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;flex-shrink:0;
}
.step h3{font-size:1.25rem;color:var(--primary)}
.dark .step h3{color:var(--accent)}
.step p{color:var(--muted)}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:768px){.gallery-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
@media(min-width:1024px){.gallery-grid{grid-template-columns:repeat(4,1fr)}}

.gallery-item{
  position:relative;
  border-radius:.75rem;
  overflow:hidden;
  aspect-ratio:1;
  cursor:pointer;
  box-shadow:var(--shadow-md);
}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.gallery-item:hover img{transform:scale(1.1)}
.gallery-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.30);
  opacity:0;
  transition:opacity .3s;
  display:flex;align-items:center;justify-content:center;
}
.gallery-item:hover .gallery-overlay{opacity:1}
.zoom-icon{color:#fff;width:2rem;height:2rem}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.90);
  display:none;
  align-items:center;justify-content:center;
  padding:1rem;
  backdrop-filter:blur(5px);
}
.lightbox.active{display:flex;animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.lightbox-content{
  max-width:100%;
  max-height:90vh;
  border-radius:.5rem;
  box-shadow:0 0 20px rgba(0,0,0,.50);
}
.lightbox-close{
  position:absolute;top:1.5rem;right:1.5rem;
  background:rgba(255,255,255,.10);
  border:none;color:#fff;
  width:3rem;height:3rem;border-radius:50%;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
  font-size:1.75rem;
  line-height:1;
}
.lightbox-close:hover{background:rgba(255,255,255,.20)}

/* Donation */
.donation-section{
  background:linear-gradient(135deg,#064E3B 0%,#042f24 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.donation-section::before{
  content:"";
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.donation-content{position:relative;z-index:1;text-align:center;max-width:48rem;margin:0 auto}
.donation-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.75rem,4vw,2.5rem);
  margin-bottom:1rem;
}
.donation-subtitle{font-size:1.125rem;margin-bottom:2rem;opacity:.9}
.donation-highlight{
  background:rgba(255,255,255,.10);
  padding:2rem;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.20);
  margin-top:2rem;
  backdrop-filter:blur(4px);
}
.donation-card-title{font-size:1.25rem;margin-bottom:.5rem}
.donation-card-subtitle{margin-bottom:1.5rem;font-size:.9rem;opacity:.8}
.donation-btn{display:inline-block}

/* Contact */
.contact-section{background:var(--surface);padding:4rem 0}
@media(min-width:768px){.contact-section{padding:6rem 0}}
.contact-grid{display:grid;gap:3rem}
@media(min-width:1024px){.contact-grid{grid-template-columns:1fr 2fr}}

.contact-info h3{font-size:1.875rem;color:var(--primary);margin-bottom:1rem}
.dark .contact-info h3{color:var(--accent)}
.contact-info p{opacity:.9;margin-bottom:1.5rem;max-width:20rem;color:var(--muted)}
.contact-list{list-style:none}
.contact-item{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1rem;color:var(--text)}
.contact-item a{color:var(--primary);text-decoration:none;font-weight:500}
.dark .contact-item a{color:var(--accent)}
.contact-item a:hover{text-decoration:underline}

/* Form */
.contact-form{
  background:var(--bg);
  padding:2rem;
  border-radius:1rem;
  box-shadow:var(--shadow-lg);
}
.contact-form h3{font-size:1.5rem;color:var(--primary);margin-bottom:1.5rem}
.dark .contact-form h3{color:var(--accent)}

.form-group{margin-bottom:1.25rem}
.form-label{display:block;font-weight:500;color:var(--text);margin-bottom:.375rem;font-size:.9375rem}
.form-input{
  width:100%;
  padding:.875rem 1rem;
  border:1px solid #d1d5db;
  border-radius:.5rem;
  font-size:1rem;
  font-family:inherit;
  transition:border-color .2s,box-shadow .2s;
  background:var(--surface);
  color:var(--text);
}
.dark .form-input{border-color:#4b5563}
.form-input:focus{
  outline:none;
  border-color:var(--secondary);
  box-shadow:0 0 0 3px rgba(217,119,6,.20);
}

.form-error{color:var(--error);font-size:.875rem;margin-top:.375rem;display:none}
.form-error.show{display:block}
.form-fail{margin-top:1rem}
.form-success{
  color:var(--success);
  font-size:.9375rem;
  margin-top:1rem;
  display:none;
  padding:1rem;
  background:rgba(22,163,74,.10);
  border-radius:.5rem;
}
.form-success.show{display:block}

.form-submit{
  width:100%;
  padding:1rem;
  background:var(--secondary);
  color:#fff;
  font-size:1rem;
  font-weight:600;
  border:none;
  border-radius:.5rem;
  cursor:pointer;
  transition:filter .2s;
}
.form-submit:hover{filter:brightness(1.1)}
.form-submit:disabled{opacity:.7;cursor:not-allowed}

.hp-field{position:absolute;left:-9999px}

/* Footer */
.footer{background:#1f2937;color:#fff;padding:2rem 0;text-align:center}
.footer p{font-size:.875rem;opacity:.8}
.footer-non-profit{font-size:.75rem;opacity:.6;margin-top:.5rem}

/* Print & reduced motion */
@media print{
  .header,.hero-btns,.nav-cta,.theme-btn,.menu-btn,.contact-form{display:none}
  .hero{min-height:auto;padding:2rem 0}
  .section{padding:2rem 0}
  body{color:#000;background:#fff}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}