/* ============================================
   FreeFromFaith — Image-Centric Design
   Aesthetic: Organic Luxury / Visual Immersion
   ============================================ */

:root {
    --bg-deep: #0a0a08;
    --bg-surface: #141410;
    --bg-elevated: #1e1e18;
    --text-primary: #f5f0e8;
    --text-secondary: #a89f8f;
    --text-muted: #6b6358;
    --accent-warm: #c4956a;
    --accent-glow: #e8b88a;
    --accent-sage: #7a9e7e;
    --border: rgba(168,159,143,0.12);
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 40px;
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Outfit', sans-serif;
    --ease-out: cubic-bezier(0.16,1,0.3,1);
    --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--bg-deep); color: var(--text-primary); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
.container { max-width:1200px; margin:0 auto; padding:0 clamp(1.5rem,4vw,3rem); }
img { display:block; width:100%; height:100%; object-fit:cover; }

/* Grain */
.grain-overlay { position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:0.025; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cursor-glow { position:fixed; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(196,149,106,0.05) 0%,transparent 70%); pointer-events:none; z-index:1; transform:translate(-50%,-50%); }

/* NAV */
.nav { position:fixed; top:0; left:0; right:0; z-index:1000; padding:1.5rem 0; transition:all 0.4s var(--ease-out); }
.nav.scrolled { padding:1rem 0; background:rgba(10,10,8,0.92); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }
.nav-inner { max-width:1200px; margin:0 auto; padding:0 clamp(1.5rem,4vw,3rem); display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:0.75rem; text-decoration:none; color:var(--text-primary); }
.logo-mark { font-size:1.5rem; color:var(--accent-warm); animation:breathe 4s ease-in-out infinite; }
@keyframes breathe { 0%,100%{transform:scale(1);opacity:0.8} 50%{transform:scale(1.1);opacity:1} }
.logo-text { font-family:var(--font-display); font-size:1.5rem; font-weight:300; letter-spacing:0.03em; }
.nav-links { display:flex; align-items:center; gap:2.5rem; }
.nav-links a { text-decoration:none; color:var(--text-secondary); font-size:0.875rem; font-weight:300; transition:color 0.3s; }
.nav-links a:hover { color:var(--text-primary); }
.nav-cta { padding:0.6rem 1.5rem !important; border:1px solid var(--accent-warm); border-radius:var(--radius-xl); color:var(--accent-warm) !important; transition:all 0.3s !important; }
.nav-cta:hover { background:var(--accent-warm); color:var(--bg-deep) !important; }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span { width:24px; height:1.5px; background:var(--text-primary); }
.mobile-menu { position:fixed; inset:0; z-index:999; background:rgba(10,10,8,0.98); backdrop-filter:blur(30px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.4s; }
.mobile-menu.active { opacity:1; pointer-events:all; }
.mobile-menu-inner { display:flex; flex-direction:column; align-items:center; gap:2rem; }
.mobile-menu-inner a { font-family:var(--font-display); font-size:2rem; color:var(--text-primary); text-decoration:none; font-weight:300; }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.9rem 2rem; border-radius:var(--radius-xl); text-decoration:none; font-size:0.9rem; font-weight:400; transition:all 0.3s var(--ease-out); cursor:pointer; border:none; font-family:var(--font-body); }
.btn-primary { background:var(--accent-warm); color:var(--bg-deep); }
.btn-primary:hover { background:var(--accent-glow); transform:translateY(-2px); box-shadow:0 10px 40px rgba(196,149,106,0.3); }
.btn-secondary { background:transparent; color:var(--accent-warm); border:1px solid var(--accent-warm); }
.btn-secondary:hover { background:rgba(196,149,106,0.1); transform:translateY(-2px); }
.btn-glass { background:rgba(255,255,255,0.08); color:var(--text-primary); border:1px solid rgba(255,255,255,0.15); backdrop-filter:blur(10px); }
.btn-glass:hover { background:rgba(255,255,255,0.15); transform:translateY(-2px); }

/* HERO — Full viewport image */
.hero { position:relative; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-media { position:absolute; inset:0; }
.hero-img { width:100%; height:100%; object-fit:cover; transform:scale(1.05); animation:heroZoom 20s ease-in-out infinite alternate; }
@keyframes heroZoom { from{transform:scale(1.05)} to{transform:scale(1.12)} }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(10,10,8,0.3) 0%, rgba(10,10,8,0.6) 50%, rgba(10,10,8,0.9) 100%); }
.hero-content { position:relative; z-index:2; text-align:center; padding:2rem; }
.hero-eyebrow { font-size:0.8rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent-glow); margin-bottom:2rem; font-weight:300; }
.hero-title { font-family:var(--font-display); font-size:clamp(3.5rem,10vw,8rem); font-weight:300; line-height:1.1; margin-bottom:1.5rem; }
.hero-subtitle { font-size:clamp(1rem,2vw,1.3rem); color:var(--text-secondary); max-width:550px; margin:0 auto 3rem; font-weight:200; }
.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.hero-scroll { position:absolute; bottom:3rem; left:50%; transform:translateX(-50%); }
.scroll-line { width:1px; height:50px; background:linear-gradient(to bottom,var(--accent-warm),transparent); animation:scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{opacity:1;transform:scaleY(1)} 50%{opacity:0.4;transform:scaleY(0.5)} }

/* ABOUT — Split image/text */
.about { padding:0; }
.split-section { display:grid; grid-template-columns:1.2fr 1fr; min-height:80vh; }
.split-image { overflow:hidden; position:relative; }
.split-image img { height:100%; min-height:500px; transition:transform 0.6s var(--ease-out); }
.split-image:hover img { transform:scale(1.03); }
.split-content { display:flex; flex-direction:column; justify-content:center; padding:clamp(3rem,6vw,6rem); gap:1.5rem; }
.split-content p { color:var(--text-secondary); font-weight:200; line-height:1.8; font-size:1.05rem; }
.section-label { font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent-warm); font-weight:400; }
.section-title { font-family:var(--font-display); font-size:clamp(2.5rem,5vw,4rem); font-weight:300; line-height:1.15; }

/* IMPACT MOSAIC */
.impact-mosaic { padding:6rem clamp(1.5rem,4vw,3rem); }
.mosaic-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; grid-template-rows:300px 300px; gap:1rem; max-width:1200px; margin:0 auto; }
.mosaic-item { position:relative; border-radius:var(--radius-md); overflow:hidden; }
.mosaic-item img { transition:transform 0.6s var(--ease-out); }
.mosaic-item:hover img { transform:scale(1.05); }
.mosaic-large { grid-row:1/3; }
.mosaic-stat { position:absolute; bottom:0; left:0; right:0; padding:2rem; background:linear-gradient(to top,rgba(10,10,8,0.85) 0%,transparent 100%); }
.stat-number { font-family:var(--font-display); font-size:2.5rem; font-weight:300; color:var(--accent-warm); }
.stat-suffix { font-family:var(--font-display); font-size:2rem; color:var(--accent-warm); }
.stat-label { display:block; font-size:0.8rem; color:var(--text-secondary); margin-top:0.25rem; font-weight:300; }

/* PROGRAMS — Horizontal scroll cards */
.programs { padding:8rem 0 4rem; }
.programs .container { margin-bottom:3rem; }
.programs-scroll { display:flex; gap:1.5rem; padding:0 clamp(1.5rem,4vw,3rem); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:2rem; }
.programs-scroll::-webkit-scrollbar { display:none; }
.program-card { flex:0 0 340px; scroll-snap-align:start; border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-surface); border:1px solid var(--border); transition:all 0.4s var(--ease-out); }
.program-card:hover { transform:translateY(-6px); box-shadow:0 30px 60px rgba(0,0,0,0.4); border-color:rgba(196,149,106,0.2); }
.program-img { height:220px; overflow:hidden; }
.program-img img { transition:transform 0.6s var(--ease-out); }
.program-card:hover .program-img img { transform:scale(1.08); }
.program-info { padding:2rem; }
.program-info h3 { font-family:var(--font-display); font-size:1.5rem; font-weight:400; margin-bottom:0.75rem; }
.program-info p { color:var(--text-secondary); font-weight:200; line-height:1.7; font-size:0.9rem; margin-bottom:0.75rem; }
.program-meta { font-size:0.75rem; color:var(--text-muted); letter-spacing:0.02em; }

/* PARALLAX BREAK */
.parallax-break { position:relative; height:70vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.parallax-img { position:absolute; inset:-10%; width:120%; height:120%; object-fit:cover; }
.parallax-overlay { position:absolute; inset:0; background:rgba(10,10,8,0.7); }
.parallax-quote { position:relative; z-index:2; text-align:center; padding:2rem; }
.parallax-quote p { font-family:var(--font-display); font-size:clamp(2rem,4vw,3.5rem); font-weight:300; font-style:italic; line-height:1.4; max-width:800px; margin:0 auto 1.5rem; }
.parallax-quote cite { font-style:normal; font-size:1rem; color:var(--text-muted); font-weight:300; }

/* STORIES — Photo grid */
.stories { padding:8rem 0; }
.stories .container { margin-bottom:3rem; }
.stories-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; padding:0 clamp(1.5rem,4vw,3rem); max-width:1200px; margin:0 auto; }
.story-item { border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-surface); border:1px solid var(--border); transition:all 0.4s var(--ease-out); }
.story-item:hover { transform:translateY(-4px); border-color:rgba(196,149,106,0.2); }
.story-img { height:250px; overflow:hidden; }
.story-img img { transition:transform 0.6s var(--ease-out); }
.story-item:hover .story-img img { transform:scale(1.05); }
.story-content { padding:2rem; }
.story-quote { font-family:var(--font-display); font-size:1.15rem; font-weight:300; font-style:italic; line-height:1.6; margin-bottom:1.5rem; color:var(--text-primary); }
.story-meta { display:flex; flex-direction:column; gap:0.2rem; }
.story-meta strong { font-weight:500; font-size:0.9rem; }
.story-meta span { font-size:0.8rem; color:var(--text-muted); }

/* COMMUNITY GALLERY */
.community { padding:8rem 0; }
.community .container { margin-bottom:3rem; }
.community-stats { text-align:center; font-size:1.1rem; color:var(--text-secondary); font-weight:200; margin-top:3rem; }
.community-stats strong { color:var(--accent-warm); font-weight:400; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding:0 clamp(1.5rem,4vw,3rem); max-width:1200px; margin:0 auto; }
.gallery-grid img { width:100%; height:220px; border-radius:var(--radius-md); object-fit:cover; transition:transform 0.4s var(--ease-out); }
.gallery-grid img:hover { transform:scale(1.03); }

/* BREATHING */
.breathing-section { position:relative; padding:8rem 0; overflow:hidden; }
.breathing-bg { position:absolute; inset:0; }
.breathing-bg-img { width:100%; height:100%; object-fit:cover; }
.breathing-overlay { position:absolute; inset:0; background:rgba(10,10,8,0.85); }
.breathing-widget { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.breathing-visual { position:relative; width:280px; height:280px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
.breath-ring { position:absolute; border-radius:50%; border:1px solid var(--accent-warm); transition:all 4s var(--ease-out); }
.breath-ring-outer { width:100%; height:100%; opacity:0.2; }
.breath-ring-middle { width:70%; height:70%; opacity:0.4; }
.breath-ring-inner { width:40%; height:40%; opacity:0.6; background:rgba(196,149,106,0.05); }
.breathing-visual.inhale .breath-ring-outer { transform:scale(1.2); opacity:0.4; }
.breathing-visual.inhale .breath-ring-middle { transform:scale(1.3); opacity:0.6; }
.breathing-visual.inhale .breath-ring-inner { transform:scale(1.4); opacity:0.8; background:rgba(196,149,106,0.1); }
.breathing-visual.exhale .breath-ring-outer { transform:scale(0.8); opacity:0.15; }
.breathing-visual.exhale .breath-ring-middle { transform:scale(0.7); opacity:0.3; }
.breathing-visual.exhale .breath-ring-inner { transform:scale(0.6); opacity:0.4; }
.breath-text { font-family:var(--font-display); font-size:1.5rem; color:var(--accent-warm); font-weight:300; z-index:1; }
.breathing-info { display:flex; flex-direction:column; gap:1rem; }
.breathing-title { font-family:var(--font-display); font-size:2.5rem; font-weight:300; }
.breathing-desc { color:var(--text-secondary); font-weight:200; font-size:1.05rem; }

/* JOIN */
.join { position:relative; padding:10rem 0; overflow:hidden; }
.join-bg { position:absolute; inset:0; }
.join-bg-img { width:100%; height:100%; object-fit:cover; }
.join-overlay { position:absolute; inset:0; background:rgba(10,10,8,0.88); }
.join .container { position:relative; z-index:2; }
.join-options { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:1rem; }
.join-card { padding:2.5rem; background:rgba(20,20,16,0.7); border:1px solid var(--border); border-radius:var(--radius-md); backdrop-filter:blur(10px); transition:all 0.4s var(--ease-out); display:flex; flex-direction:column; gap:1.5rem; }
.join-card:hover { border-color:rgba(196,149,106,0.3); transform:translateY(-4px); }
.join-card h3 { font-family:var(--font-display); font-size:1.5rem; font-weight:400; }
.join-card p { color:var(--text-secondary); font-weight:200; line-height:1.7; flex:1; }

/* NEWSLETTER */
.newsletter { padding:5rem 0; border-top:1px solid var(--border); }
.newsletter-inner { text-align:center; max-width:500px; margin:0 auto; }
.newsletter-inner h3 { font-family:var(--font-display); font-size:1.8rem; font-weight:300; margin-bottom:1.5rem; }
.newsletter-form { display:flex; gap:0.75rem; }
.newsletter-form input { flex:1; padding:0.9rem 1.5rem; border-radius:var(--radius-xl); border:1px solid var(--border); background:var(--bg-surface); color:var(--text-primary); font-family:var(--font-body); font-size:0.9rem; outline:none; transition:border-color 0.3s; }
.newsletter-form input:focus { border-color:var(--accent-warm); }

/* FOOTER */
.footer { padding:5rem 0 2rem; border-top:1px solid var(--border); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-brand { display:flex; flex-direction:column; gap:1rem; }
.footer-brand p { color:var(--text-muted); font-size:0.85rem; font-weight:200; }
.footer-links { display:flex; flex-direction:column; gap:0.75rem; }
.footer-links h4 { font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:0.5rem; font-weight:400; }
.footer-links a { text-decoration:none; color:var(--text-muted); font-size:0.85rem; font-weight:200; transition:color 0.3s; }
.footer-links a:hover { color:var(--accent-warm); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:2rem; border-top:1px solid var(--border); }
.footer-bottom p { color:var(--text-muted); font-size:0.8rem; }
.footer-legal { display:flex; gap:2rem; }
.footer-legal a { text-decoration:none; color:var(--text-muted); font-size:0.8rem; transition:color 0.3s; }
.footer-legal a:hover { color:var(--text-primary); }

/* REVEAL */
.reveal-up { opacity:0; transform:translateY(30px); transition:opacity 0.8s var(--ease-out),transform 0.8s var(--ease-out); transition-delay:var(--delay,0s); }
.reveal-up.visible { opacity:1; transform:translateY(0); }

/* RESPONSIVE */
@media(max-width:968px) {
    .nav-links { display:none; }
    .nav-toggle { display:flex; }
    .split-section { grid-template-columns:1fr; }
    .split-image { height:50vh; }
    .mosaic-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
    .mosaic-large { grid-row:auto; }
    .stories-grid { grid-template-columns:1fr; max-width:500px; }
    .join-options { grid-template-columns:1fr; }
    .breathing-widget { grid-template-columns:1fr; text-align:center; }
    .footer-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px) {
    .mosaic-grid { grid-template-columns:1fr; }
    .program-card { flex:0 0 85vw; }
    .footer-grid { grid-template-columns:1fr; }
    .footer-bottom { flex-direction:column; gap:1rem; text-align:center; }
    .newsletter-form { flex-direction:column; }
    .gallery-track img { width:220px; height:150px; }
}