/* Royalhouse Chapel NJ — v4 (no sticky header, no horizontal scrollbars) */
:root{--max:1800px;--g:clamp(18px,2.6vw,56px);--h1:clamp(54px,7vw,126px);--h2:clamp(34px,4.2vw,70px)}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.skip{position:absolute;left:-999px;top:10px;background:#fff;padding:10px 12px;border:1px solid var(--line);z-index:9999}.skip:focus{left:12px}

.announce{background:linear-gradient(90deg,#121212,#232323);color:#fff}
.announce__inner{max-width:var(--max);margin:0 auto;padding:14px var(--g);display:flex;justify-content:space-between;gap:18px}
.announce__side{width:50%;display:flex;flex-direction:column;align-items:center}
.announce__title{font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.announce__sub{font-weight:500;opacity:.85;font-size:12px;margin-top:2px}

.top{background:#fff;border-bottom:1px solid var(--line)}
.top__inner{max-width:var(--max);margin:0 auto;padding:18px var(--g);display:flex;align-items:center;justify-content:space-between;gap:22px;}
.top__logo img{height:72px;width:auto}
.top__actions{display:flex;gap:12px;align-items:center}
.btn{padding:12px 14px;font-weight:700;font-size:13px;border:1px solid var(--line);background:#fff}
.btn--solid{background:var(--ink);color:#fff;border-color:rgba(18,18,18,.65)}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}
.menuBtn{display:inline-flex;align-items:center;gap:12px;padding:12px 14px;border:none;background:transparent;cursor:pointer;font-weight:700;letter-spacing:.12em}
.menuBtn i{width:22px;height:2px;background:var(--ink);display:block}.menuBtn i:last-child{opacity:.7}

.menu{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:0;transition:opacity .18s ease}
.menu.is-open{pointer-events:auto;opacity:1}
.menu__panel{position:absolute;inset:0;background:radial-gradient(1200px 600px at 22% 20%, rgba(255, 255, 255, .06), transparent 60%), #0b3594;color:#fff;padding:34px var(--g)}
.menu__logo{position:absolute;left:var(--g);top:26px}.menu__logo img{height:76px;filter:brightness(1.1)}
.menu__close{position:absolute;right:var(--g);top:26px;display:flex;align-items:center;gap:12px;color:#fff;background:transparent;border:none;cursor:pointer;font-weight:700;letter-spacing:.18em}
.menu__close b{font-size:30px;line-height:1;font-weight:300;opacity:.9}
.menu__grid{max-width:var(--max);margin:0 auto;height:100%;display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
.menu__ghost{font-size:clamp(46px,5vw,84px);font-weight:800;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.45);margin-bottom:14px}
.menu__big a{display:block;font-size:clamp(44px,5.8vw,90px);font-weight:700;line-height:1.05;padding:6px 0}
.menu__cols{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.menu__link{display:block;font-size:22px;font-weight:600;line-height:1.65;opacity:.92}
.menu__meta{margin-top:22px;border-top:1px solid rgba(255,255,255,.14);padding-top:18px}
.menu__addr{font-size:14px;opacity:.75;font-weight:500}
.menu__metaLinks{display:flex;gap:18px;margin-top:12px;font-weight:600;opacity:.9}

/* === FULLSCREEN VIDEO MODAL (replace your existing .modal / .modal__* / .ratio block with this) === */
.modal{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0;transition:opacity .18s ease}
.modal.is-open{pointer-events:auto;opacity:1}
.modal__bg{position:absolute;inset:0;background:#000} /* full black, no dim overlay */
.modal__panel{position:absolute;inset:0;width:100vw;height:100vh;background:#000;transform:none;left:0;top:0}
.modal__close{position:absolute;right:22px;top:18px;border:none;background:transparent;font-size:44px;cursor:pointer;color:#fff;z-index:2;line-height:1}
.ratio{width:100%;height:100%}
.ratio iframe{width:100%;height:100%;border:0}
.heroup{ border-top: 0px solid #F19F0D}
.hero{ border-top: 1px solid #0b3594}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--g)}
.subnav{display:flex;justify-content:center;gap:34px;font-weight:700;font-size:13px;}
.subnav a:hover{text-decoration:underline}
.heroMeta{display:flex;justify-content:center;gap:18px;align-items:center;color:rgba(18,18,18,.62);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase; margin-top: 50px;}
.heroMeta__divider{width:120px;height:1px;background:var(--line)}
.heroTitle{margin:10px auto 20px;padding:0 var(--g);text-align:center;font-size:var(--h1);letter-spacing:-.03em;line-height:.95;font-weight:800;max-width:var(--max)}
.video{position:relative;overflow:hidden}
.video img{width:100%;height:min(66vh,780px);min-height:420px;object-fit:cover}
.video__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;background:rgba(255,255,255,.92);border:1px solid rgba(18,18,18,.18);display:flex;align-items:center;justify-content:center;cursor:pointer}
.video__play:before{content:"";width:0;height:0;border-left:18px solid #121212;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:4px}

.section{padding:70px 0}
.sectionHead{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:22px}
.sectionTitle{margin:0;font-size:var(--h2);font-weight:800;letter-spacing:-.02em}
.sectionSub{margin-top:10px;color:var(--muted);font-weight:500;max-width:70ch;line-height:1.6}
.sectionLink{font-weight:700;text-decoration:underline}

.panelDark{background:var(--dark);color:#fff}
.panelDark .sectionSub{color:rgba(255,255,255,.75)}
.panelLight{background:var(--paper);color:var(--ink)}
.carouselBtns{display:flex;gap:12px}
.cBtn{width:46px;height:46px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:800}
.panelLight .cBtn{border-color:rgba(18,18,18,.18);background:#fff;color:#121212}

.carouselViewport{overflow:hidden} /* no native scrollbar */
.carouselTrack{display:flex;gap:18px;transition:transform .45s ease;will-change:transform}
.card{background:#fff;flex:0 0 calc((100% - 54px)/4)}
.cards5 .card{flex:0 0 calc((100% - 72px)/5)}
.cardImg{height:380px;overflow:hidden}
.cardImg img{width:100%;height:100%;object-fit:cover}
.cardBar{background:#fff;color:#121212;padding:16px 18px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.cardTitle{font-size:20px;font-weight:800;margin:0}
.cardSub{font-size:12px;font-weight:700;opacity:.78;margin-top:6px}
.cardTag{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.72;margin-bottom:6px}
.cardArrow{width:44px;height:44px;border:1px solid rgba(18,18,18,.18);background:#fff;display:flex;align-items:center;justify-content:center}
.cardArrow:before{content:"";width:0;height:0;border-left:10px solid #F19F0D;border-top:7px solid transparent;border-bottom:7px solid transparent}

.pastor{background:#0b3594;color:#fff;padding:86px 0}
.pastorGrid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start}
.pastorTitle{font-size:clamp(56px,6vw,120px);font-weight:900;letter-spacing:-.03em;margin:0 0 18px; color: #F19F0D;}
.pastorPhoto{
    width:100%;
    height:auto;
    object-fit:contain;
    border:1px solid #333;
    display:block;
    border-radius:10px;

    /* Modern layered shadow */
    box-shadow:
        0 2px 6px rgba(0,0,0,.25),
        0 18px 40px rgba(0,0,0,.35),
        0 0 0 1px rgba(255,255,255,.04);
}
.pastorSig{margin-top:-30px;margin-left:10px;width:min(360px,60%)}
.pastorText{color:rgba(255,255,255,.82);font-weight:500;line-height:1.8;font-size:15px;max-width:62ch}


/* ===== Pastor Section Refinement ===== */

.pastorGrid{
  display:grid;
  grid-template-columns:1fr 1.15fr; /* give text more space */
  gap:clamp(28px,4vw,60px);
  align-items:start;
}

/* Keep full image visible */
.pastorPhoto{
  width:100%;
  height:auto;
  object-fit:contain;   /* no crop */
  border:none;
  display:block;
}

/* Remove overlay signature positioning */
.pastorSig{
  display:none; /* we will replace with text signature */
}

/* Modern larger typography */
.pastorText{
  font-size:32px;              /* larger */
  line-height:1.2;             /* elegant breathing room */
  font-weight:100;
  letter-spacing:.01em;
  color:rgba(255,255,255,.86);
  max-width:72ch;              /* wider */
}

/* Replace the dynamic name text with a CSS signature */
.pastorText p strong{
  position:relative;
  display:inline-block;
  color:transparent !important;   /* hides <?= e($c["pastor"]["name"]) ?> */
}

/* The actual signature text */
.pastorText p strong::after{
  content:"Rev. Hazel Bediako";
  position:absolute;
  left:0;
  top:0;
  white-space:nowrap;
  font-family:"Brush Script MT", cursive;
  font-size:clamp(30px,3.5vw,52px);
  font-weight:400;
  letter-spacing:.02em;
  line-height:1.05;
  color:rgba(255,255,255,.95);
}


/* VOUS-style mission quote block */
.missionQuote{
  position:relative;
  margin-top:34px;
  padding:clamp(46px,6vw,96px) 0;
  overflow:hidden;
}

/* faint line-art background (no image needed) */
.missionQuote__bg{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(700px 400px at 50% 50%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 520px at 20% 30%, rgba(255,255,255,.04), transparent 62%),
    radial-gradient(900px 520px at 80% 65%, rgba(255,255,255,.035), transparent 62%);
  opacity:.9;
  transform:scale(1.02);
  pointer-events:none;
}

/* big centered quote text */
.missionQuote__text{
  position:relative;
  z-index:2;
  margin:0 auto;
  max-width:min(1400px, 92vw);
  text-align:center;
  color:#F19F0D;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.02;
  font-size:clamp(38px, 5.2vw, 86px);
  text-shadow: 0 18px 48px rgba(0,0,0,.35);
}

/* sticker word (like VOUS "SIMPLE," chip) */
.missionQuote__chip{
  display:inline-block;
  margin-left:.12em;
  padding:.18em .42em .16em;
  background:rgba(255,255,255,.94);
  color:#0b3594;
  font-weight:950;
  letter-spacing:.02em;
  transform:rotate(-4deg) translateY(-.06em);
  box-shadow:
    0 18px 38px rgba(0,0,0,.35),
    0 1px 0 rgba(0,0,0,.15);
}

/* keep it readable on smaller screens */
@media (max-width:720px){
  .missionQuote{ padding:42px 0; }
  .missionQuote__text{ font-size:clamp(28px, 7.8vw, 46px); }
}

/* ensure parent positioning */
.pastor{
  position:relative;
}
.giveBanner{background:var(--dark);padding:0 0 86px}
.giveCard{background:var(--givebg);margin:0 auto;max-width:var(--max);padding:40px var(--g);display:flex;justify-content:space-between;gap:24px;align-items:center;border:1px solid rgba(0,0,0,.14)}
.giveBig{font-size:clamp(46px,5.2vw,90px);font-weight:900;letter-spacing:-.02em;margin:0}
.giveSmall{margin-top:8px;color:rgba(18,18,18,.78);font-weight:500;max-width:62ch}
.giveLink{display:inline-flex;align-items:center;gap:12px;font-weight:900;margin-top:14px;border-bottom:2px solid #121212;padding-bottom:3px}
.giveArt{width:min(420px,34vw);opacity:.5}

.pageHead{padding:66px 0 18px}
.pageHead h1{margin:0;text-align:center;font-size:clamp(56px,6.2vw,110px);letter-spacing:-.03em;font-weight:900;line-height:.95}
.pageHead p{margin:18px auto 0;text-align:center;color:var(--muted);font-weight:500;max-width:78ch;line-height:1.65;padding:0 var(--g)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{background:#fff;border:1px solid rgba(18,18,18,.14);padding:26px}
.panel h3{margin:0 0 10px;font-size:22px;font-weight:900}
.panel p{margin:0;color:var(--muted);font-weight:500;line-height:1.75}
.list{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.row{border:1px solid rgba(18,18,18,.14);background:rgba(18,18,18,.02);padding:14px;display:flex;justify-content:space-between;gap:12px;align-items:center;font-weight:800}
.small{font-size:12px;opacity:.72;font-weight:700}

.socialGrid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.socialCard{background:#fff;border:1px solid rgba(18,18,18,.14);padding:18px}
.socialHead{display:flex;justify-content:space-between;align-items:center;gap:12px}
.socialBtn{border:1px solid rgba(18,18,18,.14);background:#fff;padding:10px 12px;font-weight:800;font-size:13px}
.socialBtn--solid{background:var(--ink);color:#fff;border-color:rgba(18,18,18,.65)}
.embedWrap{margin-top:14px;border:1px solid rgba(18,18,18,.10);padding:12px;background:#fff}

.footer{background:var(--dark);color:#fff}
.footer__inner{max-width:var(--max);margin:0 auto;padding:76px var(--g);display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;gap:18px}
.footer__logo{height:56px;filter:brightness(1.05)}
.footer__muted{color:rgba(255,255,255,.68);font-weight:500;margin-top:14px}
.footer__head{font-size:12px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.footer__link{display:block;margin-top:14px;font-weight:800;opacity:.92}
.footer__link:hover{text-decoration:underline}
.footer__bottom{max-width:var(--max);margin:0 auto;padding:16px var(--g) 28px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer__legal{display:flex;gap:10px;align-items:center;color:rgba(255,255,255,.70);font-weight:600}
.footer__legal a{color:rgba(255,255,255,.78)}
.footer__addr{color:rgba(255,255,255,.66);font-weight:500}

/* Keep your existing structure; just add background behavior */
#featuredVideo.video {
  position: relative;
  overflow: hidden;
}

/* Background iframe behind poster/button */
#featuredVideo .video__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border: 0;
  z-index: 0;
}

/* Keep poster + play button above */
#featuredVideo img,
#featuredVideo .video__play {
  position: relative;
  z-index: 2;
}

/* Optional: ensure 16:9 cover effect (better “background fill”) */
#featuredVideo .video__bg {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 177.78vh; /* 16:9 */
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
  position: absolute;
}


#featuredVideo img, #featuredVideo .video__play
 {
    position: relative;
    z-index: 2;
    top: -300px !important;
}


/* === Index Splash + Header Statement === */

/* Center statement in top row without changing layout */
.top__inner{position:relative}
.top__center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}

.top__statement{
  display:none; /* shown only after splash close */
  border:none;
  background:transparent;
  cursor:pointer;
  padding:10px 14px;
  text-align:center;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
  font-size:clamp(12px,1.15vw,16px);
  line-height:1;
}

.top__statementYear{font-weight:900}
.top__statementDash{opacity:.65;margin:0 10px}
.top__statementMain{
  font-weight:900;
  /* “bold art form” feel */
  -webkit-text-stroke: 0px transparent;
}

.top__statement:hover{opacity:.85}

/* Fullscreen splash */
.splash{
  position:fixed;
  inset:0;
  z-index:99999;
  background:#000;
  display:none;
}
.splash.is-open{display:block}

.splash__close{
  position:absolute;
  top:18px;
  right:26px;
  width:56px;
  height:56px;
  border:none;
  background:transparent;
  color:#fff;
  font-size:46px;
  line-height:1;
  cursor:pointer;
  z-index:2;
}

.splash__inner{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}

.splash__inner img{
  width:auto;
  height:auto;
  max-width:96vw;
  max-height:92vh;
  object-fit:contain;
}


/* Centered header statement image (constrained + modern fade) */
.top__inner{position:relative}

/* reserve a safe "center lane" so it never collides with logo/actions */
.top__center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:42vw;           /* keeps it from taking over */
  width:42vw;
  pointer-events:auto;
}


/* ===== Visit carousel: arrows + full-bleed right ===== */

/* Make the carousel reach the RIGHT edge of the browser */
.panelDark .carouselViewport{
  margin-right: calc(-1 * var(--g));  /* removes right gutter */
  padding-right: 0;
}


/* ===== Carousel arrows (no bg, no border, just white) ===== */
.panelDark .carouselBtns{
  gap: 18px;
}

.panelDark .cBtn{
  width: auto;
  height: auto;
  border: none !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 28px;
  line-height: 1;
  padding: 6px 8px;
  opacity: .88;
  transform: translateY(0);
}

.panelDark .cBtn:hover{
  opacity: 1;
  transform: translateY(-1px);
}

.panelDark .cBtn:active{
  transform: translateY(0);
  opacity: .92;
}

/* ===== Card arrow: slanted white tile with modern NE arrow ===== */
.cardArrow{
  position: relative;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(18,18,18,.14);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;

  /* slanted left edge like VOUS */
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}

/* Replace your old triangle with a sleek ↗ arrow */
.cardArrow:before{
  content:"";
  position:absolute;
  width: 12px;
  height: 12px;
  border-top: 2px solid #F19F0D;
  border-right: 2px solid #F19F0D;
  transform: rotate(45deg);
  top: 16px;
  left: 18px;
  opacity: .95;
}

.cardArrow:after{
  content:"";
  position:absolute;
  width: 16px;
  height: 2px;
  background:#121212;
  transform: rotate(45deg);
  top: 26px;
  left: 14px;
  opacity: .95;
}

/* On dark panel, keep card arrow crisp */
.panelDark .cardArrow{
  border-color: rgba(255,255,255,.18);
}

/* button wrapper */
.top__statementImg{
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  opacity:0;
  transform:translateY(6px);
  animation:fadeInStatement .55s ease forwards;
}

/* image itself must FIT inside the header */
.top__statementImg img{
  display:block;
  max-width:100%;
  max-height:106px;          /* hard cap inside header */
  width:auto;
  height:auto;
  object-fit:contain;
  background:
    /* bottom fade */
    linear-gradient(to bottom, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 100%),
    /* left fade */
    linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 42%),
    /* right fade */
    linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 42%);
  filter:contrast(1.02) saturate(1.02);
}

.top__ref{
  position:absolute;
    left: 29.3%;
    top: -9px;                /* adjust up/down if needed */
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(18,18,18,.65);
}

/* side + bottom fade */
.top__statementImg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  
}


/* Modern sleek highlight animation */

.animatedText span{
  position:relative;
  color:#222;
    color:#222;
    text-transform:uppercase;
  pointer-events:none;
  font-weight:900;
  letter-spacing:-.03em;
  font-size:clamp(14px,1.4vw,64px);
  overflow:hidden;
}

/* Shine layer */
.animatedText span::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:120%;
  height:100%;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.85) 50%,
    rgba(255,255,255,0) 100%
  );
  transform:skewX(-20deg);
}

/* Sequential sweep timing */
.animatedText span:nth-child(1)::after{
  animation: shine 4s infinite;
}

.animatedText span:nth-child(2)::after{
  animation: shine 4s infinite;
  animation-delay:1s;
}

.animatedText span:nth-child(3)::after{
  animation: shine 4s infinite;
  animation-delay:2s;
}

.animatedText span:nth-child(4)::after{
  animation: shine 4s infinite;
  animation-delay:3s;
}




@keyframes shine{
  0%{ left:-120%; }
  15%{ left:120%; }
  100%{ left:120%; }
}

/* BELOW HEADER FADE */
.statementReveal{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(-12px);
  transition:opacity .6s ease, transform .6s ease, max-height .6s ease;
  background:#fff;
  border-bottom:1px solid rgba(18,18,18,.08);
}

.statementReveal.is-visible{
  max-height:600px; /* large enough for image */
  opacity:1;
  transform:translateY(0);
}

.statementReveal__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:24px var(--g);
  display:flex;
  justify-content:center;
}

.statementReveal__inner img{
  max-width:100%;
  height:auto;
  max-height:380px;
  object-fit:contain;
}

.panelDark{ overflow: visible; }
.panelDark .wrap{ overflow: visible; }

/* 2) remove ONLY the right “gutter” for this carousel area */
.panelDark .carouselViewport{
  overflow: hidden;                 /* keep no scrollbar */
  margin-right: calc(-1 * var(--g));/* bleed to browser edge */
  padding-right: var(--g);          /* keeps last card from being cut */
}

/* 3) keep left aligned as-is */
.panelDark .carouselTrack{
  padding-right: 0;
}
.panelDark .carouselViewport{
  width: calc(100% + var(--g));
  margin-right: calc(-1 * var(--g));
}
/* modern fade */
@keyframes fadeInStatement{
  to{opacity:1;transform:translateY(0)}
}

/* Responsiveness: hide center image when space is tight */
@media (max-width:440px){
  .top__center{display:none}
}




/* Responsive */
@media (max-width:1200px){
  .card,.cards5 .card{flex:0 0 calc((100% - 18px)/2)}
  .cardImg{height:280px}
  .footer__inner{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:980px){
  .pastorGrid{grid-template-columns:1fr}
  .pastorSig{margin-top:10px}
  .grid2{grid-template-columns:1fr}
  .socialGrid{grid-template-columns:1fr}
  .giveCard{flex-direction:column;align-items:flex-start}
  .giveArt{width:100%}
}
@media (max-width:720px){
  .card,.cards5 .card{flex:0 0 100%}
  .top__logo img{height:62px}
  
.top__ref {

    left: 16.3%;
    top: -9px;

}
}

@media (min-width:620px) and (max-width:1100px){
  .top__ref{
    left:25.3%;
    top:-9px;
  }
  .animatedText{font-size: 2em};
}



.panelDark .carouselViewport{
  width: 100vw !important;
  margin-left: calc(50% - 50vw + var(--g)) !important; /* aligns left with .wrap padding */
  margin-right: 0 !important;
  padding-right: 0 !important;  /* last card touches edge */
  overflow: hidden !important;
}

/* make sure nothing clips it */
.panelDark{ overflow: visible !important; }
.panelDark .wrap{ overflow: visible !important; }

/* === NO horizontal scroll (hard stop) === */
html, body{
  overflow-x: hidden;     /* fallback */
}
@supports (overflow-x: clip){
  html, body{ overflow-x: clip; } /* modern, prevents scroll without creating a scrollbar */
}

/* === Full-bleed carousel to RIGHT edge without overflow math === */
.panelDark .carouselViewport{
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  overflow: hidden !important;

  /* keep left aligned with your site gutter, but let right hit the edge */
  padding-left: var(--g) !important;
  padding-right: 0 !important;

  /* kill any old gutter rules */
  margin: 0 !important;
}

/* ensure the track doesn't accidentally create page overflow */
.panelDark .carouselTrack{
  will-change: transform;
}



/* ===== Fullscreen image viewer (Visit cards) ===== */
.imgViewer{
  position:fixed; inset:0; z-index:99998;
  display:none;
}
.imgViewer.is-open{ display:block; }

.imgViewer__bg{
  position:absolute; inset:0;
  background:rgba(0,0,0,.88);
}

.imgViewer__panel{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
}

.imgViewer__close{
  position:absolute; top:18px; right:22px;
  border:none; background:transparent;
  color:#fff; font-size:44px; line-height:1;
  cursor:pointer; z-index:2;
  opacity:.92;
}
.imgViewer__close:hover{ opacity:1; }

.imgViewer__media{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:72px 18px 96px;
}

.imgViewer__media img{
  max-width:96vw;
  max-height:84vh;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.imgViewer__bar{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 18px 16px;
  display:flex; justify-content:space-between; gap:14px; align-items:flex-end;
  background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
}

.imgViewer__title{
  color:#fff; font-weight:900;
  font-size:clamp(18px,2.2vw,28px);
  letter-spacing:-.02em;
}
.imgViewer__sub{
  margin-top:4px;
  color:rgba(255,255,255,.78);
  font-weight:600;
  font-size:12px;
}

.imgViewer__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.imgViewer__btn{
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  backdrop-filter: blur(10px);
}
.imgViewer__btn:hover{ background:rgba(255,255,255,.16); }

/* ===== Icon buttons (modern glass) ===== */

.imgViewer__iconBtn{
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s ease;
  color:#fff;
}

.imgViewer__iconBtn svg{
  width:20px;
  height:20px;
  display:block;
}

.imgViewer__iconBtn:hover{
  background:rgba(255,255,255,.18);
  transform:translateY(-2px);
}

.imgViewer__iconBtn:active{
  transform:translateY(0);
  background:rgba(255,255,255,.22);
}

.menu__logo__menu {
    position: absolute;
    left: var(--g);
    top: 26px;
    background: #fbfbfb47;
    border-radius: 10px;
    max-width: 200px;
    /* border: 1px solid #6a6969; */
}


/* ===== Hero Welcome + Artful Background ===== */

.heroTitleWrap{
  position:relative;
  max-width:var(--max);
  margin:18px auto 24px;
  padding:0 var(--g);
}

/* subtle praying-hands line art behind */
.heroTitleWrap::before{
  content:"";
  position:absolute;
  left:50%;
  top:8px;
  transform:translateX(-50%);
  width:min(980px,92vw);
  height:360px;
  opacity:.12;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  
}


/* ===== Hero Praying Hands Background ===== */

.heroTitleWrap{
  position:relative;
  max-width:var(--max);
  margin:24px auto 30px;
  padding:0 var(--g);
  text-align:center;
}

/* Actual praying hands image */
.heroHands{
  position:absolute;
  left:50%;
  top:10px;
  transform:translateX(-50%) rotate(6deg);
  width:min(760px, 82vw);
  height:auto;
  opacity:.08;                 /* subtle */
  pointer-events:none;
  z-index:0;
  filter:contrast(1.05) saturate(1.02);
}

/* Welcome text above art */
.heroWelcome{
  position:relative;
  z-index:2;
  max-width:900px;
  margin:0 auto 20px;
}

.heroWelcome__kicker{
  display:inline-block;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(18,18,18,.6);
  padding:10px 16px;
  border:opx solid rgba(18,18,18,.12);
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);
}

.heroWelcome__copy{
  margin:16px auto 0;
  font-weight:500;
  line-height:1.7;
  font-size:clamp(15px,1.4vw,20px);
  color:rgba(18,18,18,.78);
}

.heroWelcome__em{
  font-weight:900;
  color:#0b3594;
}

/* Keep hero title dominant */
.heroTitle{
  position:relative;
  z-index:2;
  margin-top:18px;
}

/* Responsive tuning */
@media (max-width:720px){
  .heroHands{
    width:92vw;
    opacity:.06;
  }
}

.heroWelcome{
  position:relative;
  z-index:2;
  text-align:center;
  margin:0 auto 18px;
  max-width:min(980px,92vw);
}

.heroWelcome__kicker{
  display:inline-block;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(18,18,18,.62);
  padding:10px 14px;
  border:1px solid rgba(18,18,18,.12);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);
}

.heroWelcome__copy{
  margin:14px auto 0;
  font-weight:500;
  line-height:1.65;
  font-size:clamp(15px,1.35vw,20px);
  color:rgba(18,18,18,.78);
  text-shadow:0 8px 30px rgba(0,0,0,.06);
}

.heroWelcome__em{
  font-weight:900;
  color:rgba(18,18,18,.92);
  white-space:nowrap;
}

/* Let your existing .heroTitle stay the star but feel integrated */
.heroTitle{
  position:relative;
  z-index:2;
  margin:14px auto 10px;
}

/* mobile: reduce art height */
@media (max-width:720px){
  .heroTitleWrap::before{ height:260px; opacity:.10; }
  .heroWelcome__kicker{ font-size:11px; }
}


/* ===== Massive Background Hero Text ===== */

.heroTitleWrap{
  position:relative;
  overflow:hidden;  /* prevents scroll */
  padding:00px var(--g) 00px;
  text-align:center;
}

/* HUGE outlined background text */
.heroBigText{
  position:absolute;
  top:40px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;

  font-weight:900;
  letter-spacing:.02em;
  font-size:clamp(120px, 16vw, 260px);
  line-height:.9;

  color:transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,.08);  /* subtle outline */
  text-stroke: 2px rgba(255,255,255,.08);

  opacity:.6;
  pointer-events:none;
  z-index:0;
}

/* Content above */
.heroWelcome,
.heroTitle{
  position:relative;
  z-index:2;
}

/* Dark section support */
.panelDark .heroBigText{
  -webkit-text-stroke: 2px rgba(255,255,255,.12);
}

/* Light section support */
.heroTitleWrap:not(.panelDark) .heroBigText{
  -webkit-text-stroke: 2px rgba(18,18,18,.06);
}

/* Responsive tuning */
@media (max-width:900px){
  .heroBigText{
    font-size:clamp(90px, 18vw, 160px);
    top:60px;
  }
}

.heroWelcome, .heroTitle {

    padding: 10px;
}

/* Kicker: stroked + faded background band (blue/gold) */
.heroWelcome__kicker{
  position:relative;
  display:inline-block;
  padding:12px 18px;
  margin:0 auto 18px;
  border-radius:14px;

  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(18,18,18,.75);

  /* subtle glass */
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);


}

/* dual-stroke frame + fade edges */
.heroWelcome__kicker::before{
  content:"";
  position:absolute;
  inset:-2px;                 /* stroke thickness */
  border-radius:16px;
  padding:2px;
  pointer-events:none;

  /* blue + gold stroke */
  background:linear-gradient(90deg,#0b3594,#F19F0D);

  /* cutout center so it looks like a stroked border */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;

  opacity:.85;
}

/* soft fade / glow wash */
.heroWelcome__kicker::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:18px;
  pointer-events:none;

  background:
    radial-gradient(120px 60px at 18% 50%, rgba(241,159,13,.22), transparent 70%),
    radial-gradient(140px 70px at 82% 50%, rgba(11,53,148,.22), transparent 72%),
    linear-gradient(to right,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.65) 18%,
      rgba(255,255,255,.65) 82%,
      rgba(255,255,255,0) 100%);
  filter: blur(10px);
  opacity:.55;
}

/* Optional: if kicker sits on dark panel, make text white */
.panelDark .heroWelcome__kicker{
  color:rgba(255,255,255,.88);
  background:rgba(0,0,0,.22);
  
}

.heroWelcome__kicker::before{
  animation:kickerStroke 3.6s ease-in-out infinite;
}

.menuBtn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:14px;
  border:none;
  background:transparent;
  cursor:pointer;
}

/* 3 horizontal lines */
.menuBtn i{
  width:24px;
  height:2px;
  background:#121212; /* or var(--ink) */
  display:block;
}


/* ===== Modern Pastor Section Buttons ===== */

.pastorText .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 26px;
  font-weight:800;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:6px;
  border:none;
  transition:all .25s ease;
  position:relative;
  overflow:hidden;
}

/* PRIMARY – Gold solid */
.pastorText .btn--solid{
  background:#F19F0D;
  color:#0b3594;
  box-shadow:
    0 10px 25px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.06);
}

.pastorText .btn--solid:hover{
  transform:translateY(-3px);
  box-shadow:
    0 18px 40px rgba(0,0,0,.45);
}

/* SECONDARY – Glass outline */
.pastorText .btn:not(.btn--solid){
  background:rgba(255,255,255,.06);
  color:#fff;
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.18);
}

.pastorText .btn:not(.btn--solid):hover{
  background:rgba(255,255,255,.12);
  transform:translateY(-3px);
}

.pastorText .btn::after{
  content:"→";
  margin-left:10px;
  font-weight:900;
  transition:transform .25s ease;
}

.pastorText .btn:hover::after{
  transform:translateX(4px);
}


/* Give options inside banner */
.giveDir{
  margin:14px 0 16px;
}

.giveRow{
  display:flex;
  gap:18px;
  margin-bottom:6px;
  font-size:14px;
}

.giveKey{
  min-width:140px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  opacity:.7;
}

.giveVal{
  font-weight:600;
  opacity:.9;
}

/* Make banner the clipping container */
.giveBanner{
  position: relative;
  overflow: hidden;
  z-index: 2;
}

/* Ensure content sits above the art */
.giveCard{
  position: relative;
 
}

/* Hand image behind everything */
.giveArt--img{
  position: absolute;
  right: -60px;      /* push slightly off screen */
  bottom: 80px;     /* creates bottom cut-off */
  width: 520px;
  max-width: 50%;
  height: auto;
  object-fit: contain;
  z-index: 1;        /* behind content */
  pointer-events: none;
  opacity: .9;       /* optional softness */
}

/* Mobile adjustment */
@media (max-width: 900px){
  .giveArt--img{
    right: -30px;
    bottom: -50px;
    max-width: 80%;
  }
}

/* The CARD should clip the image */
.giveCard{
  position: relative;
  overflow: hidden;   /* THIS prevents bleed into black area */
}

/* Hand image behind content */
.giveArt--img{
  position: absolute;
  right: -60px;
  bottom: -80px;      /* adjust for how much you want cut */
  width: 520px;
  max-width: 50%;
  height: auto;
  object-fit: contain;
  z-index: 0;         /* behind text */
  pointer-events: none;
}

/* Ensure text sits above */
.giveCard > div{
  position: relative;
  z-index: 2;
}



/* --- 2026 badge: keep it glued to the statement --- */
.top__center{
  width:auto !important;        /* override your 42vw lane */
  max-width:none !important;
  justify-content:flex-start !important;
  gap:10px;                     /* consistent spacing */
}

/* the button must NOT stretch */
.top__statementImg{
  width:auto !important;
  flex:0 0 auto !important;
}

/* stack the two spans inside the existing button (NO new classes) */
.top__statementImg{
  display:flex;
  flex-direction:column;   /* puts subtext below */
  align-items:center;
  justify-content:center;
  gap:4px;
}

/* make each line behave like a line */
.top__statementImg > span{
  display:block;
  text-align:center;
}

/* ===== 2026 Theme Button (Brand Styled) ===== */

button#statementBtn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;

  padding:6px 14px;

  background:transparent;
  border:0px solid #0b3594;
  border-radius:4px;

  color:#0b3594;
  cursor:pointer;

  text-align:left;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;

  transition:all .18s ease;
}

/* hover state */
button#statementBtn:hover{
  background:#F19F0D;
  border-color:#F19F0D;
  color:#0b3594;
}

/* main line */
button#statementBtn span:first-child{
  font-size:12px;
  font-weight:900;
}

/* subtext */
button#statementBtn span:last-child{
  font-size:10px;
  letter-spacing:.18em;
  opacity:.75;
}

/* smooth modern hover fade */
button#statementBtn{
  transition:
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease;
}

/* softer gold hover */
button#statementBtn:hover{
  background:rgba(241,159,13,.12);   /* subtle fade */
  border-color:#F19F0D;
  color:#0b3594;
}

/* ===== Overlay Theme Image ===== */

.menu__themeImage{
  margin-top:28px;
  max-width:820px;        /* keeps it controlled */
}

.menu__themeImage img{
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  opacity:.95;
}

.heroWelcome__kicker{
  border:0 !important;
}
.heroWelcome__kicker::before{
  display:none !important;   /* kills the gradient stroke frame */
}

.heroWelcome__kicker{
  border:0 !important;
  background:#0b3594 !important;   /* deep blue */
  color:#F19F0D !important;        /* gold text */

  padding:10px 18px;
  border-radius:4px;

  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* remove previous decorative frame */
.heroWelcome__kicker::before,
.heroWelcome__kicker::after{
  display:none !important;
}


.socialRow {
  display:flex;
  gap:14px;
  margin-top:14px;
}

.socialIcon{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  color:#fff;
}

.socialIcon svg{
  width:20px;
  height:20px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Instagram gets the gradient chip, icon stays white */
.socialIcon--ig{
  background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);
}

/* FIXED selector (no colon) */
.socialIcon--fb{
  background:#1877f2;
}

/* Facebook icon is a filled mark (not stroked) */
.socialIcon--fb svg{
  fill:currentColor;
  stroke:none;
  
  
}


/* ===== FOUNDERS: premium editorial (no animation) ===== */
#founders.foundersSection{
  padding:96px 0;
  background:
    radial-gradient(900px 500px at 18% 10%, rgba(16, 38, 120, .08), transparent 60%),
    radial-gradient(800px 420px at 82% 35%, rgba(200, 60, 140, .06), transparent 58%),
    linear-gradient(180deg, #fbfbfc 0%, #f5f6f8 100%);
}

#founders .foundersHeader{
  max-width:820px;
  margin-bottom:54px;
  position:relative;
}

#founders .foundersKicker{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(0,0,0,.55);
  margin-bottom:14px;
}

#founders .foundersHeader h2{
  font-size:62px;
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0 0 14px 0;
}

#founders .foundersHeader p{
  font-size:18px;
  line-height:1.65;
  color:rgba(0,0,0,.62);
  margin:0;
  max-width:68ch;
}

/* Accent rule under header */
#founders .foundersHeader:after{
  content:"";
  display:block;
  width:88px;
  height:3px;
  margin-top:26px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(16,38,120,.85), rgba(200,60,140,.85));
}

/* GRID */
#founders .foundersGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
}

@media (max-width: 1040px){
  #founders .foundersGrid{ grid-template-columns:1fr; gap:46px; }
}

section#founders {
    background: #fff !important;
}

/* FOUNDER ITEM */
#founders .founderItem{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap:40px;
  align-items:start;
  position:relative;
  padding-top:6px;
}

@media (max-width: 720px){
  #founders .founderItem{ grid-template-columns:1fr; gap:22px; }
}

/* Subtle vertical rule = “editorial” feel */
#founders .founderItem:before{
  content:"";
  position:absolute;
  left:300px;
  top:0;
  bottom:0;
  width:1px;
  background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.04), rgba(0,0,0,0));
}
@media (max-width: 720px){
  #founders .founderItem:before{ display:none; }
}

/* IMAGE: clean, premium frame */
#founders .founderImage{
  position:relative;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.65));
  border:1px solid rgba(0,0,0,.10);
  padding:12px;
      margin-right: 10px;
}

#founders .founderImage img{
  width:100%;
  display:block;
  border-radius:14px;
  background:#fff;
}

/* NAME + TITLE: strong hierarchy */
#founders .founderContent h3{
  margin:0 0 18px 0;
  font-size:26px;
  line-height:1.15;
  letter-spacing:-.01em;
}

#founders .founderContent h3 span{
  display:inline-block;
  margin-left:12px;
  font-size:15px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(0,0,0,.50);
  font-weight:700;
}

/* BODY TYPE */
#founders .founderContent p{
  margin:0 0 16px 0;
  font-size:16px;
  line-height:1.75;
  color:rgba(0,0,0,.70);
  max-width:70ch;
}

/* LINKS: subtle, premium */
#founders .founderLinks{
  margin-top:18px;
  display:flex;
  gap:18px;
  align-items:center;
}

#founders .founderLinks a{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  color:rgba(0,0,0,.72);
  border-bottom:1px solid rgba(0,0,0,.30);
  padding-bottom:4px;
}

#founders .foundersLead{
  font-size:22px;
  line-height:1.6;
  font-weight:500;
  margin-bottom:16px;
  position:relative;
}

#founders .foundersLead:after{
  content:"";
  display:block;
  width:72px;
  height:2px;
  background:#111;
  margin-top:18px;
}

#founders .foundersSub{
  margin-top:14px;
  font-size:16px;
  color:rgba(0,0,0,.55);
  max-width:65ch;
}
.pastor-title{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
}