@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Cormorant+Garamond:wght@500;600;700&display=swap');

:root{
  --bg: #f6f0e7;
  --bg-soft: #fbf8f3;
  --surface: rgba(255,255,255,0.82);
  --surface-strong: #fffdf9;
  --line: rgba(19, 28, 40, 0.10);
  --line-strong: rgba(19, 28, 40, 0.16);
  --text: #24303f;
  --muted: #5f6976;
  --heading: #162131;
  --brand: #9a7447;
  --navy: #162235;
  --shadow: 0 24px 60px rgba(17, 24, 39, 0.11);
  --shadow-soft: 0 14px 32px rgba(17, 24, 39, 0.08);
  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --container: min(1180px, calc(100vw - 2rem));
  --section-space: clamp(4rem, 7vw, 7rem);
  --hero-space: clamp(4.5rem, 9vw, 7rem);
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--text);
  font-family:var(--font-sans);
  line-height:1.65;
  background:
    radial-gradient(circle at top left, rgba(216,192,156,0.18), transparent 34%),
    radial-gradient(circle at right center, rgba(151,176,157,0.12), transparent 28%),
    linear-gradient(180deg, #f8f3ec 0%, #f5efe7 100%);
}

body.nav-open{
  overflow:hidden;
}

img{
  display:block;
  max-width:100%;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea{
  font:inherit;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  background:#fff;
  color:#000;
  padding:0.75rem 1rem;
  z-index:1000;
}

.skip-link:focus{
  left:1rem;
  top:1rem;
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  padding:1rem 0 0;
  transition:padding 0.25s ease;
}

.site-header.is-scrolled{
  padding-top:0.45rem;
}

.nav-shell{
  width:var(--container);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.85rem 1rem;
  border:1px solid rgba(255,255,255,0.46);
  border-radius:999px;
  background:rgba(250,245,238,0.72);
  backdrop-filter:blur(18px);
  box-shadow:0 16px 40px rgba(21, 29, 41, 0.08);
}

.brand{
  display:flex;
  align-items:center;
  gap:0.85rem;
  min-width:0;
}

.brand-mark{
  width:2.65rem;
  height:2.65rem;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.8), transparent 35%),
    linear-gradient(145deg, var(--brand), var(--navy));
  color:#fff;
  font-weight:700;
  letter-spacing:0.08em;
  box-shadow:var(--shadow-soft);
  flex-shrink:0;
}

.brand-copy{
  min-width:0;
}

.brand-title{
  display:block;
  font-weight:700;
  color:var(--heading);
  white-space:nowrap;
}

.brand-subtitle{
  display:block;
  color:var(--muted);
  font-size:0.86rem;
  white-space:nowrap;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:0.35rem;
}

.site-nav a{
  padding:0.8rem 1rem;
  border-radius:999px;
  color:var(--muted);
  font-weight:500;
  transition:background 0.2s ease, color 0.2s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.active{
  background:rgba(22, 33, 52, 0.08);
  color:var(--heading);
}

.nav-cta{
  display:flex;
  align-items:center;
  gap:0.65rem;
  flex-shrink:0;
}

.button,
.button-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.55rem;
  border-radius:999px;
  padding:0.95rem 1.35rem;
  font-weight:600;
  transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.button{
  background:var(--navy);
  color:#fff;
  box-shadow:0 16px 30px rgba(22, 33, 52, 0.22);
}

.button:hover,
.button:focus-visible{
  transform:translateY(-1px);
  background:#0f1828;
}

.button-secondary{
  background:rgba(255,255,255,0.92);
  color:var(--heading);
  border:1px solid rgba(22, 33, 52, 0.08);
}

.button-secondary:hover,
.button-secondary:focus-visible{
  transform:translateY(-1px);
  box-shadow:var(--shadow-soft);
}

.button-secondary.compact{
  padding:0.78rem 1rem;
  white-space:nowrap;
}

.menu-toggle{
  display:none;
  width:2.9rem;
  height:2.9rem;
  border-radius:50%;
  border:1px solid rgba(22, 33, 52, 0.1);
  background:#fff;
  color:var(--heading);
  cursor:pointer;
  position:relative;
}

.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after{
  content:"";
  position:absolute;
  left:0.8rem;
  right:0.8rem;
  height:2px;
  background:currentColor;
  border-radius:999px;
  transition:transform 0.25s ease, opacity 0.25s ease, top 0.25s ease;
}

.menu-toggle span{
  top:calc(50% - 1px);
}

.menu-toggle::before{
  top:0.95rem;
}

.menu-toggle::after{
  top:1.75rem;
}

.menu-toggle[aria-expanded="true"] span{
  opacity:0;
}

.menu-toggle[aria-expanded="true"]::before{
  top:calc(50% - 1px);
  transform:rotate(45deg);
}

.menu-toggle[aria-expanded="true"]::after{
  top:calc(50% - 1px);
  transform:rotate(-45deg);
}

.container{
  width:var(--container);
  margin:0 auto;
}

.section{
  padding:var(--section-space) 0;
}

.section-first{
  padding-top:var(--hero-space);
}

.section-last{
  padding-bottom:var(--section-space);
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.74rem;
  color:var(--brand);
  font-weight:700;
  margin-bottom:1rem;
}

.kicker::before{
  content:"";
  width:1.05rem;
  height:1px;
  background:currentColor;
  opacity:0.6;
}

.kicker-light{
  color:#f7d8ae;
}

.hero-grid,
.page-hero-grid,
.split-grid,
.contact-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:clamp(2rem, 4vw, 4rem);
  align-items:center;
}

.hero-title,
.page-title,
.section-title{
  font-family:var(--font-serif);
  color:var(--heading);
  margin:0;
  line-height:0.97;
  font-weight:600;
  letter-spacing:-0.01em;
}

.hero-title{
  font-size:clamp(3.2rem, 7vw, 5.8rem);
  max-width:10ch;
}

.page-title,
.section-title{
  font-size:clamp(2.4rem, 5vw, 4.3rem);
}

.hero-text,
.page-text,
.section-intro{
  color:var(--muted);
  font-size:1.05rem;
  margin:1rem 0 0;
  max-width:42rem;
}

.page-copy.on-dark .page-title,
.page-copy.on-dark .page-text{
  color:#fff;
}

.page-copy.on-dark .page-text{
  color:rgba(255,255,255,0.82);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.85rem;
  margin-top:2rem;
}

.meta-row,
.info-band-grid,
.feature-grid,
.card-grid,
.announcement-grid,
.stat-grid{
  display:grid;
  gap:1rem;
}

.meta-row{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  margin-top:2rem;
}

.meta-card,
.info-pill,
.feature-card,
.announcement-card,
.stat-card,
.detail-card,
.form-panel,
.message-row,
.image-card,
.cta-panel{
  border:1px solid rgba(255,255,255,0.58);
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow-soft);
}

.meta-card,
.info-pill,
.feature-card,
.announcement-card,
.stat-card,
.detail-card{
  border-radius:var(--radius-md);
  padding:1.15rem 1.15rem 1.1rem;
}

.meta-label,
.card-topline{
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:0.72rem;
  color:var(--brand);
  font-weight:700;
}

.meta-value{
  margin-top:0.4rem;
  font-size:1rem;
  font-weight:600;
  color:var(--heading);
}

.hero-visual{
  position:relative;
}

.media-card,
.page-hero-media,
.image-frame{
  overflow:hidden;
  border-radius:var(--radius-xl);
  border:1px solid rgba(255,255,255,0.54);
  box-shadow:var(--shadow);
  background:#fff;
}

.media-card img,
.page-hero-media img,
.image-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.media-card-tall{
  display:grid;
  grid-template-rows:auto auto;
}

.media-card-tall img{
  aspect-ratio:4 / 3;
}

.media-card-body{
  padding:1.35rem 1.35rem 1.45rem;
  background:rgba(255,250,244,0.94);
}

.media-card-body h2{
  margin:0.35rem 0 0.45rem;
  font-size:1.45rem;
  color:var(--heading);
  line-height:1.15;
}

.media-card-body p{
  margin:0;
  color:var(--muted);
}

.info-band{
  padding:1.25rem 0 0;
}

.info-band-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.info-pill h3,
.feature-card h3,
.announcement-card h3,
.detail-card h2,
.image-card-body h3{
  margin:0 0 0.35rem;
  font-size:1.15rem;
  line-height:1.2;
  color:var(--heading);
}

.info-pill p,
.feature-card p,
.announcement-card p,
.detail-card p,
.image-card-body p{
  margin:0;
  color:var(--muted);
}

.split-grid{
  align-items:start;
}

.split-grid-tight{
  align-items:center;
}

.eyebrow-list{
  list-style:none;
  padding:0;
  margin:1.5rem 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
}

.eyebrow-list li{
  padding:0.72rem 1rem;
  border-radius:999px;
  background:rgba(255,255,255,0.74);
  border:1px solid rgba(19, 28, 40, 0.08);
  box-shadow:var(--shadow-soft);
  font-weight:600;
  color:var(--heading);
}

.feature-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  margin-top:1.5rem;
}

.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.6rem;
}

.inline-link{
  font-weight:600;
  color:var(--heading);
}

.card-grid-four{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.card-grid-three,
.announcement-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.image-card{
  border-radius:var(--radius-lg);
  overflow:hidden;
}

.image-card img{
  width:100%;
  aspect-ratio:1.58 / 1;
  object-fit:cover;
}

.image-card-body{
  padding:1rem 1rem 1.1rem;
}

.page-hero{
  position:relative;
}

.page-hero-media{
  min-height:340px;
}

.page-hero-media img{
  aspect-ratio:16 / 10;
}

.page-hero-overlay{
  position:relative;
  overflow:hidden;
}

.page-hero-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(7, 13, 24, 0.74) 0%, rgba(7, 13, 24, 0.38) 40%, rgba(7, 13, 24, 0.12) 100%);
  z-index:1;
}

.page-hero-overlay .container{
  position:relative;
  z-index:2;
}

.page-hero-ministry{
  background-image:url("assets/images/ministries-outreach.jpg");
  background-size:cover;
  background-position:center;
  border-bottom-left-radius:36px;
  border-bottom-right-radius:36px;
}

.page-hero-sermon{
  background-image:url("assets/images/sermon-bible.jpg");
  background-size:cover;
  background-position:center;
  border-bottom-left-radius:36px;
  border-bottom-right-radius:36px;
}

.page-hero-overlay .page-hero-grid{
  min-height:420px;
  align-items:end;
  padding:1.5rem 0 2.5rem;
}

.message-list{
  display:grid;
  gap:1rem;
}

.message-row{
  display:grid;
  grid-template-columns:220px 1fr auto;
  gap:1.2rem;
  align-items:center;
  border-radius:var(--radius-lg);
  padding:0.8rem;
}

.message-row img{
  width:100%;
  height:140px;
  object-fit:cover;
  border-radius:var(--radius-md);
}

.message-row-body h2{
  margin:0.35rem 0 0.35rem;
  color:var(--heading);
  font-size:1.3rem;
  line-height:1.2;
}

.message-row-body p{
  margin:0;
  color:var(--muted);
}

.stat-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.stat-card{
  display:grid;
  gap:0.2rem;
  text-align:center;
}

.stat-card strong{
  font-size:2.2rem;
  line-height:1;
  color:var(--heading);
}

.stat-card span{
  color:var(--muted);
  font-weight:500;
}

.contact-grid{
  align-items:start;
}

.contact-stack{
  display:grid;
  gap:1rem;
}

.form-panel{
  border-radius:var(--radius-xl);
  padding:1.5rem;
}

.form-panel h2{
  margin:0 0 1rem;
  color:var(--heading);
}

form{
  display:grid;
  gap:1rem;
}

.input-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1rem;
}

label{
  display:grid;
  gap:0.45rem;
}

label span{
  font-size:0.92rem;
  font-weight:600;
  color:var(--heading);
}

input,
textarea{
  width:100%;
  border:1px solid rgba(19, 28, 40, 0.12);
  background:#fff;
  border-radius:14px;
  padding:0.9rem 1rem;
  color:var(--heading);
}

textarea{
  resize:vertical;
  min-height:160px;
}

.demo-response{
  margin:0;
  color:#255a3e;
  display:none;
}

.demo-response.is-visible{
  display:block;
}

.cta-panel{
  margin-top:1.6rem;
  border-radius:var(--radius-xl);
  padding:1.5rem clamp(1.25rem, 3vw, 2rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.cta-panel h2{
  margin:0;
  color:var(--heading);
  font-family:var(--font-serif);
  font-size:clamp(2.1rem, 4vw, 3.4rem);
  line-height:1;
}

.cta-panel p{
  margin:0.5rem 0 0;
  color:var(--muted);
}

.site-footer{
  margin-top:1rem;
  background:linear-gradient(180deg, #172338 0%, #0d1624 100%);
  color:rgba(255,255,255,0.88);
  padding:2.5rem 0 1.2rem;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr 0.8fr 0.8fr;
  gap:1.5rem;
}

.site-footer h3,
.site-footer h4{
  margin:0 0 0.75rem;
  color:#fff;
}

.site-footer p,
.site-footer nav{
  margin:0;
  color:rgba(255,255,255,0.78);
}

.site-footer nav{
  display:grid;
  gap:0.45rem;
}

.footer-bottom{
  margin-top:2rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,0.12);
  display:flex;
  justify-content:space-between;
  gap:1rem;
  color:rgba(255,255,255,0.65);
  font-size:0.92rem;
}

[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal].is-visible{
  opacity:1;
  transform:none;
}

@media (max-width: 1080px){
  .hero-grid,
  .page-hero-grid,
  .split-grid,
  .contact-grid{
    grid-template-columns:1fr;
  }

  .card-grid-four{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .footer-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .hero-title{
    max-width:12ch;
  }

  .info-band-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .feature-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px){
  .menu-toggle{
    display:inline-flex;
  }

  .nav-shell{
    position:relative;
    border-radius:24px;
  }

  .site-nav{
    position:absolute;
    top:calc(100% + 0.75rem);
    left:0;
    right:0;
    display:grid;
    gap:0.35rem;
    padding:0.7rem;
    background:rgba(250,245,238,0.98);
    border:1px solid rgba(19, 28, 40, 0.08);
    border-radius:24px;
    box-shadow:var(--shadow);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  }

  .site-nav.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

  .site-nav a{
    padding:0.95rem 1rem;
  }

  .brand-subtitle,
  .nav-cta .button{
    display:none;
  }

  .message-row{
    grid-template-columns:1fr;
  }

  .message-row img{
    height:180px;
  }
}

@media (max-width: 680px){
  .hero-title,
  .page-title,
  .section-title,
  .cta-panel h2{
    line-height:1.02;
  }

  .meta-row,
  .info-band-grid,
  .feature-grid,
  .card-grid-four,
  .card-grid-three,
  .announcement-grid,
  .stat-grid,
  .input-row,
  .footer-grid,
  .footer-bottom{
    grid-template-columns:1fr;
  }

  .section-head,
  .cta-panel{
    align-items:start;
    flex-direction:column;
  }

  .brand-title{
    max-width:9rem;
    white-space:normal;
    line-height:1.1;
  }

  .nav-shell{
    padding:0.75rem 0.8rem;
  }

  .page-hero-overlay .page-hero-grid{
    min-height:360px;
  }

  .page-hero-media{
    min-height:0;
  }

  .form-panel{
    padding:1.2rem;
  }
}


.section-tight-top{
  padding-top:1rem;
}

.section-head-stack{
  align-items:start;
}

.section-title-medium{
  font-size:clamp(2.1rem, 4vw, 3.2rem);
}

.eyebrow-list-compact{
  margin-top:1.1rem;
}

.ministries-card-grid{
  gap:1.15rem;
}

.ministry-card{
  display:flex;
  flex-direction:column;
}

.ministry-card .image-card-body{
  display:flex;
  flex-direction:column;
  gap:0.55rem;
  min-height:205px;
}

.priority-card{
  transform:translateY(-2px);
}

.ministry-meta{
  margin-top:0.1rem;
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:0.01em;
  color:var(--heading);
}

.text-link{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  margin-top:auto;
  width:max-content;
  font-weight:700;
  color:var(--brand);
}

.text-link::after{
  content:"→";
  font-size:0.95rem;
}

.ministry-path-grid .feature-card p{
  color:var(--heading);
}

.page-hero-ministry{
  background-image:url("assets/images/pexels-ministries-hero.jpg");
  background-position:center;
}

@media (max-width: 920px){
  .section-tight-top{
    padding-top:0.3rem;
  }

  .ministry-card .image-card-body{
    min-height:auto;
  }
}