@charset "UTF-8";
/* ===== Play layer: light by Cairo time, colouring, notebook desk, listen tool, swatches, face, tear-offs ===== */

/* --- Light: day / night by Cairo time (concept "Diaa = light") --- */
html[data-light="night"]{
  --paper:#12110F;--white:#1C1A17;--ink:#EFECE6;--grey:#8E8981;--ghost:#26231F;--line:#36322C;
  --peach:#2C211B;--blush:#221A15;color-scheme:dark;
}
html[data-light="night"] body::before{background:var(--paper)}
html{transition:background-color .6s}
body{transition:background-color .6s,color .6s}
.lt-night{display:none}
html[data-light="night"] .lt-night{display:inline}
html[data-light="night"] .lt-day{display:none}
.hdr .clock{grid-column:9/11}
.light-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;display:grid;place-items:center;padding:0}
.light-btn i{width:12px;height:12px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 25%,transparent);transition:transform .4s}
html[data-light="night"] .light-btn i{background:transparent;box-shadow:inset -4px -2px 0 0 var(--ink);transform:rotate(-30deg)}
/* the room light: a warm pool around the cursor, darker edges */
html[data-light="night"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:45;
  background:radial-gradient(circle at var(--mx,50%) var(--my,35%),rgba(255,196,150,.09) 0,rgba(255,196,150,.03) 220px,rgba(0,0,0,.30) 720px);transition:background .2s}
html[data-light="night"] .ftr{background:#0A0908;color:#EFECE6}

/* --- Face logo --- */
.face{display:block;fill:var(--signal);overflow:visible}
.face .eyes,.face .brows{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.face .eye{transform-box:fill-box;transform-origin:center;transition:transform .18s}
.face.happy .brows{transform:translateY(-46px)}
.face.wink .eye.r{transform:scaleY(.15)}
.face.blink .eye{transform:scaleY(.1)}
.face-sm{width:30px;height:auto}
.hdr .brand{gap:10px}
.face-lg{width:72px;height:auto}
.ftr-top{display:flex;align-items:center;gap:22px;margin-bottom:28px}
.ftr .face{fill:var(--signal)}

/* --- Arabic signature (masked so it takes any colour) --- */
.sig{display:inline-block;width:120px;aspect-ratio:1518/1594;background:currentColor;
  -webkit-mask:url("../img/signature.png") center/contain no-repeat;mask:url("../img/signature.png") center/contain no-repeat;max-width:100%}
.sig-red{color:var(--signal)}
.tagline-row .sig{grid-column:1/4;width:84px}
.ftr .sig{width:70px;color:#EFECE6}
.about-hero .txt .sig{width:110px;margin-top:6px}

/* --- "Design colors life": marker draws under the word --- */
.mark-draw{color:var(--signal);background:linear-gradient(color-mix(in srgb,var(--signal) 22%,transparent),color-mix(in srgb,var(--signal) 22%,transparent)) no-repeat 0 88%/0% 38%;animation:draw 1.1s .5s cubic-bezier(.6,0,.2,1) forwards;padding-inline:.06em}
[dir="rtl"] .mark-draw{background-position:100% 88%}
@keyframes draw{to{background-size:100% 38%}}

/* --- Colouring: work starts grey, colours on hover, as you scroll, and when arranged --- */
.mono img{filter:grayscale(var(--gs,1)) contrast(1.02);transition:filter .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
a:hover .mono img,a:focus-visible .mono img,.mono:hover img,.is-arranged .mono img,.colored .mono img{filter:none}
.work .ph img,.wrow .peek img{filter:grayscale(var(--gs,1));transition:filter .6s}
.work:hover .ph img,.wrow:hover .peek img{filter:none}

/* hero lens */
.hero-photo{position:relative;width:min(40vw,540px);aspect-ratio:1923/2576;margin-inline-start:auto;margin-inline-end:6vw;overflow:hidden;background:#E4E5E0;max-width:100%;--lr:0px;--lx:50%;--ly:40%}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-photo .base{filter:grayscale(1) contrast(1.05)}
.hero-photo .top{clip-path:circle(var(--lr) at var(--lx) var(--ly));transition:clip-path .08s linear}
.hero-photo.flood .top{transition:clip-path 1.1s cubic-bezier(.6,0,.2,1)}
.lens-hint{position:absolute;inset:auto auto 12px 12px;z-index:3;background:var(--paper);color:var(--ink);padding:4px 10px;border-radius:999px;transition:opacity .3s}
[dir="rtl"] .lens-hint{inset:auto 12px 12px auto}
.lens-hint{color:var(--ink)}
.hero-photo.flood .lens-hint{opacity:0}
.lens-auto img{filter:grayscale(1);transition:filter 1.4s ease .4s}
.lens-auto.in img,.lens-auto:hover img{filter:none}
@media (max-width:760px){.hero-photo{width:78vw;margin-inline-end:0}}

/* --- Notebook desk (concept "The Agenda") --- */
.desk-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:14px;border-top:1px solid var(--ink)}
.desk-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.desk{position:relative;height:880px;border-bottom:1px solid var(--line);transition:height .7s cubic-bezier(.6,0,.2,1);
  background:
    linear-gradient(90deg,transparent calc(8.33% - .5px),color-mix(in srgb,var(--signal) 45%,transparent) calc(8.33% - .5px),color-mix(in srgb,var(--signal) 45%,transparent) calc(8.33% + .5px),transparent calc(8.33% + .5px)),
    repeating-linear-gradient(to bottom,transparent 0 39px,var(--line) 39px 40px);}
[dir="rtl"] .desk{background:
    linear-gradient(270deg,transparent calc(8.33% - .5px),color-mix(in srgb,var(--signal) 45%,transparent) calc(8.33% - .5px),color-mix(in srgb,var(--signal) 45%,transparent) calc(8.33% + .5px),transparent calc(8.33% + .5px)),
    repeating-linear-gradient(to bottom,transparent 0 39px,var(--line) 39px 40px)}
.cut{position:absolute;top:0;left:0;width:17%;display:block;background:var(--white);padding:10px 10px 12px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 10px 24px -14px rgba(0,0,0,.35);
  transform:translate(var(--tx,0px),var(--ty,0px)) rotate(var(--rot,0deg));transition:transform .8s cubic-bezier(.6,0,.2,1),box-shadow .3s;touch-action:pan-y;user-select:none;-webkit-user-drag:none;will-change:transform}
.cut img{pointer-events:none}
.cut:hover{box-shadow:0 1px 0 rgba(0,0,0,.04),0 22px 40px -18px rgba(0,0,0,.45)}
.cut.dragging{transition:none;cursor:grabbing;z-index:20}
.cut .cap{display:flex;gap:6px;align-items:baseline;font-size:.8rem;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cut .cap .idx{color:var(--signal)}
.cut .cap span:last-child{color:var(--grey)}
.tape{position:absolute;top:-10px;left:50%;width:74px;height:22px;transform:translateX(-50%) rotate(-3deg);background:color-mix(in srgb,var(--signal) 28%,rgba(255,255,255,.55));opacity:.85;z-index:2;mix-blend-mode:multiply}
html[data-light="night"] .tape{mix-blend-mode:normal;background:color-mix(in srgb,var(--signal) 40%,transparent)}
.is-arranged .cut{--rot:0deg !important}
.is-arranged .tape{opacity:0;transition:opacity .4s}
@media (max-width:760px){.cut{width:44%;padding:6px 6px 8px}.cut .cap{font-size:.72rem}.desk-actions .hint{display:none}}
@media (pointer:fine){.cut{cursor:grab}}

/* --- Listen tool --- */
.listen-grid{row-gap:40px;align-items:start}
.listen-ctl{grid-column:1/6;display:grid;gap:16px;align-content:start}
.listen-p{font-size:1.15rem;max-width:26em}
.words{display:flex;flex-wrap:wrap;gap:8px}
.word{font:inherit;font-size:1rem;border:1px solid var(--line);background:none;color:var(--ink);border-radius:999px;padding:8px 18px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.word:hover{border-color:var(--ink)}
.word[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:#fff}
.word:active{transform:scale(.96)}
.brand-input{font:inherit;font-size:1.3rem;border:0;border-bottom:1px solid var(--ink);background:none;color:var(--ink);padding:6px 0;width:100%;max-width:22em;outline:none}
.brand-input:focus{border-color:var(--signal)}
.listen-note{min-height:1.6em;color:var(--grey)}
.listen-actions{display:flex;gap:10px;flex-wrap:wrap}
.specimen{grid-column:7/13;margin:0;position:relative;aspect-ratio:4/3;max-width:100%;overflow:hidden;display:grid;place-content:center;justify-items:center;text-align:center;gap:10px;padding:28px;
  --s-bg:var(--white);--s-ink:var(--ink);--s-acc:var(--signal);--s-w:500;--s-ls:-.03em;--s-tt:none;--s-size:1;--s-rad:0px;--s-rot:0deg;
  background:var(--s-bg);color:var(--s-ink);transition:background .5s,color .5s;border:1px solid var(--line)}
.specimen figcaption{position:absolute;top:14px;inset-inline-start:16px;color:inherit;opacity:.6}
.sp-name{font-size:calc(clamp(2.4rem,6vw,5.2rem) * var(--s-size));font-weight:var(--s-w);letter-spacing:var(--s-ls);text-transform:var(--s-tt);line-height:1;transition:all .5s cubic-bezier(.6,0,.2,1);position:relative;z-index:2;max-width:100%;overflow-wrap:anywhere;transform:rotate(var(--s-rot))}
[dir="rtl"] .sp-name{letter-spacing:0;line-height:1.3}
.sp-line{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7;position:relative;z-index:2}
[dir="rtl"] .sp-line{letter-spacing:0}
.sp-words{font-size:.85rem;color:var(--s-acc);position:relative;z-index:2;min-height:1.2em}
.sp-shape{position:absolute;z-index:1;background:var(--s-acc);transition:all .6s cubic-bezier(.6,0,.2,1);width:22%;aspect-ratio:1;inset-inline-end:8%;top:12%;border-radius:var(--s-rad);opacity:.9}
.specimen[data-shape="circle"] .sp-shape{border-radius:50%;width:30%;opacity:.25}
.specimen[data-shape="bar"] .sp-shape{width:100%;aspect-ratio:auto;height:14px;inset-inline-end:0;top:auto;bottom:0;border-radius:0}
.specimen[data-shape="sun"] .sp-shape{border-radius:50% 50% 0 0;width:34%;aspect-ratio:2/1;top:auto;bottom:0;inset-inline-end:33%;opacity:.85}
.specimen[data-shape="line"] .sp-shape{width:40%;aspect-ratio:auto;height:1px;top:68%;inset-inline-end:30%}
.specimen[data-shape="blob"] .sp-shape{border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;width:34%;inset-inline-end:-4%;top:-6%;animation:wob 6s ease-in-out infinite}
.specimen[data-shape="square"] .sp-shape{width:12%;top:10%;inset-inline-end:6%}
.specimen[data-shape="arch"] .sp-shape{border-radius:999px 999px 0 0;width:18%;aspect-ratio:2/3;top:auto;bottom:0;inset-inline-end:10%}
.specimen[data-shape="grid"] .sp-shape{width:100%;height:100%;aspect-ratio:auto;inset:0;opacity:.14;background:transparent;
  background-image:linear-gradient(var(--s-acc) 1px,transparent 1px),linear-gradient(90deg,var(--s-acc) 1px,transparent 1px);background-size:24px 24px}
@keyframes wob{50%{border-radius:58% 42% 37% 63% / 59% 56% 44% 41%;transform:rotate(12deg)}}
.sp-pal{position:absolute;bottom:14px;inset-inline-start:16px;display:flex;gap:6px;z-index:2}
.sp-pal i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(127,127,127,.35)}
.sp-pal i:nth-child(1){background:var(--s-bg)}.sp-pal i:nth-child(2){background:var(--s-ink)}.sp-pal i:nth-child(3){background:var(--s-acc)}
@media (max-width:860px){.listen-ctl,.specimen{grid-column:1/-1}}
.brief{border:1px solid var(--signal);padding:18px;display:grid;gap:10px}
.brief-txt{font-size:1.25rem}

/* --- Swatches (concept "Colour index") --- */
.chip-sw{display:inline-flex;gap:10px;align-items:center;font-size:.78rem;line-height:1.25;color:var(--grey);min-width:0}
.chip-sw i{width:34px;height:42px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.chip-sw b{color:var(--ink);font-weight:500}
.chip-sw.sm i{width:22px;height:28px}
.wrow h3{grid-column:2/6}
.wrow .chip-sw{grid-column:6/8}
.wrow .f{grid-column:8/10}
@media (max-width:760px){.wrow .chip-sw{display:none}}
body.tinted{background:color-mix(in srgb,var(--tint) var(--tint-mix,24%),var(--paper))}
html[data-light="night"] body.tinted{--tint-mix:12%}
.fan-sec{padding-bottom:56px}
.fan{display:flex;gap:0;margin-top:14px;padding-bottom:12px;overflow-x:auto;scrollbar-width:thin}
.fan-card{flex:0 0 150px;height:210px;background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;margin-inline-end:-38px;
  transform:rotate(calc((var(--i) - 3.5) * 2.2deg)) translateY(calc(var(--i) * 0px));transform-origin:50% 120%;transition:transform .35s cubic-bezier(.2,.7,.2,1),margin .35s;position:relative;z-index:calc(var(--i) + 1)}
.fan-card:hover,.fan-card:focus-visible{transform:rotate(0) translateY(-14px);margin-inline-end:6px;z-index:20}
.fan-top{flex:1;background:var(--c)}
.fan-txt{padding:10px;display:grid;gap:2px;font-size:.78rem;line-height:1.25}
.fan-txt .idx{color:var(--grey)}
.fan-txt b{font-size:.95rem;font-weight:700}
.fan-txt span:last-child{color:var(--grey)}
@media (max-width:760px){.fan-card{flex-basis:120px;height:170px;margin-inline-end:-30px}}

/* --- Tear-off email strips --- */
.tear{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;margin:-24px 0 56px;border-top:1px dashed #3A3833;padding-top:0}
.tear .lbl{padding-top:12px}
.strips{display:flex;overflow:hidden;max-width:100%}
.strip-t{all:unset;cursor:pointer;width:34px;height:150px;border-inline-end:1px dashed #3A3833;display:grid;place-items:center;transition:transform .7s cubic-bezier(.5,0,.75,0),opacity .7s;transform-origin:top center;flex:none}
.strip-t span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.7rem;color:#B6B2AA;white-space:nowrap;direction:ltr}
.strip-t:hover span{color:#fff}
.strip-t:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.strip-t.torn{transform:translateY(120px) rotate(14deg);opacity:0}
.strip-t.torn+.strip-t{transform:rotate(-1deg)}
.strip-t.regrow{transition:none;transform:none;opacity:0}

/* --- Custom cursor (fine pointers only) --- */
.cursor{position:fixed;top:0;left:0;z-index:200;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--signal);
  transform:translate(var(--cx,-100px),var(--cy,-100px));transition:width .25s,height .25s,margin .25s;display:grid;place-items:center;opacity:0}
.cursor span{color:#fff;font-size:.78rem;opacity:0;transition:opacity .2s;white-space:nowrap}
.cursor.on{opacity:1}
.cursor.big{width:76px;height:76px;margin:-38px 0 0 -38px}
.cursor.big span{opacity:1}
@media (pointer:fine){[data-cursor]{cursor:none}}
@media (pointer:coarse){.cursor{display:none}}

/* --- Language wipe --- */
.wipe{position:fixed;inset:0;z-index:300;background:var(--signal);color:#fff;display:grid;place-items:center;font-size:clamp(3rem,12vw,10rem);font-weight:700;letter-spacing:-.04em;
  transform:translateX(100%);transition:transform .5s cubic-bezier(.7,0,.3,1)}
[dir="rtl"] .wipe{transform:translateX(-100%)}
.wipe.go{transform:none}
html.wipe-in::after{content:"";position:fixed;inset:0;z-index:300;background:var(--signal);transition:transform .55s cubic-bezier(.7,0,.3,1)}
html.wipe-in.wipe-out::after{transform:translateX(-100%)}
html[dir="rtl"].wipe-in.wipe-out::after{transform:translateX(100%)}

/* --- 404 --- */
.lost{padding-block:80px 120px;display:grid;gap:22px;justify-items:start}
.lost-n{display:flex;align-items:center;gap:2vw;font-size:clamp(7rem,26vw,22rem);font-weight:700;letter-spacing:-.06em;line-height:.8}
.lost-cut{position:relative;display:block;width:clamp(110px,18vw,240px);background:var(--white);padding:8px;transform:rotate(-9deg);box-shadow:0 18px 40px -20px rgba(0,0,0,.5);animation:sway 5s ease-in-out infinite}
.lost h1{font-size:clamp(2rem,5vw,4rem)}
.lost p{max-width:30em;font-size:1.1rem;display:flex;gap:10px;flex-wrap:wrap}
@keyframes sway{50%{transform:rotate(-4deg) translateY(-8px)}}

@media (prefers-reduced-motion:reduce){.mark-draw{animation:none;background-size:100% 38%}.specimen .sp-shape{animation:none}}

/* ===== Review fixes ===== */
/* tools list: keep name and category apart */
.tools div{padding-inline-end:24px}
/* swatch chip sits under the "Services & Info" label */
.cs-meta .lbl.h{display:grid;gap:14px;align-content:start}
.cs-meta .lbl.h .chip-sw{color:var(--grey)}
/* phone header: brand + controls on one row, nav below */
@media (max-width:560px){.hdr .right{grid-row:1;grid-column:2}.hdr .brand{grid-row:1}.hdr nav{grid-row:2}}
/* lens hint out of the name's way */
.lens-hint{inset:12px auto auto 12px}
[dir="rtl"] .lens-hint{inset:12px 12px auto auto}
/* cut-out captions wrap instead of cutting off */
.cut .cap{white-space:normal;flex-wrap:wrap;row-gap:0}
.cut .cap span:last-child{flex-basis:100%}
/* ghost words stay readable on tinted case-study pages */
.words span:nth-child(even){color:color-mix(in srgb,var(--ink) 22%,transparent)}

/* single, upright email ticket */
.strips{overflow:visible}
.strip-t{width:auto;height:auto;padding:14px 22px;border:1px dashed #4A4741;border-radius:2px;transform-origin:left top}
[dir="rtl"] .strip-t{transform-origin:right top}
.strip-t span{writing-mode:horizontal-tb;transform:none;font-size:clamp(1rem,2vw,1.4rem);color:#EFECE6}
.strip-t:hover{border-color:var(--signal)}
.strip-t:hover span{color:var(--signal)}
.strip-t.torn{transform:translateY(60px) rotate(8deg)}
.tear{align-items:center;gap:20px;padding-top:24px}
.tear .lbl{padding-top:0}
.wrow h3{grid-column:2/7}
.wrow .f{grid-column:7/10}
.ftr .c2 .strips{margin-top:6px}
.ftr .c2 .strip-t{padding:8px 14px}
.ftr .c2 .strip-t span{font-size:1rem}
@media (max-width:760px){.ftr .c2{grid-column:1/-1;order:-1}.ftr .c2 .strip-t{max-width:100%}}

/* Arabic hero: the calligraphy replaces the typeset name */
.hero-sig{line-height:0}
.sig-hero{display:block;width:clamp(200px,36vw,540px);color:var(--signal);margin-inline-start:2vw}
[dir="rtl"] .hero-name.hero-sig{inset:auto 0 3vw 0}
@media (max-width:760px){.sig-hero{width:46vw}[dir="rtl"] .hero-name.hero-sig{inset:auto 0 16px 0}}

/* ===== Header v2: everything on one centred line; clock is a light switch ===== */
.hdr .grid{align-items:center}
.hdr nav{grid-column:4/8}
.hdr .right{grid-column:8/13;gap:12px}
.clock-pill{font:inherit;font-size:.82rem;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 10px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--ink);cursor:pointer;white-space:nowrap;transition:border-color .25s,background .25s}
.clock-pill:hover,.clock-pill:focus-visible{border-color:var(--ink)}
.clk-time{font-variant-numeric:tabular-nums}
.clk-msg{display:inline-block;max-width:0;overflow:hidden;opacity:0;color:var(--grey);transition:max-width .45s cubic-bezier(.6,0,.2,1),opacity .3s}
.clock-pill:hover .clk-msg,.clock-pill:focus-visible .clk-msg{max-width:16em;opacity:1}
.orb{position:relative;width:12px;height:12px;border-radius:50%;background:var(--signal);flex:none;box-shadow:0 0 0 0 color-mix(in srgb,var(--signal) 45%,transparent);animation:glow 2.8s ease-in-out infinite;transition:background .4s,box-shadow .4s}
@keyframes glow{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--signal) 0%,transparent)}}
html[data-light="night"] .orb{background:transparent;box-shadow:inset -4px -2px 0 0 var(--ink);animation:none;transform:rotate(-30deg)}
.clock-pill:active .orb{transform:scale(.8)}
@media (max-width:900px){.hdr nav{grid-column:4/9}.hdr .right{grid-column:9/13}.clk-msg{display:none}}
@media (max-width:560px){.clock-pill .clk-time{display:none}.clock-pill{width:32px;padding:0;justify-content:center}}
.tagline-row .t{grid-column:4/10}
@media (max-width:560px){.hdr .brand{grid-column:1;grid-row:1}.hdr .right{grid-column:2;grid-row:1}.hdr nav{grid-column:1/-1;grid-row:2}}

/* ===== UX pass ===== */
/* hero: clear next steps */
.hero-top .lead-wrap{grid-column:7/12;display:grid;gap:22px}
.hero-top .lead{grid-column:auto}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap}
.hero-ctas .down{display:inline-block;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(3px)}}
@media (max-width:760px){.hero-top .lead-wrap{grid-column:1/-1;margin-top:20px}}
.tagline-row .loc{grid-column:10/13}

/* work filter: the big words now filter the desk */
.desk-sec{padding-block:56px 96px}
.ghost-filter{display:flex;flex-wrap:wrap;gap:0 .35em;padding:0 0 18px}
.ghost-filter button{all:unset;cursor:pointer;display:inline-flex;align-items:flex-start;gap:6px;font-size:clamp(2rem,6vw,5.6rem);font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--ghost);transition:color .3s}
[dir="rtl"] .ghost-filter button{letter-spacing:0;line-height:1.35}
.ghost-filter button .idx{font-size:.8rem;font-weight:400;letter-spacing:0;color:var(--grey);padding-top:.5em}
.ghost-filter button:hover{color:color-mix(in srgb,var(--ink) 45%,transparent)}
.ghost-filter button.on{color:var(--ink)}
.ghost-filter button.on .idx{color:var(--signal)}
.ghost-filter button:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
.be-card{display:grid;place-content:center;justify-items:center;gap:10px;background:var(--ink);color:var(--paper);text-align:center;padding:16px}
.be-card b{font-size:clamp(2.4rem,5vw,4rem);line-height:1}
.be-card span{font-size:.85rem;opacity:.8}

/* credibility strip */
.proof{padding-bottom:40px}
.clients{padding-block:24px 96px}
.clients .lbl{display:block;margin-bottom:14px}
.marquee{display:flex;overflow:hidden;border-block:1px solid var(--line);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;flex:none;gap:48px;padding:22px 24px;animation:marq 38s linear infinite;font-size:clamp(1.4rem,2.6vw,2.2rem);font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.track span::after{content:"\2733";color:var(--signal);margin-inline-start:48px;font-size:.6em;vertical-align:.25em}
.marquee:hover .track{animation-play-state:paused}
.marquee{direction:ltr}
@keyframes marq{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.track{animation:none}.marquee{flex-wrap:wrap}.track[aria-hidden]{display:none}}

/* case study: summary first */
.tldr{grid-column:4/13;display:grid;grid-template-columns:1fr 1.4fr 1.4fr;gap:20px;margin:22px 0 0;border-top:1px solid var(--ink);padding-top:14px}
.tldr div{min-width:0}
.tldr dd{margin:4px 0 0;font-size:1rem}
.tldr .hl dd b{color:var(--signal);font-size:1.6rem;font-weight:700;margin-inline-end:6px}
@media (max-width:760px){.tldr{grid-column:1/-1;grid-template-columns:1fr}}

/* work page: list or grid */
.work-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.work-tools .filters{margin-bottom:0}
.view-toggle{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px}
.view-toggle button{font:inherit;font-size:.88rem;background:none;border:0;border-radius:999px;padding:6px 14px;cursor:pointer;color:var(--grey)}
.view-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.wgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 20px}
.gcard{display:grid;gap:10px;min-width:0}
.gcard:hover .mono img{transform:scale(1.03)}
.gmeta{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:.92rem}
.gmeta .idx{color:var(--signal);grid-row:span 2}
.gmeta span:last-child{color:var(--grey)}
.gcard:hover .gmeta b{color:var(--signal)}
@media (max-width:900px){.wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* contact: form first on phones */
@media (max-width:860px){.contact .form{order:-1}}

/* language button now has a word */
.lang{padding:4px 12px;white-space:nowrap}

/* phone header: one row + menu */
.menu-btn{display:none;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:none;cursor:pointer;padding:0;flex:none;position:relative}
.menu-btn span{position:absolute;left:9px;right:9px;height:1.5px;background:var(--ink);transition:transform .3s}
.menu-btn span:first-child{top:13px}.menu-btn span:last-child{top:19px}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
@media (max-width:560px){
  .menu-btn{display:block}
  .hdr .grid{grid-template-columns:1fr auto;row-gap:0}
  .hdr nav{display:none;grid-column:1/-1;grid-row:2;flex-direction:column;gap:0;padding:10px 0 6px}
  .hdr nav.open{display:flex}
  .hdr nav a{font-size:1.6rem;padding:8px 0;color:var(--ink);border-bottom:1px solid var(--line)}
  .hdr nav a[aria-current="page"]{color:var(--signal)}
  .hdr .right{gap:8px}
}

/* ===== Content blocks (case studies built from the dashboard) ===== */
.chap .main>.blk{margin-top:44px}
.chap .main>.blk:first-child{margin-top:0}
.b-title{margin-bottom:14px}
.shot{all:unset;cursor:zoom-in;display:block;min-width:0}
.shot:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.shot:hover img{transform:scale(1.02)}
.b-img{margin:0;display:grid;gap:10px}
.b-img.size-half{max-width:calc(50% - 10px)}
.b-img .nat{width:100%;height:auto;display:block}
.b-img figcaption{text-align:start}
@media (max-width:640px){.b-img.size-half{max-width:100%}}
.b-gal{display:grid;gap:12px}
.b-gal.cols-1{grid-template-columns:1fr}.b-gal.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.b-gal.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.b-gal.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:640px){.b-gal.cols-3,.b-gal.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.b-video{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--ink)}
.b-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.b-logos{display:grid;gap:12px}
.b-logos.cols-1{grid-template-columns:1fr}.b-logos.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.b-logos.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.b-logos.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.b-logos figure{margin:0;position:relative;aspect-ratio:4/3;display:grid;place-items:center;border:1px solid var(--line);overflow:hidden;max-width:100%}
.b-logos img{width:62%;height:62%;object-fit:contain}
.b-logos figcaption{position:absolute;inset:auto auto 10px 12px;font-size:.75rem}
[dir="rtl"] .b-logos figcaption{inset:auto 12px 10px auto}
@media (max-width:640px){.b-logos.cols-3,.b-logos.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pal div span{line-height:1.35}
.b-type{display:grid;border-top:1px solid var(--line)}
.ty{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;padding-block:22px;border-bottom:1px solid var(--line);align-items:center}
.ty-aa{font-size:clamp(4rem,10vw,8rem);font-weight:700;line-height:1;letter-spacing:-.04em;display:flex;gap:.2em;align-items:baseline}
.ty-aa span{font-size:.7em;color:var(--signal)}
.ty-info{display:grid;gap:6px;min-width:0}
.ty-info h4{font-size:1.6rem;letter-spacing:-.02em;line-height:1.1}
.ty-sample{font-size:1.25rem}
.ty-img{grid-column:1/-1}
@media (max-width:640px){.ty{grid-template-columns:1fr}}
.brand-cover{aspect-ratio:21/9;max-width:100%;display:grid;place-items:center;overflow:hidden}
.brand-cover img{width:60%;height:70%;object-fit:contain}
@media (max-width:640px){.brand-cover{aspect-ratio:4/3}}

/* ===== Calmer hero: text left, full portrait right, nothing overlapping ===== */
.hero2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;padding-block:40px 56px}
.h-text{display:grid;gap:26px;align-content:center;min-width:0}
.h-text .avail{display:flex;gap:8px;align-items:center;font-size:.9rem}
.h-text .avail i{width:8px;height:8px;border-radius:50%;background:#19B562}
.h-name{font-size:clamp(3.2rem,7.6vw,8.4rem);font-weight:700;line-height:.92;letter-spacing:-.05em;color:var(--signal);margin:0}
.h-name span{display:block}
[dir="rtl"] .h-name{letter-spacing:0;line-height:1.2}
.h-sig .sig{display:block;width:clamp(180px,24vw,340px)}
.h-text .lead{font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.4;max-width:30em}
[dir="rtl"] .h-text .lead{line-height:1.7}
.hero2 .hero-photo{width:100%;max-width:520px;max-height:calc(100vh - 140px);aspect-ratio:4/5;margin:0;justify-self:end}
.hero2 .hero-photo img{object-position:50% 20%}
@media (max-width:860px){
  .hero2{grid-template-columns:1fr;gap:28px;padding-block:24px 40px}
  .hero2 .hero-photo{justify-self:stretch;max-width:none;max-height:none;aspect-ratio:4/5}
}

/* ===== Quieter filter: one line of tabs ===== */
.ghost-filter{flex-wrap:nowrap;gap:28px;overflow-x:auto;scrollbar-width:none;padding:0 0 14px;border-bottom:1px solid var(--line);margin-bottom:0}
.ghost-filter::-webkit-scrollbar{display:none}
.ghost-filter button{font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:500;letter-spacing:-.01em;color:var(--grey);white-space:nowrap;position:relative;padding-bottom:6px;line-height:1.3}
[dir="rtl"] .ghost-filter button{line-height:1.5}
.ghost-filter button .idx{font-size:.7rem;padding-top:.15em}
.ghost-filter button:hover{color:var(--ink)}
.ghost-filter button.on{color:var(--ink)}
.ghost-filter button.on::after{content:"";position:absolute;inset:auto 0 -15px 0;height:2px;background:var(--signal)}
.desk-bar{border-top:0}

/* ===== Availability pulse ===== */
.avail i{position:relative;animation:live 2s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(25,181,98,.55)}70%{box-shadow:0 0 0 9px rgba(25,181,98,0)}100%{box-shadow:0 0 0 0 rgba(25,181,98,0)}}

/* ===== Client logos ===== */
.track{align-items:center;gap:64px}
.track span::after{content:none}
.cl{display:flex;align-items:center;height:48px;flex:none}
.cl img{height:100%;width:auto;max-width:160px;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .3s,opacity .3s}
.cl:hover img{filter:none;opacity:1}
html[data-light="night"] .cl img{filter:grayscale(1) invert(1);opacity:.6}
html[data-light="night"] .cl:hover img{filter:grayscale(1) invert(1);opacity:1}
.cl .wm{font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:700;letter-spacing:-.03em;color:var(--grey);transition:color .3s}
.cl:hover .wm{color:var(--ink)}
.cl+.cl::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal);margin-inline-end:64px;flex:none;display:none}

/* ===== Markets ===== */
.where-grid{row-gap:40px;align-items:center}
.where-list{grid-column:1/6;display:grid;gap:24px}
.where-p{font-size:1.05rem;color:var(--grey);max-width:30em}
.where-list ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.where-list li{display:grid;grid-template-columns:2.4em 1fr auto;gap:2px 12px;padding-block:14px;border-bottom:1px solid var(--line);cursor:default;transition:background .2s}
.where-list li .idx{color:var(--signal);font-size:.8rem;padding-top:4px}
.where-list li b{font-size:1.25rem;font-weight:500;letter-spacing:-.01em}
.where-list li .tz{font-variant-numeric:tabular-nums;color:var(--grey);justify-self:end}
.where-list li .cty,.where-list li .note{color:var(--grey);font-size:.88rem}
.where-list li.on b{color:var(--signal)}
.where-map{grid-column:7/13;min-width:0}
.globe{position:relative;width:100%;max-width:620px;margin-inline:auto;aspect-ratio:1;touch-action:pan-y;user-select:none}
.globe canvas{display:block;cursor:grab}
.globe.grab canvas{cursor:grabbing}
.map{width:100%;height:auto;display:block;overflow:visible}
.map .grid circle{fill:var(--line)}
.map .arc{fill:none;stroke:var(--signal);stroke-width:2;stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.8s cubic-bezier(.6,0,.2,1) var(--d,0s)}
.where.in .map .arc{stroke-dashoffset:0}
.map .pin circle{fill:var(--ink)}
.map .pin .halo{fill:var(--signal);opacity:0;transform-origin:center;transform-box:fill-box;transition:opacity .3s}
.map .pin.base circle:not(.halo){fill:var(--signal)}
.map .pin.base .halo{opacity:.18;animation:ping 2.4s ease-out infinite}
.map .pin.on .halo{opacity:.25}
.map .pin text{font:500 22px var(--font);fill:var(--ink)}
@keyframes ping{0%{transform:scale(.6);opacity:.35}100%{transform:scale(1.8);opacity:0}}
@media (max-width:860px){.where-list,.where-map{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.map .arc{stroke-dashoffset:0;transition:none}.map .pin.base .halo{animation:none}}

/* ===== Branding page ===== */
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 20px}
.bcard{display:grid;gap:10px;min-width:0}
.bc-tile{aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;max-width:100%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.bc-tile img{width:58%;height:58%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bcard:hover .bc-tile img{transform:scale(1.06)}
.bcard:hover .gmeta b{color:var(--signal)}
@media (max-width:900px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.bgrid{grid-template-columns:1fr}}
.be-card b{font-size:clamp(1.4rem,2.6vw,2.2rem)}
.map{direction:ltr}
.where-list li{grid-template-columns:2.4em 1fr auto;grid-template-areas:"idx name tz" "idx cty cty" "idx note note"}
.where-list li .idx{grid-area:idx}
.where-list li b{grid-area:name}
.where-list li .tz{grid-area:tz;align-self:center}
.where-list li .cty{grid-area:cty}
.where-list li .note{grid-area:note}

/* ===== Hero: name rises letter by letter ===== */
.h-name .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.h-name .ln i{font-style:normal;display:inline-block;transform:translateY(105%);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.15s + var(--i) * .045s)}
@keyframes rise{to{transform:none}}
.h-tag{font-weight:700;font-size:1.05rem;margin-top:-6px}

/* ===== Arabic calligraphy writes itself (right to left) ===== */
.sig-write{clip-path:inset(0 0 0 100%);animation:write 2.2s cubic-bezier(.55,.1,.3,1) .3s forwards}
@keyframes write{to{clip-path:inset(0 0 0 0)}}

/* ===== Face: big smile at the end of the page ===== */
.face .mouth{transform-box:fill-box;transform-origin:50% 0;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.face.joy .mouth{transform:scale(1.18,1.45)}
.face.joy .eye{transform:scaleY(.55)}
.face.joy .brows{transform:translateY(-40px)}
.face.joy.face-lg{animation:hop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes hop{40%{transform:translateY(-10px) rotate(-6deg)}}

@media (prefers-reduced-motion:reduce){.h-name .ln i{animation:none;transform:none}.sig-write{animation:none;clip-path:none}}

/* ===== Services ===== */
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.svc-item{display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;padding:20px 20px 24px 0;border-inline-end:1px solid var(--line);min-width:0;transition:color .25s}
[dir="rtl"] .svc-item{padding:20px 0 24px 20px}
.svc-item:last-child{border-inline-end:0}
.svc-item+.svc-item{padding-inline-start:20px}
.svc-item .idx{color:var(--signal);font-size:.8rem}
.svc-item h3{font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.02em;line-height:1.1}
.svc-item p{color:var(--grey);font-size:.95rem}
.svc-item .arrow{justify-self:start;transition:transform .25s}
.svc-item:hover h3{color:var(--signal)}
@media (max-width:900px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.svc-item:nth-child(2){border-inline-end:0}.svc-item:nth-child(n+3){border-top:1px solid var(--line)}.svc-item:nth-child(3){padding-inline-start:0}}
@media (max-width:520px){.svc-grid{grid-template-columns:1fr}.svc-item{border-inline-end:0;padding-inline-start:0!important;border-top:1px solid var(--line)}}

/* ===== About snippet ===== */
.about-snip .grid{row-gap:36px;align-items:start}
.as-lbl{grid-column:1/4}
.as-text{grid-column:4/13;display:grid;gap:22px}
.as-lead{font-size:clamp(1.5rem,2.8vw,2.5rem);line-height:1.2;letter-spacing:-.025em;max-width:24em}
[dir="rtl"] .as-lead{line-height:1.6;letter-spacing:0}
.as-text p:last-child{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.as-nums{grid-column:4/13}
.as-nums .row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;border-top:1px solid var(--line);padding-top:24px}
@media (max-width:860px){.as-lbl,.as-text,.as-nums{grid-column:1/-1}.as-nums .row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}}
.clients{padding-block:8px 40px}

/* ===== Arabic calligraphy drawn like handwriting: the pen traces each stroke, then the ink fills ===== */
.sig-draw{display:block;width:clamp(180px,24vw,340px);height:auto;overflow:visible}
.sig-draw path{fill:var(--signal);fill-opacity:0;stroke:var(--signal);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:pen 1.1s cubic-bezier(.6,.05,.3,1) forwards,ink .7s ease forwards;
  animation-delay:calc(.25s + var(--k) * .28s),calc(.95s + var(--k) * .28s)}
@keyframes pen{to{stroke-dashoffset:0}}
@keyframes ink{to{fill-opacity:1;stroke-opacity:0}}
@media (prefers-reduced-motion:reduce){.sig-draw path{animation:none;fill-opacity:1;stroke-dashoffset:0}}

/* ===== Contact page ===== */
.contact2{row-gap:48px;align-items:start}
.c-side{grid-column:1/5;display:grid;gap:28px;align-content:start;position:sticky;top:90px}
.c-side .avail{display:flex;gap:8px;align-items:center;font-size:.95rem}
.c-side .avail i{width:8px;height:8px;border-radius:50%;background:#19B562}
.c-mail{font-size:clamp(1.2rem,2vw,1.6rem);direction:ltr;unicode-bidi:isolate;user-select:all;word-break:break-all;margin:4px 0 12px}
.c-soc{display:flex;gap:16px;flex-wrap:wrap}
.c-form{grid-column:6/13;min-width:0}
#contact-form{display:grid;gap:26px}
.hp{display:none}
.f-row.two{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px}
.f{display:grid;gap:8px;min-width:0;border:0;margin:0;padding:0}
.f>span,.f legend{font-size:.85rem;color:var(--grey);padding:0}
.f input,.f select,.f textarea{font:inherit;font-size:1.1rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 0;width:100%;outline:none;transition:border-color .2s}
.f textarea{resize:vertical;min-height:140px;line-height:1.5}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--grey) 50%),linear-gradient(135deg,var(--grey) 50%,transparent 50%);background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-inline-end:28px}
[dir="rtl"] .f select{background-position:14px 52%,9px 52%}
.f input:focus,.f select:focus,.f textarea:focus{border-bottom-color:var(--signal)}
.f input::placeholder,.f textarea::placeholder{color:var(--grey);opacity:.7}
.f.bad input,.f.bad textarea,.f.bad .opts{border-bottom-color:var(--signal)}
.opts{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
.opt{position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:.95rem;transition:background .2s,color .2s,border-color .2s}
.opt:hover span{border-color:var(--ink)}
.opt input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.opt input:focus-visible+span{outline:2px solid var(--signal);outline-offset:2px}
.brief-chips{font-size:1.15rem}
.f-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.f-send{font-size:1rem;padding:12px 24px}
.f-send[disabled]{opacity:.6;pointer-events:none}
.f-status{min-height:1.5em;font-size:1rem}
.f-status.ok{color:#19A85A}
.f-status.err{color:var(--signal)}
#contact-form.sent .f-row,#contact-form.sent .f,#contact-form.sent .f-actions{display:none}
#contact-form.sent .f-status{font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.02em;line-height:1.3}
@media (max-width:860px){.c-side,.c-form{grid-column:1/-1}.c-side{position:static}.c-form{order:-1}.f-row.two{grid-template-columns:1fr}}