/* ═══════════════════════════════════════════════════════════
   Reem Aljorany Design Studio — v2
   Dark-luxe hero + editorial cream sections. RTL-ready via logical properties.
   ═══════════════════════════════════════════════════════════ */
:root{
  --night:#0c0b14; --night2:#15131f; --night3:#1e1b2c;
  --cream:#f5efe6; --cream2:#ece3d4; --paper:#fbf8f3;
  --ink:#1b1928; --ink2:#3b3850; --muted:#6d6979; --mute-d:rgba(245,239,230,.62);
  --ember:#ff6a3d; --ember2:#ffb08a; --plum:#7b5cff; --mint:#2fb39a; --sand:#f2c9a0;
  --line:rgba(27,25,40,.12); --line-d:rgba(245,239,230,.12);
  --display:'Fraunces',Georgia,serif; --body:'Manrope',system-ui,sans-serif;
  --r:24px; --ease:cubic-bezier(.2,.7,.1,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --pad:clamp(16px,5vw,80px); --maxw:1440px;
}
html[lang="ar"]{ --display:'Reem Kufi','IBM Plex Sans Arabic',sans-serif; --body:'IBM Plex Sans Arabic',system-ui,sans-serif; }

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px;overflow-x:clip}
html.no-js,html:not(.lenis){scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
body{background:var(--cream);color:var(--ink);font:400 1rem/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
html[lang="ar"] body{line-height:1.85}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
em{font-style:italic;color:var(--ember);font-weight:300}
html[lang="ar"] em{font-style:normal;font-weight:500;color:var(--ember)}
::selection{background:var(--ember);color:#fff}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:8px}
.skip{position:absolute;inset-inline-start:-999px;top:8px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px}
.skip:focus{inset-inline-start:8px}
.muted{color:var(--muted)}
.eyebrow{font:700 .74rem/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--ember)}
html[lang="ar"] .eyebrow{letter-spacing:0;font-size:.9rem}

/* ── grain + cursor ── */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 8s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}
.cursor{position:fixed;inset:0;z-index:150;pointer-events:none;display:none}
@media (pointer:fine){.js .cursor{display:block}}
.cursor-dot,.cursor-ring{position:absolute;top:0;left:0;border-radius:50%;will-change:transform}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--ember)}
.cursor-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(255,106,61,.55);transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s,border-color .35s}
.cursor.hover .cursor-ring{width:66px;height:66px;margin:-33px 0 0 -33px;background:rgba(255,106,61,.1);border-color:rgba(255,106,61,.8)}
.cursor.hidden{opacity:0}

/* ── loader ── */
.loader{position:fixed;inset:0;z-index:180;background:var(--night);color:var(--cream);display:grid;place-content:center;justify-items:center;gap:18px;pointer-events:none}
.no-js .loader{display:none}
.loader-mark .mark{width:64px;height:64px;font-size:1.9rem;border-radius:20px}
.loader-name{font:300 clamp(1.4rem,3vw,2rem)/1 var(--display);letter-spacing:.02em;opacity:.85}
.loader-bar{width:140px;height:2px;background:rgba(245,239,230,.15);overflow:hidden;border-radius:2px}
.loader-bar i{display:block;height:100%;width:100%;background:var(--ember);transform:scaleX(0);transform-origin:left;animation:load 1.1s var(--ease) forwards}
html[dir="rtl"] .loader-bar i{transform-origin:right}
@keyframes load{to{transform:scaleX(1)}}
.loaded .loader{visibility:hidden;transition:visibility 0s 1.2s}
.js .loader{animation:loaderSafety .6s 5s forwards}
@keyframes loaderSafety{to{opacity:0;visibility:hidden}}

/* ── buttons ── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 28px;border-radius:999px;font:600 .95rem/1 var(--body);text-decoration:none;border:1.5px solid transparent;cursor:pointer;overflow:hidden;isolation:isolate;transition:color .4s var(--ease),border-color .4s,background .4s,box-shadow .4s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:translateY(101%);transition:transform .55s var(--ease-out)}
.btn:hover::before{transform:translateY(0)}
.btn .arr{display:inline-block;transition:transform .4s var(--ease)}
html[dir="rtl"] .btn .arr{transform:scaleX(-1)}
.btn:hover .arr{transform:translateX(4px)}
html[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(4px)}
.btn-accent{background:var(--ember);color:#fff;box-shadow:0 18px 40px -18px rgba(255,106,61,.9)}
.btn-accent::before{background:var(--paper)}
.btn-accent:hover{color:var(--ink)}
.btn-ghost{border-color:rgba(245,239,230,.3);color:var(--cream)}
.btn-ghost::before{background:var(--cream)}
.btn-ghost:hover{color:var(--ink);border-color:var(--cream)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line::before{background:var(--ink)}
.btn-line:hover{color:var(--paper)}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-light::before{background:var(--ember)}
.btn-light:hover{color:#fff}
.btn-sm{padding:11px 20px;font-size:.86rem}
.magnetic{will-change:transform}

/* ── nav ── */
.nav{position:fixed;inset:0 0 auto;z-index:100;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px var(--pad);color:var(--cream);transition:background .45s,padding .45s,color .45s,box-shadow .45s,translate .5s var(--ease)}
.nav.solid{background:rgba(12,11,20,.72);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);padding-block:11px;box-shadow:0 1px 0 var(--line-d)}
.nav.light{background:rgba(245,239,230,.82);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.nav.away{translate:0 -110%}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--cream);color:var(--night);font:italic 500 1.25rem/1 'Fraunces',serif;letter-spacing:-.04em;position:relative;flex-shrink:0}
.mark::after{content:"";position:absolute;inset-inline-end:-3px;top:-3px;width:11px;height:11px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 2.5px var(--night)}
.nav.light .mark{background:var(--ink);color:var(--paper)}
.nav.light .mark::after{box-shadow:0 0 0 2.5px var(--cream)}
.word{display:grid;gap:5px}
.word b{font:500 1.12rem/1 var(--display);letter-spacing:-.01em}
.word small{font:600 .6rem/1 var(--body);letter-spacing:.28em;text-transform:uppercase;opacity:.6}
html[lang="ar"] .word small{letter-spacing:0;font-size:.72rem}
.links{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px);font-weight:500;font-size:.92rem}
.nav-link{text-decoration:none;position:relative;padding:6px 0;overflow:hidden;display:inline-block}
.nav-link span{display:inline-block;transition:transform .45s var(--ease)}
.nav-link::after{content:attr(data-t);position:absolute;inset-inline-start:0;top:100%}
.nav-link::before{content:"";position:absolute;inset-inline:0;bottom:0;height:1.5px;background:var(--ember);transform:scaleX(0);transform-origin:var(--to,right);transition:transform .5s var(--ease)}
html[dir="rtl"] .nav-link::before{--to:left}
.nav-link:hover::before{transform:scaleX(1);transform-origin:left}
html[dir="rtl"] .nav-link:hover::before{transform-origin:right}
.nav-end{display:flex;align-items:center;gap:12px}
.lang{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;border:1px solid var(--line-d);background:rgba(245,239,230,.06);isolation:isolate}
.nav.light .lang{border-color:var(--line);background:rgba(27,25,40,.04)}
.lang a{position:relative;z-index:1;min-width:46px;padding:7px 12px;border-radius:999px;text-align:center;text-decoration:none;font:700 .78rem/1 var(--body);letter-spacing:.04em;transition:color .4s}
.lang a[lang="ar"]{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:.86rem;letter-spacing:0}
.lang a.on{color:var(--night)}
.nav.light .lang a.on{color:var(--paper)}
.lang-pill{position:absolute;z-index:0;top:4px;bottom:4px;width:calc(50% - 4px);inset-inline-start:4px;border-radius:999px;background:var(--cream);transition:transform .5s var(--ease-out)}
.nav.light .lang-pill{background:var(--ink)}
html[lang="en"] .lang-pill{transform:translateX(0)}
html[lang="ar"] .lang-pill{transform:translateX(-100%)}
.lang a:not(.on):hover{color:var(--ember)}
.burger{display:none;width:44px;height:44px;border:0;border-radius:14px;background:var(--cream);cursor:pointer;position:relative}
.nav.light .burger{background:var(--ink)}
.burger span{position:absolute;inset-inline:12px;height:2px;background:var(--night);transition:.4s var(--ease)}
.nav.light .burger span{background:var(--paper)}
.burger span:first-child{top:17px}.burger span:last-child{top:25px}
.burger[aria-expanded=true] span:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:21px;transform:rotate(-45deg)}
.menu-cta{display:none}
@media (max-width:1060px){
  .nav-cta{display:none}
  .menu-cta{display:inline-flex;margin-top:10px}
  .burger{display:block}
  .links{position:fixed;inset:76px 12px auto;flex-direction:column;align-items:stretch;gap:2px;padding:14px;background:var(--night2);color:var(--cream);border:1px solid var(--line-d);border-radius:var(--r);box-shadow:0 40px 80px -30px rgba(0,0,0,.6);opacity:0;transform:translateY(-12px) scale(.98);pointer-events:none;transition:.4s var(--ease)}
  .links.open{opacity:1;transform:none;pointer-events:auto}
  .links .nav-link{padding:14px 12px;font-size:1.15rem}
}

/* ── HERO ── */
.hero{position:relative;min-height:100vh;min-height:100svh;background:radial-gradient(1200px 700px at 78% 30%,rgba(123,92,255,.22),transparent 60%),radial-gradient(900px 600px at 10% 100%,rgba(255,106,61,.16),transparent 60%),var(--night);color:var(--cream);overflow:clip;display:flex;align-items:center}
html[dir="rtl"] .hero{background:radial-gradient(1200px 700px at 22% 30%,rgba(123,92,255,.22),transparent 60%),radial-gradient(900px 600px at 90% 100%,rgba(255,106,61,.16),transparent 60%),var(--night)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 1px 1px,rgba(245,239,230,.07) 1px,transparent 1.3px) 0 0/28px 28px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;transition:opacity 1.4s var(--ease)}
.ready3d .hero-canvas{opacity:1}
.hero-fallback{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1s}
.no-3d .hero-fallback{opacity:1}
.hf{position:absolute;border-radius:50%;filter:blur(.5px)}
.hf1{width:260px;height:260px;inset-inline-end:14%;top:22%;background:radial-gradient(circle at 30% 30%,#fff,var(--plum) 45%,#2b1d6b);box-shadow:0 40px 80px -20px rgba(123,92,255,.6)}
.hf2{width:150px;height:150px;inset-inline-end:34%;top:52%;border-radius:36px;background:linear-gradient(140deg,var(--ember2),var(--ember) 50%,#b33a17);transform:rotate(18deg)}
.hf3{width:110px;height:110px;inset-inline-end:8%;top:60%;background:radial-gradient(circle at 30% 30%,#e9fff9,var(--mint) 55%,#0f5a4d)}
.hf4{width:300px;height:300px;inset-inline-end:20%;top:16%;border:22px solid rgba(242,201,160,.5);background:none}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:130px var(--pad) 90px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;pointer-events:none}
.hero-copy{pointer-events:auto}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border:1px solid var(--line-d);border-radius:999px;font-size:.84rem;font-weight:600;background:rgba(245,239,230,.05);backdrop-filter:blur(8px)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(47,179,154,.7);animation:ping 2.2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 12px rgba(47,179,154,0)}100%{box-shadow:0 0 0 0 rgba(47,179,154,0)}}
.hero-h1{font:350 clamp(2.9rem,7.2vw,6.6rem)/.98 var(--display);letter-spacing:-.04em;margin:26px 0 26px;font-variation-settings:"opsz" 144}
html[lang="ar"] .hero-h1{letter-spacing:0;line-height:1.18;font-weight:500;font-size:clamp(2.6rem,6.4vw,5.6rem)}
.h1-line{display:block;overflow:hidden;padding-bottom:.06em}
html[lang="ar"] .h1-line{padding-block:.04em .1em}
.h1-in{display:inline-block}
.hero-h1 em{font-weight:300}
.lede{font-size:clamp(1.02rem,1.35vw,1.16rem);color:var(--mute-d);max-width:560px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.proofs{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(20px,3.4vw,48px);margin-top:46px;padding-top:26px;border-top:1px solid var(--line-d);color:var(--mute-d);font-size:.86rem}
.proofs b{display:block;font:400 1.7rem/1.1 var(--display);color:var(--cream);margin-bottom:4px}
html[lang="ar"] .proofs b{font-weight:500}
.hero-art{position:relative;align-self:stretch;min-height:440px}
.hint{position:absolute;bottom:0;inset-inline-end:0;font-size:.78rem;letter-spacing:.06em;color:rgba(245,239,230,.4);display:flex;gap:8px;align-items:center}
.hint::before{content:"";width:22px;height:1px;background:currentColor}
@media (pointer:coarse),(max-width:900px){.hint{display:none}}
.scroll-cue{position:absolute;z-index:3;bottom:26px;inset-inline-start:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:10px;text-decoration:none;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(245,239,230,.5)}
html[dir="rtl"] .scroll-cue{transform:translateX(50%);letter-spacing:0;font-size:.8rem}
.scroll-cue i{width:1px;height:46px;background:linear-gradient(var(--cream),transparent);transform-origin:top;animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Figma-style selection box (tracks the hovered 3D shape) */
.sel{position:absolute;z-index:2;top:0;left:0;width:0;height:0;border:1.5px solid #0d99ff;pointer-events:none;opacity:0;transition:opacity .35s;will-change:transform,width,height}
.sel.on{opacity:1}
.sel i{position:absolute;width:9px;height:9px;background:#fff;border:1.5px solid #0d99ff;border-radius:2px}
.sel i:nth-child(1){left:-5px;top:-5px}.sel i:nth-child(2){right:-5px;top:-5px}.sel i:nth-child(3){left:-5px;bottom:-5px}.sel i:nth-child(4){right:-5px;bottom:-5px}
.sel-tag{position:absolute;left:-1.5px;top:-28px;padding:3px 9px;border-radius:6px 6px 6px 0;background:#0d99ff;color:#fff;font:600 .7rem/1.4 var(--body);white-space:nowrap}

@media (max-width:900px){
  .hero{align-items:flex-start}
  .hero-inner{grid-template-columns:1fr;padding-top:118px;gap:0}
  .hero-art{min-height:min(92vw,440px);order:-1;margin-bottom:-40px}
}

/* ── marquee ── */
.marquee{position:relative;z-index:3;overflow:hidden;background:var(--ember);color:#fff;padding:22px 0;margin-top:-2px}
.track{display:flex;gap:30px;width:max-content;font:400 clamp(1.3rem,2.6vw,2.1rem)/1 var(--display);white-space:nowrap;will-change:transform}
.track i{font-style:normal;opacity:.6;font-size:.7em;align-self:center}
html[lang="ar"] .track{font-weight:500}

/* ── sections ── */
.section{padding:clamp(90px,12vw,170px) var(--pad);max-width:var(--maxw);margin:0 auto}
.sec-head{max-width:820px;margin-bottom:clamp(40px,6vw,76px)}
.sec-head h2{font:350 clamp(2.3rem,5.2vw,4.6rem)/1.02 var(--display);letter-spacing:-.035em;margin-top:18px}
html[lang="ar"] .sec-head h2{letter-spacing:0;line-height:1.25;font-weight:500;font-size:clamp(2.1rem,4.6vw,4rem)}
.sec-head .muted{margin-top:16px;max-width:560px}
.split .w-line{display:block;overflow:hidden;padding-bottom:.08em}

/* services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc{position:relative;padding:34px 30px 30px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);overflow:hidden;transform-style:preserve-3d;transition:box-shadow .5s,border-color .5s}
.svc::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,106,61,.14),transparent 45%);opacity:0;transition:opacity .4s}
.svc:hover{box-shadow:0 40px 80px -40px rgba(27,25,40,.45);border-color:rgba(255,106,61,.35)}
.svc:hover::before{opacity:1}
.svc-n{position:absolute;inset-inline-end:26px;top:26px;font:400 .85rem/1 var(--display);color:var(--muted)}
.svc-ico{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:var(--cream);margin-bottom:26px;transition:background .5s,transform .6s var(--ease)}
.svc-ico svg{width:28px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s}
.svc:hover .svc-ico{background:var(--ink);transform:rotate(-8deg) scale(1.06)}
.svc:hover .svc-ico svg{stroke:var(--ember2)}
.svc h3{font:450 1.5rem/1.2 var(--display);margin-bottom:10px;position:relative}
html[lang="ar"] .svc h3{font-weight:500}
.svc p{color:var(--ink2);font-size:.96rem;position:relative}
.tags{list-style:none;display:flex;gap:8px;margin-top:20px;position:relative}
.tags li{font:700 .72rem/1 var(--body);padding:7px 12px;border-radius:999px;letter-spacing:.03em}
.tags .figma{background:rgba(123,92,255,.12);color:#5a3ddb}
.tags .canva{background:rgba(47,179,154,.14);color:#1c806d}
@media (max-width:1020px){.services{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.services{grid-template-columns:1fr}}

/* tools */
.tool-stage{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:16px;perspective:1600px}
.tool{padding:36px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);will-change:transform}
.tool h3{font:400 2.3rem/1 var(--display);margin:26px 0 6px}
.tool-for{color:var(--muted);font-size:.92rem;margin-bottom:20px}
.tool ul{list-style:none;display:grid;gap:12px}
.tool li{display:flex;gap:12px;align-items:baseline}
.tool li::before{content:"✦";color:var(--ember);font-size:.72rem}
.tool-badge{width:60px;height:60px;border-radius:18px}
.figma-b{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);padding:10px 15px;background:var(--night)}
.figma-b i:nth-child(1){background:#f24e1e;border-radius:50% 0 0 50%}
.figma-b i:nth-child(2){background:#ff7262;border-radius:0 50% 50% 0}
.figma-b i:nth-child(3){background:#a259ff;border-radius:50% 0 0 50%}
.figma-b i:nth-child(4){background:#1abcfe;border-radius:50%}
.figma-b i:nth-child(5){background:#0acf83;border-radius:50% 0 50% 50%}
.canva-b{display:grid;place-items:center;background:linear-gradient(135deg,#00c4cc,#7d2ae8);color:#fff;font:italic 600 2rem/1 'Fraunces',serif;border-radius:50%}
.tool-own{position:relative;overflow:hidden;background:var(--night);color:var(--cream);border:0;display:flex;flex-direction:column;justify-content:flex-end;min-height:360px}
.own-orb{position:absolute;inset-inline-end:-90px;top:-90px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,61,.55),transparent 68%);will-change:transform}
.tool-own .big{position:relative;font:350 clamp(2.2rem,3.6vw,3.2rem)/1.02 var(--display);margin-bottom:14px}
html[lang="ar"] .tool-own .big{line-height:1.3;font-weight:500}
.tool-own p:not(.big){position:relative;color:var(--mute-d)}
.tool .files{position:relative;list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tool .files li{display:block;padding:7px 12px;border-radius:10px;border:1px solid var(--line-d);font:600 .76rem/1 var(--body);letter-spacing:.04em;color:var(--cream)}
@media (max-width:1020px){.tool-stage{grid-template-columns:1fr 1fr}.tool-own{grid-column:1/-1;min-height:auto}}
@media (max-width:640px){.tool-stage{grid-template-columns:1fr}}

/* work — pinned horizontal gallery on desktop */
.work-sec{background:var(--night);color:var(--cream);overflow:clip}
.work-pin{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:clamp(90px,10vw,140px) 0}
.work-head{padding-inline:var(--pad);max-width:calc(820px + var(--pad)*2)}
.work-head .muted{color:var(--mute-d)}
.drag{margin-top:18px;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ember2);display:flex;gap:10px;align-items:center}
html[lang="ar"] .drag{letter-spacing:0;font-size:.9rem}
.work-track{display:flex;gap:22px;padding-inline:var(--pad);will-change:transform}
.w{flex:0 0 clamp(300px,34vw,520px);border-radius:var(--r);overflow:hidden;background:var(--night2);border:1px solid var(--line-d)}
.w-art{position:relative;aspect-ratio:4/3.4;overflow:hidden;transition:transform 1.2s var(--ease)}
.w:hover .w-art{transform:scale(1.03)}
.w figcaption{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;font-weight:600}
.w figcaption span{font:700 .72rem/1 var(--body);letter-spacing:.06em;color:var(--mute-d);padding:6px 10px;border:1px solid var(--line-d);border-radius:999px}
.wa{background:radial-gradient(circle at 30% 20%,#43306a,#14121f 70%);display:grid;place-items:center;text-align:center;color:var(--sand)}
.wa-logo{font:italic 300 clamp(3.2rem,6vw,5.6rem)/.95 'Fraunces',serif;letter-spacing:-.03em}
.wa-sub{position:absolute;bottom:24px;inset-inline:0;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(242,201,160,.55)}
html[lang="ar"] .wa-sub{letter-spacing:0;font-size:.85rem}
.wb{background:#f7d9c4;padding:26px;display:flex;gap:22px;align-items:center}
.wb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:56%;flex-shrink:0}
.wb-grid i{aspect-ratio:1;border-radius:7px;background:#8a4b2f}
.wb-grid i:nth-child(odd){background:#e8673c}.wb-grid i:nth-child(3n){background:#fbf8f3}.wb-grid i:nth-child(5){background:#1d1b2e}
.wb-t{font:italic 400 clamp(1.5rem,2.6vw,2.3rem)/1.1 var(--display);color:#5a2a16}
html[lang="ar"] .wb-t{font-style:normal;font-weight:600}
.wc{background:linear-gradient(160deg,#d9efe8,#9fd6c6);display:flex;justify-content:center;align-items:center;gap:22px}
.wc-phone{width:30%;max-width:150px;aspect-ratio:9/18;border-radius:24px;border:6px solid var(--night);background:#fff;padding:12px 9px;display:grid;gap:8px;align-content:start;transform:rotate(-7deg);box-shadow:0 30px 50px -20px rgba(0,0,0,.45)}
.wc-phone.two{transform:rotate(6deg) translateY(28px)}
.wc-phone i{height:72px;border-radius:12px;background:var(--mint)}
.wc-phone b{height:22px;border-radius:7px;background:var(--cream2)}
.wc-phone b:last-child{background:var(--ember);width:70%}
.wd{background:linear-gradient(160deg,#1e1b2c,#0c0b14);padding:30px;display:flex;flex-direction:column}
.wd small{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;opacity:.6}
html[lang="ar"] .wd small{letter-spacing:0;font-size:.8rem}
.wd b{font:400 clamp(1.9rem,3vw,2.7rem)/1.05 var(--display);margin-top:14px}
html[lang="ar"] .wd b{line-height:1.3;font-weight:500}
.wd-bars{margin-top:auto;display:flex;align-items:flex-end;gap:10px;height:110px}
.wd-bars i{flex:1;height:var(--h);border-radius:8px 8px 3px 3px;background:var(--mint)}
.wd-bars i:last-child{background:var(--ember)}
.we{background:#fbe6ea;display:grid;place-content:center;justify-items:center;gap:6px}
.we-ar{font:600 clamp(2.6rem,5vw,3.8rem)/1.2 'Reem Kufi','IBM Plex Sans Arabic',sans-serif;color:#9c2c4c}
.we-en{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:#9c2c4c}
@media (max-width:900px){
  .work-pin{min-height:0}
  .work-track{flex-direction:column}
  .w{flex-basis:auto}
  .drag{display:none}
}

/* process */
.steps-wrap{position:relative}
.steps-line{position:absolute;inset-inline:0;top:0;height:2px;background:var(--line)}
.steps-line i{display:block;height:100%;background:var(--ember);transform:scaleX(var(--p,0));transform-origin:left}
html[dir="rtl"] .steps-line i{transform-origin:right}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{padding:34px 26px 10px 0;position:relative}
html[dir="rtl"] .step{padding:34px 0 10px 26px}
.step::before{content:"";position:absolute;inset-inline-start:0;top:-6px;width:14px;height:14px;border-radius:50%;background:var(--cream);border:2px solid var(--ink2);transition:background .4s,border-color .4s,transform .4s}
.step.on::before{background:var(--ember);border-color:var(--ember);transform:scale(1.2)}
.step-n{display:block;font:italic 300 3.2rem/1 'Fraunces',serif;color:var(--ember);margin-top:12px}
.step h3{font:450 1.55rem/1.2 var(--display);margin:16px 0 8px}
html[lang="ar"] .step h3{font-weight:500}
.step p{color:var(--ink2);font-size:.96rem}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}.steps-line{display:none}.step{border-top:2px solid var(--line)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* packages */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.pack{position:relative;padding:40px 32px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .6s var(--ease),box-shadow .6s}
.pack:hover{transform:translateY(-6px);box-shadow:0 40px 80px -40px rgba(27,25,40,.4)}
.pack h3{font:400 1.95rem/1.1 var(--display)}
html[lang="ar"] .pack h3{font-weight:500;line-height:1.3}
.pack-for{color:var(--muted);margin:10px 0 24px}
.pack ul{list-style:none;display:grid;gap:12px;margin-bottom:32px;flex:1}
.pack li{padding-inline-start:26px;position:relative}
.pack li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:12px;height:7px;border-inline-start:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:rotate(-45deg) translateY(-4px)}
html[dir="rtl"] .pack li::before{transform:rotate(45deg) translateY(-4px);border-inline-start:0;border-inline-end:2px solid var(--mint)}
.pack-hot{background:var(--night);color:var(--cream);border:0;box-shadow:0 50px 90px -50px rgba(12,11,20,.9)}
.pack-hot .pack-for{color:var(--mute-d)}
.pack-hot li::before{border-color:var(--ember2)}
.ribbon{position:absolute;top:24px;inset-inline-end:24px;font:700 .68rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:var(--ember);color:#fff}
html[lang="ar"] .ribbon{letter-spacing:0;font-size:.78rem}
.pack .btn{align-self:flex-start}
@media (max-width:900px){.packs{grid-template-columns:1fr}}

/* faq */
.qa{display:grid;gap:10px;max-width:920px}
.qa details{border-radius:20px;background:var(--paper);border:1px solid var(--line);transition:border-color .4s,box-shadow .4s}
.qa details[open]{border-color:rgba(255,106,61,.4);box-shadow:0 20px 50px -30px rgba(27,25,40,.3)}
.qa summary{list-style:none;cursor:pointer;padding:24px 26px;display:flex;justify-content:space-between;gap:20px;align-items:center;font:450 1.22rem/1.35 var(--display)}
html[lang="ar"] .qa summary{font-weight:500}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:relative;width:30px;height:30px;flex-shrink:0;border-radius:50%;background:var(--cream)}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;inset:50% auto auto 50%;width:12px;height:1.6px;margin:-.8px 0 0 -6px;background:var(--ink);transition:transform .45s var(--ease)}
.qa summary i::after{transform:rotate(90deg)}
.qa details[open] summary i::after{transform:rotate(0)}
.ans{padding:0 26px 24px;color:var(--ink2);overflow:hidden}

/* contact */
.contact{max-width:none;padding-inline:var(--pad)}
.contact-card{position:relative;max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,72px);padding:clamp(34px,5.5vw,76px);border-radius:36px;background:var(--night);color:var(--cream);overflow:hidden;isolation:isolate}
.contact-glow{position:absolute;z-index:-1;inset-inline-start:-140px;bottom:-200px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,61,.4),transparent 70%);will-change:transform}
.contact h2{font:350 clamp(2.3rem,4.8vw,4.2rem)/1.04 var(--display);letter-spacing:-.03em;margin:18px 0 16px}
html[lang="ar"] .contact h2{letter-spacing:0;line-height:1.3;font-weight:500}
.contact-copy>p:not(.eyebrow){color:var(--mute-d);max-width:430px}
.direct{list-style:none;margin-top:30px;display:grid;gap:12px}
.direct a{font:400 1.3rem/1.2 'Fraunces',serif;text-decoration:none;border-bottom:1px solid rgba(245,239,230,.3);padding-bottom:4px;transition:color .3s,border-color .3s}
.direct a:hover{color:var(--ember2);border-color:var(--ember2)}
.form{display:grid;gap:14px;align-content:start}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fl{position:relative;display:block}
.fl input,.fl select,.fl textarea{width:100%;padding:24px 18px 10px;border-radius:16px;border:1px solid rgba(245,239,230,.16);background:rgba(245,239,230,.05);color:var(--cream);font-size:1rem;outline:none;transition:border-color .3s,background .3s}
.fl select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--cream) 50%),linear-gradient(135deg,var(--cream) 50%,transparent 50%);background-position:calc(100% - 22px) 55%,calc(100% - 17px) 55%;background-size:5px 5px;background-repeat:no-repeat}
html[dir="rtl"] .fl select{background-position:22px 55%,17px 55%}
.fl select option{color:var(--ink)}
.fl textarea{resize:vertical;min-height:130px}
.fl span{position:absolute;inset-inline-start:18px;top:17px;font-size:.98rem;color:var(--mute-d);pointer-events:none;transform-origin:var(--o,left) top;transition:transform .35s var(--ease),color .35s}
html[dir="rtl"] .fl span{--o:right}
.fl input:focus+span,.fl input:not(:placeholder-shown)+span,.fl textarea:focus+span,.fl textarea:not(:placeholder-shown)+span,.fl-select span{transform:translateY(-10px) scale(.76);color:var(--ember2)}
.fl input:focus,.fl select:focus,.fl textarea:focus{border-color:var(--ember2);background:rgba(245,239,230,.08)}
.hp{position:absolute;inset-inline-start:-9999px}
.form .btn{justify-self:start;margin-top:6px}
.form-msg{min-height:1.4em;font-size:.94rem}
.form-msg.ok{color:#8ff0cf}.form-msg.err{color:#ffb4a2}
@media (max-width:900px){.contact-card{grid-template-columns:1fr}}
@media (max-width:520px){.form .row{grid-template-columns:1fr}}

/* footer */
.foot{background:var(--cream);overflow:hidden;padding:20px var(--pad) calc(40px + env(safe-area-inset-bottom))}
.foot-big{font:300 clamp(4rem,15.5vw,15rem)/.9 var(--display);letter-spacing:-.05em;color:var(--ink);text-align:center;white-space:nowrap;opacity:.08;margin-bottom:20px}
html[lang="ar"] .foot-big{letter-spacing:0;font-weight:500;line-height:1.2}
.foot-in{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:16px 34px;justify-content:space-between;align-items:center;padding-top:28px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.foot .logo .mark{background:var(--ink);color:var(--paper)}
.foot .logo .mark::after{box-shadow:0 0 0 2.5px var(--cream)}
.foot .logo{color:var(--ink)}
.to-top{text-decoration:none;font-weight:600;color:var(--ink)}
.to-top:hover{color:var(--ember)}
.foot .fine{flex-basis:100%;font-size:.76rem}

/* JS-driven reveal defaults (no-JS shows everything) */
.js .rv{opacity:0;transform:translateY(40px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
  .grain,.cursor{display:none!important}
  .loader{display:none}
}