/* ===== Scroll Reveal ===== */
@media (prefers-reduced-motion: no-preference) {
   .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.6s ease, transform 0.6s ease;
   }
   .reveal--visible {
      opacity: 1;
      transform: translateY(0);
   }
}

:root {
   /* Change these 5 values and your whole site updates */
   --font: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

   --accent: #d04a46;
   /* your red */
   --accent-2: #b93f3b;
   /* darker red */
   --ink: #121212;
   --muted: #666;
   --bg: #fff8f8;

   --nav: #1c1008;
   --soft: #fdf7f4;
   --shadow: 0 4px 20px rgba(0, 0, 0, .09), 0 1px 4px rgba(0, 0, 0, .06);
   --radius: 12px;
   --max: 1180px;
}

* {
   box-sizing: border-box;
}

html,
body {
   height: 100%;
}

body {
   margin: 0;
   font-family: var(--font);
   color: var(--ink);
   background: var(--bg);
}

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

.container {
   width: min(var(--max), calc(100% - 40px));
   margin: 0 auto;
}

/* ===== Topbar ===== */
.topbar {
   background: linear-gradient(to bottom, #fdf7f4, #f5ede7);
   border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.topbar__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 0;
   gap: 18px;
}

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

.brand__logo {
   width: 56px;
   height: 56px;
   object-fit: contain;
}

.brand__name {
   font-family: "Cinzel", serif;
   font-size: clamp(18px, 2vw, 34px);
   font-weight: 700;
   letter-spacing: 1px;
   color: var(--ink);
   text-shadow: none;
}


.topbar__actions {
   display: flex;
   align-items: center;
   gap: 12px;
}

.icon-sq {
   width: 40px;
   height: 40px;
   display: grid;
   place-items: center;
   border: none;
   border-radius: 8px;
   background: rgba(0, 0, 0, .05);
   transition: background .15s ease;
}

.icon-sq:hover {
   background: rgba(0, 0, 0, .10);
}

.icon-sq img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: block;
}

.icon-circle {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   background: none;
   transition: background .15s ease;
}

.icon-circle:hover {
   background: rgba(0, 0, 0, .06);
}

/* ===== Nav ===== */
.nav {
   position: sticky;
   top: 0;
   z-index: 50;
   background: var(--nav);
   border-bottom: 3px solid var(--accent);
   box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
}

.nav__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 0;
   height: 64px;
}

.nav__toggle {
   display: none;
   background: transparent;
   border: 0;
   color: #fff;
   font-size: 22px;
   cursor: pointer;
}

.nav__links {
   list-style: none;
   display: flex;
   align-items: center;
   gap: 26px;
   margin: 0;
   padding: 0;
}

.nav__link {
   color: #fff;
   text-transform: uppercase;
   letter-spacing: .16em;
   font-size: 12px;
   font-weight: 700;
   opacity: .92;
   padding: 22px 0;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   position: relative;
}

.nav__link::after {
   content: "";
   position: absolute;
   bottom: 16px;
   left: 0;
   width: 100%;
   height: 2px;
   background: var(--accent);
   border-radius: 1px;
   transform: scaleX(0);
   transform-origin: left center;
   transition: transform .2s ease;
}

.nav__link:hover,
.nav__link.is-active {
   opacity: 1;
}

.nav__link:hover::after,
.nav__link.is-active::after {
   transform: scaleX(1);
}

.has-dropdown {
   position: relative;
}

.dropdown {
   position: absolute;
   top: 60px;
   left: 0;
   background: #fff;
   border-radius: 10px;
   box-shadow: var(--shadow);
   padding: 10px;
   min-width: 240px;
   list-style: none;
   margin: 0;
   display: none;
}

.dropdown a {
   display: block;
   padding: 10px 12px;
   border-radius: 8px;
   color: #222;
   font-weight: 600;
   font-size: 13px;
}

.dropdown a:hover {
   background: #f6f6f6;
}

.has-dropdown:hover .dropdown {
   display: block;
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 0;
   cursor: pointer;
   font-weight: 800;
   letter-spacing: .08em;
   text-transform: uppercase;
}

.btn--primary {
   background: var(--accent);
   color: #fff;
   padding: 12px 22px;
   border-radius: 10px;
}

.btn--primary:hover {
   background: var(--accent-2);
}

.btn--ghost {
   background: #fff;
   border: 2px solid #e7e7e7;
   color: #222;
   padding: 13px 28px;
   border-radius: 10px;
   font-weight: 700;
   transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
}

.btn--ghost:hover {
   background: #f2f2f2;
   border-color: #ccc;
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}

.btn--pill {
   background: #fff;
   color: var(--accent);
   padding: 15px 36px;
   border-radius: 999px;
   font-size: 14px;
   font-weight: 800;
   letter-spacing: .06em;
   text-transform: uppercase;
   box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
   transition: transform .2s, box-shadow .2s, background .2s;
   display: inline-flex;
   align-items: center;
   gap: 10px;
}

.btn--pill:hover {
   background: #fff;
   transform: translateY(-3px);
   box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
}

/* ===== Hero ===== */
.hero {
   --hero-img: url("assets/womenumc.jpg");
   position: relative;
   min-height: 520px;
   display: grid;
   align-items: start;
   overflow: hidden;
}

.hero__bg {
   position: absolute;
   inset: 0;
   background-image:
      linear-gradient(to bottom, rgba(0, 0, 0, .20) 0%, rgba(0, 0, 0, 0) 100%),
      var(--hero-img);
   background-size: cover;
   background-position: center;
   transform: scale(1.03);
   filter: contrast(1.08) saturate(1.06);
}

.hero__content {
   position: relative;
   text-align: center;
   padding: 28px 0 36px;
   color: #fff;
}

.hero h1 {
   font-family: "Cinzel", serif;
   font-size: clamp(38px, 5vw, 66px);
   margin: 0 0 10px;
   font-weight: 800;
}

.hero__sub {
   margin: 0 0 20px;
   font-size: clamp(20px, 2.8vw, 30px);
   font-weight: 800;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   background: linear-gradient(90deg, #ffffff 30%, var(--accent) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.hero__service {
   font-size: 13px;
   font-weight: 600;
   color: rgba(255, 255, 255, .8);
   letter-spacing: .04em;
   margin: 0 0 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
}

.hero__dots {
   margin-top: 12px;
   display: flex;
   gap: 10px;
   justify-content: center;
   z-index: 5;
   position: relative;
}

.hero__dot {
   width: 7px;
   height: 7px;
   padding: 0;
   /* <- important */
   border-radius: 50%;
   display: inline-block;
   /* <- important */
   line-height: 0;
   /* <- important */
   border: none;
   background: rgba(255, 255, 255, .4);
   cursor: pointer;
}

.hero__dot:hover {
   transform: scale(1.2);
}

.hero__dot.active {
   background: var(--accent);
   width: 22px;
   height: 7px;
   border-radius: 4px;
   transform: none;
   opacity: 1;
}

/* ==== Hero Arrows */
.hero__arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 5;

   width: 46px;
   height: 46px;
   border-radius: 999px;

   display: grid;
   place-items: center;

   border: 1px solid rgba(255, 255, 255, .35);
   background: rgba(0, 0, 0, .35);
   color: #fff;
   cursor: pointer;

   backdrop-filter: blur(6px);
   transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.hero__arrow:hover {
   background: rgba(0, 0, 0, .5);
   border-color: rgba(255, 255, 255, .6);
}

.hero__arrow:active {
   transform: translateY(-50%) scale(.98);
}

.hero__arrow--left {
   left: 16px;
}

.hero__arrow--right {
   right: 16px;
}

/* Make arrows easier on mobile */
@media (max-width: 700px) {
   .hero__arrow {
      width: 42px;
      height: 42px;
   }

   .hero__arrow--left {
      left: 10px;
   }

   .hero__arrow--right {
      right: 10px;
   }

   .hero__bg {
      background-position: center 20%;
   }
}

/* ✅ Let taps go through the background layer */
.hero__bg {
   pointer-events: none;
}

/* ✅ Make arrow taps feel perfect on iPhone */
.hero__arrow {
   position: absolute;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
}

/* ✅ Bigger invisible hitbox without changing the look */
.hero__arrow::before {
   content: "";
   position: absolute;
   inset: -14px;
   /* increases tap area */
}

/* ==== Hero Woosh Effects ==== */

.hero {
   position: relative;
   overflow: hidden;
   min-height: 520px;
   display: grid;
   align-items: end;
}

/* two background layers */
.hero__bg {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   will-change: transform;
}

/* keep text + buttons above overlay */
.hero__content,
.hero__dots {
   position: relative;
   z-index: 5;
}


/* ===== Sections ===== */
/* ===== Feature cards ===== */
.cards3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 26px;
}

.feature-card {
   background: #fff;
   border: 1px solid #ededed;
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   padding: 34px 26px;

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

   text-align: center;
   min-height: 190px;

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

.feature-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 16px 30px rgba(0, 0, 0, .12);
}

.feature-card__icon {
   width: 72px;
   height: 72px;
   border-radius: 16px;
   overflow: hidden;
   /* clips the image to rounded corners */
   display: grid;
   place-items: center;
   margin-bottom: 18px;
}

.feature-card__icon img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* fills the box (no background showing) */
   display: block;
}

.feature-card__body {
   display: flex;
   flex-direction: column;
   align-items: center;
   /* centers the arrow + title */
}

.feature-card h3 {
   margin: 0 0 18px;
   font-size: 20px;
   font-weight: 800;
}

.feature-card__arrow {
   width: 42px;
   height: 42px;
   border-radius: 999px;
   background: var(--accent);
   color: #fff;
   display: grid;
   place-items: center;
}

.section--tight {
   padding: clamp(36px, 5vw, 64px) 0;
}

/* ===== Banner ===== */
/* ===== Banner (Theme for 2026) — Make it POP ===== */
.banner {
   position: relative;
   padding: clamp(70px, 8vw, 110px) 0;
   overflow: hidden;
   background: transparent;
}

.banner::before,
.banner::after {
   display: none;
}

.banner__inner {
   position: relative;
   z-index: 1;
   text-align: center;
   max-width: 980px;
   margin: 0 auto;
}

/* THE THEME (make it look like the star) */
.banner h2 {
   margin: 0 0 14px;
   font-size: clamp(40px, 5vw, 72px);
   font-style: italic;
   font-weight: 900;
   letter-spacing: -0.8px;
   line-height: 1.05;
   background: linear-gradient(135deg, #1a1a1a 40%, #c0392b 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

/* accent underline (small but powerful) */
.banner h2::after {
   content: "";
   display: block;
   width: min(280px, 55%);
   height: 4px;
   margin: 18px auto 0;
   background: linear-gradient(90deg, transparent, var(--accent), transparent);
   border-radius: 999px;
   opacity: 1;
}

/* The “Theme for 2026” pill should look premium */
.banner .pill {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 10px 20px;
   border-radius: 999px;
   border: 1px solid rgba(192, 57, 43, .3);
   background: rgba(192, 57, 43, .08);
   color: var(--accent);
   font-weight: 800;
   letter-spacing: .12em;
   text-transform: uppercase;
   font-size: 12px;
   margin-bottom: 22px;
}

/* Make the verse read like an intentional quote block */
.banner__verse {
   margin: 0 auto;
   max-width: 900px;
   padding: 20px 22px;
   border-radius: 16px;
   background: rgba(0, 0, 0, .04);
   border: 1px solid rgba(0, 0, 0, .08);
   line-height: 1.8;
   font-size: clamp(14px, 1.2vw, 16px);
   color: #444;
}

/* Verse reference (Ephesians 2:10) stands out */
.banner__verse strong {
   color: var(--accent);
   font-weight: 900;
}

/* subtle quote marks */
.banner__verse::before {
   content: “””;
   font-size: 40px;
   line-height: 0;
   vertical-align: -12px;
   margin-right: 8px;
   color: rgba(0, 0, 0, .2);
}

.banner__verse::after {
   content: “””;
   font-size: 40px;
   line-height: 0;
   vertical-align: -12px;
   margin-left: 8px;
   color: rgba(0, 0, 0, .2);
}

/* ===== Leaders ===== */
#leaders {
   background: #f7f5f2;
   padding: clamp(70px, 9vw, 100px) 0;
}

.leaders {
   display: flex;
   justify-content: center;
   align-items: flex-end;
   gap: 60px;
   flex-wrap: wrap;
}

.leader-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   background: none;
   border: none;
   box-shadow: none;
}

.leader-card img {
   width: 220px;
   height: 220px;
   border-radius: 50%;
   object-fit: cover;
   object-position: center 15%;
   display: block;
   box-shadow: 0 8px 28px rgba(0, 0, 0, .14);
   border: 4px solid #fff;
   transition: transform .2s ease, box-shadow .2s ease;
}

.leader-card:hover img {
   transform: translateY(-4px);
   box-shadow: 0 14px 36px rgba(0, 0, 0, .18);
}

.leader-card__body {
   padding: 16px 0 0;
   text-align: center;
}

.leader-card h3 {
   margin: 0 0 12px;
   font-size: 18px;
   font-weight: 800;
}

.link--accent {
   color: var(--accent);
   font-weight: 700;
}

.link--accent:hover {
   text-decoration: underline;
}

/* ===== Section Title ===== */
.section__title {
   font-size: clamp(24px, 3vw, 38px);
   font-weight: 800;
   text-align: center;
   margin: 0 0 40px;
   letter-spacing: -0.4px;
}

/* ===== Join Strip ===== */
.join-strip {
   padding: clamp(50px, 7vw, 80px) 0;
   position: relative;
   overflow: hidden;
   background:
      linear-gradient(to right, rgba(0, 0, 0, .78) 0%, rgba(74, 26, 26, .65) 60%, rgba(176, 50, 46, .55) 100%),
      url("assets/banners/menumc.jpg");
   background-size: cover;
   background-position: center 40%;
}

.join-strip::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='18' y='6' width='4' height='28' fill='white' opacity='0.05'/%3E%3Crect x='6' y='18' width='28' height='4' fill='white' opacity='0.05'/%3E%3C/svg%3E");
   pointer-events: none;
}

.join-strip__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   flex-wrap: wrap;
   position: relative;
}

.join-strip__label {
   margin: 0 0 6px;
   color: rgba(255, 255, 255, .75);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
}

.join-strip h2 {
   margin: 0;
   color: #fff;
   font-family: "Cinzel", serif;
   font-size: clamp(26px, 3vw, 42px);
   font-weight: 700;
}

.join-strip__btn {
   flex-shrink: 0;
   border-color: rgba(255, 255, 255, .6) !important;
   color: #fff !important;
   white-space: nowrap;
}

.join-strip__btn:hover {
   background: rgba(255, 255, 255, .15) !important;
   border-color: #fff !important;
}

@media (max-width: 600px) {
   .join-strip__inner {
      flex-direction: column;
      text-align: center;
   }
}

/* ===== CTA ===== */
.section--cta {
   background:
      linear-gradient(to right, rgba(0,0,0,.78) 0%, rgba(74,26,26,.65) 60%, rgba(176,50,46,.55) 100%),
      url("assets/banners/youngadults2.JPG");
   background-size: cover;
   background-position: center;
   position: relative;
}

.cta {
   text-align: center;
   padding: 80px 24px;
   position: relative;
}

.cta h2 {
   font-family: "Cinzel", serif;
   color: #fff;
   margin: 0 0 8px;
   font-size: clamp(26px, 3.1vw, 44px);
   font-weight: 900;
}

.cta__sub {
   color: rgba(255,255,255,.75);
   font-size: 15px;
   margin: 0 0 28px;
}

/* ===== Footer ===== */
.footer {
   background: #151515;
   color: #fff;
}

.footer__grid {
   padding: 60px 0;
   display: grid;
   grid-template-columns: 1.1fr 1fr 1fr;
   gap: 34px;
}

.footer__cap {
   display: block;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .5);
   margin-bottom: 16px;
   padding-bottom: 10px;
   border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.footer__cap--mt {
   margin-top: 18px;
}

.footer__row {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   margin: 12px 0;
   color: rgba(255, 255, 255, .9);
}

.footer__row i {
   color: rgba(255, 255, 255, .85);
   margin-top: 3px;
   width: 18px;
}

.footer__row a {
   color: rgba(255, 255, 255, .92);
}

.footer__muted {
   margin: 0;
   color: rgba(255, 255, 255, .7);
   line-height: 1.6;
}

.footer__links {
   list-style: none;
   margin: 8px 0 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.footer__links a {
   color: rgba(255, 255, 255, .7);
   font-size: .9rem;
   transition: color .15s ease;
}

.footer__links a:hover {
   color: #fff;
}

.social {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
}

.social__btn {
   width: 40px;
   height: 40px;
   border-radius: 10px;
   background: var(--accent);
   display: grid;
   place-items: center;
   color: #fff;
}

.social__btn:hover {
   background: var(--accent-2);
}

.footer__bottom {
   background: var(--accent);
   color: #fff;
}

.footer__bottomInner {
   display: flex;
   justify-content: space-between;
   gap: 16px;
   padding: 16px 0;
   font-weight: 700;
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
   .leader-card {
      flex-direction: row;
      text-align: left;
      gap: 20px;
      align-items: center;
   }

   .leader-card img {
      width: 90px;
      height: 90px;
      flex-shrink: 0;
   }

   .leader-card__body {
      padding: 0;
      align-items: flex-start;
   }
}

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

   .leaders {
      grid-template-columns: 1fr;
   }

   .footer__grid {
      grid-template-columns: 1fr;
   }

   .topbar__inner {
      flex-wrap: wrap;
   }

   .brand__name {
      white-space: normal;
   }
}

@media (max-width: 860px) {
   .nav__toggle {
      display: inline-flex;
   }

   .nav__links {
      position: absolute;
      top: 64px;
      left: 0;
      right: 0;
      background: var(--nav);
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: 10px 20px 14px;
      display: none;
   }

   .nav__links.is-open {
      display: flex;
   }

   .nav__link {
      padding: 14px 0;
   }

   .has-dropdown:hover .dropdown {
      display: none;
   }

   /* hover doesn't work on mobile — tap-to-toggle instead */
   .dropdown {
      position: static;
      box-shadow: none;
      border-radius: 0;
      padding: 0 0 10px 0;
      background: transparent;
      display: none;
      min-width: 0;
   }

   .has-dropdown.is-open .dropdown {
      display: block;
   }

   .dropdown a {
      color: rgba(255, 255, 255, .9);
      padding: 10px 0;
      background: transparent;
   }

   .dropdown a:hover {
      background: transparent;
      text-decoration: underline;
   }

   /* ===== Events page ===== */
   .section--events {
      padding-top: 48px;
   }

   .events__title {
      font-size: 34px;
      font-weight: 800;
      margin: 0 0 22px;
      letter-spacing: -0.5px;
   }

   .notice {
      background: #eee;
      border: 1px solid #e1e1e1;
      color: #333;
      border-radius: 8px;
      padding: 14px 18px;
      text-align: center;
      font-weight: 600;
      margin-bottom: 18px;
   }

   .events {
      display: grid;
      gap: 30px;
   }

   .event {
      display: grid;
      grid-template-columns: 110px 1fr;
      gap: 26px;
      padding: 18px 0;
      border-bottom: 1px solid #efefef;
   }

   .event__date {
      text-align: center;
      line-height: 1.1;
      color: #1d1d1d;
   }

   .event__month {
      font-size: 12px;
      letter-spacing: .18em;
      font-weight: 800;
      opacity: .7;
   }

   .event__day {
      font-size: 34px;
      font-weight: 900;
      margin-top: 6px;
   }

   .event__year {
      font-size: 12px;
      font-weight: 700;
      opacity: .75;
      margin-top: 6px;
   }

   .event__meta {
      font-size: 13px;
      color: var(--muted);
      font-weight: 600;
      margin-bottom: 8px;
   }

   .event__name {
      margin: 0 0 10px;
      font-size: 28px;
      font-weight: 900;
      letter-spacing: -0.4px;
   }

   .event__place {
      font-size: 14px;
      color: #2a2a2a;
      margin-bottom: 10px;
   }

   .event__desc {
      margin: 0;
      color: #2d2d2d;
      line-height: 1.7;
      max-width: 820px;
   }

   @media (max-width: 720px) {
      .event {
         grid-template-columns: 1fr;
         gap: 12px;
      }

      .event__date {
         text-align: left;
         display: flex;
         align-items: baseline;
         gap: 10px;
      }

      .event__day {
         font-size: 28px;
      }
   }

   /* Feb 20th @ 3:10pm */

   /* ===== Events Page ===== */
   .events-page {
      padding: 56px 0 70px;
      background: var(--bg);
   }

   .events-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 22px;
   }

   .events-title {
      margin: 0;
      font-size: clamp(28px, 4vw, 44px);
      font-weight: 800;
      letter-spacing: -0.6px;
   }

   .events-subtitle {
      margin: 10px 0 0;
      color: var(--muted);
      max-width: 64ch;
      line-height: 1.5;
   }

   .events-panel {
      background: #fff;
      border: 1px solid #ececec;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
   }

   .events-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid #f0f0f0;
      background: linear-gradient(180deg, #ffffff, #fafafa);
   }

   .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid #efefef;
      background: #fff;
      padding: 8px 10px;
      border-radius: 999px;
      font-size: 13px;
      color: #444;
   }

   .events-toolbar__right {
      display: flex;
      align-items: center;
      gap: 10px;
   }

   .events-limit {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: #444;
   }

   .events-limit select {
      border: 1px solid #e7e7e7;
      border-radius: 10px;
      padding: 8px 10px;
      font: inherit;
      background: #fff;
      outline: none;
   }

   .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 12px;
      padding: 10px 14px;
      font-weight: 700;
      border: 1px solid transparent;
      cursor: pointer;
   }

   .btn--solid {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
   }

   .btn--solid:hover {
      background: var(--accent-2);
      border-color: var(--accent-2);
   }

   .btn--ghost {
      background: #fff;
      border-color: #e7e7e7;
      color: #222;
   }

   .btn--ghost:hover {
      border-color: #d8d8d8;
   }

   .events-status {
      padding: 18px 16px 0;
      color: var(--muted);
   }

   .events-list {
      display: grid;
      gap: 14px;
      padding: 16px;
   }

   .event-card {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 16px;
      padding: 16px;
      border-radius: 14px;
      border: 1px solid #ededed;
      background: #fff;
      transition: transform 120ms ease, box-shadow 120ms ease;
   }

   .event-card:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
   }

   .event-body {
      min-width: 0;
   }

   .event-title {
      margin: 0;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.2px;
   }

   .event-meta {
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px 14px;
      color: #444;
      font-size: 14px;
   }

   .event-meta__item {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      padding: 6px 10px;
      border-radius: 999px;
      background: #f6f6f6;
      border: 1px solid #efefef;
   }

   .event-desc {
      margin: 10px 0 0;
      color: var(--muted);
      line-height: 1.55;
   }

   .events-footer-note {
      padding: 0 16px 18px;
      color: var(--muted);
      font-size: 14px;
   }

   /* Responsive */
   @media (max-width: 700px) {
      .events-header {
         flex-direction: column;
         align-items: flex-start;
      }

      .event-card {
         grid-template-columns: 64px 1fr;
      }
   }

   /* ================
    LIVE NOW styles
    ================ */
   .btn--live {
      background: #d44b44;
      /* your red */
      color: #fff !important;
      border-color: #d44b44 !important;
   }

   .btn--live:hover {
      filter: brightness(0.95);
   }

   .live-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-left: 12px;
      padding: 6px 10px;
      border: 1px solid rgba(212, 75, 68, 0.35);
      border-radius: 999px;
      font-size: 0.9rem;
      font-weight: 600;
      color: #333;
   }

   .live-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #d44b44;
      box-shadow: 0 0 0 4px rgba(212, 75, 68, 0.18);
   }

   .btn--live {
      display: inline-flex;
      align-items: center;
      gap: 10px;
   }

   .live-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ff2a2a;
      box-shadow: 0 0 0 0 rgba(255, 42, 42, 0.7);
      animation: livePulse 1.2s infinite;
   }

   @keyframes livePulse {
      0% {
         box-shadow: 0 0 0 0 rgba(255, 42, 42, 0.7);
      }

      70% {
         box-shadow: 0 0 0 10px rgba(255, 42, 42, 0);
      }

      100% {
         box-shadow: 0 0 0 0 rgba(255, 42, 42, 0);
      }
   }

   /* Live button styling */
   .btn--live {
      background: #d24b43;
      /* match your red */
      border-color: #d24b43;
      color: #fff;
      position: relative;
      padding-left: 38px;
      /* space for dot */
   }

   /* red dot inside the button */
   .btn--live::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #ff2b2b;
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      box-shadow: 0 0 0 0 rgba(255, 43, 43, 0.65);
      animation: livePulse 1.2s infinite;
   }

   @keyframes livePulse {
      0% {
         box-shadow: 0 0 0 0 rgba(255, 43, 43, 0.65);
      }

      70% {
         box-shadow: 0 0 0 10px rgba(255, 43, 43, 0);
      }

      100% {
         box-shadow: 0 0 0 0 rgba(255, 43, 43, 0);
      }
   }

   /* ===== Pastor Page Styling ===== */

   .pastor-hero {
      position: relative;
      min-height: 320px;
      background: url("/images/sanctuary.jpg") center/cover no-repeat;
      display: flex;
      align-items: center;
   }

   .pastor-hero__overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
   }

   .pastor-hero__content {
      position: relative;
      color: #fff;
   }

   .pastor-hero h1 {
      font-size: clamp(2rem, 4vw, 3rem);
      margin: 0 0 10px;
   }

   .eyebrow {
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: 0.8rem;
      opacity: 0.8;
   }

   .subtitle {
      opacity: 0.9;
   }

   .pastor-layout {
      display: grid;
      grid-template-columns: 350px 1fr;
      gap: 40px;
   }

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

   .pastor-card {
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   }

   .pastor-card img {
      width: 100%;
      display: block;
   }

   .pastor-card__info {
      padding: 20px;
   }

   .pastor-card__info ul {
      padding-left: 0;
      list-style: none;
      margin-bottom: 20px;
   }

   .pastor-card__info li {
      margin-bottom: 8px;
   }

   .btn--full {
      width: 100%;
      text-align: center;
   }

   .pastor-bio blockquote {
      margin: 20px 0;
      padding: 15px 20px;
      border-left: 4px solid #d24b43;
      background: rgba(210, 75, 67, 0.08);
      font-style: italic;
   }

   /* =========================
    Pastor page
 ========================= */
   .pastorHero {
      position: relative;
      padding: 56px 0 40px;
      background:
         linear-gradient(90deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .25)),
         url("assets/banners/womenumc.jpg");
      background-size: cover;
      background-position: center;
      color: #fff;
   }

   .pastorHero__inner {
      max-width: 900px;
   }

   .pastorHero__kicker {
      display: inline-block;
      padding: 8px 12px;
      border: 1px solid rgba(255, 255, 255, .35);
      border-radius: 999px;
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: 14px;
   }

   .pastorHero__title {
      font-size: clamp(32px, 5vw, 54px);
      line-height: 1.05;
      margin: 0 0 10px;
   }

   .pastorHero__sub {
      opacity: .92;
      margin: 0 0 20px;
   }

   .pastorHero__cta {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
   }

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

   .pastorCard {
      border: 1px solid rgba(0, 0, 0, .08);
      border-radius: 18px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
   }

   .pastorCard__photo {
      width: 100%;
      height: 360px;
      object-fit: cover;
      display: block;
   }

   .pastorCard__body {
      padding: 18px 18px 20px;
   }

   .pastorCard__name {
      font-size: 20px;
      font-weight: 800;
      margin-bottom: 2px;
   }

   .pastorCard__role {
      opacity: .75;
      margin-bottom: 14px;
   }

   .pastorFacts {
      list-style: none;
      padding: 0;
      margin: 0 0 16px;
      display: grid;
      gap: 8px;
   }

   .pastorFacts strong {
      font-weight: 700;
   }

   .pastorCard__buttons {
      display: grid;
      gap: 10px;
   }

   .btn--full {
      width: 100%;
      text-align: center;
   }

   .pastorContent h2 {
      margin-top: 0;
   }

   .pastorQuote {
      margin: 18px 0 18px;
      padding: 16px 16px;
      border-left: 4px solid var(--brand, #d24b43);
      background: rgba(210, 75, 67, .06);
      border-radius: 12px;
      font-style: italic;
   }

   .pastorCallout {
      margin-top: 22px;
      padding: 18px;
      border-radius: 18px;
      background: #111;
      color: #fff;
   }

   .pastorCallout h4 {
      margin: 0 0 8px;
   }

   .pastorCallout p {
      opacity: .9;
      margin: 0 0 12px;
   }

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

      .pastorCard__photo {
         height: 320px;
      }
   }

}

/* =========================
   Google Doc Embed (Announcements) — Desktop + Mobile
========================= */
.gdoc-embed {
   width: 100%;
   margin-top: 14px;
   border: 1px solid #ececec;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: var(--shadow);
   background: #fff;
}

.gdoc-embed iframe {
   display: block;
   width: 100% !important;
   height: 82vh !important;
   min-height: 720px;
   border: 0 !important;
}

.announcements-wrapper .container {
   max-width: 900px;
}

/* Make the embed feel better on phones */
@media (max-width: 700px) {
   .gdoc-embed {
      border-radius: 12px;
      margin-top: 10px;
   }

   .gdoc-embed iframe {
      height: 74vh !important;
      /* less “super tall” */
      min-height: 560px;
      /* still readable */
   }

   /* tighten the panel padding on mobile */
   .events-toolbar {
      padding: 12px 12px;
   }
}

/* ===== Donate button (Push Pay) ===== */
.nav .btn--donate {
   position: relative;
   border-radius: 999px;
   /* friendlier */
   height: 44px;
   /* less tall than nav bar */
   padding: 0 16px;
   letter-spacing: .10em;
   box-shadow: 0 10px 18px rgba(208, 74, 70, .25);
   transform: translateY(0);
   transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* subtle sheen on hover */
.nav .btn--donate::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   transform: translateX(-120%);
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
   transition: transform .65s ease;
   pointer-events: none;
}

.nav .btn--donate:hover {
   transform: translateY(-1px);
   box-shadow: 0 14px 26px rgba(208, 74, 70, .32);
}

.nav .btn--donate:hover::after {
   transform: translateX(120%);
}

.nav .btn--donate i {
   margin-right: 8px;
   font-size: 0.95em;
   opacity: .95;
}

/* Mobile: keep it prominent but not huge */
@media (max-width: 860px) {
   .nav .btn--donate {
      height: 42px;
      padding: 0 14px;
   }
}

@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
   .nav .btn--donate {
      animation: donateGlow 2.4s ease-in-out infinite;
   }

   @keyframes donateGlow {

      0%,
      100% {
         filter: brightness(1);
      }

      50% {
         filter: brightness(1.06);
      }
   }
}

/* Fix donate button shine so it is hidden at rest */
.nav .btn--primary::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
   transform: translateX(-150%);
   /* fully off-screen */
   transition: transform .65s ease;
   pointer-events: none;
   opacity: 0;
   /* hidden until hover */
}

.nav .btn--primary:hover::after {
   transform: translateX(150%);
   opacity: 1;
}

/* ✅ Force banner pill to stay readable on light background */
.banner .pill {
   color: var(--accent);
}

/* ✅ Cleaner, smaller, more premium buttons on leader cards */
.leader-card__body .btn {
   padding: 10px 14px;
   font-size: 14px;
   border-radius: 999px;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
   transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.leader-card__body .btn:hover {
   transform: translateY(-1px);
   filter: brightness(1.03);
   box-shadow: 0 14px 28px rgba(0, 0, 0, .16);
}

.leader-card__body .btn:active {
   transform: translateY(0);
}

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

.icon-circle img[src*="youtube"] {
   transform: scale(0.92);
}

/* =========================
   Mission & Vision page
========================= */
.pageHero {
   position: relative;
   padding: 64px 0 54px;
   color: #fff;
   overflow: hidden;
   background:
      linear-gradient(90deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .35)),
      url("assets/womenumc.jpg");
   background-size: cover;
   background-position: center;
}

.missionHero {
   background:
      linear-gradient(90deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .35)),
      url("assets/menumc.jpg");
   background-size: cover;
   background-position: center;
}

.pageHero__inner {
   max-width: 900px;
}

.pageHero__kicker {
   display: inline-block;
   padding: 8px 12px;
   border: 1px solid rgba(255, 255, 255, .35);
   border-radius: 999px;
   font-size: 12px;
   letter-spacing: .12em;
   text-transform: uppercase;
   margin-bottom: 14px;
}

.pageHero__title {
   font-size: clamp(32px, 5vw, 56px);
   line-height: 1.05;
   margin: 0 0 10px;
   font-weight: 900;
}

.pageHero__sub {
   margin: 0;
   opacity: .92;
}

.mv {
   padding: 70px 0;
   background: var(--bg);
}

.mv__inner {
   max-width: 980px;
}

.mv__greeting {
   margin: 0 0 26px;
   font-weight: 800;
   letter-spacing: -0.2px;
   font-size: 18px;
}

.mv__grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px;
}

.mvCard {
   background: #fff;
   border: 1px solid #ededed;
   border-radius: 18px;
   box-shadow: var(--shadow);
   padding: 22px;
}

.mvCard__top {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 14px;
}

.mvCard__pill {
   display: inline-flex;
   align-items: center;
   padding: 8px 12px;
   border-radius: 999px;
   font-weight: 900;
   letter-spacing: .10em;
   text-transform: uppercase;
   font-size: 12px;
   color: #fff;
   background: var(--accent);
}

.mvCard__text {
   margin: 0;
   font-size: clamp(18px, 1.6vw, 22px);
   line-height: 1.7;
   color: #1e1e1e;
   font-weight: 600;
}

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


/* =========================
   Picture Gallery page
   ========================= */

/* ── Gallery Hero ── */
.gallery-hero {
   position: relative;
   padding: clamp(60px, 9vw, 110px) 0;
   color: #fff;
   overflow: hidden;
   background:
      linear-gradient(135deg, rgba(26, 26, 46, .85) 0%, rgba(74, 26, 26, .80) 100%),
      url("assets/banners/menumc.jpg");
   background-size: cover;
   background-position: center;
}

.gallery-hero::before {
   content: "";
   position: absolute;
   inset: -50%;
   background: radial-gradient(circle at 40% 50%, rgba(208, 74, 70, .25), transparent 55%);
   pointer-events: none;
}

.gallery-hero::after {
   content: "";
   position: absolute;
   inset: 0;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='18' y='6' width='4' height='28' fill='white' opacity='0.05'/%3E%3Crect x='6' y='18' width='28' height='4' fill='white' opacity='0.05'/%3E%3C/svg%3E");
   pointer-events: none;
}

.gallery-hero__inner {
   position: relative;
   z-index: 1;
}

.gallery-hero__kicker {
   margin: 0 0 10px;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   opacity: .7;
}

.gallery-hero__title {
   font-family: "Cinzel", serif;
   font-size: clamp(32px, 5vw, 58px);
   font-weight: 700;
   line-height: 1.05;
   margin: 0 0 12px;
}

.gallery-hero__sub {
   margin: 0;
   opacity: .85;
   max-width: 62ch;
   line-height: 1.6;
   font-size: clamp(15px, 1.5vw, 17px);
}

.gallery {
   padding: 48px 0 72px;
}

.gallery__header {
   display: flex;
   justify-content: space-between;
   align-items: end;
   gap: 18px;
   margin-bottom: 18px;
}

.gallery__title {
   margin: 0;
   font-size: clamp(22px, 2.2vw, 34px);
   letter-spacing: .02em;
}

.gallery__sub {
   margin: 8px 0 0;
   color: var(--muted);
   max-width: 72ch;
   line-height: 1.65;
}

.galleryGrid {
   margin-top: 18px;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 18px;
}

.albumCard {
   display: block;
   text-decoration: none;
   color: inherit;
   border-radius: 18px;
   overflow: hidden;
   border: 1px solid #ececec;
   border-top: 4px solid var(--accent);
   background: #fff;
   box-shadow: 0 8px 24px rgba(208, 74, 70, 0.07), 0 2px 8px rgba(0, 0, 0, .10);
   transform: translateY(0);
   transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.albumCard:hover {
   transform: translateY(-5px);
   box-shadow: 0 20px 40px rgba(208, 74, 70, 0.13), 0 4px 12px rgba(0, 0, 0, .10);
   border-color: var(--accent);
}

.albumCard:hover .albumCard__title {
   color: var(--accent);
}

.albumCard__cover {
   position: relative;
   aspect-ratio: 16 / 10;
   background: #111;
   overflow: hidden;
}

.albumCard__cover img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .4s ease;
   filter: saturate(1.05) contrast(1.05);
}

.albumCard:hover .albumCard__cover img {
   transform: scale(1.06);
}

.albumCard__cover::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .55) 100%);
   pointer-events: none;
}

.albumCard__badge {
   position: absolute;
   top: 12px;
   left: 12px;
   z-index: 2;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 10px;
   border-radius: 999px;
   font-weight: 700;
   font-size: 12px;
   letter-spacing: .06em;
   text-transform: uppercase;
   background: rgba(255, 255, 255, .92);
   color: #111;
   backdrop-filter: blur(6px);
}

.albumCard__open {
   position: absolute;
   top: 12px;
   right: 12px;
   z-index: 2;
   width: 36px;
   height: 36px;
   border-radius: 999px;
   display: grid;
   place-items: center;
   background: rgba(17, 17, 17, .55);
   color: #fff;
   backdrop-filter: blur(6px);
}

.albumCard__body {
   padding: 16px 16px 14px;
}

.albumCard__title {
   margin: 0;
   font-size: 18px;
   line-height: 1.25;
   font-weight: 800;
}

.albumCard__meta {
   margin-top: 10px;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.albumCard__chip {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 10px;
   border-radius: 999px;
   font-size: 12px;
   color: #111;
   background: var(--soft);
   border: 1px solid #eee;
}

.albumCard__thumb {
   margin-top: 12px;
   border-radius: 14px;
   overflow: hidden;
   border: 1px solid #eee;
   aspect-ratio: 16 / 9;
}

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

/* Disabled placeholder card */
.albumCard--disabled {
   cursor: default;
   border-top: 1px dashed #ccc;
   border: 2px dashed #d8d8d8;
   background: var(--soft);
   box-shadow: none;
   opacity: 1;
}

.albumCard--disabled:hover {
   transform: none;
   box-shadow: none;
   border-color: #d8d8d8;
}

.albumCard--disabled:hover .albumCard__title {
   color: inherit;
}

@media (max-width: 980px) {
   .galleryGrid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

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