:root{color-scheme:dark;--orange:#fa6500;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#000;color:#fff;font-family:Arial,Tahoma,sans-serif}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid #ff7c26;outline-offset:7px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip{position:fixed;z-index:10;left:20px;top:-90px;padding:14px;background:#fa6500}.skip:focus{top:10px}header{height:145px;display:flex;justify-content:space-between;align-items:center;padding:0 3.9%;background:#000}.logo img{display:block;width:190px;height:auto}.contact-button{background:radial-gradient(ellipse at 12% 90%,#ffac76 0%,#ed6514 42%,#ac4200 75%,#513218 100%);border-radius:80px;padding:17px 35px;font-size:clamp(16px,2.1vw,34px);font-weight:600;transition:filter .2s}.contact-button:hover{filter:brightness(1.2)}.contact-button span{display:none}.hero{position:relative;overflow:hidden}.hero>img{display:block;width:100%;height:auto}.discover{position:absolute;right:5%;bottom:6%;font-size:32px;border:1px solid #ffffff66;border-radius:50%;width:52px;height:52px;display:grid;place-items:center;background:#0002;transition:background .2s}.discover:hover{background:#0006}.section{padding:100px 5.2%}.about{display:grid;grid-template-columns:1.58fr 1fr;align-items:center;gap:35px;min-height:100vh}.about-copy{font-size:clamp(19px,2.08vw,34px);line-height:1.28;font-weight:400}.about-copy p{margin:0 0 50px}.arabic{line-height:1.48}.english p:last-child{margin-bottom:0}.symbol{width:100%;height:auto}.services{display:grid;grid-template-columns:1.04fr 1fr;gap:5%;align-items:center;min-height:100vh;padding-top:60px;padding-bottom:80px}.services-title p{font-size:clamp(24px,3vw,46px);text-align:left;margin:0 0 20px}.services-title h2{font-size:clamp(45px,6.3vw,100px);line-height:1.3;letter-spacing:-3px;margin:0}.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}.service{position:relative;aspect-ratio:.84;padding:30px 20px;border:1px solid #89847f;border-radius:40px;background:radial-gradient(ellipse at 110% -10%,#785133,transparent 45%),radial-gradient(ellipse at -20% 120%,#67472e,transparent 45%),#343434;box-shadow:0 0 26px #ec690016;transition:transform .25s,box-shadow .25s}.service:hover{transform:translateY(-6px);box-shadow:0 0 35px #ec690036}.service h3{font-size:clamp(29px,3.7vw,60px);line-height:1.18;letter-spacing:-1px;margin:0 0 20px}.service p{font-size:clamp(16px,1.65vw,27px);text-align:left;margin:0;line-height:1.5}.service-no{display:none}.service-arrow{position:absolute;bottom:22px;right:25px;font-size:28px;color:#ff954c;opacity:0;transition:opacity .2s}.service:hover .service-arrow{opacity:1}.contact{position:relative;border-top:1px solid #232323;padding-top:110px;padding-bottom:110px;background:radial-gradient(ellipse at 90% 140%,#9e3d004d,transparent 65%)}.eyebrow{font-size:14px;letter-spacing:3px;color:#ff7b24;text-align:right}.contact h2{font-size:clamp(36px,5vw,80px);line-height:1.4;margin:30px 0}.contact-note{font-size:18px;color:#aaa}.back-top{position:absolute;left:5.2%;bottom:115px;width:65px;height:65px;border:1px solid #555;border-radius:50%;display:grid;place-items:center;font-size:32px}footer{padding:36px 5.2%;display:flex;align-items:center;justify-content:space-between;gap:35px;border-top:1px solid #222;font-size:14px;color:#aaa}footer img{width:120px;height:auto}footer nav{display:flex;gap:30px}footer a:hover{color:#ff7b24}
@media(min-width:1800px){.section{max-width:1920px;margin:auto}.hero{max-width:2400px;margin:auto}}
@media(max-width:900px){header{height:100px;padding:0 5%}.logo img{width:145px}.contact-button{padding:14px 23px;font-size:18px}.section{padding:65px 6%}.about{min-height:0;grid-template-columns:1fr;gap:35px}.about-copy{font-size:22px;line-height:1.5}.about-copy p{margin-bottom:32px}.symbol{width:60%;max-width:400px;justify-self:center}.services{grid-template-columns:1fr;gap:35px;min-height:0}.services-title h2{font-size:60px;line-height:1.1;letter-spacing:-2px}.services-title p{font-size:28px}.service-grid{gap:20px}.service{padding:30px;border-radius:30px;aspect-ratio:1.1}.service h3{font-size:42px}.service p{font-size:20px}footer{flex-wrap:wrap;justify-content:center}footer nav{order:3;width:100%;justify-content:center}}
@media(max-width:520px){html{scroll-padding-top:20px}header{height:85px}.logo img{width:112px}.contact-button{padding:12px 17px;font-size:14px}.hero>img{width:100%;max-width:100%;margin-left:0}.discover{width:35px;height:35px;font-size:24px;bottom:5%;right:5%}.section{padding:55px 6%}.about-copy{font-size:18px}.symbol{width:85%}.services-title h2{font-size:44px}.services-title p{font-size:25px}.service-grid{gap:14px}.service{padding:22px 15px;aspect-ratio:.8;border-radius:24px}.service h3{font-size:29px;letter-spacing:-.7px;margin-bottom:16px}.service p{font-size:15px}.contact h2{font-size:37px}.contact-note{font-size:15px;max-width:75%}.eyebrow{font-size:10px;letter-spacing:2px}.back-top{width:42px;height:42px;bottom:60px;font-size:24px}footer nav{gap:22px;font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Review: a soft transition into the site's primary black background. */
.hero{background:#000}
.hero>img{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%)}
/* The flattened PDF crop includes a stray letter along its left edge. */
.symbol{clip-path:inset(0 0 0 4%)}

@font-face{font-family:"CoFo Sans Arabic";src:url("assets/fonts/cofo-arabic-light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"CoFo Sans Arabic";src:url("assets/fonts/cofo-arabic-regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"CoFo Sans Arabic";src:url("assets/fonts/cofo-arabic-bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
[dir="rtl"],.skip,footer nav{font-family:"CoFo Sans Arabic",Arial,Tahoma,sans-serif}
[lang="en"]{font-family:Arial,sans-serif}
.services-title>p,.service>p{font-weight:300}

.about{position:relative;background:radial-gradient(ellipse at -20% 40%,#6e2a0066,transparent 58%)}
.services{background:radial-gradient(ellipse at 45% 115%,#78300066,transparent 65%)}
.portfolio{padding-top:100px;padding-bottom:105px;background:radial-gradient(ellipse at 50% -20%,#ae47007d,transparent 66%)}
.portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:7%;position:relative}
.portfolio-grid:after{content:"";position:absolute;left:50%;top:26%;height:50%;width:1px;background:#ffffff55;pointer-events:none}
.folder-link{display:block;text-align:center;transition:transform .25s}
.folder-link:hover{transform:translateY(-8px)}
.folder-link:focus-visible{outline-offset:12px;border-radius:12px}
.folder-link img{width:100%;height:auto;display:block;
-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 8%,#000 94%,transparent 100%);
mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 8%,#000 94%,transparent 100%);
-webkit-mask-composite:source-in;mask-composite:intersect;
}
.folder-link p{font-family:"CoFo Sans Arabic",Arial,sans-serif;font-weight:300;font-size:clamp(18px,1.8vw,30px);line-height:1.5;margin:14px 0 0}
.collection-header{border-bottom:1px solid #222}
.collection-nav{display:flex;align-items:center;gap:24px;font-family:"CoFo Sans Arabic",Arial,sans-serif;font-size:17px}
.collection-nav a:hover{color:#ff7b24}
.collection-main{min-height:75vh;padding:65px 6%;background:radial-gradient(ellipse at 15% 5%,#80320055,transparent 60%)}
.breadcrumb{font-family:"CoFo Sans Arabic",Arial,sans-serif;color:#aaa;font-size:16px}
.breadcrumb:hover{color:#fff}
.collection-intro{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center;max-width:1500px;margin:30px auto 0}
.collection-intro h1{font-size:clamp(44px,6vw,85px);line-height:1.1;letter-spacing:-2px;margin:16px 0 28px}
.collection-kicker{font-family:"CoFo Sans Arabic",Arial,sans-serif;color:#ff8c3e;font-size:22px;margin:0}
.collection-art{width:100%;height:auto;-webkit-mask-image:radial-gradient(ellipse,black 59%,transparent 76%);mask-image:radial-gradient(ellipse,black 59%,transparent 76%)}
.collection-pending{border-top:1px solid #ffffff28;padding-top:24px;font-family:"CoFo Sans Arabic",Arial,sans-serif}
.collection-pending h2{font-size:24px;margin:0 0 12px}
.collection-pending p{color:#aaa;font-size:18px;line-height:1.65;margin:0}
.collection-footer-link{color:#ff8c3e}
@media(max-width:900px){.portfolio{padding-top:65px;padding-bottom:65px}.portfolio-grid{gap:4%}.collection-intro{grid-template-columns:1fr}.collection-art{max-width:450px;justify-self:center}.collection-copy{order:2}.collection-main{padding-top:35px}.collection-nav{font-size:15px;gap:18px}}
@media(max-width:520px){.portfolio-grid{grid-template-columns:1fr;gap:65px}.portfolio-grid:after{display:none}.folder-link p{font-size:20px}.folder-link img{max-width:440px;margin:auto}.collection-nav{gap:15px;font-size:13px}.collection-intro h1{font-size:46px}.collection-main{padding:35px 6% 65px}.collection-pending h2{font-size:22px}.collection-pending p{font-size:16px}footer nav{flex-wrap:wrap}}

/* Project presentation follows the supplied before/after slides. */
.designs-main{overflow:hidden;background:#000}
.designs-toolbar{padding:32px 3% 0;display:flex;justify-content:space-between;align-items:center;gap:20px}
.designs-toolbar p{font-size:15px;color:#aaa;margin:0}
.design-project{position:relative;overflow:hidden;border-bottom:1px solid #ffffff12}
.project-stage{position:relative;aspect-ratio:16/9;width:100%;background:radial-gradient(ellipse at 94% 115%,#723000 0%,#3c1800 16%,transparent 49%),#000;isolation:isolate}
.project-heading{position:absolute;left:50%;top:15.3%;width:44.3%;height:85%;transition:transform 1000ms cubic-bezier(.22,.75,.18,1);will-change:transform}
.project-heading h2{font-family:Arial,sans-serif;font-size:clamp(24px,2.7vw,52px);font-weight:500;line-height:1.18;margin:0}
.project-heading>span{position:absolute;right:0;top:6%;font-size:clamp(24px,2.7vw,52px);font-weight:500}
.outline-mark{position:absolute;left:7.4%;top:26%;width:89%;height:auto;fill:none;stroke:#ded7cd;stroke-width:2.2;overflow:visible}
.project-stack{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:none;color:inherit;cursor:pointer;text-align:left;z-index:2}
.project-card{position:absolute;top:15.8%;width:31.3%;height:68.5%;object-fit:contain;object-position:left center;transition:left 1000ms cubic-bezier(.22,.75,.18,1),width 1000ms cubic-bezier(.22,.75,.18,1),transform 250ms ease,filter 800ms ease;box-shadow:0 0 0 1px #ffffff0a;will-change:left,transform}
.card-1{left:3.2%;z-index:3}.card-2{left:7.4%;z-index:2;filter:brightness(.72)}.card-3{left:12.7%;z-index:1;filter:brightness(.48)}
@media(hover:hover){.design-project:not(.is-open) .project-stack:hover .project-card{transform:translateY(-10px)}.design-project:not(.is-open) .project-stack:hover .card-2{transform:translate(5px,-10px)}.design-project:not(.is-open) .project-stack:hover .card-3{transform:translate(10px,-10px)}}
.project-stack:focus-visible{outline:2px solid #fa6500;outline-offset:-8px}
.is-open .project-heading{transform:translateX(125vw)}
.is-open .project-card{width:30.7%;filter:brightness(1);transform:none}
.is-open .card-1{left:2.9%}.is-open .card-2{left:34.75%}.is-open .card-3{left:66.6%}
.is-open .project-stack{cursor:default}
.project-reset{position:absolute;bottom:4%;right:3%;z-index:4;border:1px solid #ffffff45;border-radius:30px;background:#0008;color:#ddd;font:14px "CoFo Sans Arabic",Arial,sans-serif;padding:10px 20px;cursor:pointer}
.project-reset[hidden]{display:none}.project-reset:hover{border-color:#fa6500;color:#fff}.project-reset:focus-visible{outline:2px solid #fa6500;outline-offset:4px}
@media(max-width:650px){.designs-toolbar{padding:25px 5% 0;align-items:flex-start;flex-direction:column;gap:12px}.designs-toolbar p{font-size:13px}.project-stage{aspect-ratio:auto;height:520px;overflow-x:auto;overflow-y:hidden}.project-heading{left:54%;top:16%;width:40%}.project-heading h2{font-size:clamp(16px,4vw,24px)}.project-heading>span{top:17%;font-size:22px}.outline-mark{top:34%;left:0;width:110%}.project-card{top:20%;width:45%;height:60%}.card-1{left:5%}.card-2{left:9%}.card-3{left:13%}.is-open .project-heading{transform:translateX(150vw)}.is-open .project-card{width:70%;height:75%;top:9%}.is-open .card-1{left:5%}.is-open .card-2{left:80%}.is-open .card-3{left:155%}.is-open .project-stack{width:100%}.is-open .project-stack:after{content:"";position:absolute;left:225%;width:5%;height:1px}.project-reset{position:sticky;float:right;top:455px;right:20px;margin-right:20px}.design-project{border-bottom:1px solid #222}}

/* Align the bilingual copy with the visible brand mark. */
@media(min-width:901px){
 .about{grid-template-columns:1.48fr 1fr;gap:8%;}
 .about-copy{font-size:clamp(18px,1.55vw,30px);line-height:1.2;}
 .about-copy p{margin-bottom:28px;}
 .about-copy .arabic{line-height:1.25;}
 .about-copy .arabic p:last-child{margin-bottom:24px;}
 .about-copy .english{border-top:1px solid #ffffffa0;padding-top:22px;}
 .about-copy .english p:last-child{margin-bottom:0;}
 .services-title h2{font-size:clamp(45px,6.3vw,100px);line-height:1.23;}
}
@media(max-width:900px){.about-copy .english{border-top:1px solid #ffffff80;padding-top:24px;}}

.contact-details{display:flex;align-items:center;flex-wrap:wrap;gap:26px;margin-top:34px;padding-left:90px}
.whatsapp-button{display:inline-flex;gap:18px;align-items:center;justify-content:center;background:#fa6500;color:#fff;padding:17px 28px;border-radius:40px;font-size:clamp(18px,1.8vw,26px);transition:background .2s,transform .2s}
.whatsapp-button:hover{background:#ff7c26;transform:translateY(-3px)}
.contact-phone{font-family:Arial,sans-serif;font-size:clamp(20px,2vw,30px);white-space:nowrap}.contact-phone:hover{color:#ff8c3e}
@media(max-width:520px){.contact-details{align-items:flex-start;flex-direction:column;gap:20px;padding-left:45px}.whatsapp-button{padding:14px 22px;font-size:18px}.contact-phone{font-size:22px}}

/* Solid Line navigation button and footer social link. */
.contact-button{display:inline-flex;align-items:center;justify-content:center;gap:24px;background:#fa6500;border:1px solid #fa6500;border-radius:10px;padding:18px 25px;font:700 clamp(14px,1.45vw,22px)/1 Arial,sans-serif;letter-spacing:.04em;box-shadow:none;transition:background .2s,border-color .2s,transform .2s}
.contact-button .contact-label{display:block}.contact-chevron{flex-shrink:0;transition:transform .2s}
.contact-button:hover{filter:none;background:#e75b00;border-color:#ff9149;transform:translateY(-2px)}.contact-button:hover .contact-chevron{transform:translate(2px,-2px)}
.instagram-link{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;border:1px solid #ffffff45;border-radius:10px;color:#fff;transition:color .2s,border-color .2s,background .2s}
footer .instagram-link:hover{color:#fa6500;border-color:#fa6500;background:#fa650014}
@media(max-width:900px){.contact-button{font-size:16px;padding:15px 20px;gap:18px}}
@media(max-width:520px){.contact-button{font-size:12px;padding:13px 15px;gap:12px;border-radius:8px}.contact-chevron{width:18px;height:18px}}

/* Footer matches the supplied wordmark, centered links and social column. */
.site-footer{display:grid;grid-template-columns:180px minmax(0,1fr) 180px;align-items:center;gap:32px;min-height:160px;padding:30px 4.3%;background:#000;border-top:1px solid #ffffff20;color:#aaa}
.site-footer .footer-wordmark{position:relative;display:block;width:110px;height:77px;overflow:hidden}
.site-footer .footer-wordmark img{position:absolute;top:0;left:-80px;display:block;width:198px;height:77px;max-width:none}
.site-footer .footer-nav{display:flex;justify-content:center;align-items:center;gap:clamp(28px,3.5vw,65px);order:0;width:auto;font-family:"CoFo Sans Arabic",Arial,sans-serif;font-size:clamp(17px,1.4vw,26px);font-weight:300;line-height:1.4}
.site-footer .footer-social{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;justify-self:end}
.site-footer .instagram-link{width:36px;height:36px;border:0;border-radius:0;background:none;color:#aaa}
.site-footer .instagram-link:hover{background:none;color:#fa6500}
.site-footer .footer-copyright{white-space:nowrap;font:16px/1.3 Arial,sans-serif;color:#ccc}
@media(max-width:900px){.site-footer{grid-template-columns:120px minmax(0,1fr) 150px;gap:20px;padding:28px 5%}.site-footer .footer-nav{gap:20px;flex-wrap:wrap;font-size:18px}.site-footer .footer-copyright{font-size:14px}}
@media(max-width:650px){.site-footer{grid-template-columns:1fr 1fr;gap:28px;min-height:0;padding:30px 6%}.site-footer .footer-nav{grid-column:1/-1;grid-row:2;gap:24px;justify-content:center;font-size:17px}.site-footer .footer-social{grid-column:2;grid-row:1}.site-footer .footer-wordmark{grid-column:1;grid-row:1}}

/* Clip to the actual folder silhouette: no external glow or background. */
.portfolio{background:#000}
.folder-link img{-webkit-mask-image:url("assets/design-folder-mask.svg");mask-image:url("assets/design-folder-mask.svg");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-over;mask-composite:add;filter:none;box-shadow:none}
.folder-link:nth-child(2) img{-webkit-mask-image:url("assets/reels-folder-mask.svg");mask-image:url("assets/reels-folder-mask.svg")}

/* Live portfolio objects with a restrained brand gradient. */
.portfolio-live{padding:110px 6% 130px;max-width:none;background:radial-gradient(ellipse at 50% -5%,#71300055 0%,#32150028 38%,transparent 72%),#000}
.portfolio-live .portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:10%;width:100%;max-width:1600px;margin:auto}
.portfolio-live .portfolio-grid:after{display:block;top:22%;height:58%;background:#ffffff50}
.portfolio-live .folder-link{transform-origin:50% 65%;transition:transform .38s cubic-bezier(.2,.75,.2,1)}
.portfolio-live .folder-link img{width:100%;height:auto;max-width:none;margin:auto}
.portfolio-live .folder-link p{font-size:clamp(18px,1.8vw,30px);line-height:1.45;margin-top:24px;font-weight:300}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .portfolio-live .folder-link:hover{transform:translateY(-10px) scale(1.035)}
 .symbol{transition:transform .5s cubic-bezier(.2,.75,.2,1)}.symbol:hover{transform:translateY(-6px) scale(1.015)}
 .logo img{transition:transform .3s}.logo:hover img{transform:translateY(-2px) scale(1.025)}
 .site-footer .footer-wordmark{transition:transform .3s}.site-footer .footer-wordmark:hover{transform:translateY(-3px)}
 .collection-nav a,.footer-nav a,.breadcrumb{display:inline-block;transition:color .2s,transform .3s}.collection-nav a:hover,.footer-nav a:hover,.breadcrumb:hover{transform:translateY(-3px)}
 .instagram-link svg{transition:transform .3s}.instagram-link:hover svg{transform:translateY(-3px) scale(1.08)}
 .discover:hover,.back-top:hover{transform:translateY(-4px)}
 .service:active,.contact-button:active,.whatsapp-button:active{transform:scale(.98)}
}
.discover,.back-top{transition:transform .3s,background .3s,border-color .3s}
@media(max-width:900px){.portfolio-live{padding:75px 6% 90px}.portfolio-live .portfolio-grid{gap:7%}}
@media(max-width:650px){.portfolio-live{padding:65px 6%}.portfolio-live .portfolio-grid{grid-template-columns:1fr;gap:55px}.portfolio-live .portfolio-grid:after{display:none}.portfolio-live .folder-link img{max-width:440px}.portfolio-live .folder-link p{font-size:20px;margin-top:14px}}
@media(prefers-reduced-motion:reduce){.portfolio-live .folder-link:hover,.symbol:hover,.logo:hover img,.site-footer .footer-wordmark:hover{transform:none!important}}