:root{--bg:#fff;--bg2:#f6f1ec;--tx:#1d1512;--mu:#6b5d55;--ac:#e8530e;--ac2:#ffb020;--cd:#fff;--bd:#eadfd6;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#120d0b;--bg2:#1b1411;--tx:#f5ece6;--mu:#b3a39a;--cd:#211916;--bd:#33261f}}
:root[data-theme="dark"]{--bg:#120d0b;--bg2:#1b1411;--tx:#f5ece6;--mu:#b3a39a;--cd:#211916;--bd:#33261f}
html{scroll-behavior:smooth}*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;animation:fi .5s}
@keyframes fi{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}a{color:var(--ac)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--bg);border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:12px;padding:10px 16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;text-decoration:none;color:var(--tx)}
.logo i{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:20px;overflow:hidden;flex:none;background:#0d0d2b}
.logo i img{width:100%;height:100%;object-fit:cover}
.logo small{display:block;font-weight:500;color:var(--mu);font-size:11px}
nav.top{margin-left:auto;display:none;gap:2px}
nav a{padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--tx);font-size:14px;font-weight:600}
nav a:hover,nav a.on{background:var(--ac);color:#fff}
.btn{display:inline-block;background:var(--ac);color:#fff;border:0;padding:11px 20px;border-radius:30px;font:700 15px system-ui;cursor:pointer;text-decoration:none;transition:.2s;margin:3px 0}
.btn:hover{transform:translateY(-2px);filter:brightness(1.1)}.btn.o{background:transparent;border:2px solid #fff;color:#fff}
.ic{background:var(--bg2);border:1px solid var(--bd);color:var(--tx);border-radius:10px;width:40px;height:40px;cursor:pointer;font-size:18px}
.hdr-r{margin-left:auto;display:flex;gap:8px}
@media(min-width:1280px){nav.top{display:flex}.hdr-r{margin-left:0}}
nav.top a{white-space:nowrap}
#side{position:fixed;inset:0 auto 0 0;width:280px;max-width:84%;background:var(--cd);z-index:90;transform:translateX(-105%);transition:.3s;padding:calc(20px + env(safe-area-inset-top,0px)) 16px 20px;overflow-y:auto;border-right:1px solid var(--bd)}
#side.open{transform:none}#side a{display:block;padding:12px;margin:2px 0}
#ov{position:fixed;inset:0;background:#0007;z-index:80;display:none}#ov.open{display:block}
select,input,textarea{width:100%;padding:11px;border:1px solid var(--bd);border-radius:10px;background:var(--bg);color:var(--tx);font:inherit;margin:4px 0 10px}
.w{max-width:1100px;margin:auto;padding:48px 18px}.alt{background:var(--bg2)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--cd);border:1px solid var(--bd);border-radius:16px;padding:20px;transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 26px #0002}.card .e{font-size:34px}
.ph{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;padding:56px 18px;text-align:center}
.ph h1{font-size:clamp(28px,6vw,46px)}
#hero{position:relative;height:min(78vh,620px);overflow:hidden;color:#fff}
.sl{position:absolute;inset:0;opacity:0;transition:opacity 1s;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px}
.sl.on{opacity:1}.sl .big{font-size:80px}.sl h1{font-size:clamp(30px,7vw,60px);text-shadow:0 2px 12px #0006}
.sl p{max-width:640px;font-size:clamp(15px,2.4vw,20px);text-shadow:0 1px 8px #0008}
.ar{position:absolute;top:50%;background:#0005;color:#fff;border:0;width:42px;height:42px;border-radius:50%;font-size:20px;cursor:pointer;z-index:3}
.dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:7px;z-index:3}
.dots b{width:10px;height:10px;border-radius:50%;background:#fff6;cursor:pointer;transition:.3s}.dots b.on{background:#fff;width:26px;border-radius:6px}
.cd{display:flex;gap:12px;flex-wrap:wrap}.cd div{background:var(--ac);color:#fff;border-radius:12px;padding:10px 14px;text-align:center;min-width:70px;font-size:12px}.cd b{display:block;font-size:26px}
.pr{font-weight:800;color:var(--ac)}
.rv{opacity:0;transform:translateY(20px);transition:.7s}.rv.in{opacity:1;transform:none}
footer{background:#1b1411;color:#e9ddd5;padding:40px 18px calc(24px + env(safe-area-inset-bottom,0px))}
footer a{color:#ffb98f;text-decoration:none;display:block;padding:2px 0}
footer .fg{max-width:1100px;margin:auto;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.wa{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;font-size:28px;text-decoration:none;z-index:70;box-shadow:0 6px 18px #0005;animation:pl 2s infinite}
@keyframes pl{50%{box-shadow:0 0 0 12px #25d36633}}
#cartb{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70}
#cart{position:fixed;right:0;top:0;bottom:0;width:330px;max-width:92%;background:var(--cd);z-index:95;padding:20px;transform:translateX(105%);transition:.3s;overflow-y:auto;border-left:1px solid var(--bd)}#cart.open{transform:none}
.wall p{background:var(--bg);border-left:4px solid var(--ac);padding:10px 14px;border-radius:8px;margin:8px 0}
iframe{width:100%;height:340px;border:0;border-radius:16px}
.lgs{width:auto;margin:0;padding:0 8px;height:40px;font-weight:700;cursor:pointer;background:var(--bg2)}
.row3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.row3{grid-template-columns:1fr}.logo small{display:none}}
.stats{display:flex;justify-content:space-around;gap:10px;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;padding:26px 12px;text-align:center}
.stats div{flex:1}.stats b{display:block;font-size:clamp(26px,6vw,46px);line-height:1.1}.stats span{font-size:clamp(11px,2.6vw,15px);font-weight:600}
.sl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sl::before{content:"";position:absolute;inset:0;background:#0005;z-index:1}
.sl>*:not(img){position:relative;z-index:2}
.w img{max-width:100%;height:auto;border-radius:12px}

/* ===================== SHOP ===================== */
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--ac2);outline-offset:2px}

.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;margin-bottom:14px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:9px 18px;border-radius:30px;border:1px solid var(--bd);background:var(--cd);color:var(--tx);font:600 14px system-ui;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--ac)}
.chip.on{background:var(--ac);border-color:var(--ac);color:#fff}

.pgrid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.pc{background:var(--cd);border:1px solid var(--bd);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.pc:hover{transform:translateY(-3px);box-shadow:0 12px 28px #0002}

.pimg{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;border:0;padding:0;margin:0;background:var(--bg2);cursor:zoom-in;color:#fff}
.pc .pimg img{display:block;width:100%;height:100%;max-width:none;border-radius:0;object-fit:cover;object-position:var(--pos,center);transform-origin:var(--ox,50%) var(--oy,50%);transition:transform .25s ease-out}
.pimg .mag{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:#000a;display:grid;place-items:center;font-size:16px;pointer-events:none}
.pimg .hint{position:absolute;left:10px;bottom:10px;background:#000b;font-size:12px;font-weight:600;padding:5px 11px;border-radius:20px;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none}
.pimg .oos{position:absolute;left:10px;top:10px;background:#1d1512;font-size:12px;font-weight:700;padding:5px 11px;border-radius:20px;pointer-events:none}
@media(hover:hover) and (pointer:fine){
  .pimg:hover img{transform:scale(1.85)}
  .pimg:hover .hint{opacity:1;transform:none}
}
.pc.out .pimg img{filter:grayscale(1);opacity:.65}

.pth{position:relative;display:flex;gap:6px;padding:10px 12px 0;overflow-x:auto;scrollbar-width:thin}
.pth button{flex:none;width:46px;height:46px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:var(--bg2);cursor:pointer;opacity:.7;transition:opacity .2s,border-color .2s}
.pth button:hover{opacity:1}
.pth button.on{opacity:1;border-color:var(--ac)}
.pc .pth img{display:block;width:100%;height:100%;max-width:none;border-radius:0;object-fit:cover}

.pb{padding:12px 16px 16px;display:flex;flex-direction:column;flex:1}
.pb h3{margin:0 0 2px;font-size:18px}
.pb .pr{margin:0 0 10px;font-size:18px}
.opt{margin-bottom:10px}
.ol{display:block;font-size:13px;font-weight:600;color:var(--mu);margin-bottom:6px}
.ol .cn{color:var(--tx)}
.sizes,.sw{display:flex;flex-wrap:wrap;gap:6px}
.sz{min-width:42px;padding:7px 10px;border:1px solid var(--bd);border-radius:10px;background:var(--bg);color:var(--tx);font:600 13px system-ui;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.sz:hover{border-color:var(--ac)}
.sz[aria-pressed=true]{background:var(--ac);border-color:var(--ac);color:#fff}
.swb{width:30px;height:30px;padding:0;border-radius:50%;border:2px solid var(--bd);background:var(--c);cursor:pointer;transition:box-shadow .15s}
.swb.on{border-color:var(--ac);box-shadow:0 0 0 2px var(--cd),0 0 0 4px var(--ac)}
.err{margin:6px 0 0;font-size:13px;font-weight:600;color:#d93025}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.stk{display:flex;align-items:center;gap:6px;margin:auto 0 10px;padding-top:4px;font-size:13px;color:var(--mu)}
.dot{width:8px;height:8px;border-radius:50%;background:#1f9d55;flex:none}.dot.x{background:#9a8f88}
.pb .btn{width:100%;margin:0;text-align:center}
.pb .btn:disabled{background:var(--mu);cursor:not-allowed;transform:none;filter:none}
.btn.done{background:#1f9d55}

/* cart button, drawer, toast */
#cartb{box-shadow:0 6px 18px #0004;padding:12px 18px}
#cart{padding:0;display:flex;flex-direction:column;width:390px;overflow:hidden;visibility:hidden;transition:transform .3s,visibility 0s .3s}
#cart.open{visibility:visible;transition:transform .3s}
.ch{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--bd)}
.ch h2{margin:0;font-size:20px}
#cl{flex:1;overflow-y:auto;padding:4px 18px}
.li{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid var(--bd)}
#cart .li img{width:64px;height:64px;border-radius:10px;object-fit:cover;background:var(--bg2)}
.lt b{display:block;line-height:1.3}.lt small{display:block;color:var(--mu);margin:2px 0 8px}
.qs{display:inline-flex;align-items:center;border:1px solid var(--bd);border-radius:20px;overflow:hidden}
.qs button{width:32px;height:30px;border:0;background:var(--bg2);color:var(--tx);font-size:18px;cursor:pointer}
.qs button:hover{background:var(--ac);color:#fff}
.qs span{min-width:30px;text-align:center;font-weight:700}
.lr{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.lr .ic{width:32px;height:32px;font-size:15px}
.empty{text-align:center;padding:48px 12px;color:var(--mu)}.empty .e{font-size:44px}.empty h3{color:var(--tx);margin:8px 0 4px}
.cf{display:flex;flex-direction:column;padding:14px 18px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--bd);max-height:62%;overflow-y:auto}
.cf label{font-size:13px;font-weight:600;margin-top:6px}
.cf input{margin:4px 0 6px}
.cf .btn{width:100%;margin-top:8px;text-align:center}
.tot{display:flex;justify-content:space-between;align-items:baseline;font-size:18px;margin-bottom:6px}.tot b{color:var(--ac);font-size:22px}
.note{font-size:13px;color:var(--mu);margin:8px 0 0}
#toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px);z-index:96;display:flex;align-items:center;gap:14px;max-width:92vw;background:#1d1512;color:#fff;border-radius:14px;padding:10px 10px 10px 16px;font-size:14px;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility 0s .25s}
#toast.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s,transform .25s}
#toast button{flex:none;background:var(--ac);color:#fff;border:0;border-radius:20px;padding:8px 14px;font:700 13px system-ui;cursor:pointer}

/* dialogs */
dialog{border:0;padding:0;color:var(--tx);background:var(--cd)}
dialog::backdrop{background:#000b}
#ok{width:min(440px,92vw);border-radius:20px;overflow:hidden}
.okc{padding:30px 24px 24px;text-align:center}
.okc h2{margin:0 0 8px}.okc p{margin:0 0 10px}.okc .btn{margin-top:6px}
.okc .ref{color:var(--mu)}.okc .ref b{color:var(--tx)}
.okc a{font-size:13px}
.okt{width:68px;height:68px;margin:0 auto 14px;border-radius:50%;background:#1f9d55;color:#fff;font-size:36px;display:grid;place-items:center;animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}

#lb{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;background:#0b0807;color:#fff;overflow:hidden}
#lb[open]{display:flex;flex-direction:column}
#lb .ic{background:#ffffff1f;border-color:#ffffff33;color:#fff}
.lbh{display:flex;align-items:center;gap:12px;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top))}
.lbh p{margin:0;flex:1;min-width:0;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbh span{font-size:13px;color:#cfc4bd;flex:none}
.lbs{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#lbi{display:block;max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;user-select:none;transition:transform .2s}
#lb.z #lbi{transform:scale(2.2);cursor:zoom-out}
.lbb{position:absolute;top:50%;left:10px;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;border:0;background:#ffffff26;color:#fff;font-size:28px;line-height:1;cursor:pointer}
.lbb:hover{background:var(--ac)}.lbb.r{left:auto;right:10px}
.lbz{margin:6px 0 0;text-align:center;font-size:12px;color:#bdb0a8}
.lbt{display:flex;gap:8px;padding:10px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));overflow-x:auto}
.lbt button:first-child{margin-left:auto}.lbt button:last-child{margin-right:auto}
.lbt button{flex:none;width:56px;height:56px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:#222;opacity:.6;cursor:pointer}
.lbt button.on{opacity:1;border-color:var(--ac2)}
.lbt img{display:block;width:100%;height:100%;object-fit:cover}
#lb.one .lbb,#lb.one .lbt{display:none}

@media(max-width:520px){
  .pgrid{grid-template-columns:1fr 1fr;gap:12px}
  .pb{padding:10px 12px 14px}.pb h3{font-size:16px}.pb .pr{font-size:16px}
  .pth{padding:8px 8px 0}.pth button{width:38px;height:38px}
  .sz{min-width:36px;padding:6px 8px}
  .pimg .hint{display:none}
  .lbb{width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){
  .pc .pimg img,.pc,.okt,#lbi,#cart,#toast,.shake{transition:none;animation:none}
  .pimg:hover img{transform:none}.pc:hover{transform:none}
}

/* ===================== HOME ===================== */
/* hero: photos fade, message + buttons stay put */
#hero{height:min(80vh,640px);height:min(80svh,640px);min-height:470px;background:#2a1710}
#hero:focus-visible{outline-offset:-4px}
.sl img{transform-origin:center}
.sl img:not([src]){visibility:hidden}
.sl.on img{animation:kb 9s ease-out both}
@keyframes kb{from{transform:scale(1.07)}to{transform:scale(1)}}
.sl::before{background:linear-gradient(180deg,#0006,#0008)}
.sl .cap{position:absolute;top:16px;left:16px;z-index:3;background:#0007;border:1px solid #ffffff40;color:#fff;font-size:13px;font-weight:700;padding:6px 14px;border-radius:30px;backdrop-filter:blur(6px)}
.hc{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 22px 62px;pointer-events:none}
.hc>*{pointer-events:auto;margin-top:0}
.hc h1{font-size:clamp(28px,6.4vw,58px);max-width:900px;margin-bottom:.35em;text-shadow:0 2px 14px #0008}
.hc .lead{max-width:680px;margin:0 0 18px;font-size:clamp(15px,2.3vw,19px);line-height:1.55;text-shadow:0 1px 8px #000a}
.hc .cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0}
.hc .btn{margin:0;padding:12px 24px}
.ar{transform:translateY(-50%);transition:background .2s}.ar:hover{background:var(--ac)}
.ar.l{left:10px}.ar.r{right:10px}
.dots button{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:#fff6;cursor:pointer;transition:.3s}
.dots button.on{background:#fff;width:26px;border-radius:6px}
@media(max-width:600px){.ar{display:none}.sl .cap{top:12px;left:12px;font-size:12px}.hc{padding:56px 18px 52px}}

/* stats */
.stats b{font-variant-numeric:tabular-nums}

/* image icons in cards (vision, mission, values and any card whose icon is an image path) */
.card .e{display:flex;margin-bottom:12px}
.card .e .ico{width:60px;height:60px;padding:12px;object-fit:contain;border-radius:16px;background:var(--bg2);border:1px solid var(--bd);transition:transform .3s,background .3s}
.card:hover .e .ico{transform:rotate(-6deg) scale(1.08);background:#e8530e1a}
a.card{display:block;color:inherit;text-decoration:none}
a.card h3{transition:color .2s}a.card:hover h3{color:var(--ac)}
.vals{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.vals li{background:var(--bg2);border:1px solid var(--bd);border-radius:20px;padding:6px 13px;font-size:14px;font-weight:600;transition:background .2s,color .2s,border-color .2s}
.vals li:hover{background:var(--ac);border-color:var(--ac);color:#fff}
.qa{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:28px 0 0}
.qa .btn{margin:0}
.more{text-align:center;margin:22px 0 0}
.btn.o2{background:transparent;border:2px solid var(--ac);color:var(--ac)}
.btn.o2:hover{background:var(--ac);color:#fff;filter:none}

/* testimonies */
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tg .card{margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:16px;border-left:4px solid var(--ac)}
.tg blockquote{margin:0;font-size:18px;line-height:1.5;font-weight:600}
.tg blockquote::before{content:"“"}.tg blockquote::after{content:"”"}
.tg figcaption{color:var(--mu);font-size:14px;font-weight:600}
.tg figcaption::before{content:"— "}

@media(max-width:760px){
  .w{padding:38px 16px}
  .stats{padding:22px 8px}
  .card{padding:18px}
  .qa{display:grid;grid-template-columns:1fr 1fr}
  .qa .btn{text-align:center;padding:12px 8px}
  .qa .btn:last-child:nth-child(odd){grid-column:1/-1}
  .tg{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding:4px 16px 12px;scrollbar-width:none}
  .tg::-webkit-scrollbar{display:none}
  .tg .card{flex:0 0 82%;scroll-snap-align:center}
}
/* header brand: long name must wrap cleanly on small phones */
.logo span{line-height:1.15;font-size:15px}
@media(max-width:420px){.logo{gap:8px}.logo i{width:44px;height:44px}.logo span{font-size:12.5px}}
@media(prefers-reduced-motion:reduce){.sl.on img{animation:none}.card:hover .e .ico{transform:none}}

/* ===================== ABOUT ===================== */
.sec{padding:0}
.sec .w{padding:56px 18px}
.sec{scroll-margin-top:calc(var(--hh,75px) + 52px)}
.sh{max-width:680px;margin:0 auto 28px;text-align:center}
.sh h2{margin-bottom:8px}.sh p{margin:0;color:var(--mu)}

/* jump links */
.subnav{position:sticky;top:calc(var(--hh,75px) + env(safe-area-inset-top,0px));z-index:40;display:flex;justify-content:center;gap:6px;padding:8px 12px;background:var(--bg);border-bottom:1px solid var(--bd);overflow-x:auto;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:none;white-space:nowrap;font-weight:700;font-size:14px;padding:8px 16px;border-radius:30px}

/* part 1 */
.who{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;margin-bottom:28px}
.lede{font-size:18px;line-height:1.7;margin:0 0 4px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
.facts>div{background:var(--cd);border:1px solid var(--bd);border-radius:14px;padding:12px 8px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.facts b{display:block;font-size:clamp(20px,3vw,26px);line-height:1.15;color:var(--ac);font-variant-numeric:tabular-nums}
.facts b.txt{font-size:15px}
.facts span{display:block;font-size:12px;color:var(--mu);margin-top:3px}
.who-img img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;box-shadow:0 14px 34px #0002}
.vmv{margin-bottom:16px}
.faith{display:flex;gap:16px;align-items:flex-start}
.faith .e{margin:0}.faith h3{margin-top:2px}.faith p{margin:0}

/* part 2: leaders */
.team{margin:0 0 36px}
.team img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;object-position:center 30%;border-radius:20px}
.team figcaption{margin-top:8px;text-align:center;font-size:14px;color:var(--mu)}
.org{--ln:var(--bd);display:flex;flex-direction:column;align-items:center}
@supports (color:color-mix(in srgb,red,blue)){.org{--ln:color-mix(in srgb,var(--ac) 45%,var(--bd))}}
.lv{width:100%;padding-top:30px}
.lv:first-child{padding-top:0}
.lvt{position:relative;width:max-content;margin:0 auto;padding:5px 16px;border-radius:30px;background:var(--ac);color:#fff;font-size:13px;font-weight:700;z-index:1}
.lv:not(:first-child) .lvt::before{content:"";position:absolute;left:50%;bottom:100%;height:30px;border-left:2px solid var(--ln)}
.lvr{position:relative;display:flex;justify-content:center;gap:18px;padding-top:26px;margin:0 auto;width:100%}
.lvr::after{content:"";position:absolute;left:50%;top:0;height:13px;border-left:2px solid var(--ln)}
.pp{position:relative;flex:1 1 0;min-width:0;max-width:250px;margin:0;background:var(--cd);border:1px solid var(--bd);border-radius:18px;padding:20px 16px;text-align:center;transition:box-shadow .25s,transform .25s}
.pp:hover{box-shadow:0 12px 28px #0002}
.pp::before{content:"";position:absolute;left:50%;bottom:100%;height:13px;border-left:2px solid var(--ln)}
.pp::after{content:"";position:absolute;bottom:calc(100% + 13px);left:-9px;right:-9px;border-top:2px solid var(--ln)}
.pp:first-child::after{left:50%}.pp:last-child::after{right:50%}.pp:only-child::after{display:none}
.pho{width:112px;height:112px;margin:0 auto 12px;border-radius:50%;overflow:hidden;border:3px solid var(--ac);background:var(--bg2)}
.pp .pho img{display:block;width:100%;height:100%;max-width:none;border-radius:0;object-fit:cover}
.nm{margin:0 0 2px;font-size:17px}.nm.none{color:var(--mu);font-weight:600;font-style:italic;font-size:15px}
.rl{margin:0 0 6px;color:var(--ac);font-weight:700;font-size:14px;line-height:1.3}
.ds{margin:0;color:var(--mu);font-size:14px;line-height:1.5}

/* part 3: partners */
.partners{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.ptile{width:200px;display:flex;flex-direction:column;background:var(--cd);border:1px solid var(--bd);border-radius:16px;overflow:hidden;color:inherit;text-decoration:none;transition:box-shadow .25s,transform .25s}
a.ptile:hover{transform:translateY(-3px);box-shadow:0 12px 28px #0002}
.pl{display:flex;align-items:center;justify-content:center;height:150px;padding:14px;background:#fff}
.ptile .pl img{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:0;transition:transform .3s}
.ptile:hover .pl img{transform:scale(1.06)}
.pn{padding:10px 12px;text-align:center;font-weight:700;font-size:14px;border-top:1px solid var(--bd)}
.pempty{width:100%;border:2px dashed var(--bd);border-radius:18px;padding:30px 18px;text-align:center;color:var(--mu)}
.pempty p{margin:0}

/* become-a-partner form */
#pf{width:min(600px,94vw);max-height:92vh;max-height:92dvh;border-radius:20px;overflow-y:auto}
.pfh{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;background:var(--cd);border-bottom:1px solid var(--bd)}
.pfh h2{margin:0;font-size:20px}
#pform{padding:6px 20px 20px}
#pform>label,.two label{display:block;font-size:13px;font-weight:600;margin-top:10px}
#pform select,#pform input:not([type=checkbox]),#pform textarea{margin:4px 0 4px}
#pform textarea{resize:vertical;min-height:84px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ways{border:0;margin:12px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ways legend{padding:0;margin-bottom:6px;font-size:13px;font-weight:600}
.ways legend{grid-column:1/-1;float:left;width:100%}
.chk{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--bd);border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;margin:0;transition:border-color .2s,background .2s}
.chk input{width:18px;height:18px;margin:0;padding:0;flex:none;accent-color:var(--ac)}
.chk:hover{border-color:var(--ac)}
.chk:has(input:checked){border-color:var(--ac);background:#e8530e14}
#pform .btn{width:100%;margin-top:16px;text-align:center}
#pok{padding:30px 22px 24px}

/* tablet and phone */
@media(max-width:900px){
  .who{grid-template-columns:1fr;gap:22px}
  .who-img{order:-1}
  .who-img img{aspect-ratio:16/9}
  .facts{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:959px){
  /* chart becomes a vertical list with a rail on the left */
  .org{align-items:stretch;border-left:3px solid var(--ln);margin-left:8px;padding-left:18px}
  .lv,.lv:first-child{padding-top:22px}.lv:first-child{padding-top:0}
  .lvt{margin:0 0 12px;position:relative}
  .lvt::after{content:"";position:absolute;left:-29px;top:50%;width:13px;height:13px;margin-top:-6px;border-radius:50%;background:var(--ac);border:3px solid var(--bg2)}
  .lv:not(:first-child) .lvt::before{display:none}
  .lvr{flex-direction:column;align-items:stretch;gap:12px;padding-top:0;max-width:none}
  .lvr::after,.pp::before,.pp::after{display:none}
  .pp{max-width:none;margin:0;display:flex;align-items:center;gap:14px;text-align:left;padding:14px}
  .pho{width:84px;height:84px;margin:0;flex:none}
}
@media(max-width:600px){
  .sec .w{padding:40px 16px}
  .team img{aspect-ratio:16/9}
  .partners{gap:10px}
  .ptile{width:calc(50% - 5px)}
  .pl{height:112px}
  .two,.ways{grid-template-columns:1fr}
  .faith{flex-direction:column;gap:6px}
  #pf{width:100vw;max-width:100vw;max-height:94dvh;margin:auto 0 0;border-radius:20px 20px 0 0}
  #pform{padding:4px 16px calc(18px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){.pp,.ptile{transition:none}}

/* header: its wrapper must not limit it, otherwise "sticky" never sticks */
#top{display:contents}

/* ===================== ABOUT: BRANCHES ===================== */
.branches{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.branch{width:min(380px,100%);display:flex;flex-direction:column;background:var(--cd);border:1px solid var(--bd);border-radius:18px;overflow:hidden;transition:box-shadow .25s,transform .25s}
.branch:hover{transform:translateY(-3px);box-shadow:0 12px 28px #0002}
.branch .bimg{display:block;width:100%;max-width:none;aspect-ratio:16/10;object-fit:cover;border-radius:0}
.bbody{display:flex;flex-direction:column;gap:6px;flex:1;padding:16px 18px 18px}
.btag{align-self:flex-start;background:var(--ac);color:#fff;font-size:12px;font-weight:700;padding:3px 12px;border-radius:20px}
.bbody h3{margin:4px 0 0}
.bbody p{margin:0;color:var(--mu);font-size:14px;line-height:1.55}
.bact{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:12px}
.bact .btn{margin:0;padding:10px 16px;font-size:14px}
@media(max-width:600px){.branch{width:100%}.bact .btn{flex:1;text-align:center}}
@media(prefers-reduced-motion:reduce){.branch{transition:none}.branch:hover{transform:none}}

/* ===================== JOIN ===================== */
.jg{grid-template-columns:1.25fr 1fr 1fr;align-items:start}
@media(max-width:980px){.jg{grid-template-columns:1fr 1fr}.jg>#member{grid-column:1/-1}}
@media(max-width:640px){.jg{grid-template-columns:1fr}}
#memform label{display:block;font-size:13px;font-weight:600;margin-top:8px}
#memform input,#memform select{margin:4px 0 4px}
#memform .btn{width:100%;margin-top:14px;text-align:center}
.phone{display:flex;gap:8px;align-items:flex-start}
.phone select{flex:0 0 172px;width:172px;min-width:0;text-overflow:ellipsis}
.phone input{flex:1;min-width:0}
@media(max-width:420px){.phone select{flex-basis:128px;width:128px}}
#mok{padding:12px 4px 4px}
#mok h3{margin:0 0 8px;outline:none}
#mok .btn{margin-top:8px}
.reach{display:flex;flex-direction:column;gap:6px;margin:16px 0 0}
.reach span{display:flex;gap:8px;align-items:flex-start;overflow-wrap:anywhere;word-break:break-word}
.reach a{color:var(--ac);font-weight:600}
footer a,footer p{overflow-wrap:anywhere}

/* ===== Gallery page ===== */
.gallery{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:600px){.gallery{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(min-width:960px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gi{display:block;position:relative;overflow:hidden;border-radius:12px;aspect-ratio:4/3;background:var(--bg2);border:1px solid var(--bd);cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.gi img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.gi:hover img,.gi:focus-visible img{transform:scale(1.07)}
.gi:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
.gi::after{content:"";position:absolute;right:8px;bottom:8px;width:32px;height:32px;border-radius:50%;background:#000a url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27%3E%3Ccircle cx=%2711%27 cy=%2711%27 r=%277%27/%3E%3Cpath d=%27m21 21-4.3-4.3%27/%3E%3C/svg%3E") center/16px no-repeat;opacity:0;transition:.25s}
.gi:hover::after,.gi:focus-visible::after{opacity:1}
@media(hover:none){.gi::after{display:none}}
.xt{text-align:center;font-size:clamp(24px,5vw,34px)}
.xs{text-align:center;color:var(--mu);margin:0 0 24px}
.xgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.xl{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:22px 16px;background:var(--cd);border:1px solid var(--bd);border-radius:16px;text-decoration:none;color:var(--tx);transition:.25s}
.xl:hover,.xl:focus-visible{transform:translateY(-4px);box-shadow:0 10px 26px #0002;border-color:var(--ac)}
.xl .xe{font-size:34px;line-height:1.2}.xl b{font-size:17px}.xl small{color:var(--ac);font-weight:700}
/* image viewer */
body.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:200;background:#000e;display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.lb[hidden]{display:none}
.lb-f{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 10px 12px}
.lb-f img{display:block;max-width:100%;max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);object-fit:contain;border-radius:8px;transition:opacity .2s;touch-action:pan-y}
.lb-f img.ld{opacity:.35}
.lb-f figcaption{color:#fff;font-size:14px;margin-top:10px;opacity:.85}
.lb button{position:absolute;background:#ffffff26;color:#fff;border:0;border-radius:50%;width:44px;height:44px;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s;-webkit-tap-highlight-color:transparent}
.lb button:hover,.lb button:focus-visible{background:var(--ac)}
.lb-x{top:calc(10px + env(safe-area-inset-top,0px));right:12px;font-size:18px}
.lb-a{top:50%;transform:translateY(-50%);font-size:32px!important;padding-bottom:4px}
.lb-p{left:10px}.lb-n{right:10px}
@media(max-width:600px){.lb-a{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:none;width:48px;height:48px}.lb-p{left:16px}.lb-n{right:16px}.lb-f img{max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px)}}

/* ===== Ministries page: 8 numbered ministry cards ===== */
.mgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));counter-reset:mn;align-items:start}
.mc{position:relative;counter-increment:mn}
.mc::before{content:counter(mn);position:absolute;top:14px;right:16px;width:30px;height:30px;border-radius:50%;background:var(--ac);color:#fff;font:800 14px/30px system-ui;text-align:center}
.mc h3{padding-right:40px}
.mc p{margin:0 0 .7em;color:var(--mu)}
.mc p.goal{color:var(--tx);border-top:1px solid var(--bd);padding-top:.7em;margin:.9em 0 0}
.mc p.goal b{color:var(--ac)}
.mc p.goal b::after{content:":"}


/* ===== footer social links not yet connected ===== */
footer .soc-off{display:block;padding:2px 0;color:#8f8078;cursor:default}
footer .soc-off small{font-size:11px;border:1px solid #4a3a32;border-radius:10px;padding:0 7px;margin-left:4px;color:#b3a39a}

/* ===== shared: two-column text + image blocks, placeholder tiles ===== */
.split{display:grid;gap:28px;grid-template-columns:1.1fr .9fr;align-items:center}
.split .txt p{color:var(--mu);margin:0 0 12px}
.split .txt p:first-of-type{color:var(--tx);font-size:18px}
.split .pic img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px}
@media(max-width:800px){.split{grid-template-columns:1fr}.split .pic{order:-1}}

/* nopic: a picture that is missing shows a soft placeholder with a caption */
.nopic{position:relative}
.nopic img{object-fit:contain!important;padding:14%;background:var(--bg2)}
.nopic-t{display:none;position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:13px;font-weight:700;color:var(--mu)}
.nopic .nopic-t{display:block}
.nopic{cursor:default}.nopic::after{display:none!important}

/* ===== events: poster cards ===== */
.evg{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.ev{display:flex;flex-direction:column;background:var(--cd);border:1px solid var(--bd);border-radius:18px;overflow:hidden;transition:box-shadow .25s,transform .25s}
.ev:hover{transform:translateY(-3px);box-shadow:0 12px 28px #0002}
.ev .gi{aspect-ratio:3/4;border:0;border-radius:0;border-bottom:1px solid var(--bd)}
.ev .gi img{object-fit:contain;background:var(--bg2)}
.ev .gi:hover img,.ev .gi:focus-visible img{transform:none}
.evb{display:flex;flex-direction:column;gap:4px;flex:1;padding:14px 16px 16px}
.evb h3{margin:0;font-size:18px}
.evd{margin:0;color:var(--ac);font-weight:700;font-size:14px}
.evp{margin:0;color:var(--mu);font-size:14px;line-height:1.55}
.evb .btn{align-self:flex-start;margin-top:auto;padding:9px 18px;font-size:14px}
.evb .evp+.btn,.evb .evd+.btn{margin-top:10px}
.sub{color:var(--mu);margin:-4px 0 18px}
.ev-reg{padding:20px;border-radius:16px;margin-top:34px}
.ev-reg form{display:grid;gap:10px;max-width:520px}

/* ===== foundation ===== */
.fgal{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.fgal{grid-template-columns:repeat(3,1fr)}}

.proj{display:flex;flex-direction:column;background:var(--cd);border:1px solid var(--bd);border-radius:18px;overflow:hidden}
.proj .gi{aspect-ratio:16/10;border:0;border-radius:0}
.proj .evb{gap:6px}
.tag{align-self:flex-start;background:var(--ac);color:#fff;font-size:12px;font-weight:700;padding:3px 12px;border-radius:20px}
.pgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.don{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.don .card{display:flex;flex-direction:column;gap:6px;text-align:center;align-items:center}
.don .card:hover{transform:none}
.don .lbl{margin:0;color:var(--mu);font-size:14px;font-weight:600}
.don .num{margin:0;font-size:clamp(26px,5vw,34px);font-weight:800;letter-spacing:.04em;color:var(--ac);overflow-wrap:anywhere}
.don .acc{margin:0;font-weight:700;overflow-wrap:anywhere}
.don .btn{margin-top:8px}
.don .btn.o2{padding:8px 18px;font-size:14px}
.don .soon{font-size:13px;color:var(--mu);margin:6px 0 0}
.gnote{text-align:center;margin:22px 0 0}
@media(prefers-reduced-motion:reduce){.ev,.ev:hover{transition:none;transform:none}}


/* ===== leaders: keep faces in frame ===== */
.pp .pho img{object-position:center 22%}

/* ===== foundation page layout ===== */
.kick{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--ac);margin-bottom:6px}
.split .txt h2{margin:0 0 14px}
.split .txt p,.split .txt p:first-of-type{font-size:16px;line-height:1.75;color:var(--mu);margin:0 0 14px}
.split .pic{max-width:420px;justify-self:center;width:100%}
.split .pic img{aspect-ratio:1/1;object-fit:contain;background:#fff}
.split .pic .gi{display:block;border-radius:20px;overflow:hidden}
.sh p{line-height:1.65}
.center{text-align:center;margin:0 0 22px;font-size:17px}
.thanks{max-width:760px;margin:30px auto 0;text-align:center;font-size:16px;line-height:1.75;color:var(--mu)}
/* journey timeline */
.tl{list-style:none;margin:0 auto;padding:0 0 0 30px;max-width:780px;position:relative}
.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;border-left:3px solid #e8530e55}
.tl li{position:relative;background:var(--cd);border:1px solid var(--bd);border-radius:16px;padding:18px 20px;margin:0 0 18px}
.tl li::before{content:"";position:absolute;left:-30px;top:24px;width:16px;height:16px;border-radius:50%;background:var(--ac);border:3px solid var(--bg2);box-sizing:content-box;margin-left:-3px}
.tl-d{display:inline-block;background:var(--ac);color:#fff;font-size:12px;font-weight:700;padding:3px 12px;border-radius:20px;margin-bottom:8px}
.tl h3{margin:0 0 8px;font-size:20px}
.tl p{margin:0 0 10px;color:var(--mu);line-height:1.7}.tl p:last-child{margin-bottom:0}
/* mission / vision: two equal cards */
.mv{display:grid;gap:18px;grid-template-columns:1fr 1fr;align-items:stretch}
.mv .card{padding:26px}.mv .card:hover,.fc:hover{transform:none}
.mv h3{margin:6px 0 10px;font-size:22px}
.mv p{color:var(--mu);line-height:1.75;margin:0 0 12px}.mv p:last-child{margin:0}
.fe{display:flex;align-items:center;justify-content:center;width:54px;height:54px;font-size:28px;border-radius:16px;background:var(--bg2);border:1px solid var(--bd)}
.alt .fe{background:var(--cd)}
@media(max-width:800px){.mv{grid-template-columns:1fr}}
/* what we do / get involved: equal-height cards, 3 columns on desktop */
.fgrid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.fc{display:flex;flex-direction:column;gap:6px}
.fc h3{margin:8px 0 2px;font-size:18px}
.fc p{margin:0;color:var(--mu);line-height:1.65;font-size:15px}
/* long reading blocks */
.prose{max-width:760px;margin:0 auto}
.prose p{margin:0 0 16px;font-size:16px;line-height:1.8;color:var(--mu)}
.prose p.lead{font-size:19px;line-height:1.7;color:var(--tx)}
.pull{margin:28px 0 0;padding:20px 24px;border-left:5px solid var(--ac);border-radius:0 16px 16px 0;background:var(--cd);font-size:clamp(19px,3vw,24px);font-weight:700;line-height:1.5}


/* ===== foundation: logo in header, gallery keeps each picture's own shape ===== */
.ph-logo{display:block;width:96px;height:96px;margin:0 auto 14px;border-radius:50%;object-fit:cover;background:#fff;border:3px solid #fff;box-shadow:0 6px 18px #0003}
.fgal{display:block;columns:3;column-gap:12px}
@media(max-width:800px){.fgal{columns:2}}
@media(max-width:420px){.fgal{column-gap:8px}}
.fgal .gi{display:block;margin:0 0 12px;aspect-ratio:auto;break-inside:avoid}
.fgal .gi img{height:auto;object-fit:contain}
.fgal .gi.nopic img{aspect-ratio:4/3;height:auto}
.split .pic .gi.nopic{aspect-ratio:1/1}
.sent{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:var(--bg2);border:1px solid var(--bd);font-size:14px}
.sent a{color:var(--ac);font-weight:700}
.legal{max-width:760px;margin:0 auto}
.legal h2{margin:26px 0 8px;font-size:20px}
.legal p,.legal li{color:var(--mu);line-height:1.75}

/* ===== foundation: upcoming project posters (scoped so the shop's .pgrid is untouched) ===== */
#projects .pgrid{grid-template-columns:repeat(auto-fit,minmax(250px,380px));justify-content:center;gap:20px}
#projects .proj .gi{aspect-ratio:4/5;cursor:zoom-in}
#projects .proj .gi img{object-fit:contain;background:var(--bg2)}
#projects .proj .gi:hover img,#projects .proj .gi:focus-visible img{transform:none}
#projects .proj .tag{line-height:1.4}
#projects .proj .evp{font-size:15px}
#projects .proj .btn{margin-top:12px}
@media(max-width:520px){#projects .pgrid{grid-template-columns:1fr;gap:16px}}

/* ===== foundation: vertical scroll rail (left edge, built by assets/foundation.js) ===== */
#vrail{position:fixed;left:2px;top:calc(var(--hh,75px) + 78px);bottom:24px;max-height:480px;width:22px;z-index:45;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  opacity:0;pointer-events:none;transform:translateX(-10px);transition:opacity .3s,transform .3s}
#vrail[hidden]{display:none}
#vrail.on{opacity:1;pointer-events:auto;transform:none}
.vr-a{flex:none;width:22px;height:22px;padding:0;border-radius:50%;border:1px solid var(--bd);background:var(--cd);color:var(--ac);font-size:9px;line-height:1;cursor:pointer;box-shadow:0 2px 6px #0003}
.vr-a:hover,.vr-a:focus-visible{background:var(--ac);color:#fff}
.vr-t{position:relative;flex:1;width:22px;min-height:80px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.vr-t::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;border-radius:4px;background:var(--bd)}
.vr-f{position:absolute;left:50%;top:0;width:4px;margin-left:-2px;border-radius:4px;background:var(--ac);height:0}
.vr-d{position:absolute;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;padding:0;border-radius:50%;border:2px solid var(--ac);background:var(--bg);cursor:pointer;z-index:1}
.vr-d::after{content:"";position:absolute;inset:-9px}
.vr-d.p{background:var(--ac)}
.vr-d.on{transform:scale(1.35)}
.vr-h{position:absolute;left:50%;z-index:2;width:14px;height:36px;margin:-18px 0 0 -7px;padding:0;border-radius:9px;border:2px solid #fff;background:var(--ac);box-shadow:0 2px 8px #0006;cursor:grab;touch-action:none}
.vr-h.drag{cursor:grabbing;transform:scaleX(1.15)}
.vr-h:focus-visible,.vr-d:focus-visible{outline:3px solid var(--ac2);outline-offset:2px}
.vr-tip{position:absolute;left:30px;z-index:3;transform:translateY(-50%);background:#000d;color:#fff;font:700 12px/1.2 system-ui,sans-serif;padding:6px 11px;border-radius:14px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.vr-tip.show{opacity:1}
@media(max-width:600px){
  #vrail{left:0;width:18px;top:calc(var(--hh,75px) + 70px);bottom:20px}
  .vr-a{width:18px;height:18px;font-size:8px}
  .vr-t{width:18px}
  .vr-h{width:14px;height:42px;margin:-21px 0 0 -7px}
}
@media(prefers-reduced-motion:reduce){#vrail{transition:none}}

/* ===== floating buttons: WhatsApp (real logo) sits above the Ignite AI assistant (Chatbase) ===== */
.wa{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
.wa svg{width:34px;height:34px;fill:#fff;display:block}
#chatbase-bubble-button{bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;right:16px!important}

/* ===== About page: philosophy, core values, goals, vision for the future ===== */
.vmv2{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.vmv2{grid-template-columns:1fr}}
.cn{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--ac);color:#fff;font-weight:800;font-size:14px}
.cvals{margin-bottom:16px}.cvals:hover{transform:none}
.cvl{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cv{display:flex;gap:12px;align-items:flex-start;background:var(--bg2);border:1px solid var(--bd);border-radius:14px;padding:14px 16px;transition:border-color .2s,transform .2s}
.cv:hover{border-color:var(--ac);transform:translateY(-2px)}
.cv h4{margin:2px 0 4px;font-size:16px}.cv p{margin:0;color:var(--mu);font-size:14px;line-height:1.6}
.phil{max-width:780px;margin:0 auto;text-align:center}
.phil .e{justify-content:center}.phil .kick{display:block}
.phil h2{font-size:clamp(26px,5vw,38px);line-height:1.2;margin:0 0 16px}
.phil p{font-size:17px;line-height:1.85;color:var(--mu);margin:0 0 20px}
.phil .pull{text-align:left;margin:0}.pgl{color:var(--mu);font-weight:600}
.gic{justify-content:center}
.goals{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.gc:hover{transform:none}.gc .cn{margin-bottom:10px}.gc h3{margin:0 0 6px}.gc p{margin:0;color:var(--mu);line-height:1.65}
.fut{display:grid;gap:30px;grid-template-columns:1.05fr 1fr;align-items:center}
.fut-t h2{margin:0 0 14px}.fut-t p{font-size:16px;line-height:1.75;color:var(--mu);margin:0 0 14px}
.fund{display:flex;flex-direction:column;gap:2px;margin:6px 0 16px;padding:14px 18px;border-left:5px solid var(--ac);border-radius:0 14px 14px 0;background:var(--cd);border-top:1px solid var(--bd);border-right:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.fund span{font-size:14px;font-weight:600;color:var(--mu)}.fund b{font-size:clamp(28px,6vw,38px);color:var(--ac);line-height:1.2}
.fut-t .fn{font-size:14px;font-style:italic;margin:0 0 6px}
.fb{margin:12px 0 0!important}.fb .btn{margin:3px 6px 3px 0}
.fut-i{margin:0}.fut-i .gi{aspect-ratio:16/10;border-radius:18px}
.fut-i .gi img{object-fit:contain;background:var(--bg2)}
.fut-i .gi:hover img,.fut-i .gi:focus-visible img{transform:none}
.fut-i figcaption{font-size:13px;color:var(--mu);text-align:center;margin-top:8px;font-style:italic}
@media(max-width:800px){.fut{grid-template-columns:1fr}.fut-i{order:-1}}
/* Home: headquarters project banner */
.hqb{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 24px;padding:16px 20px;border-radius:18px;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff}
.hqb div{flex:1 1 280px}.hqb h3{margin:0 0 4px;font-size:18px}.hqb p{margin:0;font-size:14px;line-height:1.55;opacity:.95}
.hqb .btn{background:#fff;color:#b73c05;margin:0}
/* Prayer wall: highlighted headquarters item */
.wall p.big{border-left-width:6px;background:var(--cd);border:1px solid var(--bd);border-left:6px solid var(--ac);line-height:1.7}
.wall p.big b{display:block;margin-bottom:4px;color:var(--ac)}

/* Foundation: project overviews */
#projects .proj .who{margin:0;font-weight:700;color:var(--ac)}
#projects .proj h4{margin:8px 0 0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
#projects .proj .evp{line-height:1.7}
.phil .e,.gic{display:flex;justify-content:center;margin-bottom:12px}
.phil .ico,.gic .ico{width:60px;height:60px;padding:12px;object-fit:contain;border-radius:16px;background:var(--cd);border:1px solid var(--bd)}
#projects .proj p,#projects .proj h4{align-self:stretch}


/* ===== icons (replace the old emojis): inline SVG from the ICONS list in assets/app.js ===== */
.i{display:inline-block;width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em;flex:none}
h2>.i,h3>.i{color:var(--ac);margin-right:2px}
footer .i{color:var(--ac2);margin-right:2px}
.ic .i{width:21px;height:21px;vertical-align:middle}
.ar .i{width:22px;height:22px;stroke-width:2.2;vertical-align:middle}
.btn .i{vertical-align:-.2em;margin-right:2px}
.card .e .ci{width:60px;height:60px;padding:13px;border-radius:16px;background:var(--bg2);border:1px solid var(--bd);color:var(--ac);stroke-width:1.6;vertical-align:baseline;transition:transform .3s,background .3s}
.card:hover .e .ci{transform:rotate(-6deg) scale(1.08);background:#e8530e1a}
.fe .i{width:28px;height:28px;stroke-width:1.6;color:var(--ac);vertical-align:baseline}
.empty .e .i{width:48px;height:48px;stroke-width:1.4;color:var(--ac);vertical-align:baseline}
.reach .i{color:var(--ac);margin-top:.18em}
.okt .i{width:38px;height:38px;stroke-width:3;vertical-align:baseline}
.lbb .i{width:24px;height:24px;stroke-width:2.2;vertical-align:middle}
.lb button .i{width:22px;height:22px;stroke-width:2.2;vertical-align:middle}
.lb .lb-a .i{width:28px;height:28px}
.vr-a .i{width:12px;height:12px;stroke-width:3;vertical-align:middle}
#cartb .i{vertical-align:-.25em}
#toast .i{color:#6ee7a0;margin-right:2px}
.xl .xe{display:grid;place-items:center;width:54px;height:54px;margin-bottom:4px;border-radius:16px;background:var(--bg2);border:1px solid var(--bd);color:var(--ac)}
.xl .xe .i{width:28px;height:28px;stroke-width:1.6;vertical-align:baseline}
.xl small::after{content:"";display:inline-block;width:.95em;height:.95em;margin-left:5px;vertical-align:-.12em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M7 17 17 7M8 7h9v9%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M7 17 17 7M8 7h9v9%27/%3E%3C/svg%3E") center/contain no-repeat}

/* ===== viewer: a button with the hidden attribute must really hide (single photo = no arrows) ===== */
.lb button[hidden]{display:none}

/* ===== gallery: photos keep their own shape (portrait and landscape), no cropping ===== */
.gallery{display:block;columns:2;column-gap:10px}
@media(min-width:600px){.gallery{columns:3;column-gap:14px}}
@media(min-width:960px){.gallery{columns:4}}
.gallery .gi{display:block;margin:0 0 10px;aspect-ratio:auto;break-inside:avoid}
@media(min-width:600px){.gallery .gi{margin-bottom:14px}}
.gallery .gi img{height:auto;object-fit:cover}

/* ===== About > Vision for the Future: the architectural concept image keeps its own (square) shape ===== */
.fut-i{max-width:600px;margin-inline:auto}
.fut-i .gi{aspect-ratio:auto}
.fut-i .gi img{height:auto;object-fit:contain}
.fut-i .gi.nopic{aspect-ratio:16/10}
.fut-i .gi.nopic img{height:100%}
.mag .i{width:18px;height:18px;stroke-width:2.2;vertical-align:middle}