/* ── Hero Landscape ── */
.hero { position: relative; min-height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 25%, var(--sky-low) 55%, var(--horizon) 75%, #f5d88e 90%, #fbe8c3 100%); }
.sun { position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%); width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, #fffbe6 0%, #f5c842 30%, #e8734a 60%, transparent 70%); filter: blur(2px); animation: sunPulse 6s ease-in-out infinite; }
@keyframes sunPulse { 0%, 100% { transform: translateX(-50%) scale(1); opacity: .9; } 50% { transform: translateX(-50%) scale(1.08); opacity: 1; } }

.stars { position: absolute; top: 0; left: 0; right: 0; height: 40%; pointer-events: none; }
.star { position: absolute; width: 2px; height: 2px; background: white; border-radius: 50%; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }

.mountains { position: absolute; bottom: 18%; left: 0; right: 0; height: 180px; }
.mountains svg { position: absolute; bottom: 0; width: 100%; height: 100%; }

.grass-far { position: absolute; bottom: 0; left: 0; right: 0; height: 22%; background: var(--meadow-dark); }
.grass-mid { position: absolute; bottom: 0; left: 0; right: 0; height: 18%; background: var(--meadow); }
.grass-near { position: absolute; bottom: 0; left: 0; right: 0; height: 12%; background: var(--meadow-light); }
.grass-blades { position: absolute; bottom: 0; left: 0; right: 0; height: 120px; pointer-events: none; z-index: 6; }
.blade { 
    position: absolute; bottom: 0; width: 3px; 
    background: linear-gradient(to top, var(--meadow-light), #7cc06d); 
    border-radius: 2px 2px 0 0; transform-origin: bottom center; 
    animation: sway var(--dur, 3s) ease-in-out var(--delay, 0s) infinite;
    will-change: transform;
}
@keyframes sway { 0%, 100% { transform: rotate(var(--r1, -5deg)); } 50% { transform: rotate(var(--r2, 5deg)); } }

/* ── Horse Animation ── */
.horse-container { 
    position: absolute; bottom: 8%; z-index: 6; 
    animation: horseGallop 12s ease-in-out infinite; 
    will-change: transform; 
}
@keyframes horseGallop { 
    0% { transform: translateX(-15vw) translateY(0); } 
    50% { transform: translateX(0vw) translateY(-15px); } 
    100% { transform: translateX(115vw) translateY(0); } 
}
.horse-img { width: 260px; height: auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,.35)); }

/* ── Hero Content ── */
.hero-content { position: relative; z-index: 10; text-align: center; padding: 0 2rem; padding-top: 5rem; }
.hero-badge { 
    display: inline-flex; align-items: center; gap: .5rem; 
    background: rgba(255,255,255,.15); backdrop-filter: blur(12px); 
    border: 1px solid rgba(255,255,255,.2); padding: .5rem 1.2rem; 
    border-radius: 2rem; font-size: .72rem; font-weight: 700; 
    color: var(--gold-light); text-transform: uppercase; letter-spacing: .1em; 
    margin-bottom: 1.5rem; animation: fadeDown .8s ease .2s both; 
}
@keyframes fadeDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

.hero h1 { 
    font-family: var(--font-display); 
    font-size: clamp(2.4rem, 8vw, 4.5rem); 
    line-height: 1.08; color: var(--white); 
    text-shadow: 0 4px 30px rgba(0,0,0,.4); margin-bottom: 1rem; 
    font-weight: 700; animation: fadeDown 1s ease .4s both; 
}
.hero h1 .glow { color: var(--gold-light); text-shadow: 0 0 40px rgba(232,168,73,.4); }
.hero p { 
    font-size: 1.15rem; line-height: 1.7; color: rgba(255,255,255,.85); 
    max-width: 560px; margin: 0 auto 2.5rem; font-weight: 300; 
    text-shadow: 0 2px 12px rgba(0,0,0,.3); animation: fadeDown 1s ease .6s both; 
}
.hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; animation: fadeDown 1s ease .8s both; }
.btn-glass { 
    background: rgba(255,255,255,.18); backdrop-filter: blur(8px); 
    border: 2px solid rgba(255,255,255,.45); color: var(--white); 
    padding: .9rem 2.2rem; border-radius: 2rem; font-weight: 700; 
    font-size: .9rem; transition: all .3s; display: inline-block; 
}
.btn-glass:hover { background: rgba(255,255,255,.3); transform: translateY(-3px); }

.scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; flex-direction: column; align-items: center; gap: .5rem; animation: fadeDown 1s ease 1.2s both; }
.scroll-hint span { font-size: .7rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .12em; }
.scroll-mouse { width: 22px; height: 34px; border: 2px solid rgba(255,255,255,.3); border-radius: 11px; position: relative; }
.scroll-mouse::after { 
    content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); 
    width: 3px; height: 8px; background: rgba(255,255,255,.5); border-radius: 2px; 
    animation: scrollDot 2s ease-in-out infinite; 
}
@keyframes scrollDot { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; } 50% { transform: translateX(-50%) translateY(10px); opacity: 0; } }

/* ── Home-Specific Sections ── */
.wave-transition { position: relative; height: 80px; background: var(--cream); margin-top: -1px; text-align: center; }
.wave-transition img { height: 80px; width: auto; margin: 0 auto; }

.mission-home { padding: 5rem 4rem; text-align: center; background: var(--cream); }
.mission-inner { max-width: 700px; margin: 0 auto; }
.mission-icon { font-size: 2.5rem; margin-bottom: 1rem; display: inline-block; animation: float 4s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.mission-home blockquote { font-family: var(--font-display); font-size: 1.8rem; font-style: italic; color: var(--bark); line-height: 1.45; margin-bottom: 1rem; }
.mission-home cite { font-style: normal; font-family: var(--font-body); font-size: .85rem; color: var(--muted); letter-spacing: .05em; }

.services-home { padding: 5rem 4rem; background: var(--white); }
.services-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1000px; margin: 3rem auto 0; }

.impact-home { padding: 5rem 4rem; background: linear-gradient(135deg, var(--meadow-dark), var(--meadow)); position: relative; overflow: hidden; text-align: center; }
.impact-home .section-title, .impact-home .section-eyebrow { color: var(--white); }
.impact-home .section-eyebrow { color: var(--gold-light); }
.impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; max-width: 900px; margin: 3rem auto 0; }
.impact-stat { 
    text-align: center; padding: 2rem; border: 1px solid rgba(255,255,255,.1); 
    border-radius: 1rem; background: rgba(255,255,255,.05); 
    backdrop-filter: blur(4px); transition: all .3s; 
}
.impact-num { font-family: var(--font-display); font-size: 3.2rem; color: var(--gold-light); font-weight: 700; }
.impact-label { font-size: .78rem; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .08em; margin-top: .3rem; }

.testimonial-home { padding: 5rem 4rem; background: var(--white); text-align: center; }
.testi-wrap { 
    max-width: 650px; margin: 2rem auto 0; background: var(--cream); 
    border-radius: 1.5rem; padding: 3rem; position: relative; box-shadow: 0 8px 40px rgba(0,0,0,.04); 
}
.testi-wrap::before { content: '"'; font-family: var(--font-display); font-size: 7rem; color: var(--gold); opacity: .2; position: absolute; top: -.5rem; left: 1.5rem; line-height: 1; }
.testi-wrap blockquote { font-family: var(--font-display); font-size: 1.25rem; font-style: italic; color: var(--bark); line-height: 1.6; margin-bottom: 1.5rem; position: relative; z-index: 1; }

.volunteer-strip { padding: 4rem; background: var(--cream); display: flex; align-items: center; justify-content: center; gap: 3rem; flex-wrap: wrap; }
.volunteer-strip-text { max-width: 420px; }
.volunteer-strip-text h3 { font-family: var(--font-display); font-size: 1.8rem; color: var(--bark); margin-bottom: .6rem; }

@media(max-width:900px){
    .services-cards, .impact-grid { grid-template-columns: 1fr 1fr; }
    .mission-home, .services-home, .impact-home, .testimonial-home, .volunteer-strip { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media(max-width:600px){
    .services-cards { grid-template-columns: 1fr; }
    .impact-grid { grid-template-columns: 1fr 1fr; }
    .hero-btns { flex-direction: column; align-items: center; }
    .volunteer-strip { flex-direction: column; text-align: center; }
}