/* =====================================================
   1. ROOT VARIABLES / BASE
===================================================== */

:root{
  --church-green:#0f3d2a;
  --church-green-soft:#2d654a;
  --church-gold:#c8a64b;
  --church-cream:#f3f0e4;
  --church-paper:#fffdf7;
  --church-ink:#102019;
  --church-muted:#5d665f;
  --church-border:rgba(15,61,42,.18);
  --church-shadow:0 18px 44px rgba(38,23,4,.08);
  --church-serif:"Cormorant Garamond", Georgia, serif;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--church-ink);
  background:var(--church-cream);
}

.church-page{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(15,61,42,.06), transparent 34%),
    linear-gradient(180deg, #f8f5ea 0%, #efecdf 100%);
}

.church-wrap{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
}

.church-wrap.narrow{
  width:min(900px, calc(100% - 40px));
}


/* =====================================================
   2. SHARED SECTION STYLE
===================================================== */

.church-section{
  position:relative;
  padding:78px 0;
}

.church-section + .church-section{
  border-top:1px solid var(--church-border);
}

.church-heading{
  max-width:820px;
  margin:0 auto 42px;
  text-align:center;
}

.church-kicker{
  margin:0 0 10px;
  color:var(--church-green-soft);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.church-heading h1,
.church-heading h2{
  margin:0;
  font-family:var(--church-serif);
  color:var(--church-green);
  font-weight:500;
  letter-spacing:.055em;
  line-height:1.05;
}

.church-heading h1{
  font-size:clamp(2.25rem, 5vw, 4rem);
}

.church-heading h2{
  font-size:clamp(2rem, 4vw, 3.35rem);
}

.church-heading p{
  margin:16px auto 0;
  color:var(--church-muted);
  font-size:1rem;
  line-height:1.8;
}

.scripture-line{
  font-style:italic;
  color:var(--church-ink);
  font-size:.95rem;
}


/* =====================================================
   3. OUR MISSION
===================================================== */

.mission-section{
  padding-top:88px;
  text-align:center;
}

.mission-wrap{
  max-width:880px;
}

.mission-copy{
  max-width:760px;
  margin:0 auto;
}

.mission-copy p{
  margin:0;
  color:var(--church-ink);
  font-size:1rem;
  line-height:1.8;
}

.mission-copy p + p{
  margin-top:20px;
}

.mission-copy strong{
  color:var(--church-green);
}

.mission-tagline{
  width:max-content;
  max-width:100%;
  margin:36px auto 0;
  padding-top:22px;
  border-top:1px solid var(--church-border);
  color:var(--church-green-soft);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
}


/* =====================================================
   4. FIVE PILLARS
===================================================== */

.pillars-section{
  background:rgba(255,253,247,.72);
}

.pillars-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:18px;
}

.pillar-card{
  position:relative;
  min-height:250px;
  padding:26px 20px;
  border-radius:8px;
  background:rgba(255,253,247,.82);
  border:1px solid var(--church-border);
  box-shadow:0 12px 28px rgba(38,23,4,.04);
  transition:transform .25s ease, box-shadow .25s ease;
}

.pillar-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--church-shadow);
}

.pillar-card::before,
.pillar-card::after{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  opacity:.45;
}

.pillar-card::before{
  top:0;
  left:0;
  border-top:2px solid var(--church-green-soft);
  border-left:2px solid var(--church-green-soft);
}

.pillar-card::after{
  right:0;
  bottom:0;
  border-right:2px solid var(--church-green-soft);
  border-bottom:2px solid var(--church-green-soft);
}

.pillar-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  margin:0 0 20px;
  border-radius:999px;
  color:var(--church-green);
  background:rgba(15,61,42,.08);
  font-size:1rem;
}

.pillar-card h3{
  margin:0 0 14px;
  font-family:var(--church-serif);
  color:var(--church-green);
  font-size:1.08rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.pillar-card p{
  margin:0;
  color:var(--church-ink);
  font-size:.88rem;
  line-height:1.75;
}


/* =====================================================
   5. MINISTRY FOCUS
===================================================== */

.ministry-focus-section{
  padding:88px 0 96px;
  background:rgba(255,253,247,.45);
}

.focus-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:70px 92px;
  margin-top:72px;
}

.focus-card{
  background:transparent;
  border:0;
  box-shadow:none;
}

.focus-card h3{
  margin:0 0 12px;
  font-family:var(--church-serif);
  color:var(--church-green);
  font-size:1.55rem;
  font-weight:500;
  letter-spacing:.055em;
}

.focus-card p{
  margin:0;
  color:var(--church-ink);
  font-size:.95rem;
  line-height:1.75;
}

.focus-wide{
  grid-column:1 / -1;
  max-width:760px;
}



/* =====================================================
   6. HEART & MISSION
===================================================== */

.heart-mission-section{
  text-align:center;
  padding:92px 0 102px;
  background:
    radial-gradient(circle at 50% 30%, rgba(15,61,42,.06), transparent 44%),
    rgba(255,253,247,.38);
}

.heart-mission-section .church-heading{
  margin-bottom:32px;
}

.heart-mission-copy{
  max-width:800px;
  margin:0 auto;
}

.heart-mission-copy p{
  max-width:760px;
  margin:0 auto;
  color:var(--church-ink);
  font-size:1.06rem;
  line-height:1.8;
}

.heart-mission-copy p + p{
  margin-top:28px;
}

/* Mission Statement */

.mission-highlight{
  max-width:720px;
  margin:28px auto 34px;
  padding:24px 34px;

  background:rgba(255,253,247,.65);
  border:1px solid rgba(15,61,42,.10);
  border-radius:24px;

  box-shadow:0 18px 40px rgba(38,23,4,.06);
}

.mission-highlight span{
  display:block;
  margin-bottom:12px;

  color:var(--church-gold);

  font-family:Georgia, "Times New Roman", serif;
  font-size:1.75rem;
  font-style:italic;
  font-weight:500;
  line-height:1.2;
}

.mission-highlight{
  color:var(--church-ink);
  font-size:1.08rem;
  line-height:1.8;
}

/* Scripture */

.vision-verse{
  position:relative;
  max-width:640px;
  margin:36px auto;
  padding:18px 28px 18px 34px;

  border-left:4px solid var(--church-green);

  color:var(--church-ink);
  font-size:1rem;
  line-height:1.8;
  font-style:italic;
  text-align:center;
}

.vision-verse::before{
  content:"✝";
  position:absolute;
  left:-20px;
  top:14px;

  color:var(--church-green);
  font-size:1.05rem;
  font-style:normal;
}

.vision-verse span{
  display:block;
  margin-top:12px;

  color:var(--church-green);
  font-size:.92rem;
  font-weight:700;
  font-style:normal;
}


.join-tagline{
  width:max-content;
  max-width:100%;
  margin:46px auto 0;
  padding-top:24px;
  border-top:1px solid var(--church-border);
  color:var(--church-green-soft);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
}

/* =====================================================
   7. JOIN ACTIONS
===================================================== */

.join-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
  margin-top:42px;
}

.church-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 34px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:900;
  letter-spacing:.075em;
  text-transform:uppercase;
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease;
}

.church-btn:hover{
  transform:translateY(-3px);
}

.church-btn-green{
  color:#fff;
  background:linear-gradient(135deg, var(--church-green), var(--church-green-soft));
  box-shadow:0 16px 34px rgba(15,61,42,.18);
}

.church-btn-gold{
  color:#1d1605;
  background:linear-gradient(135deg, #d9ad42, #ffe07c);
  box-shadow:0 16px 34px rgba(217,173,66,.2);
}






/* =====================================================
   7. REVEAL ANIMATION
===================================================== */


.reveal{
  opacity:1;
  transform:none;
}


/* =====================================================
   8. RESPONSIVE
===================================================== */

@media(max-width:1050px){
  .pillars-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .pillar-card:last-child{
    grid-column:1 / -1;
  }
}

@media(max-width:760px){
  .church-section{
    padding:60px 0;
  }

  .church-wrap,
  .church-wrap.narrow{
    width:min(100% - 28px, 1120px);
  }

  .church-heading{
    margin-bottom:32px;
  }

  .mission-tagline,
  .join-tagline{
    width:100%;
    line-height:1.7;
  }

  .pillars-grid,
  .focus-grid{
    grid-template-columns:1fr;
  }

  .pillar-card:last-child,
  .focus-wide{
    grid-column:auto;
  }

  .pillar-card{
    min-height:auto;
  }

  .join-actions{
    flex-direction:column;
    align-items:center;
  }

  .church-btn{
    width:100%;
    max-width:320px;
  }
}