/* ============================================================
   PURPOSE CHURCH — shared redesign system.
   Image-forward, scroll-driven. Neutral canvas, green/blue
   accents, Archivo + Hanken Grotesk, Apple-style motion.
   Linked by every *-redesign.html page.
   ============================================================ */
:root{
  --green:#5CB85C;      --green-700:#479A47;  --green-900:#2F6E2F;
  --green-100:#E7F4E7;  --green-300:#A9DCA9;
  --blue:#149DCC;       --blue-700:#0E7CA6;   --blue-900:#0A5573;
  --blue-100:#DCF0F7;   --blue-300:#8FD3EA;
  --charcoal:#1c1c1c;   --slate:#3F3F3F;      --muted:#6B716C;
  --cloud:#EEF1EC;      --paper:#FAFBF9;      --white:#fff;

  --display:'Archivo',-apple-system,BlinkMacSystemFont,sans-serif;
  --text:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --wrap:1200px;
  --shadow:0 30px 70px -30px rgba(0,0,0,.5);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--slate);
  font-family:var(--text); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;}

h1,h2,h3{font-family:var(--display); color:var(--charcoal); line-height:1.03; margin:0; font-weight:900; letter-spacing:-.025em;}
h1{font-size:clamp(3rem,9vw,7rem);}
h2{font-size:clamp(2.2rem,5.5vw,4rem);}
h3{font-size:1.5rem; font-weight:800;}
p{margin:0 0 1rem;}
a{color:var(--blue-700); text-underline-offset:3px;}
img{display:block; max-width:100%;}

.eyebrow{font-family:var(--text); font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:.82rem; color:var(--green-700); margin:0 0 1rem;}
.section-head{max-width:640px; margin:0 0 40px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--text); font-weight:700; font-size:1.02rem; padding:.9rem 1.9rem; border-radius:999px; border:2px solid transparent; cursor:pointer; text-decoration:none; transition:transform .18s ease, background .2s ease, box-shadow .2s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--green); color:#fff; box-shadow:0 14px 30px -12px rgba(92,184,92,.9);}
.btn-primary:hover{background:var(--green-700);}
.btn-secondary{background:var(--blue); color:#fff;}
.btn-secondary:hover{background:var(--blue-700);}
.btn-outline{background:transparent; color:var(--green-900); border-color:var(--green);}
.btn-outline:hover{background:var(--green-100);}
.btn-light{background:#fff; color:var(--charcoal);}
.btn-light:hover{background:var(--cloud);}
.btn-ghost{background:transparent; color:var(--blue-700); padding-inline:0;}
.btn-glass{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.4); backdrop-filter:blur(6px);}
.btn-glass:hover{background:rgba(255,255,255,.24);}

/* ---- Header ---- */
header.site{position:fixed; top:0; left:0; right:0; z-index:100; transition:background .3s ease, box-shadow .3s ease;}
header.site.solid{background:rgba(250,251,249,.85); backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(0,0,0,.06);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:var(--wrap); margin:0 auto; gap:16px;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand .name{font-family:var(--display); font-weight:900; font-size:1.25rem; letter-spacing:-.02em; color:var(--charcoal); transition:color .3s ease;}
.logo{width:38px; height:38px; flex:0 0 auto;}
nav.links{display:flex; align-items:center; gap:28px;}
nav.links a{position:relative; color:var(--slate); text-decoration:none; font-weight:600; font-size:.98rem; transition:color .3s ease;}
nav.links a::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:var(--green); transform:scaleX(0); transform-origin:center; transition:transform .25s ease;}
nav.links a:hover{color:var(--green-700);}
nav.links a.active{color:var(--green-700);}
nav.links a:hover::after, nav.links a.active::after{transform:scaleX(1);}
.nav-cta{display:flex; align-items:center; gap:12px;}
/* transparent-over-hero state (add .over-hero to header) */
header.site.over-hero:not(.solid) .brand .name,
header.site.over-hero:not(.solid) nav.links a{color:#fff;}
header.site.over-hero:not(.solid) nav.links a:hover{color:var(--green-300);}
header.site.over-hero:not(.solid) .menu-toggle span{background:#fff;}
.menu-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px;}
.menu-toggle span{display:block; width:24px; height:2px; background:var(--charcoal); margin:5px 0; border-radius:2px; transition:background .3s;}

/* ---- Section rhythm ---- */
section{padding:clamp(70px,10vw,120px) 0;}
section.tight{padding:clamp(50px,7vw,90px) 0;}
.dark{background:var(--charcoal); color:var(--cloud);}
.dark h2,.dark h3{color:#fff;}
.dark p{color:rgba(238,241,236,.8);}
.bg-white{background:var(--white);}
.bg-cloud{background:var(--cloud);}

/* ---- Full-bleed HERO (home) ---- */
.hero{position:relative; height:100vh; min-height:640px; display:flex; align-items:center; overflow:hidden;}
.hero-bg{position:absolute; inset:-8% 0; background-size:cover; background-position:center; will-change:transform; z-index:0;}
.hero-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.65) 100%);}
.hero .wrap{position:relative; z-index:2; color:#fff;}
.hero .caption{font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.9rem; color:rgba(255,255,255,.85); margin:0 0 1.2rem;}
.hero h1{color:#fff; max-width:14ch;}
.hero p.lead{font-size:1.4rem; max-width:34ch; margin:1.6rem 0 2.4rem; color:rgba(255,255,255,.9);}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.scroll-cue{position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2; color:#fff; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; opacity:.85; display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none;}
.scroll-cue .mouse{width:24px; height:38px; border:2px solid rgba(255,255,255,.8); border-radius:14px; position:relative;}
.scroll-cue .mouse::after{content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:4px; height:8px; background:#fff; border-radius:2px; animation:scrolldot 1.6s infinite;}
@keyframes scrolldot{0%{opacity:0; transform:translate(-50%,0);}40%{opacity:1;}100%{opacity:0; transform:translate(-50%,12px);}}

/* ---- Interior PAGE HERO (shorter) ---- */
.page-hero{position:relative; min-height:62vh; display:flex; align-items:flex-end; overflow:hidden; padding-bottom:clamp(40px,6vw,72px);}
.page-hero .hero-bg{inset:-10% 0;}
.page-hero .hero-bg::after{background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.72) 100%);}
.page-hero .wrap{position:relative; z-index:2; color:#fff;}
.page-hero h1{color:#fff; font-size:clamp(2.6rem,7vw,5.2rem);}
.page-hero .caption{font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.85rem; color:rgba(255,255,255,.85); margin:0 0 1rem;}
.page-hero p.lead{font-size:1.25rem; max-width:44ch; margin:1.2rem 0 0; color:rgba(255,255,255,.92);}

/* ---- Reveal on scroll ---- */
.reveal{opacity:0; transform:translateY(40px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}
.reveal.d1{transition-delay:.1s;} .reveal.d2{transition-delay:.2s;} .reveal.d3{transition-delay:.3s;} .reveal.d4{transition-delay:.4s;}

/* ---- Statement ---- */
.statement{padding:clamp(90px,14vh,160px) 0; text-align:center;}
.statement h2{max-width:20ch; margin:0 auto; font-size:clamp(2.4rem,6vw,5rem);}
.statement h2 .fade{color:var(--muted);}
.statement h2 .g{color:var(--green);}

/* ---- Pinned scale feature ---- */
.pin-scene{height:220vh; position:relative;}
.pin-sticky{position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.pin-img{width:min(60vw,760px); aspect-ratio:16/10; border-radius:28px; overflow:hidden; box-shadow:var(--shadow); transform:scale(.62); will-change:transform;}
.pin-img img{width:100%; height:100%; object-fit:cover;}
.pin-caption{position:absolute; z-index:3; text-align:center; color:#fff; padding:0 24px; opacity:0; transition:opacity .5s ease;}
.pin-caption h2{color:#fff; text-shadow:0 4px 30px rgba(0,0,0,.5);}
.pin-caption p{color:rgba(255,255,255,.92); text-shadow:0 2px 20px rgba(0,0,0,.5); font-size:1.25rem; max-width:30ch; margin:1rem auto 0;}

/* ---- Bento image grid ---- */
.bento{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:18px;}
.tile{position:relative; border-radius:22px; overflow:hidden; box-shadow:0 20px 44px -26px rgba(0,0,0,.4);}
.tile img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.tile:hover img{transform:scale(1.06);}
.tile::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%, rgba(0,0,0,.6) 100%);}
.tile .label{position:absolute; z-index:2; left:20px; bottom:16px; color:#fff;}
.tile .label b{font-family:var(--display); font-size:1.3rem; display:block; letter-spacing:-.01em;}
.tile .label span{font-size:.85rem; opacity:.9;}
.tile.wide{grid-column:span 2;} .tile.tall{grid-row:span 2;} .tile.big{grid-column:span 2; grid-row:span 2;}

/* ---- Full-bleed parallax quote ---- */
.quote{position:relative; min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; padding:0;}
.quote-bg{position:absolute; inset:-10% 0; background-size:cover; background-position:center; z-index:0; will-change:transform;}
.quote-bg::after{content:""; position:absolute; inset:0; background:rgba(28,28,28,.62);}
.quote .wrap{position:relative; z-index:2; color:#fff;}
.quote blockquote{font-family:var(--display); font-weight:800; font-size:clamp(1.8rem,4vw,3.2rem); line-height:1.15; margin:0 auto; max-width:20ch; color:#fff; letter-spacing:-.02em;}
.quote cite{display:block; margin-top:1.6rem; font-style:normal; font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:.85rem; color:rgba(255,255,255,.8);}

/* ---- Horizontal rail ---- */
.rail-head{display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:28px;}
.rail{display:flex; gap:20px; overflow-x:auto; padding:6px 24px 30px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;}
.rail::-webkit-scrollbar{height:8px;} .rail::-webkit-scrollbar-thumb{background:var(--cloud); border-radius:8px;}
.moment{flex:0 0 78%; max-width:420px; scroll-snap-align:start; border-radius:22px; overflow:hidden; position:relative; box-shadow:0 24px 50px -30px rgba(0,0,0,.5);}
.moment img{width:100%; height:440px; object-fit:cover;}
.moment .cap{position:absolute; inset:auto 0 0 0; padding:22px; background:linear-gradient(180deg,transparent, rgba(0,0,0,.75)); color:#fff;}
.moment .cap b{font-family:var(--display); font-size:1.3rem; display:block;}
@media(min-width:760px){.moment{flex-basis:38%;}}

/* ---- Split two-column ---- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.split.narrow{gap:44px;}
.framed img{width:100%; border-radius:22px; box-shadow:var(--shadow); object-fit:cover;}
.accent-rule{width:56px; height:4px; background:var(--green); border-radius:4px; margin:0 0 1.4rem;}

/* ---- Cards grid ---- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.mcard{background:#fff; border-radius:22px; overflow:hidden; border:1px solid var(--cloud); box-shadow:0 18px 40px -30px rgba(0,0,0,.35); transition:transform .25s ease, box-shadow .25s ease;}
.mcard:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.mcard .ph{height:230px; overflow:hidden;}
.mcard .ph img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.mcard:hover .ph img{transform:scale(1.07);}
.mcard .bd{padding:24px 26px 28px;}
.mcard .bd p{color:var(--muted); margin:.3rem 0 1rem;}

/* ---- Music feature ---- */
.music{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.music-art{position:relative;}
.music-art img{width:100%; border-radius:22px; box-shadow:var(--shadow);}
.music-art .play{position:absolute; inset:0; margin:auto; width:76px; height:76px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(0,0,0,.4);}
.music-art .play::after{content:""; border-style:solid; border-width:12px 0 12px 20px; border-color:transparent transparent transparent var(--charcoal); margin-left:4px;}

/* ---- Video embed ---- */
.video-shell{max-width:900px; margin:0 auto;}
.video-frame{position:relative; padding-bottom:56.25%; height:0; border-radius:22px; overflow:hidden; box-shadow:var(--shadow); border:6px solid #fff;}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* ---- Stats ---- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
.stat b{font-family:var(--display); font-size:clamp(2.4rem,5vw,3.6rem); color:var(--green); display:block; line-height:1;}
.stat span{color:var(--muted); font-weight:600; letter-spacing:.04em; font-size:.95rem;}

/* ---- Prose / rich text ---- */
.prose{max-width:70ch; margin:0 auto; font-size:1.15rem;}
.prose.left{margin:0;}
.prose h2{margin:2.2rem 0 1rem;}
.prose h3{margin:1.8rem 0 .6rem;}
.prose p{color:var(--slate); margin:0 0 1.2rem;}
.prose ul{padding-left:1.2rem; margin:0 0 1.2rem;} .prose li{margin:.4rem 0;}

/* ---- Forms ---- */
.form-card{background:#fff; border-radius:24px; padding:clamp(28px,4vw,44px); box-shadow:var(--shadow); border:1px solid var(--cloud); max-width:600px;}
.field{margin-bottom:18px;}
.field label{display:block; font-weight:700; color:var(--charcoal); margin-bottom:6px; font-size:.95rem;}
.field label .opt{font-weight:400; color:var(--muted); font-size:.85em;}
.field input,.field textarea,.field select{width:100%; padding:.85rem 1rem; border:2px solid var(--cloud); border-radius:12px; font-family:var(--text); font-size:1rem; color:var(--charcoal); background:var(--paper); transition:border-color .2s ease;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--green);}
.field textarea{min-height:130px; resize:vertical;}

/* ---- Numbered steps ---- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.step{background:#fff; border:1px solid var(--cloud); border-radius:22px; padding:30px 28px; box-shadow:0 18px 40px -30px rgba(0,0,0,.35); transition:transform .25s ease, box-shadow .25s ease;}
.step:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.step .num{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; background:var(--green-100); color:var(--green-900); font-family:var(--display); font-weight:900; font-size:1.25rem; margin-bottom:18px;}
.step h3{margin:0 0 .5rem;}
.step p{color:var(--muted); margin:0;}

/* ---- Tag pills (from style guide) ---- */
.tagrow{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 .5rem;}
.tag{display:inline-block; padding:.4rem 1rem; border-radius:999px; font-weight:700; font-size:.85rem; background:var(--green-100); color:var(--green-900);}
.tag.blue{background:var(--blue-100); color:var(--blue-900);}
.tag.gray{background:var(--cloud); color:var(--slate);}

/* ---- FAQ accordion ---- */
.faq{max-width:820px; margin:0 auto;}
.faq details{background:#fff; border:1px solid var(--cloud); border-radius:18px; padding:4px 26px; margin-bottom:14px; box-shadow:0 14px 34px -30px rgba(0,0,0,.3); transition:box-shadow .2s ease;}
.faq details[open]{box-shadow:var(--shadow);}
.faq summary{list-style:none; cursor:pointer; font-family:var(--display); font-weight:800; font-size:1.18rem; color:var(--charcoal); padding:20px 0; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; font-family:var(--text); font-weight:400; font-size:1.8rem; color:var(--green); line-height:1; transition:transform .25s ease;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{color:var(--slate); margin:0 0 20px; font-size:1.05rem;}
.faq details p:first-of-type{margin-top:-4px;}

/* ---- Big CTA band ---- */
.cta{position:relative; min-height:76vh; display:flex; align-items:center; overflow:hidden; padding:0;}
.cta-bg{position:absolute; inset:-10% 0; background-size:cover; background-position:center; z-index:0; will-change:transform;}
.cta-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(28,28,28,.8) 0%, rgba(28,28,28,.35) 100%);}
.cta .wrap{position:relative; z-index:2; color:#fff;}
.cta h2{color:#fff; max-width:16ch;}
.cta .times{display:flex; flex-wrap:wrap; gap:32px; margin:24px 0 30px;}
.cta .time b{font-family:var(--display); font-size:1.7rem; display:block;}
.cta .time span{opacity:.85; letter-spacing:.06em; font-weight:600; font-size:.9rem;}

/* ---- Footer ---- */
footer.site{background:#111; color:var(--cloud); padding:64px 0 34px;}
footer.site .grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:44px;}
footer.site a{color:var(--green-300); text-decoration:none;}
footer.site a:hover{color:#fff;}
footer.site h4{font-family:var(--display); color:#fff; font-size:1rem; margin:0 0 14px; letter-spacing:.04em;}
footer.site ul{list-style:none; padding:0; margin:0; line-height:2.1;}
footer.site .brand .name{color:#fff;}
footer .legal{border-top:1px solid rgba(255,255,255,.12); margin-top:44px; padding-top:22px; color:var(--muted); font-size:.85rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
footer.site .social{display:flex; gap:12px; margin-top:18px;}
footer.site .social a{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.08); color:var(--cloud); transition:background .2s ease, transform .2s ease, color .2s ease;}
footer.site .social a:hover{background:var(--green); color:#fff; transform:translateY(-2px);}
footer.site .social svg{width:20px; height:20px; fill:currentColor;}

/* ---- Responsive ---- */
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr); grid-auto-rows:180px;}
  .tile.big{grid-column:span 2; grid-row:span 1;}
  .grid3,.grid2,.music,.split,.steps{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr); gap:36px;}
  footer.site .grid{grid-template-columns:1fr;}
  nav.links,.nav-cta .btn{display:none;}
  .menu-toggle{display:block;}
  nav.links.open{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:#fff; padding:20px 24px; gap:18px; box-shadow:0 20px 40px -20px rgba(0,0,0,.3);}
  nav.links.open a{color:var(--charcoal)!important;}
  nav.links.open a.active{color:var(--green-700)!important;}
  nav.links.open a::after{left:0; right:auto; width:22px;}
  .pin-img{width:82vw;}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none;} .hero-bg,.quote-bg,.cta-bg{transform:none!important;}
  .pin-scene{height:auto;} .pin-sticky{position:static; height:auto; padding:80px 0;} .pin-img{transform:none;} .pin-caption{position:static; opacity:1; color:var(--charcoal);} .pin-caption h2{color:var(--charcoal); text-shadow:none;} .pin-caption p{color:var(--muted); text-shadow:none;}
}