@font-face{font-family:Inter;src:url('assets/inter-400.woff2')}@font-face{font-family:Inter;src:url('assets/inter-500.woff2');font-weight:500}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f8f8f6;color:#141414;font-family:Inter,Arial,sans-serif;font-size:15px}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid #444;outline-offset:6px}header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;position:absolute;top:0;width:100%;z-index:3}.wordmark{font-size:23px;letter-spacing:.12em;font-weight:500}.wordmark span{font-size:11px;vertical-align:top;letter-spacing:0}nav{display:flex;gap:34px;align-items:center}nav a{color:#676767;font-size:14px}nav a.active{color:#111}.pill{border:1px solid #aaa;border-radius:30px;padding:10px 18px;display:inline-flex;gap:24px;color:#111}.hero{height:100svh;min-height:680px;position:relative;padding:0 4% 40px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#f5f5f3}.shadows{position:absolute;inset:-20%;filter:blur(22px);opacity:.2;transform:rotate(-25deg);background:repeating-conic-gradient(from 30deg at 75% 5%,transparent 0deg 13deg,#555 15deg 17deg,transparent 20deg 32deg);mask-image:linear-gradient(#000,transparent 85%);animation:drift 20s ease-in-out infinite alternate}.hero h1{font-weight:400;font-size:clamp(44px,5.5vw,88px);line-height:1.05;letter-spacing:-.065em;max-width:1100px;position:relative;margin:0 0 65px}.hero-bottom{position:relative;border-top:1px solid #d6d6d4;padding-top:25px;display:flex;justify-content:space-between;align-items:center}.circle{display:inline-grid;place-items:center;border:1px solid #aaa;border-radius:50%;width:42px;height:42px;margin-left:14px}.section{padding:100px 4%}.section-label{display:flex;justify-content:space-between;padding-bottom:32px;border-top:1px solid #ccc;padding-top:20px}.section-label h2{font-size:19px;font-weight:400;margin:0;letter-spacing:-.04em}.section-label span{font-size:12px;color:#777}.grid{display:grid;grid-template-columns:1fr 1fr;gap:50px 24px}.project img{width:100%;aspect-ratio:1.5;object-fit:cover;display:block;transition:transform .65s}.image-wrap{overflow:hidden;background:#eee}.project:hover img{transform:scale(1.035)}.caption{display:flex;justify-content:space-between;align-items:center;padding-top:16px}.caption h3{font-size:17px;letter-spacing:-.04em;font-weight:400;margin:0}.caption small{color:#777;font-size:11px;display:block;margin-top:6px}.all{display:block;width:max-content;margin:50px auto 0}.studio{display:grid;grid-template-columns:1fr 2fr;border-top:1px solid #ccc;padding-top:26px;gap:40px}.studio h2{font-weight:400;font-size:19px;margin:0}.studio p{font-size:clamp(28px,3.7vw,56px);line-height:1.17;letter-spacing:-.055em;margin:0;max-width:1000px}.studio small{display:block;font-size:14px;letter-spacing:0;color:#777;line-height:1.7;margin-top:35px;max-width:520px}.page{padding:170px 4% 100px;min-height:75vh}.page h1{font-size:clamp(55px,8vw,120px);font-weight:400;letter-spacing:-.075em;margin:0 0 30px}.intro{color:#777;max-width:480px;line-height:1.6;margin-bottom:60px}footer{padding:70px 4% 25px;background:#ededeb}.footer-top{padding-bottom:85px}.footer-top p{color:#777}.footer-top>a{font-size:clamp(36px,5.7vw,85px);letter-spacing:-.065em;display:flex;justify-content:space-between}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:25px;border-top:1px solid #ccc;padding-top:35px}.footer-grid small{display:block;color:#777;margin-bottom:20px}.footer-grid div a{display:block;margin:10px 0}.bottom{display:flex;justify-content:space-between;color:#777;font-size:12px;padding-top:70px}.gallery{display:grid;gap:24px}.gallery img{width:100%;height:auto}.contact-link{font-size:clamp(25px,4vw,60px);letter-spacing:-.055em;border-bottom:1px solid #aaa;padding-bottom:12px;display:inline-block}.contact-details{margin-top:70px;display:flex;gap:80px;line-height:2}.contact-details small{display:block;color:#777}.logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#ccc;border:1px solid #ccc}.logo-grid a{display:grid;place-items:center;min-height:250px;background:#f8f8f6}.logo-grid img{width:100%;height:100%;object-fit:cover}@keyframes drift{to{transform:rotate(-17deg) translate(4%,3%)}}@media(max-width:650px){header{height:76px;padding:0 5%}.wordmark{font-size:18px}nav{gap:14px}nav a{font-size:11px}nav .pill{padding:7px 10px;gap:5px}.hero{padding:0 5% 25px;min-height:620px}.hero h1{font-size:48px;margin-bottom:45px}.hero-bottom{font-size:12px}.section{padding:65px 5%}.grid{grid-template-columns:1fr;gap:35px}.studio{grid-template-columns:1fr;gap:30px}.footer-grid{grid-template-columns:1fr 1fr;row-gap:35px}.footer-grid>.wordmark{grid-column:1/-1}.footer-top{padding-bottom:50px}.page{padding:140px 5% 70px}.contact-details{gap:30px;flex-direction:column}.logo-grid{grid-template-columns:1fr 1fr}.logo-grid a{min-height:160px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.logofolio-page{padding-top:170px}.logofolio-heading{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #dededb;margin-bottom:56px;padding-bottom:30px}.logofolio-heading h1{font-size:clamp(48px,6vw,82px);margin:0;letter-spacing:-.06em}.logofolio-heading p{font-size:14px;color:#777;margin:0}.logo-grid{gap:0;border:0;background:none;grid-template-columns:repeat(3,minmax(0,1fr))}.logo-tile{aspect-ratio:1;overflow:hidden}.logo-grid .logo-tile img{width:100%;height:100%;display:block;object-fit:contain;transition:transform .4s}.logo-tile:hover img{transform:scale(1.035)}.concept-note{font-size:12px;color:#777;margin-top:24px}@media(max-width:650px){.logofolio-page{padding-top:135px}.logofolio-heading{margin-bottom:32px;padding-bottom:24px}.logofolio-heading p{font-size:11px}.logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);pointer-events:none}.hero-video-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(248,248,246,.65),rgba(248,248,246,.2) 40%,rgba(248,248,246,.88) 100%);pointer-events:none}@media(prefers-reduced-motion:reduce){.hero-video{display:none}}
.hero{color:#fff;background:#151515}.hero-video-overlay{background:linear-gradient(180deg,rgba(0,0,0,.58),rgba(0,0,0,.38) 40%,rgba(0,0,0,.74) 100%)}.hero-bottom{border-color:rgba(255,255,255,.3)}.hero .circle{border-color:rgba(255,255,255,.6)}body:has(.hero) header{color:#fff}body:has(.hero) header nav a{color:rgba(255,255,255,.8)}body:has(.hero) header nav a.active,body:has(.hero) header .pill{color:#fff}body:has(.hero) header .pill{border-color:rgba(255,255,255,.55)}
.word-clip{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.13em;margin-bottom:-.13em}.word-rise{display:inline-block;transform:translateY(115%) rotate(3deg);transition:transform 1.05s cubic-bezier(.22,1,.36,1);transition-delay:var(--delay,0ms)}.is-visible .word-rise{transform:translateY(0) rotate(0)}.motion-reveal:not(.text-reveal){opacity:0;transform:translateY(35px);transition:opacity .85s ease,transform 1s cubic-bezier(.22,1,.36,1);transition-delay:var(--reveal-delay,0ms)}.motion-reveal.is-visible{opacity:1;transform:none}.pill{transition:translate .35s ease,background .3s,color .3s}.pill:hover{background:#171717;color:#fff}body:has(.hero) header .pill:hover{background:#fff;color:#111}header nav a:not(.pill){position:relative}header nav a:not(.pill):after{content:'';position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s}header nav a:hover:after{transform:scaleX(1);transform-origin:left}.caption>span,.footer-top>a>span{transition:transform .4s}.project:hover .caption>span,.footer-top>a:hover>span{transform:translate(4px,-4px)}.hero .circle{animation:scroll-cue 2.5s ease-in-out infinite}@keyframes scroll-cue{50%{transform:translateY(5px)}}@media(prefers-reduced-motion:reduce){.word-rise,.motion-reveal:not(.text-reveal){transform:none;opacity:1}.pill{translate:none!important}}

.projects-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.more-projects{margin-top:100px}.more-projects .section-label>a{font-size:13px}@media(max-width:900px){.projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.projects-grid{grid-template-columns:1fr}.more-projects{margin-top:60px}}

.footer-grid .social-pending{display:block;margin:10px 0}
footer{background:#07226D;color:#fff}footer .footer-top p,footer .footer-grid small,footer .bottom{color:#fff}footer .footer-grid{border-top-color:rgba(255,255,255,.3)}
.hero{background:#07226D}.hero-video-overlay{background:linear-gradient(180deg,rgba(7,34,109,.76),rgba(7,34,109,.58) 40%,rgba(7,34,109,.88) 100%)}
/* Mowif identity direction */
:root{--mowif-blue:#07226D;--mowif-cream:#E0E0E0}body{background:var(--mowif-cream);color:var(--mowif-blue)}header{height:105px}.wordmark{display:inline-flex;align-items:center;gap:15px}.wordmark .brand-en{font-size:12px;line-height:1.15;letter-spacing:.07em}.wordmark .brand-ar{font-size:37px;font-family:Arial,sans-serif;line-height:1;letter-spacing:-.06em}.hero h1{font-size:clamp(64px,9vw,145px);letter-spacing:-.075em;line-height:.97;margin-bottom:55px}.hero-bottom{font-size:12px;letter-spacing:.015em}.section{padding-top:90px;padding-bottom:90px}.section-label{border-color:rgba(7,34,109,.25)}.section-label h2{font-size:25px;letter-spacing:-.05em}.section-label span{color:var(--mowif-blue)}.project .image-wrap{background:#e4dac3}.project img{aspect-ratio:1.35;object-fit:cover}.caption{padding-top:18px}.caption h3{font-size:22px;font-weight:500}.caption small{font-size:12px;color:#535b7e}.grid{gap:55px 25px}.pill{border-color:var(--mowif-blue);color:var(--mowif-blue)}.pill:hover{background:var(--mowif-blue)}.studio{border-color:rgba(7,34,109,.25);grid-template-columns:1fr 2fr}.studio h2{font-size:25px}.studio p{font-size:clamp(38px,5vw,74px)}.studio small{font-size:16px;color:#535b7e;max-width:620px}.page h1{font-size:clamp(64px,9vw,130px)}.intro{font-size:17px;color:#535b7e;max-width:570px}.logofolio-heading{border-color:rgba(7,34,109,.25)}.logofolio-heading p,.concept-note{color:#535b7e}.footer-top>a{font-size:clamp(42px,7vw,105px);line-height:1.06;max-width:1000px}.footer-top p{font-size:13px}.footer-grid{grid-template-columns:2fr 1fr 1fr 1.5fr}header nav a,header nav a.active{color:var(--mowif-blue)}.contact-link{border-color:var(--mowif-blue)}.more-projects{padding-top:25px}.gallery{gap:30px}.gallery img{background:var(--mowif-cream)}@media(max-width:650px){header{height:85px}.wordmark{gap:8px}.wordmark .brand-en{font-size:9px}.wordmark .brand-ar{font-size:27px}.hero h1{font-size:68px}.hero-bottom{font-size:10px}.section-label h2,.studio h2{font-size:22px}.footer-grid{grid-template-columns:1fr 1fr}.caption h3{font-size:20px}}

body{font-family:'IBM Plex Sans','IBM Plex Sans Arabic',sans-serif}body :lang(ar),.wordmark .brand-ar{font-family:'IBM Plex Sans Arabic',sans-serif}.hero h1{font-weight:400;letter-spacing:-.055em}.page h1{letter-spacing:-.055em}.studio p{letter-spacing:-.04em}.wordmark .brand-ar{font-weight:500;letter-spacing:0}.wordmark .brand-en{font-weight:500;letter-spacing:.06em}.caption h3{font-weight:500;letter-spacing:-.025em}

.brand-logo{display:block;width:155px;height:auto}body:has(.hero) header .brand-logo{content:url("assets/wifak-logo-white.svg")}footer .brand-logo{width:185px}@media(max-width:650px){.brand-logo{width:112px}footer .brand-logo{width:155px}}
.language-switch{border:0;background:none;color:inherit;cursor:pointer;font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;font-size:13px;padding:6px}body:has(.hero) .language-switch{color:#fff}html[lang=ar] body{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif}html[lang=ar] .hero h1,html[lang=ar] .page h1,html[lang=ar] .studio p,html[lang=ar] .footer-top>a{letter-spacing:0;line-height:1.35}html[lang=ar] .hero h1{font-size:clamp(60px,8vw,125px)}html[lang=ar] .caption h3,html[lang=ar] h2{letter-spacing:0}html[lang=ar] .circle{margin-left:0;margin-right:14px}html[lang=ar] .word-clip{padding-bottom:.3em;margin-bottom:-.3em}html[lang=ar] .word-rise{transform:translateY(130%)}html[lang=ar] .is-visible .word-rise{transform:none}html[lang=ar] .brand-logo{direction:ltr}html[lang=ar] .studio small{line-height:1.9}@media(max-width:650px){header nav{gap:9px}.language-switch{font-size:10px;padding:2px}html[lang=ar] .hero h1{font-size:58px}header .brand-logo{width:95px}}
@font-face{font-family:ThmanyahText;src:url('assets/thmanyah-serif-text-400.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:ThmanyahDisplay;src:url('assets/thmanyah-serif-display-400.woff2') format('woff2');font-weight:400;font-display:swap}html[lang=ar] body,html[lang=ar] .language-switch{font-family:ThmanyahText,'IBM Plex Sans Arabic',sans-serif}html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] .studio p,html[lang=ar] .footer-top>a{font-family:ThmanyahDisplay,ThmanyahText,serif;font-weight:400}html[lang=ar] .studio small{font-family:ThmanyahText,serif}html[lang=ar] .hero h1{line-height:1.4}html[lang=ar] .caption h3{font-family:ThmanyahText,serif}
/* Digital font test: use locally installed Thmanyah Sans when available. */
@font-face{font-family:ThmanyahDigital;src:local('thmanyah Sans'),local('thmanyahsans-Regular'),local('Thmanyah Sans Regular');font-weight:400;font-display:swap}html[lang=ar] body,html[lang=ar] .language-switch,html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] .studio p,html[lang=ar] .studio small,html[lang=ar] .footer-top>a,html[lang=ar] .caption h3{font-family:ThmanyahDigital,'IBM Plex Sans Arabic',sans-serif}
/* Off-white and blue palette */
:root{--mowif-cream:#f8f7f2;--mowif-blue:#07226D}body,footer,.hero{background:#f8f7f2;color:#07226D}.hero-video-overlay{background:linear-gradient(180deg,rgba(248,247,242,.88),rgba(248,247,242,.72) 40%,rgba(248,247,242,.94) 100%)}body:has(.hero) header,body:has(.hero) header nav a,body:has(.hero) header nav a.active,body:has(.hero) header .pill,body:has(.hero) .language-switch{color:#07226D}body:has(.hero) header .brand-logo{content:url('assets/wifak-logo-black.svg')}body:has(.hero) header .pill,.hero .circle,.hero-bottom{border-color:rgba(7,34,109,.3)}footer .footer-top p,footer .footer-grid small,footer .bottom,.intro,.caption small,.studio small,.logofolio-heading p,.concept-note{color:#07226D}footer .footer-grid{border-color:rgba(7,34,109,.25)}footer .brand-logo{content:url('assets/wifak-logo-black.svg')}body:has(.hero) header .pill:hover,.pill:hover{background:#07226D;color:#f8f7f2}
footer{background:#07226D;color:#f8f7f2}footer .footer-top p,footer .footer-grid small,footer .bottom{color:#f8f7f2}footer .footer-grid{border-color:rgba(248,247,242,.3)}footer .brand-logo{content:url('assets/wifak-logo-white.svg')}

.project img{aspect-ratio:1495/964}

.projects-page{padding-inline:2%;padding-top:180px}.projects-page>h1{text-align:center;font-size:clamp(70px,12vw,170px);margin-bottom:32px}.projects-page>.intro{text-align:center;margin:0 auto 75px;max-width:600px}.projects-page .projects-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px;row-gap:50px;align-items:start}.projects-page .project img{aspect-ratio:1.5;object-fit:cover}.projects-page .caption{padding-top:16px;display:block}.projects-page .caption h3{font-size:20px;line-height:1.35;margin:0}.projects-page .caption small{font-size:14px;line-height:1.5;margin-top:6px}.projects-page .project{min-width:0}@media(max-width:767px){.projects-page{padding-top:140px;padding-inline:5%}.projects-page .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 16px}.projects-page>.intro{margin-bottom:45px}.projects-page .caption h3{font-size:18px}.projects-page .caption small{font-size:12px}}@media(max-width:479px){.projects-page .projects-grid{grid-template-columns:1fr}}
.projects-page>h1{text-align:start;font-size:clamp(64px,9vw,130px);margin-bottom:30px}.projects-page>.intro{text-align:start;margin:0 0 60px;max-width:570px}.projects-page>h1,.projects-page>.intro{margin-inline-start:2.0833%}@media(max-width:767px){.projects-page>h1,.projects-page>.intro{margin-inline-start:0}.projects-page>.intro{margin-bottom:45px}}
/* Lighter surfaces with soft blue gradients */
:root{--mowif-cream:#fcfcfa}body,.hero{background:#fcfcfa}.hero-video-overlay{background:radial-gradient(ellipse at 4% 4%,rgba(161,179,232,.35),transparent 60%),linear-gradient(145deg,rgba(252,252,250,.93),rgba(245,248,255,.79) 48%,rgba(252,252,250,.95))}.project .image-wrap,.gallery img{border-radius:14px;overflow:hidden}.logo-tile{border-radius:14px}.logo-grid{gap:12px}.gallery img{background:#fcfcfa}footer{background:radial-gradient(ellipse at 0% 0%,rgba(153,175,237,.65),transparent 48%),linear-gradient(135deg,#284ba5 0%,#07226D 53%,#05133f 100%);color:#fcfcfa}footer .footer-top p,footer .footer-grid small,footer .bottom{color:#fcfcfa}.pill:hover{color:#fcfcfa}@media(max-width:650px){.project .image-wrap,.gallery img,.logo-tile{border-radius:10px}.logo-grid{gap:8px}}
/* Opening screen mirrors the footer gradient */
.hero{background:#07226D;color:#fcfcfa}.hero-video-overlay{background:radial-gradient(ellipse at 0% 0%,rgba(153,175,237,.45),transparent 48%),linear-gradient(135deg,rgba(40,75,165,.7) 0%,rgba(7,34,109,.76) 53%,rgba(5,19,63,.9) 100%)}body:has(.hero) header,body:has(.hero) header nav a,body:has(.hero) header nav a.active,body:has(.hero) header .pill,body:has(.hero) .language-switch{color:#fcfcfa}body:has(.hero) header .brand-logo{content:url('assets/wifak-logo-white.svg')}body:has(.hero) header .pill,.hero .circle,.hero-bottom{border-color:rgba(252,252,250,.4)}body:has(.hero) header .pill:hover{background:#fcfcfa;color:#07226D}
/* Black and light gray palette test */
:root{--mowif-blue:#171717;--mowif-cream:#f2f2f2}body{background:#f2f2f2;color:#171717}.hero{background:#111;color:#f2f2f2}.hero-video-overlay{background:radial-gradient(ellipse at 0% 0%,rgba(180,180,180,.3),transparent 48%),linear-gradient(135deg,rgba(50,50,50,.65),rgba(15,15,15,.78) 53%,rgba(0,0,0,.9))}footer{background:radial-gradient(ellipse at 0% 0%,rgba(145,145,145,.3),transparent 48%),linear-gradient(135deg,#303030,#111 53%,#000);color:#f2f2f2}footer .footer-top p,footer .footer-grid small,footer .bottom{color:#f2f2f2}header nav a,header nav a.active,.language-switch,.intro,.caption small,.studio small,.logofolio-heading p,.concept-note{color:#171717}body:has(.hero) header,body:has(.hero) header nav a,body:has(.hero) header nav a.active,body:has(.hero) header .pill,body:has(.hero) .language-switch{color:#f2f2f2}.pill:hover{background:#171717;color:#f2f2f2}body:has(.hero) header .pill:hover{background:#f2f2f2;color:#171717}.section-label,.studio,.logofolio-heading,.contact-link{border-color:rgba(0,0,0,.2)}.section-label span{color:#171717}.project .image-wrap,.gallery img{background:#e5e5e5}header .brand-logo{content:url('assets/wifak-logo-black.svg')}
.hero-actions{display:flex;align-items:center;gap:25px}.hero .portfolio-download,footer .portfolio-download{border:1px solid rgba(242,242,242,.7);color:#f2f2f2;padding:11px 20px;font-size:13px;white-space:nowrap}footer .footer-grid .portfolio-download{display:inline-flex;margin-top:16px}.hero .portfolio-download:hover,footer .portfolio-download:hover{background:#f2f2f2;color:#171717}@media(max-width:650px){.hero-actions{gap:12px}.hero .portfolio-download,footer .portfolio-download{font-size:11px;padding:9px 12px}.hero-bottom{gap:16px;flex-wrap:wrap}}
/* Pure black and white */
:root{--mowif-blue:#000;--mowif-cream:#fff}body{background:#fff;color:#000}.hero{background:#000;color:#fff}.hero-video-overlay{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.45) 40%,rgba(0,0,0,.85))}footer{background:#000;color:#fff}footer .footer-top p,footer .footer-grid small,footer .bottom{color:#fff}header nav a,header nav a.active,.language-switch,.intro,.caption small,.studio small,.logofolio-heading p,.concept-note,.section-label span{color:#000}body:has(.hero) header,body:has(.hero) header nav a,body:has(.hero) header nav a.active,body:has(.hero) header .pill,body:has(.hero) .language-switch{color:#fff}.pill:hover{background:#000;color:#fff}body:has(.hero) header .pill:hover,.hero .portfolio-download:hover,footer .portfolio-download:hover{background:#fff;color:#000}.hero .portfolio-download,footer .portfolio-download{color:#fff}.project .image-wrap,.gallery img{background:#fff}
/* Blue and white */
:root{--mowif-blue:#042184;--mowif-cream:#fff}body{background:#fff;color:#042184}.hero{background:#042184;color:#fff}.hero-video-overlay{background:linear-gradient(180deg,rgba(4,33,132,.72),rgba(4,33,132,.6) 40%,rgba(4,33,132,.9))}footer{background:#042184;color:#fff}header nav a,header nav a.active,.language-switch,.intro,.caption small,.studio small,.logofolio-heading p,.concept-note,.section-label span{color:#042184}header .brand-logo{content:url('assets/wifak-logo-black.svg')}body:has(.hero) header,body:has(.hero) header nav a,body:has(.hero) header nav a.active,body:has(.hero) header .pill,body:has(.hero) .language-switch{color:#fff}body:has(.hero) header .brand-logo,footer .brand-logo{content:url('assets/wifak-logo-white.svg')}.pill:hover{background:#042184;color:#fff}body:has(.hero) header .pill:hover,.hero .portfolio-download:hover,footer .portfolio-download:hover{background:#fff;color:#042184}.section-label,.studio,.logofolio-heading,.contact-link{border-color:rgba(4,33,132,.25)}
footer{background:#fff;color:#042184}footer .footer-top p,footer .footer-grid small,footer .bottom{color:#042184}footer .footer-grid{border-color:rgba(4,33,132,.25)}footer .brand-logo{content:url('assets/wifak-logo-black.svg')}footer .portfolio-download{color:#042184;border-color:#042184}footer .portfolio-download:hover{background:#042184;color:#fff}
/* Dark footer, light opening screen */
footer{background:#042184;color:#fff}footer .footer-top p,footer .footer-grid small,footer .bottom{color:#fff}footer .footer-grid{border-color:rgba(255,255,255,.3)}footer .brand-logo{content:url('assets/wifak-logo-white.svg')}footer .portfolio-download{color:#fff;border-color:rgba(255,255,255,.7)}footer .portfolio-download:hover{background:#fff;color:#042184}.hero{background:#fff;color:#042184}.hero-video-overlay{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.78) 40%,rgba(255,255,255,.96))}body:has(.hero) header,body:has(.hero) header nav a,body:has(.hero) header nav a.active,body:has(.hero) header .pill,body:has(.hero) .language-switch{color:#042184}body:has(.hero) header .brand-logo{content:url('assets/wifak-logo-black.svg')}body:has(.hero) header .pill,.hero .circle,.hero-bottom{border-color:rgba(4,33,132,.3)}.hero .portfolio-download{color:#042184;border-color:#042184}body:has(.hero) header .pill:hover,.hero .portfolio-download:hover{background:#042184;color:#fff}

/* Animated pencil drawing treatment */
.hero{background:#fff}.hero-video{filter:url('#sketch-video');opacity:.8}.hero-video-overlay{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.25) 40%,rgba(255,255,255,.86));mix-blend-mode:normal}

/* Dark ink contours on white paper */
.hero-video{filter:url('#sketch-video');opacity:1}.hero-video-overlay{background:linear-gradient(180deg,rgba(255,255,255,.48),rgba(255,255,255,.12) 35%,rgba(255,255,255,.85) 100%)}
/* Restore normal video */
.hero-video{filter:grayscale(1);opacity:1}.hero-video-overlay{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.78) 40%,rgba(255,255,255,.96))}
/* Warm cream and blue */
:root{--mowif-cream:#F7F3EA}body,.hero{background:#F7F3EA}.hero-video-overlay{background:linear-gradient(180deg,rgba(247,243,234,.9),rgba(247,243,234,.78) 40%,rgba(247,243,234,.96))}footer,footer .footer-top p,footer .footer-grid small,footer .bottom,footer .portfolio-download{color:#F7F3EA}footer .portfolio-download{border-color:rgba(247,243,234,.7)}footer .footer-grid{border-color:rgba(247,243,234,.3)}footer .brand-logo{content:url('assets/wifak-logo-white.svg')}.project .image-wrap,.gallery img{background:#F7F3EA}.pill:hover,body:has(.hero) header .pill:hover,.hero .portfolio-download:hover{color:#F7F3EA}footer .portfolio-download:hover{background:#F7F3EA;color:#042184}
/* Bright blue, white and black direction */
:root{--mowif-blue:#0D50BE;--mowif-cream:#fff}body{background:#fff;color:#111}.hero{background:#fff;color:#0D50BE}.hero-video-overlay{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.78) 40%,rgba(255,255,255,.96))}h1,h2,.caption h3,.studio p{color:#0D50BE}.intro,.caption small,.studio small,.logofolio-heading p,.concept-note,.contact-details,.contact-link{color:#111}header nav a,header nav a.active,.language-switch,body:has(.hero) header,body:has(.hero) header nav a,body:has(.hero) header nav a.active,body:has(.hero) header .pill,body:has(.hero) .language-switch{color:#0D50BE}.hero .portfolio-download{color:#0D50BE;border-color:#0D50BE}.pill:hover,body:has(.hero) header .pill:hover,.hero .portfolio-download:hover{background:#0D50BE;color:#fff}.hero-bottom{color:#0D50BE}.section-label,.studio,.logofolio-heading,.contact-link{border-color:rgba(13,80,190,.22)}footer{background:#0D50BE;color:#fff}footer .footer-top p,footer .footer-grid small,footer .bottom,footer .portfolio-download{color:#fff}footer .footer-grid{border-color:rgba(255,255,255,.3)}footer .portfolio-download{border-color:rgba(255,255,255,.7)}footer .portfolio-download:hover{background:#fff;color:#0D50BE}footer .brand-logo{content:url('assets/wifak-logo-white.svg')}.project .image-wrap,.gallery img{background:#fff}
/* Deeper blue and softer white */
:root{--mowif-blue:#0A3D91;--mowif-cream:#F5F5F3}body,.hero{background:#F5F5F3}.hero{color:#0A3D91}.hero-video-overlay{background:linear-gradient(180deg,rgba(245,245,243,.9),rgba(245,245,243,.78) 40%,rgba(245,245,243,.96))}h1,h2,.caption h3,.studio p{color:#0A3D91}header nav a,header nav a.active,.language-switch,body:has(.hero) header,body:has(.hero) header nav a,body:has(.hero) header nav a.active,body:has(.hero) header .pill,body:has(.hero) .language-switch{color:#0A3D91}.hero-bottom,.hero .portfolio-download{color:#0A3D91}.hero .portfolio-download{border-color:#0A3D91}.pill:hover,body:has(.hero) header .pill:hover,.hero .portfolio-download:hover{background:#0A3D91;color:#F5F5F3}footer{background:#0A3D91;color:#F5F5F3}footer .footer-top p,footer .footer-grid small,footer .bottom,footer .portfolio-download{color:#F5F5F3}footer .portfolio-download:hover{background:#F5F5F3;color:#0A3D91}footer .brand-logo{content:url('assets/wifak-logo-white.svg')}.project .image-wrap,.gallery img{background:#F5F5F3}.section-label,.studio,.logofolio-heading,.contact-link{border-color:rgba(10,61,145,.22)}
/* Full black with white typography */
:root{--mowif-blue:#fff;--mowif-cream:#000}body,.hero,footer{background:#000;color:#fff}h1,h2,.caption h3,.studio p,.intro,.caption small,.studio small,.logofolio-heading p,.concept-note,.contact-details,.contact-link,.section-label span,.hero-bottom,header nav a,header nav a.active,.language-switch,footer .footer-top p,footer .footer-grid small,footer .bottom,footer .portfolio-download{color:#fff}body:has(.hero) header,body:has(.hero) header nav a,body:has(.hero) header nav a.active,body:has(.hero) header .pill,body:has(.hero) .language-switch{color:#fff}.hero-video-overlay{background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.5) 40%,rgba(0,0,0,.9))}header .brand-logo,body:has(.hero) header .brand-logo,footer .brand-logo{content:url('assets/wifak-logo-white.svg')}.pill,.hero .portfolio-download,footer .portfolio-download{color:#fff;border-color:rgba(255,255,255,.65)}.section-label,.studio,.logofolio-heading,.contact-link,.hero-bottom,footer .footer-grid,body:has(.hero) header .pill,.hero .circle{border-color:rgba(255,255,255,.3)}.pill:hover,body:has(.hero) header .pill:hover,.hero .portfolio-download:hover,footer .portfolio-download:hover{background:#fff;color:#000}.project .image-wrap,.gallery img{background:#000}
/* Inverted Projects page */
.projects-page{background:#fff;color:#000}.projects-page h1,.projects-page .intro,.projects-page .caption h3,.projects-page .caption small{color:#000}.projects-page .image-wrap{background:#fff}
body:has(.projects-page) header{background:#000}
.projects-page{background:#000;color:#fff}.projects-page h1,.projects-page .intro,.projects-page .caption h3,.projects-page .caption small{color:#fff}.projects-page .image-wrap{background:#000}
/* White content, light gray footer, dark splash */
:root{--mowif-blue:#000;--mowif-cream:#fff}body{background:#fff;color:#000}.page,.section,.projects-page{background:#fff;color:#000}h1,h2,.caption h3,.studio p,.intro,.caption small,.studio small,.logofolio-heading p,.concept-note,.contact-details,.contact-link,.section-label span,.projects-page h1,.projects-page .intro,.projects-page .caption h3,.projects-page .caption small{color:#000}.project .image-wrap,.projects-page .image-wrap,.gallery img{background:#fff}.section-label,.studio,.logofolio-heading,.contact-link{border-color:rgba(0,0,0,.2)}header,body:has(.projects-page) header{background:#fff;color:#000}header nav a,header nav a.active,.language-switch,header .pill{color:#000}header .brand-logo{content:url('assets/wifak-logo-black.svg')}.pill{color:#000;border-color:rgba(0,0,0,.5)}.pill:hover{background:#000;color:#fff}footer{background:#eee;color:#000}footer .footer-top p,footer .footer-grid small,footer .bottom,footer .portfolio-download{color:#000}footer .footer-grid{border-color:rgba(0,0,0,.2)}footer .brand-logo{content:url('assets/wifak-logo-black.svg')}footer .portfolio-download{border-color:rgba(0,0,0,.6)}footer .portfolio-download:hover{background:#000;color:#fff}.hero{background:#000;color:#fff}.hero h1,.hero-bottom,.hero .portfolio-download{color:#fff}body:has(.hero) header{background:transparent;color:#fff}body:has(.hero) header nav a,body:has(.hero) header nav a.active,body:has(.hero) header .pill,body:has(.hero) .language-switch{color:#fff}body:has(.hero) header .brand-logo{content:url('assets/wifak-logo-white.svg')}.hero .portfolio-download,body:has(.hero) header .pill,.hero .circle,.hero-bottom{border-color:rgba(255,255,255,.5)}body:has(.hero) header .pill:hover,.hero .portfolio-download:hover{background:#fff;color:#000}

.brand-logo,footer .brand-logo{width:90px}.hero h1{font-size:clamp(48px,6vw,90px)}.project-overview{max-width:850px;line-height:1.8;margin-bottom:55px}.logo-grid a.logo-tile{min-height:0;aspect-ratio:1}.logo-grid a.logo-tile img{object-fit:cover}@media(max-width:650px){.hero h1{font-size:45px}.brand-logo{width:65px}}
/* Arabic splash: compact, readable lines with room for navigation */
html[lang=ar] .hero{padding-top:145px;min-height:720px;height:auto;height:max(720px,100svh)}html[lang=ar] .hero h1{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:clamp(30px,3.8vw,64px);font-weight:400;line-height:1.55;letter-spacing:0;max-width:1100px;width:100%;margin:0 0 48px;text-wrap:balance}html[lang=ar] .hero h1 .word-clip{padding-bottom:.15em;margin-bottom:-.15em}html[lang=ar] .hero h1 .word-rise{transform:none;transition:opacity .8s ease;opacity:0}html[lang=ar] .hero h1.is-visible .word-rise{opacity:1}@media(max-width:650px){html[lang=ar] .hero{padding-top:125px;min-height:660px;height:auto;justify-content:flex-end}html[lang=ar] .hero h1{font-size:clamp(26px,6.6vw,36px);line-height:1.65;margin-bottom:36px}html[lang=ar] .hero-bottom{flex-direction:column;align-items:flex-start;gap:18px}}@media(prefers-reduced-motion:reduce){html[lang=ar] .hero h1 .word-rise{opacity:1}}

/* Balanced splash headline */
.hero{padding-top:145px;min-height:720px;height:max(720px,100svh)}html[lang=en] .hero h1{font-size:clamp(32px,4.25vw,76px);line-height:1.18;letter-spacing:-.04em;max-width:1250px;margin-bottom:48px}html[lang=ar] .hero h1{font-size:clamp(30px,3.8vw,64px);line-height:1.5;max-width:1100px}@media(max-width:650px){.hero{padding-top:125px;min-height:660px;height:auto}html[lang=en] .hero h1{font-size:clamp(26px,6.5vw,40px);line-height:1.25;margin-bottom:36px}html[lang=ar] .hero h1{font-size:clamp(26px,6.6vw,36px);line-height:1.6}}
/* Thmanyah Serif Arabic */
@font-face{font-family:'Wifak Thmanyah Text';src:url('assets/thmanyah-serif-text-400.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:'Wifak Thmanyah Display';src:url('assets/thmanyah-serif-display-400.woff2') format('woff2');font-weight:400;font-display:swap}html[lang=ar] body,html[lang=ar] .language-switch,html[lang=ar] .studio small,html[lang=ar] .caption h3{font-family:'Wifak Thmanyah Text','IBM Plex Sans Arabic',serif;font-weight:400}html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] .hero h1,html[lang=ar] .page h1,html[lang=ar] .studio p,html[lang=ar] .footer-top>a{font-family:'Wifak Thmanyah Display','Wifak Thmanyah Text',serif;font-weight:400;letter-spacing:0}html[lang=ar] .hero h1{line-height:1.55}html[lang=ar] .studio small{line-height:1.9}
/* Thmanyah Serif across both languages */
html body,html .language-switch,html .studio small,html .caption h3,html .intro,html .caption small{font-family:'Wifak Thmanyah Text',Georgia,serif;font-weight:400}html h1,html h2,html .hero h1,html .page h1,html .studio p,html .footer-top>a,html[lang=en] .hero h1{font-family:'Wifak Thmanyah Display','Wifak Thmanyah Text',Georgia,serif;font-weight:400}
/* Consistent Arabic Thmanyah typography, including nested animated words */
html[lang=ar] body,html[lang=ar] body *{font-family:'Wifak Thmanyah Text','IBM Plex Sans Arabic',serif!important;font-synthesis:none}html[lang=ar] h1,html[lang=ar] h1 *,html[lang=ar] h2,html[lang=ar] h2 *,html[lang=ar] .hero h1,html[lang=ar] .hero h1 *,html[lang=ar] .studio p,html[lang=ar] .studio p *,html[lang=ar] .footer-top>a,html[lang=ar] .footer-top>a *{font-family:'Wifak Thmanyah Display','Wifak Thmanyah Text',serif!important;font-weight:400;letter-spacing:0}html[lang=ar] .hero h1{font-size:clamp(30px,3.8vw,64px);line-height:1.55}html[lang=ar] .word-clip{padding-bottom:.25em;margin-bottom:-.25em}@media(max-width:650px){html[lang=ar] .hero h1{font-size:clamp(26px,6.6vw,36px);line-height:1.6}}
/* Arabic headline alignment */
html[lang=ar] .hero h1{direction:rtl;text-align:right;align-self:flex-start;width:min(100%,1000px);max-width:1000px;font-size:clamp(30px,3.3vw,58px);line-height:1.35!important;margin-inline:0;margin-block:0 44px;text-wrap:initial}html[lang=ar] .hero h1 .word-clip{display:inline;overflow:visible;vertical-align:baseline;padding:0;margin:0}html[lang=ar] .hero h1 .word-rise{display:inline;transform:none!important;vertical-align:baseline}html[lang=ar] .hero{padding-bottom:35px}html[lang=ar] .hero-bottom{width:100%;flex-shrink:0}@media(max-width:650px){html[lang=ar] .hero h1{font-size:clamp(25px,6vw,34px);line-height:1.5!important;margin-bottom:32px}}
html[lang=ar] .hero h1{font-size:clamp(34px,3.7vw,66px);width:min(100%,1120px);max-width:1120px}@media(max-width:650px){html[lang=ar] .hero h1{font-size:clamp(28px,6.6vw,38px)}}

/* Keep video and page position stable during language changes. */
header nav,footer,#app>.page,#app>.section,.hero h1,.hero-bottom{transition:opacity .14s ease}body.language-switching header nav,body.language-switching footer,body.language-switching #app>.page,body.language-switching #app>.section,body.language-switching .hero h1,body.language-switching .hero-bottom{opacity:0}@media(prefers-reduced-motion:reduce){header nav,footer,#app>.page,#app>.section,.hero h1,.hero-bottom{transition:none}}

/* Local square-card test */
.project .image-wrap,.gallery img,.logo-tile{border-radius:0!important}

.back-to-top{border:0;padding:0;background:none;color:inherit;font:inherit;cursor:pointer}