/* =====================================================================
   VESPERS tokens (from the design system colors_and_type.css)
   ===================================================================== */
:root{
  --ink-950:#14162E; --ink-900:#1B1E3D; --ink-800:#262A52;
  --indigo-600:#353B6E; --indigo-400:#5A5F8C;
  --gilt-800:#8A6A22; --gilt-700:#A8842F; --gilt-500:#C6A45C; --gilt-300:#E2CB94; --gilt-100:#F3E8CC;
  --parchment-50:#FBF8F0; --parchment-100:#F6F1E4; --parchment-200:#EDE5D2; --parchment-300:#DFD3B8;
  --sage-600:#5F7257; --sage-400:#8D9A7E; --sage-50:#EBEEE3;

  --bg:var(--parchment-50); --surface:#fff; --surface-warm:var(--parchment-100); --surface-sunken:var(--parchment-200);
  --fg1:#1B1E3D; --fg2:#54515f; --fg3:#7c7569;
  --on-dark-1:#FBF8F0; --on-dark-2:rgba(251,248,240,.80); --on-dark-3:rgba(251,248,240,.58);
  --accent:var(--gilt-500); --accent-strong:var(--gilt-700); --eyebrow-ink:#7a5d1b;
  --border:rgba(27,30,61,.13); --border-strong:rgba(27,30,61,.20); --border-soft:rgba(27,30,61,.07);
  --hairline-gold:rgba(198,164,92,.5); --border-on-dark:rgba(251,248,240,.16);

  --font-display:"Cormorant Garamond","Hoefler Text",Georgia,serif;
  --font-body:Mulish,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  --shadow-sm:0 2px 6px -1px rgba(27,30,61,.08);
  --shadow-md:0 10px 30px -12px rgba(27,30,61,.18);
  --shadow-lg:0 26px 60px -22px rgba(27,30,61,.30);
  --shadow-xl:0 40px 90px -30px rgba(27,30,61,.40);
  --glow-gold:0 0 0 1px rgba(198,164,92,.28), 0 12px 38px -12px rgba(198,164,92,.42);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-veil:cubic-bezier(.4,0,.2,1);

  --logo-letters:var(--ink-900);
  --arch:46% 46% 9px 9px / 31% 31% 8px 8px;   /* chapel-arch image mask */
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} }
body{margin:0; background:var(--bg); color:var(--fg1);
  font:400 1.0125rem/1.7 var(--font-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; text-wrap:balance; color:var(--fg1);}
p{margin:0;}
:focus-visible{outline:2.5px solid var(--gilt-700); outline-offset:3px; border-radius:4px;}
vm-icon{display:inline-flex; line-height:0;}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(18px,4.4vw,46px);}
.skip{position:absolute; left:14px; top:-60px; z-index:200; background:var(--ink-900); color:var(--on-dark-1); padding:11px 18px; border-radius:999px; transition:top .2s var(--ease);}
.skip:focus{top:12px;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---- compact rhythm (per client: tighter than the system default) ---- */
.pad{padding-block:clamp(46px,4vw,82px);}
.pad-s{padding-block:clamp(34px,3vw,58px);}

/* atoms */
.eyebrow{display:inline-flex; align-items:center; gap:9px; font:700 .7rem/1 var(--font-body); letter-spacing:.22em; text-transform:uppercase; color:var(--eyebrow-ink);}
.eyebrow.on-dark{color:var(--gilt-300);}
.eyebrow .dia{width:7px; height:7px; background:var(--gilt-500); transform:rotate(45deg); flex:0 0 auto;}
.kicker{font-size:clamp(2rem,3.4vw,2.85rem); line-height:1.05; margin-top:12px;}
.kicker em{font-style:italic; font-weight:500; color:var(--accent-strong);}
.lead{font:400 clamp(1.06rem,1.25vw,1.2rem)/1.66 var(--font-body); color:var(--fg2);}
.scripture{font:italic 500 clamp(1.4rem,2.3vw,1.95rem)/1.5 var(--font-display);}
.cite{display:block; font:700 .68rem/1 var(--font-body); letter-spacing:.18em; text-transform:uppercase; color:var(--fg3);}
.mvt{display:flex; align-items:center; gap:12px; font:700 .68rem/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase; color:var(--fg3); margin:0 0 14px;}
.mvt.on-dark{color:var(--on-dark-3);}
.mvt .num{color:var(--accent-strong); font-family:var(--font-display); font-size:1.05rem; letter-spacing:0;}
.mvt.on-dark .num{color:var(--gilt-300);}
.mvt .ln{flex:0 0 34px; height:1px; background:var(--hairline-gold);}

/* ── VMM Loader — branded processing state (sanctuary arch + "VM" + 3 gilt dots) ──
   Used by every form that does real work (e.g. the testimony upload). The arch
   strokes itself, the VM breathes, and three gilt dots rise in sequence. */
.vmm-loader{display:inline-flex; flex-direction:column; align-items:center; gap:15px;}
.vmm-loader-mark{width:62px; height:auto; filter:drop-shadow(0 6px 16px rgba(198,164,92,.34));}
.vmm-loader-arch{stroke:var(--gilt-500); stroke-dasharray:232; stroke-dashoffset:232; animation:vmmArch 2.4s var(--ease) infinite;}
.vmm-loader-base{stroke:var(--gilt-500); opacity:.6;}
.vmm-loader-dia{fill:var(--gilt-500);}
.vmm-loader-vm{fill:var(--ink-900); font-family:var(--font-display); font-weight:600; animation:vmmVm 2.4s ease-in-out infinite;}
.vmm-loader-dots{display:inline-flex; gap:8px;}
.vmm-loader-dots i{width:8px; height:8px; border-radius:50%; background:var(--gilt-500); opacity:.28; animation:vmmDot 1.25s ease-in-out infinite;}
.vmm-loader-dots i:nth-child(2){animation-delay:.16s;}
.vmm-loader-dots i:nth-child(3){animation-delay:.32s;}
@keyframes vmmArch{0%{stroke-dashoffset:232;} 52%{stroke-dashoffset:0;} 100%{stroke-dashoffset:-232;}}
@keyframes vmmVm{0%,100%{opacity:.5;} 50%{opacity:1;}}
@keyframes vmmDot{0%,80%,100%{opacity:.25; transform:translateY(0) scale(.82);} 40%{opacity:1; transform:translateY(-5px) scale(1);}}

/* overlay variant — a soft parchment veil over a form card while it submits */
.vmm-loader-overlay{position:absolute; inset:0; z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:24px;
  background:rgba(251,248,240,.92); backdrop-filter:blur(3px) saturate(1.05); -webkit-backdrop-filter:blur(3px) saturate(1.05);
  border-radius:inherit; animation:vmmVeil .28s var(--ease);}
.vmm-loader-cap{font:600 1.05rem/1.4 var(--font-display); color:var(--fg1); max-width:26ch;}
@keyframes vmmVeil{from{opacity:0;} to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .vmm-loader-arch,.vmm-loader-vm,.vmm-loader-dots i,.vmm-loader-overlay{animation:none !important;}
  .vmm-loader-arch{stroke-dashoffset:0;}
  .vmm-loader-dots i{opacity:.7;}
}

.btn{display:inline-flex; align-items:center; gap:9px; white-space:nowrap; font:700 .9rem/1 var(--font-body); padding:13px 24px; border-radius:999px;
  transition:transform .16s var(--ease), background-color .3s var(--ease), box-shadow .3s, border-color .3s, color .3s;}
.btn:active{transform:scale(.972);}
.btn-gold{background:var(--gilt-500); color:var(--ink-900); box-shadow:var(--glow-gold);}
.btn-ink{background:var(--ink-900); color:var(--on-dark-1);}
.btn-ghost{border:1.5px solid var(--border-strong); color:var(--fg1);}
.btn-ghost-d{border:1.5px solid var(--border-on-dark); color:var(--on-dark-1);}
.btn-white{background:#fff; color:var(--ink-900); box-shadow:var(--shadow-md);}
@media (hover:hover){
  .btn-gold:hover{background:var(--gilt-300); transform:translateY(-2px);}
  .btn-ink:hover{background:var(--ink-800); transform:translateY(-2px);}
  .btn-ghost:hover{border-color:var(--gilt-700); color:var(--accent-strong);}
  .btn-ghost-d:hover{border-color:var(--gilt-300); background:rgba(251,248,240,.06);}
  .btn-white:hover{background:var(--parchment-100); transform:translateY(-2px);}
}
.qlink{display:inline-flex; align-items:center; gap:8px; font:700 .86rem/1 var(--font-body); color:var(--accent-strong);}
.qlink.on-dark{color:var(--gilt-300);}
.qlink vm-icon{transition:transform .25s var(--ease);}
@media (hover:hover){ .qlink:hover vm-icon{transform:translateX(4px);} }

/* filter chips (shared: teachings + gallery) */
.tch-filter{display:flex; gap:9px; flex-wrap:wrap;}
.tch-chip{font:700 .8rem/1 var(--font-body); letter-spacing:.02em; padding:10px 18px; border-radius:999px;
  border:1.5px solid var(--border-strong); color:var(--fg2); background:transparent; white-space:nowrap;
  transition:color .25s, background-color .25s, border-color .25s, transform .16s var(--ease);}
.tch-chip:active{transform:scale(.96);}
.tch-chip.is-active{background:var(--ink-900); border-color:var(--ink-900); color:var(--on-dark-1);}
@media (hover:hover){ .tch-chip:hover{border-color:var(--gilt-700); color:var(--accent-strong); background:var(--gilt-100);}
  .tch-chip.is-active:hover{background:var(--ink-800); color:var(--on-dark-1);} }
.tch-empty{margin-top:26px; text-align:center; font:500 1rem/1.5 var(--font-body); color:var(--fg2);}
.tch-empty button{color:var(--accent-strong); font-weight:700; text-decoration:underline; text-underline-offset:3px;}

/* photo frames — golden base shows while loading or if a photo fails */
.ph{position:relative; overflow:hidden; background:
  radial-gradient(72% 60% at 64% 24%, rgba(226,203,148,.30), transparent 70%),
  linear-gradient(150deg,#2b2f5c,#1B1E3D 58%,#14162E);}
.ph>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .8s var(--ease-veil);}
.js .ph>img{opacity:0;}
.ph>img.on{opacity:1;}
.arch-mask{border-radius:var(--arch);}

/* gilt thread + descending diamond bead (scroll progress) */
.thread{position:fixed; left:26px; top:96px; bottom:96px; width:1px; z-index:40; pointer-events:none; display:none;
  background:linear-gradient(var(--hairline-gold), rgba(198,164,92,.12));}
.thread .bead{position:absolute; left:50%; top:0; width:9px; height:9px; background:var(--gilt-500); transform:translate(-50%,0) rotate(45deg);
  box-shadow:0 0 0 4px rgba(198,164,92,.16), 0 0 16px 2px rgba(226,203,148,.5); transition:top .12s linear;}
@media (min-width:1280px){ .thread{display:block;} }

/* =====================================================================
   Header — floating pill nav with social icons + expandable search
   ===================================================================== */
.hdr{position:fixed; inset:0 0 auto 0; z-index:100; transition:background-color .4s var(--ease), box-shadow .4s, border-color .4s;
  border-bottom:1px solid transparent;}
.hdr-row{display:flex; align-items:center; gap:14px; padding:13px 0;}
.hdr.solid{background:rgba(251,248,240,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom-color:var(--border-soft);}
.brand{display:flex; align-items:center; gap:12px; flex:0 0 auto;}
.brand-mark{width:30px; height:39px; flex:0 0 auto;}
.brand-mark .vm-letters{fill:var(--logo-letters); font-family:var(--font-display); font-weight:600;}
.brand-word{display:flex; flex-direction:column; line-height:1;}
.brand-word b{font:600 1.22rem/1 var(--font-display); letter-spacing:.005em; color:var(--on-dark-1); transition:color .4s;}
.brand-word small{font:700 .46rem/1 var(--font-body); letter-spacing:.36em; color:var(--gilt-300); margin-top:4px; transition:color .4s;}
.hdr.solid .brand-word b{color:var(--fg1);} .hdr.solid .brand-word small{color:var(--eyebrow-ink);}
:root{--logo-letters:var(--on-dark-1);} .hdr.solid{--logo-letters:var(--ink-900);}
/* sticky-header treatment: logo sits on a white pill */
.brand{position:relative;}
.brand::before{content:""; position:absolute; z-index:-1; inset:-7px -18px; border-radius:999px; background:#fff;
  border:1px solid var(--border-soft); box-shadow:0 4px 12px -5px rgba(0,0,0,.14); opacity:0; transform:scale(.92);
  transition:opacity .4s var(--ease), transform .4s var(--ease); pointer-events:none;}
.hdr.solid .brand::before{opacity:1; transform:none;}
.hdr.solid .iconbtn[data-search-btn]{background:var(--ink-900); color:var(--on-dark-1);}
@media (hover:hover){ .hdr.solid .iconbtn[data-search-btn]:hover{background:var(--ink-800);} }

.navpill{display:none; align-items:center; gap:6px; margin:0 auto; padding:7px 8px 7px 18px;
  background:rgba(251,248,240,.1); border:1px solid var(--border-on-dark); border-radius:999px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background-color .4s, border-color .4s;}
.hdr.solid .navpill{background:#fff; border-color:var(--border-soft); box-shadow:var(--shadow-sm);}
.navpill a{position:relative; font:600 .9rem/1 var(--font-body); color:var(--on-dark-2); padding:9px 13px; border-radius:999px; transition:color .3s, background-color .3s;}
/* active page — reliable, clearly visible: gilt text + gilt underline dash */
.navpill a[aria-current="page"]{color:var(--gilt-300);}
.navpill a[aria-current="page"]::after{content:""; position:absolute; left:50%; bottom:2px; width:18px; height:2px; border-radius:2px; background:var(--gilt-500); transform:translateX(-50%);}
.hdr.solid .navpill a{color:var(--fg2);}
.hdr.solid .navpill a[aria-current="page"]{color:var(--accent-strong);}
.hdr.solid .navpill a[aria-current="page"]::after{background:var(--gilt-700);}
@media (hover:hover){ .navpill a:hover{color:var(--on-dark-1); background:rgba(251,248,240,.1);} .hdr.solid .navpill a:hover{color:var(--fg1); background:var(--surface-warm);} }
.navpill .pdiv{width:1px; height:22px; background:var(--border-on-dark); margin:0 4px;}
.hdr.solid .navpill .pdiv{background:var(--border);}
.navpill .soc{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; color:var(--on-dark-2); transition:color .3s, background-color .3s;}
.hdr.solid .navpill .soc{color:var(--fg2);}
@media (hover:hover){ .navpill .soc:hover{color:var(--gilt-300); background:rgba(251,248,240,.1);} .hdr.solid .navpill .soc:hover{color:var(--accent-strong); background:var(--surface-warm);} }

.hdr-right{display:flex; align-items:center; gap:10px; flex:0 0 auto; margin-left:auto;}
.iconbtn{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; color:var(--on-dark-1); transition:background-color .3s, color .3s;}
.hdr.solid .iconbtn{color:var(--fg1);}
@media (hover:hover){ .iconbtn:hover{background:rgba(251,248,240,.12);} .hdr.solid .iconbtn:hover{background:rgba(27,30,61,.06);} }
/* expandable search */
.search{display:flex; align-items:center;}
.search form{display:grid; grid-template-columns:0fr; align-items:center; overflow:hidden; opacity:0; transition:grid-template-columns .42s var(--ease), opacity .3s;}
.search.open form{grid-template-columns:1fr; opacity:1;}
.search input{width:min(220px,44vw); min-width:0; background:rgba(251,248,240,.12); border:1px solid var(--border-on-dark); color:var(--on-dark-1);
  border-radius:999px; padding:10px 16px; font:400 .9rem/1 var(--font-body); margin-right:6px;}
.hdr.solid .search input{background:var(--surface); border-color:var(--border); color:var(--fg1);}
.search input::placeholder{color:var(--on-dark-3);} .hdr.solid .search input::placeholder{color:var(--fg3);}
.give-top{display:none;}
.menu-btn{display:inline-flex;}
@media (min-width:980px){ .navpill{display:flex;} .give-top{display:inline-flex;} .menu-btn{display:none;} .hdr-right{margin-left:0;} }
/* mobile: search drops down as full-width drawer below header */
@media (max-width:979px){
  .search form{position:absolute; left:0; right:0; top:100%; display:block; overflow:visible;
    background:var(--ink-900); padding:11px clamp(18px,4.4vw,46px) 13px; box-shadow:var(--shadow-md);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;}
  .hdr.solid .search form{background:rgba(251,248,240,.98); border-bottom:1px solid var(--border-soft);}
  .search.open form{opacity:1; visibility:visible; transform:none;}
  .search input{width:100%; margin-right:0;}
}

/* mobile menu */
.mm{position:fixed; inset:0; z-index:150; background:rgba(20,22,46,.55); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); opacity:0; visibility:hidden; transition:opacity .32s var(--ease-veil), visibility .32s;}
.mm.open{opacity:1; visibility:visible;}
.mm-panel{position:absolute; inset:0 0 auto 0; background:var(--ink-900); padding:calc(env(safe-area-inset-top) + 16px) clamp(18px,4.4vw,46px) 26px; transform:translateY(-10%); opacity:0; transition:transform .4s var(--ease), opacity .4s; box-shadow:var(--shadow-lg);}
.mm.open .mm-panel{transform:none; opacity:1;}
.mm-top{display:flex; align-items:center;}
.mm nav{display:flex; flex-direction:column; margin-top:18px; border-top:1px solid var(--border-on-dark);}
.mm nav a{display:flex; justify-content:space-between; align-items:center; padding:15px 2px; font:500 1.4rem/1 var(--font-display); color:var(--on-dark-1); border-bottom:1px solid var(--border-on-dark);}
.mm nav a vm-icon{color:var(--gilt-300);}
.mm .soc-row{display:flex; gap:12px; margin-top:18px;}
.mm .soc-row a{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; border:1px solid var(--border-on-dark); color:var(--on-dark-1);}
.mm .acts{display:flex; flex-direction:column; gap:11px; margin-top:18px;}
.mm .btn{justify-content:center;}

section{position:relative;}

/* =====================================================================
   HERO — animated background, max 90vh, h1 on one line
   ===================================================================== */
.hero{position:relative; overflow:hidden; background:var(--ink-900); color:var(--on-dark-1); display:flex; align-items:center; min-height:88vh;}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;}
.js .hero-bg img.lit{animation:heroFade 18s var(--ease-veil) infinite;}
.js .hero-bg img.lit:nth-child(2){animation-delay:6s;}
.js .hero-bg img.lit:nth-child(3){animation-delay:12s;}
@keyframes heroFade{
  0%{opacity:0; transform:scale(1.05);}
  5%{opacity:1;}
  28%{opacity:1; transform:scale(1.13);}
  36%{opacity:0;}
  100%{opacity:0;}
}
.hero-scrim{position:absolute; inset:0; z-index:1; background:
  linear-gradient(95deg, rgba(20,22,46,.86) 0%, rgba(20,22,46,.66) 42%, rgba(20,22,46,.34) 72%, rgba(20,22,46,.5) 100%),
  radial-gradient(60% 60% at 22% 38%, rgba(226,203,148,.16), transparent 60%);}
.hero-arch{position:absolute; z-index:1; left:50%; bottom:-22%; transform:translateX(-50%); width:min(560px,86vw); height:min(560px,86vw);
  border:1.5px solid rgba(226,203,148,.16); border-bottom:0; border-radius:50% 50% 0 0 / 64% 64% 0 0; pointer-events:none;}
.hero-inner{position:relative; z-index:2; width:100%; padding-top:clamp(96px,12vw,128px); padding-bottom:clamp(40px,6vw,68px);}
.hero h1{color:var(--on-dark-1); font-size:clamp(2.7rem,6.4vw,5.1rem); line-height:1.02; margin:14px 0 0; text-shadow:0 2px 40px rgba(20,22,46,.5);}
@media (min-width:680px){ .hero h1{white-space:nowrap;} }
.hero .lead{color:var(--on-dark-2); margin-top:16px; max-width:44ch;}
.hero .verse{margin-top:20px; padding-left:18px; border-left:2px solid var(--hairline-gold);}
.hero .verse p{font:italic 500 1.12rem/1.5 var(--font-display); color:var(--gilt-300);}
.hero .verse .cite{margin-top:8px;}
.hero .cta{display:flex; gap:13px; flex-wrap:wrap; margin-top:24px;}
@media (min-width:900px){ .hero{height:90vh; min-height:580px; max-height:900px;} }
/* mobile: full-height threshold (svh accounts for browser chrome) */
@media (max-width:899px){ .hero{height:100vh; height:100svh; min-height:560px; max-height:none;} }
/* scroll hint — mobile only — points upward to cue an upward swipe */
.hero-scroll{position:absolute; z-index:3; bottom:clamp(18px,4vw,30px); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:7px; color:rgba(251,248,240,.6); pointer-events:none; animation:scrollBounce 2.4s var(--ease) infinite;}
.hero-scroll-lbl{font:700 .6rem/1 var(--font-body); letter-spacing:.22em; text-transform:uppercase; color:var(--gilt-300);}
@keyframes scrollBounce{0%,100%{transform:translateX(-50%) translateY(0);}55%{transform:translateX(-50%) translateY(-9px);}}
@media (min-width:900px){ .hero-scroll{display:none;} }
@media (prefers-reduced-motion:reduce){ .hero-scroll{animation:none;} }

/* =====================================================================
   WHERE TO BEGIN (interactive door previews)
   ===================================================================== */
.begin{background:var(--surface-warm);}
.begin-head{max-width:60ch;}
.begin-head .lead{margin-top:12px; max-width:54ch;}
.begin-grid{display:grid; grid-template-columns:1fr; gap:clamp(22px,3vw,44px); margin-top:clamp(22px,3vw,34px); align-items:start;}
.begin-list{border-top:1px solid var(--border);}
.wb-row{display:flex; align-items:center; gap:16px; width:100%; text-align:left; padding:14px 6px 14px 2px; border-bottom:1px solid var(--border); color:var(--fg1); transition:color .24s var(--ease);}
.wb-row .n{flex:0 0 auto; width:24px; font:700 .72rem/1 var(--font-body); letter-spacing:.06em; color:var(--gilt-700); transition:color .24s;}
.wb-thumb{flex:0 0 54px; width:54px; height:62px; border-radius:var(--arch); display:none;}
.wb-meta{flex:1; min-width:0;}
.wb-meta .t{display:block; font:500 1.3rem/1.1 var(--font-display); letter-spacing:-.01em; color:inherit;}
.wb-meta .d{display:block; font:400 .85rem/1.4 var(--font-body); color:var(--fg2); margin-top:3px;}
.wb-row .go{flex:0 0 auto; color:var(--accent-strong); opacity:0; transform:translateX(-8px); transition:opacity .24s var(--ease), transform .24s var(--ease);}
.wb-row[aria-current="true"]{color:var(--accent-strong);}
.wb-row[aria-current="true"] .n{color:var(--accent-strong);}
@media (hover:hover){ .wb-row:hover{color:var(--accent-strong);} .wb-row:hover .n{color:var(--accent-strong);} .wb-row:hover .go{opacity:1; transform:none;} }
.wb-pane{position:sticky; top:96px; display:none;}
.wb-pane .ph{aspect-ratio:5/6; box-shadow:var(--shadow-lg);}
.wb-pane .ph::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px var(--hairline-gold); pointer-events:none; z-index:3;}
.wb-pane .ph>img{transition:opacity .4s var(--ease-veil), filter .4s var(--ease-veil);}
.wb-pane .ph>img.swapping{opacity:0; filter:blur(8px);}
.wb-pane .pcap{position:absolute; z-index:4; left:16px; right:16px; bottom:16px; color:#fff;}
.wb-pane .pcap .pt{font:600 1.5rem/1.1 var(--font-display);}
.wb-pane .pcap .pd{font:400 .9rem/1.45 var(--font-body); color:rgba(255,255,255,.86); margin-top:5px;}
.wb-pane .pcap::before{content:""; position:absolute; inset:-40px -16px -16px; z-index:-1; background:linear-gradient(transparent, rgba(20,22,46,.74)); border-radius:0 0 9px 9px;}
@media (min-width:880px){ .begin-grid{grid-template-columns:1.05fr .95fr;} .wb-pane{display:block;} }
@media (max-width:879px){ .wb-thumb{display:block;} }
@media (min-width:880px){ .wb-pane .ph{max-height:min(500px, calc(100vh - 200px));} }

/* =====================================================================
   SCRIPTURE REST — auto-rotating carousel with category badges
   ===================================================================== */
.rest{background:var(--parchment-50);}
.rest-wrap{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(12px,3vw,30px);}
.rest-nav{flex:0 0 auto; width:46px; height:46px; border-radius:50%; border:1.5px solid var(--border-strong); color:var(--fg2);
  display:flex; align-items:center; justify-content:center; transition:border-color .25s, color .25s, background-color .25s;}
@media (hover:hover){ .rest-nav:hover{border-color:var(--gilt-500); color:var(--accent-strong); background:var(--gilt-100);} }
.rest-stage{display:grid; min-width:0; min-height:1px;}
.rest-slide{grid-area:1/1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; opacity:0; visibility:hidden;
  transform:translateY(8px); transition:opacity .6s var(--ease-veil), transform .6s var(--ease-veil), visibility .6s;}
.rest-slide.is-active{opacity:1; visibility:visible; transform:none;}
.rest-badge{display:inline-flex; align-items:center; gap:7px; font:700 .68rem/1 var(--font-body); letter-spacing:.16em; text-transform:uppercase; padding:7px 14px; border-radius:999px;}
.rest-badge vm-icon{width:14px;height:14px;}
.badge-comfort{background:var(--sage-50); color:var(--sage-600);}
.badge-assurance{background:var(--gilt-100); color:var(--gilt-800);}
.badge-renewal{background:#E8E9F2; color:var(--indigo-600);}
.rest-slide .scripture{color:var(--fg1); max-width:24ch; letter-spacing:-.01em;}
.rest-slide .scripture::before{content:""; display:block; width:30px; height:1px; background:var(--hairline-gold); margin:0 auto 14px;}
.rest-dots{display:flex; justify-content:center; gap:9px; margin-top:24px;}
.rest-dots button{width:8px; height:8px; border-radius:50%; padding:0; min-width:0; aspect-ratio:1; background:var(--border-strong); transition:background-color .25s, transform .25s;}
.rest-dots button[aria-selected="true"]{background:var(--gilt-500); transform:scale(1.25);}

/* =====================================================================
   TEACHINGS — two 50% featured (flush image) + four small (2x2)
   ===================================================================== */
.teach{background:var(--parchment-50);}
.teach-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.teach-head h2{font-size:clamp(1.9rem,3vw,2.5rem); line-height:1.06; margin-top:12px;}
.feat-grid{display:grid; grid-template-columns:1fr; gap:20px; margin-top:clamp(22px,3vw,32px);}
.feat{display:grid; grid-template-columns:1fr; background:var(--surface); border:1px solid var(--border-soft); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.feat .ph{aspect-ratio:16/11; display:block; cursor:pointer;}
.feat .ph .play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; width:56px; height:56px; border-radius:50%; background:rgba(251,248,240,.95); color:var(--ink-900); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); transition:transform .35s var(--ease);}
.feat .dur{position:absolute; z-index:3; right:11px; bottom:11px; font:700 .68rem/1 var(--font-body); color:#fff; background:rgba(20,22,46,.66); padding:6px 9px; border-radius:999px;}
.feat .fb{padding:18px 20px 22px; display:flex; flex-direction:column;}
.feat .tag{font:700 .68rem/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:var(--eyebrow-ink);}
.feat h3{font-size:clamp(1.55rem,2.4vw,2rem); line-height:1.08; margin:9px 0 8px;}
.feat .meta{display:flex; align-items:center; gap:8px; font:500 .85rem/1.4 var(--font-body); color:var(--fg2);}
.feat .meta vm-icon{color:var(--fg3);}
.feat .qlink{margin-top:14px;}
@media (hover:hover){ .feat:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg);} .feat:hover .play{transform:translate(-50%,-50%) scale(1.06);} }

.small-grid{display:grid; grid-template-columns:1fr; gap:0 clamp(24px,4vw,52px); margin-top:20px;}
.srow{display:flex; align-items:center; gap:15px; padding:14px 4px; border-top:1px solid var(--border); color:var(--fg1); transition:color .22s var(--ease);}
.srow .sth{flex:0 0 78px; width:78px; height:56px; border-radius:9px;}
.srow .sm{flex:1; min-width:0;}
.srow .stag{font:700 .62rem/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:var(--eyebrow-ink);}
.srow .stag.sage{color:var(--sage-600);}
.srow .st{display:block; font:600 1.16rem/1.16 var(--font-display); margin-top:5px;}
.srow .smeta{font:500 .78rem/1.3 var(--font-body); color:var(--fg2); margin-top:4px;}
.srow .sgo{flex:0 0 auto; color:var(--fg3); transition:color .22s var(--ease), transform .22s var(--ease);}
@media (hover:hover){ .srow:hover{color:var(--accent-strong);} .srow:hover .sgo{color:var(--accent-strong); transform:translateX(3px);} }
@media (min-width:760px){
  .feat-grid{grid-template-columns:1fr 1fr;}
  .feat{grid-template-columns:1.02fr 1.18fr; align-items:stretch;}
  .feat .ph{aspect-ratio:auto; height:100%; min-height:230px;}
  .feat .fb{justify-content:center;}
  .small-grid{grid-template-columns:1fr 1fr;}
  .small-grid .srow:nth-child(2){border-top:1px solid var(--border);}
}

/* =====================================================================
   VISION — fixed background (parallax), pillars, CTA
   ===================================================================== */
.vision{position:relative; color:var(--on-dark-1); background:var(--ink-900); overflow:hidden;}
.vision-bg{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
  background-image:linear-gradient(rgba(20,22,46,.72), rgba(20,22,46,.86)), url('../media/images/images-compressed/vmm_home_join_movement.webp');}
@media (min-width:900px){ .vision-bg{background-attachment:fixed;} }
.vision .inner{position:relative; z-index:2;}
.vision .stmt{max-width:24ch; font:600 clamp(1.7rem,3vw,2.5rem)/1.22 var(--font-display); letter-spacing:-.01em; margin:13px 0 0; color:var(--on-dark-1);}
.vision .stmt em{font-style:italic; color:var(--gilt-300);}
.vision .vcta{margin-top:24px;}
.pillars{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.4vw,26px); margin-top:clamp(26px,3.5vw,40px);}
.pillar{display:flex; gap:13px; align-items:flex-start;}
.pillar .med{flex:0 0 auto; width:44px; height:50px; display:flex; align-items:center; justify-content:center; color:var(--gilt-300);
  border:1.5px solid rgba(226,203,148,.42); background:rgba(226,203,148,.07); border-radius:50% 50% 12px 12px / 60% 60% 12px 12px;}
.pillar h4{color:var(--on-dark-1); font-size:1.28rem; line-height:1.1;}
.pillar p{font:400 .86rem/1.55 var(--font-body); color:var(--on-dark-2); margin-top:4px;}
@media (min-width:820px){ .vision .inner{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(30px,5vw,64px); align-items:center;} .pillars{margin-top:0; grid-template-columns:repeat(2,1fr);} }

/* =====================================================================
   GATHER — three image cards (prayer / give / events)
   ===================================================================== */
.gather{background:var(--parchment-50);}
.gather-grid{display:grid; grid-template-columns:1fr; gap:18px; margin-top:clamp(22px,3vw,34px);}
.gcard{position:relative; overflow:hidden; border-radius:18px; padding:clamp(22px,2.6vw,30px); display:flex; flex-direction:column; min-height:280px; color:var(--on-dark-1); box-shadow:var(--shadow-md);}
.gcard .ph{position:absolute; inset:0; z-index:0; border-radius:0;}
.gcard .scr{position:absolute; inset:0; z-index:1;}
.gcard>*{position:relative; z-index:2;}
.gcard .scr-prayer{background:linear-gradient(165deg, rgba(20,22,46,.55), rgba(20,22,46,.9));}
.gcard .scr-give{background:linear-gradient(165deg, rgba(94,72,18,.4), rgba(20,22,46,.88));}
.gcard .scr-events{background:linear-gradient(165deg, rgba(47,53,82,.5), rgba(20,22,46,.9));}
.gcard .med{width:46px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:50% 50% 12px 12px / 60% 60% 12px 12px;
  color:var(--gilt-300); border:1.5px solid rgba(226,203,148,.45); background:rgba(226,203,148,.1); margin-bottom:15px;}
.gcard h3{color:var(--on-dark-1); font-size:1.5rem; line-height:1.12;}
.gcard p{margin-top:9px; font:400 .92rem/1.55 var(--font-body); color:var(--on-dark-2);}
.gcard .when{margin-top:13px; display:flex; align-items:center; gap:9px; font:600 .82rem/1.4 var(--font-body); color:var(--gilt-300);}
.gcard .btn, .gcard .qlink{margin-top:auto;}
.gcard .qlink{padding-top:16px;}
@media (min-width:760px){ .gather-grid{grid-template-columns:repeat(3,1fr);} }

/* =====================================================================
   TESTIMONIALS — "Lives transformed"
   ===================================================================== */
.testi{background:var(--surface-warm);}
.testi-head{text-align:center; max-width:60ch; margin-inline:auto;}
.testi-head .lead{margin-top:12px;}
.testi-grid{display:grid; grid-template-columns:1fr; gap:18px; margin-top:clamp(22px,2vw,40px);}
.tcard{margin: 0; position:relative; background:var(--surface); border:1px solid var(--border-soft); border-radius:18px; padding:26px 24px 24px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.tcard .qmark{color:var(--gilt-500); opacity:.9; margin-bottom:6px;}
.tcard blockquote{margin:0; font:italic 500 1.22rem/1.5 var(--font-display); color:var(--fg1); letter-spacing:-.01em;}
.tcard .who{display:flex; align-items:center; gap:13px; margin-top:20px; padding-top:18px; border-top:1px solid var(--border);}
.tcard .who .ph{flex:0 0 auto; width:54px; height:62px; border-radius:var(--arch); box-shadow:var(--shadow-sm);}
.tcard .who .nm{display:block; font:700 .95rem/1.2 var(--font-body); color:var(--fg1);}
.tcard .who .ro{display:block; font:500 .8rem/1.3 var(--font-body); color:var(--fg2); margin-top:3px;}
.tcard .who .ro-flag{font-size:1.02em; margin-right:2px;}
.tcard .fruit{position:absolute; top:20px; right:20px; font:700 .62rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-strong); background:var(--gilt-100); padding:6px 12px; border-radius:999px;}
@media (hover:hover){ .tcard:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg);} }
@media (min-width:560px){ .testi-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){
  .testi-grid{grid-template-columns:repeat(4,1fr);}
  .tcard{padding:22px 20px 22px;}
  .tcard blockquote{font-size:1.1rem;}
  .tcard:nth-child(even){transform:translateY(20px);}
  @media (hover:hover){ .tcard:nth-child(even):hover{transform:translateY(15px);} }
}

/* =====================================================================
   GALLERY — masonry + lightbox
   ===================================================================== */
.gallery{background:var(--parchment-50);}
.gal-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:clamp(24px,3vw,38px); grid-auto-rows:1fr;}
.gtile{position:relative; overflow:hidden; border-radius:12px; aspect-ratio:1/1; cursor:pointer;}
.gtile::after{content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(transparent 44%, rgba(20,22,46,.74)); transition:background .4s var(--ease);}
.gtile .cap{position:absolute; z-index:3; left:0; right:0; bottom:0; padding:14px; color:#fff; font:600 .82rem/1.3 var(--font-body); transform-origin:left bottom; transition:transform .35s var(--ease);}
.gtile .zoom{position:absolute; z-index:3; top:11px; right:11px; width:34px; height:34px; border-radius:50%; background:rgba(251,248,240,.92); color:var(--ink-900); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.85); transition:opacity .3s var(--ease), transform .3s var(--ease);}
.gtile>img{transition:transform .8s var(--ease-veil);}
@media (hover:hover){ .gtile:hover::after{background:linear-gradient(transparent 26%, rgba(20,22,46,.86));} .gtile:hover .cap{transform:scale(1.07);} .gtile:hover .zoom{opacity:1; transform:none;} .gtile:hover>img{transform:scale(1.07);} }
@media (min-width:720px){ .gal-grid{grid-template-columns:repeat(4,1fr); grid-auto-rows:200px;} .gtile{aspect-ratio:auto;} .gtile.lg{grid-column:span 2; grid-row:span 2;} .gtile.wide{grid-column:span 2;} }

/* lightbox */
.lb{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,48px);
  background:rgba(13,14,28,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:opacity .35s var(--ease-veil), visibility .35s;}
.lb.open{opacity:1; visibility:visible;}
.lb-fig{position:relative; max-width:min(1100px,100%); max-height:100%; display:flex; flex-direction:column; align-items:center; gap:14px; transform:scale(.97); transition:transform .35s var(--ease);}
.lb.open .lb-fig{transform:none;}
.lb-imgwrap{position:relative; display:flex; max-width:100%;}
.lb-fig img{max-width:100%; max-height:80vh; border-radius:10px; box-shadow:var(--shadow-xl); object-fit:contain; display:block;}
.lb-cap{color:var(--on-dark-2); font:500 .9rem/1.4 var(--font-body); text-align:center;}
.lb-cap b{color:var(--on-dark-1); font-weight:700;}
.lb-btn{position:fixed; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; background:rgba(18,20,44,.72); border:1px solid var(--border-on-dark); color:var(--on-dark-1); display:flex; align-items:center; justify-content:center; transition:background-color .25s; z-index:211; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
@media (hover:hover){ .lb-btn:hover{background:rgba(251,248,240,.22);} }
.lb-prev{left:20px;} .lb-next{right:20px;}
.lb-close{position:fixed; top:18px; right:18px; width:46px; height:46px; border-radius:50%; background:rgba(251,248,240,.12); border:1px solid var(--border-on-dark); color:var(--on-dark-1); display:flex; align-items:center; justify-content:center;}
@media (max-width:640px){ .lb-prev{left:8px;} .lb-next{right:8px;} .lb-btn{width:44px;height:44px;} }

/* video modal (YouTube, in-page) */
.vmodal{position:fixed; inset:0; z-index:210; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,52px);
  background:rgba(13,14,28,.93); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:opacity .35s var(--ease-veil), visibility .35s;}
.vmodal.open{opacity:1; visibility:visible;}
.vm-frame{width:min(1000px,100%); transform:scale(.97); transition:transform .35s var(--ease);}
.vmodal.open .vm-frame{transform:none;}
.vm-ratio{position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; box-shadow:var(--shadow-xl); background:#000;}
.vm-ratio iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.vm-close{position:fixed; top:18px; right:18px; width:46px; height:46px; border-radius:50%; background:rgba(251,248,240,.12); border:1px solid var(--border-on-dark); color:var(--on-dark-1); display:flex; align-items:center; justify-content:center; transition:background-color .25s;}
@media (hover:hover){ .vm-close:hover{background:rgba(251,248,240,.22);} }

/* =====================================================================
   Teaching player (shared chrome) — used by the single teaching page
   AND by the in-place modal player on the Teachings library / homepage.
   ===================================================================== */
.t-player{border-radius:16px; overflow:hidden; box-shadow:var(--shadow-xl); background:#000;}
.t-ratio{position:relative; width:100%; aspect-ratio:16/9; background:#000;}
.t-ratio iframe, .t-ratio video, .t-ratio img{position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover;}
.t-player--audio{background:var(--ink-900); display:flex; flex-direction:column;}
.t-audio-art{position:relative; aspect-ratio:16/8; overflow:hidden;}
.t-audio-art img{width:100%; height:100%; object-fit:cover;}
.t-audio-veil{position:absolute; inset:0; background:linear-gradient(150deg, rgba(20,22,46,.4), rgba(20,22,46,.86)),
  radial-gradient(60% 70% at 50% 30%, rgba(226,203,148,.22), transparent 65%);}
.t-audio-badge{position:absolute; z-index:2; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:8px;
  font:700 .68rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-900); background:var(--gilt-300); padding:8px 14px; border-radius:999px;}
.t-sc{display:block; width:100%; height:166px; border:0; background:var(--ink-900);}
.t-native-audio{width:100%; padding:18px; background:var(--ink-900);}

/* in-place teaching player modal */
.tpmodal{position:fixed; inset:0; z-index:210; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,52px);
  background:rgba(13,14,28,.93); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:opacity .35s var(--ease-veil), visibility .35s;}
.tpmodal.open{opacity:1; visibility:visible;}
.tpmodal-card{width:min(900px,100%); transform:scale(.97) translateY(8px); transition:transform .4s var(--ease);}
.tpmodal.open .tpmodal-card{transform:none;}
.tpmodal-stage{position:relative;}
.tpmodal-foot{display:flex; align-items:center; justify-content:space-between; gap:16px 20px; flex-wrap:wrap; margin-top:18px;}
.tpmodal-meta{min-width:0;}
.tpmodal-tag{font:700 .64rem/1 var(--font-body); letter-spacing:.16em; text-transform:uppercase; color:var(--gilt-300);}
.tpmodal-title{font:600 clamp(1.3rem,2vw,1.7rem)/1.12 var(--font-display); color:var(--on-dark-1); margin:7px 0 0; letter-spacing:-.01em;}
.tpmodal-close{position:fixed; top:18px; right:18px; width:46px; height:46px; border-radius:50%; background:rgba(251,248,240,.12); border:1px solid var(--border-on-dark); color:var(--on-dark-1); display:flex; align-items:center; justify-content:center; transition:background-color .25s;}
@media (hover:hover){ .tpmodal-close:hover{background:rgba(251,248,240,.22);} }
@media (max-width:560px){ .tpmodal-foot{justify-content:center; text-align:center;} .tpmodal-foot .btn{width:100%; justify-content:center;} }

/* TikTok reel modal (vertical 9:16) */
.ttmodal{position:fixed; inset:0; z-index:210; display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,52px);
  background:rgba(13,14,28,.93); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:opacity .35s var(--ease-veil), visibility .35s;}
.ttmodal.open{opacity:1; visibility:visible;}
.tt-frame{display:flex; flex-direction:column; align-items:center; gap:16px; transform:scale(.97); transition:transform .35s var(--ease);}
.ttmodal.open .tt-frame{transform:none;}
.tt-ratio{position:relative; width:min(340px,86vw); aspect-ratio:9/16; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-xl); background:#000;}
.tt-ratio iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.tt-open{display:inline-flex; align-items:center; gap:8px; font:700 .82rem/1 var(--font-body); color:var(--on-dark-1);
  border:1px solid var(--border-on-dark); padding:11px 18px; border-radius:999px; transition:background-color .25s, border-color .25s;}
.tt-open vm-icon{color:var(--gilt-300);}
@media (hover:hover){ .tt-open:hover{background:rgba(251,248,240,.1); border-color:var(--gilt-300);} }

/* gallery reel tiles — always-on Reel ribbon + centred play affordance */
.gtile-play{position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%) scale(.92); width:54px; height:54px; border-radius:50%;
  background:rgba(251,248,240,.92); color:var(--ink-900); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md);
  transition:transform .35s var(--ease), background-color .25s;}
.gtile--reel .gtile-cat{opacity:1; transform:none; display:inline-flex; align-items:center; gap:6px;}
.gtile--reel .gtile-cat vm-icon{color:var(--gilt-300);}
@media (hover:hover){ .gtile--reel:hover .gtile-play{transform:translate(-50%,-50%) scale(1.05); background:#fff;} }

/* =====================================================================
   Filter reveal animation (shared: Teachings + Gallery)
   Matching cards/tiles fade + gently rise in, lightly staggered.
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  .filter-in{animation:filterIn .5s var(--ease) both; animation-delay:calc(var(--i,0) * .045s);}
}
@keyframes filterIn{ from{opacity:0; transform:translateY(14px) scale(.985);} to{opacity:1; transform:none;} }

/* watch strip */
.watch{background:var(--surface-warm); border-top:1px solid var(--border-soft);}
.watch .row{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-block:clamp(20px,2.6vw,28px);}
.watch .yt{flex:0 0 auto; width:46px; height:46px; border-radius:50%; background:var(--gilt-100); color:var(--gilt-800); display:flex; align-items:center; justify-content:center;}
.watch .wt{flex:1; min-width:200px;}
.watch .wt b{display:block; font:600 1.22rem/1.15 var(--font-display); color:var(--fg1);}
.watch .wt span{font:500 .85rem/1.4 var(--font-body); color:var(--fg2);}

/* footer */
.ftr{background:var(--ink-950); color:var(--on-dark-2);}
.ftr .top{display:grid; grid-template-columns:1fr; gap:30px; padding-top:clamp(42px,5vw,64px); padding-bottom:34px;}
.ftr .bmark{display:flex; align-items:center; gap:12px; margin-bottom:13px;}
.ftr .bmark .brand-mark .vm-letters{fill:var(--on-dark-1);}
.ftr .bmark b{font:600 1.2rem/1 var(--font-display); color:var(--on-dark-1);}
.ftr .bmark small{display:block; font:700 .46rem/1 var(--font-body); letter-spacing:.36em; color:var(--gilt-300); margin-top:4px;}
.ftr .blurb{max-width:34ch; font:400 .9rem/1.62 var(--font-body); color:var(--on-dark-2);}
.ftr .fsoc{display:flex; gap:10px; margin-top:16px;}
.ftr .fsoc a{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--border-on-dark); color:var(--on-dark-2); transition:color .25s, border-color .25s;}
@media (hover:hover){ .ftr .fsoc a:hover{color:var(--gilt-300); border-color:var(--gilt-300);} }
.ftr h5{font:700 .68rem/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase; color:var(--gilt-300); margin:0 0 15px;}
.ftr ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
.ftr ul a{font:400 .92rem/1 var(--font-body); color:var(--on-dark-2); transition:color .25s;}
@media (hover:hover){ .ftr ul a:hover{color:var(--gilt-300);} }
.ftr .sub{display:flex; gap:8px; margin-top:11px;}
.ftr .sub input{flex:1; min-width:0; background:rgba(251,248,240,.06); border:1px solid var(--border-on-dark); color:var(--on-dark-1); border-radius:999px; padding:12px 16px; font:400 .88rem/1 var(--font-body);}
.ftr .sub input::placeholder{color:var(--on-dark-3);}
.ftr .sub button{width:46px; height:46px; flex:0 0 auto; border-radius:50%; background:var(--gilt-500); color:var(--ink-900); display:flex; align-items:center; justify-content:center; transition:transform .18s var(--ease), background-color .3s;}
.ftr .sub button:active{transform:scale(.95);}
@media (hover:hover){ .ftr .sub button:hover{background:var(--gilt-300);} }
.ftr .bot{display:flex; flex-direction:column; gap:9px; justify-content:space-between; align-items:flex-start; padding:20px 0 26px; border-top:1px solid var(--border-on-dark); font:500 .76rem/1.5 var(--font-body); color:var(--on-dark-3);}
.ftr .bot .creed{letter-spacing:.14em; text-transform:uppercase; color:var(--gilt-300);}
@media (min-width:680px){ .ftr .top{grid-template-columns:1.7fr 1fr 1fr 1.5fr;} .ftr .bot{flex-direction:row; align-items:center;} }

/* floating prayer affordance */
.pray-fab{position:fixed; right:clamp(14px,3vw,26px); bottom:clamp(14px,3vw,26px); z-index:90; display:inline-flex; align-items:center; gap:9px;
  background:var(--ink-900); color:var(--on-dark-1); padding:12px 18px; border-radius:999px; box-shadow:var(--shadow-lg), var(--glow-gold);
  font:700 .84rem/1 var(--font-body); opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .4s var(--ease), transform .4s var(--ease);}
.pray-fab vm-icon{color:var(--gilt-300);}
.pray-fab.show{opacity:1; transform:none; pointer-events:auto;}
@media (hover:hover){ .pray-fab:hover{background:var(--ink-800);} }
@media (max-width:520px){ .pray-fab .lbl{display:none;} .pray-fab{padding:14px;} }

/* scroll-to-top — bottom-left, where the gilt thread terminates */
.totop{position:fixed; left:clamp(14px,3vw,26px); bottom:clamp(14px,3vw,26px); z-index:90;
  width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--ink-900); color:var(--gilt-300); box-shadow:var(--shadow-lg), var(--glow-gold);
  opacity:0; transform:translateY(14px) scale(.94); pointer-events:none; overflow:hidden;
  transition:opacity .4s var(--ease), transform .4s var(--ease), background-color .3s;}
.totop.show{opacity:1; transform:none; pointer-events:auto;}
.totop:active{transform:scale(.93);}
.totop vm-icon{position:relative;}
.totop.go vm-icon{animation:liftUp .55s var(--ease);}
@keyframes liftUp{0%{transform:translateY(0);opacity:1} 42%{transform:translateY(-18px);opacity:0} 58%{transform:translateY(14px);opacity:0} 100%{transform:translateY(0);opacity:1}}
@media (hover:hover){ .totop:hover{background:var(--ink-800); transform:translateY(-2px);} }
@media (prefers-reduced-motion:reduce){ .totop.go vm-icon{animation:none;} }

/* reveal on scroll */
.js [data-rv]{opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.js [data-rv].in{opacity:1; transform:none;}
.js [data-rv][data-d="1"]{transition-delay:.07s} .js [data-rv][data-d="2"]{transition-delay:.14s} .js [data-rv][data-d="3"]{transition-delay:.21s}

@media (prefers-reduced-motion:reduce){
  .js [data-rv]{opacity:1 !important; transform:none !important; transition:none !important;}
  .thread .bead{transition:none !important;}
  .js .hero-bg img.lit{animation:none !important; opacity:1 !important;}
  .js .hero-bg img:not(:first-child){display:none;}
  .wb-pane .ph>img{transition:opacity .2s !important; filter:none !important;}
  .rest-slide{transition:opacity .2s !important;}
}

/* Scripture REST — desktop compact, mobile wider */
@media (min-width:900px){ .rest.pad-s{padding-block:clamp(18px,1.8vw,32px);} }
@media (max-width:639px){ .rest-wrap{gap:6px;} .rest-slide .scripture{max-width:none; padding-inline:4px;} }

/* Testimonials — action row */
.testi-acts{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:clamp(28px,3vw,44px);}

/* =====================================================================
   Shared sanctuary forms (prayer / testimony / contact) — used with forms.js
   ===================================================================== */
.vmm-field{display:flex; flex-direction:column; gap:7px; margin-top:16px;}
.vmm-field label, .vmm-lbl{font:700 .72rem/1.2 var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--fg3);}
.vmm-input, .vmm-textarea, .vmm-select{
  width:100%; font:400 1rem/1.5 var(--font-body); color:var(--fg1); background:var(--surface);
  border:1px solid var(--border); border-radius:12px; padding:13px 15px; transition:border-color .25s var(--ease), box-shadow .25s var(--ease); -webkit-appearance:none; appearance:none;}
.vmm-textarea{resize:vertical; min-height:120px;}
.vmm-input:focus, .vmm-textarea:focus, .vmm-select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(198,164,92,.18);}
.vmm-input::placeholder, .vmm-textarea::placeholder{color:var(--fg3); opacity:.8;}
.vmm-input.is-invalid, .vmm-textarea.is-invalid, .is-invalid{border-color:#B5523C !important; box-shadow:0 0 0 3px rgba(181,82,60,.14) !important;}
.req-mark{color:var(--accent-strong); text-decoration:none; margin-left:1px;}
.form-status{display:inline-block; min-height:1em; font:600 .86rem/1.4 var(--font-body);}
.form-status.is-err{color:#B5523C;}
.form-status.is-ok{color:#5F7257;}
.form-status.is-pending{color:var(--fg3);}
[data-form-success][hidden]{display:none !important;}

/* Honeypot — off-screen, never shown to humans (spam guard) */
.hp-field{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;}

/* Footer newsletter status message */
.sub-msg{margin-top:10px; font:600 .82rem/1.45 var(--font-body); color:rgba(251,248,240,.7);}
.sub-msg.is-err{color:#E7A48C;}
.sub-msg.is-ok{color:#CBB892;}
.sub-msg.is-pending{color:rgba(251,248,240,.6);}
.sub-msg[hidden]{display:none !important;}