:root{
      --bg:#ffffff;
      --ink:#0f172a;         /* deep navy for readability */
      --muted:rgba(15,23,42,.65);
      --border:rgba(15,23,42,.10);
      --shadow: 0 20px 60px rgba(15,23,42,.10);

      --blue:#7dd3fc;        /* light blue */
      --blue2:#e0f2fe;       /* very light blue */
      --red:#d11f2a;         /* brand red */
      --gold:#d4af37;        /* subtle accent */

      --radius:18px;
      --max:1140px;
      --pad:18px;

      --font: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
    }

    *{box-sizing:border-box;}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--ink);
      background:
        radial-gradient(900px 480px at 10% 0%, rgba(125,211,252,.22), transparent 55%),
        radial-gradient(900px 520px at 95% 5%, rgba(209,31,42,.08), transparent 55%),
        #fff;
    }
    a{color:inherit; text-decoration:none;}
    img{max-width:100%; display:block;}
    .container{max-width:var(--max); margin:0 auto; padding:0 var(--pad);}

    /* Top Nav */
    .topbar{
      position:sticky; top:0; z-index:50;
      background: rgba(255,255,255,.88);
      backdrop-filter: blur(12px);
      border-bottom:1px solid var(--border);
    }
    .nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;            /* slightly tighter */
}
    .brand{display:flex; align-items:center; gap:12px; min-width:220px;}
    .brand img{width:40px; height:40px; object-fit:contain;}
    .brand .t{display:flex; flex-direction:column; line-height:1.05;}
    .brand strong{font-size:13px; letter-spacing:.6px;}
    .brand span{font-size:11px; color:var(--muted);}

    .links{display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
    .links a{
      font-size:14px; color:rgba(15,23,42,.75);
      padding:8px 10px; border-radius:12px; transition:.15s;
    }
    .links a:hover{background:rgba(15,23,42,.04); color:rgba(15,23,42,.92);}

    .cta{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;          /* ✅ stop the “boxed wrap” look */
    }
    .btn:hover{transform:translateY(-1px); background:rgba(15,23,42,.05);}
    .btn.primary{
      border-radius: 999px;
      border-color: rgba(209,31,42,.30);
      background: linear-gradient(135deg, rgba(209,31,42,.96), rgba(209,31,42,.78));
      color:#fff;
      box-shadow: 0 18px 50px rgba(209,31,42,.18);
    }
    .btn.primary:hover{filter:brightness(1.02);}
    .btn.soft{
      border-color: rgba(125,211,252,.55);
      background: rgba(125,211,252,.22);
    }
    .btn.gold{
      border-color: rgba(212,175,55,.45);
      background: rgba(212,175,55,.16);
    }

    /* Hero */
    .hero{
  position:relative;
  height:72vh;
  min-height:520px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-radius:22px;
  margin-top:16px;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto; 
}

.heroVideo{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}

.heroOverlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.55)
  );
  z-index:2;
}

.heroContent{
  position:relative;
  z-index:3;
  color:white;
  max-width:720px;
}

.heroContent h1{
  font-size:52px;
  line-height:1.05;
  margin-top:10px;
}

.heroContent .lead{
  color:rgba(255,255,255,.9);
}

.heroActions{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
    .hero{
      padding: 22px 0 10px;
    }
    .heroWrap{
      border-radius: var(--radius);
      overflow:hidden;
      border:1px solid var(--border);
      box-shadow: var(--shadow);
      background:
        linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.70)),
        url("assets/hero.png"); /* PLACEHOLDER IMAGE */
      background-size: cover;
      background-position: center;
    }
    .heroInner{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 18px;
      padding: 24px;
      align-items: stretch;
    }
    .kicker{
      display:inline-flex; align-items:center; gap:10px;
      padding:7px 12px;
      border:1px solid rgba(125,211,252,.55);
      background: rgba(125,211,252,.22);
      border-radius:999px; font-size:13px; color:rgba(15,23,42,.78);
      width: fit-content;
    }
    .dot{
      width:8px; height:8px; border-radius:50%;
      background: var(--gold);
      box-shadow: 0 0 0 4px rgba(212,175,55,.18);
    }
    h1{margin:14px 0 10px; font-size:40px; line-height:1.06;}
    .lead{margin:0 0 16px; color:var(--muted); font-size:16px; line-height:1.55;}

    .heroActions{display:flex; flex-wrap:wrap; gap:12px; margin-top:10px;}

    /* Video Card (like Change style — simple “Watch” area) */
    .videoCard{
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow:hidden;
      box-shadow: 0 18px 50px rgba(15,23,42,.08);
      display:flex;
      flex-direction:column;
    }
    .videoThumb{
      position:relative;
      aspect-ratio:16/9;
      overflow:hidden;
    }

    .videoThumb video{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .play{
      position:absolute; left:14px; bottom:14px;
      display:inline-flex; align-items:center; gap:10px;
      background: rgba(209,31,42,.95);
      color:#fff;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.22);
      box-shadow: 0 18px 44px rgba(209,31,42,.22);
    }
    .videoBody{padding:14px;}
    .videoBody strong{display:block; font-size:14px; margin-bottom:4px;}
    .videoBody span{font-size:13px; color:var(--muted);}

    /* Sections */
    .section{padding: 22px 0;}
    .sectionHead{
      display:flex; justify-content:space-between; align-items:flex-end;
      gap:12px; margin-bottom:12px;
    }
    .sectionHead h2{margin:0; font-size:22px;}
    .sectionHead p{margin:0; color:var(--muted); font-size:14px;}

    .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
    .grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}

    .card{
      background:#fff;
      border:1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 18px 50px rgba(15,23,42,.08);
      overflow:hidden;
    }
    .cardPad{padding:18px;}
  
    .cardImg{
      height: 180px;
      overflow: hidden;
      border-radius: 22px 22px 0 0;
    }

    .cardImg img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display:block;
    }
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      background: rgba(15,23,42,.03);
      font-size:13px;
      width: fit-content;
    }

    .note{font-size:13px; color:var(--muted); line-height:1.5;}

    /* Highlight band (Give / Vision) */
    .band{
      border:1px solid rgba(125,211,252,.45);
      background:
        linear-gradient(90deg, rgba(224,242,254,.85), rgba(255,255,255,.95));
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .bandInner{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      align-items:center;
      padding: 18px;
    }
  

    .bandImg{
      overflow:hidden;
      border-radius:16px;
    }

    .bandImg img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    /* Footer */
    .footer{
      margin-top: 18px;
      border-top:1px solid var(--border);
      background: rgba(15,23,42,.02);
    }
    .footerInner{
      padding: 20px 0;
      display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
      align-items:flex-start;
    }
    .footer small{color:var(--muted);}

    /* Mobile */
    @media (max-width: 950px){
      .links{display:none;} /* clean phone nav */
      h1{font-size:32px;}
      .heroInner{grid-template-columns:1fr;}
      .grid3{grid-template-columns:1fr;}
      .grid2{grid-template-columns:1fr;}
      .bandInner{grid-template-columns:1fr;}
    }
    
    @media (max-width: 520px){
      .btn{
        border-radius: 999px;
        padding: 8px 10px;
        font-size: 13px;
        white-space: nowrap;       /* keep buttons compact */
    }
    .brand{ min-width: 0; }
   }
    @media (max-width:900px){

  .hero{
    height:60vh;
    min-height:460px;
  }

  .heroContent h1{
    font-size:36px;
  }

}

/* Hamburger */
.hamburger{
  display:none;
  width:44px;
  height:44px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:14px;
  cursor:pointer;
  padding:10px;
  gap:6px;
}
.hamburger span{
  display:block;
  height:2px;
  background: rgba(15,23,42,.8);
  border-radius:99px;
}

/* Mobile drawer */
.menuBackdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition: .18s ease;
  z-index:80;
}
.menuBackdrop.open{
  opacity:1;
  pointer-events:auto;
}

.mobileMenu{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:min(88vw, 360px);
  background:#fff;
  border-left:1px solid var(--border);
  box-shadow: 0 30px 80px rgba(0,0,0,.22);
  transform: translateX(100%);
  transition: .18s ease;
  z-index:90;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mobileMenu.open{
  transform: translateX(0);
}
.mobileMenu a{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.08);
  background: rgba(15,23,42,.02);
}
.mobileMenu a:hover{
  background: rgba(15,23,42,.05);
}

/* When screen is small: hide desktop links, show hamburger */
@media (max-width: 950px){
  .links{ display:none; }
  .hamburger{ display:grid; }
}

@media (max-width: 520px){
  .cta a.btn.primary{ display:none; }  /* hides Watch/Live in header */
}

.heroVideo{
  pointer-events:none;   /* prevents tap-to-play overlay behavior */
}

/* Shared button base — you were missing the actual .btn base style */
.btn{
  border:1px solid var(--border);
  background: rgba(15,23,42,.03);
  padding:10px 14px;
  border-radius:14px;
  font-size:14px;
  cursor:pointer;
  transition:.15s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  white-space:nowrap;
}

/* Moments rail */
.momentsRailWrap{
  overflow:hidden;
  border-radius:22px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow: 0 18px 50px rgba(15,23,42,.08);
}

.momentsRail{
  display:flex;
  gap:14px;
  width:max-content;
  padding:14px;
  animation: churchRail 220s linear infinite;
}

.momentsRail:hover{
  animation-play-state: paused;
}

.momentItem{
  flex:0 0 280px;
  height:190px;
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 12px 30px rgba(15,23,42,.10);
}

.momentItem img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@keyframes churchRail{
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Overlay cards */
.overlayCard{
  position:relative;
  min-height:520px;
  border-radius:22px;
  overflow:hidden;
  display:block;
  border:1px solid var(--border);
  box-shadow: 0 18px 50px rgba(15,23,42,.08);
}

.overlayCard img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.overlayShade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.70));
  z-index:1;
}

.overlayContent{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:28px 24px;
  color:#fff;
}

.overlayBadge{
  font-size:12px;
  letter-spacing:.12em;
  font-weight:700;
  opacity:.92;
  margin-bottom:8px;
}

.overlayContent h3{
  font-size:34px;
  line-height:1.02;
  margin:0 0 10px;
  color:#fff;
}

.overlayContent p{
  margin:0 0 20px;
  color:rgba(255,255,255,.92);
  line-height:1.6;
  font-size:15px;
  max-width:90%;
}

.overlayBtn{
  width:fit-content;
  pointer-events:none;
}

/* Sermon cards */
.sermonCard{
  display:block;
  background:#fff;
  border:1px solid var(--border);
  border-radius:22px;
  overflow:hidden;
  box-shadow: 0 18px 50px rgba(15,23,42,.08);
}

.sermonThumb{
  position:relative;
  height:240px;
  overflow:hidden;
}

.sermonThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.sermonPlay{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:2;
  width:56px;
  height:56px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  color:#fff;
  background: rgba(209,31,42,.95);
  box-shadow: 0 16px 36px rgba(209,31,42,.30);
}

.sermonTitle{
  margin:12px 0 8px;
  font-size:22px;
  line-height:1.2;
}

/* Better mobile behavior */
@media (max-width: 950px){
  .overlayCard{
    min-height:440px;
  }

  .overlayContent h3{
    font-size:28px;
  }

  .momentItem{
    flex:0 0 220px;
    height:160px;
  }
}

@media (max-width: 640px){
  .overlayCard{
    min-height:380px;
  }

  .overlayContent{
    padding:22px 18px;
  }

  .overlayContent h3{
    font-size:24px;
  }

  .overlayContent p{
    max-width:100%;
    font-size:14px;
  }

  .sermonThumb{
    height:210px;
  }
}

@media (min-width:1100px){

.ministriesTopGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  align-items:start;
}

.ministriesTopGrid img{
  height:260px;
  object-fit:cover;
}

}

.ministriesHeroGrid{
  align-items:stretch;
}

.ministryHeroCard{
  min-height:560px;
}

.form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.input{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.input label{
  font-size:13px;
  color:var(--ink);
  font-weight:600;
}

.input input,
.input textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  font:inherit;
  background:#fff;
  color:var(--ink);
}

.input textarea{
  min-height:130px;
  resize:vertical;
}

.input input:focus,
.input textarea:focus{
  outline:none;
  border-color:rgba(125,211,252,.9);
  box-shadow:0 0 0 4px rgba(125,211,252,.18);
}

@media (max-width: 950px){
  .ministryHeroCard{
    min-height:420px;
  }
}

.aboutValueCard,
.ministryDetailCard,
.careCard,
.aboutStoryCard{
  position:relative;
  overflow:hidden;
}

.aboutValueCard::after,
.ministryDetailCard::after,
.careCard::after,
.aboutStoryCard::after{
  content:"";
  position:absolute;
  inset:auto -40px -40px auto;
  width:140px;
  height:140px;
  background: radial-gradient(circle, rgba(125,211,252,.16), transparent 68%);
  pointer-events:none;
}

html{
  scroll-behavior:smooth;
}

.qaCard{
  position:relative;
  overflow:hidden;
}

.qaCard::after,
.careClosingCard::after{
  content:"";
  position:absolute;
  inset:auto -30px -30px auto;
  width:150px;
  height:150px;
  background: radial-gradient(circle, rgba(125,211,252,.14), transparent 68%);
  pointer-events:none;
}

.qaItem{
  margin:0 0 18px;
}

.qaItem h3{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.3;
  color:var(--ink);
}

.careClosingCard{
  position:relative;
  overflow:hidden;
}

/* About readability upgrades */
.aboutBeliefs{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.beliefPanel{
  background:#fff;
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow: 0 18px 50px rgba(15,23,42,.08);
  overflow:hidden;
}

.beliefPanel summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 24px;
}

.beliefPanel summary::-webkit-details-marker{
  display:none;
}

.beliefPill{
  display:inline-flex;
  align-items:center;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(15,23,42,.03);
  font-size:18px;
  font-weight:700;
}

.beliefHint{
  font-size:13px;
  color:var(--muted);
}

.beliefBody{
  padding:0 24px 24px;
}

.beliefLead{
  font-size:22px;
  line-height:1.5;
  color:var(--ink);
  margin:0 0 14px;
}

@media (min-width:1100px){

.aboutPastorSection{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:40px;
  align-items:start;
}

.aboutPastorsGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.aboutPastorsGrid img{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:16px;
}

}

/* Ministries expand-in-place */
.ministryExpandCard,
.ministryMiniCard,
.worshipArtsCard{
  overflow:hidden;
}

.overlayDrawer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
  background:#fff;
  position:relative;
  z-index:6;
}

.ministryExpandCard.open .overlayDrawer{
  max-height:1222px;
}

.ministryMiniCard.open .miniDrawer,
.worshipArtsCard.open .miniDrawer{
  max-height:700px;
}

.overlayDrawerInner{
  padding:18px 22px 22px;
  border-top:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(8,15,35,.96), rgba(15,23,42,.92));
}

.overlayDrawerInner .note{
  color:rgba(255,255,255,.88);
}

.ministryToggle{
  position:relative;
  z-index:4;
}

.worshipArtsCard .cardImg{
  height:260px;
}

.carePreviewCard{
  display:block;
  transition:.18s ease;
}

.carePreviewCard:hover{
  transform:translateY(-4px);
}

/* Better spacing on reading-heavy sections */
.qaItem{
  padding:8px 0 2px;
}

.qaItem + .qaItem{
  border-top:1px solid rgba(15,23,42,.08);
  margin-top:16px;
  padding-top:18px;
}

@media (max-width: 950px){
  .aboutPastorsGrid{
    grid-template-columns:1fr;
  }

  .beliefPanel summary{
    flex-direction:column;
    align-items:flex-start;
  }

  .beliefLead{
    font-size:18px;
  }
}

/* ABOUT HERO PHOTO */
.aboutHeroPhotoCard{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  min-height:360px;
  border:1px solid var(--border);
  box-shadow:0 20px 60px rgba(15,23,42,.10);
}

.aboutHeroPhotoCard img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.aboutHeroPhotoOverlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.62));
}

.aboutHeroPhotoContent{
  position:relative;
  z-index:2;
  color:#fff;
  padding:28px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.aboutHeroPhotoContent h2{
  margin:12px 0 10px;
  font-size:34px;
  line-height:1.08;
  color:#fff;
}

.aboutHeroPhotoContent p{
  margin:0;
  max-width:720px;
  color:rgba(255,255,255,.92);
  line-height:1.6;
  font-size:16px;
}

/* ABOUT TAB SYSTEM */
.aboutBeliefTabs{
  overflow:hidden;
}

.aboutBeliefTabRow{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:8px;
  scrollbar-width:none;
}

.aboutBeliefTabRow::-webkit-scrollbar{
  display:none;
}

.aboutTabBtn{
  flex:0 0 auto;
  border:1px solid var(--border);
  background:rgba(15,23,42,.03);
  color:var(--ink);
  border-radius:999px;
  padding:12px 18px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  transition:.18s ease;
}

.aboutTabBtn.active{
  background:linear-gradient(135deg, rgba(15,23,42,.96), rgba(15,23,42,.84));
  color:#fff;
  border-color:rgba(15,23,42,.18);
}

.aboutTabPanels{
  margin-top:18px;
}

.aboutTabPanel{
  display:none;
  padding:10px 4px 2px;
}

.aboutTabPanel.active{
  display:block;
}

.aboutTabPanel .beliefLead{
  font-size:32px;
  line-height:1.28;
  margin:0 0 14px;
  max-width:1000px;
}

.aboutTabPanel .note{
  font-size:18px;
  line-height:1.7;
  max-width:940px;
}

/* MISSION / VISION polish */
.missionVisionCard{
  position:relative;
  overflow:hidden;
}

.missionVisionCard::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  background:linear-gradient(180deg, rgba(125,211,252,.9), rgba(212,175,55,.55));
}

.missionVisionCard .note{
  font-size:16px;
  line-height:1.75;
}

@media (max-width: 950px){
  .aboutHeroPhotoCard{
    min-height:300px;
  }

  .aboutHeroPhotoContent h2{
    font-size:28px;
  }

  .aboutTabPanel .beliefLead{
    font-size:24px;
  }

  .aboutTabPanel .note{
    font-size:16px;
  }
}

.careOverlayCard{
  min-height:420px;
}

.careOverlayCard .overlayContent h3{
  font-size:30px;
}

.ministryExpandCard{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.ministryExpandCard .overlayContent{
  pointer-events:none;
}

.ministryExpandCard .overlayContent .ministryToggle{
  pointer-events:auto;
}

.ministryExpandCard .overlayDrawer{
  border-top:1px solid rgba(255,255,255,.12);
}

.eventOverlayCard{
  min-height:420px;
}

.smallEventCard{
  min-height:360px;
}

.locationHeroCard{
  min-height:560px;
}

.locationHeroContent{
  max-width:760px;
}

.locationHeroStack{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:18px;
}

.locationLine{
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.16);
}

.locationLine:first-of-type{
  border-top:none;
}

.locationLabel{
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color:rgba(255,255,255,.78);
  margin-bottom:8px;
}

.locationText{
  font-size:20px;
  line-height:1.6;
  color:#fff;
}

.locationClosing{
  margin:18px 0 0;
  font-size:24px;
  line-height:1.4;
  color:#fff;
  font-weight:700;
}

@media (max-width: 950px){
  .locationHeroCard{
    min-height:520px;
  }

  .locationText{
    font-size:18px;
  }

  .locationClosing{
    font-size:20px;
  }
}

.locationLink{
  display:inline-block;
  color:#fff;
  text-decoration:underline;
  text-underline-offset:4px;
}

.momentsRailWrap{
  overflow-x:auto;
  overflow-y:hidden;
  cursor:grab;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.momentsRailWrap::-webkit-scrollbar{
  display:none;
}

.momentsRailWrap.is-dragging{
  cursor:grabbing;
}

/* =========================
   FINAL MINISTRIES / EVENTS EXPANDERS
========================= */

.ministryExpandCard,
.ministryMiniCard,
.worshipArtsCard,
.eventExpandCard{
  overflow:hidden;
}

.overlayDrawer,
.miniDrawer,
.eventDrawer{
  max-height:0;
  overflow:hidden;
  transition:max-height .38s ease;
}

.ministryExpandCard.open .overlayDrawer{
  max-height:900px;
}

.ministryMiniCard.open .miniDrawer,
.worshipArtsCard.open .miniDrawer{
  max-height:500px;
}

.eventExpandCard.open .eventDrawer{
  max-height:500px;
}

.overlayDrawerInner{
  padding:18px 22px 22px;
  border-top:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(8,15,35,.96), rgba(15,23,42,.92));
}

.overlayDrawerInner .note{
  color:rgba(255,255,255,.88);
  line-height:1.75;
  margin:0 0 14px;
}

.miniDrawer{
  background:#fff;
  border-top:1px solid rgba(15,23,42,.08);
}

.miniDrawer .cardPad{
  padding-top:16px;
  padding-bottom:18px;
}

.miniDrawer .note{
  margin:0 0 14px;
  line-height:1.75;
}

.eventDrawer{
  background:#fff;
}

.eventExpandCard .overlayContent{
  pointer-events:none;
}

.eventExpandCard .overlayContent .eventToggle{
  pointer-events:auto;
}

.ministryExpandCard .overlayContent{
  pointer-events:none;
}

.ministryExpandCard .overlayContent .ministryToggle{
  pointer-events:auto;
}

.ministryMiniCard .miniDrawer,
.worshipArtsCard .miniDrawer{
  display:block;
}

@media (max-width: 950px){
  .ministryExpandCard.open .overlayDrawer{
    max-height:1100px;
  }

  .ministryMiniCard.open .miniDrawer,
  .worshipArtsCard.open .miniDrawer,
  .eventExpandCard.open .eventDrawer{
    max-height:650px;
  }
}

/* Events page stability fix */
.eventOverlayCard{
  min-height:360px;
}

.smallEventCard{
  min-height:340px;
}

.eventExpandCard{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
}

.eventExpandCard .overlayContent{
  pointer-events:none;
}

.eventExpandCard .overlayContent .eventToggle{
  pointer-events:auto;
}

.eventDrawer{
  max-height:0;
  overflow:hidden;
  transition:max-height .38s ease;
  background:#fff;
}

.eventExpandCard.open .eventDrawer{
  max-height:500px;
}

@media (max-width: 950px){
  .eventExpandCard.open .eventDrawer{
    max-height:700px;
  }
}

/* =========================
   ABOUT PAGE DESKTOP POLISH
   keeps mobile untouched
========================= */
@media (min-width: 951px){
  .aboutPage .container{
    max-width: 1220px;
  }

  .aboutPage .aboutBeliefTabs{
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }

  .aboutPage .aboutTabPanels{
    max-width: 1180px;
  }

  .aboutPage .aboutTabPanel .beliefLead{
    max-width: 980px;
    font-size: 30px;
    line-height: 1.24;
  }

  .aboutPage .aboutTabPanel .note{
    max-width: 880px;
    font-size: 17px;
    line-height: 1.72;
  }

  .aboutPage .aboutPastorsGrid{
    grid-template-columns: 1.05fr .95fr;
    gap: 22px;
    align-items: stretch;
  }

  .aboutPage .aboutHeroPhotoCard{
    min-height: 300px;
  }

  .aboutPage .aboutHeroPhotoContent{
    padding: 24px;
  }

  .aboutPage .aboutHeroPhotoContent h2{
    font-size: 28px;
  }
}

/* =========================
   EVENTS PAGE DESKTOP POLISH
   keeps mobile untouched
========================= */
@media (min-width: 951px){
  .eventsPage .container{
    max-width: 1260px;
  }

  .eventsPage main.section .grid2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }

  .eventsPage main.section .grid3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }

  .eventsPage .eventOverlayCard{
    min-height: 390px;
  }

  .eventsPage .smallEventCard{
    min-height: 340px;
  }

  .eventsPage .overlayContent h3{
    font-size: 26px;
    line-height: 1.02;
  }

  .eventsPage .smallEventCard .overlayContent h3{
    font-size: 22px;
  }

  .eventsPage .overlayContent p{
    font-size: 15px;
    line-height: 1.6;
    max-width: 92%;
  }

  .eventsPage .eventExpandCard.open .eventDrawer{
    max-height: 560px;
  }
}

.aboutPastorsInner{
  align-items: start;
  gap: 20px;
}

.aboutPastorsCopy{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aboutPastorBio{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aboutPastorBio .note{
  margin: 0;
  line-height: 1.7;
}

.aboutPastorsBand .aboutPastorsGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-self: start;
}

.aboutPastorsBand .bandImg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px){
  .aboutPastorsBand .aboutPastorsGrid{
    grid-template-columns: 1fr;
  }
}

@media (min-width:1100px){

.eventsGrid{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:24px;
}

.eventsGrid .eventCard:nth-child(n+3){
  grid-column: span 1;
}

.eventsGridSecondary{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:24px;
  margin-top:24px;
}

}

/* HOME START CARDS */
.startCardsRail{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  align-items:stretch;
}

.startCardsRail .startCard{
  min-width: 0;
}

.startCard{
  border-radius: 22px;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
  display:flex;
  flex-direction:column;
  height:100%;
}

.startCard:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(20,30,60,.10);
}

.startCard .cardImg{
  flex-shrink:0;
}

.startCard .cardImg img{
  display:block;
  width:100%;
  height:220px;
  object-fit:cover;
}

.startCard .cardPad{
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
}

.startCard .note{
  margin:0;
  line-height:1.65;
  flex:1;
}

.startCard .btn{
  align-self:flex-start;
  margin-top:auto;
}

@media (max-width: 900px){
  .startCardsRail{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden;
    gap:14px;
    padding: 0 2px 8px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .startCardsRail::-webkit-scrollbar{
    display:none;
  }

  .startCardsRail .startCard{
    flex: 0 0 84% !important;
    min-width: 84% !important;
    max-width: 84% !important;
    scroll-snap-align:start;
  }

  .startCard .cardImg img{
    height:210px;
  }
}

/* MISSION / VISION / VISIT SECTION */

.missionStatement{
  font-weight: 800;
  line-height: 1.45;
  font-size: 1.02rem;
  color: #c33f50;
  margin-bottom: 14px;
}

.missionVisionFeature .note{
  margin: 0 0 12px;
  line-height: 1.78;
  color: #3f4a5d;
  font-size: .98rem;
  position: relative;
  z-index: 1;
}

.missionVisionFeature .pill{
  width: fit-content;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.missionVisionFeature .btn{
  margin-top: 8px;
}

.missionVisionFeature--mission{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.99));
  border: 1px solid rgba(255,95,109,.26);
}

.missionVisionFeature--mission::before{
  background:
    radial-gradient(circle at top left, rgba(255,95,109,.16), transparent 38%),
    linear-gradient(135deg, rgba(255,95,109,.08), transparent 42%);
}

.missionVisionFeature--vision{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.99));
  border: 1px solid rgba(105,190,255,.24);
}

.missionVisionFeature--vision::before{
  background:
    radial-gradient(circle at top right, rgba(105,190,255,.15), transparent 40%),
    linear-gradient(135deg, rgba(105,190,255,.08), transparent 45%);
}

.missionVisionFeature--visit{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.99));
  border: 1px solid rgba(214,170,72,.26);
}

.missionVisionFeature--visit::before{
  background:
    radial-gradient(circle at top left, rgba(214,170,72,.15), transparent 40%),
    linear-gradient(135deg, rgba(214,170,72,.08), transparent 45%);
}

.missionVisionFeature{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20, 30, 60, 0.05);
  transition: transform .22s ease, box-shadow .22s ease;
}

.missionVisionFeature::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.9;
}

.missionVisionFeature:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(20,30,60,.09);
}

/* MISSION / VISION / VISIT MOBILE SWIPE */
.missionVisionRail{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 900px){
  .missionVisionRail{
    display: flex;
    overflow-x: auto;
    gap: 14px;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .missionVisionRail::-webkit-scrollbar{
    display: none;
  }

  .missionVisionRail .missionVisionFeature{
    min-width: 88%;
    flex: 0 0 88%;
    scroll-snap-align: start;
  }
}

.visitTimesText strong{
  color: #172033;
  font-weight: 800;
}

.visitTimesSub{
  display: inline-block;
  opacity: .82;
  font-size: .93em;
}

.missionVisionFeature--mission .missionStatement{
  color: #b63a4b;
}

.missionVisionFeature--vision .pill{
  border-color: rgba(105,190,255,.32);
}

.missionVisionFeature--visit .pill{
  border-color: rgba(214,170,72,.34);
}

@media (max-width: 900px){
  .startCardsRail .card{
    width:auto !important;
    max-width:none !important;
  }
}

@media (max-width: 900px){
  .startCardsRail > *{
    flex: 0 0 84% !important;
    min-width: 84% !important;
    max-width: 84% !important;
  }
}

@media (min-width: 1100px){
  .aboutHeroPhotoCard{
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }

  .aboutHeroPhotoCard img{
    width: 100%;
    height: 100%;
    min-height: 510px;
    object-fit: cover;
    object-position: center 18%;
    display: block;
  }

  .aboutHeroPhotoContent{
    left: 42px;
    top: 34px;
    right: 42px;
    max-width: 540px;
    z-index: 2;
  }

  .aboutHeroPhotoContent .kicker{
    margin-bottom: 10px;
  }

  .aboutHeroPhotoContent h2{
    font-size: clamp(2rem, 2.8vw, 3.2rem);
    line-height: 1.05;
    margin: 10px 0 12px;
  }

  .aboutHeroPhotoContent p{
    font-size: 1.06rem;
    line-height: 1.62;
    max-width: 30ch;
    margin: 0;
  }
}

@media (min-width: 1100px){

  .aboutPastorsInner{
    display: grid !important;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 30px;
    align-items: start;
  }

  .aboutPastorsCopy{
    display: block !important;
  }

  .aboutPastorsGrid{
    width: 100%;
    max-width: 520px;
    margin: 34px auto 0 auto;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
    justify-self: center;
    float: none !important;
  }

  .aboutPastorsGrid .bandImg{
    border-radius: 18px;
    overflow: hidden;
  }

  .aboutPastorsGrid .bandImg img{
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
  }

  .aboutPastorsBand::after,
  .aboutPastorsInner::after{
    content: "";
    display: block;
    clear: both;
  }
}

@media (min-width: 1100px){

  .ministriesTopGrid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
  }

  .ministriesTopGrid .worshipArtsCard,
  .ministriesTopGrid .growthGroupsCard{
    margin-top: 0 !important;
    height: 100%;
  }

  .ministriesTopGrid .worshipArtsCard .cardImg img{
    height: 280px;
    object-fit: cover;
    object-position: center 35%;
    display: block;
    width: 100%;
  }

  .ministriesTopGrid .growthGroupsCard{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }
}

.growthGroupsCard{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(105,190,255,.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.99)),
    linear-gradient(135deg, rgba(105,190,255,.08), rgba(255,255,255,0) 45%);
  box-shadow: 0 10px 30px rgba(20,30,60,.05);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.growthGroupsCard::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at top right, rgba(105,190,255,.14), transparent 38%),
    radial-gradient(circle at bottom left, rgba(255,95,109,.08), transparent 32%);
  opacity:.95;
}

.growthGroupsCard > *{
  position: relative;
  z-index: 1;
}

.growthGroupsCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(20,30,60,.10);
  border-color: rgba(105,190,255,.34);
}

.growthGroupsCard .lead{
  font-weight: 700;
}

.growthGroupsCard .note{
  line-height: 1.72;
}

.growthGroupsCard .btn{
  transition: transform .2s ease, box-shadow .2s ease;
}

.growthGroupsCard:hover .btn.primary{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(227,66,66,.18);
}

.worshipArtsCard{
  overflow: hidden;
}

.worshipArtsCard .cardPad{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.worshipArtsCard .note{
  line-height:1.65;
}

@media (min-width: 1100px){

  .ministriesTopGrid{
    display:grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 28px;
    align-items: start;
  }

  .ministriesTopGrid .worshipArtsCard,
  .ministriesTopGrid .growthGroupsCard{
    margin-top: 0 !important;
  }

  .worshipArtsCard{
    min-height: 540px;
    border-radius: 24px;
    overflow: hidden;
  }

  .worshipArtsCard img{
    width: 100%;
    height: 100%;
    min-height: 540px;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .worshipArtsCard .overlayContent{
    justify-content: flex-end;
    padding: 28px;
  }

  .growthGroupsCard{
    min-height: 540px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    border: 1px solid rgba(105,190,255,.24);
    background:
      linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.99)),
      linear-gradient(135deg, rgba(105,190,255,.08), rgba(255,255,255,0) 45%);
    box-shadow: 0 12px 34px rgba(20,30,60,.06);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }

  .growthGroupsCard:hover{
    transform: translateY(-4px);
    box-shadow: 0 20px 42px rgba(20,30,60,.10);
    border-color: rgba(105,190,255,.34);
  }

  .growthGroupsCard .kicker{
    margin-bottom: 8px;
  }

  .growthGroupsCard .lead{
    font-weight: 700;
  }

  .growthGroupsCard .note{
    line-height: 1.72;
  }
}

@media (min-width: 1100px){

  .eventsTopRow{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:24px;
    align-items:stretch;
  }

  .eventsBottomRow{
    display:grid;
    grid-template-columns: 1.1fr 1.1fr 0.8fr;
    gap:24px;
    align-items:stretch;
  }

  .eventsTopRow .eventOverlayCard,
  .eventsBottomRow .eventOverlayCard{
    height:100%;
    min-height:0;
  }

  .eventsTopRow .eventOverlayCard{
    min-height: 500px;
  }

  .eventsBottomRow .eventOverlayCard{
    min-height: 420px;
  }

  .eventsTopRow .overlayContent,
  .eventsBottomRow .overlayContent{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:28px;
  }

  .eventsTopRow .overlayContent h3{
    font-size: clamp(2rem, 2.7vw, 3.1rem);
    line-height: 0.98;
  }

  .eventsBottomRow .overlayContent h3{
    font-size: clamp(1.35rem, 1.8vw, 2.1rem);
    line-height: 1.02;
  }

  .eventsTopRow .overlayContent p{
    max-width: 20ch;
    line-height:1.45;
  }

  .eventsBottomRow .overlayContent p{
    max-width: 18ch;
    line-height:1.45;
  }

  .eventsTopRow img,
  .eventsBottomRow img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
}

/* PLAN YOUR VISIT */
.visitHeroCard{
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.99)),
    linear-gradient(135deg, rgba(105,190,255,.08), rgba(255,255,255,0) 45%);
  border:1px solid rgba(105,190,255,.20);
  box-shadow:0 12px 30px rgba(20,30,60,.05);
}

.visitStepsSection{

  background:

    /* gold glow from edges */
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,1) 45%,
      rgba(230,195,120,0.18) 70%,
      rgba(214,170,72,0.28) 100%
    ),

    /* subtle warmth layer */
    linear-gradient(
      180deg,
      rgba(255,255,255,.96),
      rgba(255,255,255,.99)
    );

  border:1px solid rgba(214,170,72,.35);

  border-radius:28px;

  padding:32px;

  box-shadow:
    0 12px 30px rgba(20,30,60,.05),
    0 0 0 1px rgba(214,170,72,.08) inset;
}

.visitStepsHead{
  margin-bottom:18px;
}

.visitStepsPill{
  width:fit-content;
}

.visitStepsList{
  display:flex;
  flex-direction:column;
  gap:26px;
}

.visitStepCard{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:24px;
  align-items:center;
}

.visitStepNumberWrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:220px;
  border-radius:999px;
  /*background:#292b4a;*/
  overflow:hidden;
}

.visitStepNumberWrap{
  background:
    radial-gradient(circle at center,
      #34365a 0%,
      #262843 70%,
      #1f2138 100%
    );
}

.visitStepNumber{
  font-size:8rem;
  line-height:1;
  font-weight:700;
  color:rgba(255,255,255,.92);
}

.visitStepScript{
  position:absolute;
  color:#ff1f1f;
  font-size:4rem;
  line-height:1;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  transform: translateY(16px) rotate(-6deg);
}

.visitStepContent h2{
  margin:0 0 4px;
  font-size:clamp(1.4rem, 2.5vw, 2rem);
  line-height:1.05;
}

.visitStepSub{
  margin:0 0 10px;
  font-size:1.2rem;
  color:#444c61;
  font-weight:500;
}

.visitStepContent .note{
  margin:0;
  line-height:1.7;
  font-size:1.05rem;
}

.visitWelcomeClose{
  margin-top:28px;
  text-align:center;
  font-size:clamp(1.4rem, 2.2vw, 2.2rem);
  font-weight:800;
  letter-spacing:.02em;
  color:#232743;
}

.visitExpectCard{
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.99)),
    linear-gradient(135deg, rgba(214,170,72,.08), rgba(255,255,255,0) 45%);
  border:1px solid rgba(214,170,72,.18);
}

.visitQuickInfo{
  display:grid;
  gap:12px;
  margin-top:16px;
}

.visitQuickItem{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.visitQuickItem strong{
  color:#172033;
}

@media (max-width: 900px){
  .visitStepsSection{
    padding:20px;
  }

  .visitStepCard{
    grid-template-columns: 1fr;
    gap:16px;
  }

  .visitStepNumberWrap{
    min-height:180px;
  }

  .visitStepNumber{
    font-size:6rem;
  }

  .visitStepScript{
    font-size:3.2rem;
  }
}

.giveWhyCard{

  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.99)),
    radial-gradient(circle at center,
      rgba(214,170,72,.10),
      rgba(255,255,255,0) 70%
    );

  border:1px solid rgba(214,170,72,.25);

  border-radius:24px;

  padding:34px;

  box-shadow:
    0 14px 34px rgba(20,30,60,.06),
    0 0 0 1px rgba(214,170,72,.10) inset,
    0 0 30px rgba(214,170,72,.12);

}

@media (min-width:1200px){

  .giveWhyCard{
    padding:42px 40px;
  }

  .giveWhyCard h3{
    font-size:2.3rem;
    line-height:1.08;
    margin-bottom:18px;
  }

  .giveWhyCard .note{
    font-size:1.15rem;
    line-height:1.9;
    margin-bottom:16px;
  }

  .giveVerse{
    margin-top:20px;
    font-size:1.15rem;
  }

}

.giveWhyCard{
  transition: all .35s ease;
}

.giveWhyCard:hover{
  transform: translateY(-4px);
  box-shadow:
    0 18px 40px rgba(20,30,60,.08),
    0 0 0 1px rgba(214,170,72,.15) inset,
    0 0 40px rgba(214,170,72,.18);
}

.giveBandImage img{
  max-width:720px;
  height:380px;
}

.giveWhyCard h3{
  margin:14px 0 10px;
  font-size:clamp(1.4rem, 2vw, 2rem);
  line-height:1.08;
}

.giveWhyCard .note{
  line-height:1.72;
}

.giveVerse{
  font-weight:600;
  color:#2a3048;
}

@media (min-width:1100px){
  .giveBandInner{
    display:grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap:36px;
    align-items:start;
  }

  .giveBandMain{
    display:block;
  }

  .giveBandImage img{
    width:100%;
    max-width:670px;
    height:360px;
    object-fit:cover;
    border-radius:20px;
    display:block;
  }

  .giveWhyCard{
    align-self:stretch;
    min-height:100%;
  }
}

/* =========================
   ABOUT PAGE ELEVATION
   ========================= */

.aboutPage .missionVisionCard,
.aboutPage .aboutBeliefTabs,
.aboutPage .aboutStoryCard,
.aboutPage .aboutPastorsBand,
.aboutPage .card.cardPad{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

/* Soft premium glow base */
.aboutPage .missionVisionCard::before,
.aboutPage .aboutBeliefTabs::before,
.aboutPage .aboutStoryCard::before,
.aboutPage .aboutPastorsBand::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .95;
}

/* Top intro card */
.aboutPage .missionVisionCard{
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.995));
  border: 1px solid rgba(214,170,72,.16);
  box-shadow: 0 12px 34px rgba(20,30,60,.05);
}

.aboutPage .missionVisionCard::before{
  background:
    radial-gradient(circle at top left, rgba(214,170,72,.12), transparent 34%),
    linear-gradient(135deg, rgba(105,190,255,.06), transparent 45%);
}

/* Mission / Vision two-card row */
.aboutPage .grid2 .missionVisionCard:nth-child(1){
  border-left: 4px solid rgba(214,170,72,.55);
}

.aboutPage .grid2 .missionVisionCard:nth-child(2){
  border-left: 4px solid rgba(105,190,255,.48);
}

.aboutPage .grid2 .missionVisionCard:nth-child(1)::before{
  background:
    radial-gradient(circle at bottom left, rgba(214,170,72,.10), transparent 32%);
}

.aboutPage .grid2 .missionVisionCard:nth-child(2)::before{
  background:
    radial-gradient(circle at top right, rgba(105,190,255,.10), transparent 34%);
}

/* Hover lift for desktop */
@media (min-width: 900px){
  .aboutPage .missionVisionCard:hover,
  .aboutPage .aboutBeliefTabs:hover,
  .aboutPage .aboutStoryCard:hover,
  .aboutPage .aboutPastorsBand:hover{
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(20,30,60,.09);
  }
}

.aboutHeroPhotoContent{
  padding: 22px;
}

.aboutHeroPhotoContent h2{
  font-size: 1.12rem;
  line-height: 1.16;
  margin: 8px 0 10px;
}

.aboutHeroPhotoContent p{
  font-size: .95rem;
  line-height: 1.52;
  max-width: 22ch;
  margin: 0;
}

/* Hero photo card */
.aboutHeroPhotoCard{
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 18px 40px rgba(20,30,60,.10),
    0 0 0 1px rgba(214,170,72,.08) inset;
    min-height: 510px;
}

.aboutHeroPhotoCard::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(15,18,35,.42) 0%, rgba(15,18,35,.18) 35%, rgba(15,18,35,.34) 100%),
    radial-gradient(circle at top left, rgba(214,170,72,.15), transparent 25%);
}

.aboutHeroPhotoContent{
  position: absolute;
  z-index: 2;
}

.aboutHeroPhotoContent h2{
  text-shadow: 0 4px 18px rgba(0,0,0,.20);
}

.aboutHeroPhotoContent p{
  max-width: 34ch;
  text-shadow: 0 3px 14px rgba(0,0,0,.18);
}

/* Belief tabs card */
.aboutBeliefTabs{
  background:
    linear-gradient(180deg, rgba(255,255,255,.975), rgba(255,255,255,.995));
  border: 1px solid rgba(20,30,60,.08);
  box-shadow: 0 12px 34px rgba(20,30,60,.05);
}

.aboutBeliefTabs::before{
  background:
    radial-gradient(circle at top right, rgba(214,170,72,.10), transparent 28%),
    radial-gradient(circle at bottom left, rgba(105,190,255,.08), transparent 28%);
}

.aboutTabBtn{
  transition: all .22s ease;
}

.aboutTabBtn.active{
  box-shadow: 0 10px 22px rgba(20,30,60,.10);
}

/* Pastors band */
.aboutPastorsBand{
  background:
    linear-gradient(180deg, rgba(242,249,255,.94), rgba(247,252,255,.98));
  border: 1px solid rgba(105,190,255,.24);
  box-shadow: 0 14px 36px rgba(20,30,60,.06);
}

.aboutPastorsBand::before{
  background:
    radial-gradient(circle at top left, rgba(105,190,255,.12), transparent 30%),
    radial-gradient(circle at bottom right, rgba(214,170,72,.10), transparent 30%);
}

.aboutPastorsGrid .bandImg{
  box-shadow: 0 16px 34px rgba(20,30,60,.12);
}

.aboutPastorsGrid .bandImg img{
  transition: transform .35s ease;
}

.aboutPastorsGrid .bandImg:hover img{
  transform: scale(1.03);
}

/* Story card */
.aboutStoryCard{
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.995));
  border: 1px solid rgba(214,170,72,.16);
  box-shadow: 0 12px 34px rgba(20,30,60,.05);
}

.aboutStoryCard::before{
  background:
    radial-gradient(circle at bottom left, rgba(214,170,72,.12), transparent 30%);
}

/* Final CTA card */
.aboutPage .card.cardPad:last-of-type{
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.995));
  border: 1px solid rgba(255,95,109,.12);
  box-shadow: 0 12px 32px rgba(20,30,60,.05);
}

.aboutPage .card.cardPad:last-of-type::before{
  background:
    radial-gradient(circle at top right, rgba(255,95,109,.10), transparent 28%);
}

/* Better spacing / elegance on desktop */
@media (min-width: 1100px){
  .aboutPage .missionVisionCard,
  .aboutPage .aboutBeliefTabs,
  .aboutPage .aboutStoryCard,
  .aboutPage .aboutPastorsBand{
    padding: 30px;
  }

  .aboutHeroPhotoCard{
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }

  .aboutHeroPhotoCard img{
    width: 100%;
    height: 100%;
    min-height: 510px;
    object-fit: cover;
    object-position: center 18%;
    display: block;
  }

  .aboutHeroPhotoContent{
    left: 34px;
    top: 34px;
    max-width: 560px;
  }

  .aboutHeroPhotoContent h2{
    font-size: clamp(2.2rem, 3vw, 3.4rem);
    line-height: 1.02;
    margin: 14px 0 10px;
  }

  .aboutHeroPhotoContent p{
    font-size: 1.15rem;
    line-height: 1.65;
  }
}

/* Mobile polish only — keep layout nice without changing structure */
@media (max-width: 900px){
  .aboutHeroPhotoCard{
    border-radius: 24px;
  }

  .aboutHeroPhotoCard img{
    height: 360px;
    object-fit: cover;
    object-position: center 22%;
  }

  .aboutHeroPhotoContent{
    padding: 20px;
  }

  .aboutHeroPhotoContent h2{
    font-size: 1.15rem;
    line-height: 1.12;
  }

  .aboutHeroPhotoContent p{
    font-size: .98rem;
    line-height: 1.5;
    max-width: 24ch;
  }

  .aboutPastorsGrid .bandImg{
    border-radius: 18px;
  }
}

@media (min-width: 1100px){
  .aboutPage > main .container > .missionVisionCard:first-child{
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }
}

.aboutPage .grid2 .missionVisionCard h2{
  font-size: clamp(1.6rem, 2vw, 2.2rem);
  line-height: 1.06;
  margin-bottom: 14px;
}

.aboutPage .grid2 .missionVisionCard .note{
  line-height: 1.78;
}

/* =========================================
   ABOUT HERO HARD OVERRIDE
   Put this at the VERY BOTTOM of styles.css
   ========================================= */
.aboutPage .aboutHeroPhotoCard{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 30px !important;
  min-height: 520px !important;
}

.aboutPage .aboutHeroPhotoCard img{
  width: 100% !important;
  height: 520px !important;
  min-height: 520px !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  display: block !important;
}

.aboutPage .aboutHeroPhotoContent{
  position: absolute !important;
  z-index: 3 !important;
  left: 56px !important;
  top: 52px !important;
  right: auto !important;
  bottom: auto !important;
  width: min(560px, calc(100% - 112px)) !important;
  max-width: 560px !important;
  padding: 0 !important;
}

.aboutPage .aboutHeroPhotoContent .kicker{
  margin-bottom: 12px !important;
}

.aboutPage .aboutHeroPhotoContent h2{
  margin: 0 0 14px !important;
  font-size: clamp(2.2rem, 3vw, 3.5rem) !important;
  line-height: 1.06 !important;
}

.aboutPage .aboutHeroPhotoContent p{
  margin: 0 !important;
  font-size: 1.12rem !important;
  line-height: 1.62 !important;
  max-width: 31ch !important;
}

/* mobile stays safe */
@media (max-width: 900px){
  .aboutPage .aboutHeroPhotoCard{
    min-height: 360px !important;
  }

  .aboutPage .aboutHeroPhotoCard img{
    height: 360px !important;
    min-height: 360px !important;
    object-position: center 22% !important;
  }

  .aboutPage .aboutHeroPhotoContent{
    left: 22px !important;
    top: 22px !important;
    width: calc(100% - 44px) !important;
    max-width: calc(100% - 44px) !important;
  }

  .aboutPage .aboutHeroPhotoContent h2{
    font-size: 1.14rem !important;
    line-height: 1.15 !important;
    margin: 0 0 10px !important;
  }

  .aboutPage .aboutHeroPhotoContent p{
    font-size: .95rem !important;
    line-height: 1.5 !important;
    max-width: 22ch !important;
  }
}

/* homepage events preview cleanup */
@media (min-width: 900px){
  .grid2 > .card.cardPad{
    min-height: 170px;
  }

  .grid2 > .card.cardPad .note{
    font-size: 1.05rem;
    line-height: 1.7;
  }
}

.site-footer {
  background: #1a1a1a;
  color: #ffffff;
  padding: 40px 20px;
  font-size: 14px;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 30px;
}

.footer-links a {
  display: block;
  color: #ffffff;
  text-decoration: none;
  margin: 5px 0;
}

.social-icons img {
  width: 22px;
  margin-right: 12px;
  filter: brightness(0) invert(1);
}

.footer-bottom {
  margin-top: 30px;
  text-align: center;
  opacity: 0.7;
}

.churchFooter{
  margin-top:48px;
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
}
.churchFooter__inner{
  max-width:1200px;
  margin:0 auto;
  padding:18px 16px 14px;
  display:grid;
  grid-template-columns:1.15fr 1.6fr .8fr .9fr;
  gap:14px 18px;
  align-items:center;
}
.churchFooter__brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.churchFooter__logo{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:.86rem;
  color:#fff;
  background:linear-gradient(135deg,#8fd3ff,#6aa4ff);
  box-shadow:0 8px 20px rgba(106,164,255,.25);
}
.churchFooter__name{
  font-weight:700;
  letter-spacing:.02em;
  color:inherit;
}
.churchFooter__links{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
}
.churchFooter__links a,
.churchFooter__legalBtn{
  font-size:.94rem;
  text-decoration:none;
  color:inherit;
  opacity:.88;
  transition:.2s ease;
}
.churchFooter__links a:hover,
.churchFooter__legalBtn:hover,
.churchFooter__socials a:hover{
  opacity:1;
  transform:translateY(-1px);
}
.churchFooter__socials{
  display:flex;
  justify-content:flex-start;
  gap:10px;
}
.churchFooter__socials a{
  width:36px;
  height:36px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:inherit;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  transition:.2s ease;
}
.churchFooter__socials svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
.churchFooter__legal{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  justify-content:flex-start;
}
.churchFooter__legalBtn{
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
.churchFooter__copy{
  grid-column:1 / -1;
  padding-top:4px;
  font-size:.84rem;
  opacity:.68;
}

.churchModal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.58);
  z-index:9999;
}
.churchModal.is-open{ display:flex; }
.churchModal__box{
  width:min(560px,100%);
  max-height:82vh;
  overflow:auto;
  position:relative;
  border-radius:18px;
  padding:22px 18px 16px;
  background:#121212;
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
}
.churchModal__box h3{
  margin:0 28px 10px 0;
  font-size:1.1rem;
}
.churchModal__box p{
  margin:0 0 10px;
  line-height:1.55;
  opacity:.92;
}
.churchModal__close{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border:0;
  border-radius:999px;
  cursor:pointer;
  font-size:1.2rem;
  color:#fff;
  background:rgba(255,255,255,.08);
}
.churchModal-open{ overflow:hidden; }

@media (max-width: 900px){
  .churchFooter__inner{
    grid-template-columns:1fr;
    gap:12px;
    align-items:start;
  }
  .churchFooter__socials,
  .churchFooter__legal{
    justify-content:flex-start;
  }
}

.churchFooter__logoImg{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
}