:root{
  --ink:#0E0E10; --ink2:#16161A; --paper:#F4F1EC; --paper2:#EFEBE2; --paper3:#E8E3D8;
  --orange:#FF5A1F; --orange-on-light:#C2410C; --cyan:#00E5FF; --mute:#8A8A8A; --mute-on-light:#6B6B6B;
  --line:#E0DCD2; --line-d:#26262B;
  --font:'Cairo',system-ui,sans-serif;
  --disp:var(--font); --body:var(--font); --ar:var(--font);
  --pad:clamp(1.4rem,6vw,7rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:3px}
section{padding:clamp(4rem,11vw,9rem) var(--pad);position:relative}

.anim [data-focus]{opacity:0;filter:blur(12px);transform:translateY(8px) scale(1.025)}

/* film grain */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>')}

/* blur-up images */
.blurup{overflow:hidden}
.blurup img{width:100%;height:100%;object-fit:cover;filter:blur(20px) saturate(1.15);transform:scale(1.06);transition:filter .9s ease,transform .9s ease}
.blurup.loaded img{filter:none;transform:none}

.kicker{font-family:var(--font);font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange-on-light);margin-bottom:1.4rem}
.kicker.cyan{color:var(--cyan)}
.eyebrow{font-family:var(--font);font-size:clamp(11px,2.6vw,13px);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange)}
.ar{font-family:var(--ar)}
.accent{color:var(--orange)} .accent-cy{color:var(--cyan)}

/* reticle cursor */
#reticle{position:fixed;top:0;left:0;width:34px;height:34px;margin:-17px 0 0 -17px;z-index:9999;pointer-events:none;opacity:0;transition:opacity .3s,width .25s,height .25s,margin .25s;mix-blend-mode:difference}
#reticle span{position:absolute;inset:0;border:1.5px solid #fff;border-radius:50%;clip-path:polygon(0 0,32% 0,32% 8%,8% 8%,8% 32%,0 32%, 0 0, 100% 0,100% 32%,92% 32%,92% 8%,68% 8%,68% 0, 100% 100%,68% 100%,68% 92%,92% 92%,92% 68%,100% 68%, 0 100%,0 68%,8% 68%,8% 92%,32% 92%,32% 100%);animation:retblink 4.5s infinite}
@keyframes retblink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}98%{transform:scaleY(1)}}
#reticle.focus{width:54px;height:54px;margin:-27px 0 0 -27px}
.cursor-on{cursor:none}
.cursor-on #reticle{opacity:1}

/* the open */
#open{position:fixed;inset:0;z-index:9000;background:var(--ink);display:flex;align-items:center;justify-content:center}
#open-ap{width:min(40vw,260px);aspect-ratio:1;fill:var(--orange);transform:scale(.05) rotate(-60deg);transform-origin:center}
#skip{position:absolute;bottom:2rem;inset-inline-end:2rem;background:none;border:1px solid #333;color:var(--mute);font-family:var(--font);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:.6rem 1.2rem;border-radius:40px;cursor:pointer}
#skip:hover{color:#fff;border-color:#fff}

/* nav */
#nav{position:fixed;top:0;inset-inline:0;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem var(--pad);transition:background .4s,backdrop-filter .4s;color:var(--paper)}
#nav.scrolled{background:rgba(14,14,16,.7);backdrop-filter:blur(14px)}
#nav.on-light{color:var(--ink)}
#nav.on-light.scrolled{background:rgba(244,241,236,.8)}
.brand{display:flex;align-items:flex-start;gap:.04em;font-family:var(--font);font-weight:900;font-size:1.45rem;letter-spacing:-.03em}
.brand .bap{width:.34em;height:.34em;margin-top:.18em;fill:var(--orange)}
.links{display:flex;gap:2rem}
.links a{font-family:var(--font);font-size:14px;font-weight:600;opacity:.85;transition:opacity .2s,color .2s}
.links a:hover{opacity:1;color:var(--orange)}
.nav-right{display:flex;align-items:center;gap:.9rem}
#langToggle{background:none;border:1px solid currentColor;color:inherit;font-family:var(--font);font-weight:700;font-size:13px;width:34px;height:34px;border-radius:50%;cursor:pointer;opacity:.85;transition:.3s;flex:none}
#langToggle:hover{opacity:1;color:var(--orange);border-color:var(--orange)}
.cta{font-family:var(--font);font-size:13px;font-weight:700;border:1px solid currentColor;padding:.6rem 1.2rem;border-radius:40px;transition:.3s;white-space:nowrap}
.cta:hover{background:var(--orange);border-color:var(--orange);color:#fff}

/* hero */
.hero{min-height:100svh;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{opacity:.42}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,16,.55),rgba(14,14,16,.35) 40%,var(--ink))}
.hero-glow{position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 50% 44%,rgba(0,229,255,.14),transparent 46%)}
.hero-inner{position:relative;z-index:2}
.wordmark{font-family:var(--font);font-weight:900;letter-spacing:-.04em;line-height:.86;font-size:clamp(4.2rem,19vw,16rem);display:flex;align-items:flex-start;gap:.04em;margin:.8rem 0 0}
.wordmark .bap{width:.32em;height:.32em;margin-top:.16em;fill:var(--orange)}
.wordmark .bap.big{animation:apblink 4.5s infinite;transform-origin:center}
@keyframes apblink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.06)}97.5%{transform:scaleY(1)}}
.tag{font-family:var(--font);font-weight:700;font-size:clamp(1.2rem,3.4vw,2.3rem);margin-top:1.4rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem}
.tag-accent{color:var(--cyan);font-weight:700;font-size:.85em;opacity:.9}
.hero-sub{max-width:34ch;color:#c4c2b9;font-size:clamp(1rem,2.2vw,1.25rem);margin-top:1.4rem;font-weight:400}
.hero-meta{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:2.6rem;font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.scrollcue{position:absolute;bottom:1.8rem;inset-inline-start:var(--pad);font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:.8rem;z-index:2}
.sc-l{width:46px;height:1px;background:var(--mute);position:relative;overflow:hidden}
.sc-l::after{content:"";position:absolute;inset:0;background:var(--orange);transform:translateX(-100%);animation:cue 2.4s infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* shared headings */
.sec-title{font-family:var(--font);font-weight:700;font-size:clamp(1.8rem,5vw,3.4rem);letter-spacing:-.02em;line-height:1.08}
.sec-title.light{color:var(--paper)}
.big-line{font-family:var(--font);font-weight:700;font-size:clamp(2rem,6.4vw,4.4rem);letter-spacing:-.02em;line-height:1.05}
.big-line.light{color:var(--paper)}
.lede{max-width:52ch;font-size:clamp(1.05rem,2.3vw,1.35rem);color:#3a3a38;margin-top:2rem;line-height:1.6;font-weight:400}
.lede.dim{color:#b3b1a8}

/* manifesto / the turn */
.manifesto{background:var(--paper);padding-top:clamp(5rem,13vw,11rem);overflow:hidden}
.watermark{position:absolute;inset-inline-end:-8%;top:18%;width:min(42vw,420px);fill:rgba(255,90,31,.05);pointer-events:none}
.big-line.turn{display:flex;flex-direction:column;gap:.1em}
.turn .t-soft{font-weight:300;color:#6a6a64}
.turn .t-hard{font-weight:900;color:var(--orange)}

/* work */
.work{background:var(--paper2)}
.work-head{margin-bottom:3.5rem}
.lane{margin-bottom:clamp(3rem,7vw,6rem)}
.lane-label{display:flex;align-items:center;gap:.7rem;font-family:var(--font);font-weight:700;font-size:clamp(1.1rem,2.6vw,1.5rem);margin-bottom:1.8rem;flex-wrap:wrap}
.lane-note{font-family:var(--font);font-size:13px;color:var(--mute-on-light);font-weight:400;margin-inline-start:.4rem}
.dot{width:10px;height:10px;border-radius:50%;background:var(--ink);flex:none}
.dot.live{background:var(--orange);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,90,31,.45)}70%{box-shadow:0 0 0 9px rgba(255,90,31,0)}100%{box-shadow:0 0 0 0 rgba(255,90,31,0)}}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.card{border-radius:16px;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform}
.card[data-card]{cursor:pointer}
.card:hover{transform:translateY(-6px)}
.card.prod{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.card-frag{background:var(--ink);color:var(--paper);padding:1.4rem;min-height:138px;font-family:var(--font);font-size:14px;display:flex;flex-direction:column;justify-content:center;gap:.5rem}
.frag-row{display:flex;justify-content:space-between;color:#cfcdc4}
.frag-row.tot{border-top:1px solid #2a2a30;padding-top:.5rem;margin-top:.3rem;color:var(--orange)}
.card-frag.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;align-content:center}
.card-frag.grid2 span{background:#1c1c22;border-radius:8px;padding:.6rem .7rem;color:#cfcdc4;font-size:13px;text-align:center}
.card-loyal{align-items:center;justify-content:center}
.lcard{background:linear-gradient(135deg,#FF5A1F,#b23c10);color:#fff;border-radius:12px;padding:1.5rem 1.8rem;font-family:var(--font);font-weight:700;box-shadow:0 8px 24px rgba(255,90,31,.25)}
.card-meta{padding:1.2rem 1.3rem 1.4rem}
.card-meta h3{font-family:var(--font);font-weight:700;font-size:1.4rem;letter-spacing:-.01em;margin-top:.3rem}
.card-meta p{color:var(--mute-on-light);font-size:14px;margin-top:.15rem}
.status{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-on-light)}
.prod-more{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;margin-top:1.6rem;font-family:var(--font);font-size:14px;font-weight:600}
.prod-more a{display:inline-flex;gap:.5rem;align-items:center;min-height:44px;border-bottom:1px solid var(--line);transition:.3s}
.prod-more a span{color:var(--mute-on-light);font-size:12px;font-weight:400}
.prod-more a:hover{border-color:var(--orange);color:var(--orange)}
.more-tail{color:var(--mute-on-light);font-size:13px;font-weight:400}
.card.client{background:var(--ink);color:var(--paper);display:flex;flex-direction:column}
.card-img{aspect-ratio:4/3;position:relative;display:flex;align-items:flex-end;padding:1rem;background-size:cover;background-position:center}
.card-img.imgA{background:radial-gradient(circle at 70% 30%,#2a2320,#0E0E10)}
.card-img.imgB{background:radial-gradient(circle at 30% 30%,#26262e,#0E0E10)}
.card-img.imgC{background:radial-gradient(circle at 60% 40%,#3a1c10,#0E0E10)}
.card-img::after{content:"";position:absolute;inset:0;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="rgba(255,255,255,0.04)" fill-rule="evenodd" d="M50,6 L88.11,28 L66.45,40.5 Z M88.11,28 L88.11,72 L66.45,59.5 Z M88.11,72 L50,94 L50,69 Z M50,94 L11.89,72 L33.55,59.5 Z M11.89,72 L11.89,28 L33.55,40.5 Z M11.89,28 L50,6 L50,31 Z"/></svg>') no-repeat center/52%}
.client .card-meta h3{color:var(--paper)}
.client .card-meta p{color:#9a988f}
.badge{position:relative;z-index:2;font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--cyan);padding:.35rem .8rem;border-radius:40px}

/* full-bleed coast band */
.band{height:clamp(220px,38vw,460px);position:relative}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,14,16,.25),transparent 30%,transparent 70%,rgba(14,14,16,.25))}

/* services */
.services{background:var(--paper)}
.svc-list{list-style:none;margin-top:2.5rem;border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:minmax(170px,1fr) 2fr auto;gap:1.5rem;align-items:baseline;padding:1.5rem .4rem;border-bottom:1px solid var(--line);transition:padding .4s,background .4s}
.svc:hover{padding-inline-start:1.4rem;background:var(--paper2)}
.svc-n{font-family:var(--font);font-weight:700;font-size:clamp(1.2rem,2.6vw,1.7rem);letter-spacing:-.01em}
.svc-d{color:#55544e;font-size:clamp(.95rem,2vw,1.08rem)}
.svc-tag{font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--orange);padding:.3rem .7rem;border-radius:40px;justify-self:end}
.svc.hot .svc-n{color:var(--orange-on-light)}

/* blink AI — dark island */
.blink-ai-wrap{background:var(--ink);color:var(--paper);overflow:hidden;text-align:center}
.ai-bg{position:absolute;inset:0;z-index:0}
.ai-bg img{opacity:.3}
.ai-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(14,14,16,.35),var(--ink) 72%)}
.ai-head{position:relative;z-index:2;max-width:760px;margin:0 auto 2.5rem}
.ai-head .kicker{display:inline-block}
.ai-head .lede{margin-inline:auto}
#blink-ai-mount{position:relative;z-index:2;max-width:760px;margin:0 auto}

/* why — dark, duality bg */
.why{background:var(--ink);color:var(--paper);overflow:hidden}
.why-bg{position:absolute;inset:0;z-index:0}
.why-bg img{opacity:.22}
.why-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink),rgba(14,14,16,.6) 40%,var(--ink))}
.why-bg.fallback{background:linear-gradient(90deg,rgba(255,90,31,.12),transparent 48%,transparent 52%,rgba(0,229,255,.1))}
.why-bg.fallback img{display:none}
.why>*{position:relative;z-index:2}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:4rem}
.stat{border-top:1px solid var(--line-d);padding-top:1.2rem}
.stat b{font-family:var(--font);font-weight:900;font-size:clamp(1.5rem,3.4vw,2.3rem);letter-spacing:-.01em;display:block;line-height:1.05}
.stat span{color:var(--mute);font-size:13px;margin-top:.5rem;display:block;font-weight:400}
.stat.speed b em{font-style:normal;color:var(--orange)}
.stat b.ar{color:var(--cyan);font-family:var(--ar);font-size:clamp(1.4rem,3vw,2rem)}

/* process */
.process{background:var(--paper)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:1rem}
.step{border-top:2px solid var(--ink);padding-top:1.4rem}
.step-n{font-family:var(--font);font-size:13px;font-weight:700;letter-spacing:.18em;color:var(--orange)}
.step h3{font-family:var(--font);font-weight:700;font-size:clamp(1.5rem,3.6vw,2.4rem);letter-spacing:-.01em;margin:.6rem 0 .5rem}
.step p{color:#55544e;max-width:28ch}

/* contact */
.contact{background:var(--ink);color:var(--paper);overflow:hidden}
.lens-turn{position:absolute;top:-8%;inset-inline-end:-6%;width:min(46vw,520px);aspect-ratio:1;opacity:.07;pointer-events:none}
.lens-turn svg{width:100%;height:100%;fill:var(--cyan)}
.brief{margin-top:3rem;max-width:680px;position:relative;z-index:2}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.brief label{display:block;font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:1.2rem}
.brief input{width:100%;background:transparent;border:none;border-bottom:1px solid #33333a;color:var(--paper);font-family:var(--font);font-size:1.15rem;padding:.7rem 0;margin-top:.5rem;transition:border-color .3s}
.brief input::placeholder{color:#6f6f68}
.brief input:focus{outline:none;border-color:var(--cyan)}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:1.4rem}
.want-label{font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-inline-end:.4rem}
.chip{background:transparent;border:1px solid #33333a;color:#cfcdc4;font-family:var(--font);font-weight:600;font-size:14px;padding:.5rem 1.1rem;min-height:44px;display:inline-flex;align-items:center;border-radius:40px;cursor:pointer;transition:.25s}
.chip:hover{border-color:var(--cyan)}
.chip.on{background:var(--cyan);color:var(--ink);border-color:var(--cyan)}
.send{display:inline-flex;align-items:center;gap:.7rem;background:var(--orange);color:var(--ink);border:none;font-family:var(--font);font-weight:700;font-size:1.05rem;padding:.9rem 1.8rem;border-radius:40px;cursor:pointer;margin-top:1rem;transition:.3s}
.send:hover{transform:translateY(-2px)}
.send-ap{width:1.1em;height:1.1em;fill:var(--ink)}
.send-ap.blinking{animation:apblink .18s 2}
.form-alt{color:var(--mute);font-size:14px;margin-top:1.6rem}
.form-alt a{color:var(--cyan);display:inline-block;padding:.55rem .2rem;border-bottom:1px solid transparent;transition:.2s}
.form-alt a:hover{border-color:var(--cyan)}
.form-sent{color:var(--cyan);font-family:var(--font);font-weight:600;font-size:1.1rem;margin-top:1.5rem}
.form-err{color:#FF8A6B;font-family:var(--font);font-size:14px;margin:.2rem 0 1.2rem}

/* footer */
footer{background:var(--ink);color:var(--mute);padding:2.4rem var(--pad);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-family:var(--font);font-size:13px;font-weight:600}
.f-brand{display:flex;align-items:center;gap:.05em;color:var(--paper)}
.f-brand .bap{width:.8em;height:.8em;fill:var(--orange);margin:0 .5em;align-self:flex-start;margin-top:.15em}
.f-tag{color:var(--orange)}

/* RTL */
[dir=rtl] body{letter-spacing:0}
[dir=rtl] .wordmark,[dir=rtl] .brand,[dir=rtl] .f-brand{direction:ltr}
[dir=rtl] .kicker,[dir=rtl] .eyebrow,[dir=rtl] .step-n{letter-spacing:0}
[dir=rtl] .hero-meta,[dir=rtl] .lane-note,[dir=rtl] .status,[dir=rtl] .want-label,[dir=rtl] .brief label,[dir=rtl] .badge,[dir=rtl] .svc-tag{letter-spacing:0}
[dir=rtl] .scrollcue .sc-l::after{animation-direction:reverse}
[dir=rtl] .big-line,[dir=rtl] .sec-title,[dir=rtl] .lede,[dir=rtl] .hero-sub{line-height:1.5}
[dir=rtl] .tag{line-height:1.4}

/* responsive */
@media(max-width:860px){
  .links{display:none}
  .gallery{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr;gap:1.4rem}
  .svc{grid-template-columns:1fr;gap:.4rem}
  .svc-tag{justify-self:start}
}
@media(max-width:560px){
  .gallery{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .hero-meta{gap:1rem}
  .cta{padding:.5rem .9rem;font-size:12px}
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .anim [data-focus]{opacity:1!important;filter:none!important;transform:none!important}
  .blurup img{filter:none!important;transform:none!important}
}