/* ═══════════════════════════════════════════════════════════════
   Resurrection Church Beirut · homepage
   Modern & warm · light base · purple accent
   Type: Fraunces (display) / Archivo (text) / IBM Plex Sans Arabic
   ═══════════════════════════════════════════════════════════════ */

/* ── tokens ───────────────────────────────────────────────────── */
:root{
  /* warm light base */
  --cream:#FBF7F0;
  --cream-2:#F4ECDF;
  --linen:#EFE6D6;
  --lilac:#F1E9F4;

  /* purple accent family */
  --plum:#6A2E86;
  --plum-lit:#8449A2;
  --plum-deep:#3E1A54;
  --plum-ink:#2E1440;
  --gold:#C7A25B;

  /* ink on light */
  --ink:#2C2233;
  --ink-2:rgba(44,34,51,.70);
  --ink-3:rgba(44,34,51,.46);
  --line:rgba(44,34,51,.14);
  --line-2:rgba(44,34,51,.09);

  /* on dark (scripture band + footer) */
  --cream-on:#F6EFE4;
  --cream-on-2:rgba(246,239,228,.72);
  --cream-on-3:rgba(246,239,228,.48);
  --line-on:rgba(246,239,228,.16);

  --dsp:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --ar:"IBM Plex Sans Arabic","Segoe UI",sans-serif;

  --hdr:80px;
  --gut:clamp(20px,4.4vw,80px);
  --shell:1320px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ── reset ────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.66;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* warm paper texture — sits above the page, never intercepts input */
body::after{
  content:""; position:fixed; inset:0; z-index:120; pointer-events:none;
  opacity:.032; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg,picture{display:block; max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--plum); outline-offset:3px; border-radius:3px}
::selection{background:var(--plum); color:var(--cream)}
[aria-disabled="true"]{cursor:default}

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--plum); color:var(--cream); padding:12px 20px; font-size:13px; border-radius:0 0 8px 0}
.skip:focus{left:0; top:0}

.shell{max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut)}

/* meridiem marks: 10:00am */
i:not([class]){
  font-style:normal; font-weight:600;
  font-size:.62em; letter-spacing:.06em; text-transform:uppercase;
  opacity:.62; margin-left:.06em; vertical-align:.08em;
}

/* ── shared type ─────────────────────────────────────────────── */
.kicker{
  font-size:12px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--plum);
}
.micro{
  font-size:11px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3);
}
.h-lg{
  font-family:var(--dsp); font-weight:400;
  font-size:clamp(2.5rem,5.4vw,4.4rem); line-height:1.0;
  letter-spacing:-.02em; font-variation-settings:"opsz" 110;
}
.h-md{
  font-family:var(--dsp); font-weight:400;
  font-size:clamp(1.8rem,3.2vw,2.7rem); line-height:1.06;
  letter-spacing:-.015em; font-variation-settings:"opsz" 72;
}
.lede{font-size:clamp(1.06rem,1.4vw,1.24rem); line-height:1.6; color:var(--ink-2)}
.ar{font-family:var(--ar)}

/* ── buttons ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding:13px 24px; border:1.5px solid transparent; border-radius:999px;
  font-size:13px; font-weight:600; letter-spacing:.04em;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease),
             box-shadow .3s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:16px 30px; font-size:14px}

.btn-solid{background:var(--plum); color:var(--cream-on); box-shadow:0 8px 22px -12px rgba(106,46,134,.7)}
.btn-solid:hover{background:var(--plum-lit); box-shadow:0 12px 26px -12px rgba(106,46,134,.8)}

.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--plum); color:var(--plum)}

.btn-line{background:transparent; color:var(--plum); border-color:rgba(106,46,134,.32)}
.btn-line:hover{background:rgba(106,46,134,.08); border-color:var(--plum)}

.btn-block{width:100%; justify-content:center}

.btn .arw{
  width:15px; height:9px; flex:none;
  background:currentColor; opacity:.85;
  -webkit-mask:no-repeat center/contain; mask:no-repeat center/contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M13.5 1 19 6l-5.5 5M19 6H1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M13.5 1 19 6l-5.5 5M19 6H1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition:transform .3s var(--ease);
}
.btn:hover .arw{transform:translateX(3px)}

.btn-give{background:var(--plum); color:var(--cream-on); padding:11px 22px; font-size:13px}
.btn-give:hover{background:var(--plum-lit)}

/* inline + standalone links */
.lnk{display:inline-flex; align-items:center; gap:.5em; color:var(--plum); font-weight:600; font-size:14px}
.lnk .arw{width:14px; height:8px; background:currentColor; -webkit-mask:no-repeat center/contain; mask:no-repeat center/contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M13.5 1 19 6l-5.5 5M19 6H1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M13.5 1 19 6l-5.5 5M19 6H1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition:transform .3s var(--ease)}
.lnk:hover .arw{transform:translateX(3px)}
.lnk-inline{color:var(--plum); font-weight:600; border-bottom:1px solid rgba(106,46,134,.35)}
.lnk-inline:hover{border-color:var(--plum)}

/* ═══════════════════════════ HEADER ═══════════════════════════ */
.hdr{position:sticky; top:0; z-index:100; background:rgba(251,247,240,.82); backdrop-filter:saturate(140%) blur(12px); -webkit-backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s, background .3s}
.hdr.stuck{border-color:var(--line-2); box-shadow:0 6px 24px -18px rgba(44,34,51,.5)}
.hdr-inner{max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); height:var(--hdr); display:flex; align-items:center; gap:26px}

.lockup{display:flex; align-items:center; gap:12px; flex:none}
.lockup-mark{width:auto; height:38px}
.lockup-word{width:auto; height:19px}

.nav{margin-inline:auto}
.nav-list{display:flex; align-items:center; gap:4px}
.nav-item{position:relative}
.nav-link{display:inline-flex; align-items:center; gap:5px; padding:10px 13px; font-size:14px; font-weight:500; color:var(--ink); border-radius:8px; transition:color .2s, background .2s}
.nav-item:hover>.nav-link,.nav-link:focus-visible{color:var(--plum)}
.chev{width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-1px,-1px); opacity:.5; transition:transform .25s}
.nav-item.has-mega:hover .chev{transform:rotate(225deg) translate(-1px,-1px)}

.mega{position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%,8px); width:280px; background:var(--cream); border:1px solid var(--line); border-radius:16px; box-shadow:0 26px 60px -28px rgba(44,34,51,.4); padding:20px; opacity:0; visibility:hidden; transition:opacity .22s var(--ease), transform .22s var(--ease)}
.nav-item.has-mega:hover .mega,.nav-item.has-mega:focus-within .mega{opacity:1; visibility:visible; transform:translate(-50%,0)}
.mega::before{content:""; position:absolute; top:-14px; left:0; right:0; height:14px}
.mega-head{margin-bottom:12px}
.mega-title{font-family:var(--dsp); font-size:1.1rem; color:var(--ink)}
.mega-list li{margin:2px 0}
.mega-list span{display:block; padding:8px 10px; margin-inline:-10px; border-radius:8px; font-size:14px; font-weight:500; color:var(--ink-2)}
.mega-list span:hover{background:var(--lilac); color:var(--plum)}

.hdr-end{display:flex; align-items:center; gap:16px; flex:none}
.lang{font-family:var(--ar); font-size:14px; color:var(--ink-2)}
.burger{display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; border-radius:10px}
.burger span{display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .2s}
.hdr.drawer-on .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr.drawer-on .burger span:nth-child(2){opacity:0}
.hdr.drawer-on .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ═══════════════════════════ DRAWER ═══════════════════════════ */
.drawer{position:fixed; inset:var(--hdr) 0 0; z-index:95; background:var(--cream); overflow:hidden}
.drawer-scroll{height:100%; overflow-y:auto; padding:14px var(--gut) 40px; opacity:0; transform:translateY(-8px); transition:opacity .3s, transform .3s}
.drawer.open .drawer-scroll{opacity:1; transform:none}
.dr-list{border-top:1px solid var(--line-2)}
.dr-group,.dr-flat{border-bottom:1px solid var(--line-2)}
.dr-head{display:flex; align-items:center; justify-content:space-between; width:100%; padding:18px 2px; font-family:var(--dsp); font-size:1.3rem; color:var(--ink)}
.plus{position:relative; width:16px; height:16px; flex:none}
.plus::before,.plus::after{content:""; position:absolute; inset:0; margin:auto; background:var(--plum); transition:transform .3s}
.plus::before{width:16px; height:2px}
.plus::after{width:2px; height:16px}
.dr-head[aria-expanded="true"] .plus::after{transform:scaleY(0)}
.dr-sub{display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s var(--ease)}
.dr-head[aria-expanded="true"]+.dr-sub{grid-template-rows:1fr}
.dr-sub>ul{overflow:hidden}
.dr-sub li{padding:0 2px 12px}
.dr-sub span{font-size:15px; color:var(--ink-2)}
.dr-flat span{display:block; padding:18px 2px; font-family:var(--dsp); font-size:1.3rem; color:var(--ink)}
.dr-foot{margin-top:26px}
.dr-meta{display:flex; align-items:center; gap:14px; margin-top:16px}

/* ═══════════════════════════ HERO ═══════════════════════════ */
.hero{position:relative; overflow:hidden; padding:clamp(40px,6vw,80px) 0 clamp(50px,7vw,96px); background:
  radial-gradient(120% 90% at 88% -10%, rgba(132,73,162,.10), transparent 60%),
  radial-gradient(90% 70% at 0% 8%, rgba(199,162,91,.10), transparent 55%),
  var(--cream)}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,5vw,72px); align-items:center}

.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--plum); margin-bottom:22px}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--plum); box-shadow:0 0 0 4px rgba(106,46,134,.16)}
.hero-h1{font-family:var(--dsp); font-weight:400; font-size:clamp(3rem,7vw,5.6rem); line-height:1.0; letter-spacing:-.025em; font-variation-settings:"opsz" 144; color:var(--ink)}
.hero-h1 em{font-style:italic; font-weight:400; color:var(--plum)}
.hero-ar{
  display:inline-flex; align-items:center; gap:14px; margin-top:16px;
  font-family:var(--ar); font-weight:400;
  font-size:clamp(1.1rem,1.9vw,1.45rem); line-height:1.5;
  color:var(--plum-lit);
}
.hero-ar::before{content:""; width:38px; height:1px; flex:none; background:linear-gradient(90deg,transparent,var(--gold))}
.hero-deck{max-width:34ch; margin-top:24px; font-size:clamp(1.08rem,1.5vw,1.3rem); line-height:1.6; color:var(--ink-2)}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.hero-verse{margin-top:38px; padding-left:20px; border-left:3px solid rgba(199,162,91,.6)}
.hero-verse p{font-family:var(--dsp); font-style:italic; font-size:1.16rem; line-height:1.4; color:var(--ink)}
.hero-verse cite{display:block; margin-top:6px; font-style:normal; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--plum)}

/* ── arch motif (sanctuary / Levantine architecture) ───────── */
.arch{position:relative; border-radius:50% 50% 16px 16px / 34% 34% 3% 3%}
.arch picture{display:block; border-radius:inherit; overflow:hidden; height:100%}
.arch img{width:100%; height:100%; object-fit:cover}
.arch-ring{
  position:absolute; inset:-12px; border:1px solid rgba(199,162,91,.42);
  border-radius:inherit; pointer-events:none;
}

.hero-media{position:relative}
.hero-photo{
  aspect-ratio:5/4;
  box-shadow:0 40px 80px -50px rgba(62,26,84,.7);
}
/* the photograph is oversized so it can drift inside the arch without
   exposing an edge; `scale` is kept separate from `transform` so the
   parallax script owns translation only */
.hero-photo img{scale:1.34; transform-origin:50% 50%}

/* ── parallax ─────────────────────────────────────────────────
   The script writes --px / --py; CSS composes them so elements that
   already carry a centring transform keep it. */
[data-par]{transform:translate3d(var(--px,0px),var(--py,0px),0); will-change:transform}
.dawn[data-par]{transform:translateX(-50%) translate3d(0,var(--py,0px),0)}
.invite{position:relative; margin:-64px 18px 0 auto; max-width:340px; background:var(--cream); border:1px solid var(--line); border-radius:18px; padding:24px 26px; box-shadow:0 30px 60px -34px rgba(44,34,51,.5)}
.invite-kicker{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--plum); background:var(--lilac); padding:6px 12px; border-radius:999px; margin-bottom:14px}
.invite-name{font-family:var(--dsp); font-size:1.7rem; color:var(--ink); line-height:1}
.invite-when{margin-top:8px; font-size:15px; font-weight:600; color:var(--ink)}
.invite-note{margin-top:12px; font-size:13.5px; color:var(--ink-2); line-height:1.5}
.invite-note .am{font-size:.7em; font-weight:600; text-transform:uppercase; letter-spacing:.04em; opacity:.62; margin-left:.06em}
.invite-link{display:inline-flex; align-items:center; gap:.5em; margin-top:16px; font-size:13px; font-weight:600; color:var(--plum)}
.invite-link .arw{width:14px; height:8px; background:currentColor; -webkit-mask:no-repeat center/contain; mask:no-repeat center/contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M13.5 1 19 6l-5.5 5M19 6H1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M13.5 1 19 6l-5.5 5M19 6H1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transition:transform .3s var(--ease)}
.invite-link:hover .arw{transform:translateX(3px)}

/* ═══════════════════════════ WELCOME STRIP ═══════════════════════════ */
.strip{background:var(--plum-deep); color:var(--cream-on); padding:clamp(36px,5vw,58px) 0}
.strip-inner{display:flex; align-items:center; gap:clamp(20px,3vw,40px)}
.strip-mark{width:56px; height:auto; flex:none; filter:brightness(0) invert(1); opacity:.92}
.strip-text{font-family:var(--dsp); font-weight:300; font-size:clamp(1.2rem,2.2vw,1.9rem); line-height:1.34; color:var(--cream-on)}
.strip-text b{font-weight:500; color:#E8C878}
.strip-ar{font-family:var(--ar); font-size:clamp(1.1rem,2vw,1.6rem); color:rgba(246,239,228,.5); margin-left:auto; white-space:nowrap; flex:none}

/* ═══════════════════════════ SECTIONS ═══════════════════════════ */
.sec{padding:clamp(60px,8vw,120px) 0; position:relative; overflow:hidden}
/* positioned decoration (drift shapes, stars) would otherwise paint over
   static content, so content is lifted into its own layer */
.sec>.shell,.hero>.shell{position:relative; z-index:1}
.sec-online{background:var(--cream)}
.sec-services{background:var(--cream-2)}
.sec-community{background:var(--lilac)}
.sec-give{background:var(--cream)}
.sec-app{background:var(--cream-2)}

.sec-head{display:flex; align-items:center; gap:16px; margin-bottom:clamp(32px,4vw,54px)}
.sec-num{font-family:var(--dsp); font-size:1.1rem; color:var(--plum); opacity:.55; flex:none}
.sec-head .kicker{flex:none}
.sec-rule{flex:1 1 auto; height:1px; min-width:24px; background:linear-gradient(90deg,rgba(199,162,91,.55),rgba(199,162,91,.12))}
.sec-ar{flex:none; font-family:var(--ar); font-size:15px; color:var(--ink-3)}

/* ── online ── */
.online-grid{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(30px,5vw,64px); align-items:center}
.online-copy .h-lg{color:var(--ink)}
.online-copy .lede{margin-top:20px; max-width:36ch}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.online-video{position:relative}
.video{position:relative; border-radius:18px; overflow:hidden; box-shadow:0 34px 70px -44px rgba(62,26,84,.75); aspect-ratio:16/9; background:#000}
.video img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), opacity .4s}
.video:hover img{transform:scale(1.03)}
.video-btn{position:absolute; inset:0; margin:auto; width:78px; height:78px; border-radius:50%; background:rgba(251,247,240,.94); display:flex; align-items:center; justify-content:center; box-shadow:0 14px 34px -12px rgba(0,0,0,.5); transition:transform .3s var(--ease), background .3s}
.video-btn svg{width:30px; height:30px; fill:var(--plum); margin-left:3px}
.video-btn:hover{transform:scale(1.08); background:#fff}
.video-mount{position:absolute; inset:0; z-index:0}
.video-mount iframe{display:block; width:100%; height:100%; border:0}
.video picture{position:relative; z-index:1; height:100%}
.video-btn{z-index:2}
.video.playing picture,.video.playing .video-btn{opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility 0s .45s}
/* unmute affordance — autoplay is only permitted while muted */
.video-sound{
  position:absolute; right:14px; bottom:14px; z-index:3;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px;
  background:rgba(28,10,44,.72); color:var(--cream-on);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-size:12px; font-weight:600; letter-spacing:.04em;
  transition:background .25s, transform .25s var(--ease);
}
.video-sound svg{width:15px; height:15px; fill:currentColor}
.video-sound:hover{background:var(--plum); transform:translateY(-1px)}
.video-sound[hidden]{display:none}
.video-cap{margin-top:14px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}

/* ── services ── */
.svc-top{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:34px}
.svc-meta{text-align:right}
.addr{font-size:15px; line-height:1.55; color:var(--ink-2)}
.svc-meta .lnk{margin-top:10px}
.svc-list{border-top:1px solid var(--line)}
.svc{display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:20px; padding:22px 6px; border-bottom:1px solid var(--line); transition:background .3s, padding .3s}
.svc:hover{background:rgba(106,46,134,.05); padding-inline:18px}
.svc-name{font-family:var(--dsp); font-size:clamp(1.3rem,2.2vw,1.7rem); color:var(--ink); font-weight:400}
.svc-name small{display:inline-block; margin-left:8px; font-family:var(--sans); font-size:.62em; font-weight:600; letter-spacing:.04em; color:var(--ink-3); vertical-align:middle}
.svc-day{font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--plum); min-width:96px; text-align:right}
.svc-time{font-size:14.5px; font-weight:500; color:var(--ink-2); min-width:210px; text-align:right}

/* ── community ── */
.duo-panels{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,32px)}
.panel{background:var(--cream); border:1px solid var(--line); border-radius:20px; padding:clamp(28px,4vw,44px)}
.panel .h-md{color:var(--ink)}
.panel p{margin-top:16px; color:var(--ink-2); max-width:44ch}
.panel .btn{margin-top:26px}

/* ── give ── */
.give-grid{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(30px,5vw,64px); align-items:center}
.give-media{aspect-ratio:5/4; box-shadow:0 34px 70px -44px rgba(62,26,84,.7)}
.give-copy .h-lg{color:var(--ink)}
.give-copy .lede{margin-top:18px}
.give-copy>p{margin-top:14px; color:var(--ink-2); max-width:46ch}

/* ── scripture band ── */
/* "Resurrection" rendered as dawn: night at the top, first light rising */
.sec-word{position:relative; overflow:hidden; color:var(--cream-on); text-align:center;
  padding:clamp(76px,8.5vw,124px) 0;
  background:linear-gradient(180deg, var(--plum-ink) 0%, var(--plum-deep) 52%, var(--plum) 100%)}
.dawn{
  position:absolute; left:50%; bottom:-26%; transform:translateX(-50%);
  width:132%; height:78%; pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%, rgba(232,200,120,.40), rgba(199,162,91,.13) 46%, transparent 70%);
}

/* ── night sky over the scripture band ────────────────────────
   Three layers of stars, each twinkling on its own cycle so the
   pattern never reads as a loop. Sits behind everything else. */
.stars{
  position:absolute; inset:-90px 0; pointer-events:none; overflow:hidden;
}
.stars i{
  position:absolute; inset:0; display:block;
  background-repeat:no-repeat;
  will-change:opacity;
}
.stars i:nth-child(1){
  background-image:
    radial-gradient(1.9px 1.9px at 91.6% 76.0%, rgba(255,228,168,0.97), transparent 100%),
    radial-gradient(1.9px 1.9px at 9.2% 48.2%, rgba(255,250,238,0.83), transparent 100%),
    radial-gradient(1.9px 1.9px at 52.9% 12.2%, rgba(255,250,238,0.76), transparent 100%),
    radial-gradient(1.9px 1.9px at 44.6% 19.2%, rgba(255,250,238,0.84), transparent 100%),
    radial-gradient(1.9px 1.9px at 3.4% 8.7%, rgba(255,228,168,0.91), transparent 100%),
    radial-gradient(1.9px 1.9px at 42.3% 42.0%, rgba(255,250,238,0.92), transparent 100%),
    radial-gradient(1.9px 1.9px at 36.2% 6.5%, rgba(255,250,238,0.93), transparent 100%),
    radial-gradient(1.9px 1.9px at 58.7% 53.3%, rgba(255,250,238,0.89), transparent 100%),
    radial-gradient(1.9px 1.9px at 96.1% 30.3%, rgba(255,228,168,0.93), transparent 100%),
    radial-gradient(1.9px 1.9px at 37.1% 46.6%, rgba(255,250,238,0.9), transparent 100%),
    radial-gradient(1.9px 1.9px at 31.8% 8.7%, rgba(255,250,238,0.84), transparent 100%),
    radial-gradient(1.9px 1.9px at 71.4% 48.1%, rgba(255,250,238,0.83), transparent 100%),
    radial-gradient(1.9px 1.9px at 64.0% 16.2%, rgba(255,228,168,0.75), transparent 100%),
    radial-gradient(1.9px 1.9px at 32.7% 65.6%, rgba(255,250,238,0.76), transparent 100%),
    radial-gradient(1.9px 1.9px at 12.2% 9.7%, rgba(255,250,238,0.71), transparent 100%),
    radial-gradient(1.9px 1.9px at 28.0% 46.7%, rgba(255,250,238,0.95), transparent 100%),
    radial-gradient(1.9px 1.9px at 33.4% 30.8%, rgba(255,228,168,0.79), transparent 100%),
    radial-gradient(1.9px 1.9px at 30.9% 62.7%, rgba(255,250,238,0.86), transparent 100%),
    radial-gradient(1.9px 1.9px at 26.3% 10.4%, rgba(255,250,238,0.94), transparent 100%),
    radial-gradient(1.9px 1.9px at 70.3% 66.6%, rgba(255,250,238,0.77), transparent 100%),
    radial-gradient(1.9px 1.9px at 54.5% 73.7%, rgba(255,228,168,0.88), transparent 100%),
    radial-gradient(1.9px 1.9px at 93.7% 15.0%, rgba(255,250,238,0.99), transparent 100%),
    radial-gradient(1.9px 1.9px at 6.5% 34.5%, rgba(255,250,238,0.71), transparent 100%),
    radial-gradient(1.9px 1.9px at 80.3% 55.6%, rgba(255,250,238,0.99), transparent 100%);
  animation:twinkleA 2.6s ease-in-out infinite;
}
.stars i:nth-child(2){
  background-image:
    radial-gradient(1.4px 1.4px at 79.9% 76.0%, rgba(255,228,168,0.66), transparent 100%),
    radial-gradient(1.4px 1.4px at 97.8% 60.4%, rgba(255,250,238,0.6), transparent 100%),
    radial-gradient(1.4px 1.4px at 96.5% 31.4%, rgba(255,250,238,0.55), transparent 100%),
    radial-gradient(1.4px 1.4px at 8.4% 38.3%, rgba(255,250,238,0.55), transparent 100%),
    radial-gradient(1.4px 1.4px at 92.5% 76.1%, rgba(255,228,168,0.55), transparent 100%),
    radial-gradient(1.4px 1.4px at 11.1% 43.3%, rgba(255,250,238,0.54), transparent 100%),
    radial-gradient(1.4px 1.4px at 54.3% 65.4%, rgba(255,250,238,0.57), transparent 100%),
    radial-gradient(1.4px 1.4px at 42.3% 72.3%, rgba(255,250,238,0.63), transparent 100%),
    radial-gradient(1.4px 1.4px at 34.6% 71.6%, rgba(255,228,168,0.76), transparent 100%),
    radial-gradient(1.4px 1.4px at 88.7% 55.6%, rgba(255,250,238,0.62), transparent 100%),
    radial-gradient(1.4px 1.4px at 68.9% 66.7%, rgba(255,250,238,0.7), transparent 100%),
    radial-gradient(1.4px 1.4px at 24.4% 25.0%, rgba(255,250,238,0.62), transparent 100%),
    radial-gradient(1.4px 1.4px at 76.6% 45.5%, rgba(255,228,168,0.67), transparent 100%),
    radial-gradient(1.4px 1.4px at 82.0% 10.5%, rgba(255,250,238,0.69), transparent 100%),
    radial-gradient(1.4px 1.4px at 33.6% 45.6%, rgba(255,250,238,0.76), transparent 100%),
    radial-gradient(1.4px 1.4px at 25.3% 76.2%, rgba(255,250,238,0.51), transparent 100%),
    radial-gradient(1.4px 1.4px at 56.1% 44.3%, rgba(255,228,168,0.56), transparent 100%),
    radial-gradient(1.4px 1.4px at 56.0% 38.7%, rgba(255,250,238,0.63), transparent 100%),
    radial-gradient(1.4px 1.4px at 71.4% 2.3%, rgba(255,250,238,0.61), transparent 100%),
    radial-gradient(1.4px 1.4px at 78.0% 13.1%, rgba(255,250,238,0.77), transparent 100%),
    radial-gradient(1.4px 1.4px at 21.0% 55.1%, rgba(255,228,168,0.54), transparent 100%),
    radial-gradient(1.4px 1.4px at 45.0% 35.0%, rgba(255,250,238,0.51), transparent 100%),
    radial-gradient(1.4px 1.4px at 69.6% 39.5%, rgba(255,250,238,0.71), transparent 100%),
    radial-gradient(1.4px 1.4px at 53.8% 45.4%, rgba(255,250,238,0.66), transparent 100%),
    radial-gradient(1.4px 1.4px at 30.2% 72.1%, rgba(255,228,168,0.51), transparent 100%),
    radial-gradient(1.4px 1.4px at 86.9% 69.4%, rgba(255,250,238,0.65), transparent 100%),
    radial-gradient(1.4px 1.4px at 77.1% 54.5%, rgba(255,250,238,0.69), transparent 100%),
    radial-gradient(1.4px 1.4px at 29.6% 26.9%, rgba(255,250,238,0.6), transparent 100%);
  animation:twinkleB 3.8s ease-in-out infinite;
}
.stars i:nth-child(3){
  background-image:
    radial-gradient(2.7px 2.7px at 30.6% 76.9%, rgba(255,228,168,0.75), transparent 100%),
    radial-gradient(2.7px 2.7px at 39.0% 34.7%, rgba(255,250,238,0.89), transparent 100%),
    radial-gradient(2.7px 2.7px at 47.8% 45.2%, rgba(255,228,168,0.73), transparent 100%),
    radial-gradient(2.7px 2.7px at 28.3% 8.9%, rgba(255,250,238,0.72), transparent 100%),
    radial-gradient(2.7px 2.7px at 26.9% 68.5%, rgba(255,228,168,0.8), transparent 100%),
    radial-gradient(2.7px 2.7px at 11.8% 38.1%, rgba(255,250,238,0.69), transparent 100%),
    radial-gradient(2.7px 2.7px at 56.5% 36.5%, rgba(255,228,168,0.91), transparent 100%),
    radial-gradient(2.7px 2.7px at 26.4% 68.4%, rgba(255,250,238,0.72), transparent 100%),
    radial-gradient(2.7px 2.7px at 97.3% 51.5%, rgba(255,228,168,0.66), transparent 100%),
    radial-gradient(2.7px 2.7px at 80.1% 23.5%, rgba(255,250,238,0.76), transparent 100%);
  animation:twinkleC 5.2s ease-in-out infinite;
}
@keyframes twinkleA{0%,100%{opacity:.95} 50%{opacity:.45}}
@keyframes twinkleB{0%,100%{opacity:.50} 45%{opacity:1}}
@keyframes twinkleC{0%,100%{opacity:.80} 35%{opacity:.30} 70%{opacity:1}}

/* ── shooting stars ───────────────────────────────────────────
   Two meteors on long, offset cycles: each is only visible for a
   couple of seconds out of a much longer loop, so they read as a
   rare event rather than a repeating animation. The trail is angled
   to match the direction of travel. */
.shoot{
  position:absolute; display:block;
  width:clamp(130px,15vw,230px); height:3px;
  background:linear-gradient(90deg, transparent, rgba(255,244,214,.45) 40%, rgba(255,252,244,1));
  border-radius:999px; opacity:0;
  filter:drop-shadow(0 0 8px rgba(255,228,168,.95));
  will-change:transform,opacity;
}
/* the bright head of the meteor */
.shoot::after{
  content:""; position:absolute; right:-1px; top:50%;
  width:6px; height:6px; margin-top:-3px; border-radius:50%;
  background:#FFFDF6; box-shadow:0 0 14px 3px rgba(255,232,178,.95);
}
.sh1{top:14%; left:-16%; animation:shootBy 10s linear infinite 1s}
.sh2{top:34%; left:-16%; width:clamp(100px,11vw,175px);
     animation:shootBy 10s linear infinite 6s}

@keyframes shootBy{
  0%      {transform:translate3d(0,0,0) rotate(9deg); opacity:0}
  1.5%    {opacity:.95}
  10%     {opacity:.95}
  13%     {transform:translate3d(135vw,22vh,0) rotate(9deg); opacity:0}
  100%    {transform:translate3d(135vw,22vh,0) rotate(9deg); opacity:0}
}

/* ── ambient drifting shapes ──────────────────────────────────
   Five soft forms across the page. Heavily blurred and low contrast,
   so they read as moving light rather than as shapes. */
.drift{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  filter:blur(46px); will-change:transform;
  animation:driftFloat 34s ease-in-out infinite;
}
.d1{width:min(440px,46vw); aspect-ratio:1; top:-6%; right:-4%;
    background:radial-gradient(circle, rgba(132,73,162,.30), transparent 70%)}
.d2{width:min(340px,36vw); aspect-ratio:1; bottom:-10%; left:-6%;
    background:radial-gradient(circle, rgba(199,162,91,.30), transparent 70%);
    animation-duration:44s; animation-delay:-11s}
.d3{width:min(400px,42vw); aspect-ratio:1; top:6%; right:-8%;
    background:radial-gradient(circle, rgba(106,46,134,.22), transparent 70%);
    animation-duration:39s; animation-delay:-6s}
.d4{width:min(360px,38vw); aspect-ratio:1; bottom:-8%; left:-7%;
    background:radial-gradient(circle, rgba(199,162,91,.26), transparent 70%);
    animation-duration:47s; animation-delay:-19s}
.d5{width:min(420px,44vw); aspect-ratio:1; top:-10%; right:-6%;
    background:radial-gradient(circle, rgba(132,73,162,.24), transparent 70%);
    animation-duration:41s; animation-delay:-3s}
@keyframes driftFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%    {transform:translate3d(26px,-32px,0) scale(1.07)}
  66%    {transform:translate3d(-20px,20px,0) scale(.95)}
}
.watermark{position:absolute; inset:0; margin:auto; display:flex; align-items:center; justify-content:center; font-family:var(--ar); font-size:clamp(9rem,26vw,22rem); color:rgba(246,239,228,.05); pointer-events:none; white-space:nowrap; line-height:1}
.verse{position:relative; margin-inline:auto}
/* measure lives on the paragraph, in em, so it tracks the display size
   (a ch/max-width on the blockquote resolves against 16px, not the verse) */
.verse p{
  font-family:var(--dsp); font-weight:300;
  font-size:clamp(1.3rem,2.7vw,2.3rem); line-height:1.36; font-style:italic;
  max-width:min(94%,20.5em); margin-inline:auto;
}
.verse cite{display:inline-block; margin-top:22px; font-style:normal; font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(246,239,228,.72)}
.verse .niv{color:var(--gold)}

/* ── app ── */
/* columns size to their content and the pair is centred as a group,
   rather than the copy stretching out to the right edge */
.app-grid{
  display:grid; grid-template-columns:auto auto;
  justify-content:center; gap:clamp(30px,5vw,72px); align-items:center;
}
.app-copy{max-width:42ch}
.app-shot img{width:clamp(220px,26vw,320px); height:auto; filter:drop-shadow(0 40px 60px rgba(62,26,84,.3))}
.chip{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--plum); background:var(--lilac); padding:7px 14px; border-radius:999px; margin-bottom:18px}
.app-copy .h-md{color:var(--ink)}
.app-copy .lede{margin-top:16px; max-width:38ch}
.store-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.store{display:inline-flex; align-items:center; gap:11px; padding:12px 20px; border:1.5px solid var(--line); border-radius:12px; color:var(--ink)}
.store svg{width:22px; height:22px; fill:currentColor; flex:none}
.store span{display:flex; flex-direction:column; line-height:1.15}
.store em{font-style:normal; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3)}
.store b{font-size:15px; font-weight:600}

/* ═══════════════════════════ FOOTER ═══════════════════════════ */
.ftr{background:var(--plum-ink); color:var(--cream-on); padding:clamp(56px,7vw,88px) 0 32px}
.ftr-top{margin-bottom:clamp(40px,5vw,56px)}
.ftr-brand{max-width:560px}
.ftr-brand img{width:auto; height:56px; margin-bottom:22px; filter:brightness(0) invert(1); opacity:.95}
.ftr-stmt{font-family:var(--dsp); font-weight:300; font-size:clamp(1.3rem,2.4vw,1.9rem); line-height:1.34; color:var(--cream-on)}
.ftr-grid{display:grid; grid-template-columns:1.4fr 1fr 1.2fr 1fr; gap:clamp(28px,4vw,48px); padding-top:clamp(36px,4vw,48px); border-top:1px solid var(--line-on)}
.ftr-col .micro{color:var(--cream-on-3); margin-bottom:16px}
.ftr-col p{font-size:14.5px; line-height:1.6; color:var(--cream-on-2)}
.ftr-col .addr{color:var(--cream-on-2)}
.ftr-links li{margin:9px 0}
.ftr-links a,.ftr-links span{font-size:14.5px; color:var(--cream-on-2); transition:color .2s}
.ftr-links a:hover{color:var(--gold)}
.ftr .lnk{color:var(--gold); margin-top:12px}
.ftr-dl{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin-top:18px; font-size:14px}
.ftr-dl dt{color:var(--cream-on-3); font-weight:600}
.ftr-dl dd{color:var(--cream-on-2)}
.ftr-dl a:hover{color:var(--gold)}
.social{display:flex; gap:12px}
.social a{display:flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--line-on); border-radius:50%; transition:background .25s, border-color .25s, transform .25s}
.social svg{width:18px; height:18px; fill:var(--cream-on-2); transition:fill .25s}
.social a:hover{background:var(--gold); border-color:var(--gold); transform:translateY(-2px)}
.social a:hover svg{fill:var(--plum-ink)}
.ftr-bar{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:clamp(40px,5vw,56px); padding-top:24px; border-top:1px solid var(--line-on); font-size:12.5px; color:var(--cream-on-3)}
.ar-small{font-family:var(--ar); font-size:14px}

/* ═══════════════════════════ WHATSAPP FAB ═══════════════════════════ */
.wa{position:fixed; right:20px; bottom:20px; z-index:90; width:56px; height:56px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px -10px rgba(37,211,102,.7); transition:transform .3s var(--ease), box-shadow .3s}
.wa svg{width:30px; height:30px; fill:#fff}
.wa:hover{transform:scale(1.08) translateY(-2px); box-shadow:0 18px 36px -10px rgba(37,211,102,.8)}

/* ═══════════════════════════ REVEALS ═══════════════════════════ */
/* only hide when JS is present (html.js is set inline in <head>), so the page
   is never blank if the script fails or is blocked */
/* ── reveal on scroll ─────────────────────────────────────────
   Elements rise individually rather than as whole blocks, with a small
   stagger applied per section by the script. `translate` is used (not
   `transform`) so parallax can own `transform` on the same node.

   The hidden state is declared here rather than by the script, so
   nothing can flash visible before main.js runs. KEEP THIS LIST IN SYNC
   with RISE in main.js. */
.js .eyebrow,
.js .hero-h1,
.js .hero-ar,
.js .hero-deck,
.js .hero-cta,
.js .hero-verse,
.js .hero-photo,
.js .strip-mark,
.js .strip-text,
.js .strip-ar,
.js .sec-num,
.js .kicker,
.js .sec-rule,
.js .sec-ar,
.js .h-lg,
.js .h-md,
.js .lede,
.js .btn-row,
.js .addr,
.js .lnk,
.js .video,
.js .video-cap,
.js .svc,
.js .svc-meta,
.js .panel,
.js .give-media,
.js .give-note,
.js .chip,
.js .app-shot,
.js .store-row,
.js .verse,
.js .ftr-brand,
.js .ftr-col{
  opacity:0; translate:0 20px;
  transition:opacity .75s var(--ease), translate .75s var(--ease);
}

/* the Sunday card floats further, a beat after the hero copy */
.js .float-in{
  opacity:0; translate:0 54px;
  transition:opacity .95s var(--ease) .25s, translate .95s var(--ease) .25s;
}

/* revealed: applies to staggered atoms and to anything the script
   passes through because it is nested inside an atom */
.js .in,
.js .rise.in{opacity:1; translate:0 0}

/* ═══════════════════════════ RESPONSIVE ═══════════════════════════ */
@media (max-width:1040px){
  .nav,.hdr-end .lang{display:none}
  .burger{display:flex}
  .hero-grid{grid-template-columns:1fr; gap:20px}
  .hero-media{max-width:520px; margin-inline:auto; width:100%}
  .hero-photo{aspect-ratio:3/2}
  .arch{border-radius:44% 44% 14px 14px / 22% 22% 2% 2%}
  .invite{margin-right:0}
  .online-grid,.give-grid{grid-template-columns:1fr; gap:32px}
  .give-media{order:2}
  .app-grid{grid-template-columns:1fr; justify-items:center; text-align:center}
  .app-copy .lede{margin-inline:auto}
  .store-row{justify-content:center}
  .chip{margin-inline:auto}
}
@media (max-width:720px){
  :root{--hdr:70px}
  .strip-inner{flex-direction:column; text-align:center; gap:16px}
  .strip-ar{margin-left:0}
  .duo-panels{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr; gap:6px; padding-block:20px}
  .svc-day,.svc-time{text-align:left; min-width:0}
  .svc:hover{padding-inline:6px; background:transparent}
  .svc-top{flex-direction:column; align-items:flex-start}
  .svc-meta{text-align:left}
  /* bilingual header wraps instead of forcing sideways scroll */
  .sec-head{flex-wrap:wrap; gap:10px 12px}
  .sec-rule{min-width:12px}
  .sec-ar{font-size:14px}
  .ftr-grid{grid-template-columns:1fr 1fr; gap:32px 24px}
}
@media (max-width:480px){
  .ftr-grid{grid-template-columns:1fr}
  .hero-cta .btn,.btn-row .btn{flex:1 1 auto; justify-content:center}
}

/* ═══════════════════════════ MOTION SAFETY ═══════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .rise,.js .float-in{opacity:1; translate:none; transform:none}
  [data-par]{transform:none!important}
  .shoot{display:none}
  .hero-photo img{scale:1}
}