*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,sans-serif;color:#10251f;background:#f7f6f0;line-height:1.65}a{text-decoration:none;color:inherit}.c{width:min(1160px,92%);margin:auto}.nav{position:sticky;top:0;z-index:9;background:#f7f6f0ee;backdrop-filter:blur(12px);border-bottom:1px solid #dce5df}.n{height:78px;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:900;letter-spacing:.06em}.links{display:flex;gap:20px;align-items:center;font-weight:700;font-size:14px}.btn{background:#0b5d4a;color:white;padding:11px 18px;border-radius:99px;display:inline-block}.hero,.ph{background:radial-gradient(circle at 80% 20%,#c7a85b35,transparent 25%),linear-gradient(135deg,#f7f6f0,#e8f1eb)}.hero{min-height:78vh;display:grid;align-items:center}.ph{padding:90px 0 70px}.hg{display:grid;grid-template-columns:1.2fr .8fr;gap:55px;align-items:center}.k{color:#0b5d4a;text-transform:uppercase;letter-spacing:.18em;font-weight:900;font-size:12px}h1,h2,h3{font-family:Georgia,serif;line-height:1.12}h1{font-size:clamp(48px,7vw,96px);letter-spacing:-.04em;margin:12px 0}h2{font-size:clamp(34px,4vw,58px);margin:8px 0 22px}h3{font-size:23px}.lead{font-size:19px;color:#5d6e67;max-width:760px}.card{background:white;border:1px solid #dce5df;border-radius:22px;padding:27px;box-shadow:0 8px 30px #10251f0c;transition:.3s}.card:hover{transform:translateY(-6px);box-shadow:0 20px 55px #10251f18}.hero .card{transform:rotate(2deg)}section{padding:86px 0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}.band{background:#0a4639;color:white}.band p{color:#d5e4df}.flow{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:30px}.flow span{padding:16px 8px;border:1px solid #ffffff2c;border-radius:14px;text-align:center}.tag{display:inline-block;padding:7px 11px;border:1px solid #dce5df;border-radius:99px;margin:4px;background:white}.reveal{opacity:0;transform:translateY(20px);transition:.7s}.reveal.on{opacity:1;transform:none}footer{background:#082f27;color:#d8e5e0;padding:50px 0}.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}footer a{display:block;margin:8px 0;color:#c9d9d3}@media(max-width:850px){.links{display:none}.hg,.two,.foot{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.flow{grid-template-columns:1fr 1fr}.hero{padding:70px 0}.hero .card{transform:none}}@media(max-width:560px){.grid{grid-template-columns:1fr}}
/* Enhanced interactive states */
a:not(.brand),button{transition:color .22s ease,background .22s ease,transform .22s ease,box-shadow .22s ease,opacity .22s ease}
.links a:not(.btn){position:relative}
.links a:not(.btn):after,footer a:after{content:"";display:block;width:0;height:2px;background:#c7a85b;transition:width .25s ease}
.links a:not(.btn):hover{color:#0b5d4a;transform:translateY(-1px)}
.links a:not(.btn):hover:after,footer a:hover:after{width:100%}
footer a:hover{color:#fff;transform:translateX(4px)}
.btn:hover{background:#084b3c;transform:translateY(-3px) scale(1.02);box-shadow:0 12px 28px #0b5d4a38}
.card a:hover{color:#0b5d4a}
.research-card{padding:0;overflow:hidden;position:relative}
.research-art{height:190px;position:relative;overflow:hidden;background:linear-gradient(135deg,#0b5d4a,#163f36)}
.research-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease,filter .4s ease}
.research-card:hover .research-art img{transform:scale(1.08)}
.research-art:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#082f2788,transparent 65%);pointer-events:none}
.research-body{padding:25px}
.research-card:hover{transform:translateY(-9px);box-shadow:0 22px 60px #10251f22}
.research-icon{position:absolute;right:16px;bottom:14px;z-index:2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#ffffffdf;color:#0b5d4a;font-size:21px;transition:.3s}
.research-card:hover .research-icon{transform:rotate(8deg) scale(1.08);background:#c7a85b;color:#fff}

/* Contact page v3 */
.contact-hero{position:relative;overflow:hidden}
.contact-hero:after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;border:1px solid #c7a85b66;right:-90px;top:-100px;box-shadow:0 0 0 55px #c7a85b12,0 0 0 110px #0b5d4a0b;animation:contactPulse 6s ease-in-out infinite}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;align-items:stretch}
.adviser-card{position:relative;overflow:hidden}
.adviser-card:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#0b5d4a,#c7a85b)}
.contact-mail{font-size:1.08rem;font-weight:800;color:#0b5d4a;display:inline-block;margin-top:8px}
.contact-mail:hover{color:#9a7a31;transform:translateX(4px)}
.location-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.location-card{position:relative;overflow:hidden;min-height:210px}
.location-card:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;background:#0b5d4a0b;right:-35px;bottom:-35px;transition:.35s}
.location-card:hover:after{transform:scale(1.8);background:#c7a85b18}
.location-card:hover{transform:translateY(-8px) rotate(.25deg)}
.flag{font-size:2rem;display:block;margin-bottom:12px;transition:.3s}
.location-card:hover .flag{transform:translateY(-3px) scale(1.08)}
.contact-lines a{display:block;color:#0b5d4a;font-weight:700;margin-top:5px}
.contact-lines a:hover{color:#9a7a31;transform:translateX(4px)}
.contact-note{border-left:3px solid #c7a85b;padding-left:18px;color:#5d6e67}
@keyframes contactPulse{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.06) rotate(5deg)}}
@media(max-width:850px){.contact-grid,.location-grid{grid-template-columns:1fr}}

/* Adviser-General homepage section */
.adviser-section{position:relative;overflow:hidden;background:linear-gradient(135deg,#f4f7f3 0%,#fbf8ef 100%)}
.adviser-section:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;border:1px solid #c7a85b45;left:-210px;top:40px;box-shadow:0 0 0 70px #c7a85b0b,0 0 0 140px #0b5d4a08;animation:adviserOrbit 8s ease-in-out infinite}
.adviser-wrap{position:relative;z-index:1;display:grid;grid-template-columns:.82fr 1.18fr;gap:64px;align-items:center}
.adviser-photo-wrap{position:relative;max-width:430px;margin:auto}
.adviser-photo-frame{position:relative;border-radius:32px;padding:13px;background:linear-gradient(145deg,#c7a85b,#0b5d4a);box-shadow:0 28px 70px #10251f24;transition:.45s ease}
.adviser-photo-frame:before{content:"";position:absolute;inset:12px;border:1px solid #ffffff55;border-radius:24px;z-index:2;pointer-events:none}
.adviser-photo-frame img{display:block;width:100%;aspect-ratio:1/1.08;object-fit:cover;object-position:center top;border-radius:22px;background:white}
.adviser-photo-wrap:hover .adviser-photo-frame{transform:translateY(-8px) rotate(-1deg);box-shadow:0 34px 80px #10251f30}
.adviser-badge{position:absolute;right:-24px;bottom:28px;background:#fff;border:1px solid #dce5df;border-radius:18px;padding:14px 18px;box-shadow:0 15px 40px #10251f1b;animation:adviserFloat 4s ease-in-out infinite}
.adviser-badge b{display:block;color:#0b5d4a}.adviser-badge span{font-size:12px;color:#687770}
.adviser-copy{position:relative}.adviser-quote{font:clamp(27px,3vw,42px)/1.3 Georgia,serif;margin:18px 0 22px;color:#173a31}
.adviser-excerpt{font-size:17px;color:#5d6e67;max-width:690px}
.adviser-sign{margin-top:25px;padding-top:20px;border-top:1px solid #d8e1dc}.adviser-sign strong{display:block;font:700 21px Georgia,serif}.adviser-sign span{color:#60706a;font-size:14px}
.adviser-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}
.adviser-link{font-weight:800;color:#0b5d4a;display:inline-flex;align-items:center;gap:8px;padding:10px 2px}
.adviser-link:hover{color:#9b7b31;transform:translateX(5px)}
@keyframes adviserFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes adviserOrbit{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(6deg) scale(1.04)}}
@media(max-width:850px){.adviser-wrap{grid-template-columns:1fr;gap:38px}.adviser-badge{right:8px}.adviser-photo-wrap{max-width:360px}}

/* Premium Adviser Message page */
.founder-page{background:#f5f3ec}
.founder-hero{position:relative;overflow:hidden;background:#082f27;color:#fff;padding:105px 0 90px}
.founder-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 22%,#c7a85b30,transparent 25%),linear-gradient(120deg,transparent 50%,#ffffff06 50%)}
.founder-hero:after{content:"";position:absolute;width:520px;height:520px;border:1px solid #c7a85b40;border-radius:50%;right:-180px;top:-150px;box-shadow:0 0 0 70px #c7a85b09,0 0 0 140px #ffffff05}
.founder-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .55fr;gap:65px;align-items:center}
.founder-hero .k{color:#d6bc76}.founder-hero h1{font-size:clamp(50px,6vw,86px);max-width:820px;margin:14px 0 24px}
.founder-hero .lead{color:#d6e4df;max-width:690px}
.founder-portrait{position:relative;max-width:360px;margin-left:auto}
.founder-portrait img{width:100%;display:block;aspect-ratio:1/1.08;object-fit:cover;object-position:center top;border-radius:28px;border:8px solid #ffffff10;box-shadow:0 30px 70px #0005}
.founder-portrait:before{content:"";position:absolute;inset:-15px;border:1px solid #c7a85b88;border-radius:36px;transform:rotate(3deg);transition:.45s}
.founder-portrait:hover:before{transform:rotate(-2deg) scale(1.02)}
.founder-portrait img{transition:.45s}.founder-portrait:hover img{transform:translateY(-5px)}
.founder-id{margin-top:24px;text-align:right}.founder-id strong{display:block;font:700 21px Georgia,serif}.founder-id span{color:#cbdcd6;font-size:14px}
.message-layout{display:grid;grid-template-columns:260px minmax(0,760px);gap:70px;justify-content:center;align-items:start}
.message-aside{position:sticky;top:112px}
.message-aside .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.18em;font-weight:900;color:#9a7b32}
.message-aside blockquote{margin:15px 0 25px;font:25px/1.4 Georgia,serif;color:#173a31}
.message-rule{width:58px;height:2px;background:#c7a85b;margin:22px 0}
.message-body{background:#fff;border:1px solid #e2e6e1;border-radius:28px;padding:clamp(30px,5vw,66px);box-shadow:0 20px 70px #10251f0e;position:relative}
.message-body:before{content:"“";position:absolute;right:35px;top:10px;font:110px Georgia,serif;color:#c7a85b18}
.message-body .opening{font:24px/1.65 Georgia,serif;color:#23483e}
.message-body p{font-size:17px;line-height:1.9;color:#4e615a;margin:0 0 24px}
.message-body .emphasis{margin:38px -22px;padding:28px 32px;border-left:3px solid #c7a85b;background:#f8f5eb;font:25px/1.55 Georgia,serif;color:#173a31}
.message-body .closing{font:22px/1.6 Georgia,serif;color:#173a31;margin-top:36px}
.signature-box{margin-top:48px;padding-top:28px;border-top:1px solid #dde4df;display:flex;justify-content:space-between;align-items:end;gap:20px}
.signature-box strong{font:700 24px Georgia,serif}.signature-box span{display:block;color:#6b7974;font-size:14px;margin-top:4px}
.signature-mark{font:italic 28px Georgia,serif;color:#0b5d4a;opacity:.75}
.founder-end{padding-top:0}.founder-end .cta{position:relative;overflow:hidden}.founder-end .cta:after{content:"WIQ";position:absolute;right:35px;bottom:-35px;font:900 120px Georgia,serif;color:#ffffff09}
@media(max-width:900px){.founder-hero-grid{grid-template-columns:1fr}.founder-portrait{margin:20px auto 0;max-width:310px}.founder-id{text-align:center}.message-layout{grid-template-columns:1fr;gap:30px}.message-aside{position:static;max-width:650px}.message-body .emphasis{margin:30px 0}.signature-box{align-items:start;flex-direction:column}}

/* Premium WIQ Model section */
.wiq-model{position:relative;overflow:hidden;background:linear-gradient(135deg,#073b32 0%,#0a5647 58%,#073b32 100%);color:#fff;padding:105px 0 112px}
.wiq-model:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 18%,#c7a85b28,transparent 24%),radial-gradient(circle at 12% 85%,#ffffff0b,transparent 26%)}
.wiq-model:after{content:"WIQ";position:absolute;right:-25px;bottom:-100px;font:900 260px/1 Georgia,serif;color:#ffffff08;letter-spacing:-.08em}
.model-head{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:end;margin-bottom:56px}
.model-head .k{color:#d9be76}
.model-head h2{color:#fff;margin-bottom:0;max-width:760px}
.model-intro{color:#cfe0da;font-size:17px;max-width:480px;margin:0 0 8px auto}
.model-track{position:relative;z-index:2;display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.model-track:before{content:"";position:absolute;left:6%;right:6%;top:39px;height:1px;background:linear-gradient(90deg,transparent,#c7a85b88 12%,#c7a85b88 88%,transparent);z-index:0}
.model-step{position:relative;z-index:1;text-align:center;transition:.35s ease}
.model-dot{width:78px;height:78px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;background:#0a493e;border:1px solid #c7a85b88;box-shadow:0 0 0 7px #0a5044,0 10px 30px #0002;color:#e2c981;font:700 20px Georgia,serif;transition:.35s ease}
.model-step h3{font-family:Arial,sans-serif;font-size:15px;line-height:1.3;margin:0;color:#fff}
.model-step p{font-size:12px;line-height:1.45;color:#bcd1ca;margin:8px auto 0;max-width:135px}
.model-step:hover{transform:translateY(-7px)}
.model-step:hover .model-dot{background:#c7a85b;color:#073b32;border-color:#f2dfa8;transform:scale(1.08);box-shadow:0 0 0 9px #ffffff0d,0 15px 35px #0003}
.model-arrow{position:absolute;right:-13px;top:28px;color:#d2b96e;font-size:18px;opacity:.8}
.model-statement{position:relative;z-index:2;margin-top:62px;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:24px 28px;border:1px solid #ffffff1f;border-radius:20px;background:#ffffff0a;backdrop-filter:blur(8px)}
.model-statement .seal{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px solid #c7a85b;color:#d9be76;font:700 13px Georgia,serif}
.model-statement p{margin:0;color:#d7e5e0;font:20px/1.5 Georgia,serif}
.model-statement a{color:#e2c981;font-weight:800;white-space:nowrap}
.model-statement a:hover{color:#fff;transform:translateX(4px)}
@media(max-width:1000px){.model-track{grid-template-columns:repeat(4,1fr);row-gap:36px}.model-track:before{display:none}.model-arrow{display:none}}
@media(max-width:760px){.model-head{grid-template-columns:1fr;gap:18px}.model-intro{margin:0}.model-track{grid-template-columns:repeat(2,1fr)}.model-statement{grid-template-columns:auto 1fr}.model-statement a{grid-column:2}.wiq-model:after{font-size:170px}}

/* Cinematic homepage opening sequence */
.intro-screen{position:fixed;inset:0;z-index:9999;background:#020806;overflow:hidden;display:grid;place-items:center;color:#fff;transition:opacity .9s ease,visibility .9s ease}
.intro-screen.intro-out{opacity:0;visibility:hidden;pointer-events:none}
.intro-sky{position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,#174c3b 0%,#071a15 38%,#010504 78%);opacity:.72}
.intro-mosque{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);width:min(1100px,100vw);height:78vh;opacity:.98}
.intro-dome{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:72%;height:82%;background:#010403;border-radius:50% 50% 0 0/38% 38% 0 0;box-shadow:0 -1px 0 #ffffff0b}
.intro-dome:before{content:"";position:absolute;left:50%;top:-72px;transform:translateX(-50%);width:4px;height:85px;background:#0b1712}
.intro-dome:after{content:"☾";position:absolute;left:50%;top:-123px;transform:translateX(-50%);font-size:65px;color:#c9ab5d;text-shadow:0 0 24px #c9ab5d44}
.intro-window{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:125px;height:205px;background:#e8c977;border-radius:68px 68px 8px 8px;box-shadow:0 0 30px #e7c66d,0 0 75px #e7c66d99,0 0 150px #e7c66d55;animation:windowGlow 3.8s ease-in-out both}
.intro-window:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:5px;background:#19271e88;transform:translateX(-50%)}
.intro-window:after{content:"";position:absolute;left:0;right:0;top:47%;height:5px;background:#19271e88}
.light-ray{position:absolute;left:50%;top:47%;transform-origin:50% 0;transform:translateX(-50%);width:620px;height:55vh;background:linear-gradient(to bottom,#f4d9897d,#e5c87322 62%,transparent);clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);filter:blur(8px);opacity:0;animation:rayReveal 4.2s .45s ease-out forwards}
.light-dust{position:absolute;inset:0;background-image:radial-gradient(circle,#f8e7ad 0 1px,transparent 1.5px);background-size:73px 67px;opacity:0;animation:dustReveal 2.5s 1.3s ease forwards}
.intro-copy{position:relative;z-index:5;text-align:center;margin-top:13vh;opacity:0;transform:translateY(18px);animation:introTitle 1.3s 2.45s ease forwards}
.intro-copy .intro-mark{display:inline-grid;place-items:center;width:58px;height:58px;border:1px solid #d3b767;border-radius:50%;color:#e2c97f;font:700 17px Georgia,serif;margin-bottom:18px;box-shadow:0 0 30px #c7a85b22}
.intro-copy h1{font-size:clamp(38px,6vw,76px);letter-spacing:.025em;margin:0;color:#fff;text-shadow:0 4px 35px #000}
.intro-copy p{margin:13px 0 0;color:#dbc989;text-transform:uppercase;letter-spacing:.24em;font-size:11px;font-weight:800}
.intro-skip{position:absolute;right:28px;bottom:24px;z-index:8;border:1px solid #ffffff35;background:#ffffff08;color:#d7e2dd;border-radius:99px;padding:9px 14px;cursor:pointer;font:600 12px Arial;transition:.25s}
.intro-skip:hover{background:#fff;color:#0b4438;transform:translateY(-2px)}
@keyframes windowGlow{0%{opacity:.08;filter:brightness(.45)}35%{opacity:.75}100%{opacity:1;filter:brightness(1.15)}}
@keyframes rayReveal{0%{opacity:0;transform:translateX(-50%) scaleX(.15)}45%{opacity:.55}100%{opacity:.9;transform:translateX(-50%) scaleX(1)}}
@keyframes dustReveal{to{opacity:.18}}
@keyframes introTitle{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.intro-screen{display:none}}
@media(max-width:650px){.intro-mosque{height:72vh}.intro-dome{width:105%;height:74%}.intro-window{width:92px;height:160px}.light-ray{width:390px}.intro-copy{margin-top:8vh}.intro-copy p{letter-spacing:.14em}}

/* V10 — cinematic architectural intro */
.cine-intro{position:fixed;inset:0;z-index:10000;overflow:hidden;background:#020605;color:#fff;transition:opacity 1.1s cubic-bezier(.4,0,.2,1),visibility 1.1s}
.cine-intro.exit{opacity:0;visibility:hidden;pointer-events:none}
.cine-bg{position:absolute;inset:-5%;background:radial-gradient(ellipse at 50% 44%,#153a30 0,#071a15 32%,#020706 66%,#000 100%);transform:scale(1.08);animation:cinePush 7s ease-out forwards}
.cine-vignette{position:absolute;inset:0;box-shadow:inset 0 0 180px 80px #000;pointer-events:none;z-index:7}
.arch{position:absolute;left:50%;bottom:-10vh;transform:translateX(-50%);width:min(1050px,110vw);height:96vh}
.arch-wall{position:absolute;inset:0;background:#020806;clip-path:polygon(0 100%,0 36%,14% 36%,14% 25%,20% 25%,20% 36%,31% 36%,31% 21%,37% 21%,37% 36%,43% 36%,43% 18%,50% 7%,57% 18%,57% 36%,63% 36%,63% 21%,69% 21%,69% 36%,80% 36%,80% 25%,86% 25%,86% 36%,100% 36%,100% 100%)}
.arch-dome{position:absolute;left:50%;top:9%;transform:translateX(-50%);width:36%;height:26%;background:#020806;border-radius:50% 50% 7% 7%/75% 75% 15% 15%;z-index:2}
.arch-dome:before{content:"";position:absolute;left:50%;top:-57px;width:3px;height:66px;background:#17231e;transform:translateX(-50%)}
.arch-crescent{position:absolute;left:50%;top:-105px;transform:translateX(-50%);font:58px Georgia,serif;color:#c8a95b;text-shadow:0 0 28px #c8a95b44}
.cine-window{position:absolute;z-index:3;left:50%;top:39%;transform:translate(-50%,-50%);width:138px;height:225px;overflow:hidden;background:linear-gradient(#fff0b5,#d4a94b);border:9px solid #09110e;border-radius:72px 72px 5px 5px;box-shadow:0 0 0 1px #c7a85b55,0 0 40px #f4d57d99,0 0 120px #d6ad5060;opacity:.04;animation:cineWindow 2.4s .35s cubic-bezier(.2,.7,.2,1) forwards}
.cine-window:before,.cine-window:after{content:"";position:absolute;background:#152019aa;z-index:2}.cine-window:before{width:5px;top:0;bottom:0;left:50%}.cine-window:after{height:5px;left:0;right:0;top:48%}
.cine-window-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#fffbdc,#f0cf72 45%,#bf8e2f);animation:innerGlow 2.8s ease-in-out infinite alternate}
.cine-beam{position:absolute;z-index:1;left:50%;top:38%;width:min(940px,105vw);height:70vh;transform:translateX(-50%) scaleX(.08);transform-origin:50% 0;clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);background:linear-gradient(to bottom,#ffe9a487,#e4bd5b35 48%,transparent 94%);filter:blur(12px);opacity:0;animation:cineBeam 3.6s 1.15s cubic-bezier(.16,.7,.25,1) forwards}
.cine-beam-core{position:absolute;z-index:2;left:50%;top:38%;width:360px;height:58vh;transform:translateX(-50%) scaleX(.1);transform-origin:50% 0;clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);background:linear-gradient(#fff1b0a8,#e9c46522,transparent);filter:blur(5px);opacity:0;animation:cineBeamCore 3s 1.45s ease-out forwards}
.cine-particles{position:absolute;z-index:4;inset:0;opacity:0;animation:particlesIn 2s 1.9s forwards}
.cine-particles i{position:absolute;width:2px;height:2px;border-radius:50%;background:#ffeab0;box-shadow:0 0 7px #ffeab0;animation:dustFloat 4.8s ease-in-out infinite}
.cine-title{position:absolute;z-index:8;left:50%;top:51%;width:min(980px,90vw);transform:translate(-50%,-50%);text-align:center}
.cine-emblem{width:64px;height:64px;margin:0 auto 20px;border:1px solid #d3b86c;border-radius:50%;display:grid;place-items:center;font:700 16px Georgia,serif;color:#e2cb88;opacity:0;transform:scale(.7) rotate(-12deg);animation:emblemIn 1.1s 2.7s ease forwards;box-shadow:0 0 45px #c7a85b22}
.cine-title-line{overflow:hidden;padding:3px 0 10px}
.cine-title h1{margin:0;font-size:clamp(42px,6.4vw,88px);font-weight:500;letter-spacing:.015em;color:#fff;text-shadow:0 7px 45px #000;transform:translateY(115%);opacity:0;animation:titleRise 1.35s 3.05s cubic-bezier(.18,.8,.22,1) forwards}
.cine-goldline{width:0;height:1px;background:linear-gradient(90deg,transparent,#d4b96d,transparent);margin:10px auto 14px;animation:goldLine 1.25s 3.65s ease forwards}
.cine-tagline{margin:0;color:#e3d39e;font-size:11px;font-weight:800;letter-spacing:.34em;text-transform:uppercase;opacity:0;transform:translateY(10px);animation:tagIn 1.1s 3.85s ease forwards}
.cine-scroll{position:absolute;z-index:9;left:50%;bottom:25px;transform:translateX(-50%);font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:#ffffff70;opacity:0;animation:tagIn .8s 4.4s forwards}
.cine-skip{position:absolute;z-index:10;right:28px;top:26px;border:1px solid #ffffff25;background:#07120e66;backdrop-filter:blur(8px);color:#dce7e2;border-radius:99px;padding:9px 15px;font:600 11px Arial;letter-spacing:.08em;cursor:pointer;opacity:0;animation:tagIn .8s 1s forwards}
.cine-skip:hover{background:#fff;color:#0a4639;transform:translateY(-2px)}
@keyframes cinePush{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes cineWindow{0%{opacity:.04;filter:brightness(.3)}55%{opacity:.72}100%{opacity:1;filter:brightness(1.08)}}
@keyframes innerGlow{from{filter:brightness(.9)}to{filter:brightness(1.2)}}
@keyframes cineBeam{0%{opacity:0;transform:translateX(-50%) scaleX(.08)}45%{opacity:.42}100%{opacity:.82;transform:translateX(-50%) scaleX(1)}}
@keyframes cineBeamCore{to{opacity:.58;transform:translateX(-50%) scaleX(1)}}
@keyframes particlesIn{to{opacity:.55}}
@keyframes dustFloat{0%,100%{transform:translate(0,0);opacity:.15}50%{transform:translate(12px,-35px);opacity:.85}}
@keyframes emblemIn{to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes titleRise{to{opacity:1;transform:translateY(0)}}
@keyframes goldLine{to{width:min(620px,68vw)}}
@keyframes tagIn{to{opacity:1;transform:translateY(0)}}
@media(max-width:650px){.arch{width:150vw;height:88vh}.cine-window{width:100px;height:170px}.cine-title{top:54%}.cine-tagline{letter-spacing:.18em;line-height:1.8}.cine-vignette{box-shadow:inset 0 0 100px 45px #000}}
@media(prefers-reduced-motion:reduce){.cine-intro{display:none}}

/* V11 — Islamic mashrabiya window matching supplied reference */
.cine-intro{background:#020a12}
.cine-bg{background:radial-gradient(ellipse at 50% 40%,#123c5b 0,#071c2c 38%,#020910 72%,#000 100%)}
.arch-wall{background:#020b12}
.arch-dome{background:#020b12}
.cine-window{top:38%;width:190px;height:285px;border:10px solid #10191c;border-radius:96px 96px 4px 4px;background:#dceeff;box-shadow:0 0 0 2px #4b6a78,0 0 35px #a9dcff88,0 0 110px #6bbcff45;animation:cineWindowBlue 2.5s .35s cubic-bezier(.2,.7,.2,1) forwards}
.cine-window:before,.cine-window:after{display:none}
.cine-window-glow{background:linear-gradient(135deg,#f2fbff 0%,#b8e1ff 45%,#79bfe9 100%);animation:innerBlue 2.8s ease-in-out infinite alternate}
.cine-window .mashrabiya{position:absolute;inset:7px;z-index:4;border-radius:83px 83px 2px 2px;overflow:hidden;background-color:#0a1720;background-image:radial-gradient(circle at center,#b9e4ff 0 2px,transparent 2.4px),radial-gradient(circle at center,transparent 0 7px,#b9e4ff 7.5px 8.5px,transparent 9px),linear-gradient(45deg,transparent 46%,#b9e4ff 47% 53%,transparent 54%),linear-gradient(-45deg,transparent 46%,#b9e4ff 47% 53%,transparent 54%);background-size:24px 24px,24px 24px,24px 24px,24px 24px;opacity:.94;box-shadow:inset 0 0 18px #000}
.cine-window .mashrabiya:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:8px;background:#111b1f;transform:translateX(-50%);box-shadow:-53px 0 #111b1f,53px 0 #111b1f}
.cine-window .mashrabiya:after{content:"";position:absolute;left:0;right:0;top:52%;height:8px;background:#111b1f;box-shadow:0 72px #111b1f}
.cine-beam{top:39%;width:min(1150px,115vw);height:72vh;background:linear-gradient(to bottom,#d9efff9a,#86c9f64a 46%,#6bbcf21c 76%,transparent 96%);filter:blur(11px);clip-path:polygon(46% 0,54% 0,96% 100%,8% 100%)}
.cine-beam-core{top:39%;width:520px;height:60vh;background:linear-gradient(#eef9ffc0,#a7dafa42,transparent);filter:blur(6px)}
.cine-particles i{background:#cdeaff;box-shadow:0 0 7px #b7e1ff}
.cine-title{top:55%}
.cine-emblem{border-color:#c7a85b;color:#e2cb88;background:#03101988;backdrop-filter:blur(6px)}
@keyframes cineWindowBlue{0%{opacity:.03;filter:brightness(.25)}55%{opacity:.72;filter:brightness(.8)}100%{opacity:1;filter:brightness(1.16)}}
@keyframes innerBlue{from{filter:brightness(.92)}to{filter:brightness(1.25)}}
@media(max-width:650px){.cine-window{width:132px;height:215px;border-width:7px}.cine-window .mashrabiya{background-size:19px 19px}.cine-window .mashrabiya:before{box-shadow:-38px 0 #111b1f,38px 0 #111b1f}.cine-title{top:57%}}

/* =========================================================
   Global mosque-window light effect
   Applied by app.js to the hero/header on every page.
   Decorative only; never blocks links or page content.
========================================================= */
.hero,.ph,.founder-hero{position:relative;overflow:hidden;isolation:isolate}
.hero>.c,.ph>.c,.founder-hero>.c,
.hero>.hg,.ph>.hg,.founder-hero>.founder-hero-grid{position:relative;z-index:2}

.mosque-window-effect{
  position:absolute;
  z-index:0;
  right:clamp(-125px,-5vw,-40px);
  top:50%;
  width:clamp(300px,32vw,520px);
  height:clamp(390px,49vw,690px);
  transform:translateY(-50%);
  pointer-events:none;
  opacity:.18;
  filter:saturate(.72) sepia(.18) contrast(1.06);
  background:
    linear-gradient(90deg,rgba(247,246,240,.04),rgba(247,246,240,.2)),
    url('mosque-window-reference.jpeg') center/cover no-repeat;
  clip-path:polygon(50% 0,61% 4%,72% 12%,82% 24%,89% 38%,92% 53%,92% 100%,8% 100%,8% 53%,11% 38%,18% 24%,28% 12%,39% 4%);
  -webkit-mask-image:linear-gradient(to left,#000 58%,rgba(0,0,0,.92) 76%,transparent 100%);
  mask-image:linear-gradient(to left,#000 58%,rgba(0,0,0,.92) 76%,transparent 100%);
}

/* soft projected-light texture inspired by a mosque lattice window */
.mosque-window-effect::after{
  content:"";
  position:absolute;
  width:125%;
  height:54%;
  right:58%;
  bottom:-8%;
  transform:skewX(-18deg) rotate(-7deg);
  opacity:.42;
  background:
    radial-gradient(circle at 18px 18px,rgba(199,168,91,.28) 0 3px,transparent 3.5px) 0 0/36px 36px,
    radial-gradient(circle at 9px 9px,rgba(11,93,74,.14) 0 2px,transparent 2.5px) 0 0/18px 18px;
  filter:blur(.25px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%,#000 70%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 28%,#000 70%,transparent 100%);
}

/* Keep the effect elegant on dark founder hero */
.founder-hero .mosque-window-effect{
  opacity:.24;
  filter:saturate(.55) sepia(.35) brightness(1.18) contrast(1.05);
  mix-blend-mode:screen;
}

/* Contact page already has its own rings; keep this one quieter. */
.contact-hero .mosque-window-effect{opacity:.13}

@media(max-width:850px){
  .mosque-window-effect{
    right:-145px;
    width:360px;
    height:500px;
    opacity:.11;
  }
  .mosque-window-effect::after{opacity:.24}
}

@media(max-width:560px){
  .mosque-window-effect{
    right:-185px;
    width:330px;
    height:455px;
    opacity:.08;
  }
  .mosque-window-effect::after{display:none}
}

@media(prefers-reduced-motion:reduce){
  .mosque-window-effect{transform:translateY(-50%)}
}

/* =========================================================
   V13 — upgraded mosque-window image effect
   Uses a new custom decorative image (not the user reference)
   for a more elegant, premium visual treatment.
========================================================= */
.mosque-window-effect{
  position:absolute;
  z-index:0;
  right:clamp(-38px,-1vw,12px);
  top:50%;
  width:clamp(250px,27vw,430px);
  height:clamp(390px,48vw,700px);
  transform:translateY(-50%);
  pointer-events:none;
  background:url('ornate-mosque-window.png') center/contain no-repeat;
  opacity:.56;
  filter:drop-shadow(0 16px 36px rgba(11,93,74,.14)) drop-shadow(0 10px 65px rgba(199,168,91,.18));
}

.mosque-window-effect::before{
  content:"";
  position:absolute;
  inset:-12% -10% -8% -10%;
  border-radius:50%;
  background:
    radial-gradient(circle at 52% 42%,rgba(255,248,228,.68) 0 12%,rgba(255,238,184,.30) 26%,rgba(199,168,91,.10) 44%,transparent 65%),
    radial-gradient(circle at 55% 55%,rgba(11,93,74,.06),transparent 65%);
  filter:blur(22px);
  z-index:-2;
}

/* Projected patterned light inspired by a mosque window */
.mosque-window-effect::after{
  content:"";
  position:absolute;
  right:38%;
  bottom:6%;
  width:165%;
  height:52%;
  transform:skewX(-16deg) rotate(-7deg);
  background:
    radial-gradient(circle at 18px 18px,rgba(199,168,91,.16) 0 3px,transparent 3.6px) 0 0/40px 40px,
    radial-gradient(circle at 9px 9px,rgba(255,255,255,.24) 0 2.2px,transparent 2.8px) 0 0/20px 20px,
    linear-gradient(90deg,rgba(255,245,210,.34),rgba(240,225,175,.16) 42%,rgba(199,168,91,.06) 68%,transparent 100%);
  opacity:.55;
  filter:blur(1px);
  clip-path:polygon(0 40%,30% 18%,100% 0,100% 82%,0 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.96) 18%,rgba(0,0,0,.88) 62%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.96) 18%,rgba(0,0,0,.88) 62%,transparent 100%);
}

.hero .mosque-window-effect,
.ph .mosque-window-effect{opacity:.5}

.founder-hero .mosque-window-effect{
  right:clamp(-24px,0vw,16px);
  opacity:.72;
  filter:brightness(1.15) saturate(.95) drop-shadow(0 0 26px rgba(255,240,190,.18)) drop-shadow(0 0 70px rgba(89,160,214,.16));
  mix-blend-mode:screen;
}
.founder-hero .mosque-window-effect::after{
  opacity:.68;
  background:
    radial-gradient(circle at 18px 18px,rgba(255,231,160,.20) 0 3px,transparent 3.6px) 0 0/40px 40px,
    radial-gradient(circle at 9px 9px,rgba(189,228,255,.17) 0 2.2px,transparent 2.8px) 0 0/20px 20px,
    linear-gradient(90deg,rgba(246,237,199,.26),rgba(145,205,255,.16) 46%,rgba(199,168,91,.06) 70%,transparent 100%);
}

.contact-hero .mosque-window-effect{opacity:.35}

@media(max-width:980px){
  .mosque-window-effect{
    right:-46px;
    width:clamp(220px,34vw,320px);
    height:clamp(320px,54vw,470px);
    opacity:.42;
  }
  .mosque-window-effect::after{width:145%;height:42%;opacity:.36}
}

@media(max-width:700px){
  .mosque-window-effect{
    right:-68px;
    top:54%;
    width:210px;
    height:330px;
    opacity:.22;
  }
  .mosque-window-effect::after,
  .mosque-window-effect::before{opacity:.22}
}

/* =========================================================
   V14 — warm stained-glass mosque window with stronger sun rays
   Inspired by the new reference image mood.
========================================================= */
.mosque-window-effect{
  background:url('mosque-window-sunrays.png') center/contain no-repeat;
  right:clamp(-10px,1vw,24px);
  top:52%;
  width:clamp(270px,30vw,460px);
  height:clamp(420px,54vw,760px);
  opacity:.58;
  filter:drop-shadow(0 10px 30px rgba(86,31,2,.14)) drop-shadow(0 18px 80px rgba(255,183,84,.25));
}
.mosque-window-effect::before{
  inset:-8% -8% -12% -8%;
  background:
    radial-gradient(circle at 50% 28%,rgba(255,252,242,.78) 0 8%,rgba(255,214,120,.30) 24%,rgba(255,163,61,.14) 46%,transparent 70%),
    radial-gradient(circle at 52% 62%,rgba(255,174,78,.10),transparent 68%);
  filter:blur(24px);
}
.mosque-window-effect::after{
  right:44%;
  bottom:-2%;
  width:175%;
  height:58%;
  transform:skewX(-22deg) rotate(-9deg);
  background:
    radial-gradient(circle at 18px 18px,rgba(255,225,155,.18) 0 3px,transparent 3.5px) 0 0/42px 42px,
    radial-gradient(circle at 9px 9px,rgba(255,248,235,.23) 0 2px,transparent 2.6px) 0 0/21px 21px,
    linear-gradient(90deg,rgba(255,245,215,.38),rgba(255,207,109,.18) 40%,rgba(255,166,69,.08) 70%,transparent 100%);
  opacity:.62;
  filter:blur(1.2px);
  clip-path:polygon(0 36%,25% 16%,100% 0,100% 90%,0 100%);
}
.hero .mosque-window-effect,
.ph .mosque-window-effect{opacity:.55}
.contact-hero .mosque-window-effect{opacity:.4}
.founder-hero .mosque-window-effect{
  opacity:.72;
  filter:brightness(1.08) saturate(1) drop-shadow(0 0 34px rgba(255,214,132,.16)) drop-shadow(0 0 92px rgba(255,170,67,.22));
}
@media(max-width:980px){
  .mosque-window-effect{
    right:-34px;
    width:clamp(220px,32vw,340px);
    height:clamp(340px,54vw,520px);
    opacity:.44;
  }
  .mosque-window-effect::after{width:148%;height:44%;opacity:.42}
}
@media(max-width:700px){
  .mosque-window-effect{
    right:-78px;
    top:56%;
    width:220px;
    height:340px;
    opacity:.24;
  }
  .mosque-window-effect::after{opacity:.24}
}

/* =========================================================
   V14 — animated watermark using the user's suggested photo
   Added to every page header and animated softly in background.
========================================================= */
.hero,.ph,.founder-hero{position:relative;overflow:hidden;isolation:isolate}
.hero>.c,.hero>.hg,.ph>.c,.founder-hero>.c,.founder-hero>.founder-hero-grid{position:relative;z-index:2}

.mosque-window-effect{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.16;
  clip-path:none;
  right:auto;top:auto;width:auto;height:auto;transform:none;
  background:
    linear-gradient(90deg,
      rgba(247,246,240,.98) 0%,
      rgba(247,246,240,.92) 24%,
      rgba(247,246,240,.72) 38%,
      rgba(247,246,240,.36) 56%,
      rgba(247,246,240,.14) 72%,
      rgba(247,246,240,0) 100%),
    url('mosque-window-watermark.jpg') center center / cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.95) 32%,rgba(0,0,0,.8) 58%,rgba(0,0,0,.46) 76%,transparent 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.95) 32%,rgba(0,0,0,.8) 58%,rgba(0,0,0,.46) 76%,transparent 100%);
  filter:saturate(1.05) contrast(1.03) brightness(1.03);
  animation:wiqWatermarkDrift 20s ease-in-out infinite alternate;
}

.mosque-window-effect::before{
  content:"";
  position:absolute;
  inset:-2%;
  background:url('mosque-window-watermark.jpg') center center / cover no-repeat;
  opacity:.22;
  filter:blur(14px) brightness(1.12);
  mix-blend-mode:screen;
  animation:wiqWatermarkGlow 10s ease-in-out infinite alternate;
}

.mosque-window-effect::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 32%, rgba(255,242,196,.26) 0 6%, transparent 18%),
    linear-gradient(115deg, transparent 0 40%, rgba(255,229,168,.12) 49%, transparent 58%),
    linear-gradient(97deg, transparent 0 28%, rgba(255,235,185,.10) 36%, transparent 46%),
    linear-gradient(80deg, transparent 0 56%, rgba(255,228,160,.12) 64%, transparent 72%);
  opacity:.58;
  mix-blend-mode:screen;
  filter:blur(7px);
  animation:wiqRayPulse 8.5s ease-in-out infinite alternate;
}

.hero .mosque-window-effect,
.ph .mosque-window-effect{opacity:.18}

.founder-hero .mosque-window-effect{
  opacity:.25;
  background:
    linear-gradient(90deg,
      rgba(8,47,39,.96) 0%,
      rgba(8,47,39,.86) 26%,
      rgba(8,47,39,.64) 40%,
      rgba(8,47,39,.30) 58%,
      rgba(8,47,39,.10) 74%,
      rgba(8,47,39,0) 100%),
    url('mosque-window-watermark.jpg') center center / cover no-repeat;
  mix-blend-mode:screen;
  filter:saturate(1.04) brightness(1.12) contrast(1.04);
}
.founder-hero .mosque-window-effect::before{opacity:.28;filter:blur(18px) brightness(1.18)}
.founder-hero .mosque-window-effect::after{opacity:.72}

.contact-hero .mosque-window-effect{opacity:.14}

@keyframes wiqWatermarkDrift{
  0%{transform:scale(1) translate3d(0,0,0)}
  50%{transform:scale(1.03) translate3d(1.2%, -1.2%, 0)}
  100%{transform:scale(1.06) translate3d(-1%, 1%, 0)}
}
@keyframes wiqWatermarkGlow{
  0%{opacity:.12;transform:scale(1)}
  100%{opacity:.28;transform:scale(1.04)}
}
@keyframes wiqRayPulse{
  0%{opacity:.34;transform:translateX(-1.5%) scale(1)}
  100%{opacity:.66;transform:translateX(1.5%) scale(1.03)}
}

@media(max-width:980px){
  .mosque-window-effect{opacity:.14;background-position:center right 18%}
  .mosque-window-effect::before{opacity:.18}
}
@media(max-width:700px){
  .mosque-window-effect{
    opacity:.11;
    background-position:center center;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.70) 48%,transparent 100%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.70) 48%,transparent 100%);
  }
  .mosque-window-effect::after{opacity:.34}
  .founder-hero .mosque-window-effect{opacity:.18}
}

/* =========================================================
   V15 — HIGH-VISIBILITY animated mosque photo watermark
   Stronger, clearer version after visibility review.
========================================================= */
.hero,.ph,.founder-hero{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
}
.hero>.c,.hero>.hg,.ph>.c,.founder-hero>.c,.founder-hero>.founder-hero-grid{
  position:relative !important;
  z-index:3 !important;
}

.hero .mosque-window-effect,
.ph .mosque-window-effect,
.founder-hero .mosque-window-effect{
  position:absolute !important;
  inset:-7% -3% !important;
  z-index:0 !important;
  width:auto !important;
  height:auto !important;
  right:-3% !important;
  top:-7% !important;
  transform:none !important;
  clip-path:none !important;
  opacity:.42 !important;
  pointer-events:none !important;
  background-image:url('mosque-window-watermark.jpg') !important;
  background-size:cover !important;
  background-position:center 52% !important;
  background-repeat:no-repeat !important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 14%,rgba(0,0,0,.9) 42%,#000 100%) !important;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 14%,rgba(0,0,0,.9) 42%,#000 100%) !important;
  filter:saturate(1.12) contrast(1.08) brightness(1.05) !important;
  mix-blend-mode:normal !important;
  will-change:transform,opacity,filter !important;
  animation:wiqWatermarkVisible 12s ease-in-out infinite alternate !important;
}

/* add a readable fade under page text while keeping the photo clearly visible */
.hero .mosque-window-effect::before,
.ph .mosque-window-effect::before,
.founder-hero .mosque-window-effect::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  opacity:1 !important;
  background:linear-gradient(90deg,
    rgba(247,246,240,.96) 0%,
    rgba(247,246,240,.88) 23%,
    rgba(247,246,240,.60) 42%,
    rgba(247,246,240,.16) 66%,
    rgba(247,246,240,0) 100%) !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  animation:none !important;
}

/* stronger animated sunlight shimmer */
.hero .mosque-window-effect::after,
.ph .mosque-window-effect::after,
.founder-hero .mosque-window-effect::after{
  content:"" !important;
  position:absolute !important;
  inset:-8% -5% !important;
  background:
    radial-gradient(circle at 50% 33%,rgba(255,247,211,.58) 0 5%,rgba(255,225,145,.22) 15%,transparent 30%),
    linear-gradient(112deg,transparent 0 43%,rgba(255,224,145,.22) 48%,transparent 54%),
    linear-gradient(96deg,transparent 0 55%,rgba(255,236,180,.20) 60%,transparent 66%) !important;
  opacity:.78 !important;
  mix-blend-mode:screen !important;
  filter:blur(5px) !important;
  animation:wiqSunPulseVisible 5.8s ease-in-out infinite alternate !important;
}

/* page-specific tuning */
.hero .mosque-window-effect{opacity:.46 !important}
.ph .mosque-window-effect{opacity:.40 !important}
.contact-hero .mosque-window-effect{opacity:.34 !important}

.founder-hero .mosque-window-effect{
  opacity:.48 !important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 13%,rgba(0,0,0,.92) 40%,#000 100%) !important;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 13%,rgba(0,0,0,.92) 40%,#000 100%) !important;
  filter:saturate(1.08) contrast(1.07) brightness(.92) !important;
}
.founder-hero .mosque-window-effect::before{
  background:linear-gradient(90deg,
    rgba(8,47,39,.96) 0%,
    rgba(8,47,39,.82) 24%,
    rgba(8,47,39,.54) 43%,
    rgba(8,47,39,.13) 69%,
    transparent 100%) !important;
}

@keyframes wiqWatermarkVisible{
  0%{transform:scale(1.00) translate3d(0,0,0);filter:saturate(1.08) contrast(1.05) brightness(1.00)}
  50%{transform:scale(1.045) translate3d(-1.1%,.5%,0);filter:saturate(1.16) contrast(1.09) brightness(1.08)}
  100%{transform:scale(1.08) translate3d(1%,-.7%,0);filter:saturate(1.12) contrast(1.08) brightness(1.04)}
}
@keyframes wiqSunPulseVisible{
  0%{opacity:.42;transform:translate3d(-2%,0,0) scale(1)}
  100%{opacity:.90;transform:translate3d(2%,1%,0) scale(1.035)}
}

@media(max-width:900px){
  .hero .mosque-window-effect,.ph .mosque-window-effect,.founder-hero .mosque-window-effect{
    inset:-4% !important;
    opacity:.30 !important;
    background-position:62% center !important;
    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.15),rgba(0,0,0,.85) 38%,#000 100%) !important;
    mask-image:linear-gradient(90deg,rgba(0,0,0,.15),rgba(0,0,0,.85) 38%,#000 100%) !important;
  }
}
@media(max-width:620px){
  .hero .mosque-window-effect,.ph .mosque-window-effect,.founder-hero .mosque-window-effect{
    opacity:.24 !important;
    background-position:66% center !important;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.88),rgba(0,0,0,.55) 70%,transparent 100%) !important;
    mask-image:linear-gradient(180deg,rgba(0,0,0,.88),rgba(0,0,0,.55) 70%,transparent 100%) !important;
  }
  .hero .mosque-window-effect::before,.ph .mosque-window-effect::before,.founder-hero .mosque-window-effect::before{
    background:linear-gradient(180deg,rgba(247,246,240,.50),rgba(247,246,240,.72) 68%,rgba(247,246,240,.94)) !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .mosque-window-effect,.mosque-window-effect::after{animation:none !important}
}

/* =========================================================
   V16 — stronger glowing window-light effect
   Makes the sunlight/rays from the mosque windows much clearer.
========================================================= */
.hero .mosque-window-effect,
.ph .mosque-window-effect,
.founder-hero .mosque-window-effect{
  overflow:visible !important;
}

.hero .mosque-window-effect::after,
.ph .mosque-window-effect::after,
.founder-hero .mosque-window-effect::after{
  inset:-6% -10% -8% -10% !important;
  background:
    radial-gradient(circle at 50% 15%, rgba(255,250,240,.98) 0 4.8%, rgba(255,240,196,.78) 5.5%, rgba(255,226,158,.42) 11%, rgba(255,214,135,.14) 18%, transparent 28%),
    linear-gradient(72deg, transparent 0 46%, rgba(255,229,162,.22) 49%, rgba(255,247,219,.54) 50.5%, rgba(255,225,148,.18) 52%, transparent 56%),
    linear-gradient(82deg, transparent 0 43%, rgba(255,235,187,.16) 47%, rgba(255,248,225,.42) 49%, rgba(255,233,173,.16) 51%, transparent 56%),
    linear-gradient(92deg, transparent 0 40%, rgba(255,229,162,.14) 44%, rgba(255,251,233,.40) 46%, rgba(255,226,158,.14) 48%, transparent 53%),
    linear-gradient(102deg, transparent 0 39%, rgba(255,229,162,.18) 43%, rgba(255,247,219,.48) 45%, rgba(255,225,148,.18) 47%, transparent 52%),
    linear-gradient(112deg, transparent 0 36%, rgba(255,229,162,.22) 40%, rgba(255,247,219,.56) 41.5%, rgba(255,225,148,.18) 43%, transparent 48%),
    linear-gradient(122deg, transparent 0 34%, rgba(255,229,162,.18) 37%, rgba(255,247,219,.45) 38.5%, rgba(255,225,148,.16) 40%, transparent 45%) !important;
  opacity:.98 !important;
  filter:blur(3px) saturate(1.1) !important;
  mix-blend-mode:screen !important;
  animation:wiqSunRaysStrong 4.8s ease-in-out infinite alternate !important;
}

.hero .mosque-window-effect::before,
.ph .mosque-window-effect::before,
.founder-hero .mosque-window-effect::before{
  box-shadow:
    inset 0 0 140px rgba(255,247,230,.12),
    inset 0 0 260px rgba(255,240,200,.06) !important;
}

.hero::after,
.ph::after,
.founder-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(circle at 50% 15%, rgba(255,252,244,.40) 0 3%, rgba(255,235,176,.18) 7%, transparent 18%),
    linear-gradient(90deg, transparent 0 28%, rgba(255,248,228,.06) 50%, transparent 72%);
  mix-blend-mode:screen;
  animation:wiqHeaderGlow 6s ease-in-out infinite alternate;
}

.founder-hero::after{
  background:
    radial-gradient(circle at 50% 15%, rgba(255,248,232,.32) 0 3%, rgba(255,225,160,.16) 7%, transparent 18%),
    linear-gradient(90deg, transparent 0 28%, rgba(255,248,228,.05) 50%, transparent 72%);
}

@keyframes wiqSunRaysStrong{
  0%{opacity:.72; transform:translate3d(-1.5%,0,0) scale(1); filter:blur(4px) brightness(1.02)}
  100%{opacity:1; transform:translate3d(1.5%,1%,0) scale(1.045); filter:blur(2px) brightness(1.16)}
}

@keyframes wiqHeaderGlow{
  0%{opacity:.55; transform:scale(1)}
  100%{opacity:.95; transform:scale(1.02)}
}

@media(max-width:900px){
  .hero .mosque-window-effect::after,
  .ph .mosque-window-effect::after,
  .founder-hero .mosque-window-effect::after{
    opacity:.82 !important;
    filter:blur(2px) !important;
  }
}

@media(max-width:620px){
  .hero .mosque-window-effect::after,
  .ph .mosque-window-effect::after,
  .founder-hero .mosque-window-effect::after{
    opacity:.58 !important;
  }
  .hero::after,.ph::after,.founder-hero::after{opacity:.65}
}

/* =========================================================
   V17 — live-server intro failsafe
   The intro now dismisses itself via CSS even if app.js is cached,
   blocked, or sessionStorage throws an exception.
========================================================= */
#wiqCineIntro{
  animation:wiqIntroCssFailsafe .65s ease 3s forwards;
}
#wiqCineIntro.exit{
  animation:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
@keyframes wiqIntroCssFailsafe{
  0%{opacity:1;visibility:visible;pointer-events:auto}
  99%{opacity:0;visibility:visible;pointer-events:none}
  100%{opacity:0;visibility:hidden;pointer-events:none}
}

/* =========================================================
   V19 — startup animation redesign
   Left-side mosque window, sunlight sweeping to center,
   and title emerging from the light.
========================================================= */
#wiqCineIntro.cine-intro{
  background:
    radial-gradient(circle at 58% 44%, rgba(31,73,108,.28), transparent 26%),
    radial-gradient(circle at 18% 42%, rgba(84,157,206,.16), transparent 18%),
    linear-gradient(180deg,#03111c 0%,#020b14 42%,#00070d 100%) !important;
}
#wiqCineIntro .cine-bg{
  background:
    radial-gradient(circle at 18% 48%, rgba(122,190,255,.12), transparent 15%),
    radial-gradient(circle at 55% 45%, rgba(123,178,220,.10), transparent 30%),
    radial-gradient(circle at 50% 78%, rgba(0,0,0,.42), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.12));
  animation:cineBgBreathe 2.8s ease-in-out infinite alternate;
}
#wiqCineIntro .arch{position:absolute;inset:0;width:auto;height:auto;transform:none}
#wiqCineIntro .arch-wall,
#wiqCineIntro .arch-dome{display:none}
#wiqCineIntro .arch::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:22%;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.26) 30%, rgba(0,0,0,.58) 100%);
}
#wiqCineIntro .arch::after{
  content:"";
  position:absolute;
  left:15%; top:13%;
  width:230px; height:230px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,243,190,.16) 0%, rgba(255,231,156,.06) 34%, transparent 68%);
  filter:blur(18px);
  animation:windowHaloPulse 1.4s ease-in-out infinite alternate;
}

#wiqCineIntro .cine-window{
  left:11%;
  top:47%;
  width:182px;
  height:292px;
  transform:translateY(-50%) scale(.76);
  border:10px solid #0d171c;
  border-radius:96px 96px 6px 6px;
  background:#e8f6ff;
  box-shadow:
    0 0 0 2px rgba(118,162,188,.65),
    0 0 24px rgba(205,232,255,.25),
    0 0 70px rgba(175,220,255,.45),
    0 0 170px rgba(255,226,148,.20);
  opacity:0;
  overflow:hidden;
  animation:leftWindowReveal .85s .08s cubic-bezier(.2,.76,.2,1) forwards;
}
#wiqCineIntro .cine-window .mashrabiya{inset:8px;border-radius:84px 84px 4px 4px}
#wiqCineIntro .cine-window-glow{
  background:
    radial-gradient(circle at 50% 24%, rgba(255,255,255,.98) 0 10%, rgba(245,251,255,.88) 22%, rgba(184,225,255,.74) 48%, rgba(121,191,233,.76) 72%, rgba(27,64,89,.95) 100%);
  animation:innerBlueStrong .9s .25s ease forwards, innerBluePulse 1.5s 1.3s ease-in-out infinite alternate;
}

#wiqCineIntro .cine-beam{
  left:17%;
  top:50%;
  width:min(1100px,86vw);
  height:62vh;
  transform:translateY(-50%) rotate(-5.5deg) scaleX(.12);
  transform-origin:0 50%;
  clip-path:polygon(0 45%, 2.5% 30%, 58% 12%, 100% 0, 100% 100%, 62% 86%, 4% 68%, 0 55%);
  background:
    linear-gradient(90deg,
      rgba(255,251,240,.92) 0%,
      rgba(247,236,202,.66) 10%,
      rgba(197,225,247,.34) 34%,
      rgba(138,198,245,.18) 55%,
      rgba(138,198,245,.08) 75%,
      transparent 100%);
  filter:blur(8px);
  opacity:0;
  animation:leftBeamSweep 1.05s .55s cubic-bezier(.2,.7,.2,1) forwards;
}
#wiqCineIntro .cine-beam-core{
  left:17%;
  top:50%;
  width:min(720px,58vw);
  height:38vh;
  transform:translateY(-50%) rotate(-5.5deg) scaleX(.10);
  transform-origin:0 50%;
  clip-path:polygon(0 45%, 2.5% 36%, 72% 18%, 100% 8%, 100% 92%, 72% 82%, 2.5% 64%, 0 55%);
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.98) 0%,
      rgba(251,241,206,.88) 12%,
      rgba(215,236,255,.46) 40%,
      rgba(167,214,255,.16) 72%,
      transparent 100%);
  filter:blur(4px);
  opacity:0;
  animation:leftBeamCoreSweep .95s .72s ease-out forwards;
}
#wiqCineIntro .cine-particles{
  opacity:0;
  animation:particlesIn .55s .95s forwards;
}
#wiqCineIntro .cine-particles i{
  background:#fff0c0;
  box-shadow:0 0 10px rgba(255,245,205,.95),0 0 20px rgba(170,212,255,.45);
  animation:dustFloatLight 3.2s ease-in-out infinite;
}

#wiqCineIntro .cine-title{
  left:58%;
  top:54%;
  width:min(860px,60vw);
  transform:translate(-50%,-50%);
  text-align:center;
}
#wiqCineIntro .cine-title::before{
  content:"";
  position:absolute;
  left:50%; top:52%;
  width:420px; height:220px;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(255,250,236,.26) 0%, rgba(255,235,183,.14) 24%, rgba(170,214,255,.08) 44%, transparent 72%);
  filter:blur(18px);
  animation:titleAura 1.2s 1.2s ease forwards;
  opacity:0;
}
#wiqCineIntro .cine-emblem{
  opacity:0;
  transform:translateY(26px) scale(.74);
  animation:emblemRise .55s 1.35s ease forwards;
  background:rgba(4,16,22,.35);
  backdrop-filter:blur(5px);
}
#wiqCineIntro .cine-title-line{padding:0 0 8px;overflow:visible}
#wiqCineIntro .cine-title h1{
  opacity:0;
  transform:translateY(48px) scale(.92);
  filter:blur(10px);
  text-shadow:0 0 14px rgba(255,244,208,.22), 0 10px 42px rgba(0,0,0,.95);
  animation:titleFromLight .8s 1.45s cubic-bezier(.18,.8,.22,1) forwards;
}
#wiqCineIntro .cine-goldline{
  width:0;
  margin-top:4px;
  animation:goldLineCenter .55s 2.08s ease forwards;
}
#wiqCineIntro .cine-tagline{
  opacity:0;
  transform:translateY(18px);
  animation:tagInCenter .45s 2.34s ease forwards;
}
#wiqCineIntro .cine-scroll{bottom:20px;animation:tagIn .45s 2.45s forwards}
#wiqCineIntro .cine-skip{animation:tagIn .45s .45s forwards}
#wiqCineIntro .cine-vignette{box-shadow:inset 0 0 120px 70px rgba(0,0,0,.62)}

@keyframes cineBgBreathe{from{opacity:.88}to{opacity:1}}
@keyframes windowHaloPulse{from{opacity:.42;transform:scale(.96)}to{opacity:.8;transform:scale(1.04)}}
@keyframes leftWindowReveal{0%{opacity:0;transform:translateY(-50%) scale(.7)}100%{opacity:1;transform:translateY(-50%) scale(1)}}
@keyframes innerBlueStrong{0%{filter:brightness(.4)}100%{filter:brightness(1.22)}}
@keyframes innerBluePulse{from{filter:brightness(1.08)}to{filter:brightness(1.28)}}
@keyframes leftBeamSweep{0%{opacity:0;transform:translateY(-50%) rotate(-5.5deg) scaleX(.08)}100%{opacity:.92;transform:translateY(-50%) rotate(-5.5deg) scaleX(1)}}
@keyframes leftBeamCoreSweep{0%{opacity:0;transform:translateY(-50%) rotate(-5.5deg) scaleX(.08)}100%{opacity:.72;transform:translateY(-50%) rotate(-5.5deg) scaleX(1)}}
@keyframes dustFloatLight{0%,100%{transform:translate(0,0);opacity:.14}50%{transform:translate(16px,-28px);opacity:.88}}
@keyframes titleAura{from{opacity:0;transform:translate(-50%,-50%) scale(.82)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes emblemRise{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes titleFromLight{0%{opacity:0;transform:translateY(52px) scale(.88);filter:blur(14px)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes goldLineCenter{to{width:min(620px,72vw)}}
@keyframes tagInCenter{to{opacity:1;transform:translateY(0)}}

@media(max-width:900px){
  #wiqCineIntro .cine-window{left:8%;width:148px;height:238px}
  #wiqCineIntro .cine-title{left:60%;width:min(88vw,620px)}
  #wiqCineIntro .cine-title h1{font-size:clamp(36px,7vw,70px)}
  #wiqCineIntro .cine-beam{width:min(980px,96vw)}
}
@media(max-width:650px){
  #wiqCineIntro .cine-window{left:50%;top:31%;width:116px;height:186px;transform:translate(-50%,-50%) scale(.85)}
  #wiqCineIntro .cine-beam,
  #wiqCineIntro .cine-beam-core{
    left:50%;top:33%;transform-origin:50% 0;
  }
  #wiqCineIntro .cine-beam{width:120vw;height:56vh;transform:translate(-50%,0) rotate(90deg) scaleX(.12);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%)}
  #wiqCineIntro .cine-beam-core{width:58vw;height:52vh;transform:translate(-50%,0) rotate(90deg) scaleX(.1);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%)}
  #wiqCineIntro .cine-title{left:50%;top:63%;width:90vw}
  #wiqCineIntro .cine-title::before{width:84vw;height:180px}
  #wiqCineIntro .cine-tagline{letter-spacing:.16em;line-height:1.8;font-size:10px}
}

/* =========================================================
   V20 — warmer, more realistic, premium intro refinement
   Keeps 3-second autoclose but makes the intro more golden,
   cinematic and visually smoother.
========================================================= */
#wiqCineIntro.cine-intro{
  background:
    radial-gradient(circle at 56% 44%, rgba(97,73,25,.14), transparent 24%),
    radial-gradient(circle at 14% 42%, rgba(255,204,112,.12), transparent 18%),
    linear-gradient(180deg,#07111a 0%,#050d14 44%,#02070d 100%) !important;
}
#wiqCineIntro .cine-bg{
  background:
    radial-gradient(circle at 16% 46%, rgba(255,208,118,.11), transparent 16%),
    radial-gradient(circle at 50% 44%, rgba(255,233,178,.05), transparent 32%),
    radial-gradient(circle at 62% 38%, rgba(115,88,35,.10), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(0,0,0,.16));
}

#wiqCineIntro .arch::after{
  width:300px;
  height:300px;
  left:13%;
  top:10%;
  background:radial-gradient(circle, rgba(255,236,184,.18) 0%, rgba(245,198,93,.10) 24%, rgba(223,163,47,.05) 42%, transparent 70%);
  filter:blur(26px);
  animation:windowHaloPremium 1.8s ease-in-out infinite alternate;
}

#wiqCineIntro .cine-window{
  border-color:#11191d;
  background:#fff7de;
  box-shadow:
    0 0 0 2px rgba(195,157,82,.62),
    0 0 22px rgba(255,233,176,.18),
    0 0 64px rgba(255,210,112,.38),
    0 0 160px rgba(255,207,104,.16);
  animation:leftWindowRevealPremium .95s .08s cubic-bezier(.2,.76,.2,1) forwards;
}
#wiqCineIntro .cine-window-glow{
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.98) 0 10%, rgba(255,246,221,.94) 24%, rgba(255,226,152,.78) 48%, rgba(240,190,80,.68) 70%, rgba(98,62,18,.85) 100%);
  animation:innerGoldStrong 1.05s .25s ease forwards, innerGoldPulse 1.8s 1.3s ease-in-out infinite alternate;
}
#wiqCineIntro .cine-window .mashrabiya{
  background-color:#111a1f;
  background-image:
    radial-gradient(circle at center,#f6e9bf 0 1.7px,transparent 2.1px),
    radial-gradient(circle at center,transparent 0 7px,#dbc173 7.3px 8.1px,transparent 8.6px),
    linear-gradient(45deg,transparent 46%,#e8d08c 47% 53%,transparent 54%),
    linear-gradient(-45deg,transparent 46%,#e8d08c 47% 53%,transparent 54%);
  box-shadow:inset 0 0 20px rgba(0,0,0,.65);
}

#wiqCineIntro .cine-beam{
  background:
    linear-gradient(90deg,
      rgba(255,252,240,.95) 0%,
      rgba(255,241,196,.84) 8%,
      rgba(255,223,150,.52) 20%,
      rgba(255,215,148,.26) 38%,
      rgba(219,198,163,.10) 62%,
      transparent 100%);
  filter:blur(6px);
  opacity:0;
  animation:leftBeamSweepPremium 1.2s .55s cubic-bezier(.2,.7,.2,1) forwards;
}
#wiqCineIntro .cine-beam::before,
#wiqCineIntro .cine-beam::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
#wiqCineIntro .cine-beam::before{
  background:
    linear-gradient(90deg, transparent 0 6%, rgba(255,255,255,.65) 10%, transparent 14%),
    linear-gradient(90deg, transparent 0 20%, rgba(255,244,213,.45) 24%, transparent 28%),
    linear-gradient(90deg, transparent 0 34%, rgba(255,234,186,.30) 38%, transparent 42%),
    linear-gradient(90deg, transparent 0 48%, rgba(255,246,220,.24) 52%, transparent 56%),
    linear-gradient(90deg, transparent 0 64%, rgba(255,228,170,.18) 68%, transparent 72%);
  mix-blend-mode:screen;
  filter:blur(1px);
  opacity:.7;
}
#wiqCineIntro .cine-beam::after{
  background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,233,182,.12) 48%, transparent 100%);
  opacity:.78;
  filter:blur(10px);
}

#wiqCineIntro .cine-beam-core{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.99) 0%,
      rgba(255,247,222,.94) 12%,
      rgba(255,229,167,.70) 28%,
      rgba(255,221,150,.34) 54%,
      rgba(255,214,128,.12) 74%,
      transparent 100%);
  filter:blur(3px);
  animation:leftBeamCoreSweepPremium 1.08s .72s ease-out forwards;
}

#wiqCineIntro .cine-title::before{
  width:520px;
  height:260px;
  background:radial-gradient(ellipse at center, rgba(255,251,236,.34) 0%, rgba(255,231,171,.18) 22%, rgba(255,217,124,.10) 42%, transparent 72%);
  filter:blur(24px);
  animation:titleAuraPremium 1.3s 1.5s ease forwards;
}
#wiqCineIntro .cine-emblem{
  color:#efd489;
  border-color:#d2b264;
  box-shadow:0 0 28px rgba(245,211,119,.12),0 0 58px rgba(199,168,91,.10);
  animation:emblemRisePremium .6s 1.65s ease forwards;
}
#wiqCineIntro .cine-title h1{
  color:#fffdf6;
  text-shadow:0 0 18px rgba(255,239,190,.18), 0 10px 42px rgba(0,0,0,.96);
  animation:titleFromLightPremium .86s 1.82s cubic-bezier(.18,.8,.22,1) forwards;
}
#wiqCineIntro .cine-goldline{
  background:linear-gradient(90deg, transparent, #d7bb72, #fff2c8, #d7bb72, transparent);
  animation:goldLinePremium .42s 2.48s ease forwards;
}
#wiqCineIntro .cine-tagline{
  color:#e8d39d;
  text-shadow:0 0 14px rgba(245,219,141,.08);
  animation:tagInPremium .42s 2.62s ease forwards;
}
#wiqCineIntro .cine-scroll{color:#ffffff80}
#wiqCineIntro .cine-vignette{box-shadow:inset 0 0 130px 80px rgba(0,0,0,.62)}

@keyframes windowHaloPremium{from{opacity:.44;transform:scale(.96)}to{opacity:.88;transform:scale(1.05)}}
@keyframes leftWindowRevealPremium{0%{opacity:0;transform:translateY(-50%) scale(.7)}60%{opacity:1}100%{opacity:1;transform:translateY(-50%) scale(1)}}
@keyframes innerGoldStrong{0%{filter:brightness(.45)}100%{filter:brightness(1.24)}}
@keyframes innerGoldPulse{from{filter:brightness(1.08)}to{filter:brightness(1.32)}}
@keyframes leftBeamSweepPremium{0%{opacity:0;transform:translateY(-50%) rotate(-5.5deg) scaleX(.08)}100%{opacity:.95;transform:translateY(-50%) rotate(-5.5deg) scaleX(1)}}
@keyframes leftBeamCoreSweepPremium{0%{opacity:0;transform:translateY(-50%) rotate(-5.5deg) scaleX(.08)}100%{opacity:.80;transform:translateY(-50%) rotate(-5.5deg) scaleX(1)}}
@keyframes titleAuraPremium{from{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes emblemRisePremium{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes titleFromLightPremium{0%{opacity:0;transform:translateY(56px) scale(.88);filter:blur(16px)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes goldLinePremium{to{width:min(640px,74vw)}}
@keyframes tagInPremium{to{opacity:1;transform:translateY(0)}}

@media(max-width:650px){
  #wiqCineIntro .cine-window{box-shadow:0 0 0 2px rgba(195,157,82,.62),0 0 20px rgba(255,233,176,.20),0 0 54px rgba(255,210,112,.34),0 0 120px rgba(255,207,104,.14)}
  #wiqCineIntro .cine-title::before{width:88vw;height:200px}
}

/* =========================================================
   V21 — premium dust particles + arabic geometric beam shadow
========================================================= */
#wiqCineIntro .cine-particles{
  inset:8% 16% 10% 14%;
  opacity:0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.98) 0%, rgba(0,0,0,.95) 18%, rgba(0,0,0,.72) 52%, rgba(0,0,0,.18) 82%, transparent 100%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,.98) 0%, rgba(0,0,0,.95) 18%, rgba(0,0,0,.72) 52%, rgba(0,0,0,.18) 82%, transparent 100%);
  animation:particlesInPremium .7s 1.1s forwards;
}
#wiqCineIntro .cine-particles i{
  width:4px;
  height:4px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fffef8 0 24%, #ffe4a2 42%, rgba(255,213,118,.72) 66%, rgba(255,213,118,0) 100%);
  box-shadow:
    0 0 8px rgba(255,233,176,.96),
    0 0 18px rgba(255,221,140,.70),
    0 0 30px rgba(176,214,255,.24);
  opacity:.18;
  animation:dustFloatPremium 5.4s ease-in-out infinite;
}
#wiqCineIntro .cine-particles i:nth-child(3n){width:2px;height:2px;opacity:.3;animation-duration:4.6s}
#wiqCineIntro .cine-particles i:nth-child(4n){width:6px;height:6px;opacity:.14;animation-duration:6.2s}
#wiqCineIntro .cine-particles i:nth-child(5n){box-shadow:0 0 10px rgba(255,247,214,.98),0 0 26px rgba(255,226,146,.68),0 0 38px rgba(210,233,255,.22)}

#wiqCineIntro .cine-beam,
#wiqCineIntro .cine-beam-core{overflow:hidden}

#wiqCineIntro .cine-beam-core::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, transparent 0 7px, rgba(120,84,20,.18) 7.3px 8.4px, transparent 8.8px) 0 0/54px 54px,
    conic-gradient(from 22.5deg at 50% 50%, rgba(145,103,30,.18) 0 12.5%, transparent 12.5% 25%, rgba(145,103,30,.16) 25% 37.5%, transparent 37.5% 50%, rgba(145,103,30,.18) 50% 62.5%, transparent 62.5% 75%, rgba(145,103,30,.16) 75% 87.5%, transparent 87.5% 100%) 0 0/54px 54px,
    linear-gradient(45deg, transparent 46%, rgba(154,109,32,.10) 48% 52%, transparent 54%) 0 0/54px 54px,
    linear-gradient(-45deg, transparent 46%, rgba(154,109,32,.10) 48% 52%, transparent 54%) 0 0/54px 54px;
  mix-blend-mode:multiply;
  opacity:.28;
  filter:blur(.25px);
  animation:patternDrift 6.5s ease-in-out infinite alternate;
}
#wiqCineIntro .cine-beam-core::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.18), transparent 18%, transparent 72%, rgba(255,255,255,.10) 100%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,230,165,.03) 44%, transparent 100%);
  mix-blend-mode:overlay;
  opacity:.45;
}

#wiqCineIntro .cine-title::before{
  background:radial-gradient(ellipse at center, rgba(255,252,240,.38) 0%, rgba(255,232,178,.22) 22%, rgba(255,217,124,.14) 42%, transparent 72%);
}

@keyframes particlesInPremium{from{opacity:0}to{opacity:1}}
@keyframes dustFloatPremium{
  0%{transform:translate3d(0,0,0) scale(.8);opacity:.08}
  20%{opacity:.36}
  50%{transform:translate3d(28px,-34px,0) scale(1.12);opacity:.92}
  80%{opacity:.28}
  100%{transform:translate3d(46px,-62px,0) scale(.9);opacity:.04}
}
@keyframes patternDrift{from{transform:translateX(0)}to{transform:translateX(16px)}}

@media(max-width:650px){
  #wiqCineIntro .cine-particles{inset:18% 10% 12% 10%}
  #wiqCineIntro .cine-particles i{width:3px;height:3px}
  #wiqCineIntro .cine-beam-core::before{background-size:40px 40px,40px 40px,40px 40px,40px 40px;opacity:.2}
}

/* =========================================================
   V22 — refined intro balance
   Subtle geometric pattern + bolder light + slower luxury dust
========================================================= */
/* More subtle Islamic geometric shadow pattern */
#wiqCineIntro .cine-beam-core::before{
  opacity:.14 !important;
  filter:blur(.45px) !important;
  mix-blend-mode:multiply !important;
}

/* Bolder, cleaner sunlight beam */
#wiqCineIntro .cine-beam{
  filter:blur(5px) brightness(1.10) !important;
}
#wiqCineIntro .cine-beam-core{
  filter:blur(2.4px) brightness(1.18) !important;
}
#wiqCineIntro .cine-beam::after{
  opacity:.88 !important;
  filter:blur(9px) brightness(1.08) !important;
}

/* Slightly stronger glow where the title emerges */
#wiqCineIntro .cine-title::before{
  opacity:.92 !important;
  filter:blur(26px) !important;
}

/* Slower, smoother, more luxurious dust */
#wiqCineIntro .cine-particles i{
  width:3px !important;
  height:3px !important;
  opacity:.12;
  animation-name:dustFloatLuxury !important;
  animation-duration:8.5s !important;
  animation-timing-function:cubic-bezier(.37,0,.23,1) !important;
}
#wiqCineIntro .cine-particles i:nth-child(3n){
  width:2px !important;
  height:2px !important;
  animation-duration:7.2s !important;
}
#wiqCineIntro .cine-particles i:nth-child(4n){
  width:5px !important;
  height:5px !important;
  opacity:.10;
  animation-duration:10.2s !important;
}
#wiqCineIntro .cine-particles i:nth-child(5n){
  animation-duration:9.3s !important;
}

@keyframes dustFloatLuxury{
  0%{transform:translate3d(0,0,0) scale(.78);opacity:.03}
  16%{opacity:.20}
  42%{transform:translate3d(12px,-15px,0) scale(.92);opacity:.46}
  66%{transform:translate3d(24px,-31px,0) scale(1.04);opacity:.56}
  84%{opacity:.22}
  100%{transform:translate3d(38px,-50px,0) scale(.9);opacity:.03}
}

@media(max-width:650px){
  #wiqCineIntro .cine-beam-core::before{opacity:.09 !important}
  #wiqCineIntro .cine-particles i{animation-duration:9.2s !important}
}

/* =========================================================
   V23 — WQ-Gov-inspired compact Menu button + premium drawer
   Menu links intentionally have blank href values.
========================================================= */
.wq-nav{position:sticky;top:0;z-index:1000;background:rgba(247,246,240,.92);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-bottom:1px solid rgba(16,37,31,.10)}
.wq-nav .n{height:78px}
.wq-nav .brand{position:relative;z-index:1003}

.wq-menu-toggle{
  position:relative;z-index:1003;
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:10px 15px 10px 14px;
  border:1px solid rgba(16,37,31,.18);border-radius:999px;
  background:rgba(255,255,255,.68);color:#10251f;
  font:800 12px/1 Arial,sans-serif;letter-spacing:.10em;text-transform:uppercase;
  cursor:pointer;box-shadow:0 5px 18px rgba(16,37,31,.06);
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.wq-menu-toggle:hover,.wq-menu-toggle[aria-expanded="true"]{background:#0b5d4a;color:#fff;border-color:#0b5d4a;transform:translateY(-1px);box-shadow:0 12px 28px rgba(11,93,74,.20)}
.wq-menu-icon{width:18px;height:14px;display:flex;flex-direction:column;justify-content:space-between}
.wq-menu-icon i{display:block;width:100%;height:1.5px;background:currentColor;border-radius:2px;transform-origin:center;transition:transform .28s ease,opacity .22s ease,width .22s ease}
.wq-menu-toggle[aria-expanded="true"] .wq-menu-icon i:nth-child(1){transform:translateY(6.2px) rotate(45deg)}
.wq-menu-toggle[aria-expanded="true"] .wq-menu-icon i:nth-child(2){opacity:0;width:0}
.wq-menu-toggle[aria-expanded="true"] .wq-menu-icon i:nth-child(3){transform:translateY(-6.2px) rotate(-45deg)}

.wq-menu-panel{position:fixed;inset:0;z-index:1001;visibility:hidden;pointer-events:none}
.wq-menu-panel.open{visibility:visible;pointer-events:auto}
.wq-menu-backdrop{position:absolute;inset:0;background:rgba(2,15,12,.34);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;transition:opacity .34s ease}
.wq-menu-panel.open .wq-menu-backdrop{opacity:1}
.wq-menu-sheet{
  position:absolute;right:0;top:0;width:min(520px,92vw);height:100%;
  padding:34px 34px 28px;background:linear-gradient(155deg,#f8f7f1 0%,#edf4ef 62%,#f6f0e1 100%);
  border-left:1px solid rgba(11,93,74,.13);box-shadow:-25px 0 70px rgba(7,32,26,.18);
  transform:translateX(102%);transition:transform .48s cubic-bezier(.22,.78,.22,1);
  display:flex;flex-direction:column;overflow:auto;
}
.wq-menu-sheet:before{content:"";position:absolute;right:-60px;top:-100px;width:330px;height:330px;border-radius:50%;border:1px solid rgba(199,168,91,.22);box-shadow:0 0 0 55px rgba(199,168,91,.045),0 0 0 110px rgba(11,93,74,.035);pointer-events:none}
.wq-menu-panel.open .wq-menu-sheet{transform:translateX(0)}
.wq-menu-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding-bottom:24px;border-bottom:1px solid rgba(16,37,31,.11)}
.wq-menu-kicker{font:800 11px/1 Arial,sans-serif;letter-spacing:.16em;color:#0b5d4a}
.wq-menu-close{width:42px;height:42px;border-radius:50%;border:1px solid rgba(16,37,31,.16);background:#fff;color:#10251f;font:300 27px/1 Arial;cursor:pointer;transition:.25s ease}
.wq-menu-close:hover{background:#0b5d4a;color:#fff;border-color:#0b5d4a;transform:rotate(7deg)}

.wq-menu-list{position:relative;z-index:1;margin-top:24px;display:flex;flex-direction:column}
.wq-menu-list a{display:grid;grid-template-columns:38px 1fr 24px;align-items:center;gap:14px;padding:19px 4px;border-bottom:1px solid rgba(16,37,31,.10);color:#173a31;transition:padding .28s ease,color .28s ease,background .28s ease}
.wq-menu-list a:first-child{border-top:1px solid rgba(16,37,31,.10)}
.wq-menu-list a span{font:800 10px/1 Arial;color:#9a7a31;letter-spacing:.08em}
.wq-menu-list a b{font:500 clamp(20px,2.3vw,29px)/1.15 Georgia,serif}
.wq-menu-list a em{font-style:normal;color:#0b5d4a;opacity:.55;transition:transform .28s ease,opacity .28s ease}
.wq-menu-list a:hover{padding-left:12px;color:#0b5d4a;background:rgba(255,255,255,.48)}
.wq-menu-list a:hover em{transform:translate(3px,-3px);opacity:1}
.wq-menu-footer{position:relative;z-index:1;margin-top:auto;padding-top:26px;color:#6a7872;font-size:11px;line-height:1.6;letter-spacing:.08em;text-transform:uppercase;border-top:1px solid rgba(16,37,31,.10)}
body.wq-menu-open{overflow:hidden}

/* hide old desktop links if a cached template still contains them */
.wq-nav .links{display:none!important}

@media(max-width:650px){
  .wq-nav .n{height:70px}
  .wq-nav .brand{font-size:12px;letter-spacing:.035em}
  .wq-menu-toggle{padding:9px 12px}.wq-menu-label{display:none}
  .wq-menu-sheet{width:100%;padding:26px 22px 24px}
  .wq-menu-list a{grid-template-columns:32px 1fr 20px;padding:17px 2px}
  .wq-menu-list a b{font-size:23px}
}


/* =========================================================
   V24 — fixed full-height menu drawer
   Menu panel lives outside sticky nav so backdrop-filter can
   no longer constrain position:fixed to the navigation bar.
========================================================= */
#wqSiteMenu.wq-menu-panel{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  z-index:9998 !important;
  overflow:hidden !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
#wqSiteMenu.wq-menu-panel.open{
  visibility:visible !important;
  pointer-events:auto !important;
}
#wqSiteMenu .wq-menu-backdrop{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background:rgba(4,20,16,.48) !important;
  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;
}
#wqSiteMenu .wq-menu-sheet{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:auto !important;
  width:min(520px,92vw) !important;
  height:100vh !important;
  height:100dvh !important;
  min-height:100vh !important;
  max-height:none !important;
  margin:0 !important;
  padding:34px 34px 28px !important;
  border-radius:0 !important;
  box-sizing:border-box !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  transform:translate3d(102%,0,0) !important;
  transition:transform .46s cubic-bezier(.22,.78,.22,1) !important;
}
#wqSiteMenu.open .wq-menu-sheet{
  transform:translate3d(0,0,0) !important;
}
.wq-nav{z-index:1000 !important}
.wq-nav .wq-menu-toggle{z-index:1002 !important}
body.wq-menu-open{overflow:hidden !important}
@media(max-width:650px){
  #wqSiteMenu .wq-menu-sheet{
    width:100vw !important;
    padding:24px 22px 22px !important;
  }
}

/* =========================================================
   V27 — startup intro uses attached official logo
========================================================= */
#wiqCineIntro .cine-title.cine-title-logo{
  left:60%;
  top:55%;
  width:min(760px,58vw);
}
#wiqCineIntro .cine-logo-wrap{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:220px;
  opacity:0;
  transform:translateY(48px) scale(.88);
  filter:blur(12px);
  animation:logoFromLight .88s 1.78s cubic-bezier(.18,.8,.22,1) forwards;
}
#wiqCineIntro .cine-logo-wrap::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(460px,80%);
  height:min(460px,80%);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,249,231,.34) 0%, rgba(255,228,160,.18) 26%, rgba(255,214,128,.10) 44%, transparent 70%);
  filter:blur(24px);
  opacity:0;
  animation:logoAuraIn 1.1s 1.62s ease forwards;
}
#wiqCineIntro .cine-logo-mark{
  position:relative;
  z-index:1;
  display:block;
  width:min(430px,72vw);
  max-width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(255,239,186,.18)) drop-shadow(0 12px 42px rgba(0,0,0,.50));
}
#wiqCineIntro .cine-goldline{
  margin-top:10px;
  animation:goldLinePremium .42s 2.38s ease forwards;
}
#wiqCineIntro .cine-tagline{
  margin-top:16px;
  animation:tagInPremium .42s 2.54s ease forwards;
}
@keyframes logoFromLight{
  0%{opacity:0;transform:translateY(56px) scale(.86);filter:blur(14px)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes logoAuraIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@media(max-width:900px){
  #wiqCineIntro .cine-title.cine-title-logo{left:62%;width:min(76vw,560px)}
  #wiqCineIntro .cine-logo-wrap{min-height:180px}
  #wiqCineIntro .cine-logo-mark{width:min(340px,70vw)}
}
@media(max-width:650px){
  #wiqCineIntro .cine-title.cine-title-logo{left:50%;top:62%;width:88vw}
  #wiqCineIntro .cine-logo-wrap{min-height:140px}
  #wiqCineIntro .cine-logo-mark{width:min(280px,72vw)}
  #wiqCineIntro .cine-tagline{font-size:10px;line-height:1.8;letter-spacing:.15em}
}

/* =========================================================
   V28 — updated intro logo + larger left window + focused light
========================================================= */
#wiqCineIntro .cine-title.cine-title-logo{
  left:58% !important;
  top:59% !important;
  width:min(620px,44vw) !important;
}
#wiqCineIntro .cine-logo-wrap{
  min-height:260px !important;
}
#wiqCineIntro .cine-logo-wrap::before{
  width:min(420px,76%) !important;
  height:min(420px,76%) !important;
  background:radial-gradient(circle, rgba(255,249,232,.38) 0%, rgba(255,228,160,.22) 24%, rgba(255,214,128,.12) 46%, transparent 72%) !important;
}
#wiqCineIntro .cine-logo-mark{
  width:min(390px,66vw) !important;
  filter:drop-shadow(0 0 20px rgba(255,239,186,.20)) drop-shadow(0 14px 50px rgba(0,0,0,.56)) !important;
}

#wiqCineIntro .arch::after{
  left:10% !important;
  top:9% !important;
  width:380px !important;
  height:380px !important;
  background:radial-gradient(circle, rgba(255,236,184,.22) 0%, rgba(245,198,93,.13) 24%, rgba(223,163,47,.06) 42%, transparent 72%) !important;
  filter:blur(30px) !important;
}

#wiqCineIntro .cine-window{
  left:7% !important;
  top:48% !important;
  width:250px !important;
  height:405px !important;
  border-width:12px !important;
  border-radius:125px 125px 8px 8px !important;
  box-shadow:
    0 0 0 2px rgba(195,157,82,.72),
    0 0 26px rgba(255,233,176,.22),
    0 0 82px rgba(255,210,112,.46),
    0 0 200px rgba(255,207,104,.18) !important;
}
#wiqCineIntro .cine-window .mashrabiya{
  inset:10px !important;
  border-radius:110px 110px 5px 5px !important;
  background-size:26px 26px !important;
}

#wiqCineIntro .cine-beam{
  left:14% !important;
  top:58% !important;
  width:min(1120px,88vw) !important;
  height:78vh !important;
  transform:translateY(-50%) rotate(-3deg) scaleX(.12) !important;
  clip-path:polygon(0 48%, 2% 38%, 48% 22%, 74% 14%, 100% 8%, 100% 92%, 74% 86%, 48% 78%, 2% 62%, 0 52%) !important;
  background:
    linear-gradient(90deg,
      rgba(255,252,240,.97) 0%,
      rgba(255,241,196,.88) 8%,
      rgba(255,225,160,.62) 18%,
      rgba(255,222,156,.34) 34%,
      rgba(233,214,184,.14) 54%,
      rgba(255,220,150,.06) 72%,
      transparent 100%) !important;
  filter:blur(7px) !important;
}
#wiqCineIntro .cine-beam::before{
  opacity:.86 !important;
  background:
    linear-gradient(90deg, transparent 0 5%, rgba(255,255,255,.72) 9%, transparent 13%),
    linear-gradient(90deg, transparent 0 16%, rgba(255,244,213,.48) 20%, transparent 24%),
    linear-gradient(90deg, transparent 0 29%, rgba(255,234,186,.34) 33%, transparent 37%),
    linear-gradient(90deg, transparent 0 44%, rgba(255,246,220,.28) 48%, transparent 52%),
    linear-gradient(90deg, transparent 0 60%, rgba(255,228,170,.20) 64%, transparent 68%) !important;
}
#wiqCineIntro .cine-beam::after{
  opacity:.9 !important;
  filter:blur(8px) !important;
}

#wiqCineIntro .cine-beam-core{
  left:14% !important;
  top:58% !important;
  width:min(840px,62vw) !important;
  height:48vh !important;
  transform:translateY(-50%) rotate(-3deg) scaleX(.10) !important;
  clip-path:polygon(0 48%, 2% 41%, 58% 25%, 100% 12%, 100% 88%, 58% 75%, 2% 59%, 0 52%) !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.99) 0%,
      rgba(255,247,222,.96) 12%,
      rgba(255,229,167,.76) 30%,
      rgba(255,221,150,.40) 54%,
      rgba(255,214,128,.16) 74%,
      transparent 100%) !important;
  filter:blur(2px) !important;
}
#wiqCineIntro .cine-beam-core::before{
  opacity:.07 !important;
}

#wiqCineIntro .cine-particles{
  inset:12% 18% 14% 12% !important;
}
#wiqCineIntro .cine-particles i{
  animation-duration:10.5s !important;
}

#wiqCineIntro .cine-goldline{
  margin-top:6px !important;
  width:min(360px,55vw) !important;
}
#wiqCineIntro .cine-tagline{
  margin-top:14px !important;
}

@media(max-width:980px){
  #wiqCineIntro .cine-window{left:5% !important;width:210px !important;height:340px !important}
  #wiqCineIntro .cine-title.cine-title-logo{left:60% !important;width:min(52vw,420px) !important}
  #wiqCineIntro .cine-logo-mark{width:min(320px,54vw) !important}
  #wiqCineIntro .cine-beam{width:min(1080px,94vw) !important;height:74vh !important}
  #wiqCineIntro .cine-beam-core{width:min(760px,58vw) !important;height:45vh !important}
}
@media(max-width:650px){
  #wiqCineIntro .cine-window{left:50% !important;top:28% !important;width:142px !important;height:228px !important;border-width:8px !important;transform:translate(-50%,-50%) scale(1) !important}
  #wiqCineIntro .cine-window .mashrabiya{inset:7px !important;background-size:18px 18px !important}
  #wiqCineIntro .cine-title.cine-title-logo{left:50% !important;top:64% !important;width:88vw !important}
  #wiqCineIntro .cine-logo-wrap{min-height:160px !important}
  #wiqCineIntro .cine-logo-mark{width:min(270px,72vw) !important}
  #wiqCineIntro .cine-beam{left:50% !important;top:33% !important;width:120vw !important;height:58vh !important;transform:translate(-50%,0) rotate(90deg) scaleX(.12) !important;clip-path:polygon(46% 0,54% 0,100% 100%,0 100%) !important}
  #wiqCineIntro .cine-beam-core{left:50% !important;top:33% !important;width:62vw !important;height:54vh !important;transform:translate(-50%,0) rotate(90deg) scaleX(.10) !important;clip-path:polygon(44% 0,56% 0,100% 100%,0 100%) !important}
}


/* =========================================================
   V30 — inspired full-screen cinematic room intro
   IMPORTANT: uses a newly generated scene inspired by the
   reference mood/composition, NOT the user's exact photo.
   The room fills the screen, light comes from the left window,
   and the WIQ logo reveals on the floor.
========================================================= */

#wiqCineIntro.cine-intro{
  background:#03101a !important;
}

/* Full-screen newly generated room scene */
#wiqCineIntro .cine-bg{
  position:absolute !important;
  inset:0 !important;
  opacity:1 !important;
  background:
    linear-gradient(180deg,rgba(2,8,14,.08),rgba(1,6,11,.20)),
    url('startup-room-inspired.png') center center / cover no-repeat !important;
  animation:wiqRoomCinematicPush 3s ease-out forwards !important;
  transform-origin:42% 48%;
}
#wiqCineIntro .cine-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,8,18,.03),rgba(0,8,18,.02) 55%,rgba(0,4,10,.22)),
    radial-gradient(circle at 20% 28%,rgba(238,248,255,.10),transparent 20%),
    radial-gradient(ellipse at 62% 78%,rgba(5,14,27,.18),transparent 35%);
  pointer-events:none;
}

/* Hide old synthetic mosque/window pieces */
#wiqCineIntro .arch,
#wiqCineIntro .cine-window,
#wiqCineIntro .cine-window-glow,
#wiqCineIntro .mashrabiya{
  display:none !important;
}

/* Additional animated volumetric light from left window */
#wiqCineIntro .cine-beam{
  display:block !important;
  position:absolute !important;
  z-index:2 !important;
  left:16% !important;
  top:34% !important;
  width:min(1180px,96vw) !important;
  height:86vh !important;
  transform:translateY(-50%) rotate(12deg) scaleX(.06) !important;
  transform-origin:0 40% !important;
  clip-path:polygon(0 38%,3% 30%,50% 10%,100% 0,100% 100%,50% 88%,3% 62%,0 52%) !important;
  background:
    linear-gradient(90deg,
      rgba(248,252,255,.70) 0%,
      rgba(225,240,255,.42) 11%,
      rgba(181,218,251,.22) 28%,
      rgba(150,200,243,.11) 52%,
      rgba(150,200,243,.04) 74%,
      transparent 100%) !important;
  filter:blur(8px) !important;
  opacity:0 !important;
  mix-blend-mode:screen !important;
  animation:
    wiqRoomBeamIn 1.15s .25s cubic-bezier(.18,.74,.2,1) forwards,
    wiqRoomBeamPulse 1.4s 1.2s ease-in-out infinite alternate !important;
}

#wiqCineIntro .cine-beam::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent 0 7%,rgba(255,255,255,.22) 9%,transparent 12%),
    linear-gradient(90deg,transparent 0 18%,rgba(238,247,255,.16) 21%,transparent 24%),
    linear-gradient(90deg,transparent 0 31%,rgba(228,241,255,.13) 34%,transparent 38%),
    linear-gradient(90deg,transparent 0 46%,rgba(229,243,255,.11) 49%,transparent 53%);
  filter:blur(1px);
  opacity:.72;
}
#wiqCineIntro .cine-beam::after{
  content:"";
  position:absolute;
  inset:-2%;
  background:radial-gradient(circle at 3% 46%,rgba(255,255,255,.38),transparent 14%);
  filter:blur(10px);
  opacity:.78;
}

/* Focused center ray */
#wiqCineIntro .cine-beam-core{
  display:block !important;
  position:absolute !important;
  z-index:3 !important;
  left:17% !important;
  top:42% !important;
  width:min(800px,65vw) !important;
  height:60vh !important;
  transform:translateY(-50%) rotate(12deg) scaleX(.06) !important;
  transform-origin:0 36% !important;
  clip-path:polygon(0 42%,3% 35%,58% 17%,100% 7%,100% 93%,58% 81%,3% 61%,0 52%) !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.88) 0%,
      rgba(235,247,255,.56) 13%,
      rgba(196,226,255,.28) 34%,
      rgba(177,216,252,.12) 58%,
      transparent 100%) !important;
  filter:blur(3px) !important;
  opacity:0 !important;
  mix-blend-mode:screen !important;
  animation:
    wiqRoomCoreIn 1.05s .48s ease-out forwards,
    wiqRoomCorePulse 1.45s 1.15s ease-in-out infinite alternate !important;
}

/* Dust stays in the shaft */
#wiqCineIntro .cine-particles{
  z-index:4 !important;
  inset:8% 18% 15% 11% !important;
  opacity:0;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 36%,rgba(0,0,0,.42) 75%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 36%,rgba(0,0,0,.42) 75%,transparent 100%);
  animation:particlesInPremium .6s .85s forwards !important;
}
#wiqCineIntro .cine-particles i{
  width:3px !important;
  height:3px !important;
  background:radial-gradient(circle,#fff 0 24%,#dbeeff 46%,rgba(219,238,255,0) 100%) !important;
  box-shadow:0 0 9px rgba(255,255,255,.9),0 0 22px rgba(178,220,255,.42) !important;
  animation:wiqLuxuryDust 6.8s ease-in-out infinite !important;
}
#wiqCineIntro .cine-particles i:nth-child(4n){
  width:5px !important;height:5px !important;opacity:.16 !important;
}
#wiqCineIntro .cine-particles i:nth-child(3n){
  animation-duration:7.6s !important;
}

/* Dark floor veil hides the baked-in floor emblem until reveal */
#wiqCineIntro .cine-title.cine-title-logo::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:460px;
  height:240px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(8,20,34,.94) 0%,
    rgba(8,20,34,.88) 38%,
    rgba(8,20,34,.52) 62%,
    transparent 78%);
  filter:blur(10px);
  opacity:1;
  animation:wiqFloorVeilOut .62s 1.08s ease forwards;
}

/* Floor perspective logo reveal */
#wiqCineIntro .cine-title.cine-title-logo{
  z-index:7 !important;
  left:61% !important;
  top:76% !important;
  width:min(480px,42vw) !important;
  transform:translate(-50%,-50%) perspective(1100px) rotateX(67deg) !important;
  transform-style:preserve-3d !important;
}
#wiqCineIntro .cine-logo-wrap{
  min-height:130px !important;
  opacity:0 !important;
  filter:blur(9px) brightness(1.15);
  transform:translateY(18px) scale(.78);
  animation:wiqFloorLogoReveal .82s 1.24s cubic-bezier(.16,.8,.2,1) forwards !important;
}
#wiqCineIntro .cine-logo-wrap::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:390px;height:120px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(221,238,255,.23) 0%,
    rgba(188,219,250,.13) 34%,
    rgba(132,184,233,.06) 54%,
    transparent 74%);
  filter:blur(16px);
  opacity:0;
  animation:wiqFloorAuraIn .7s 1.16s ease forwards;
}
#wiqCineIntro .cine-logo-mark{
  width:min(290px,54vw) !important;
  height:auto !important;
  margin:0 auto !important;
  opacity:.92;
  filter:
    grayscale(.08)
    brightness(1.18)
    drop-shadow(0 0 5px rgba(236,246,255,.26))
    drop-shadow(0 7px 20px rgba(0,0,0,.46)) !important;
  mix-blend-mode:screen;
}

/* Remove title/tagline for this cinematic floor-logo scene */
#wiqCineIntro .cine-goldline,
#wiqCineIntro .cine-tagline,
#wiqCineIntro .cine-scroll{
  display:none !important;
}
#wiqCineIntro .cine-vignette{
  box-shadow:inset 0 0 160px 70px rgba(0,0,0,.44) !important;
}

@keyframes wiqRoomCinematicPush{
  from{transform:scale(1.025)}
  to{transform:scale(1.075)}
}
@keyframes wiqRoomBeamIn{
  0%{opacity:0;transform:translateY(-50%) rotate(12deg) scaleX(.05)}
  100%{opacity:.72;transform:translateY(-50%) rotate(12deg) scaleX(1)}
}
@keyframes wiqRoomBeamPulse{
  from{opacity:.58;filter:blur(9px)}
  to{opacity:.82;filter:blur(6px)}
}
@keyframes wiqRoomCoreIn{
  0%{opacity:0;transform:translateY(-50%) rotate(12deg) scaleX(.05)}
  100%{opacity:.68;transform:translateY(-50%) rotate(12deg) scaleX(1)}
}
@keyframes wiqRoomCorePulse{
  from{opacity:.52}
  to{opacity:.75}
}
@keyframes wiqFloorVeilOut{
  0%{opacity:1}
  100%{opacity:.06}
}
@keyframes wiqFloorLogoReveal{
  0%{opacity:0;transform:translateY(18px) scale(.76);filter:blur(10px) brightness(1.3)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0) brightness(1.14)}
}
@keyframes wiqFloorAuraIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.75)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes wiqLuxuryDust{
  0%{transform:translate3d(0,0,0) scale(.85);opacity:.05}
  24%{opacity:.26}
  58%{transform:translate3d(20px,-28px,0) scale(1.08);opacity:.62}
  100%{transform:translate3d(38px,-48px,0) scale(.92);opacity:.03}
}

@media(max-width:980px){
  #wiqCineIntro .cine-bg{background-position:34% center !important}
  #wiqCineIntro .cine-title.cine-title-logo{
    left:62% !important;
    top:77% !important;
    width:min(52vw,390px) !important;
  }
  #wiqCineIntro .cine-logo-mark{width:min(230px,44vw) !important}
}

@media(max-width:650px){
  #wiqCineIntro .cine-bg{background-position:27% center !important}
  #wiqCineIntro .cine-beam{
    left:11% !important;top:35% !important;width:138vw !important;height:74vh !important;
    transform:translateY(-50%) rotate(22deg) scaleX(.05) !important;
  }
  #wiqCineIntro .cine-beam-core{
    left:13% !important;top:41% !important;width:86vw !important;height:54vh !important;
    transform:translateY(-50%) rotate(20deg) scaleX(.05) !important;
  }
  #wiqCineIntro .cine-title.cine-title-logo{
    left:58% !important;top:77% !important;width:62vw !important;
    transform:translate(-50%,-50%) perspective(760px) rotateX(70deg) !important;
  }
  #wiqCineIntro .cine-logo-mark{width:min(180px,48vw) !important}
}

/* =========================================================
   V31 — logo glows in the middle of the window with golden light
========================================================= */
#wiqCineIntro .cine-bg::after{
  content:"";
  position:absolute;
  right:12%;
  bottom:6%;
  width:min(780px,62vw);
  height:min(420px,42vh);
  background:radial-gradient(ellipse at center,
    rgba(4,14,27,.88) 0%,
    rgba(4,14,27,.82) 34%,
    rgba(4,14,27,.42) 58%,
    transparent 78%);
  filter:blur(18px);
  pointer-events:none;
}

/* warmer golden light from the window */
#wiqCineIntro .cine-beam{
  left:12% !important;
  top:34% !important;
  width:min(1220px,98vw) !important;
  height:88vh !important;
  transform:translateY(-50%) rotate(12deg) scaleX(.06) !important;
  background:
    linear-gradient(90deg,
      rgba(255,250,234,.88) 0%,
      rgba(255,235,186,.58) 10%,
      rgba(255,220,150,.30) 26%,
      rgba(255,213,138,.14) 48%,
      rgba(255,213,138,.05) 72%,
      transparent 100%) !important;
  filter:blur(9px) !important;
  animation:
    wiqWindowGoldBeamIn 1.05s .18s cubic-bezier(.18,.74,.2,1) forwards,
    wiqWindowGoldBeamPulse 1.45s 1.05s ease-in-out infinite alternate !important;
}
#wiqCineIntro .cine-beam::before{
  background:
    linear-gradient(90deg,transparent 0 7%,rgba(255,251,236,.30) 9%,transparent 12%),
    linear-gradient(90deg,transparent 0 18%,rgba(255,239,199,.24) 21%,transparent 24%),
    linear-gradient(90deg,transparent 0 31%,rgba(255,232,184,.18) 34%,transparent 38%),
    linear-gradient(90deg,transparent 0 46%,rgba(255,229,173,.14) 49%,transparent 53%) !important;
  opacity:.85 !important;
}
#wiqCineIntro .cine-beam::after{
  background:
    radial-gradient(circle at 3% 46%,rgba(255,248,227,.54),transparent 14%),
    linear-gradient(90deg,rgba(255,240,198,.10),transparent 32%,transparent 72%,rgba(255,240,198,.04) 100%) !important;
  opacity:.92 !important;
}
#wiqCineIntro .cine-beam-core{
  left:14% !important;
  top:36% !important;
  width:min(760px,61vw) !important;
  height:56vh !important;
  transform:translateY(-50%) rotate(11deg) scaleX(.06) !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,246,.98) 0%,
      rgba(255,245,215,.72) 12%,
      rgba(255,232,178,.34) 34%,
      rgba(255,220,152,.14) 56%,
      transparent 100%) !important;
  filter:blur(3px) !important;
  animation:
    wiqWindowCoreIn 1s .36s ease-out forwards,
    wiqWindowCorePulse 1.35s 1s ease-in-out infinite alternate !important;
}
#wiqCineIntro .cine-beam-core::before{opacity:.10 !important}

/* logo sits in the middle of the window, glowing gold */
#wiqCineIntro .cine-title.cine-title-logo{
  z-index:8 !important;
  left:23% !important;
  top:34% !important;
  width:min(290px,23vw) !important;
  transform:translate(-50%,-50%) !important;
}
#wiqCineIntro .cine-title.cine-title-logo::before{
  display:none !important;
}
#wiqCineIntro .cine-logo-wrap{
  min-height:220px !important;
  opacity:0 !important;
  filter:blur(8px) brightness(1.28);
  transform:scale(.72);
  animation:wiqWindowLogoReveal .9s .78s cubic-bezier(.16,.8,.2,1) forwards !important;
}
#wiqCineIntro .cine-logo-wrap::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:250px;
  height:250px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(255,253,244,.76) 0%,
      rgba(255,238,193,.44) 20%,
      rgba(250,215,120,.24) 42%,
      rgba(242,188,67,.14) 58%,
      transparent 76%);
  filter:blur(16px);
  opacity:0;
  animation:wiqWindowAuraReveal .9s .74s ease forwards, wiqWindowAuraPulse 1.5s 1.7s ease-in-out infinite alternate;
}
#wiqCineIntro .cine-logo-wrap::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:188px;height:188px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,233,173,.55), 0 0 28px rgba(255,224,146,.28), inset 0 0 36px rgba(255,249,231,.14);
  opacity:.72;
}
#wiqCineIntro .cine-logo-mark{
  width:min(205px,17vw) !important;
  height:auto !important;
  margin:0 auto !important;
  opacity:1 !important;
  mix-blend-mode:screen;
  filter:
    brightness(1.22)
    saturate(1.06)
    drop-shadow(0 0 10px rgba(255,244,204,.44))
    drop-shadow(0 0 28px rgba(247,205,102,.30))
    drop-shadow(0 10px 20px rgba(0,0,0,.32)) !important;
  animation:wiqWindowLogoPulse 1.6s 1.55s ease-in-out infinite alternate;
}

/* hide supporting intro copy */
#wiqCineIntro .cine-goldline,
#wiqCineIntro .cine-tagline,
#wiqCineIntro .cine-scroll{
  display:none !important;
}

@keyframes wiqWindowGoldBeamIn{
  0%{opacity:0;transform:translateY(-50%) rotate(12deg) scaleX(.04)}
  100%{opacity:.88;transform:translateY(-50%) rotate(12deg) scaleX(1)}
}
@keyframes wiqWindowGoldBeamPulse{from{opacity:.72}to{opacity:.94}}
@keyframes wiqWindowCoreIn{
  0%{opacity:0;transform:translateY(-50%) rotate(11deg) scaleX(.04)}
  100%{opacity:.84;transform:translateY(-50%) rotate(11deg) scaleX(1)}
}
@keyframes wiqWindowCorePulse{from{opacity:.68}to{opacity:.92}}
@keyframes wiqWindowLogoReveal{
  0%{opacity:0;transform:scale(.66);filter:blur(10px) brightness(1.5)}
  100%{opacity:1;transform:scale(1);filter:blur(0) brightness(1.22)}
}
@keyframes wiqWindowAuraReveal{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes wiqWindowAuraPulse{from{opacity:.76}to{opacity:1}}
@keyframes wiqWindowLogoPulse{from{transform:scale(1)}to{transform:scale(1.03)}}

@media(max-width:980px){
  #wiqCineIntro .cine-title.cine-title-logo{left:23.5% !important;top:34% !important;width:min(240px,28vw) !important}
  #wiqCineIntro .cine-logo-mark{width:min(170px,20vw) !important}
  #wiqCineIntro .cine-logo-wrap{min-height:180px !important}
}
@media(max-width:650px){
  #wiqCineIntro .cine-bg{background-position:27% center !important}
  #wiqCineIntro .cine-title.cine-title-logo{left:24% !important;top:34% !important;width:38vw !important}
  #wiqCineIntro .cine-logo-wrap{min-height:120px !important}
  #wiqCineIntro .cine-logo-mark{width:min(108px,22vw) !important}
  #wiqCineIntro .cine-logo-wrap::before{width:135px;height:135px}
  #wiqCineIntro .cine-logo-wrap::after{width:102px;height:102px}
  #wiqCineIntro .cine-beam{left:8% !important;top:34% !important;width:138vw !important;height:76vh !important;transform:translateY(-50%) rotate(16deg) scaleX(.05) !important}
  #wiqCineIntro .cine-beam-core{left:10% !important;top:35% !important;width:82vw !important;height:50vh !important;transform:translateY(-50%) rotate(15deg) scaleX(.05) !important}
}

/* =========================================================
   V32 — use supplied startup video + supplied WIQ logo
========================================================= */
#wiqCineIntro.cine-intro{
  background:#050403 !important;
}
#wiqCineIntro .cine-video-bg{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  filter:brightness(.78) saturate(1.04) contrast(1.04);
}
#wiqCineIntro .cine-bg{
  z-index:1 !important;
  background:
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.22)),
    radial-gradient(circle at 50% 48%,transparent 0 32%,rgba(0,0,0,.10) 72%,rgba(0,0,0,.28) 100%) !important;
  opacity:1 !important;
  animation:none !important;
  transform:none !important;
}
#wiqCineIntro .cine-bg::before,
#wiqCineIntro .cine-bg::after{
  display:none !important;
}

/* Keep only a very subtle extra light enhancement over the real video */
#wiqCineIntro .cine-beam{
  z-index:2 !important;
  left:10% !important;
  top:40% !important;
  width:76vw !important;
  height:76vh !important;
  transform:translateY(-50%) rotate(10deg) scaleX(.10) !important;
  transform-origin:0 44% !important;
  background:linear-gradient(90deg,
      rgba(255,249,231,.34) 0%,
      rgba(255,229,175,.19) 18%,
      rgba(255,215,145,.08) 44%,
      transparent 78%) !important;
  filter:blur(13px) !important;
  opacity:0 !important;
  mix-blend-mode:screen !important;
  animation:v32LightIn .9s .2s ease-out forwards, v32LightPulse 1.5s 1.1s ease-in-out infinite alternate !important;
}
#wiqCineIntro .cine-beam::before,
#wiqCineIntro .cine-beam::after,
#wiqCineIntro .cine-beam-core{
  display:none !important;
}

/* Logo floats/glows in the middle of the screen over the video */
#wiqCineIntro .cine-title.cine-title-logo{
  z-index:6 !important;
  left:50% !important;
  top:52% !important;
  width:min(360px,30vw) !important;
  transform:translate(-50%,-50%) !important;
}
#wiqCineIntro .cine-title.cine-title-logo::before{
  display:none !important;
}
#wiqCineIntro .cine-logo-wrap{
  min-height:260px !important;
  opacity:0 !important;
  transform:scale(.68) translateY(18px) !important;
  filter:blur(10px) brightness(1.2);
  animation:v32LogoReveal .85s .75s cubic-bezier(.16,.8,.2,1) forwards !important;
}
#wiqCineIntro .cine-logo-wrap::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:330px; height:330px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,249,229,.68) 0%,
    rgba(255,225,155,.34) 24%,
    rgba(232,183,78,.17) 46%,
    rgba(232,183,78,.06) 62%,
    transparent 76%);
  filter:blur(20px);
  opacity:0;
  animation:v32AuraIn .85s .68s ease forwards, v32AuraPulse 1.45s 1.5s ease-in-out infinite alternate;
}
#wiqCineIntro .cine-logo-wrap::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:232px; height:232px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  box-shadow:
    0 0 0 1px rgba(255,229,161,.40),
    0 0 34px rgba(255,214,127,.32),
    0 0 72px rgba(239,184,68,.16),
    inset 0 0 34px rgba(255,247,221,.10);
  opacity:.86;
}
#wiqCineIntro .cine-logo-mark{
  position:relative;
  z-index:2;
  display:block;
  width:min(230px,24vw) !important;
  max-width:100%;
  height:auto !important;
  margin:0 auto !important;
  mix-blend-mode:screen;
  filter:
    brightness(1.15)
    saturate(1.08)
    drop-shadow(0 0 10px rgba(255,244,207,.46))
    drop-shadow(0 0 30px rgba(244,197,97,.28))
    drop-shadow(0 12px 28px rgba(0,0,0,.42)) !important;
  animation:v32LogoPulse 1.5s 1.5s ease-in-out infinite alternate;
}

/* No extra title copy — video + glowing logo only */
#wiqCineIntro .cine-goldline,
#wiqCineIntro .cine-tagline,
#wiqCineIntro .cine-scroll{
  display:none !important;
}
#wiqCineIntro .cine-particles{
  z-index:4 !important;
  opacity:.45 !important;
  animation:none !important;
}
#wiqCineIntro .cine-vignette{
  z-index:7 !important;
  box-shadow:inset 0 0 160px 70px rgba(0,0,0,.34) !important;
  pointer-events:none;
}
#wiqCineIntro .cine-skip{z-index:9 !important}

@keyframes v32LightIn{
  from{opacity:0;transform:translateY(-50%) rotate(10deg) scaleX(.10)}
  to{opacity:.68;transform:translateY(-50%) rotate(10deg) scaleX(1)}
}
@keyframes v32LightPulse{from{opacity:.52}to{opacity:.76}}
@keyframes v32LogoReveal{
  0%{opacity:0;transform:scale(.62) translateY(20px);filter:blur(12px) brightness(1.4)}
  100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0) brightness(1.15)}
}
@keyframes v32AuraIn{
  from{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes v32AuraPulse{from{opacity:.72;transform:translate(-50%,-50%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}
@keyframes v32LogoPulse{from{transform:scale(1)}to{transform:scale(1.025)}}

@media(max-width:900px){
  #wiqCineIntro .cine-title.cine-title-logo{width:min(320px,42vw) !important}
  #wiqCineIntro .cine-logo-mark{width:min(205px,28vw) !important}
}
@media(max-width:650px){
  #wiqCineIntro .cine-video-bg{object-position:48% center}
  #wiqCineIntro .cine-title.cine-title-logo{top:50% !important;width:54vw !important}
  #wiqCineIntro .cine-logo-wrap{min-height:180px !important}
  #wiqCineIntro .cine-logo-mark{width:min(150px,38vw) !important}
  #wiqCineIntro .cine-logo-wrap::before{width:210px;height:210px}
  #wiqCineIntro .cine-logo-wrap::after{width:160px;height:160px}
}


/* =========================================================
   V33 — fix missing logo in video intro
   Use transparent logo, stronger stacking, and clearer visibility.
========================================================= */
#wiqCineIntro .cine-title.cine-title-logo{
  z-index: 20 !important;
  left:50% !important;
  top:52% !important;
  width:min(420px,34vw) !important;
  opacity:1 !important;
  visibility:visible !important;
}
#wiqCineIntro .cine-logo-wrap{
  position:relative !important;
  z-index:21 !important;
  min-height:280px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  opacity:0 !important;
}
#wiqCineIntro .cine-logo-wrap::before{
  z-index:0 !important;
  width:360px !important;
  height:360px !important;
  background:radial-gradient(circle, rgba(255,249,229,.78) 0%, rgba(255,225,155,.42) 24%, rgba(232,183,78,.22) 46%, rgba(232,183,78,.08) 62%, transparent 76%) !important;
  filter:blur(22px) !important;
}
#wiqCineIntro .cine-logo-wrap::after{
  z-index:0 !important;
}
#wiqCineIntro .cine-logo-mark{
  position:relative !important;
  z-index:2 !important;
  width:min(250px,24vw) !important;
  max-width:100% !important;
  height:auto !important;
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  mix-blend-mode:normal !important;
  filter: brightness(1.1) saturate(1.06) drop-shadow(0 0 14px rgba(255,236,190,.50)) drop-shadow(0 0 36px rgba(244,197,97,.28)) drop-shadow(0 10px 22px rgba(0,0,0,.38)) !important;
}
#wiqCineIntro .cine-vignette{
  z-index:5 !important;
}
#wiqCineIntro .cine-skip{
  z-index:30 !important;
}
@media(max-width:900px){
  #wiqCineIntro .cine-title.cine-title-logo{width:min(340px,46vw) !important}
  #wiqCineIntro .cine-logo-mark{width:min(210px,30vw) !important}
}
@media(max-width:650px){
  #wiqCineIntro .cine-title.cine-title-logo{width:58vw !important}
  #wiqCineIntro .cine-logo-wrap{min-height:190px !important}
  #wiqCineIntro .cine-logo-mark{width:min(155px,40vw) !important}
  #wiqCineIntro .cine-logo-wrap::before{width:220px !important;height:220px !important}
}


/* =========================================================
   V34 — force logo visibility over the window
========================================================= */
#wiqCineIntro .cine-title.cine-title-logo{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:min(460px,36vw) !important;
  transform:translate(-50%,-50%) !important;
  z-index:50 !important;
  opacity:1 !important;
  visibility:visible !important;
  display:block !important;
}
#wiqCineIntro .cine-logo-wrap{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:300px !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
  animation:none !important;
}
#wiqCineIntro .cine-logo-wrap::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:380px !important;
  height:380px !important;
  transform:translate(-50%,-50%) !important;
  border-radius:50% !important;
  background:radial-gradient(circle, rgba(255,252,239,.88) 0%, rgba(255,231,173,.50) 22%, rgba(240,191,71,.22) 48%, rgba(240,191,71,.08) 64%, transparent 78%) !important;
  filter:blur(20px) !important;
  opacity:1 !important;
  z-index:0 !important;
  animation:v34AuraBreath 1.6s ease-in-out infinite alternate !important;
}
#wiqCineIntro .cine-logo-wrap::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:250px !important;
  height:250px !important;
  transform:translate(-50%,-50%) !important;
  border-radius:50% !important;
  background:radial-gradient(circle, rgba(7,20,36,.35) 0%, rgba(7,20,36,.16) 52%, transparent 72%) !important;
  box-shadow:0 0 0 1px rgba(255,232,169,.45), 0 0 38px rgba(255,212,111,.25), inset 0 0 28px rgba(255,245,214,.10) !important;
  opacity:1 !important;
  z-index:1 !important;
}
#wiqCineIntro .cine-logo-mark{
  position:relative !important;
  z-index:3 !important;
  display:block !important;
  width:min(255px,22vw) !important;
  height:auto !important;
  max-width:100% !important;
  opacity:1 !important;
  visibility:visible !important;
  mix-blend-mode:normal !important;
  filter:brightness(1.14) saturate(1.05) drop-shadow(0 0 10px rgba(255,243,208,.52)) drop-shadow(0 0 30px rgba(237,193,83,.34)) drop-shadow(0 8px 16px rgba(0,0,0,.30)) !important;
  animation:v34LogoFloat 2.2s ease-in-out infinite alternate !important;
}
#wiqCineIntro .cine-video-bg{z-index:0 !important}
#wiqCineIntro .cine-bg{z-index:2 !important}
#wiqCineIntro .cine-beam{z-index:4 !important}
#wiqCineIntro .cine-particles{z-index:5 !important}
#wiqCineIntro .cine-vignette{z-index:10 !important;pointer-events:none !important}
#wiqCineIntro .cine-skip{z-index:60 !important}
@keyframes v34AuraBreath{from{opacity:.82;transform:translate(-50%,-50%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1.03)}}
@keyframes v34LogoFloat{from{transform:translateY(0) scale(1)}to{transform:translateY(-3px) scale(1.02)}}
@media(max-width:900px){
  #wiqCineIntro .cine-title.cine-title-logo{width:min(360px,48vw) !important}
  #wiqCineIntro .cine-logo-wrap{min-height:230px !important}
  #wiqCineIntro .cine-logo-mark{width:min(205px,28vw) !important}
  #wiqCineIntro .cine-logo-wrap::before{width:300px !important;height:300px !important}
  #wiqCineIntro .cine-logo-wrap::after{width:210px !important;height:210px !important}
}
@media(max-width:650px){
  #wiqCineIntro .cine-title.cine-title-logo{width:56vw !important;top:49% !important}
  #wiqCineIntro .cine-logo-wrap{min-height:180px !important}
  #wiqCineIntro .cine-logo-mark{width:min(150px,36vw) !important}
  #wiqCineIntro .cine-logo-wrap::before{width:215px !important;height:215px !important}
  #wiqCineIntro .cine-logo-wrap::after{width:150px !important;height:150px !important}
}


/* =========================================================
   V35 — final responsive startup animation for all devices
   Clean responsive override for desktop, tablet, portrait,
   landscape mobile, and short-height screens.
========================================================= */
:root{
  --wiq-intro-logo-left: 50%;
  --wiq-intro-logo-top: 46.5%;
  --wiq-intro-logo-width: clamp(170px, 18vw, 270px);
  --wiq-intro-logo-glow: clamp(240px, 26vw, 390px);
  --wiq-intro-skip-top: max(18px, env(safe-area-inset-top, 0px) + 18px);
  --wiq-intro-skip-right: max(18px, env(safe-area-inset-right, 0px) + 18px);
}

#wiqCineIntro.cine-intro{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100svh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #06101b !important;
}

#wiqCineIntro .cine-video-bg{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  z-index: 0 !important;
  background: #06101b !important;
}

#wiqCineIntro .cine-bg{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at center, rgba(255,224,148,.08) 0%, rgba(255,224,148,0) 34%),
    linear-gradient(180deg, rgba(2,8,14,.16) 0%, rgba(2,8,14,.08) 35%, rgba(2,8,14,.26) 100%) !important;
}
#wiqCineIntro .cine-bg::before,
#wiqCineIntro .cine-bg::after{
  content: none !important;
}

/* use the supplied video as the hero visual; disable older synthetic pieces */
#wiqCineIntro .arch,
#wiqCineIntro .cine-window,
#wiqCineIntro .cine-window-glow,
#wiqCineIntro .mashrabiya,
#wiqCineIntro .cine-goldline,
#wiqCineIntro .cine-tagline,
#wiqCineIntro .cine-scroll{
  display: none !important;
}

/* Keep only a subtle supplemental volumetric glow */
#wiqCineIntro .cine-beam{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(92vw, 1100px) !important;
  height: min(84vh, 760px) !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
  background: radial-gradient(ellipse at center,
    rgba(255,239,194,.12) 0%,
    rgba(255,224,148,.06) 30%,
    rgba(255,224,148,0) 66%) !important;
  filter: blur(16px) !important;
  opacity: .9 !important;
  clip-path: none !important;
  animation: wiqIntroSoftGlow 2s ease-in-out infinite alternate !important;
}
#wiqCineIntro .cine-beam::before,
#wiqCineIntro .cine-beam::after,
#wiqCineIntro .cine-beam-core{
  display: none !important;
}

/* dust remains subtle and responsive */
#wiqCineIntro .cine-particles{
  position: absolute !important;
  inset: 12% 12% 12% 12% !important;
  z-index: 4 !important;
  pointer-events: none !important;
  opacity: .8 !important;
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, rgba(0,0,0,.85) 46%, transparent 82%);
  mask-image: radial-gradient(circle at center, #000 0%, rgba(0,0,0,.85) 46%, transparent 82%);
}
#wiqCineIntro .cine-particles i{
  width: 3px !important;
  height: 3px !important;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,242,214,.78) 38%, rgba(255,242,214,0) 100%) !important;
  box-shadow: 0 0 10px rgba(255,244,224,.45) !important;
  opacity: .28 !important;
  animation: wiqResponsiveDust 7s ease-in-out infinite !important;
}
#wiqCineIntro .cine-particles i:nth-child(4n){ width: 5px !important; height: 5px !important; opacity: .16 !important; }
#wiqCineIntro .cine-particles i:nth-child(3n){ animation-duration: 8.3s !important; }

/* Main responsive logo overlay over the window */
#wiqCineIntro .cine-title.cine-title-logo{
  position: absolute !important;
  left: var(--wiq-intro-logo-left) !important;
  top: var(--wiq-intro-logo-top) !important;
  width: var(--wiq-intro-logo-width) !important;
  transform: translate(-50%, -50%) !important;
  z-index: 20 !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#wiqCineIntro .cine-title.cine-title-logo::before{ display:none !important; }
#wiqCineIntro .cine-logo-wrap{
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: clamp(150px, 18vw, 250px) !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}
#wiqCineIntro .cine-logo-wrap::before{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: var(--wiq-intro-logo-glow) !important;
  height: var(--wiq-intro-logo-glow) !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  z-index: 0 !important;
  background: radial-gradient(circle,
    rgba(255,250,238,.92) 0%,
    rgba(255,231,170,.64) 20%,
    rgba(240,190,75,.28) 45%,
    rgba(240,190,75,.10) 60%,
    transparent 78%) !important;
  filter: blur(18px) !important;
  animation: wiqIntroAuraPulse 1.8s ease-in-out infinite alternate !important;
}
#wiqCineIntro .cine-logo-wrap::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: calc(var(--wiq-intro-logo-width) + 24px) !important;
  height: calc(var(--wiq-intro-logo-width) + 24px) !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  z-index: 1 !important;
  box-shadow:
    0 0 0 1px rgba(255,233,178,.44),
    0 0 32px rgba(255,212,111,.24),
    inset 0 0 28px rgba(255,243,214,.08) !important;
}
#wiqCineIntro .cine-logo-mark{
  position: relative !important;
  z-index: 3 !important;
  display: block !important;
  width: 100% !important;
  max-width: var(--wiq-intro-logo-width) !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter:
    brightness(1.15)
    saturate(1.05)
    drop-shadow(0 0 10px rgba(255,243,211,.42))
    drop-shadow(0 0 28px rgba(239,194,82,.30))
    drop-shadow(0 10px 22px rgba(0,0,0,.34)) !important;
  animation: wiqIntroLogoIn .8s ease-out both, wiqIntroLogoFloat 2.4s 0.8s ease-in-out infinite alternate !important;
}

#wiqCineIntro .cine-vignette{
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  pointer-events: none !important;
  box-shadow: inset 0 0 120px 32px rgba(0,0,0,.34) !important;
}
#wiqCineIntro .cine-skip{
  position: absolute !important;
  top: var(--wiq-intro-skip-top) !important;
  right: var(--wiq-intro-skip-right) !important;
  z-index: 30 !important;
  font-size: clamp(11px, 1vw, 13px) !important;
  padding: 10px 16px !important;
}

@keyframes wiqIntroSoftGlow{
  from { opacity: .65; transform: translate(-50%, -50%) scale(.98); }
  to   { opacity: .95; transform: translate(-50%, -50%) scale(1.02); }
}
@keyframes wiqIntroAuraPulse{
  from { opacity: .84; transform: translate(-50%, -50%) scale(.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
}
@keyframes wiqIntroLogoIn{
  from { opacity: 0; transform: scale(.84); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes wiqIntroLogoFloat{
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-4px) scale(1.02); }
}
@keyframes wiqResponsiveDust{
  0%   { transform: translate3d(0,0,0) scale(.85); opacity: .04; }
  35%  { opacity: .24; }
  65%  { transform: translate3d(18px,-24px,0) scale(1.08); opacity: .52; }
  100% { transform: translate3d(34px,-44px,0) scale(.92); opacity: .03; }
}

/* Tablet */
@media (max-width: 1024px){
  :root{
    --wiq-intro-logo-top: 46.5%;
    --wiq-intro-logo-width: clamp(150px, 22vw, 230px);
    --wiq-intro-logo-glow: clamp(220px, 32vw, 330px);
  }
  #wiqCineIntro .cine-video-bg{ object-position: 50% 50% !important; }
}

/* Portrait devices */
@media (orientation: portrait){
  :root{
    --wiq-intro-logo-top: 45.5%;
    --wiq-intro-logo-width: clamp(132px, 28vw, 210px);
    --wiq-intro-logo-glow: clamp(190px, 40vw, 300px);
  }
  #wiqCineIntro .cine-video-bg{ object-position: 50% center !important; }
  #wiqCineIntro .cine-beam{
    width: min(96vw, 860px) !important;
    height: min(72vh, 620px) !important;
  }
  #wiqCineIntro .cine-particles{ inset: 16% 8% 18% 8% !important; }
}

/* Small phones */
@media (max-width: 640px){
  :root{
    --wiq-intro-logo-top: 45.2%;
    --wiq-intro-logo-width: clamp(120px, 31vw, 170px);
    --wiq-intro-logo-glow: clamp(170px, 43vw, 245px);
  }
  #wiqCineIntro .cine-video-bg{ object-position: 51% center !important; }
  #wiqCineIntro .cine-logo-wrap{ min-height: 138px !important; }
  #wiqCineIntro .cine-skip{ padding: 8px 12px !important; }
  #wiqCineIntro .cine-vignette{ box-shadow: inset 0 0 80px 18px rgba(0,0,0,.28) !important; }
}

/* Very small / narrow phones */
@media (max-width: 420px){
  :root{
    --wiq-intro-logo-top: 45%;
    --wiq-intro-logo-width: clamp(108px, 32vw, 148px);
    --wiq-intro-logo-glow: clamp(150px, 44vw, 220px);
  }
  #wiqCineIntro .cine-particles{ display: none !important; }
  #wiqCineIntro .cine-skip{ font-size: 10px !important; }
}

/* Landscape phones / short-height devices */
@media (max-height: 560px){
  :root{
    --wiq-intro-logo-top: 45.5%;
    --wiq-intro-logo-width: clamp(106px, 16vw, 154px);
    --wiq-intro-logo-glow: clamp(150px, 24vw, 230px);
  }
  #wiqCineIntro .cine-video-bg{ object-position: 50% 46% !important; }
  #wiqCineIntro .cine-logo-wrap{ min-height: 120px !important; }
  #wiqCineIntro .cine-beam{ height: min(94vh, 420px) !important; }
  #wiqCineIntro .cine-skip{ padding: 7px 11px !important; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #wiqCineIntro .cine-logo-mark,
  #wiqCineIntro .cine-logo-wrap::before,
  #wiqCineIntro .cine-beam,
  #wiqCineIntro .cine-particles i,
  #wiqCineIntro .cine-bg{
    animation: none !important;
  }
}


/* V36 - Tabulate institutional header */
.institutional-nav{
 position:relative;
 z-index:1000;
 background:rgba(255,255,255,.94);
 backdrop-filter:blur(12px);
 -webkit-backdrop-filter:blur(12px);
 border-bottom:1px solid rgba(15,45,38,.08);
}
.institutional-nav-inner{
 min-height:82px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:28px;
}
.institutional-links{
 display:flex;
 align-items:center;
 gap:28px;
}
.institutional-links a{
 color:#10251f;
 text-decoration:none;
 font-size:14px;
 font-weight:600;
 letter-spacing:.04em;
}
.institutional-links a:hover{color:#b48a3c}
.wq-menu-toggle.institutional-mobile-menu{
 display:flex;
 align-items:center;
 gap:10px;
 border:0;
 background:#0b5b4a;
 color:#fff;
 padding:13px 22px;
 border-radius:999px;
 cursor:pointer;
 font-weight:700;
 letter-spacing:.08em;
}
.wq-menu-label{text-transform:uppercase}
.wq-menu-panel{z-index:3000!important}
@media(max-width:1100px){
 .institutional-links{display:none}
 .institutional-mobile-menu{display:flex!important}
}
@media(max-width:600px){
 .institutional-nav-inner{min-height:70px;padding:0 18px}
 .institutional-brand-copy small{display:none}
 .wq-menu-toggle.institutional-mobile-menu{padding:11px 16px}
}


/* =========================================================
   V37 - Full institutional header redesign
   Inspired by WQ-style official organization layout
========================================================= */

.institutional-topbar{
    height:34px !important;
    background:#063d32 !important;
    color:#e8d39a !important;
    display:flex !important;
    align-items:center !important;
    font-size:11px !important;
    letter-spacing:.12em !important;
}

.institutional-topbar-inner{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
}

.institutional-nav{
    background:#fff !important;
    box-shadow:0 2px 12px rgba(0,0,0,.08) !important;
    border:0 !important;
}

.institutional-nav-inner{
    height:92px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
}

.institutional-brand{
    flex-shrink:0 !important;
}

.institutional-brand-copy strong{
    font-family:Georgia,serif !important;
    font-size:18px !important;
    letter-spacing:.06em !important;
    color:#12352d !important;
}

.institutional-brand-copy small{
    color:#8b8b7d !important;
    letter-spacing:.12em !important;
    font-size:9px !important;
}

.institutional-links{
    display:flex !important;
    align-items:center !important;
    gap:38px !important;
}

.institutional-links a{
    position:relative !important;
    font-size:13px !important;
    font-weight:700 !important;
    letter-spacing:.08em !important;
    color:#12352d !important;
    text-transform:uppercase !important;
}

.institutional-links a:after{
    content:"";
    position:absolute;
    left:0;
    bottom:-10px;
    width:0;
    height:2px;
    background:#c49b45;
    transition:.3s;
}

.institutional-links a:hover:after{
    width:100%;
}

.wq-menu-toggle.institutional-mobile-menu{
    background:#063d32 !important;
    border-radius:3px !important;
    padding:14px 26px !important;
    text-transform:uppercase !important;
}

.wq-menu-label{
    font-size:12px !important;
    letter-spacing:.15em !important;
}

/* Desktop always shows Tabulate button similar official sites */
@media(min-width:1100px){
    .institutional-links{
        display:none !important;
    }

    .institutional-mobile-menu{
        display:flex !important;
    }
}

@media(max-width:1099px){
    .institutional-links{
        display:none !important;
    }
}

@media(max-width:700px){
    .institutional-nav-inner{
        height:76px !important;
    }

    .institutional-brand-copy strong{
        font-size:14px !important;
    }

    .institutional-seal{
        width:40px !important;
        height:40px !important;
    }
}



/* =========================================================
   V38 - Always visible Tabulate button
========================================================= */

.institutional-mobile-menu{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    z-index:2000 !important;
}

.wq-menu-toggle.institutional-mobile-menu{
    background:#063d32 !important;
    color:#ffffff !important;
    border:0 !important;
    min-width:125px !important;
    justify-content:center !important;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.wq-menu-label{
    display:inline-block !important;
    color:#fff !important;
}

.wq-menu-icon{
    display:inline-flex !important;
    flex-direction:column;
    gap:4px;
}

.wq-menu-icon i{
    display:block;
    width:18px;
    height:2px;
    background:#fff;
}

@media(max-width:1100px){
    .institutional-mobile-menu{
        display:flex !important;
    }
}


/* =========================================================
 V39 - Real Tabulate HTML button
========================================================= */

.wq-real-tabulate{
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:#063d32 !important;
    color:#fff !important;
    border:none;
    border-radius:2px;
    padding:14px 26px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.16em;
    cursor:pointer;
    z-index:9999;
}

.wq-tabulate-icon{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.wq-tabulate-icon i{
    display:block;
    width:18px;
    height:2px;
    background:#fff;
}

.institutional-nav-inner{
    position:relative;
}

.wq-real-tabulate{
    margin-left:auto;
}

.institutional-mobile-menu{
    display:none !important;
}

@media(max-width:900px){
    .wq-real-tabulate{
        padding:12px 18px;
    }
}



/* V40 - Tabulate drawer visibility */
.wq-menu-panel{
    position:fixed !important;
    inset:0 !important;
    z-index:10000 !important;
    display:block !important;
    visibility:hidden;
    pointer-events:none;
}

.wq-menu-panel.open{
    visibility:visible !important;
    pointer-events:auto !important;
}

.wq-menu-sheet{
    position:absolute !important;
    top:0;
    right:0;
    height:100%;
    width:min(520px,92vw);
    background:#fff;
    padding:35px;
    transform:translateX(100%);
    transition:.45s ease;
    overflow:auto;
}

.wq-menu-panel.open .wq-menu-sheet{
    transform:translateX(0);
}

.wq-menu-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}

.wq-menu-list a{
    display:flex !important;
    align-items:center;
    gap:20px;
    padding:18px 0;
    text-decoration:none;
    border-bottom:1px solid #eee;
    color:#12352d;
}

.wq-menu-list b{
    font-size:24px;
    font-family:Georgia,serif;
}



/* =========================================================
 V41 - Working Tabulate drawer + premium hover effects
========================================================= */

body.wq-menu-open{
    overflow:hidden !important;
}

.wq-menu-panel{
    position:fixed !important;
    inset:0 !important;
    z-index:99999 !important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.35s ease;
}

.wq-menu-panel.open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}

.wq-menu-backdrop{
    position:absolute !important;
    inset:0 !important;
    background:rgba(4,20,16,.55);
    backdrop-filter:blur(6px);
}

.wq-menu-sheet{
    position:absolute !important;
    right:0;
    top:0;
    height:100%;
    width:min(520px,92vw);
    background:#fff;
    padding:45px 38px;
    transform:translateX(100%);
    transition:.45s cubic-bezier(.2,.8,.2,1);
    overflow:auto;
}

.wq-menu-panel.open .wq-menu-sheet{
    transform:translateX(0);
}

.wq-menu-close{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#063d32;
    color:white;
    border:0;
    font-size:24px;
    cursor:pointer;
}

.wq-menu-list a{
    display:flex !important;
    align-items:center;
    gap:20px;
    padding:20px 0;
    color:#12352d !important;
    text-decoration:none !important;
    border-bottom:1px solid rgba(0,0,0,.08);
    transition:.3s ease;
}

.wq-menu-list a:hover{
    padding-left:15px;
    color:#b88b3d !important;
}

.wq-menu-list a span{
    color:#b88b3d;
    font-size:13px;
}

.wq-menu-list a b{
    font-family:Georgia,serif;
    font-size:26px;
}

.wq-real-tabulate,
.btn,
button{
    transition:.3s ease !important;
}

.wq-real-tabulate:hover,
.btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(6,61,50,.25);
    background:#b88b3d !important;
    color:#fff !important;
}

.institutional-links a:hover{
    color:#b88b3d !important;
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}

@media(max-width:600px){
    .wq-menu-sheet{
        width:100vw;
        padding:30px 24px;
    }

    .wq-menu-list a b{
        font-size:22px;
    }
}



/* =========================================================
   V36 — CSS + JavaScript Islamic animated startup background
   Replaces MP4 video with a lightweight Islamic visual scene.
========================================================= */
#wiqCineIntro.cine-intro{
  background:#031813 !important;
  perspective:1200px;
}
#wiqCineIntro .wiq-islamic-scene{position:absolute;inset:0;z-index:0;overflow:hidden;background:#031813;transform-style:preserve-3d}
#wiqCineIntro .wiq-night-sky{
  position:absolute;inset:-6%;
  background:
    radial-gradient(circle at 50% 42%,rgba(215,177,92,.20) 0 1%,transparent 22%),
    radial-gradient(circle at 50% 54%,rgba(24,122,91,.38),transparent 43%),
    radial-gradient(circle at 18% 18%,rgba(21,81,68,.52),transparent 35%),
    linear-gradient(145deg,#03120f 0%,#073126 45%,#041a16 72%,#020d0b 100%);
  animation:wiqSkyBreathe 7s ease-in-out infinite alternate;
}
#wiqCineIntro .wiq-night-sky:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 32%,rgba(0,0,0,.18) 64%,rgba(0,0,0,.58) 100%)}
#wiqCineIntro .wiq-geometry{position:absolute;left:50%;top:50%;aspect-ratio:1;width:min(86vw,860px);border-radius:50%;transform:translate(-50%,-50%);opacity:.24;filter:drop-shadow(0 0 16px rgba(205,164,73,.16));}
#wiqCineIntro .wiq-geometry:before,#wiqCineIntro .wiq-geometry:after{content:"";position:absolute;inset:8%;border:1px solid rgba(218,182,101,.35);transform:rotate(45deg);border-radius:18%;box-shadow:0 0 0 1px rgba(255,255,255,.025),inset 0 0 55px rgba(207,168,82,.08)}
#wiqCineIntro .wiq-geometry:after{inset:20%;transform:rotate(22.5deg);border-radius:50%;border-style:dashed}
#wiqCineIntro .wiq-geometry-a{background:repeating-conic-gradient(from 22.5deg,rgba(211,170,77,.20) 0deg 1deg,transparent 1deg 22.5deg);animation:wiqGeoSpin 36s linear infinite}
#wiqCineIntro .wiq-geometry-b{width:min(60vw,600px);opacity:.15;background:repeating-conic-gradient(from 0deg,rgba(236,206,137,.28) 0deg 2deg,transparent 2deg 45deg);animation:wiqGeoSpinReverse 28s linear infinite}
#wiqCineIntro .wiq-light-rays{position:absolute;left:50%;top:-12%;width:min(108vw,1200px);height:96%;transform:translateX(-50%);background:conic-gradient(from 168deg at 50% 0%,transparent 0 7%,rgba(243,213,141,.08) 10%,transparent 15%,transparent 22%,rgba(243,213,141,.055) 28%,transparent 34%,transparent 100%);filter:blur(10px);animation:wiqRayDrift 7s ease-in-out infinite alternate;opacity:.72}
#wiqCineIntro .wiq-crescent-wrap{position:absolute;left:50%;top:14%;width:92px;height:92px;transform:translateX(-50%);z-index:3;filter:drop-shadow(0 0 18px rgba(231,193,101,.40));animation:wiqCrescentFloat 4s ease-in-out infinite alternate}
#wiqCineIntro .wiq-crescent{position:absolute;inset:7px;border-radius:50%;background:#d8b45f;box-shadow:0 0 24px rgba(224,185,92,.28)}
#wiqCineIntro .wiq-crescent:after{content:"";position:absolute;width:72px;height:72px;left:23px;top:-3px;border-radius:50%;background:#082d23}
#wiqCineIntro .wiq-star{position:absolute;right:-4px;top:8px;color:#efd793;font-size:25px;text-shadow:0 0 14px #eacb79;animation:wiqStarPulse 1.8s ease-in-out infinite alternate}
#wiqCineIntro .wiq-rosette{position:absolute;left:50%;top:50%;width:min(76vw,680px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:1;opacity:.20;animation:wiqRosetteFloat 9s ease-in-out infinite alternate}
#wiqCineIntro .wiq-rosette span{position:absolute;inset:10%;border:1px solid rgba(234,203,127,.30);border-radius:24%;transform:rotate(45deg)}
#wiqCineIntro .wiq-rosette span:nth-child(2){inset:20%;transform:rotate(22.5deg);border-radius:50%;border-color:rgba(255,255,255,.12)}
#wiqCineIntro .wiq-rosette span:nth-child(3){inset:30%;transform:rotate(67.5deg);border-radius:18%;border-color:rgba(211,170,77,.24)}
#wiqCineIntro .wiq-mosque-silhouette{position:absolute;left:50%;bottom:-2px;width:min(1120px,96vw);height:34vh;transform:translateX(-50%);z-index:2;opacity:.92;filter:drop-shadow(0 -18px 32px rgba(0,0,0,.32))}
#wiqCineIntro .wiq-mosque-silhouette:before{content:"";position:absolute;left:9%;right:9%;bottom:0;height:43%;background:linear-gradient(#03110e,#010705);clip-path:polygon(0 100%,0 70%,7% 70%,7% 52%,13% 52%,13% 67%,21% 67%,21% 46%,30% 46%,30% 70%,38% 70%,38% 58%,45% 58%,45% 68%,55% 68%,55% 58%,62% 58%,62% 70%,70% 70%,70% 46%,79% 46%,79% 67%,87% 67%,87% 52%,93% 52%,93% 70%,100% 70%,100% 100%)}
#wiqCineIntro .wiq-dome{position:absolute;bottom:27%;background:#020a08;border-radius:50% 50% 8% 8% / 65% 65% 10% 10%;box-shadow:0 -2px 0 rgba(205,164,73,.18)}
#wiqCineIntro .wiq-dome:before{content:"";position:absolute;left:50%;top:-21px;width:2px;height:22px;background:#bb9950}
#wiqCineIntro .wiq-dome:after{content:"☾";position:absolute;left:50%;top:-39px;transform:translateX(-50%);color:#d3af59;font-size:22px}
#wiqCineIntro .d1{left:36%;width:28%;height:62%}#wiqCineIntro .d2{left:16%;width:18%;height:43%}#wiqCineIntro .d3{right:16%;width:18%;height:43%}
#wiqCineIntro .wiq-minaret{position:absolute;bottom:17%;width:3.1%;height:72%;background:linear-gradient(90deg,#010604,#04110d,#010604);border-radius:50% 50% 0 0;box-shadow:0 -2px 0 rgba(207,168,82,.18)}
#wiqCineIntro .wiq-minaret:before{content:"";position:absolute;left:-55%;top:20%;width:210%;height:5%;border-radius:50%;background:#020906;border-top:1px solid rgba(209,170,79,.22)}
#wiqCineIntro .wiq-minaret:after{content:"☾";position:absolute;left:50%;top:-29px;transform:translateX(-50%);color:#ccaa58;font-size:18px}
#wiqCineIntro .m1{left:8%}#wiqCineIntro .m2{right:8%}
#wiqCineIntro .wiq-horizon-glow{position:absolute;left:50%;bottom:4%;width:80vw;height:22vh;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(198,158,70,.17),transparent 68%);filter:blur(18px);z-index:1;animation:wiqHorizonPulse 3.4s ease-in-out infinite alternate}
#wiqCineIntro .wiq-particle-field{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
#wiqCineIntro .wiq-speck{position:absolute;width:3px;height:3px;border-radius:50%;background:#ecd48c;box-shadow:0 0 9px rgba(236,212,140,.75);opacity:0;animation:wiqSpeckRise var(--dur) linear infinite;animation-delay:var(--delay)}
#wiqCineIntro .cine-title.cine-title-logo{z-index:12 !important;top:50% !important}
#wiqCineIntro .cine-logo-wrap::before{background:radial-gradient(circle,rgba(255,248,224,.82),rgba(221,183,95,.38) 28%,rgba(214,174,81,.13) 52%,transparent 74%) !important}
#wiqCineIntro .cine-logo-wrap::after{border:1px solid rgba(226,190,104,.35);box-shadow:0 0 0 7px rgba(222,183,91,.025),0 0 40px rgba(205,166,76,.18) !important}
#wiqCineIntro .cine-vignette{z-index:15 !important;box-shadow:inset 0 0 150px 40px rgba(0,0,0,.52) !important}
#wiqCineIntro .cine-skip{z-index:30 !important;background:rgba(3,26,21,.52) !important;border:1px solid rgba(219,184,102,.38) !important;color:#ecd894 !important;backdrop-filter:blur(8px)}
#wiqCineIntro .cine-skip:hover{background:#d4b264 !important;color:#082a20 !important;border-color:#e5ca87 !important}
@keyframes wiqSkyBreathe{from{transform:scale(1);filter:saturate(.95)}to{transform:scale(1.035);filter:saturate(1.12)}}
@keyframes wiqGeoSpin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes wiqGeoSpinReverse{from{transform:translate(-50%,-50%) rotate(360deg)}to{transform:translate(-50%,-50%) rotate(0)}}
@keyframes wiqRayDrift{from{transform:translateX(-50%) rotate(-2deg);opacity:.48}to{transform:translateX(-50%) rotate(2deg);opacity:.82}}
@keyframes wiqCrescentFloat{from{transform:translateX(-50%) translateY(0) rotate(-2deg)}to{transform:translateX(-50%) translateY(8px) rotate(2deg)}}
@keyframes wiqStarPulse{from{opacity:.5;transform:scale(.8) rotate(0)}to{opacity:1;transform:scale(1.18) rotate(25deg)}}
@keyframes wiqRosetteFloat{from{transform:translate(-50%,-50%) scale(.96) rotate(-3deg)}to{transform:translate(-50%,-50%) scale(1.03) rotate(3deg)}}
@keyframes wiqHorizonPulse{from{opacity:.45;transform:translateX(-50%) scale(.96)}to{opacity:.85;transform:translateX(-50%) scale(1.08)}}
@keyframes wiqSpeckRise{0%{transform:translate3d(0,15vh,0) scale(.4);opacity:0}12%{opacity:.65}76%{opacity:.35}100%{transform:translate3d(var(--drift),-110vh,0) scale(1.3);opacity:0}}
@media(max-width:640px){#wiqCineIntro .wiq-crescent-wrap{top:13%;width:68px;height:68px}#wiqCineIntro .wiq-crescent:after{width:54px;height:54px;left:18px}#wiqCineIntro .wiq-mosque-silhouette{height:29vh;width:112vw}#wiqCineIntro .wiq-geometry{width:116vw}#wiqCineIntro .wiq-geometry-b{width:84vw}}
@media(max-height:560px){#wiqCineIntro .wiq-crescent-wrap{top:8%;transform:translateX(-50%) scale(.72)}#wiqCineIntro .wiq-mosque-silhouette{height:42vh}#wiqCineIntro .cine-title.cine-title-logo{top:49% !important}}
@media(prefers-reduced-motion:reduce){#wiqCineIntro .wiq-night-sky,#wiqCineIntro .wiq-geometry,#wiqCineIntro .wiq-light-rays,#wiqCineIntro .wiq-crescent-wrap,#wiqCineIntro .wiq-star,#wiqCineIntro .wiq-rosette,#wiqCineIntro .wiq-horizon-glow,#wiqCineIntro .wiq-speck{animation:none !important}}