/* ═══════════════════════════════════════════
   VRIC — concept redesign
   ═══════════════════════════════════════════ */

:root{
  --ink:#0B2420;
  --forest:#103A34;
  --forest-2:#17544A;
  --moss:#2E7062;
  --gold:#C29A2E;
  --gold-lt:#E0BE63;
  --cream:#FAF6EC;
  --sand:#F1E8D6;
  --paper:#FFFFFF;
  --body:#2C3B37;
  --muted:#6B7C77;
  --line:rgba(16,58,52,.14);

  --wrap:1200px;
  --r:18px;
  --r-lg:26px;
  --shadow:0 1px 2px rgba(11,36,32,.05), 0 12px 32px -12px rgba(11,36,32,.18);
  --shadow-lg:0 2px 4px rgba(11,36,32,.06), 0 30px 60px -24px rgba(11,36,32,.30);

  --ff-d:"Fraunces", Georgia, "Times New Roman", serif;
  --ff-b:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
/* the off-canvas nav sits off-screen right; clip so it can't widen the page.
   `clip` (not `hidden`) keeps the sticky header working. */
html,body{overflow-x:clip}
body{
  margin:0;
  font-family:var(--ff-b);
  font-size:17px;
  line-height:1.65;
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--ff-d); font-weight:500; line-height:1.1; color:var(--forest); margin:0}
h2{font-size:clamp(2rem,4vw,3.1rem); letter-spacing:-.02em}
h3{font-size:1.28rem; letter-spacing:-.01em}
p{margin:0}
.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--forest); color:#fff; padding:.85rem 1.25rem; border-radius:0 0 12px 0;
}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:4px}

/* ── utility bar ─────────────────────────── */
.utilbar{background:var(--ink); color:rgba(250,246,236,.72); font-size:.78rem}
.utilbar__in{display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:38px; flex-wrap:wrap}
.utilbar__date{font-variant-numeric:tabular-nums; letter-spacing:.01em}
.utilbar__right{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.utilbar a{text-decoration:none; transition:color .2s}
.utilbar a:hover{color:var(--gold-lt)}
.dot{opacity:.4}
.utilbar__social{display:flex; gap:.15rem; margin-left:.35rem}
.utilbar__social a{display:grid; place-items:center; width:26px; height:26px; border-radius:50%}
.utilbar__social svg{width:14px; height:14px; fill:currentColor}
.utilbar__social a:hover{background:rgba(255,255,255,.09)}

/* ── header ──────────────────────────────── */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s;
}
.hdr.is-stuck{border-bottom-color:var(--line); box-shadow:0 8px 28px -20px rgba(11,36,32,.5)}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:74px}

.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; flex-shrink:0}
.brand__mark{width:44px; height:44px; object-fit:contain}
.brand__txt{display:flex; flex-direction:column; line-height:1.05}
.brand__txt strong{font-family:var(--ff-d); font-size:1.06rem; font-weight:600; color:var(--forest); letter-spacing:-.01em}
.brand__txt em{font-style:normal; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

.nav{display:flex; align-items:center; gap:.35rem}
.nav a{
  text-decoration:none; font-size:.92rem; font-weight:500; color:var(--forest);
  padding:.5rem .78rem; border-radius:99px; transition:background .2s, color .2s;
}
.nav a:hover{background:var(--sand)}
.nav__cta{
  background:var(--forest); color:#fff !important; margin-left:.5rem;
  padding:.6rem 1.25rem !important; font-weight:600;
  box-shadow:0 8px 20px -10px rgba(16,58,52,.8);
}
.nav__cta:hover{background:var(--gold) !important; color:var(--ink) !important}

.burger{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:.6rem; cursor:pointer}
.burger span{display:block; width:24px; height:2px; background:var(--forest); border-radius:2px; transition:transform .3s, opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── banner carousel ─────────────────────── */
.banner{
  position:relative; isolation:isolate; overflow:hidden; color:var(--cream);
  height:clamp(560px, 86vh, 820px);
}
.banner__slides{position:absolute; inset:0}

.banner__slide{
  position:absolute; inset:0;
  display:flex; align-items:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .9s ease, visibility .9s;
}
.banner__slide.is-active{opacity:1; visibility:visible; pointer-events:auto}

.banner__media{position:absolute; inset:0; z-index:-3; overflow:hidden}
.banner__media img,
.banner__media video{width:100%; height:100%; object-fit:cover; object-position:center 42%}
/* slow drift on the active slide's still image */
.banner__slide.is-active .banner__media img{animation:kenburns 16s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.02)} to{transform:scale(1.11)}}

.banner__veil{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(180deg, rgba(11,36,32,.80) 0%, rgba(11,36,32,.52) 42%, rgba(11,36,32,.94) 100%),
    linear-gradient(100deg, rgba(16,58,52,.94) 0%, rgba(16,58,52,.30) 62%, rgba(16,58,52,.06) 100%);
}
.banner__pattern{
  position:absolute; inset:0; z-index:-1; width:100%; height:100%;
  color:var(--gold-lt); opacity:.09; pointer-events:none;
}

.banner__body{padding-bottom:clamp(4rem,8vw,6rem); width:min(100% - 2.5rem, var(--wrap))}
.banner__title{
  font-size:clamp(2.7rem,7.2vw,5.3rem);
  font-weight:300; letter-spacing:-.035em; color:var(--cream);
  margin-bottom:1.4rem; max-width:16ch;
}
.banner__title em{font-style:italic; font-weight:400; color:var(--gold-lt)}
.banner__sub{max-width:52ch; font-size:clamp(1.02rem,1.6vw,1.16rem); color:rgba(250,246,236,.88)}
.banner__cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}

/* entrance animation for the active slide's copy */
.banner__slide.is-active .eyebrow,
.banner__slide.is-active .banner__title,
.banner__slide.is-active .banner__sub,
.banner__slide.is-active .banner__cta{animation:riseIn .8s cubic-bezier(.2,.8,.3,1) backwards}
.banner__slide.is-active .banner__title{animation-delay:.08s}
.banner__slide.is-active .banner__sub{animation-delay:.16s}
.banner__slide.is-active .banner__cta{animation-delay:.24s}
@keyframes riseIn{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}

/* arrows */
.banner__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  display:grid; place-items:center; width:52px; height:52px;
  background:rgba(250,246,236,.10); border:1px solid rgba(250,246,236,.28);
  border-radius:50%; cursor:pointer; color:var(--cream);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .25s, border-color .25s, transform .25s;
}
.banner__arrow:hover{background:rgba(250,246,236,.22); border-color:var(--cream)}
.banner__arrow svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.banner__arrow--prev{left:clamp(.75rem,2.5vw,2rem)}
.banner__arrow--next{right:clamp(.75rem,2.5vw,2rem)}
.banner__arrow--prev:hover{transform:translateY(-50%) translateX(-3px)}
.banner__arrow--next:hover{transform:translateY(-50%) translateX(3px)}

/* dots + play/pause */
.banner__foot{
  position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(1.5rem,3.5vw,2.5rem); z-index:4;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.banner__dots{display:flex; gap:.6rem}
.banner__dot{
  position:relative; width:46px; height:4px; padding:0; cursor:pointer;
  background:rgba(250,246,236,.28); border:0; border-radius:99px; overflow:hidden;
  transition:background .3s;
}
.banner__dot:hover{background:rgba(250,246,236,.5)}
.banner__dot::after{
  content:""; position:absolute; inset:0; border-radius:99px;
  background:var(--gold-lt); transform:scaleX(0); transform-origin:left;
}
.banner__dot.is-active::after{transform:scaleX(1); transition:transform .4s}
.banner__dot.is-running::after{animation:fill var(--dur,7s) linear forwards}
@keyframes fill{from{transform:scaleX(0)} to{transform:scaleX(1)}}

.banner__play{
  display:grid; place-items:center; width:38px; height:38px; padding:0;
  background:rgba(250,246,236,.10); border:1px solid rgba(250,246,236,.28);
  border-radius:50%; cursor:pointer; color:var(--cream); flex-shrink:0;
  transition:background .25s, border-color .25s;
}
.banner__play:hover{background:rgba(250,246,236,.22); border-color:var(--cream)}
.banner__play svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.banner__play .ico-play{display:none; fill:currentColor; stroke:none}
.banner__play[aria-pressed="true"] .ico-pause{display:none}
.banner__play[aria-pressed="true"] .ico-play{display:block}

/* play button + lightbox */
.btn--play{gap:.6rem}
.btn__playico{
  display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:rgba(11,36,32,.16); flex-shrink:0;
}
.btn__playico svg{width:12px; height:12px; fill:currentColor; margin-left:1px}
.btn--play em{font-style:normal; opacity:.6; font-weight:500; margin-left:.15rem}

/* scroll lock, shared by the mobile nav and the lightbox */
body.nav-open{overflow:hidden}

.lightbox{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center; padding:clamp(1rem,4vw,3rem);
  background:rgba(6,20,18,.94);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:fadeIn .3s ease;
}
.lightbox[hidden]{display:none}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.lightbox__stage{width:min(100%, 1100px)}
.lightbox video{
  width:100%; max-height:82vh; display:block; border-radius:var(--r);
  background:#000; box-shadow:var(--shadow-lg);
}
.lightbox__close{
  position:absolute; top:clamp(.85rem,2.5vw,1.6rem); right:clamp(.85rem,2.5vw,1.6rem);
  display:grid; place-items:center; width:46px; height:46px; padding:0;
  background:rgba(250,246,236,.1); border:1px solid rgba(250,246,236,.3);
  border-radius:50%; color:var(--cream); cursor:pointer; transition:background .25s;
}
.lightbox__close:hover{background:rgba(250,246,236,.24)}
.lightbox__close svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}

/* ── fact band ───────────────────────────── */
.factband{background:var(--forest); color:var(--cream); padding:1.6rem 0}
.factband__in{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:1.2rem clamp(1.5rem,5vw,4rem);
}
.fact{display:flex; align-items:baseline; gap:.6rem}
.fact strong{font-family:var(--ff-d); font-size:1.9rem; font-weight:400; color:var(--gold-lt); line-height:1}
.fact span{font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(250,246,236,.72)}

.eyebrow{
  font-size:.74rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--moss); margin-bottom:1rem;
}
.eyebrow--light{color:var(--gold-lt)}

.hero__h1{
  font-size:clamp(2.9rem,8vw,5.6rem);
  font-weight:300; letter-spacing:-.035em; color:var(--cream);
  margin-bottom:1.6rem; max-width:14ch;
}
.hero__h1 em{font-style:italic; font-weight:400; color:var(--gold-lt)}
.hero__sub{max-width:56ch; font-size:clamp(1.02rem,1.6vw,1.16rem); color:rgba(250,246,236,.86)}

.hero__cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem}

.hero__facts{
  list-style:none; margin:clamp(3rem,6vw,4.5rem) 0 0; padding:1.6rem 0 0;
  display:flex; flex-wrap:wrap; gap:clamp(2rem,6vw,4.5rem);
  border-top:1px solid rgba(250,246,236,.2);
}
.hero__facts li{display:flex; flex-direction:column; gap:.15rem}
.hero__facts strong{font-family:var(--ff-d); font-size:2.1rem; font-weight:400; color:var(--gold-lt); line-height:1}
.hero__facts span{font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(250,246,236,.7)}

/* ── buttons ─────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.86rem 1.6rem; border-radius:99px; text-decoration:none;
  font-weight:600; font-size:.95rem; letter-spacing:.01em;
  transition:transform .2s, background .2s, color .2s, box-shadow .2s;
  border:1.5px solid transparent; cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.btn--gold{background:var(--gold-lt); color:var(--ink); box-shadow:0 12px 26px -12px rgba(224,190,99,.9)}
.btn--gold:hover{background:#EDD087}
.btn--ghost{border-color:rgba(250,246,236,.45); color:var(--cream)}
.btn--ghost:hover{background:rgba(250,246,236,.12); border-color:var(--cream)}
.btn--forest{background:var(--forest); color:#fff}
.btn--forest:hover{background:var(--ink)}
.btn--lg{padding:1.05rem 2.1rem; font-size:1rem}

/* ── marquee strip ───────────────────────── */
.strip{background:var(--gold); overflow:hidden; padding:.7rem 0}
.strip__track{
  display:flex; align-items:center; gap:2rem; width:max-content;
  animation:slide 34s linear infinite;
}
.strip__track span{
  font-family:var(--ff-d); font-size:1.05rem; font-style:italic;
  color:var(--ink); white-space:nowrap;
}
.strip__track i{color:rgba(11,36,32,.5); font-style:normal; font-size:.75rem}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── sections ────────────────────────────── */
.sec{padding:clamp(4rem,9vw,7rem) 0; position:relative; isolation:isolate}
.sec--cream{background:var(--cream)}
.sec--forest{background:var(--forest); color:rgba(250,246,236,.82); overflow:hidden}
.sec--forest h2,.sec--forest h3{color:var(--cream)}
.sec__pattern{position:absolute; inset:0; z-index:-1; width:100%; height:100%; color:var(--gold-lt); opacity:.06}

.sechead{max-width:62ch; margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.sechead__sub{color:var(--muted); font-size:1.05rem; margin-top:1rem; max-width:52ch}
.sec--forest .sechead__sub{color:rgba(250,246,236,.7)}
.sechead--split{
  max-width:none; display:grid; grid-template-columns:1fr auto;
  gap:1.5rem 3rem; align-items:end;
}
.sechead--split .sechead__sub{margin-top:0; max-width:36ch; padding-bottom:.4rem}

/* ── grids ───────────────────────────────── */
.grid{display:grid; gap:1.4rem}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--tight{gap:1rem}

/* ── prayer ──────────────────────────────── */
.prayer{display:grid; grid-template-columns:1.6fr 1fr; gap:1.6rem; align-items:start}
.prayer__frame{
  background:var(--paper); border-radius:var(--r-lg); padding:.65rem;
  box-shadow:var(--shadow-lg); border:1px solid var(--line); overflow:hidden;
}
.prayer__frame iframe{width:100%; height:660px; border:0; border-radius:calc(var(--r-lg) - 8px); display:block}
.prayer__side{display:grid; gap:1rem}

.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:1.7rem; box-shadow:var(--shadow)}
.card h3{margin-bottom:.7rem}
.card p{font-size:.97rem; color:var(--muted)}
.card--dark{background:var(--forest); border-color:transparent}
.card--dark h3{color:var(--cream)}
.card--dark p{color:rgba(250,246,236,.75)}
.card--gold{background:var(--sand); border-color:rgba(194,154,46,.3)}
.card--gold p{color:#5D6B62}

.deflist{margin:0; font-size:.95rem}
.deflist dt{font-weight:600; color:var(--forest); margin-top:.9rem}
.deflist dt:first-child{margin-top:0}
.deflist dd{margin:.15rem 0 0; color:var(--muted)}

.link-arrow{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem;
  font-size:.9rem; font-weight:600; color:var(--forest); text-decoration:none;
  border-bottom:1.5px solid var(--gold); padding-bottom:2px; transition:gap .2s, color .2s;
}
.link-arrow::after{content:"→"; transition:transform .2s}
.link-arrow:hover::after{transform:translateX(4px)}
.link-arrow--light{color:var(--gold-lt); border-color:rgba(224,190,99,.5)}

/* ── program tiles ───────────────────────── */
.tile{
  position:relative; display:flex; flex-direction:column;
  padding:2rem 1.8rem; border-radius:var(--r); text-decoration:none;
  background:var(--paper); border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s;
  overflow:hidden;
}
.tile::before{
  content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg, var(--gold), var(--moss));
  transform:scaleX(0); transform-origin:left; transition:transform .4s;
}
.tile:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent}
.tile:hover::before{transform:scaleX(1)}
.tile__ico{
  display:grid; place-items:center; width:50px; height:50px; margin-bottom:1.2rem;
  border-radius:14px; background:var(--sand); color:var(--forest); flex-shrink:0;
}
.tile__ico svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.tile h3{margin-bottom:.6rem}
.tile h3 em{font-style:normal; font-size:.68rem; font-family:var(--ff-b); font-weight:600;
  letter-spacing:.08em; color:var(--muted); vertical-align:middle; margin-left:.4rem;
  background:var(--sand); padding:.2rem .5rem; border-radius:99px}
.tile p{font-size:.95rem; color:var(--muted); flex-grow:1}
.tile__go{margin-top:1.3rem; font-size:.82rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--moss)}
.tile__go::after{content:" →"}

/* ── split (qur'an school) ───────────────── */
.split{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.split__media{position:relative}
.split__media img{border-radius:var(--r-lg); box-shadow:var(--shadow-lg); aspect-ratio:4/3; object-fit:cover}
.split__badge{
  position:absolute; left:-10px; bottom:24px;
  background:var(--gold-lt); color:var(--ink);
  font-size:.76rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  padding:.6rem 1.15rem; border-radius:99px; box-shadow:var(--shadow);
}
.lede{font-size:1.1rem; margin-bottom:1.8rem; color:rgba(250,246,236,.82)}

.ladder{list-style:none; margin:0 0 2rem; padding:0; border-top:1px solid rgba(250,246,236,.18)}
.ladder a{
  display:flex; flex-direction:column; gap:.1rem; padding:.95rem .4rem;
  text-decoration:none; border-bottom:1px solid rgba(250,246,236,.18);
  transition:padding-left .25s, background .25s;
}
.ladder a:hover{padding-left:1.1rem; background:rgba(250,246,236,.05)}
.ladder strong{font-family:var(--ff-d); font-size:1.08rem; font-weight:500; color:var(--cream)}
.ladder span{font-size:.88rem; color:rgba(250,246,236,.6)}

/* ── services ────────────────────────────── */
.svc{
  display:flex; flex-direction:column; padding:1.8rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  text-decoration:none; transition:transform .3s, box-shadow .3s;
}
.svc:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.svc h3{margin-bottom:.55rem}
.svc p{font-size:.94rem; color:var(--muted); flex-grow:1}
.svc__tag{
  align-self:flex-start; margin-top:1.2rem; font-size:.73rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--moss);
  background:var(--sand); padding:.35rem .8rem; border-radius:99px;
}

.callout{
  margin-top:2.5rem; padding:clamp(1.8rem,4vw,2.6rem);
  background:var(--forest); border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.callout h3{color:var(--cream); margin-bottom:.5rem}
.callout p{color:rgba(250,246,236,.75); max-width:52ch; font-size:.98rem}
.callout .btn--forest{background:var(--gold-lt); color:var(--ink)}
.callout .btn--forest:hover{background:#EDD087}

/* ── gallery ─────────────────────────────── */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.gallery__item{margin:0; position:relative; border-radius:var(--r); overflow:hidden; background:var(--sand)}
.gallery__item--wide{grid-column:span 2; grid-row:span 2}
.gallery__item img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.gallery__item--wide img{aspect-ratio:auto; min-height:100%}
.gallery__item:hover img{transform:scale(1.05)}
.gallery__item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1.2rem .95rem;
  background:linear-gradient(transparent, rgba(11,36,32,.88));
  color:var(--cream); font-size:.92rem; font-weight:600;
  display:flex; flex-direction:column; gap:.1rem;
}
.gallery__item figcaption em{
  font-style:normal; font-size:.68rem; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(224,190,99,.95);
}

.video{margin-top:1rem}
.video video{
  width:100%; border-radius:var(--r-lg); display:block;
  background:var(--ink); box-shadow:var(--shadow-lg); aspect-ratio:16/9;
}
.video__cap{margin-top:.8rem; font-size:.85rem; color:var(--muted); text-align:center}

/* ── get involved ────────────────────────── */
.pillar{padding:2rem 0 0; border-top:2px solid rgba(224,190,99,.35)}
.pillar__num{
  display:block; font-family:var(--ff-d); font-size:.95rem; font-weight:600;
  letter-spacing:.1em; color:var(--gold-lt); margin-bottom:1rem;
}
.pillar h3{margin-bottom:.6rem}
.pillar p{font-size:.97rem; color:rgba(250,246,236,.72)}

.donate{
  margin-top:clamp(3rem,6vw,4.5rem); padding:clamp(2rem,4vw,3rem);
  background:rgba(250,246,236,.06); border:1px solid rgba(250,246,236,.16);
  border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.donate h3{margin-bottom:.5rem}
.donate p{color:rgba(250,246,236,.75); max-width:48ch}

/* ── visit ───────────────────────────────── */
.visit{display:grid; grid-template-columns:1.25fr 1fr; gap:1.6rem; align-items:stretch}
.visit__map{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); min-height:440px; border:1px solid var(--line)}
.visit__map iframe{width:100%; height:100%; min-height:440px; border:0; display:block; filter:saturate(.85)}
.visit__info{display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-content:start}
.info{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:1.5rem}
.info h3{font-size:1.08rem; margin-bottom:.55rem}
.info p{font-size:.94rem; color:var(--muted)}
.info a{color:var(--forest); text-decoration:none; border-bottom:1px solid var(--line)}
.info a:hover{border-color:var(--gold)}
.info--accent{background:var(--forest); border-color:transparent}
.info--accent h3{color:var(--cream)}
.info--accent p{color:rgba(250,246,236,.75)}
.info--accent .link-arrow{color:var(--gold-lt); border-color:rgba(224,190,99,.55)}

/* ── footer ──────────────────────────────── */
.ftr{background:var(--ink); color:rgba(250,246,236,.66); padding:clamp(3.5rem,7vw,5rem) 0 0}
.ftr__in{display:grid; grid-template-columns:1.15fr 2.4fr; gap:clamp(2rem,5vw,4rem)}
.ftr__brand img{margin-bottom:1.1rem}
.ftr__tag{font-family:var(--ff-d); font-style:italic; font-size:1.2rem; color:var(--gold-lt); margin-bottom:1rem}
.ftr__addr{font-size:.92rem; line-height:1.8}
.ftr a{text-decoration:none; transition:color .2s}
.ftr a:hover{color:var(--gold-lt)}
.ftr__social{display:flex; gap:1.1rem; margin-top:1.3rem; font-size:.85rem; font-weight:600}
.ftr__social a{border-bottom:1px solid rgba(250,246,236,.25); padding-bottom:2px}

.ftr__cols{display:grid; grid-template-columns:repeat(4,1fr); gap:2rem}
.ftr__cols h4{
  font-family:var(--ff-b); font-size:.74rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--cream); margin:0 0 1rem;
}
.ftr__cols div{display:flex; flex-direction:column; gap:.6rem; font-size:.9rem}

.ftr__base{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding:1.6rem 0;
  border-top:1px solid rgba(250,246,236,.12);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.83rem; color:rgba(250,246,236,.5);
}
.ftr__note a{border-bottom:1px solid rgba(250,246,236,.3)}

/* ── reveal animation ────────────────────── */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.is-in{opacity:1; transform:none}

/* ── responsive ──────────────────────────── */
@media (max-width:1024px){
  .prayer{grid-template-columns:1fr}
  .prayer__side{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1fr}
  .visit{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery__item--wide{grid-column:span 2; grid-row:auto}
  .gallery__item--wide img{aspect-ratio:16/9}
  .ftr__in{grid-template-columns:1fr}
}

@media (max-width:860px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .sechead--split{grid-template-columns:1fr}
  .sechead--split .sechead__sub{padding-bottom:0}
  .ftr__cols{grid-template-columns:repeat(2,1fr)}

  /* keep the toggle clickable and visible above the open panel */
  .burger{display:flex; position:relative; z-index:210}
  .burger[aria-expanded="true"] span{background:var(--cream)}
  /* backdrop-filter would make .hdr the containing block for the fixed
     off-canvas nav and clip it — drop the glass effect on mobile. */
  .hdr{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,.97)}
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(84vw, 340px); z-index:200;
    background:var(--forest); flex-direction:column; align-items:stretch;
    padding:6rem 1.6rem 2rem; gap:.2rem;
    transform:translateX(100%); transition:transform .38s cubic-bezier(.4,0,.2,1);
    box-shadow:-20px 0 60px -20px rgba(11,36,32,.6); overflow-y:auto;
  }
  .nav.is-open{transform:none}
  .nav a{color:var(--cream); font-size:1.12rem; padding:.85rem 1rem; border-radius:12px}
  .nav a:hover{background:rgba(250,246,236,.1)}
  .nav__cta{margin:1rem 0 0; text-align:center; background:var(--gold-lt); color:var(--ink) !important}
  body.nav-open{overflow:hidden}
}

@media (max-width:640px){
  body{font-size:16px}
  .utilbar__date{display:none}
  .grid--3{grid-template-columns:1fr}
  .prayer__side{grid-template-columns:1fr}
  .prayer__frame iframe{height:600px}
  .visit__info{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .ftr__cols{grid-template-columns:1fr}
  .callout,.donate{flex-direction:column; align-items:flex-start}
  .btn{width:100%}
  .banner__cta{flex-direction:column}
  .banner{height:auto; min-height:82vh}
  .banner__arrow{display:none}
  .banner__body{padding-top:5.5rem; padding-bottom:7rem}
  .banner__title{max-width:none}
  .banner__foot{width:calc(100% - 2.5rem); gap:1rem}
  .banner__dots{flex:1; gap:.4rem}
  .banner__dot{flex:1; width:auto}
  .factband__in{justify-content:flex-start; gap:.9rem 1.8rem}
  .fact strong{font-size:1.5rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .reveal{opacity:1; transform:none}
}