/*
Theme Name: Motiba Memorial Seva Samaj Trust
Theme URI: http://localhost/JYP-Group/
Author: JYP Groups
Description: Theme for Motiba Memorial Seva Samaj Trust, Gandhinagar — a JYP Groups social initiative. Same base as the other JYP Groups sites, recoloured to the MMS logo.
Version: 1.0.0
License: GNU GPL v2 or later
Text Domain: motiba-trust
*/

:root{
  --primary:#14206e;
  --primary-dk:#0b1248;
  --accent:#9b1c1c;
  --accent-2:#b8282a;
  --accent-lt:#f7c3b5;
  --tint:rgba(155,28,28,.16);
  --ink:#16202c;
  --muted:#5a6877;
  --line:#e7ecf2;
  --bg:#ffffff;
  --bg-soft:#f6f8fb;
  --radius:18px;
  --shadow:0 18px 50px -22px rgba(16,32,52,.32);
  --shadow-sm:0 8px 24px -14px rgba(16,32,52,.28);
  --wrap:1180px;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --serif:'Marcellus','Plus Jakarta Sans',serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .4em;font-weight:800;letter-spacing:-.02em}
p{margin:0 0 1em}
.container{width:92%;max-width:var(--wrap);margin:0 auto}
.section{padding:96px 0}
.section.soft{background:var(--bg-soft)}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);display:inline-block}
.section-head{max-width:720px;margin:0 auto 56px;text-align:center}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.section-head p{color:var(--muted);font-size:1.06rem}
.lead{font-size:1.12rem;color:var(--muted)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:13px 26px;border-radius:999px;font-weight:700;font-size:.95rem;border:1.5px solid transparent;cursor:pointer;transition:.25s;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 26px -12px var(--accent)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-dark{background:var(--primary);color:#fff}
.btn-dark:hover{background:var(--primary-dk);transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-outline{background:#fff;border-color:var(--line);color:var(--primary)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-lg{padding:16px 34px;font-size:1.02rem}

/* Preloader */
.jyp-preloader{position:fixed;inset:0;z-index:9999;background:#fff;display:grid;place-items:center;transition:opacity .5s ease,visibility .5s ease}
.jyp-preloader.hidden{opacity:0;visibility:hidden}
.pl-inner{display:grid;justify-items:center;gap:22px}
.pl-logo{width:170px;max-width:60vw;height:auto;animation:plPulse 1.3s ease-in-out infinite}
.pl-mark{width:84px;height:84px;border-radius:22px;display:grid;place-items:center;font-weight:800;font-size:1.6rem;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-dk));animation:plPulse 1.3s ease-in-out infinite}
@keyframes plPulse{0%,100%{transform:scale(.94);opacity:.82}50%{transform:scale(1.05);opacity:1}}
.pl-bar{width:170px;max-width:60vw;height:4px;background:var(--line);border-radius:4px;overflow:hidden}
.pl-bar span{display:block;height:100%;width:40%;border-radius:4px;background:linear-gradient(90deg,var(--primary),var(--accent));animation:plBar 1.1s ease-in-out infinite}
@keyframes plBar{0%{margin-left:-42%}100%{margin-left:102%}}

/* Header */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:.3s}
.site-header.scrolled{box-shadow:0 10px 30px -20px rgba(16,32,52,.4)}
.nav-wrap{display:flex;align-items:center;gap:22px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{height:78px;width:auto;display:block}
@media(max-width:760px){.brand-logo{height:56px}}
.brand-mark{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-weight:800;font-size:1.05rem;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-dk));box-shadow:var(--shadow-sm);letter-spacing:-.04em}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text strong{font-size:1.05rem;color:var(--primary)}
.brand-text small{font-size:.7rem;color:var(--muted);letter-spacing:.04em}
.main-nav{margin-left:auto}
.nav-list{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav-list a{font-weight:600;font-size:.94rem;color:var(--ink);position:relative;padding:6px 0}
.nav-list a:hover{color:var(--accent)}
.nav-list a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);transition:.25s}
.nav-list a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:16px}
.lang-pills{font-size:.74rem;font-weight:700;color:var(--muted);border:1px solid var(--line);padding:5px 10px;border-radius:999px}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2.5px;background:var(--primary);border-radius:2px;transition:.3s}

/* Hero */
.hero{position:relative;color:#fff;overflow:hidden;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dk) 60%,#060d18 100%)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.14),transparent 45%),radial-gradient(circle at 12% 85%,var(--tint),transparent 42%);opacity:.65}
.hero-inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center;padding:84px 0 92px}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);padding:8px 16px;border-radius:999px;font-size:.82rem;font-weight:600;margin-bottom:22px}
.hero h1{font-size:clamp(2.3rem,5vw,3.7rem);letter-spacing:-.03em;margin-bottom:18px}
.hero h1 .gold{color:var(--accent)}
.hero p{font-size:1.16rem;color:rgba(255,255,255,.86);max-width:560px;margin-bottom:30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.hero-stats{display:flex;gap:30px;margin-top:40px;flex-wrap:wrap}
.hero-stats .num{font-size:1.9rem;font-weight:800;color:var(--accent)}
.hero-stats small{display:block;color:rgba(255,255,255,.7);font-size:.84rem}
.hero-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:24px;padding:30px;backdrop-filter:blur(8px)}
.hero-card h3{color:#fff;font-size:1.15rem}
.hero-card ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.hero-card li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem;color:rgba(255,255,255,.9)}
.hero-card li::before{content:"✦";color:var(--accent)}

/* Hero trust row + scroll indicator */
.hero-trust{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.hero-trust span{font-size:.88rem;color:rgba(255,255,255,.82);font-weight:500}
.hero-trust strong{color:var(--accent)}
.hero-scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;width:26px;height:42px;border:2px solid rgba(255,255,255,.5);border-radius:14px;display:none}
.hero-scroll span{position:absolute;left:50%;top:8px;width:4px;height:8px;background:var(--accent);border-radius:2px;transform:translateX(-50%);animation:jypScroll 1.6s infinite}
@keyframes jypScroll{0%{opacity:0;top:8px}40%{opacity:1}80%{opacity:0;top:22px}100%{opacity:0}}
@media(min-width:981px){.hero-scroll{display:block}}

/* Hero background image */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.16;mix-blend-mode:luminosity}
.hero .hero-inner{z-index:2}
.hero::before{z-index:1}
/* custom hero background (e.g. group collage) — show image clearly + keep text readable */
.hero.has-custom-bg .hero-bg img{opacity:.62;mix-blend-mode:normal}
.hero.has-custom-bg::before{background:linear-gradient(90deg,rgba(7,13,24,.86) 0%,rgba(7,13,24,.6) 42%,rgba(7,13,24,.3) 100%);opacity:1}

/* Image helpers */
.media{border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.media img{width:100%;height:100%;object-fit:cover;display:block;transition:.5s}
.media:hover img{transform:scale(1.05)}
.about-photo{min-height:380px}
.about-photo img{width:100%;height:100%;min-height:380px;object-fit:cover;border-radius:24px;box-shadow:var(--shadow)}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery a{border-radius:16px;overflow:hidden;aspect-ratio:1/1;box-shadow:var(--shadow-sm)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:.5s}
.gallery a:hover img{transform:scale(1.08)}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* Cards grid */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:30px;transition:.3s;box-shadow:var(--shadow-sm)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.card .thumb{margin:-30px -30px 18px;height:170px;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:.5s}
.card:hover .thumb img{transform:scale(1.06)}
.card .ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;background:var(--bg-soft);color:var(--accent);margin-bottom:16px}
.card h3{font-size:1.18rem}
.card p{color:var(--muted);font-size:.96rem;margin:0}

/* About split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.about-visual{border-radius:24px;min-height:380px;background:linear-gradient(135deg,var(--primary),var(--primary-dk));position:relative;overflow:hidden;box-shadow:var(--shadow);display:grid;place-items:center;color:#fff;text-align:center;padding:30px}
.about-visual .big{font-family:var(--serif);font-size:clamp(2rem,5vw,3.2rem);color:var(--accent)}
.about-visual::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,var(--tint),transparent 50%)}
.checklist{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.checklist li{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.checklist li span{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:.8rem}

/* Service pills list */
.pill-list{display:flex;flex-wrap:wrap;gap:12px}
.pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 20px;font-weight:600;font-size:.92rem;transition:.25s}
.pill:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-2px)}

/* Stats band */
.stats-band{background:linear-gradient(135deg,var(--primary),var(--primary-dk));color:#fff;border-radius:26px;padding:50px 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;box-shadow:var(--shadow)}
.stats-band .num{font-size:2.6rem;font-weight:800;color:var(--accent);font-family:var(--serif)}
.stats-band small{color:rgba(255,255,255,.78);font-weight:500}

/* Donation */
.donate{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-radius:26px;padding:54px;display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center;box-shadow:var(--shadow)}
.donate h2{color:#fff;font-size:clamp(1.7rem,3vw,2.3rem)}
.donate .amts{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
.donate .amts button,.donate .amts a{background:rgba(255,255,255,.55);border:1.5px solid rgba(0,0,0,.12);padding:12px 22px;border-radius:12px;font-weight:800;cursor:pointer;color:#fff}
.donate .amts button:hover{background:#fff}
.donate-card{background:#fff;border-radius:18px;padding:26px;text-align:center}
.donate-card .qr{width:150px;height:150px;margin:0 auto 14px;border-radius:14px;background:repeating-conic-gradient(#16202c 0 25%,#fff 0 50%) 50%/22px 22px;border:8px solid #fff;box-shadow:var(--shadow-sm)}
.badge-80g{display:inline-block;background:var(--primary);color:#fff;font-weight:700;font-size:.8rem;padding:6px 14px;border-radius:999px;margin-top:10px}

/* Testimonials */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm)}
.quote .stars{color:var(--accent);letter-spacing:3px;margin-bottom:10px}
.quote p{font-size:1rem;color:var(--ink)}
.quote .who{display:flex;align-items:center;gap:12px;margin-top:16px}
.quote .av{width:44px;height:44px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700}
.quote .who small{color:var(--muted)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:stretch}
.contact-info{display:grid;gap:18px}
.contact-info .row{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow-sm)}
.contact-info .row .ic{width:44px;height:44px;border-radius:12px;background:var(--tint);display:grid;place-items:center;font-size:1.2rem;color:var(--primary);flex:0 0 44px}
.contact-info .row strong{display:block}
.contact-info .row span{color:var(--muted);font-size:.94rem}
.contact-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm)}
.contact-form .f{display:grid;gap:6px;margin-bottom:16px}
.contact-form label{font-weight:600;font-size:.88rem}
.contact-form input,.contact-form textarea{border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;font-family:inherit;font-size:.96rem;width:100%}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.notice{padding:13px 16px;border-radius:12px;margin-bottom:18px;font-weight:600}
.notice.ok{background:#e7f7ec;color:#1b7a3e}
.notice.err{background:#fde8e8;color:#c0392b}
.map-embed{border:0;width:100%;height:230px;border-radius:14px;margin-top:8px;filter:grayscale(.2)}

/* Footer — premium */
.site-footer{position:relative;background:radial-gradient(1200px 400px at 15% 0%,rgba(255,255,255,.05),transparent 60%),linear-gradient(180deg,#0c1626 0%,#070d18 100%);color:#c6d2e2}
.footer-accent{position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--accent),var(--primary))}
.footer-top{padding:74px 0 50px}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1.25fr 1.35fr;gap:40px}
.footer-brand .brand-text strong{color:#fff}
.footer-logo{height:96px;width:96px;display:block;margin-bottom:10px;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
@media(max-width:760px){.footer-logo{height:76px;width:76px}}
.footer-about{font-size:.92rem;color:#9fb0c4;margin-top:16px;max-width:330px;line-height:1.7}
.site-footer h4{color:#fff;font-size:1.02rem;margin-bottom:20px;position:relative;padding-bottom:12px}
.site-footer h4::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--accent)}
.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot-links a{color:#aab8c9;font-size:.93rem;transition:.2s;display:inline-flex;align-items:center;gap:7px}
.foot-links a::before{content:"›";color:var(--accent);font-weight:800;transition:.2s}
.foot-links a:hover{color:#fff;transform:translateX(3px)}
.social{display:flex;gap:11px;margin-top:20px}
.social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;font-weight:700;color:#cdd6e2;transition:.25s}
.social a:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-3px)}
.footer-contact-col .fc-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;color:#c6d2e2}
.fc-ic{flex:0 0 38px;width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;font-size:1.05rem}
.fc-row span small{display:block;color:#8294aa;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:1px}
.fc-row:hover .fc-ic{background:var(--accent);color:#fff}
.fc-cta{margin-top:8px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09);padding:22px 0}
.footer-bottom .container{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.85rem;color:#8294aa}
.foot-meta a{color:#aab8c9}
.foot-meta a:hover{color:var(--accent)}
@media(max-width:980px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* Blog single layout + sidebar */
.post-layout{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:start}
.sidebar{position:sticky;top:96px;display:grid;gap:22px}
.widget{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.widget h4{font-size:1.05rem;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--accent);display:inline-block}
.side-search{display:flex;gap:8px}
.side-search input{flex:1;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-family:inherit}
.side-search button{background:var(--primary);color:#fff;border:0;border-radius:10px;padding:0 16px;cursor:pointer;font-size:1rem}
.recent{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.recent a{display:flex;gap:12px;align-items:center}
.recent .rt{flex:0 0 56px;width:56px;height:56px;border-radius:10px;overflow:hidden}
.recent .rt img{width:100%;height:100%;object-fit:cover}
.recent strong{display:block;font-size:.9rem;line-height:1.35;color:var(--ink)}
.recent a:hover strong{color:var(--accent)}
.recent small{color:var(--muted);font-size:.78rem}
.cats{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cats a{display:flex;justify-content:space-between;color:var(--muted);font-weight:600;font-size:.92rem;padding:6px 0;border-bottom:1px dashed var(--line)}
.cats a:hover{color:var(--accent)}
.widget-cta{background:linear-gradient(135deg,var(--primary),var(--primary-dk));color:#fff;border:0}
.widget-cta h4{color:#fff;border-color:var(--accent)}
.widget-cta p{color:rgba(255,255,255,.85);font-size:.94rem}
.widget-cta .btn{width:100%;justify-content:center}
@media(max-width:980px){.post-layout{grid-template-columns:1fr}.sidebar{position:static}}

/* Testimonials marquee */
.marquee{overflow:hidden;padding:10px 0}
.marquee + .marquee{margin-top:20px}
.m-track{display:flex;gap:20px;width:max-content;animation:jypMarq 70s linear infinite}
.m-track.rev{animation-direction:reverse}
.marquee:hover .m-track{animation-play-state:paused}
@keyframes jypMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tcard{flex:0 0 330px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow-sm)}
.tcard .stars{color:var(--accent);letter-spacing:2px;font-size:.9rem;margin-bottom:8px}
.tcard p{font-size:.92rem;color:var(--ink);margin:0 0 14px;line-height:1.55}
.tcard .who{display:flex;align-items:center;gap:11px}
.tcard .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dk));color:#fff;display:grid;place-items:center;font-weight:700;flex:0 0 40px}
.tcard .who strong{font-size:.92rem;display:block}
.tcard .who small{color:var(--muted);font-size:.78rem}
@media(max-width:760px){.tcard{flex-basis:280px}}

/* Share bar */
.share-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:34px;padding:20px;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px}
.share-bar strong{margin-right:6px}
.share-bar .sh{padding:9px 16px;border-radius:999px;font-weight:700;font-size:.85rem;color:#fff;border:0;cursor:pointer}
.share-bar .wa{background:#25d366}.share-bar .fb{background:#1877f2}.share-bar .tw{background:#111}
.share-bar .ln{background:#0a66c2}.share-bar .cp{background:#5a6877}.share-bar .copy{background:var(--accent);color:#fff}

/* Blog card media */
.post-thumb{margin:-30px -30px 18px;height:190px;overflow:hidden;border-radius:18px 18px 0 0}
.post-thumb img{width:100%;height:100%;object-fit:cover;transition:.5s}
.card:hover .post-thumb img{transform:scale(1.05)}

/* WhatsApp float */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:80;width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(37,211,102,.7);transition:.25s}
.wa-float:hover{transform:scale(1.08)}
.wa-svg{width:34px;height:34px;fill:#fff;position:relative;z-index:2}
.wa-dot{position:absolute;top:0;right:0;width:15px;height:15px;background:#ff3b30;border:2.5px solid #fff;border-radius:50%;z-index:3}
.wa-pulse{position:absolute;inset:0;border-radius:50%;background:#25d366;z-index:1;animation:jypWaPulse 2s ease-out infinite}
@keyframes jypWaPulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.6);opacity:0}100%{opacity:0}}
.wa-label{position:absolute;right:72px;top:50%;transform:translateY(-50%) translateX(8px);background:#111;color:#fff;padding:8px 14px;border-radius:9px;white-space:nowrap;font-size:.84rem;font-weight:600;opacity:0;pointer-events:none;transition:.25s;box-shadow:var(--shadow-sm)}
.wa-label::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%);border-left:6px solid #111;border-top:5px solid transparent;border-bottom:5px solid transparent}
.wa-float:hover .wa-label{opacity:1;transform:translateY(-50%) translateX(0)}

/* Service inner page — premium */
.breadcrumb{font-size:.82rem;color:rgba(255,255,255,.72);margin-bottom:16px;font-weight:500}
.breadcrumb a{color:var(--accent)}
.breadcrumb span{opacity:.6;margin:0 6px}
.svc-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center}
.svc-hero-media{border-radius:22px;overflow:hidden;box-shadow:var(--shadow);min-height:300px}
.svc-hero-media img{width:100%;height:100%;min-height:300px;object-fit:cover}
.chip-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);padding:9px 16px;border-radius:999px;font-size:.84rem;font-weight:600;color:#fff}
.svc-layout{display:grid;grid-template-columns:1fr 370px;gap:46px;align-items:start}
.info-card{position:sticky;top:96px;display:grid;gap:18px}
.info-card .ic-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm)}
.info-card .ic-box.dark{background:linear-gradient(135deg,var(--primary),var(--primary-dk));color:#fff;border:0}
.info-card .ic-box.dark h3{color:#fff}
.info-card .ic-box.dark .checklist li{color:#eaf0f7}
.info-card .quote-price{font-size:.9rem;color:var(--muted)}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.feat{display:flex;gap:13px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px;box-shadow:var(--shadow-sm);transition:.25s}
.feat:hover{transform:translateY(-3px);border-color:var(--accent)}
.feat .fi{flex:0 0 36px;width:36px;height:36px;border-radius:10px;background:var(--tint);color:var(--primary);display:grid;place-items:center;font-weight:800}
.feat strong{font-size:.96rem}
.faq{display:grid;gap:14px;max-width:840px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 24px;box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;font-weight:700;padding:18px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.5rem;font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq p{padding:0 0 20px;color:var(--muted);margin:0}
.cta-banner{background:linear-gradient(135deg,var(--primary),var(--primary-dk));border-radius:26px;padding:56px;text-align:center;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.cta-banner::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,var(--tint),transparent 50%)}
.cta-banner *{position:relative;z-index:2}
.cta-banner h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem)}
.cta-banner p{color:rgba(255,255,255,.85);max-width:580px;margin:0 auto 26px}
@media(max-width:980px){.svc-hero,.svc-layout,.feature-grid{grid-template-columns:1fr}.info-card{position:static}}

/* Inquiry modal */
.jyp-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px}
.jyp-modal.open{display:flex}
.jyp-modal-bg{position:absolute;inset:0;background:rgba(8,15,28,.62);backdrop-filter:blur(4px)}
.jyp-modal-card{position:relative;background:#fff;border-radius:22px;padding:0;overflow:hidden;max-width:480px;width:100%;box-shadow:0 40px 90px -30px rgba(0,0,0,.5);animation:jypPop .35s cubic-bezier(.2,.8,.2,1)}
@keyframes jypPop{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.jyp-modal-head{display:flex;align-items:center;gap:13px;padding:22px 26px;background:linear-gradient(135deg,var(--primary),var(--primary-dk));color:#fff;position:relative}
.jyp-modal-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent)}
.jyp-modal-head .brand-mark{width:46px;height:46px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1rem;flex:0 0 46px}
.jyp-modal-head strong{display:block;font-size:1.02rem;line-height:1.2}
.jyp-modal-head small{color:rgba(255,255,255,.78);font-size:.78rem}
.jyp-modal-body{padding:26px 30px 30px}
.jyp-modal-x{position:absolute;top:14px;right:16px;background:rgba(255,255,255,.18);border:0;width:34px;height:34px;border-radius:50%;font-size:1.3rem;line-height:1;cursor:pointer;color:#fff;z-index:3}
.jyp-modal-x:hover{background:var(--accent);color:#fff}
.jyp-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(120px);background:#1b7a3e;color:#fff;padding:15px 26px;border-radius:999px;font-weight:700;box-shadow:var(--shadow);z-index:130;transition:.5s;max-width:90%;text-align:center}
.jyp-toast.show{transform:translateX(-50%) translateY(0)}

/* Inquiry form fields + validation */
.jyp-inq-form .f{display:grid;gap:5px;margin-bottom:14px}
.jyp-inq-form label{font-weight:600;font-size:.86rem}
.jyp-inq-form .req{color:#e23b3b}
.jyp-inq-form input,.jyp-inq-form select,.jyp-inq-form textarea{border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;font-family:inherit;font-size:.95rem;width:100%;background:#fff;transition:.2s}
.jyp-inq-form input:focus,.jyp-inq-form select:focus,.jyp-inq-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--tint)}
.jyp-inq-form .err-msg{display:none;color:#c0392b;font-size:.76rem;font-weight:600}
.jyp-inq-form .f.invalid input,.jyp-inq-form .f.invalid select{border-color:#e23b3b;background:#fff6f6}
.jyp-inq-form .f.invalid .err-msg{display:block}

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

/* Responsive */
@media(max-width:980px){
  .hero-inner,.split,.contact-grid,.donate{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .stats-band{grid-template-columns:repeat(2,1fr);gap:30px}
  .hero-card{order:-1}
}
@media(max-width:760px){
  .main-nav,.nav-cta .btn,.lang-pills{display:none}
  .nav-toggle{display:flex}
  body.nav-open .main-nav{display:block;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:16px 0}
  body.nav-open .nav-list{flex-direction:column;gap:4px;width:92%;margin:0 auto}
  body.nav-open .nav-list a{padding:12px 6px;border-bottom:1px solid var(--line);display:block}
  .section{padding:64px 0}
  .grid-2,.grid-3,.grid-4,.form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .donate{padding:32px}
}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}.hero-stats{gap:20px}}

/* Mobile-safe inquiry popup (1 Oct 2026): the card never grows past the screen,
   the header + close button stay in view and only the form scrolls. */
.jyp-modal-card{display:flex;flex-direction:column;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px)}
.jyp-modal-head{flex:none}
.jyp-modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body:has(.jyp-modal.open){overflow:hidden}
@media(max-width:560px){
  .jyp-modal{padding:12px}
  .jyp-modal-card{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);border-radius:18px}
  .jyp-modal-head{padding:16px 56px 16px 18px}
  .jyp-modal-body{padding:18px 18px 22px}
  .jyp-inq-form .f{margin-bottom:10px}
  .jyp-inq-form input,.jyp-inq-form select,.jyp-inq-form textarea{padding:10px 12px;font-size:16px}
}
/* Preloader failsafe: even if the page's load event never fires (slow images,
   back/forward cache on phones), the white loader fades out after 2.5s. */
.jyp-preloader{animation:jypPlAway .5s ease 2.5s forwards}
@keyframes jypPlAway{to{opacity:0;visibility:hidden}}
/* Phones (1 Oct 2026): a long stacked grid could never be 15% on screen, so its
   scroll-reveal never fired and the section stayed blank. Show content outright. */
@media(max-width:760px){.reveal{opacity:1;transform:none}}
/* Phone header (1 Oct 2026): with the menu links hidden nothing pushed the
   hamburger right, so it sat next to the logo. Pin it to the right edge, keep the
   bar solid (no blurred ghost behind it) and turn ☰ into ✕ while open. */
@media(max-width:760px){
  .site-header{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-wrap{gap:12px}
  .nav-cta{display:none}
  .nav-toggle{display:flex;margin-left:auto;padding:12px 6px 12px 12px}
  .nav-toggle span{width:26px}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  body.nav-open .main-nav{max-height:calc(100vh - 90px);overflow-y:auto;box-shadow:0 24px 40px -24px rgba(16,32,52,.45)}
}

/* ---- Motiba (MMS) palette: navy → maroon like the logo ---- */
.hero,.cta-banner,.stats-band,.info-card .ic-box.dark,.widget-cta,.jyp-modal-head{background:linear-gradient(135deg,#14206e 0%,#0b1248 55%,#5e1219 100%)}
.hero::before{background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.12),transparent 45%),radial-gradient(circle at 12% 85%,rgba(184,40,42,.35),transparent 42%)}
.hero h1 .gold,.hero-stats .num,.hero-trust strong,.stats-band .num,.breadcrumb a,.hero-card li::before{color:var(--accent-lt)}
.hero .btn-primary,.cta-banner .btn-primary{background:#fff;color:var(--accent);box-shadow:0 10px 26px -12px rgba(0,0,0,.5)}
.hero .btn-primary:hover,.cta-banner .btn-primary:hover{background:var(--accent-lt)}
.site-footer{background:radial-gradient(1200px 400px at 15% 0%,rgba(184,40,42,.12),transparent 60%),linear-gradient(180deg,#0e1650 0%,#070b2e 100%)}
.site-footer h4::after,.footer-accent{background:linear-gradient(90deg,var(--primary),var(--accent),var(--primary))}
.foot-links a::before{color:var(--accent-lt)}
.donate .eyebrow,.donate p{color:#fff!important}
.donate .amts button{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff}
.donate .amts button:hover,.donate .amts .band-amt.is-active{background:#fff!important;color:var(--accent)!important}
.badge-80g{background:rgba(255,255,255,.16)}
.brand-logo{height:64px}
@media(max-width:760px){.brand-logo{height:48px}}
.footer-logo{width:auto;height:72px;background:#fff;border-radius:14px;padding:8px 12px}
.pl-logo{width:200px}

/* Project cost tables */
.cost-wrap{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.cost-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.cost-card h3{margin:0;padding:20px 24px;color:#fff;font-size:1.1rem;background:linear-gradient(135deg,var(--primary),var(--accent))}
.cost-table{width:100%;border-collapse:collapse;font-size:.95rem}
.cost-table th,.cost-table td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cost-table th{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--bg-soft)}
.cost-table td.n,.cost-table th.n{text-align:right;white-space:nowrap;font-weight:700;color:var(--primary)}
.cost-table td.sr{width:42px;color:var(--muted);font-weight:700}
.cost-table tr.total td{background:var(--tint);font-weight:800;color:var(--accent);border-bottom:0}
.cost-words{padding:14px 18px;font-size:.86rem;font-weight:600;color:var(--muted);font-style:italic}
.cost-note{max-width:760px;margin:22px auto 0;text-align:center;color:var(--muted);font-size:.86rem}
.cost-chip{display:inline-flex;gap:6px;align-items:center;margin-top:14px;background:var(--tint);color:var(--accent);font-weight:800;padding:6px 14px;border-radius:999px;font-size:.86rem}
@media(max-width:980px){.cost-wrap{grid-template-columns:1fr}}