/* MO DESIGN V5 — editorial art direction layer, shares V4 tokens */
:root{--bg:#090a0b;--bg-rgb:9,10,11;--panel:#111315;--panel2:#171a1a;--line:#33383a;--accent:#c7f66c;--text:#f6f5f2;--text-soft:#a7aaa5;--glass:rgba(11,12,13,.89);--container:1320px}
:root.light{--bg:#f5f3ed;--bg-rgb:245,243,237;--panel:#fffdf9;--panel2:#eceae3;--line:#d6d5cc;--accent:#c4ed7c;--text:#15191a;--text-soft:#585f5d;--glass:rgba(249,248,243,.94)}
body{background-image:none!important}html{scroll-padding-top:92px}main{overflow:clip}
[hidden]{display:none!important}
.site-shell{isolation:isolate}.site-header{border-bottom:1px solid var(--line)}.hero-orb{opacity:.08!important}
.hero{padding-top:134px;padding-bottom:75px}.hero-grid{min-height:605px;gap:3%;grid-template-columns:1.11fr .89fr}.hero-eyebrow{font-size:10px;letter-spacing:.20em}.hero-title{font-size:clamp(60px,5.7vw,91px);line-height:1.17;letter-spacing:-.065em}.hero-title em{background:linear-gradient(115deg,#d5ffa1,#c7f66c 85%);-webkit-background-clip:text;background-clip:text}.hero-description{font-size:16px;max-width:530px}.hero-portrait{object-position:center 30%}.portrait-frame{border-radius:6px 55px 6px 55px}.portrait-outline{border-radius:6px 55px 6px 55px}.hero-bottom{margin-top:45px}
.brand-mark{border-radius:8px}.brand-copy{letter-spacing:-.055em}.pill-btn{border-radius:9px!important}.primary-btn{font-weight:800}
.hero-art::after{content:'CREATIVE / STUDIO  •  2026';position:absolute;bottom:8px;left:3px;letter-spacing:.27em;font:700 9px 'DM Sans',sans-serif;color:var(--text-soft)}
.ticker{transform:none;background:#ccf886}
.section-title{letter-spacing:-.052em}
.section-serial{font:700 10px 'DM Sans',sans-serif;letter-spacing:.19em;color:var(--accent)}
/* dramatic campaign editorial composition */
.editorial-section{padding:102px 0 95px;background:#0b1011;color:#f7f7f4;border-block:1px solid #23302a;position:relative;overflow:hidden}
.editorial-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 35% 55% at 82% 15%,rgba(171,207,105,.13),transparent);pointer-events:none}
.editorial-wrap{position:relative}.editorial-intro{display:grid;grid-template-columns:1.15fr .65fr;column-gap:7%;align-items:end;position:relative;margin-bottom:38px}.editorial-intro .section-serial{grid-column:1/-1;margin-bottom:23px}.editorial-intro h2{font-size:clamp(36px,5vw,78px);line-height:1.26;letter-spacing:-.06em;max-width:870px;margin:0;font-weight:800}.editorial-intro h2 em{font-style:normal;color:#bcee73}.editorial-intro p{font-size:15px;color:#b9c0bc;max-width:335px;line-height:2;margin:0 0 15px}.editorial-link{display:inline-flex;align-items:center;padding:12px 0;border-bottom:1px solid #bcee73;color:#d2ff8b;font-weight:750;justify-self:start;margin-top:14px;transition:letter-spacing .25s}.editorial-link:hover{letter-spacing:.025em}
.editorial-gallery{display:grid;grid-template-columns:1.22fr .78fr 1fr;grid-template-rows:385px;gap:12px}.editorial-tile{position:relative;display:block;min-height:0;overflow:hidden;border-radius:6px;background:#202323}.editorial-tile img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.8,.2,1)}.editorial-tile:hover img{transform:scale(1.065)}.editorial-tile span{position:absolute;bottom:0;left:0;right:0;padding:24px 18px 15px;color:white;font:700 10px 'DM Sans',sans-serif;letter-spacing:.14em;background:linear-gradient(transparent,rgba(0,0,0,.7))}.editorial-tile-b{margin-top:34px}.editorial-tile-c{margin-bottom:34px}.editorial-caption{text-align:left;direction:rtl;color:#abb4af;font-size:11px;margin-top:23px}
:root.light .editorial-section{background:#131918;color:#fafbf6}
/* portfolio — larger, editorial art first */
.work-section{padding-top:118px}.work-controls{padding-top:34px}.work-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:26px 18px}.project-card{grid-column:span 4;min-width:0}.project-card:nth-child(7n + 1),.project-card:nth-child(7n + 4){grid-column:span 6}.project-card:nth-child(7n + 2),.project-card:nth-child(7n + 3){grid-column:span 3}.project-card .project-cover{border-radius:8px;aspect-ratio:1.22;overflow:hidden}.project-card:nth-child(7n + 1) .project-cover,.project-card:nth-child(7n + 4) .project-cover{aspect-ratio:1.66}.project-card .cover-img{object-fit:cover;transition:transform .6s ease,filter .6s ease}.project-card:hover .cover-img{transform:scale(1.055)}.project-card:hover .project-cover{border-color:#aee269}.project-meta h3{font-size:17px}.project-meta{margin-top:13px}.project-index{font-size:12px}.filter-pill{border-radius:6px!important}.project-cover-button:focus-visible{outline:3px solid var(--accent)}.demo-hint{border-inline-start:3px solid var(--accent);background:var(--panel)}
/* clearer rhythm: value proof section */
.value-section{border-block:1px solid var(--line);background:var(--panel);padding:120px 0}.value-layout{display:grid;grid-template-columns:1fr 1fr;gap:8%}.value-headline{font-size:clamp(42px,4.6vw,70px);line-height:1.25;margin-top:24px;letter-spacing:-.06em}.value-headline em{color:var(--accent);font-style:normal}.value-reasons{display:flex;flex-direction:column}.value-reasons>div{display:grid;grid-template-columns:42px 1fr;align-items:start;gap:20px;border-top:1px solid var(--line);padding:22px 0}.value-reasons>div:last-child{border-bottom:1px solid var(--line)}.value-reasons>div>span{color:var(--accent);font:800 12px 'DM Sans',sans-serif}.value-reasons h3{font-size:22px;margin:0 0 7px}.value-reasons p{margin:0;color:var(--text-soft);font-size:14px;line-height:1.9}
/* services should read like a visual offer, not an icon list */
.services-section{background:var(--bg)}.service-item{border-radius:0;border-bottom:1px solid var(--line)!important;padding:28px 22px}.service-title{font-size:clamp(20px,2.4vw,33px)}.service-item:hover{background:var(--panel)}
.testimonials-section[hidden]{display:none!important}
/* concise valuable FAQ */
.faq-section{border-block:1px solid var(--line)}.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:9%}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line);padding:0 0}.faq-list summary{list-style:none;cursor:pointer;padding:24px 38px 24px 0;position:relative;font-size:17px;font-weight:750}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:'+';position:absolute;inset-inline-end:6px;top:20px;color:var(--accent);font:500 26px 'DM Sans'}.faq-list details[open] summary::after{content:'−'}.faq-list details p{color:var(--text-soft);font-size:14px;line-height:2;margin:0 0 26px;max-width:620px}
/* lead form */
.contact-form .field-grid{gap:15px}.contact-form input,.contact-form select,.contact-form textarea{border-radius:7px}.privacy-check{display:flex!important;gap:11px;align-items:flex-start;font-size:12px;color:var(--text-soft);cursor:pointer}.privacy-check input{width:17px!important;height:17px!important;flex:0 0 17px;margin:4px 0 0;accent-color:var(--accent)}.privacy-check a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* internal pages share V5 brand shell */
.inner-page{overflow-x:hidden}.inner-header{min-height:80px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px max(5vw,20px);background:var(--bg)}.inner-header .brand{display:flex;align-items:center}.inner-links{display:flex;align-items:center;gap:16px;font-size:13px;font-weight:700}.inner-back{color:var(--text-soft)}.inner-primary{background:var(--accent);color:var(--accent-ink);padding:11px 16px;border-radius:6px}.case-main{max-width:1440px;margin:auto;padding:0 clamp(16px,5vw,65px)}.case-hero{padding:70px 0 38px}.case-eyebrow{color:var(--accent);font:800 11px 'DM Sans';letter-spacing:.18em}.case-title{font-size:clamp(44px,6.8vw,100px);line-height:1.12;letter-spacing:-.07em;margin:22px 0 26px}.case-subline{display:flex;gap:26px;align-items:center;flex-wrap:wrap;padding-top:25px;border-top:1px solid var(--line);color:var(--text-soft);font-size:13px}.case-lead-media{background:#191a1d;min-height:380px;max-height:730px;overflow:hidden;border-radius:7px;position:relative}.case-lead-media img{width:100%;height:100%;max-height:730px;object-fit:cover;display:block;min-height:380px}.case-lead-media .case-media-tag{position:absolute;bottom:20px;left:20px;background:rgba(10,10,10,.8);padding:9px 13px;border-radius:5px;color:#edeee8;font:800 10px 'DM Sans';letter-spacing:.15em}.case-content-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:10%;margin:80px 0}.case-side-title{color:var(--text-soft);text-transform:uppercase;font:800 11px 'DM Sans';letter-spacing:.19em}.case-content h2{font-size:clamp(28px,3vw,44px);line-height:1.4;margin:0 0 20px}.case-content p{color:var(--text-soft);font-size:17px;line-height:2.05;max-width:720px}.case-line{border:0;border-top:1px solid var(--line);margin:0}.case-stacked-media{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:45px 0 100px}.case-artframe{height:400px;background:var(--panel);border:1px solid var(--line);overflow:hidden;display:grid;place-items:center}.case-artframe:nth-child(2){margin-top:64px}.case-artframe img{width:100%;height:100%;object-fit:cover}.case-artframe img.pan-a{object-position:left center;transform:scale(1.14)}.case-artframe img.pan-b{object-position:right center;transform:scale(1.2)}.case-close{padding:65px 0 95px;border-top:1px solid var(--line)}.case-close h2{font-size:clamp(38px,5vw,68px);line-height:1.25;margin:0 0 30px}.case-close p{color:var(--text-soft);font-size:14px}.case-close a{display:inline-block;background:var(--accent);padding:15px 25px;color:var(--accent-ink);font-weight:850;border-radius:7px}.case-footer{padding:27px 5vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:var(--text-soft);font-size:12px}.case-meta-tags{display:flex;flex-wrap:wrap;gap:9px}.case-meta-tags span{background:var(--panel);border:1px solid var(--line);padding:8px 12px;border-radius:3px;font-size:11px}.case-video{width:100%;max-height:740px;background:#0b0b0c}
.service-page .case-hero{max-width:1000px}.service-page .case-title{font-size:clamp(44px,6vw,90px)}.service-band{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 75px}.service-band span{border:1px solid var(--line);padding:11px 17px;border-radius:5px}.service-examples{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.service-examples a{display:block;min-width:0}.service-examples img{width:100%;aspect-ratio:1.2;object-fit:cover;border-radius:6px}.service-examples h3{font-size:16px;margin:12px 0}.service-overview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin:70px 0}.service-overview-grid article{padding:25px;background:var(--panel);border:1px solid var(--line);border-radius:8px}.service-overview-grid h2{font-size:20px}
/* mobile */
@media(max-width:1080px){.editorial-gallery{grid-template-rows:310px}.editorial-intro{grid-template-columns:1fr}.editorial-intro p{margin-top:18px}.value-layout{gap:5%}.project-card{grid-column:span 6!important}}
@media(max-width:800px){.hero{padding-top:120px}.hero-grid{display:flex;flex-direction:column}.hero-title{font-size:clamp(49px,8.5vw,74px)}.hero-art{margin:8px auto 0}.editorial-section{padding:78px 0}.editorial-gallery{grid-template-columns:1fr 1fr;grid-template-rows:290px 260px}.editorial-tile-a{grid-column:1/3}.editorial-tile-b{grid-column:1;grid-row:2;margin-top:0}.editorial-tile-c{grid-column:2;grid-row:2;margin-bottom:0}.value-layout,.faq-layout,.case-content-grid{grid-template-columns:1fr;gap:25px}.value-section{padding:75px 0}.case-stacked-media{margin-bottom:50px}.case-artframe{height:280px}.inner-header{min-height:72px}.service-examples{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.hero{padding-bottom:45px}.hero-title{font-size:clamp(41px,10.3vw,60px);line-height:1.23}.hero-description{font-size:14px}.hero-grid{gap:5px}.hero-art{height:365px!important;margin:20px auto 0}.portrait-frame{border-radius:4px 32px 4px 32px}.hero-ctas{gap:12px;flex-wrap:wrap}.editorial-intro h2{font-size:clamp(34px,9vw,53px)}.editorial-gallery{grid-template-rows:230px 205px;gap:7px}.editorial-tile{border-radius:4px}.editorial-tile span{font-size:8px;padding:15px 8px 7px}.editorial-caption{font-size:10px}.work-grid{grid-template-columns:1fr 1fr;gap:13px 10px}.project-card{grid-column:span 1!important}.project-card:nth-child(5n+1){grid-column:span 2!important}.project-card .project-cover{aspect-ratio:.94}.project-card:nth-child(5n+1) .project-cover{aspect-ratio:1.7}.project-meta h3{font-size:12px;line-height:1.6}.project-meta p{font-size:9px}.project-index{display:none}.value-headline{font-size:40px}.faq-list summary{font-size:14px}.optional-fields{grid-template-columns:1fr!important}.inner-links{gap:8px;font-size:11px}.inner-links .inner-primary{padding:9px 10px}.inner-header .brand{font-size:14px}.inner-header .brand-mark{width:36px;height:36px}.inner-header .brand-mark img{width:29px;height:29px}.case-hero{padding:50px 0 22px}.case-title{font-size:clamp(37px,9vw,58px)}.case-lead-media{min-height:240px}.case-lead-media img{min-height:240px}.case-content-grid{margin:46px 0}.case-content p{font-size:14px}.case-stacked-media{grid-template-columns:1fr;gap:10px}.case-artframe:nth-child(2){margin-top:0}.case-close{padding:48px 0}.case-footer{font-size:10px;flex-wrap:wrap}.service-examples{grid-template-columns:1fr}.service-overview-grid{grid-template-columns:1fr;margin:45px 0}}
@media(prefers-reduced-motion:reduce){.editorial-tile img,.project-card .cover-img{transition:none!important}.editorial-tile:hover img,.project-card:hover .cover-img{transform:none!important}}
/* Editorial material-study panel pairs with the artwork detail crop. */
.case-system-panel{background:radial-gradient(circle at 75% 20%,rgba(196,250,105,.14),transparent 45%),#141818;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:40px;color:#f2f7f0}
.case-system-tag{color:#bdf078;font:800 10px 'DM Sans',sans-serif;letter-spacing:.2em}
.case-system-title{font:800 clamp(40px,5vw,90px) 'DM Sans',sans-serif;letter-spacing:-.08em;line-height:1.05;overflow-wrap:anywhere}
.case-system-title span{font:700 10px 'DM Sans',sans-serif;letter-spacing:.15em;display:block;margin-top:17px;color:#9da99f}
.case-system-swatches{display:flex;width:75%;height:24px;gap:8px}.case-system-swatches i{flex:1;background:#c9f581}.case-system-swatches i:nth-child(2){background:#2b4135}.case-system-swatches i:nth-child(3){background:#747b70}.case-system-swatches i:nth-child(4){background:#edf3e6}.case-system-caption{font:700 10px 'DM Sans',sans-serif;letter-spacing:.2em;color:#adbaa9}
@media(max-width:620px){.case-system-panel{padding:26px}}


/* interactive upgrades for the renewed identity */
.tilt-card{position:relative;transform-style:preserve-3d;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,background .28s ease;will-change:transform}
.tilt-card::after{content:'';position:absolute;inset:1px;border-radius:inherit;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(199,246,108,.12),transparent 36%);pointer-events:none;opacity:0;transition:opacity .25s ease}
.tilt-card:hover::after{opacity:1}
.project-card,.process-card,.review-card,.tool-card,.service-item,.feature-slide{box-shadow:0 0 0 rgba(0,0,0,0)}
.project-card:hover,.process-card:hover,.review-card:hover,.tool-card:hover,.service-item:hover,.feature-slide:hover{box-shadow:0 18px 48px rgba(0,0,0,.22)}

.tools-showcase{margin-top:42px;padding:28px 0 6px;border-top:1px solid var(--line)}
.tools-head{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:20px}
.tools-head .section-sub{max-width:700px;margin:0}
.tools-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.tool-card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid var(--line);border-radius:18px;padding:16px;min-height:154px;display:flex;flex-direction:column;gap:16px;overflow:hidden}
.tool-badge{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(199,246,108,.18),rgba(122,85,255,.14));border:1px solid rgba(199,246,108,.28);font:800 20px 'DM Sans',sans-serif;color:var(--text)}
.tool-copy h3{margin:0;font-size:15px;line-height:1.45}
.tool-copy p{margin:7px 0 0;color:var(--text-soft);font-size:12px;line-height:1.8}
.tool-index{margin-top:auto;align-self:flex-end;color:var(--accent);font:800 11px 'DM Sans',sans-serif;letter-spacing:.14em}

.process-section{padding-top:80px;padding-bottom:20px}
.process-grid{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.process-card{background:linear-gradient(180deg,rgba(17,19,21,.96),rgba(12,14,18,.96));border:1px solid rgba(199,246,108,.14);border-radius:24px;padding:34px 30px 30px;min-height:275px;overflow:hidden}
.process-card h3{font-size:28px;line-height:1.35;margin:66px 0 12px}
.process-card p{font-size:14px;line-height:2;color:var(--text-soft)}
.process-icon{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(199,246,108,.25);border-radius:50%;color:var(--accent);font-size:23px;top:22px;left:24px;background:rgba(199,246,108,.05)}
.process-n{font-size:22px;color:var(--accent);position:absolute;top:18px;right:22px}

.testimonials-heading{align-items:flex-start}
.review-card{min-height:300px;border:1px solid rgba(199,246,108,.14)}
.review-stars{font-size:18px;letter-spacing:.15em;color:#ffd977}
.review-badge{background:rgba(199,246,108,.12);color:var(--accent);border:1px solid rgba(199,246,108,.25)}
.reviews-note{margin-top:20px;text-align:center;color:var(--text-soft)}

@media(max-width:1180px){.tools-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:800px){.tools-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.tools-showcase{margin-top:24px;padding-top:22px}.tools-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tool-card{min-height:140px;border-radius:15px;padding:14px}.tool-badge{width:52px;height:52px;border-radius:14px;font-size:18px}.tool-copy h3{font-size:13px}.tool-copy p{font-size:11px;line-height:1.6}.process-section{padding-top:64px}.process-grid{grid-template-columns:1fr;gap:14px}.process-card{min-height:240px;padding:28px 24px 24px;border-radius:20px}.process-card h3{font-size:24px;margin-top:60px}.review-card{min-height:unset}}
@media(prefers-reduced-motion:reduce){.tilt-card,.tilt-card::after{transition:none!important}}

.stats-disclaimer{max-width:1320px;margin:12px auto 0;padding:0 24px;text-align:center;color:var(--text-soft);font-size:11px;line-height:1.8;opacity:.68}
:root[lang="ar"] .hero-art::after{content:"مو ديزاين / ستوديو إبداعي  •  2026"}
.tool-badge{display:grid;place-items:center;padding:6px;overflow:hidden;background:transparent;border:0;width:64px;height:64px}
.tool-badge img{display:block;width:100%;height:100%;object-fit:contain}
:root[lang="ar"] .about-title{letter-spacing:0}